Explorar el Código

零售端-商品分类、购物车界面优化

ouyang hace 2 semanas
padre
commit
6fb5aa27e6

+ 4 - 3
mallApp/src/components/shop-tab-bar/index.vue

@@ -119,8 +119,9 @@ export default {
   flex-direction: row;
   flex-direction: row;
   align-items: center;
   align-items: center;
   justify-content: space-around;
   justify-content: space-around;
-  height: 180upx;
-  padding-bottom: env(safe-area-inset-bottom);
+  box-sizing: border-box;
+  height: $shopTabBarTotalHeight;
+  padding-bottom: $shopTabBarSafeInset;
   background: #fff;
   background: #fff;
   border-top: 1upx solid #eee;
   border-top: 1upx solid #eee;
   box-shadow: 0 -4upx 16upx rgba(0, 0, 0, 0.04);
   box-shadow: 0 -4upx 16upx rgba(0, 0, 0, 0.04);
@@ -132,7 +133,7 @@ export default {
   flex-direction: column;
   flex-direction: column;
   align-items: center;
   align-items: center;
   justify-content: center;
   justify-content: center;
-  padding-top: 8upx;
+  padding-top: 4upx;
 }
 }
 
 
 .tab-icon-wrap {
 .tab-icon-wrap {

+ 7 - 5
mallApp/src/pages/home/cart.vue

@@ -689,7 +689,7 @@ export default {
   min-height: 100vh;
   min-height: 100vh;
   background: $backColor;
   background: $backColor;
   box-sizing: border-box;
   box-sizing: border-box;
-  padding-bottom: calc(300upx + env(safe-area-inset-bottom));
+  padding-bottom: calc(#{$shopTabBarTotalHeight} + #{$shopCartCheckoutHeight});
 }
 }
 
 
 .cart-scroll {
 .cart-scroll {
@@ -922,8 +922,6 @@ export default {
 }
 }
 
 
 .stepper-btn {
 .stepper-btn {
-  width: 48upx;
-  height: 48upx;
   border-radius: 8upx;
   border-radius: 8upx;
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
@@ -932,11 +930,15 @@ export default {
 }
 }
 
 
 .stepper-btn--minus {
 .stepper-btn--minus {
+  width: 48upx;
+  height: 48upx;
   border: 2upx solid $greenColor;
   border: 2upx solid $greenColor;
   background: #fff;
   background: #fff;
 }
 }
 
 
 .stepper-btn--plus {
 .stepper-btn--plus {
+  width: 55upx;
+  height: 55upx;
   background: $greenColor;
   background: $greenColor;
 }
 }
 
 
@@ -995,8 +997,8 @@ export default {
   position: fixed;
   position: fixed;
   left: 0;
   left: 0;
   right: 0;
   right: 0;
-  bottom: calc(110upx + env(safe-area-inset-bottom)); 
-  z-index: 190;
+  bottom: $shopTabBarTotalHeight;
+  z-index: 199;
   background: #fff;
   background: #fff;
   box-shadow: 0 -4upx 16upx rgba(0, 0, 0, 0.06);
   box-shadow: 0 -4upx 16upx rgba(0, 0, 0, 0.06);
 }
 }

+ 11 - 9
mallApp/src/pages/home/shop-category.vue

@@ -27,6 +27,7 @@
         @tap.stop="openNoticeDetail"
         @tap.stop="openNoticeDetail"
       >
       >
         <view class="notice-left">
         <view class="notice-left">
+		  <sprite-icon name="notice" :size="30" custom-class="item-cate-header-icon" />
           <text class="notice-tag">通知公告</text>
           <text class="notice-tag">通知公告</text>
           <swiper
           <swiper
             class="notice-swiper"
             class="notice-swiper"
@@ -1006,7 +1007,7 @@ export default {
   flex-direction: column;
   flex-direction: column;
   min-height: 0;
   min-height: 0;
   overflow: hidden;
   overflow: hidden;
-  padding-bottom: calc(180upx + env(safe-area-inset-bottom));
+  padding-bottom: $shopTabBarTotalHeight;
   box-sizing: border-box;
   box-sizing: border-box;
 }
 }
 
 
@@ -1079,7 +1080,7 @@ export default {
   font-size: 26upx;
   font-size: 26upx;
   font-weight: 600;
   font-weight: 600;
   color: #ff4757;
   color: #ff4757;
-  margin-right: 12upx;
+  margin: 0 12upx;
 }
 }
 
 
 .notice-swiper {
 .notice-swiper {
@@ -1304,12 +1305,12 @@ export default {
 }
 }
 
 
 .side-nav-placeholder {
 .side-nav-placeholder {
-  height: calc(180upx + env(safe-area-inset-bottom));
+  height: $shopTabBarTotalHeight;
 }
 }
 
 
 /* 底部 FooterCart 出现时,左侧分类可继续上滑,避免被全宽栏挡住 */
 /* 底部 FooterCart 出现时,左侧分类可继续上滑,避免被全宽栏挡住 */
 .side-nav-placeholder--cart {
 .side-nav-placeholder--cart {
-  height: calc(268upx + env(safe-area-inset-bottom));
+  height: $shopFooterCartStackHeight;
 }
 }
 
 
 .content-panel {
 .content-panel {
@@ -1453,7 +1454,7 @@ export default {
 }
 }
 
 
 .content-bottom-placeholder--cart {
 .content-bottom-placeholder--cart {
-  height: 140upx;
+  height: calc(#{$shopFooterCartHeight} + #{$shopFooterCartGap});
 }
 }
 
 
 .item-product-list {
 .item-product-list {
@@ -1464,10 +1465,11 @@ export default {
   position: relative;
   position: relative;
 }
 }
 
 
-/* 整页全宽 FooterCart:只改 bottom,保留组件默认 702upx 居中样式 */
+/* 整页全宽 FooterCart:bottom 须高于 Tab 栏(115upx + 安全区),避免真机重叠 */
 .shop-category-footer-cart {
 .shop-category-footer-cart {
   ::v-deep .cart-ft_bx {
   ::v-deep .cart-ft_bx {
-    bottom: calc(130upx + env(safe-area-inset-bottom));
+    bottom: $shopFooterCartBottom;
+    z-index: 199;
   }
   }
 }
 }
 
 
@@ -1483,14 +1485,14 @@ export default {
 
 
 .item-cart-panel {
 .item-cart-panel {
   position: fixed;
   position: fixed;
-  bottom: calc(180upx + env(safe-area-inset-bottom));
+  bottom: $shopTabBarTotalHeight;
   width: 100vw;
   width: 100vw;
   background-color: #fff;
   background-color: #fff;
 }
 }
 
 
 /* FooterCart 显示时,弹层上移到购物车栏上方 */
 /* FooterCart 显示时,弹层上移到购物车栏上方 */
 .item-cart-panel--above-footer {
 .item-cart-panel--above-footer {
-  bottom: calc(276upx + env(safe-area-inset-bottom));
+  bottom: $shopFooterCartStackHeight;
 }
 }
 
 
 .commodity-view {
 .commodity-view {

+ 11 - 0
mallApp/src/uni.scss

@@ -34,6 +34,17 @@ $borderColor1: #46963E;
 $backColor: #f5f5f5;
 $backColor: #f5f5f5;
 $backPinkColor:#fff5f5; //淡粉色
 $backPinkColor:#fff5f5; //淡粉色
 
 
+// 店铺底部 Tab 栏(shop-tab-bar 组件),页面内浮动栏需按此高度抬高
+$shopTabBarContentHeight: 115upx;
+$shopFooterCartHeight: 88upx;
+$shopTabBarSafeInset: env(safe-area-inset-bottom);
+$shopTabBarTotalHeight: calc(#{$shopTabBarContentHeight} + #{$shopTabBarSafeInset});
+$shopFooterCartGap: 12upx;
+$shopFooterCartBottom: calc(#{$shopTabBarContentHeight} + #{$shopFooterCartGap} + #{$shopTabBarSafeInset});
+$shopFooterCartStackHeight: calc(#{$shopTabBarContentHeight} + #{$shopFooterCartHeight} + #{$shopFooterCartGap} + #{$shopTabBarSafeInset});
+// 购物车页结算栏(优惠券条 + 合计行)近似高度
+$shopCartCheckoutHeight: 176upx;
+
 
 
 // minxin
 // minxin
 @mixin disFlexCen(){
 @mixin disFlexCen(){

+ 2 - 1
mallApp/src/utils/mainIndexSprite.js

@@ -16,7 +16,7 @@ const DEFAULT_SHEET_KEY = "main";
  */
  */
 export const SPRITE_SHEETS = {
 export const SPRITE_SHEETS = {
   main: {
   main: {
-    path: "/hhb/sprite_icon/main-index.webp?time=26071610",
+    path: "/hhb/sprite_icon/main-index.webp?time=26071614",
     width: 500,
     width: 500,
     height: 500,
     height: 500,
     icons: {
     icons: {
@@ -59,6 +59,7 @@ export const SPRITE_SHEETS = {
 	  "icon-order": { x: 366, y: 245, w: 50, h: 50 },
 	  "icon-order": { x: 366, y: 245, w: 50, h: 50 },
 	  "icon-order-active": { x: 418, y: 245 , w: 50, h: 50 },
 	  "icon-order-active": { x: 418, y: 245 , w: 50, h: 50 },
 	  "cart-delete": { x: 7, y: 298 , w: 46, h: 52 },//购物车-删除
 	  "cart-delete": { x: 7, y: 298 , w: 46, h: 52 },//购物车-删除
+	  "notice": { x: 216, y: 15 , w: 31, h: 31 },//公告通知
     }
     }
   },
   },
   /** 进货/供货商专用雪碧图,坐标待设计稿测量后补全 */
   /** 进货/供货商专用雪碧图,坐标待设计稿测量后补全 */