feat: 商品提交列表

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

@@ -59,13 +59,24 @@
 
     <van-goods-action>
       <van-goods-action-icon icon="chat-o" text="客服" dot />
-      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartBadge" @click="$router.push('/joyful-selection/cart')" />
+      <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartBadge" @click="openCartPopup" />
       <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
       <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" />
+    <van-popup v-model="showCartPopup" class="cart-popup" position="bottom" round>
+      <header class="cart-popup-head">
+        <b>购物车</b>
+        <van-icon name="cross" @click="showCartPopup = false" />
+      </header>
+      <joyful-cart-panel
+        ref="cartPanel"
+        class="cart-popup-panel"
+        @checkout="goCheckout"
+      />
+    </van-popup>
   </main>
 </template>
 
@@ -73,14 +84,17 @@
 import { mapActions, mapState } from 'pinia'
 import { useCartStore } from '@/store/cart'
 import { getJoyfulProduct } from '../product-data'
-import JoyfulSkuPopup from '../components/JoyfulSkuPopup.vue'
+import JoyfulSkuPopup from '../products/components/JoyfulSkuPopup.vue'
+import JoyfulCartPanel from '../cart/components/JoyfulCartPanel.vue'
 
 export default {
   name: 'JoyfulSelectionProductDetail',
   components: {
-    JoyfulSkuPopup
+    JoyfulSkuPopup,
+    JoyfulCartPanel
   },
   data: () => ({
+    showCartPopup: false,
     count: 1,
     features: [
       { icon: 'music-o', title: '舒适半入耳设计', desc: '长时间佩戴更舒适' },
@@ -101,6 +115,20 @@ export default {
   },
   methods: {
     ...mapActions(useCartStore, ['loadCart']),
+    openCartPopup() {
+      this.loadCart()
+      this.showCartPopup = true
+      this.$nextTick(() => {
+        if (this.$refs.cartPanel) {
+          this.$refs.cartPanel.selectAllItems()
+        }
+      })
+    },
+    goCheckout(items) {
+      sessionStorage.setItem('joyful-selection-checkout-items', JSON.stringify(items))
+      this.showCartPopup = false
+      this.$router.push({ path: '/joyful-selection/checkout', query: { source: 'cart' } })
+    },
     openSku(mode) {
       this.$refs.skuPopup.open(this.product, mode)
     }
@@ -357,4 +385,39 @@ export default {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
 }
+
+.cart-popup {
+  display: flex;
+  height: 76vh;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.cart-popup-head {
+  display: flex;
+  height: 48px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid #f2f2f2;
+  background: #fff;
+}
+
+.cart-popup-head b {
+  color: #222;
+  font-size: 16px;
+  font-weight: 700;
+}
+
+.cart-popup-head .van-icon {
+  position: absolute;
+  right: 16px;
+  color: #999;
+  font-size: 20px;
+}
+
+.cart-popup-panel {
+  flex: 1;
+  min-height: 0;
+}
 </style>