feat: 对接完接口

src/pages/invest/index.vue

@@ -1,5 +1,5 @@
 <!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
-<route lang="json5">
+<route lang="json5" type="page">
 {
   style: {
     navigationStyle: 'custom',
@@ -18,36 +18,40 @@
       class="flex shadow-[0_1px_4px_rgba(255,255,255,0.8)] mt-100 pt-12 pb-8 flex-col mx-15 rounded-10 items-center bg-[linear-gradient(180deg,rgba(212,232,255,1),rgba(229,239,249,0.8))]"
     >
       <view class="text-15 text-#486CCF">我的投资金</view>
-      <view class="text-30 text-#333 font-bold">1000000</view>
+      <view class="text-30 text-#333 font-bold">{{ userStore.userInfo.member_investment }}</view>
     </view>
 
     <view class="mt-60">
       <view
-        v-for="item in 10"
-        :key="item"
+        v-for="item in fundList"
+        :key="item.id"
         class="invest-item relative flex flex-col items-center pt-15"
       >
-        <view class="text-15 text-#3F88F6">5G通讯</view>
+        <view class="text-15 text-#3F88F6">{{ item.fund_name }}</view>
         <view class="flex w-full mt-15">
           <view class="flex-1 text-center">
-            <view class="text-22 text-#333 font-bold">1000.00</view>
+            <view class="text-22 text-#333 font-bold">{{ item.buy_price }}</view>
             <view class="text-12 mt-4 text-#3B81F3">投资金额</view>
           </view>
           <view class="flex-1 text-center">
-            <view class="text-22 text-#FF3B30 font-bold">1000.00</view>
+            <view class="text-22 text-#FF3B30 font-bold">{{ item.day_income }}</view>
             <view class="text-12 mt-4 text-#3B81F3">每日分红</view>
           </view>
         </view>
         <view
-          class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-[linear-gradient(45deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
+          class="text-center px-50 absolute bottom-0 left-0 text-12 text-#fff rounded-full py-8 bg-[linear-gradient(80deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
           @click="onInvest(item)"
         >
           立即投资
         </view>
         <view
-          class="text-center px-16 absolute bottom-13 right-33 text-12 text-#fff rounded-br-10 rounded-tl-10 py-4 bg-[linear-gradient(45deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
+          class="text-center px-16 absolute bottom-13 right-33 text-12 text-#fff rounded-br-10 rounded-tl-10 py-4 bg-[linear-gradient(80deg,rgba(59,129,243,1),rgba(55,230,236,1))]"
+          :class="{
+            '!bg-[linear-gradient(80deg,#E2AF74,#FFCC40)]': item.is_ai,
+            '!text-#9B6F33': item.is_ai,
+          }"
         >
-          新手体验
+          {{ item.is_ai ? '会员产品' : '新手体验' }}
         </view>
       </view>
     </view>
@@ -60,10 +64,16 @@ import NavBar from '@/components/NavBar.vue'
 import AlipayIcon from '@/static/images/invest/alipay-icon.png'
 import WechatIcon from '@/static/images/invest/wechat-icon.png'
 import UnionpayIcon from '@/static/images/invest/unionpay-icon.png'
+import { buyFundAPI, getFundListAPI } from '@/service'
+import { useUserStore } from '@/store'
+import { mergeStep, showModal } from '@/utils'
 
 defineOptions({
   name: 'Home',
 })
+
+const userStore = useUserStore()
+
 const showPayType = ref(false)
 const panels = ref([
   {
@@ -91,12 +101,18 @@ const onSelectPayType = ({ item, index }: any) => {
   alert(item.title)
 }
 
-const onInvest = (item: any) => {
-  // uni.navigateTo({
-  //   url: '/pages-sub/invest-immediately/index',
-  // })
-  showPayType.value = true
-}
+const onInvest = mergeStep(async (item: any) => {
+  await showModal('确认投资?')
+  await buyFundAPI({
+    fund_id: item.id,
+  })
+  await userStore.loadUserInfo()
+  uni.showToast({
+    title: '投资成功',
+    icon: 'none',
+  })
+})
+const { list: fundList } = useListPageRequest(getFundListAPI)
 </script>
 
 <style>