feat：173版本

2026-08-29 13:02:46 +08:00
parent 23b30c8f04
commit 388c0d5185
17 changed files with 704 additions and 197 deletions
@@ -4,9 +4,8 @@
    <view class="header_title_warp" :class="{ 'is-scrolled': isScrolled }" :style="headerContainerStyle">
      <view class="language_warp" style="flex: 1; justify-content: flex-start;" :style="languageBoxStyle"
        @click.stop="jumpSearch">
-        <view :style="isMP ? 'display: flex; align-items: center;margin-top: 0;' : 'margin-top: 0;'">
-          <up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20" bgColor="#f1f6ff00"
-            :style="searchIconStyle"></up-image>
+        <view class="search_icon_box">
+          <image src="https://static.tbmall.xin/static/home/search_b.png" class="tab-icon"></image>
        </view>
        <text class="search_msg_warp" :style="searchMsgStyle">搜索</text>
      </view>
@@ -71,13 +70,9 @@
            </view>
          </view>
          <view class="yp_content">
-            <!-- <up-loading-icon :show="productLoading"></up-loading-icon> -->
            <view class="yp_item" v-for="item in faddishProduct" :key="item.id" @click.stop="jumpInfo(item)">
              <view class="yp_item_image_wrapper">
-                <image :src="item.url" mode="aspectFill" lazy-load class="yp_item_image" shape="square" radius="15">
-                </image>
-                <!-- <up-image :src="item.url" width="100%" height="88" bgColor="#f1f6ff00" shape="square"
-                    radius="15"></up-image> -->
+                <image :src="item.url" mode="cover" lazy-load class="yp_item_image"></image>
              </view>
              <view class="yp_item_info">
                <view class="yp_item_name">{{ item.title }}</view>
