feat: 商品提交列表

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

@@ -1,57 +1,40 @@
 <template>
   <main class="cart-page">
     <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-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="totalPrice" :button-text="submitText" @submit="$router.push('/joyful-selection/checkout')">
-      <van-checkbox v-model="checked">全选</van-checkbox>
-    </van-submit-bar>
+    <joyful-cart-panel fixed-submit page-mode @checkout="goCheckout" />
   </main>
 </template>
 
 <script>
-import { mapActions, mapState } from 'pinia'
-import { useCartStore } from '@/store/cart'
+import JoyfulCartPanel from './components/JoyfulCartPanel.vue'
 
 export default {
   name: 'JoyfulSelectionCart',
-  data: () => ({
-    checked: true
-  }),
-  computed: {
-    ...mapState(useCartStore, ['items', 'totalCount', 'totalPrice']),
-    submitText() {
-      return `去结算（${this.totalCount}）`
-    }
-  },
-  created() {
-    this.loadCart()
+  components: {
+    JoyfulCartPanel
   },
   methods: {
-    ...mapActions(useCartStore, ['loadCart', 'persistCart'])
+    goCheckout(items) {
+      sessionStorage.setItem('joyful-selection-checkout-items', JSON.stringify(items))
+      this.$router.push({ path: '/joyful-selection/checkout', query: { source: 'cart' } })
+    }
   }
 }
 </script>
 
 <style scoped lang="less">
-.cart-page { min-height: 100vh; padding-bottom: 106px; background: #f7f7f7; }
-.cart-list { padding: 0 12px; }
-.cart-list .van-card { margin-top: 10px; border-radius: 10px; background: #fff; }
-.cart-list ::v-deep .van-card__price { color: #ff5b20; font-weight: bold; }
-.van-submit-bar { bottom: 50px; }
+.cart-page {
+  min-height: 100vh;
+  padding-top: 46px;
+  background: #fff;
+}
+
+.cart-page ::v-deep .van-nav-bar {
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  left: 0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
+}
 </style>