feat: 对接完接口

2025-01-09 15:47:16 +08:00
parent e70ca852d8
commit ffb887f3bf
12 changed files with 416 additions and 255 deletions
@@ -15,88 +15,129 @@
      <view class="flex mt-30">
        <view class="flex-1 text-center">
          <view class="text-14">全部</view>
-          <view class="text-16 font-bold mt-15">2份</view>
+          <view class="text-16 font-bold mt-15">
+            {{ userStore.userInfo.yanglao + userStore.userInfo.yiliao }}份
+          </view>
        </view>
        <view class="flex-1 text-center">
          <view class="text-14">养老</view>
-          <view class="text-16 font-bold mt-15">1份</view>
+          <view class="text-16 font-bold mt-15">{{ userStore.userInfo.yanglao }}份</view>
        </view>
        <view class="flex-1 text-center">
          <view class="text-14">医疗</view>
-          <view class="text-16 font-bold mt-15">未保障</view>
+          <view class="text-16 font-bold mt-15">
+            {{ userStore.userInfo.yiliao ? '保障中' : '未保障' }}
+          </view>
        </view>
      </view>
    </view>

    <view class="flex p-15 mt-15">
-      <view class="px-24 py-4 rounded-full btn-gradient text-white text-14">养老</view>
-      <view class="ml-15 px-24 py-4 rounded-full bg-#DEEBFF text-#3B81F3 text-14">医疗</view>
+      <view
+        v-for="item in tabList"
+        :key="item.value"
+        class="px-24 mr-15 bg-#DEEBFF text-#3B81F3 py-4 rounded-full text-14"
+        :class="{ 'btn-gradient text-white': item.value === tabValue }"
+        @click="tabValue = item.value"
+      >
+        {{ item.title }}
+      </view>
    </view>

    <view>
-      <view
-        v-for="item in investmentList"
-        :key="item.id"
-        class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
-      >
-        <view class="flex">
-          <image
-            class="rounded-10 w-100 h-100"
-            mode="aspectFill"
-            src="https://picsum.photos/100/100"
-          />
-          <view class="flex-1 ml-15">
-            <view class="text-15 text-#333 font-bold">{{ item.name }}</view>
-            <view class="flex items-center mt-10">
-              <view class="px-14 py-2 text-12 text-#D6A165 rounded-2 bg-#FFEBD4">商业型</view>
-              <view class="ml-8 px-14 py-2 text-12 text-#3B81F3 rounded-2 bg-#D4E8FF">低风险</view>
-            </view>
-            <view class="text-12 mt-15 text-#999">
-              此处是产品简介，此处是产品简介，此处是产品简介，此处是产
-            </view>
-          </view>
-        </view>
-        <view class="flex items-center mt-15">
-          <view class="flex-1 text-center">
-            <view class="text-15 text-#FF3B30">1.99(%)</view>
-            <view class="text-14 text-#999">日收益</view>
-          </view>
-          <view class="text-#D9D9D9">|</view>
-          <view class="flex-1 text-center">
-            <view class="text-15 text-#FF3B30">365(天)</view>
-            <view class="text-14 text-#999">周期</view>
-          </view>
-        </view>
-        <view class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15">
-          购买
-        </view>
-      </view>
-
-      <view class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15">
-        <view class="flex">
-          <image
-            class="rounded-10 w-100 h-100"
-            mode="aspectFill"
-            src="https://picsum.photos/100/100"
-          />
-          <view class="flex-1 ml-15">
-            <view class="text-15 text-#333 font-bold">好医保·长期医保(旗舰版)</view>
-            <view class="text-12 mt-15 text-#999">
-              此处是产品简介，此处是产品简介，此处是产品简介，此处是产
-            </view>
-          </view>
-        </view>
+      <template v-if="tabValue === 1">
        <view
-          class="text-center text-15 text-white rounded-full py-8 border-#3B81F3 border-1 border-solid mt-15"
+          v-for="item in investmentList"
+          :key="item.id"
+          class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
        >
