feat: 查积分、支付、拆弹、取消订单

supplied-h5/src/view/joyful-selection/product-detail/index.vue

@@ -11,7 +11,7 @@
 
     <section class="image-section">
       <van-image class="product-image" :src="product.image" fit="cover" />
-      <span class="image-index">1/5</span>
+      <span class="image-index">1/{{ imageCount }}</span>
     </section>
 
     <section class="product-info">
@@ -82,11 +82,22 @@
 
 <script>
 import { mapActions, mapState } from 'pinia'
+import { getFunction } from '@/api/supplied-service'
 import { useCartStore } from '@/store/cart'
-import { getJoyfulProduct } from '../product-data'
 import JoyfulSkuPopup from '../products/components/JoyfulSkuPopup.vue'
 import JoyfulCartPanel from '../cart/components/JoyfulCartPanel.vue'
 
+const emptyProduct = {
+  id: '',
+  name: '',
+  detail: '',
+  price: '0.00',
+  originPrice: '0.00',
+  image: '',
+  picInfo: [],
+  tag: ''
+}
+
 export default {
   name: 'JoyfulSelectionProductDetail',
   components: {
@@ -94,13 +105,14 @@ export default {
     JoyfulCartPanel
   },
   data: () => ({
+    product: emptyProduct,
     showCartPopup: false,
     count: 1,
     features: [
-      { icon: 'music-o', title: '舒适半入耳设计', desc: '长时间佩戴更舒适' },
-      { icon: 'bar-chart-o', title: '高清音质', desc: '清晰稳定的聆听体验' },
-      { icon: 'battery-o', title: '长续航', desc: '单次可用约 5 小时' },
-      { icon: 'cluster-o', title: '蓝牙 5.0', desc: '稳定连接，低延迟' }
+      { icon: 'certificate', title: '品质优选', desc: '精选商品，安心兑换' },
+      { icon: 'logistics', title: '快速配送', desc: '下单后尽快安排发货' },
+      { icon: 'shield-o', title: '售后保障', desc: '商品问题及时处理' },
+      { icon: 'gold-coin-o', title: '积分抵扣', desc: '支持积分支付兑换' }
     ]
   }),
   computed: {
@@ -108,13 +120,25 @@ export default {
     cartBadge() {
       return this.totalCount > 0 ? this.totalCount : ''
     },
-    product() { return getJoyfulProduct(this.$route.query.id) }
+    imageCount() {
+      return Math.max(this.product.picInfo?.length || 1, 1)
+    }
   },
   created() {
     this.loadCart()
+    this.loadProduct()
   },
   methods: {
     ...mapActions(useCartStore, ['loadCart']),
+    async loadProduct() {
+      try {
+        const data = await getFunction('product-detail', { id: this.$route.query.id })
+        this.product = data || emptyProduct
+      } catch (error) {
+        console.warn('查询商品详情失败', error)
+        this.$toast(error.message || '查询商品详情失败')
+      }
+    },
     openCartPopup() {
       this.loadCart()
       this.showCartPopup = true
@@ -130,6 +154,9 @@ export default {
       this.$router.push({ path: '/joyful-selection/checkout', query: { source: 'cart' } })
     },
     openSku(mode) {
+      if (!this.product.id) {
+        return
+      }
       this.$refs.skuPopup.open(this.product, mode)
     }
   }