第一个版本

src/packages/user/pages/buy.vue

@@ -1,25 +1,21 @@
 <template>
   <view class="page">
-    <!-- 图片区域 -->
-    <view class="image-section">
-      <image
-        class="card-image"
-        src="https://aliyunoss.hntgov.net/image/2026/06/23/70e9f4b3b5fd49adb1ff06edcb8fa032.jpg"
-        mode="widthFix"
-      />
-      <image
-        class="card-image"
-        src="https://aliyunoss.hntgov.net/image/2026/06/25/f3e45bcb3b4f4a2997f107cc6335a1bc.jpg"
-        mode="widthFix"
-      />
+    <view v-if="loading" class="loading">
+      <text class="loading-text">加载中...</text>
     </view>
+    <template v-else>
+      <image class="card-image" :src="mainPic" mode="widthFix" />
+      <view class="intro-section">
+        <rich-text :nodes="introduction" />
+      </view>
+    </template>
 
     <!-- 底部固定购买区域 -->
     <view class="bottom-bar">
       <view class="price-row">
         <text class="price-label">价格：</text>
         <text class="price-symbol">¥</text>
-        <text class="price-value">198</text>
+        <text class="price-value">{{ buyPrice }}</text>
         <text class="price-original">¥3800+</text>
       </view>
       <button class="btn-buy" :disabled="paying" @tap="handleBuy">
@@ -30,38 +26,105 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { post, getToken } from '../../../api/request'
+import { BASE_URL } from '../../../config'
+import { useUserStore } from '../../../store/user'
+import { createOrder, prepay } from '../../../api/order'
 
+const userStore = useUserStore()
+
+const goodsId = ref('')
+const cardModleId = ref('')
+const mainPic = ref('')
+const introduction = ref('')
+const buyPrice = ref('0')
+const skuId = ref('')
+const loading = ref(true)
 const paying = ref(false)
 
+onLoad((query) => {
+  goodsId.value = (query?.goodsId as string) || '821926819630853'
+})
+
+function sanitizeHtml(html: string): string {
+  return html.replace(/<img[^>]*>/g, (match) => {
+    return match.replace(/style="[^"]*"/g, 'style="width:100%"')
+  })
+}
+
+interface CardModelDetail {
+  cardModel: any
+  goods: { id: string; mainPic: string }
+  goodsInfo: { introduction: string }
+  sku: Array<{ id: string; buyPrice: number }>
+}
+
+onMounted(async () => {
+  try {
+    const data = await post<CardModelDetail>(`${BASE_URL}/open-api/xgh/cardModelDetail?goodsId=${goodsId.value}`, {})
+    cardModleId.value = data.cardModel?.id || ''
+    mainPic.value = data.goods?.mainPic || ''
+    introduction.value = sanitizeHtml(data.goodsInfo?.introduction || '')
+    const sku = data.sku?.[0]
+    skuId.value = sku?.id || ''
+    const price = sku?.buyPrice || 0
+    buyPrice.value = (price / 100).toFixed(2)
+  } catch {
+    // 静默失败
+  } finally {
+    loading.value = false
+  }
+})
+
 async function handleBuy() {
+  if (!userStore.isLogin) {
+    uni.navigateTo({ url: '/pages/login/login' })
+    return
+  }
   if (paying.value) return
   paying.value = true
 
   try {
-    // 调用后端创建订单接口（mock）
-    const orderRes: any = await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve({
-          orderId: 'ORD' + Date.now(),
-          payParams: {
-            timeStamp: String(Math.floor(Date.now() / 1000)),
-            nonceStr: 'mock_nonce_' + Date.now(),
-            package: 'prepay_id=mock_prepay_id',
-            signType: 'MD5',
-            paySign: 'mock_pay_sign'
-          }
-        })
-      }, 800)
+    const mobile = (uni.getStorageSync('phone') as string) || ''
+    const orderRes = await createOrder({
+      cardModleId: cardModleId.value,
+      buyNum: 1,
+      skuId: skuId.value,
+      mobile,
+      couponId: '',
     })
 
-    // 调用微信支付
+    const openId = getToken()
+    if (!openId) {
+      uni.showToast({ title: '请先登录', icon: 'none' })
+      return
+    }
+
+    const payParams = await prepay({
+      openId,
+      orderNo: orderRes.outTradeNo,
+      description: mobile,
+      amount: Math.round(Number(buyPrice.value) * 100),
+    })
+
+    if (!payParams?.timeStamp || !payParams?.nonce || !payParams?.pack || !payParams?.paySign) {
+      uni.showToast({ title: '支付参数异常，请重试', icon: 'none' })
+      return
+    }
+
     await new Promise<void>((resolve, reject) => {
       uni.requestPayment({
         provider: 'wxpay',
-        ...orderRes.payParams,
+        appId: payParams.appId,
+        timeStamp: payParams.timeStamp,
+        nonceStr: payParams.nonce,
+        package: payParams.pack,
+        signType: payParams.signType,
+        paySign: payParams.paySign,
         success: () => resolve(),
-        fail: (err: any) => reject(err)
+        fail: (err: any) => reject(err),
       })
     })
 
@@ -70,11 +133,10 @@ async function handleBuy() {
       uni.switchTab({ url: '/pages/index/index' })
     }, 1500)
   } catch (err: any) {
-    if (err?.errMsg?.includes('cancel')) {
-      uni.showToast({ title: '已取消支付', icon: 'none' })
-    } else {
-      uni.showToast({ title: '支付失败，请重试', icon: 'none' })
-    }
+    uni.showToast({ title: err?.errMsg?.includes('cancel') ? '已取消支付' : '支付失败，请重试', icon: 'none' })
+    setTimeout(() => {
+      uni.redirectTo({ url: '/packages/user/pages/order/list' })
+    }, 1500)
   } finally {
     paying.value = false
   }
@@ -91,12 +153,19 @@ $bar-height: 120rpx;
   font-family: $font-family-body;
 }
 
-/* ===== 图片区域 ===== */
-.image-section {
+/* ===== 加载状态 ===== */
+.loading {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+  padding: 80rpx 0;
 }
 
+.loading-text {
+  font-size: $font-size-sm;
+  color: $uv-tips-color;
+}
+
+/* ===== 图片 ===== */
 .card-image {
   width: 100%;
   display: block;
@@ -104,6 +173,12 @@ $bar-height: 120rpx;
   padding: 0;
 }
 
+/* ===== 富文本介绍 ===== */
+.intro-section {
+  width: 100%;
+  margin-bottom: 24rpx;
+}
+
 /* ===== 底部固定购买区域 ===== */
 .bottom-bar {
   position: fixed;