零售端-购物车优化

mallApp/src/components/home/noticeBar.vue

@@ -17,6 +17,7 @@
       :circular="noticeList.length > 1"
       :interval="6000"
       :duration="400"
+      :disable-touch="disableTouch"
       :skip-hidden-item-layout="true"
       @change="onNoticeChange"
       @tap.stop="openNoticeDetail"
@@ -50,6 +51,14 @@ export default {
     position: {
       type: [Number, String],
       default: NOTICE_POSITION_HOME
+    },
+    /**
+     * 禁用公告 swiper 手势（购物车等需页面纵向滚动时开启，避免抢滑动）
+     * 仍可自动轮播，点击进详情不受影响
+     */
+    disableTouch: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

mallApp/src/pages/home/cart.vue

@@ -2,13 +2,14 @@
   店铺购物车页
   用途：展示花材+花束购物车（Vuex cg 选型，property 区分），支持勾选、改数量、删除；去结算统一跳转 affirmMix
   顶部公告：/shop-notice/show-list position=4（购物车），UI 复用首页 noticeBar
+  滚动：页面原生滚动（不用 scroll-view），公告条 disableTouch，减少滑动卡顿
   路由：pages/home/cart?account=xxx&hdId=xxx
 -->
 <template>
-  <view class="cart-page">
-    <scroll-view scroll-y class="cart-scroll" :show-scrollbar="false">
-      <!-- 购物车公告：与首页公告条同组件，位置为购物车(4) -->
-      <home-notice-bar :account="shopAccount" :position="4" />
+  <view class="cart-page" :class="{ 'cart-page--has-checkout': displayCartList.length }">
+    <!-- 使用页面原生滚动，避免 scroll-view + 竖向公告 swiper 抢手势导致滑动卡顿 -->
+    <!-- 购物车公告：与首页公告条同组件，位置为购物车(4)；disableTouch 避免抢纵向滑动 -->
+    <home-notice-bar :account="shopAccount" :position="4" :disable-touch="true" />
 
       <!-- 店铺信息 -->
       <view class="store-card" v-if="displayCartList.length">
@@ -34,7 +35,7 @@
         <view
           class="cart-item"
           v-for="(item, index) in displayCartList"
-          :key="index"
+          :key="getItemKey(item)"
         >
           <view class="cart-item-check" :data-index="index" @tap="onToggleCheck">
             <text
@@ -91,7 +92,6 @@
       </view>
 
       <view class="cart-scroll-placeholder"></view>
-    </scroll-view>
 
     <!-- 底部结算栏 -->
     <view class="cart-footer" v-if="displayCartList.length">
@@ -727,12 +727,12 @@ export default {
   min-height: 100vh;
   background: $backColor;
   box-sizing: border-box;
-  padding-bottom: calc(#{$shopTabBarTotalHeight} + #{$shopCartCheckoutHeight});
+  padding-bottom: $shopTabBarTotalHeight;
 }
 
-.cart-scroll {
-  height: 100vh;
-  box-sizing: border-box;
+.cart-page--has-checkout {
+  /* 有结算栏时额外预留高度，避免最后一项被挡住 */
+  padding-bottom: calc(#{$shopTabBarTotalHeight} + #{$shopCartCheckoutHeight});
 }
 
 .store-card {