feat: 加入购物车优化

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

@@ -59,19 +59,27 @@
 
     <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="cart-o" text="购物车" :badge="cartBadge" @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-button type="warning" text="加入购物车" @click="openSku('cart')" />
+      <van-goods-action-button type="danger" text="立即购买" @click="openSku('buy')" />
     </van-goods-action>
+
+    <joyful-sku-popup ref="skuPopup" @add-cart="loadCart" />
   </main>
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
+import { useCartStore } from '@/store/cart'
 import { getJoyfulProduct } from '../product-data'
+import JoyfulSkuPopup from '../components/JoyfulSkuPopup.vue'
 
 export default {
   name: 'JoyfulSelectionProductDetail',
+  components: {
+    JoyfulSkuPopup
+  },
   data: () => ({
     count: 1,
     features: [
@@ -82,7 +90,20 @@ export default {
     ]
   }),
   computed: {
+    ...mapState(useCartStore, ['totalCount']),
+    cartBadge() {
+      return this.totalCount > 0 ? this.totalCount : ''
+    },
     product() { return getJoyfulProduct(this.$route.query.id) }
+  },
+  created() {
+    this.loadCart()
+  },
+  methods: {
+    ...mapActions(useCartStore, ['loadCart']),
+    openSku(mode) {
+      this.$refs.skuPopup.open(this.product, mode)
+    }
   }
 }
 </script>