-          <text class="text-gradient">查看权益</text>
+          <view class="flex">
+            <image
+              class="rounded-10 w-100 h-100"
+              mode="aspectFill"
+              :src="getImageUrl(item.rightimage)"
+            />
+            <view class="flex-1 ml-15">
+              <view class="text-15 text-#333 font-bold">{{ item.name }}</view>
+              <view class="w-200 flex items-center mt-10 overflow-x-auto">
+                <view
+                  class="px-14 mr-15 py-2 whitespace-nowrap text-12 text-#D6A165 rounded-2 bg-#FFEBD4"
+                  v-for="(tag, index) in item.labeltag.split(',')"
+                  :key="tag"
+                  :class="{
+                    '!text-#3B81F3 !bg-#D4E8FF': index % 2 === 1,
+                  }"
+                >
+                  {{ tag }}
+                </view>
+              </view>
+              <view class="text-12 mt-15 text-#999" v-html="item.content"></view>
+            </view>
+          </view>
+          <view class="flex items-center mt-15">
+            <view class="flex-1 text-center">
+              <view class="text-15 text-#FF3B30">{{ item.dividend }}(%)</view>
+              <view class="text-14 text-#999">日收益</view>
+            </view>
+            <view class="text-#D9D9D9">|</view>
+            <view class="flex-1 text-center">
+              <view class="text-15 text-#FF3B30">{{ item.days }}(天)</view>
+              <view class="text-14 text-#999">周期</view>
+            </view>
+          </view>
+          <view
+            class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15"
+            @click="onInvest(item)"
+          >
+            购买
+          </view>
        </view>
-        <view class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15">
-          我要投保
+      </template>
+
+      <template v-else>
+        <view
+          v-for="item in investmentList"
+          :key="item.id"
+          class="p-15 bg-white rounded-20 mx-auto w-345 relative mb-15"
+        >
+          <view class="flex">
+            <image
+              class="rounded-10 w-100 h-100"
+              mode="aspectFill"
+              :src="getImageUrl(item.leftimage)"
+            />
+            <view class="flex-1 ml-15">
+              <view class="text-15 text-#333 font-bold">{{ item.name }}</view>
+              <view class="text-12 mt-15 text-#999" v-html="item.content" />
+            </view>
+          </view>
+          <view
+            class="text-center text-15 text-white rounded-full py-8 border-#3B81F3 border-1 border-solid mt-15"
+          >
+            <text class="text-gradient" @click="onShowRights(item)">查看权益</text>
+          </view>
+          <view
+            class="text-center text-15 text-white rounded-full py-8 btn-gradient mt-15"
+            @click="onInvest(item)"
+          >
+            我要投保
+          </view>
        </view>
-      </view>
+      </template>
    </view>
-    <wd-action-sheet v-model="showPayType" :panels="panels" @select="onSelectPayType" />
+    <wd-popup
+      v-model="showRightConfig.show"
+      :title="`${showRightConfig.data?.name}权益`"
+      custom-style="border-radius: 15px"
+    >
+      <view>
+        <image
+          class="w-345 h-345"
+          :src="getImageUrl(showRightConfig.data?.rightimage)"
+          mode="widthFix"
+        />
+      </view>
+    </wd-popup>
  </view>
 </template>

@@ -107,28 +148,37 @@ import WechatIcon from '@/static/images/invest/wechat-icon.png'
 import UnionpayIcon from '@/static/images/invest/unionpay-icon.png'
 import { getInvestmentListAPI, submitInvestAPI } from '@/service'
 import { useUserStore } from '@/store'
-import { mergeStep, showModal } from '@/utils'
+import { getImageUrl, mergeStep, showModal } from '@/utils'

 defineOptions({
  name: 'Home',
 })
-const showPayType = ref(false)
-const panels = ref([
-  {
-    iconUrl: WechatIcon,
-    title: '微信支付',
-  },
-  {
-    iconUrl: AlipayIcon,
-    title: '支付宝支付',
-  },
-  {
-    iconUrl: UnionpayIcon,
-    title: '银联支付',
-  },
-])

-const { list: investmentList } = useListPageRequest(getInvestmentListAPI)
+const tabList = [
+  {
+    value: 1,
+    title: '养老',
+  },
+  {
+    value: 2,
+    title: '医疗',
+  },
+]
+const tabValue = ref(1)
+
+const { list: investmentList, onReload } = useListPageRequest((params) =>
+  getInvestmentListAPI({
+    ...params,
+    type: tabValue.value,
+  }),
+)
+
+watch(
+  () => tabValue.value,
+  () => {
+    onReload()
+  },
+)

 const userStore = useUserStore()

@@ -138,9 +188,23 @@ const onGoInvestDetail = () => {
  })
 }

-const onSelectPayType = ({ item, index }: any) => {
-  console.log(item, index)
-  alert(item.title)
+const showRightConfig = ref({
+  show: false,
+  data: null,
+})
+watch(
+  () => showRightConfig.value.show,
+  (val) => {
+    if (!val) {
+      showRightConfig.value.data = null
+    }
+  },
+)
+const onShowRights = (item: any) => {
+  showRightConfig.value = {
+    show: true,
+    data: item,
+  }
 }

 const onInvest = mergeStep(async (item: any) => {