feat: 初始化

2026-07-27 15:54:32 +08:00
parent 6bc64eb408
commit c98187dff1
39 changed files with 10795 additions and 0 deletions
@@ -0,0 +1,46 @@
+<template>
+  <main class="detail-page">
+    <van-nav-bar title="商品详情" left-arrow @click-left="$router.back()" />
+    <van-image class="product-image" :src="teaImage" 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>
+    </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>
+    <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')" />
+      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
+      <van-goods-action-button type="warning" text="加入购物车" @click="$toast('已加入购物车')" />
+      <van-goods-action-button type="danger" text="立即购买" @click="$router.push('/joyful-selection/checkout')" />
+    </van-goods-action>
+  </main>
+</template>
+
+<script>
+import teaImage from '@/assets/joyful-selection/products/tea-set.png'
+export default {
+  name: 'JoyfulSelectionProductDetail',
+  data: () => ({ teaImage }),
+  computed: {
+    productTitle() { return this.$route.query.title || '简约北欧风陶瓷餐具套装' },
+    productPrice() { return this.$route.query.price || '69.90' }
+  }
+}
+</script>
+
+<style scoped>
+.detail-page { min-height: 100vh; padding-bottom: 56px; background: #f7f7f7; }
+.product-image { display: block; width: 100%; height: 310px; background: #fff; }
+.product-info, .detail-content { margin: 10px 12px; padding: 14px; border-radius: 10px; background: #fff; }
+.product-info h1 { margin: 0 0 8px; font-size: 17px; }
+.product-info p, .detail-content p { color: #777; font-size: 12px; line-height: 1.6; }
+.product-info b { margin-right: 8px; color: #ff5b20; font-size: 21px; }
+.product-info del { margin-right: 9px; color: #aaa; font-size: 11px; }
+.detail-content h2 { margin: 0; font-size: 15px; }
+</style>