feat: 基本实现拆单收货--

supplied-h5/src/view/joyful-selection/cart/components/JoyfulCartPanel.vue

@@ -2,7 +2,15 @@
   <section class="cart-panel" :class="{ 'cart-panel--page': pageMode }">
     <van-notice-bar v-if="showNotice" text="满 199 元包邮，快去凑单吧～" left-icon="info-o" />
     <section class="cart-list">
-      <van-empty v-if="!items.length" description="购物车还是空的" />
+      <div v-if="!items.length" class="cart-empty">
+        <van-empty description="购物车还是空的" />
+        <van-button
+          class="cart-empty__button"
+          round
+          type="danger"
+          @click="$router.push('/joyful-selection/products')"
+        >去购物</van-button>
+      </div>
       <template v-else>
         <article
           v-for="item in items"
@@ -37,10 +45,11 @@
       </template>
     </section>
     <van-submit-bar
+      v-if="items.length"
       :fixed="fixedSubmit"
       :price="selectedTotalPrice"
       :button-text="submitText"
-      @submit="$emit('checkout', selectedItems)"
+      @submit="handleCheckout"
     >
       <van-checkbox
         :value="isAllChecked"
@@ -139,6 +148,14 @@ export default {
       }
 
       this.persistCart()
+    },
+    handleCheckout() {
+      if (!this.items.length || !this.selectedItems.length) {
+        this.$toast('请选择要结算的商品')
+        return
+      }
+
+      this.$emit('checkout', this.selectedItems)
     }
   }
 }
@@ -173,6 +190,19 @@ export default {
   background: #fff;
 }
 
+.cart-empty {
+  padding-top: 48px;
+  text-align: center;
+}
+
+.cart-empty__button {
+  width: 120px;
+  height: 38px;
+  background: #ff5b20;
+  border-color: #ff5b20;
+  font-weight: 700;
+}
+
 .cart-item {
   display: flex;
   min-height: 128px;