@@ -502,43 +497,42 @@ export default {
      });
    },
    initMPHeader() {
+      // #ifdef MP-WEIXIN || MP
      try {
        const menuButton = uni.getMenuButtonBoundingClientRect();
        const systemInfo = uni.getSystemInfoSync();
-        const statusBarHeight = systemInfo.statusBarHeight || 0;

-        const menuButtonHeight = menuButton.height;
-        const menuButtonTop = menuButton.top;
-        const menuButtonLeft = menuButton.left;
-        const windowWidth = systemInfo.windowWidth;
+        if (menuButton && menuButton.top && menuButton.top > 0) {
+          const menuButtonHeight = menuButton.height || 32;
+          const menuButtonTop = menuButton.top;
+          const menuButtonLeft = menuButton.left;
+          const windowWidth = systemInfo.windowWidth;

-        // Calculate top offset below capsule button specifically for WeChat Mini Program
-        const headerTop = menuButtonTop + menuButtonHeight + 8;
-        this.mpHeaderStyle = {
-          paddingTop: `${headerTop}px`,
-          paddingRight: '15px',
-          paddingBottom: '10px',
-          paddingLeft: '15px',
-          height: `${menuButtonHeight}px`,
-          boxSizing: 'content-box',
-          display: 'flex',
-          alignItems: 'center'
-        };
+          const rightPadding = windowWidth - menuButtonLeft + 10;

-        this.mpLanguageStyle = {
-          height: `${menuButtonHeight}px`,
-          boxSizing: 'border-box',
-          display: 'flex',
-          alignItems: 'center'
-        };
+          this.mpHeaderStyle = {
+            paddingTop: `${menuButtonTop}px`,
+            paddingRight: `${rightPadding}px`,
+            paddingLeft: '12px',
+            paddingBottom: '8px',
+            height: `${menuButtonHeight}px`,
+            boxSizing: 'content-box',
+            display: 'flex',
+            alignItems: 'center'
+          };

-        const warpPaddingTop = headerTop + menuButtonHeight;
-        this.mpHeaderWarpStyle = {
-          paddingTop: `${warpPaddingTop}px`
-        };
+          this.mpLanguageStyle = {
+            height: `${menuButtonHeight}px`,
+            borderRadius: `${menuButtonHeight / 2}px`,
+            boxSizing: 'border-box',
+            display: 'flex',
+            alignItems: 'center'
+          };
+        }
      } catch (e) {
        console.error("initMPHeader error:", e);
      }
+      // #endif
    },
    // 切换活动类型
    jumpTab(item, type) {
@@ -912,7 +906,11 @@ export default {
      };
    },
    languageBoxStyle() {
-      const base = this.isMP ? { height: this.mpLanguageStyle?.height, boxSizing: 'border-box' } : {};
+      const base = this.isMP ? {
+        height: this.mpLanguageStyle?.height,
+        borderRadius: this.mpLanguageStyle?.borderRadius,
+        boxSizing: 'border-box'
+      } : {};
      if (this.isScrolled) {
        return {
          ...base,
@@ -927,7 +925,7 @@ export default {
      };
    },
    searchMsgStyle() {
-      const base = this.isMP ? { lineHeight: '1' } : {};
+      const base = { lineHeight: '1' };
      if (this.isScrolled) {
        return { ...base, color: '#888888' };
      }
@@ -1034,6 +1032,17 @@ export default {
    border-radius: 34rpx;
    box-sizing: border-box;
    transition: all 0.3s ease;
+
+    .search_icon_box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .tab-icon {
+        width: 40rpx;
+        height: 40rpx;
+      }
+    }
  }

  .chart_img {
@@ -1078,6 +1087,9 @@ export default {
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.95);
    transition: color 0.3s ease;
+    line-height: 1;
+    display: flex;
+    align-items: center;
  }
 }

@@ -1216,7 +1228,7 @@ export default {
    margin: 0 30rpx 100rpx;
    box-sizing: border-box;
    height: auto;
-    background: #fff;
+    background: linear-gradient(344deg, #FFFFFF 0%, #EDE3FF 100%);
    border-radius: 28rpx;
    border: 1rpx solid #dfdfdf;
    padding: 24rpx 20rpx 20rpx;
@@ -1250,7 +1262,7 @@ export default {

  .yp_title_sub {
    font-size: 22rpx;
-    color: #333333;
+    color: #000000;
    font-weight: 500;
  }

@@ -1287,19 +1299,17 @@ export default {
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
+    gap: 16rpx;
  }

  .yp_item {
-    // flex: 0 0 32%;
    flex: 1;
-    // height: 268rpx;
    max-width: 33.3%;
-    gap: 10rpx;
    min-width: 0;
-    background-color: #ffffff;
+    background: #F0E7FE;
    border-radius: 24rpx;
-    border: 1rpx solid #eae5f9;
-    padding: 16rpx;
+    padding: 0;
+    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
@@ -1308,13 +1318,16 @@ export default {

  .yp_item_image_wrapper {
    width: 100%;
+    height: 174rpx;
+    border-radius: 24rpx 24rpx 0 0;
    display: flex;
+    align-items: center;
    justify-content: center;
+    overflow: hidden;

    .yp_item_image {
      width: 100%;
-      height: 176rpx;
-      border-radius: 15rpx;
+      height: 100%;
    }
  }

@@ -1324,10 +1337,12 @@ export default {
    align-items: center;
    width: 100%;
    min-width: 0;
+    padding: 12rpx 10rpx 14rpx 10rpx;
+    box-sizing: border-box;
  }

  .yp_item_name {
-    font-size: 24rpx;
+    font-size: 30rpx;
    color: #000000;
    font-weight: bold;
    text-align: center;
@@ -1335,18 +1350,18 @@ export default {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
-    margin-bottom: 12rpx;
+    margin-bottom: 10rpx;
  }

  .yp_item_price_tag {
    width: 100%;
-    background: linear-gradient(270deg, #b164fb 0%, #7632ff 100%);
+    background: linear-gradient(90deg, #7632FF 0%, #B164FB 100%);
    color: #ffffff;
-    font-size: 20rpx;
+    font-size: 22rpx;
    display: flex;
    justify-content: center;
    align-items: center;
-    height: 44rpx;
+    height: 48rpx;
    border-radius: 12rpx;
    white-space: nowrap;
    font-weight: bold;