优化

mallApp/src/components/plugin/bottom-popup.vue

@@ -55,7 +55,7 @@ export default {
 		left: 0;
 		right: 0;
 		bottom: 0;
-		z-index: 999;
+		z-index: 998;
 		visibility: hidden;
 		transform: translate3d(0, 100%, 0);
 		transform-origin: center;
@@ -77,7 +77,7 @@ export default {
 		right: 0;
 		bottom: 0;
 		background: rgba(0, 0, 0, 0.6);
-		z-index: 996;
+		z-index: 997;
 		transition: all 0.3s ease-in-out;
 		opacity: 0;
 		visibility: hidden;

mallApp/src/pages/goods/components/buy-foot.vue

@@ -10,16 +10,10 @@
                 <view class="btn-text">咨询</view>
             </view>
         </view>
-        <!-- <view class="btn-right">
-            <view class="btn-wrap">
-                <i class="iconfont iconxiaoxi"></i>
-                <view class="btn-text" @click="goChat">咨询</view>
-            </view>
-        </view> -->
-        <div class="btn-right">
+        <view class="btn-right">
             <button v-if="priceType == 1" class="button-com red" @click="buy">购买</button>
             <button v-if="priceType == 0" class="button-com red" @click.stop="goChat">询价</button>
-        </div>
+        </view>
     </view>
 </template>
 
@@ -53,31 +47,88 @@ export default {
 <style lang="scss" scoped>
 .app-footer {
     @include disFlex(center, space-between);
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background-color: #FFFFFF;
+    min-height: 160upx !important;
+    padding: 20upx 0;
+    padding-bottom: calc(24upx + constant(safe-area-inset-bottom));
+    padding-bottom: calc(24upx + env(safe-area-inset-bottom));
+    box-shadow: 0 -2upx 10upx rgba(0, 0, 0, 0.05);
+    /* #ifdef MP */
+    bottom: 20upx;  /* 统一在小程序中上移20upx */
+    /* #endif */
+
     .btn-left {
         @include disFlex(center, space-evenly);
         width: 58%;
+        height: 100%;
+        padding: 0;
+
+        .btn-wrap {
+            @include disFlex(center, center);
+            flex-direction: column;
+            height: 100%;
+            padding: 8upx 0;
+            justify-content: space-evenly;
+        }
+        
         .iconfont {
-            font-size: 44upx;
+            font-size: 48upx;
+            line-height: 1;
+            height: 48upx;
+            margin-bottom: 8upx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
+        
         .btn-text {
-            font-size: 24upx;
-            font-weight: 200;
-            transform: scale(0.9);
+            font-size: 26upx;
+            font-weight: 400;
+            line-height: 1;
+            height: 26upx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
     }
+    
     .btn-right {
-        width: 62%;
+        width: 42%;
+        height: 100%;
         @include disFlex(center, center);
+        padding: 8upx 20upx;
+        
         .button-com {
-            width: calc(90% - 30upx);
+            width: 100%;
+            height: 84upx;
+            line-height: 84upx;
             font-size: 32upx;
-            font-weight: 400;
-            height: 88upx; // 增加按钮高度
-            line-height: 88upx; // 设置行高等于高度，实现垂直居中
-            display: flex; // 使用flex布局
-            align-items: center; // 垂直居中
-            justify-content: center; // 水平居中
-            padding: 0; // 移除默认内边距，使用flex布局控制
+            font-weight: 500;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            margin: 0;
+            border: none;
+            background-color: transparent;
+            -webkit-appearance: none;
+            appearance: none;
+            -webkit-tap-highlight-color: transparent;
+            outline: none;
+            box-sizing: border-box;
+            border-radius: 8upx;
+            
+            &.red {
+                background: #FF0036 !important;
+                background-color: #FF0036 !important;
+                color: #FFFFFF !important;
+            }
         }
     }
 }

mallApp/src/pages/goods/components/sel-popup.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="sel-popup">
+  <view class="sel-popup">
     <bottom-popup class="popup-wrap" :show="show" @close="close">
       <app-close @close="close" />
-      <div class="tui-popup-box">
+      <view class="tui-popup-box">
         <scroll-view scroll-y class="tui-popup-scroll">
-          <div class="tui-scrolldiv-box">
-            <div class="tui-number-box tui-bold tui-attr-title">
-              <div class="tui-attr-title">数量</div>
-              <div class="number-box-wrapper">
+          <view class="tui-scrolldiv-box">
+            <view class="tui-number-box tui-bold tui-attr-title">
+              <view class="tui-attr-title">数量</view>
+              <view class="number-box-wrapper">
                 <number-box
                   :max="maxStock"
                   :min="1"
@@ -19,18 +19,18 @@
                   @change="change"
                 >
                 </number-box>
-              </div>
-            </div>
-          </div>
+              </view>
+            </view>
+          </view>
         </scroll-view>
-        <div class="tui-popup-btn">
+        <view class="tui-popup-btn">
           <button class="button-com red enhanced-btn" @click="nextFn">
             下一步
           </button>
-        </div>
-      </div>
+        </view>
+      </view>
     </bottom-popup>
-  </div>
+  </view>
 </template>
 <script>
 import BottomPopup from "@/components/plugin/bottom-popup";
@@ -111,8 +111,9 @@ export default {
   .tui-popup-class {
     border-top-left-radius: 24rpx;
     border-top-right-radius: 24rpx;
-    // 适配iphoneX
-    padding-bottom: env(safe-area-inset-bottom);
+    // 适配iphoneX和安卓
+    padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */
+    padding-bottom: env(safe-area-inset-bottom); /* iOS >= 11.2 */
   }
 
   .tui-popup-box {
@@ -128,7 +129,7 @@ export default {
     width: 100%;
     margin-top: auto;
     padding: 20rpx 30rpx 20rpx 30rpx;
-    padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
+    padding-bottom: 180upx;
     @include disFlex(center, center);
     border-top: 1rpx solid $borderColor;
     background: #fff;

mallApp/src/pages/goods/detail.vue

@@ -1,72 +1,68 @@
 <template>
-  <scroll-view class="app-content" scroll-y="true" @scroll="scrollFn">
-    <app-swiper
-      :height="{ type: 'number', val: 750 }"
-      :tagShow="true"
-      :list="imgList"
-    />
-    <view class="shop-intro">
-      <view class="app-price app-bold" v-if="data.priceType == 1">
-        <text>￥</text>
-        <text class="app-size-34">
-          {{ data.price ? parseFloat(data.price).toFixed(2) : 0}}
-        </text>
-      </view>
-      <view class="tui-pro-titbox">
-        <view class="tui-pro-title app-size-32">{{ data.name }}</view>
-        <button open-type="share" class="share-button" @click="shareFn">
-          <i class="iconfont iconfenxiang"></i>
-          <text class="share-text">分享</text>
-        </button>
-      </view>
-      <view class="shop-express app-color-3">
-        <view>线下门店</view>
-        <view>
-          <span class="prompt-text">快速发货</span>
+  <view class="page-container">
+    <scroll-view class="app-content" scroll-y="true" @scroll="scrollFn">
+      <app-swiper
+        :height="{ type: 'number', val: 750 }"
+        :tagShow="true"
+        :list="imgList"
+      />
+      <view class="shop-intro">
+        <view class="app-price app-bold" v-if="data.priceType == 1">
+          <text>￥</text>
+          <text class="app-size-34">
+            {{ data.price ? parseFloat(data.price).toFixed(2) : 0}}
+          </text>
         </view>
-        <view>
-          <span class="prompt-text">品质保证</span>
+        <view class="tui-pro-titbox">
+          <view class="tui-pro-title app-size-32">{{ data.name }}</view>
+          <button open-type="share" class="share-button" @click="shareFn">
+            <i class="iconfont iconfenxiang"></i>
+            <text class="share-text">分享</text>
+          </button>
+        </view>
+        <view class="shop-express app-color-3">
+          <view>线下门店</view>
+          <view>
+            <span class="prompt-text">快速发货</span>
+          </view>
+          <view>
+            <span class="prompt-text">品质保证</span>
+          </view>
         </view>
       </view>
-    </view>
-    <view class="module-wrap shop-detail">
-      <view class="module-tit app-size-30">商品详情</view>
-      <view class="module-det">
-        <view class="module-det-text">
-          <view class="preview-page">
-            <!-- 页面头部 -->
-            <!-- <view class="page-header">
-              <view class="header-content">
-                <text class="page-title">{{ title || "内容预览" }}</text>
+      <view class="module-wrap shop-detail">
+        <view class="module-tit app-size-30">商品详情</view>
+        <view class="module-det">
+          <view class="module-det-text">
+            <view class="preview-page">
+              <!-- 预览内容区域 -->
+              <view class="preview-content">
+                <rich-media-viewer
+                  ref="richMediaViewerGoods"
+                  :content="previewContent"
+                  :startScroll="350"
+                  :threshold="550"
+                />
               </view>
-            </view> -->
-
-            <!-- 预览内容区域 -->
-            <view class="preview-content">
-              <rich-media-viewer
-                ref="richMediaViewerGoods"
-                :content="previewContent"
-                :startScroll="350"
-                :threshold="550"
-              />
             </view>
           </view>
         </view>
       </view>
-    </view>
-    <view class="module-wrap shop-desc">
-      <view class="module-tit app-size-30">{{ common_title }}</view>
-      <view class="module-det">
-        <view class="preview-content">
-          <rich-media-viewer
-            ref="richMediaViewerCommon"
-            :content="common_previewContent"
-            :startScroll="300"
-            :threshold="450"
-          />
+      <view class="module-wrap shop-desc">
+        <view class="module-tit app-size-30">{{ common_title }}</view>
+        <view class="module-det">
+          <view class="preview-content">
+            <rich-media-viewer
+              ref="richMediaViewerCommon"
+              :content="common_previewContent"
+              :startScroll="300"
+              :threshold="450"
+            />
+          </view>
         </view>
       </view>
-    </view>
+    </scroll-view>
+    
     <sel-popup
       :show="popupShow"
       :info="data"
@@ -76,6 +72,7 @@
       @change="changeNum"
       @close="hidePopup"
     />
+    
     <buy-foot
       @buy="showPopup"
       @goShop="goToShop"
@@ -83,7 +80,7 @@
       :priceType="data.priceType"
       @goChat="goChat"
     />
-  </scroll-view>
+  </view>
 </template>
 <script>
 import AppSwiper from "@/components/app-swiper";
@@ -395,9 +392,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.app-content {
-  padding-bottom: 120upx;
+.page-container {
+  position: relative;
+  width: 100%;
   height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.app-content {
+  height: 100%;
+  /* #ifdef MP */
+  padding-bottom: calc(220upx + constant(safe-area-inset-bottom)); /* iOS 11.0 */
+  padding-bottom: calc(220upx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
+  /* #endif */
+  /* #ifdef APP-PLUS */
+  padding-bottom: calc(200upx + constant(safe-area-inset-bottom)); /* iOS 11.0 */
+  padding-bottom: calc(200upx + env(safe-area-inset-bottom)); /* iOS 11.2+ */
+  /* #endif */
+  box-sizing: border-box;
   // 公共模块
   .module-wrap {
     margin-top: 20upx;