1

src/pages/product/App.vue

@@ -33,8 +33,6 @@ const fetchData = async () => {
 }
 
 const handleJump = (item) => {
-  showFailToast('暂未开放世界银行项目产品')
-  return false
   window.location.href = window.location.origin + `/product/detail.html?id=${item.productId}`
 }
 

src/pages/product/buypro/App.vue

 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import request from '@/utils/request'
 import AppHeader from '@/components/AppHeader.vue'
 import card1 from '@/static/pages/product/card1.png'
@@ -7,7 +7,7 @@ import card2 from '@/static/pages/product/card2.png'
 import card3 from '@/static/pages/product/card3.png'
 import card4 from '@/static/pages/product/card4.png'
 const pngArr1 = ref([card1, card2, card3, card4])
-import { showFailToast } from 'vant'
+import { showFailToast, showSuccessToast } from 'vant'
 
 const paymentInfo = ref({
   mony: 200,
@@ -27,6 +27,17 @@ const loading = ref(true)
 const total = ref(1)
 const checked = ref('1')
 const amout = ref(0)
+
+// Compute payment method based on radio selection
+const paymentMethod = computed(() => {
+  switch (checked.value) {
+    case '1': return 'wechat'
+    case '2': return 'ali' 
+    case '3': return 'yl'
+    default: return ''
+  }
+})
+
 const fetchData = async () => {
   try {
     loading.value = true
@@ -59,6 +70,55 @@ const handClick = (type) => {
   }
 }
 
+const handleBuy = async () => {
+  if (!checked.value) {
+    showFailToast('请选择支付方式')
+    return
+  }
+
+  try {
+    loading.value = true
+    
+    const payData = {
+      productId: productArr.value.productId,
+      remark: paymentMethod.value,
+      balance: amout.value,
+      type: 0, // Assuming type 1 for product purchase
+    }
+
+    // For external payment methods (WeChat/Alipay)
+    if (['1', '2'].includes(checked.value)) {
+      const res = await request.post('/ops/daybook', payData)
+      if (res?.code === 200) {
+        // Handle external payment redirect
+        window.location.href = res.msg
+      } else {
+        showFailToast(res?.msg || '支付失败')
+      }
+    } 
+    // For balance payment
+    else if (checked.value === '3') {
+      showFailToast('余额支付暂未开通，请等待官方通知')
+      return false
+      const res = await request.post('/ops/daybook', payData)
+      if (res?.code === 200) {
+        showSuccessToast(res.msg || '支付成功')
+        setTimeout(() => {
+          window.location.href = '/pages/product/product'
+        }, 1000)
+      } else {
+        showFailToast(res?.msg || '支付失败')
+      }
+    }
+
+  } catch (error) {
+    console.error('支付失败:', error)
+    showFailToast(error.msg || '支付失败，请重试')
+  } finally {
+    loading.value = false
+  }
+}
+
 fetchData()
 </script>
 
@@ -144,7 +204,11 @@ fetchData()
           </van-radio-group>
         </div>
       </div>
-      <div class="buynow" @click="handleBuy">确定购买</div>
+      <div class="buynow" 
+           @click="handleBuy"
+           :class="{ 'loading': loading }">
+        {{ loading ? '处理中...' : '确定购买' }}
+      </div>
     </var-loading>
   </div>
 </template>
@@ -282,6 +346,11 @@ fetchData()
     color: #FFF7E9;
     text-align: center;
     line-height: 46px;
+
+    &.loading {
+      opacity: 0.7;
+      cursor: not-allowed;
+    }
   }
 }
 </style>
\ No newline at end of file

src/pages/user/product/App.vue

 <template>
   <AppHeader title="购买详情"/>
   <div class="container">
-    <div class="empty-tips">暂未购买过产品</div>
+    <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+      class="list-container"
+    >
+      <div class="list" v-if="list.length > 0">
+        <van-cell-group inset v-for="item in list" :key="item.daybookId" class="item-card">
+          <van-cell>
+            <template #title>
+              <div class="product-titlewarp">
+                <div class="product-title">
+                  <van-tag type="primary" size="medium">已购买</van-tag>
+                  <span class="name">{{ item.productData?.productName }}</span>
+                </div>
+                <div class="price">￥{{ item.productData?.price || '--' }}</div>
+              </div>
+            </template>
+          </van-cell>
+          
+          <van-cell>
+            <template #title>
+              <div class="desc-text">{{ item.productData?.productTitle }}</div>
+            </template>
+          </van-cell>
+
+          <van-cell>
+            <template #title>
+              <div class="product-info">
+                <div class="info-item">
+                  <span class="label">原始股</span>
+                  <span class="value">{{ item.productData?.productImg || '--' }}股</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">周期</span>
+                  <span class="value">{{ item.productData?.productKey || '--' }}年</span>
+                </div>
+                <div class="info-item">
+                  <span class="label">日收益</span>
+                  <span class="value">{{ item.productData?.productType || '--' }}元/天</span>
+                </div>
+              </div>
+            </template>
+          </van-cell>
+
+          <van-cell>
+            <template #title>
+              <div class="order-info">
+                <div class="order-item">
+                  <span class="label">订单号：</span>
+                  <span class="value">{{ item.orderId }}</span>
+                </div>
+                <div class="order-item">
+                  <span class="label">购买时间：</span>
+                  <span class="value">{{ formatTime(item.createTime) }}</span>
+                </div>
+                <div class="order-item">
+                  <span class="label">到期时间：</span>
+                  <span class="value">{{ formatTime(item.updateTime) }}</span>
+                </div>
+              </div>
+            </template>
+          </van-cell>
+
+          <van-cell v-if="item.productData?.productDescribe">
+            <template #title>
+              <div class="dividend-info">
+                <van-tag type="warning" size="medium">分红说明</van-tag>
+                <span class="dividend-text">{{ item.productData.productDescribe }}</span>
+              </div>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </div>
+      <van-empty v-else description="暂未购买过产品" />
+    </van-list>
   </div>
 </template>
+
 <script setup>
+import { ref } from 'vue'
 import AppHeader from '@/components/AppHeader.vue'
+import request from '@/utils/request'
+import { showToast } from 'vant'
 
+const list = ref([])
+const loading = ref(false)
+const finished = ref(false)
+const pageNum = ref(1)
+const pageSize = 10
+
+const formatTime = (time) => {
+  if (!time) return '--'
+  return new Date(time).toLocaleString()
+}
+
+const onLoad = async () => {
+  try {
+    const res = await request.get(`/api/transfer/listUser?pageNum=${pageNum.value}&pageSize=${pageSize}`)
+    if (res.code === 200) {
+      list.value.push(...(res.data || []))
+      
+      if (res.data.length < pageSize) {
+        finished.value = true
+      } else {
+        pageNum.value += 1
+      }
+    } else {
+      showToast('加载失败')
+      finished.value = true
+    }
+  } catch (error) {
+    console.error(error)
+    showToast('加载失败')
+    finished.value = true
+  }
+  loading.value = false
+}
 </script>
+
 <style lang="scss" scoped>
+
 .container {
   width: 100%;
   min-height: calc(100vh - 52px);
   background: #f5f6f8;
-  padding: 54px 10px 10px;
+  padding: 64px 10px 10px;
+ 
+  .list-container {
+    padding-bottom: 20px;
+  }
 
-  .empty-tips {
-    text-align: center;
-    padding: 40px 0;
-    color: #999;
-    font-size: 14px;
+  .item-card {
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    background: #fff;
+    margin: 0 10px 12px;
+  }
+  .product-titlewarp{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .product-title {
+    width: 70%;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .name {
+      font-size: 16px;
+      font-weight: 600;
+      color: #323233;
+    }
+  }
+
+  .desc-text {
+    font-size: 13px;
+    color: #666;
+    line-height: 1.5;
+    margin: 4px 0;
+  }
+
+  .price {
+    color: #ee0a24;
+    font-weight: 600;
+    font-size: 18px;
+  }
+
+  .product-info {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    background: #f7f8fa;
+    border-radius: 4px;
+
+    .info-item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      position: relative;
+
+      &:not(:last-child):after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 70%;
+        background: #ebedf0;
+      }
+
+      .label {
+        font-size: 12px;
+        color: #969799;
+      }
+
+      .value {
+        font-size: 15px;
+        color: #323233;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .order-info {
+    .order-item {
+      display: flex;
+      margin-bottom: 4px;
+      font-size: 13px;
+      
+      .label {
+        color: #969799;
+        width: 75px;
+      }
+      
+      .value {
+        color: #323233;
+        flex: 1;
+      }
+    }
+  }
+
+  .dividend-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+
+    .dividend-text {
+      font-size: 13px;
+      color: #666;
+    }
   }
 }
 </style>
\ No newline at end of file

types/components.d.ts

@@ -13,24 +13,20 @@ declare module 'vue' {
     Tabbar: typeof import('./../src/components/tabbar.vue')['default']
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
+    VanEmpty: typeof import('vant/es')['Empty']
     VanIcon: typeof import('vant/es')['Icon']
     VanList: typeof import('vant/es')['List']
-    VanPopup: typeof import('vant/es')['Popup']
     VanRadio: typeof import('vant/es')['Radio']
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
+    VanTag: typeof import('vant/es')['Tag']
     VarAppBar: typeof import('@varlet/ui')['AppBar']
     VarButton: typeof import('@varlet/ui')['Button']
     VarDivider: typeof import('@varlet/ui')['Divider']
-    VarForm: typeof import('@varlet/ui')['Form']
     VarIcon: typeof import('@varlet/ui')['Icon']
-    VarInput: typeof import('@varlet/ui')['Input']
     VarLoading: typeof import('@varlet/ui')['Loading']
-    VarOverlay: typeof import('@varlet/ui')['Overlay']
     VarPaper: typeof import('@varlet/ui')['Paper']
-    VarSpace: typeof import('@varlet/ui')['Space']
-    VarTab: typeof import('@varlet/ui')['Tab']
-    VarTabs: typeof import('@varlet/ui')['Tabs']
     XModal: typeof import('./../src/components/x-modal/x-modal.vue')['default']
   }
   export interface ComponentCustomProperties {