feat: 基本实现拆单收货

supplied-h5/src/view/joyful-selection/order/checkout/index.vue

@@ -1,5 +1,7 @@
 <template>
-  <main class="checkout-page">
+  <div>
+    <joyful-selection-checkout-skeleton v-if="loading" />
+    <main v-else class="checkout-page">
     <van-nav-bar title="确认订单" left-arrow @click-left="$router.back()" />
 
     <section class="address-card" @click="$router.push({ path: '/joyful-selection/address', query: { from: 'checkout' } })">
@@ -50,7 +52,8 @@
     </section>
 
     <van-submit-bar :price="goodsAmount" button-text="提交订单" @submit="onSubmit" />
-  </main>
+    </main>
+  </div>
 </template>
 
 <script>
@@ -60,12 +63,17 @@ import { useCartStore } from '@/store/cart'
 import { useUserStore } from '@/store/user'
 import { readAddresses, readChosenAddressId } from '../../address/address-data'
 import { createOrderNo, savePaymentInfo } from '../payment/payment-data'
+import JoyfulSelectionCheckoutSkeleton from '@/skeleton-view/joyful-selection/order/checkout/index.vue'
 
 const CHECKOUT_ITEMS_KEY = 'joyful-selection-checkout-items'
 
 export default {
   name: 'JoyfulSelectionCheckout',
+  components: {
+    JoyfulSelectionCheckoutSkeleton
+  },
   data: () => ({
+    loading: true,
     remark: '',
     goods: [],
     showAllGoods: false,
@@ -74,7 +82,7 @@ export default {
   }),
   computed: {
     ...mapState(useCartStore, ['items']),
-    ...mapState(useUserStore, ['supplierId', 'token', 'userId']),
+    ...mapState(useUserStore, ['supplierId', 'userId']),
     visibleGoods() {
       return this.showAllGoods ? this.goods : this.goods.slice(0, 3)
     },
@@ -89,12 +97,15 @@ export default {
     this.loadCart()
     this.goods = this.getCheckoutGoods()
     this.loadAddress()
+    this.$nextTick(() => {
+      this.loading = false
+    })
   },
   activated() {
     this.loadAddress()
   },
   methods: {
-    ...mapActions(useCartStore, ['loadCart']),
+    ...mapActions(useCartStore, ['loadCart', 'removeItems']),
     ...mapActions(useUserStore, ['fetchBridgeToken']),
     getCheckoutGoods() {
       const storedItems = this.readCheckoutItems()
@@ -136,7 +147,7 @@ export default {
       try {
         await this.fetchBridgeToken()
 
-        if (!this.supplierId || !this.token || !this.userId) {
+        if (!this.supplierId || !this.userId) {
           throw new Error('供应商授权信息不完整，请重新进入商城')
         }
 
@@ -144,7 +155,6 @@ export default {
         const data = await postFunction('order-create', {
           supplierId: this.supplierId,
           userId: this.userId,
-          token: this.token,
           orderNo,
           amount: this.goodsAmount,
           goods: this.goods
@@ -158,6 +168,8 @@ export default {
           receiverTel: this.maskTel(this.chosenAddress.tel || ''),
           goods: this.goods
         })
+
+        this.clearSubmittedCartItems()
         this.$router.push('/joyful-selection/payment')
       } catch (error) {
         console.warn('提交待支付订单失败', error)
@@ -165,6 +177,19 @@ export default {
       } finally {
         this.submitting = false
       }
+    },
+    clearSubmittedCartItems() {
+      if (this.$route.query.source !== 'cart') {
+        return
+      }
+
+      const cartIds = this.goods.map(item => item.cartId).filter(Boolean)
+
+      if (cartIds.length) {
+        this.removeItems(cartIds)
+      }
+
+      sessionStorage.removeItem(CHECKOUT_ITEMS_KEY)
     }
   }
 }