feat：优化分类

components/choiceness/choiceness.vue

@@ -7,8 +7,10 @@
     </view>
     <view class="choiceness_product" :class="platformType ? '' : 'iosplatformType'">
       <view v-for="item in productList" :key="item.id" class="choiceness_product_item" @click="jumpInfo(item)">
-        <up-image :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
+        <view>
-        <view class="product_item_name">{{ item.title }}</view>
+          <up-image :src="item.url" width="100%" height="140" bgColor="#f1f6ff00"></up-image>
+          <view class="product_item_name">{{ item.title }}</view>
+        </view>
         <view class="product_item_price">
           <view class="price_">
             <text>￥</text>
@@ -49,7 +51,7 @@ export default {
     },
     //
     jumpInfo(item) {
-      console.log('秦星星---1',item);
+      console.log('秦星星---1', item);
       uni.navigateTo({
         url: "/pages/other_package/productInfo/productInfo?id=" + item.id,
       });
@@ -101,6 +103,9 @@ export default {
     width: 43%;
     margin-bottom: 20rpx;
     padding: 20rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
   }
 
   .product_item_name {

pages/home/home.vue

@@ -4,9 +4,8 @@
     <view class="home_content_z_warp">
       <view class="home_header_warp" :style="mpHeaderWarpStyle">
         <view class="header_title_warp" :style="mpHeaderStyle">
-          <view class="language_warp" :style="mpLanguageStyle" style="flex: 1; justify-content: flex-start;"
+          <view class="language_warp" style="flex: 1; justify-content: flex-start;" @click="jumpSearch">
-            @click="jumpSearch">
+            <view :style="isMP ? 'display: flex; align-items: center;margin-top: 10rpx;' : 'margin-top: 10rpx;'">
-            <view :style="isMP ? 'display: flex; align-items: center;' : 'margin-top: 10rpx;'">
               <up-image src="https://static.tbmall.xin/static/home/search_b.png" width="20" height="20"
                 bgColor="#f1f6ff00"></up-image>
             </view>
@@ -202,8 +201,8 @@
         <view class="uni-banner-news">
           <view class="close_btn" @click="newsShow = false"></view>
           <view class="banner_box">
-            <view class="banner_box-title">{{ newsList[0].title }}</view>
+            <view class="banner_box-title">{{ newsList[0]?.title }}</view>
-            <view class="banner_box-subTitle">{{ newsList[0].subTitle }}</view>
+            <view class="banner_box-subTitle">{{ newsList[0]?.subTitle }}</view>
             <view class="banner_box-btn" @click="jumpNewSearch">查看</view>
           </view>
         </view>
@@ -765,8 +764,17 @@ export default {
     background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
     padding: calc(var(--status-bar-height) + 20rpx) 30rpx 20rpx;
     box-sizing: border-box;
-    /* 消除 fixed 定位与下方重叠层之间的 1px GPU 子像素渲染缝隙（白线） */
+
-    box-shadow: 0 2rpx 0 #9336df;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(270deg, #af39c4 0%, #7732ff 100%);
+      pointer-events: none;
+    }
   }
 
   .header_right_warp {
@@ -783,7 +791,7 @@ export default {
     padding: 10rpx 20rpx;
     background: #ffffff30;
     border-radius: 24rpx;
-    background: linear-gradient(270deg, #ae39c5, #7932fe) 2 2;
+    // background: linear-gradient(270deg, #ae39c5, #7932fe);
   }
 
   .chart_img {

pages/rwa_package/dongjian/search.vue

@@ -227,6 +227,11 @@ export default {
 		padding: 0 32rpx;
 		box-sizing: border-box;
 		background-color: #fff;
+		/* #ifdef MP-WEIXIN */
+		padding-top: 80rpx !important;
+		height: auto !important;
+		min-height: calc(118rpx + 80rpx) !important;
+		/* #endif */
 
 		.search-box {
 			width: 100%;

pages/sort/sort.vue

@@ -5,8 +5,8 @@
       <!-- 分类切换 -->
       <view class="sort_category_header">
         <view :class="selCategory === 1
-            ? 'category_item category_item_sel'
+          ? 'category_item category_item_sel'
-            : 'category_item'
+          : 'category_item'
           " @click="checkCategory(1)">
           <view>分类</view>
           <view v-if="selCategory === 1" class="category_item_sel_but"></view>
@@ -32,9 +32,9 @@
         </view>
       </scroll-view>
       <!-- 商品类别数据 -->
-      <scroll-view scroll-y class="right-box">
+      <scroll-view scroll-y class="right-box" :scroll-top="rightScrollTop">
         <!-- banner图 -->
-        <view style="padding: 0rpx 20rpx">
+        <view style="padding: 0rpx 20rpx" v-if="bannerList && bannerList.length > 0">
           <up-swiper :list="bannerList" height="80px"></up-swiper>
         </view>
         <view class="page-view">
@@ -46,7 +46,8 @@
             </view>
             <view class="item-container" v-if="item.foods && item.foods.length !== 0">
               <view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1" @click="jumpInfo(item1)">
-                <image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'" mode="">
+                <image class="item-menu-image" :src="item1.icon ? item1.icon : '/static/common/def_img.jpg'"
+                  mode="aspectFill">
                 </image>
                 <view class="item-menu-name">{{ item1.name }}</view>
               </view>
@@ -78,6 +79,7 @@ export default {
     return {
       selCategory: 1,
       scrollTop: 0, //tab标题的滚动条位置
+      rightScrollTop: 0, // 右侧内容的滚动条位置
       current: null, // 预设当前项的值
       menuHeight: 0, // 左边菜单的高度
       menuItemHeight: 0, // 左边菜单item的高度
@@ -86,6 +88,7 @@ export default {
       tabbarContentList: [], // 右侧内容的分类
       tabbarContentLoading: false,
       platformType: true,
+      isFromSortShop: false,
     };
   },
 
@@ -97,28 +100,38 @@ export default {
     const appUpdate = uni.getStorageSync("platform");
     this.platformType = appUpdate == "android" ? "ANDROID" : "IOS";
     /*#endif*/
-    const then = this;
+
+    const isBackFromSortShop = this.isFromSortShop;
+    this.isFromSortShop = false;
+
     this.getSort(0).then((resp) => {
       if (resp && resp.length !== 0) {
         this.tabbarList = resp;
-        const sortId = uni.getStorageSync("sortId");
+        let targetIndex = 0;
-        // 如果有默认的参数就默认选中参数
+        let fData = resp[0];
-        if (sortId && sortId !== 0) {
+
-          let fData = {};
+        if (isBackFromSortShop) {
-          let currentIndex = 0;
+          const sortId = uni.getStorageSync("sortId");
-          resp.map((item, index) => {
+          if (sortId && sortId !== 0) {
-            if (item.id === sortId) {
+            resp.forEach((item, index) => {
-              fData = item;
+              if (item.id === sortId) {
-              currentIndex = index;
+                fData = item;
-              return;
+                targetIndex = index;
-            }
+              }
-          });
+            });
-          this.swichMenu(fData, currentIndex);
+          } else if (this.current !== null && this.current >= 0 && this.current < resp.length) {
+            targetIndex = this.current;
+            fData = resp[targetIndex];
+          }
         } else {
-          const fData = resp[0];
+          uni.removeStorageSync("sortId");
-          // 否则就选中第一个
+          this.current = 0;
-          this.swichMenu(fData, 0);
+          this.scrollTop = 0;
+          targetIndex = 0;
+          fData = resp[0];
         }
+
+        this.swichMenu(fData, targetIndex, true);
       }
     });
     this.getCarouselImage();
@@ -146,6 +159,7 @@ export default {
     },
     jumpInfo(item) {
       console.log(item, "item");
+      this.isFromSortShop = true;
       // uni.navigateTo({
       // 	url: `/pages/other_package/productInfo/productInfo?id=${item.id}`,
       // })
@@ -170,9 +184,13 @@ export default {
       return Math.floor(Math.random() * 35);
     },
     // 点击左边的栏目切换
-    async swichMenu(item, index) {
+    async swichMenu(item, index, force = false) {
       console.log('点击左边的栏目切换', item, index, "item, index");
-      if (index == this.current) return;
+      if (!force && index == this.current && this.tabbarContentList.length > 0) return;
+      if (item && item.id) {
+        uni.setStorageSync("sortId", item.id);
+      }
+      this.rightScrollTop = 0;
       this.tabbarContentLoading = true;
       const firstData = await this.getSort(item.id);
       for (let fItem of firstData) {
@@ -186,7 +204,7 @@ export default {
         await this.getElRect("menu-scroll-view", "menuHeight");
         await this.getElRect("u-tab-item", "menuItemHeight");
       }
-      // 将菜单菜单活动item垂直居中
+      // 将菜单活动item垂直居中
       this.scrollTop =
         index * this.menuItemHeight +
         this.menuItemHeight / 2 -
@@ -196,19 +214,19 @@ export default {
 
     // 获取一个目标元素的高度
     getElRect(elClass, dataVal) {
-      new Promise((resolve, reject) => {
+      return new Promise((resolve) => {
         const query = uni.createSelectorQuery().in(this);
         query
           .select("." + elClass)
           .fields({ size: true }, (res) => {
-            // 如果节点尚未生成，res值为null，循环调用执行
             if (!res) {
               setTimeout(() => {
-                this.getElRect(elClass);
+                this.getElRect(elClass, dataVal).then(resolve);
               }, 10);
               return;
             }
             this[dataVal] = res.height;
+            resolve(res);
           })
           .exec();
       });
@@ -232,26 +250,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: hidden;
+}
+
 .sort_warp {
-  padding-top: env(safe-area-inset-top);
+  height: 100vh;
-  height: calc(100vh - env(safe-area-inset-bottom) - 50rpx);
+  /* #ifdef H5 */
+  height: calc(100vh - var(--window-top, 0px) - var(--window-bottom, 0px));
+  /* #endif */
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+  overflow: hidden;
-
+  box-sizing: border-box;
-  &.iosplatformType {
+  background-color: #fff;
-
-    .right-box {
-      padding-bottom: 100rpx !important;
-    }
-  }
 }
 
 .sort_header {
   display: flex;
   justify-content: space-between;
-  padding: 0 30rpx;
+  align-items: center;
+  padding: 20rpx 30rpx 10rpx;
+  flex-shrink: 0;
+  background-color: #fff;
+  z-index: 10;
+
+  /* #ifdef MP-WEIXIN */
   margin-top: 80rpx;
+  /* #endif */
 
   .sort_category_header {
     display: flex;
@@ -263,7 +290,6 @@ export default {
   }
 
   .category_item {
-
     width: 140rpx;
     font-weight: bold;
     font-size: 36rpx;
@@ -289,11 +315,12 @@ export default {
 
 .u-menu-wrap {
   flex: 1;
+  min-height: 0;
+  width: 100%;
   display: flex;
-  // overflow: hidden;
+  flex-direction: row;
-  // margin-top: 20rpx;
+  overflow: hidden;
-  // height: calc(100vh - 216rpx - env(safe-area-inset-bottom));
+  margin-top: 10rpx;
-  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
 }
 
 .u-search-inner {
@@ -313,12 +340,22 @@ export default {
 .u-tab-view {
   width: 200rpx;
   height: 100%;
+  flex-shrink: 0;
   background: #f6f6f6;
+  overflow-y: auto;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+
+  /* #ifdef APP-PLUS */
+  padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  padding-bottom: 0rpx;
+  /* #endif */
 }
 
 .u-tab-item {
   height: 110rpx;
-  // background: #f6f6f6;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -327,6 +364,8 @@ export default {
   color: #444;
   font-weight: 400;
   line-height: 1;
+  padding: 0 10rpx;
+  text-align: center;
 }
 
 .u-tab-item-active {
@@ -346,13 +385,21 @@ export default {
   top: 39rpx;
 }
 
-.u-tab-view {
-  height: 100%;
-}
-
 .right-box {
-  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  overflow-y: auto;
   background-color: rgb(250, 250, 250);
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+
+  /* #ifdef APP-PLUS */
+  padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
+  /* #endif */
+  /* #ifndef APP-PLUS */
+  padding-bottom: 0rpx;
+  /* #endif */
 }
 
 .page-view {
@@ -381,6 +428,8 @@ export default {
   font-size: 24rpx;
   color: $u-main-color;
   margin-top: 10rpx;
+  text-align: center;
+  word-break: break-all;
 }
 
 .item-container {
@@ -400,5 +449,6 @@ export default {
 .item-menu-image {
   width: 110rpx;
   height: 110rpx;
+  border-radius: 8rpx;
 }
 </style>