零售端-商品分类页面调整

mallApp/src/components/shop-tab-bar/index.vue

@@ -82,6 +82,7 @@ export default {
       if (item.key === 'order') {
         this.$util.pageTo({
           url: '/pages/home/order',
+          type: 4,
           query: account ? { account } : {}
         })
       }

mallApp/src/pages/home/shop-category.vue

@@ -153,10 +153,10 @@
           </view>
         </block>
 
-        <view class="side-nav-placeholder"></view>
+        <view class="side-nav-placeholder" :class="{ 'side-nav-placeholder--cart': showItemFooterCart }"></view>
       </scroll-view>
 
-      <!-- 右侧内容 -->
+      <!-- 右侧商品列表 -->
       <scroll-view
         scroll-y
         class="content-panel"
@@ -191,7 +191,7 @@
 
         <!-- 花束商品列表 -->
         <block v-if="activeNav.type === 'bouquet'">
-          <view class="goods-list" v-if="!$util.isEmpty(list.data)">
+          <view class="goods-list product-section" v-if="!$util.isEmpty(list.data)">
             <view
               class="goods-row"
               v-for="item in list.data"
@@ -220,24 +220,25 @@
           />
         </block>
 
-        <!-- 花材商品列表 -->
+        <!-- 花材商品列表（复用 item 页 Commondity 加购） -->
         <block v-else-if="activeNav.type === 'item'">
-          <view class="goods-list" v-if="currentItemProducts.length">
+          <view class="item-product-list product-section" v-if="currentItemProducts.length">
             <view
-              class="goods-row"
-              v-for="item in currentItemProducts"
-              :key="item.id"
-              @tap="toItemDetail(item)"
+              v-for="productItem in currentItemProducts"
+              :key="productItem.id"
+              class="item-product-row"
             >
-              <image class="goods-cover" :src="item.cover" mode="aspectFill" />
-              <view class="goods-info">
-                <text class="goods-name">{{ item.itemName || item.name }}</text>
-                <text class="goods-desc" v-if="item.itemRemark">{{ item.itemRemark }}</text>
-                <text class="goods-desc goods-desc--placeholder" v-else>新鲜花材，产地直供</text>
-                <view class="goods-bottom">
-                  <text class="goods-price">¥{{ formatItemPrice(item) }} 起</text>
-                </view>
-              </view>
+              <Commondity
+                :info="productItem"
+                :offVerifyRepertory="true"
+                :bigCount="getSelectItemById(productItem.id, activeItemClassId).bigCount"
+                :smallCount="getSelectItemById(productItem.id, activeItemClassId).smallCount"
+                @customNum="customNum"
+                @add="addEvent"
+                @addOneEvent="addCustomNumEvent"
+                @del="delEvent"
+                @showBigCover="showItemBigCover"
+              />
             </view>
           </view>
           <app-wrapper-empty
@@ -247,12 +248,92 @@
           />
         </block>
 
-        <view class="content-bottom-placeholder"></view>
+        <view class="content-bottom-placeholder" :class="{ 'content-bottom-placeholder--cart': showItemFooterCart }"></view>
       </scroll-view>
     </view>
     </view>
 
-    <shop-tab-bar current="category" :account="shopAccount" :cart-count="cartBadge" />
+    <!-- 花材自定义扎数弹窗 -->
+    <modal-module
+      :show="isModel"
+      @cancel="modalCancel"
+      @click="affirm"
+      :title="customData.itemName"
+      color="#333"
+      :size="32"
+      padding="30rpx 30rpx"
+    >
+      <template slot="customContent">
+        <view class="select-cmd_bx" v-if="customData">
+          <view class="kc">&nbsp;</view>
+          <view class="num_bx">
+            <input v-model="customData.bigCount" :focus="isFocus" type="number" placeholder="扎数" />
+          </view>
+        </view>
+      </template>
+    </modal-module>
+
+    <!-- 花材底部购物车栏：整页全宽（与 item 页一致），仅抬高避免 tabBar 遮挡 -->
+    <view v-if="showItemFooterCart" class="shop-category-footer-cart">
+      <FooterCart
+        :price="allPrice"
+        :count="allCount"
+        :discountAmount="allReachDiscountAmount"
+        @confirm="confirmSelectEvent"
+        @showCartItem="showCartItem"
+      />
+    </view>
+
+    <!-- 花材购物车明细弹层 -->
+    <view
+      v-if="cartItemShow"
+      class="item-cart-mask"
+      @click="hideCartItem"
+    >
+      <view
+      class="item-cart-panel"
+      :class="{ 'item-cart-panel--above-footer': showItemFooterCart }"
+      @click.stop=""
+    >
+        <view class="commodity-view">
+          <view class="summary-bar">
+            <button class="admin-button-com blue middle cart-clear-btn" @click.stop="delMemory">清空购物车</button>
+          </view>
+          <view class="commodity-list">
+            <view class="commodity-item" v-for="(item, index) in selectList" :key="index">
+              <image class="item-icon" :src="item.cover" mode="aspectFill" />
+              <view class="item-info">
+                <view class="info-line">
+                  <text class="item-name">{{ item.itemName || item.name }}</text>
+                  <view class="item-price-col">
+                    <text class="item-price">
+                      <text v-if="cartPriceShowStrike(item)" class="price-original">¥{{ getCartItemOriginalUnitPrice(item) }}</text>
+                      <text class="unit">¥</text>
+                      <text class="price" :class="{'price-reach': isReachDiscountReached(item)}">{{ getCartItemUnitPrice(item) }}</text>
+                    </text>
+                  </view>
+                </view>
+                <view class="limit-buy-tip" v-if="getLimitBuyWarn(item)">
+                  {{ getLimitBuyWarn(item) }}
+                </view>
+                <view class="cart-stepper-wrap">
+                  <view class="open-bx">
+                    <i class="iconfont iconjian" @click.stop="delCurrent(item)" v-if="item.bigCount > 0 || item.smallCount > 0"></i>
+                    <text class="num" @click.stop="customUpdate(item)">
+                      <text v-if="item.bigCount > 0" class="num-big">{{ item.bigCount }}</text>
+                      <text v-if="item.smallCount > 0"><text v-if="item.bigCount > 0">/</text>{{ item.smallCount }}</text>
+                    </text>
+                    <i class="iconfont iconzeng" @click.stop="addCurrent(item)"></i>
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <shop-tab-bar current="category" :account="shopAccount" :cart-count="cartBadgeCount" />
     <wangCg :loginStyle.sync="globalLoginStyle" @goToLogin="loginTo" @loginSuccess="loginSuccess" />
   </view>
 </template>
@@ -262,11 +343,17 @@ import { mapGetters } from 'vuex'
 import wangCg from '@/components/wangCg'
 import AppWrapperEmpty from '@/components/app-wrapper-empty'
 import ShopTabBar from '@/components/shop-tab-bar/index.vue'
+import Commondity from '@/pages/item/components/subItem'
+import FooterCart from '@/components/item/module/app-footer-cart'
+import ModalModule from '@/components/item/plugin/modal'
+import allMoreSelectInputMins from '@/mixins/allMoreSelectInput'
+import productMins from '@/mixins/cgProduct'
 import { getClass, getList } from '@/api/category'
 import { getProductDataApi } from '@/api/item'
 import { getCategorySetting } from '@/api/category-setting'
 import { shopNoticeShowList } from '@/api/shop-notice'
 import { getInfo } from '@/api/shop'
+import { getLimitBuyInfo } from '@/api/order'
 import { list, share } from '@/mixins'
 
 /** 公告展示位置：分类菜单 */
@@ -277,11 +364,25 @@ export default {
   components: {
     wangCg,
     AppWrapperEmpty,
-    ShopTabBar
+    ShopTabBar,
+    Commondity,
+    FooterCart,
+    ModalModule
   },
-  mixins: [list, share],
+  mixins: [list, share, productMins, allMoreSelectInputMins],
   data() {
     return {
+      pageType: 'cg',
+      autoLoad: false,
+      isGhsProduct: true,
+      isFocus: false,
+      isModel: false,
+      customData: {
+        bigCount: 0,
+        smallCount: 0
+      },
+      cartItemShow: false,
+      limitBuyWarnList: [],
       searchKeyword: '',
       hdId: 0,
       shopAccount: '',
@@ -301,12 +402,30 @@ export default {
       currentNoticeIndex: 0,
       adList: [],
       currentAdIndex: 0,
-      form: { categoryId: '' },
-      cartBadge: 0
+      form: { categoryId: '' }
     }
   },
   computed: {
     ...mapGetters({ loginInfo: 'getLoginInfo' }),
+    /** 当前选中花材分类 classId，供加购组件读取数量 */
+    activeItemClassId() {
+      if (this.activeNav.type !== 'item') {
+        return ''
+      }
+      return this.activeNav.id
+    },
+    /** 底部 tab 购物车角标：扎数 + 支数 */
+    cartBadgeCount() {
+      if (!this.selectList || !this.selectList.length) {
+        return 0
+      }
+      const count = this.allCount
+      return (Number(count.bigLength) || 0) + (Number(count.smallLength) || 0)
+    },
+    /** 花材 tab 且有选中商品时，在 tabBar 上方展示 FooterCart */
+    showItemFooterCart() {
+      return this.activeNav.type === 'item' && this.selectList && this.selectList.length > 0
+    },
     /** 是否展示花材分类（xhCategorySetting.isItemCateShow=1） */
     showItemCate() {
       return Number(this.categorySetting.isItemCateShow) === 1
@@ -461,13 +580,35 @@ export default {
             }
           })
           this.itemClassList = list
+          this.productInfo = list
+          this.restoreItemCartFromStorage()
         } else {
           this.itemClassList = []
+          this.productInfo = []
         }
       }).catch(() => {
         this.itemClassList = []
+        this.productInfo = []
       })
     },
