feat: 商品列表、商品详情优化

supplied-h5/src/view/joyful-selection/cart/index.vue

@@ -3,33 +3,48 @@
     <van-nav-bar title="购物车" right-text="编辑" @click-right="$router.push('/joyful-selection/cart/edit')" />
     <van-notice-bar text="满 199 元包邮，快去凑单吧～" left-icon="info-o" />
     <section class="cart-list">
-      <van-card
-        v-for="item in goods"
-        :key="item.id"
-        :title="item.name"
-        :desc="item.desc"
-        :price="item.price"
-        :thumb="item.image"
-      >
-        <template #tags><van-tag plain type="danger">{{ item.tag }}</van-tag></template>
-        <template #footer><van-stepper v-model="item.count" theme="round" button-size="22" /></template>
-      </van-card>
+      <van-empty v-if="!items.length" description="购物车还是空的" />
+      <template v-else>
+        <van-card
+          v-for="item in items"
+          :key="item.cartId"
+          :title="item.name"
+          :desc="item.desc"
+          :price="item.price"
+          :thumb="item.image"
+        >
+          <template #tags><van-tag plain type="danger">{{ item.tag }}</van-tag></template>
+          <template #footer><van-stepper v-model="item.count" theme="round" button-size="22" @change="persistCart" /></template>
+        </van-card>
+      </template>
     </section>
-    <van-submit-bar :price="29790" button-text="去结算（3）" @submit="$router.push('/joyful-selection/checkout')">
+    <van-submit-bar :price="totalPrice" :button-text="submitText" @submit="$router.push('/joyful-selection/checkout')">
       <van-checkbox v-model="checked">全选</van-checkbox>
     </van-submit-bar>
   </main>
 </template>
 
 <script>
-import { joyfulProducts } from '../product-data'
+import { mapActions, mapState } from 'pinia'
+import { useCartStore } from '@/store/cart'
 
 export default {
   name: 'JoyfulSelectionCart',
   data: () => ({
-    checked: true,
-    goods: joyfulProducts.slice(0, 3).map(item => ({ ...item, count: 1 }))
-  })
+    checked: true
+  }),
+  computed: {
+    ...mapState(useCartStore, ['items', 'totalCount', 'totalPrice']),
+    submitText() {
+      return `去结算（${this.totalCount}）`
+    }
+  },
+  created() {
+    this.loadCart()
+  },
+  methods: {
+    ...mapActions(useCartStore, ['loadCart', 'persistCart'])
+  }
 }
 </script>