feat: 首页优化

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

@@ -1,17 +1,20 @@
 <template>
   <main class="detail-page">
     <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
-    <van-image class="product-image" :src="teaImage" fit="cover" />
+    <van-image class="product-image" :src="product.image" fit="cover" />
     <section class="product-info">
-      <h1>{{ productTitle }}</h1>
-      <p>精选优质瓷土，简约百搭，为品质生活增添仪式感</p>
-      <div><b>¥{{ productPrice }}</b><del>¥89.90</del><van-tag type="danger" plain>精选</van-tag></div>
+      <h1>{{ product.name }}</h1>
+      <p>{{ product.detail }}</p>
+      <div><b>¥{{ product.price }}</b><del>¥{{ product.originPrice }}</del><van-tag type="danger" plain>{{ product.tag }}</van-tag></div>
     </section>
     <van-cell-group inset title="商品服务">
       <van-cell title="正品保障" value="极速发货 · 售后无忧" />
       <van-cell title="配送" value="满 99 元免配送费" />
     </van-cell-group>
-    <section class="detail-content"><h2>商品详情</h2><p>精致器型与温润釉色，适合日常用餐、下午茶与礼赠场景。</p></section>
+    <section class="detail-content">
+      <h2>商品详情</h2>
+      <p>{{ product.desc }}</p>
+    </section>
     <van-goods-action>
       <van-goods-action-icon icon="chat-o" text="客服" dot />
       <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="$router.push('/joyful-selection/cart')" />
@@ -23,13 +26,12 @@
 </template>
 
 <script>
-import teaImage from '@/assets/joyful-selection/products/tea-set.png'
+import { getJoyfulProduct } from '../product-data'
+
 export default {
   name: 'JoyfulSelectionProductDetail',
-  data: () => ({ teaImage }),
   computed: {
-    productTitle() { return this.$route.query.title || '简约北欧风陶瓷餐具套装' },
-    productPrice() { return this.$route.query.price || '69.90' }
+    product() { return getJoyfulProduct(this.$route.query.id) }
   }
 }
 </script>