+    /** 从本地缓存恢复花材购物车（与 item 页 initData 一致） */
+    restoreItemCartFromStorage() {
+      if (this.pageType !== 'cg') {
+        return
+      }
+      const account = this.shopAccount || (this.option && this.option.account) || uni.getStorageSync('account')
+      if (!account) {
+        this.resetSelectInfoByType(this.pageType)
+        return
+      }
+      const storageKey = 'selectList' + this.pageType + '_hd_' + account
+      const cached = uni.getStorageSync(storageKey)
+      if (!this.$util.isEmpty(cached)) {
+        this.setSelectInfoByType({ type: this.pageType, info: cached })
+      } else {
+        this.resetSelectInfoByType(this.pageType)
+      }
+    },
     /** 解析广告 JSON */
     parseAdvertisement(raw) {
       if (!raw) return []
@@ -642,6 +783,10 @@ export default {
       })
     },
     toItemDetail(item) {
+      this.showItemBigCover(item)
+    },
+    /** 花材大图/详情跳转 */
+    showItemBigCover(item) {
       const id = item.id || item.itemId
       this.$util.pageTo({
         url: '/pages/item/detail',
@@ -652,6 +797,161 @@ export default {
         }
       })
     },
+    showCartItem() {
+      if (this.cartItemShow) {
+        this.cartItemShow = false
+        return
+      }
+      if (!this.$util.isEmpty(this.selectList)) {
+        this.cartItemShow = true
+      }
+    },
+    hideCartItem() {
+      this.cartItemShow = false
+    },
+    delMemory() {
+      this.cartItemShow = false
+      this.limitBuyWarnList = []
+      this.removeMemory()
+    },
+    getLimitBuyWarn(item) {
+      const info = this.limitBuyWarnList.find((warnItem) => warnItem.id == item.id)
+      if (!info) {
+        return ''
+      }
+      return `超出限购${info.currentBuyNum + info.exceedNum}份`
+    },
+    addCurrent(info) {
+      if (info.$orig) {
+        info = info.$orig
+      }
+      this.addEvent(info)
+    },
+    delCurrent(info) {
+      if (info.$orig) {
+        info = info.$orig
+      }
+      this.delEvent(info)
+    },
+    customUpdate(info) {
+      if (info.$orig) {
+        info = info.$orig
+      }
+      this.isModel = true
+      this.customData = info
+      this.$nextTick(() => {
+        this.customData.smallCount = this.customData.smallCount == 0 ? null : this.customData.smallCount
+        this.customData.bigCount = this.customData.bigCount == 0 ? null : this.customData.bigCount
+        this.isFocus = true
+      })
+    },
+    customNum(info) {
+      this.isModel = true
+      this.customData = info
+      this.$nextTick(() => {
+        this.customData.smallCount = this.customData.smallCount == 0 ? null : this.customData.smallCount
+        this.customData.bigCount = this.customData.bigCount == 0 ? null : this.customData.bigCount
+        this.isFocus = true
+      })
+    },
+    modalCancel() {
+      this.isModel = false
+      this.customData = {}
+    },
+    affirm(val) {
+      this.isFocus = false
+      this.$nextTick(() => {
+        if (val.index === 0) {
+          if (!(this.customData.bigCount > 0 || this.customData.smallCount > 0)) {
+            this.delAllEvent(this.customData)
+          }
+          this.modalCancel()
+          return false
+        }
+        if (!/(^[1-9]\d*$)/.test(this.customData.bigCount) && !/(^[1-9]\d*$)/.test(this.customData.smallCount)) {
+          this.delAllEvent(this.customData)
+          this.modalCancel()
+          return
+        }
+        if (/(^[1-9]\d*$)/.test(this.customData.bigCount) && this.customData.bigCount <= 0) {
+          uni.showToast({ title: '数量要大于0', icon: 'none' })
+          return
+        }
+        if (/(^[1-9]\d*$)/.test(this.customData.smallCount) && this.customData.smallCount <= 0) {
+          uni.showToast({ title: '数量要大于0', icon: 'none' })
+          return
+        }
+        const { bigCount, smallCount, bigNum, smallNum, ratio } = this.customData
+        const ratioNum = Number(ratio)
+        if (Number(bigCount) * ratioNum + Number(smallCount) > Number(bigNum) * ratioNum + Number(smallNum)) {
+          uni.showToast({ title: '库存还剩' + bigNum, icon: 'none' })
+        } else {
+          this.updateItemEvent(this.customData)
+          this.modalCancel()
+        }
+      })
+    },
+    /** 选好了：校验限购后跳转确认页 */
+    confirmSelectEvent() {
+      if (!this.selectList.length) {
+        this.$msg('请选择花材')
+        return
+      }
+      const selectList = this.selectList
+      const list = []
+      for (let i = 0; i < selectList.length; i++) {
+        if (!/(^[1-9]\d*$)/.test(selectList[i].bigCount) && !/(^[1-9]\d*$)/.test(selectList[i].smallCount)) {
+          continue
+        }
+        list.push(selectList[i])
+      }
+      if (list.length <= 0) {
+        this.$msg('请选择花材')
+        return
+      }
+      const ghsId = Number(this.shopAccount) || Number(this.option && this.option.account) || Number(uni.getStorageSync('account')) || 0
+      if (!ghsId) {
+        this.$msg('缺少店铺信息')
+        return
+      }
+      const account = this.shopAccount || (this.option && this.option.account) || 0
+      const newList = list
+        .filter((item) => Number(item.limitBuy) > 0)
+        .map((item) => ({ id: item.id, bigCount: item.bigCount }))
+      const goAffirm = () => {
+        this.limitBuyWarnList = []
+        this.setLimitBuyInfoByType({ type: this.pageType, info: [] })
+        this.setSelectInfoByType({ type: this.pageType, info: list })
+        const realHdId = this.hdId || uni.getStorageSync('hdId') || 0
+        this.$util.pageTo({
+          url: '/pages/billing/affirmGhs',
+          query: { account, hdId: realHdId },
+          type: 2
+        })
+      }
+      if (newList.length > 0) {
+        getLimitBuyInfo({ ghsId, account, hdId: this.hdId, list: newList }).then((res) => {
+          const limitBuyInfo = Array.isArray(res.data) ? res.data : []
+          const warnList = limitBuyInfo.filter((item) => item.specialPrice === false && item.reachLimitBuyNum === true)
+          if (warnList.length > 0) {
+            this.limitBuyWarnList = warnList
+            this.cartItemShow = true
+            this.$msg('有花材超出限购')
+            return
+          }
+          this.setLimitBuyInfoByType({ type: this.pageType, info: limitBuyInfo })
+          this.setSelectInfoByType({ type: this.pageType, info: list })
+          const realHdId = this.hdId || uni.getStorageSync('hdId') || 0
+          this.$util.pageTo({
+            url: '/pages/billing/affirmGhs',
+            query: { account, hdId: realHdId },
+            type: 2
+          })
+        })
+      } else {
+        goAffirm()
+      }
+    },
     formatPrice(val) {
       const num = parseFloat(val)
       return isNaN(num) ? '0' : num
@@ -702,7 +1002,7 @@ export default {
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
-  padding-bottom: calc(100upx + env(safe-area-inset-bottom));
+  padding-bottom: calc(180upx + env(safe-area-inset-bottom));
   box-sizing: border-box;
 }
 
@@ -744,7 +1044,7 @@ export default {
   line-height: 72upx;
   border-radius: 36upx;
   background: #fff5f5;
-  color: #ff4757;
+  color: $fontPinkColor;
   font-size: 28upx;
   flex-shrink: 0;
 }
@@ -798,7 +1098,7 @@ export default {
 .notice-arrow {
   flex-shrink: 0;
   font-size: 36upx;
-  color: #ff4757;
+  color: $fontPinkColor;
   margin-left: 8upx;
   line-height: 1;
 }
@@ -818,17 +1118,17 @@ export default {
   background: #f7f8fa;
 }
 
-/* 花材分类区块：与花束分类视觉区分 */
+/* 花材分类区块：淡粉底色 $backPinkColor */
 .item-cate-block {
-  background: #f7f8fa;
+  background: $backPinkColor;
 }
 
 .item-cate-block--expanded .item-cate-header {
-  background: #fff5f5;
+  background: $backPinkColor;
 }
 
 .item-cate-block--expanded .item-cate-sub {
-  background: #fff;
+  background: $backPinkColor;
 }
 
 .item-cate-block--bottom {
@@ -862,7 +1162,7 @@ export default {
   flex: 1;
   font-size: 26upx;
   font-weight: 600;
-  color: #ff4757;
+  color: $fontPinkColor;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -871,7 +1171,7 @@ export default {
 
 .item-cate-arrow {
   font-size: 30upx;
-  color: #ff4757;
+  color: $fontPinkColor;
   flex-shrink: 0;
   line-height: 1;
 }
@@ -891,7 +1191,7 @@ export default {
   font-size: 24upx;
   color: #333;
   text-align: left;
-  border-top: 1upx solid #f5f5f5;
+  border-top: 1upx solid rgba(255, 71, 87, 0.08);
 }
 
 .item-cate-sub text {
@@ -906,7 +1206,7 @@ export default {
 
 /* 今日推荐、特价、满减：与 item 页左侧分类红色加粗 */
 .item-cate-sub-name--special {
-  color: #ff4757;
+  color: $fontPinkColor;
   font-weight: 600;
 }
 
@@ -916,7 +1216,7 @@ export default {
 
 .item-cate-sub--active {
   // color: #3385ff;
-  color: #ff4757;
+  color: $fontPinkColor;
   font-weight: 600;
   background: #fff;
 }
@@ -981,7 +1281,7 @@ export default {
 .nav-item--active {
   position: relative;
   background: #fff;
-  color: #ff4757;
+  color: $fontPinkColor;
   font-weight: 600;
 }
 
@@ -992,15 +1292,20 @@ export default {
   top: 0;
   bottom: 0;
   width: 6upx;
-  background: #ff4757;
+  background: $fontPinkColor;
 }
 
 .nav-item--active .bouquet-cate-name {
-  color: #ff4757;
+  color: $fontPinkColor;
 }
 
 .side-nav-placeholder {
-  height: 40upx;
+  height: calc(180upx + env(safe-area-inset-bottom));
+}
+
+/* 底部 FooterCart 出现时，左侧分类可继续上滑，避免被全宽栏挡住 */
+.side-nav-placeholder--cart {
+  height: calc(268upx + env(safe-area-inset-bottom));
 }
 
 .content-panel {
@@ -1016,6 +1321,10 @@ export default {
   overflow: hidden;
 }
 
+.product-section {
+  margin-top: 24upx;
+}
+
 .ad-swiper {
   height: 200upx;
 }
@@ -1054,7 +1363,7 @@ export default {
 }
 
 .ad-dot--active {
-  background: #ff4757;
+  background: $fontPinkColor;
   width: 20upx;
 }
 
@@ -1076,6 +1385,7 @@ export default {
   border-radius: 12upx;
   flex-shrink: 0;
   background: #f0f0f0;
+  overflow: hidden;
 }
 
 .goods-info {
@@ -1118,7 +1428,7 @@ export default {
 .goods-price {
   font-size: 32upx;
   font-weight: 700;
-  color: #ff4757;
+  color: $fontPinkColor;
 }
 
 .goods-cart-btn {
@@ -1138,6 +1448,194 @@ export default {
   height: 40upx;
 }
 
+.content-bottom-placeholder--cart {
+  height: 140upx;
+}
+
+.item-product-list {
+  padding: 0 16upx;
+}
+
+.item-product-row {
+  position: relative;
+}
+
+/* 整页全宽 FooterCart：只改 bottom，保留组件默认 702upx 居中样式 */
+.shop-category-footer-cart {
+  ::v-deep .cart-ft_bx {
+    bottom: calc(180upx + env(safe-area-inset-bottom));
+  }
+}
+
+.item-cart-mask {
+  position: fixed;
+  z-index: 190;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.item-cart-panel {
+  position: fixed;
+  bottom: calc(180upx + env(safe-area-inset-bottom));
+  width: 100vw;
+  background-color: #fff;
+}
+
+/* FooterCart 显示时，弹层上移到购物车栏上方 */
+.item-cart-panel--above-footer {
+  bottom: calc(276upx + env(safe-area-inset-bottom));
+}
+
+.commodity-view {
+  display: flex;
+  flex-direction: column;
+}
+
+.commodity-view .commodity-list {
+  overflow: scroll;
+  max-height: 60vh;
+  padding: 20upx;
+}
+
+.commodity-view .commodity-item {
+  display: flex;
+  margin-bottom: 20upx;
+}
+
+.commodity-view .item-icon {
+  flex-shrink: 0;
+  width: 140upx;
+  height: 140upx;
+}
+
+.commodity-view .item-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  margin-left: 20upx;
+  position: relative;
+}
+
+.commodity-view .info-line {
+  margin-bottom: 20upx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.commodity-view .item-name {
+  color: #333;
+  font-size: 30upx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 400upx;
+}
+
+.commodity-view .item-price {
+  color: #333;
+  font-size: 22upx;
+  white-space: nowrap;
+}
+
+.commodity-view .item-price .price {
+  font-size: 32upx;
+  font-weight: bold;
+}
+
+.commodity-view .item-price .price-reach {
+  color: $fontPinkColor;
+}
+
+.commodity-view .item-price .price-original {
+  margin-right: 6upx;
+  font-size: 28upx;
+  color: #A9A9A9;
+  text-decoration: line-through;
+  font-weight: normal;
+}
+
+.commodity-view .limit-buy-tip {
+  position: absolute;
+  left: 0;
+  top: 86upx;
+  color: $fontPinkColor;
+  font-size: 24upx;
+}
+
+.cart-stepper-wrap {
+  text-align: right;
+}
+
+.cart-stepper-wrap .open-bx {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cart-stepper-wrap .iconfont {
+  color: #3385ff;
+  font-size: 60upx;
+}
+
+.cart-stepper-wrap .num {
+  display: inline-block;
+  min-width: 100upx;
+  height: 55upx;
+  line-height: 55upx;
+  text-align: center;
+  margin: 0 8upx;
+  color: #868686;
+  border-radius: 22upx;
+  background-color: #f5f5f5;
+  font-size: 28upx;
+}
+
+.cart-stepper-wrap .num-big {
+  font-weight: bold;
+  color: #3385ff;
+}
+
+.commodity-view .summary-bar {
+  padding: 0 20upx;
+  height: 90upx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1upx solid #eee;
+}
+
+.cart-clear-btn {
+  border: none;
+}
+
+.select-cmd_bx .kc {
+  color: #999;
+  font-size: 28upx;
+  margin-bottom: 60upx;
+  text-align: center;
+  margin-top: 10upx;
+}
+
+.select-cmd_bx .num_bx {
+  display: flex;
+  align-items: center;
+  margin-bottom: 80upx;
+}
+
+.select-cmd_bx .num_bx input {
+  width: 480upx;
+  height: 80upx;
+  border: 1upx solid #ddd;
+  border-radius: 4upx;
+  text-align: center;
+  margin-left: 50upx;
+  font-size: 40upx;
+}
+
 ::v-deep .item-cate-header-icon {
   flex-shrink: 0;
 }