feat: 修改瀑布流

components/shop/ping-item.vue

@@ -1,66 +1,89 @@
 <template>
-	<view class="shop-view" @click.stop="onClick">
-		<image :src="obj.url" class="top-img" mode="widthFix"></image>
+  <view class="ping-item" @click.stop="onClick">
+    <image
+      class="top-img"
+      :src="obj.url"
+      mode="widthFix"
+      lazy-load
+    />
     <view class="shop-bottom-panel">
-			<text class="text-30 text-zu  text-overflow" style="padding-top:8rpx">{{obj.title}}</text>
-			<view class="flex-r-lr" style="width:100%;margin-top:10rpx;margin-bottom: 14px;">
-				<text class="text-28 text-zi text-bold">￥{{obj.price}}</text>
-				<text class="text-24 " style="color:#999">已售{{obj.sales}}件</text>
+      <text class="title text-30 text-zu text-overflow">
+        {{ obj.title }}
+      </text>
+      <view class="flex-r-lr price-line">
+        <text class="text-28 text-zi text-bold">￥{{ obj.price }}</text>
+        <text class="text-24 sold">已售{{ obj.sales }}件</text>
       </view>
     </view>
   </view>
 </template>
 
 <script>
-	import MyBtn from '@/components/common/my-btn.vue'
-	export default {
-		components:{MyBtn},
-		props:{
-			obj:{
-				type:Object,
-				default:()=>{}
-			},
-		},
-		mounted(){
+export default {
+  name: 'PingItem',
+  props: {
+    obj: {
+      type: Object,
+      default: () => ({})
+    }
   },
   methods: {
-			onClick(){
-				this.$emit('ok',this.obj.id);
-			}
+    onClick() {
+      this.$emit('ok', this.obj.id);
     }
   }
+};
 </script>
 
 <style lang="scss" scoped>
-	.shop-view{
-		width:332rpx;
+.ping-item {
+  width: 332rpx;
+  background: #fff;
   border-radius: 12rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: space-between;
-		box-sizing: border-box;
-		background-color: #fff;		
-		.top-img{
-			width:332rpx;
+  overflow: hidden;
+  margin-bottom: 0;          /* 瀑布流父层控制间距，这里清零 */
+}
+
+.top-img {
+  width: 332rpx;
   display: block;
-			border-radius: 12rpx;
-		}
-		.shop-bottom-panel{
-			width:100%;
-			padding: 0 12rpx;
-			box-sizing: border-box;
-			flex-direction: column;
-			justify-content: space-between;
-			display: flex;
+  border-radius: 12rpx 12rpx 0 0;
+}
 
-		}
+.shop-bottom-panel {
+  padding: 12rpx 16rpx 16rpx;
+}
 
-	}
-	.text-overflow {
-		display: inline-block;
+.title {
+  line-height: 40rpx;
+  max-width: 300rpx;
+}
+
+.price-line {
+  margin-top: 10rpx;
+}
+
+.sold {
+  color: #999;
+}
+
+/* 通用工具类（如已全局引入可删除） */
+.text-overflow {
+  display: block;
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-	}
+}
+.text-30 { font-size: 30rpx; }
+.text-28 { font-size: 28rpx; }
+.text-24 { font-size: 24rpx; }
+.text-zu  { color: #333; }
+.text-zi  { color: #7A35F6; }
+.text-bold { font-weight: bold; }
+.flex-r-lr {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>

pages/rwa_package/shop/you-shop.vue

@@ -40,6 +40,8 @@
                         :list="swiperList"
                         style="width: 100%; border-radius: 20rpx; height: 160rpx"
                         circular
+                        @click="onSwiperClick"
+                        @change="(e) => (currentNum = e.current)"
                     ></up-swiper>
                 </view>
                 <view class="swiper-title">
@@ -49,6 +51,7 @@
                     ></image>
                     <view class="swiper-center">信任桥-畅享全球好物</view>
 					  <image
+                        @click="goShare"
                         src="/static/home/shop-go.png"
                         style="width: 92rpx; height: 30rpx"
                     ></image>
@@ -63,6 +66,7 @@
                     :style="{ background: 'url(' + item.url + ')' }"
                     style="text-align: center; background-size: 202rpx 228rpx"
                     :key="index"
+                    @click="jumpInfo(item)"
                 >
                     <view class="shop-content">
                         <view class="shop-name">{{ item.title }}</view>
@@ -100,6 +104,7 @@ export default {
             dataList: [],
             faddishProduct: [], // 爆款专区
             swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
+            swiperListData:[],
         };
     },
     onShow() {},
@@ -124,7 +129,25 @@ export default {
                 this.faddishProduct = resp.data;
             }
         },
-        jumpSearch() {},
+        jumpSearch() {
+            uni.navigateTo({
+				url: '/pages/rwa_package/dongjian/search',
+			})
+        },
+        // 跳转到商品详情
+		jumpInfo(item) {
+			uni.navigateTo({
+				url: '/pages/other_package/productInfo/productInfo?id=' + item.id,
+			})
+		},
+
+        goShare(){
+            console.log('go 的地址')
+        },
+        onSwiperClick(index){
+            console.log('banner 图',this.swiperListData,index);
+            // swiperList[index].goodsUrl
+        },
         async getSearchList() {
             const params = {
                 type: 1,
@@ -143,6 +166,7 @@ export default {
             const resp = await getCarouselImage(params);
             if (resp && resp.bizcode === 100) {
                 const data = resp.data || [];
+                this.swiperListData = data;
                 this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
             }
         },

pages/supply_chain/supply_chain.vue

@@ -26,9 +26,16 @@
     </view>
     <view class="setting-view">
       <view class="name-box">
-		<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption"
-			:down="downOption" @init="mescrollInit" :fixed="false">
-			<view class="mescrollUniView">
+        <mescroll-uni
+          ref="mescrollRef"
+          @down="downCallback"
+          @up="upCallback"
+          :up="upOption"
+          :down="downOption"
+          @init="mescrollInit"
+          :fixed="false"
+        >
+          <!-- <view class="mescrollUniView">
 				
 				<PingItem
 				  @ok="onJumpShop"
@@ -37,6 +44,27 @@
 				  v-for="(item, index) in dataList"
 				  :key="index"
 				></PingItem>
+			</view> -->
+          <!-- 原来单个 v-for 替换成两列 -->
+          <view class="mescrollUniView">
+            <view class="fall-col">
+              <PingItem
+                v-for="(item, i) in leftList"
+                :key="item.id"
+                :obj="item"
+                @ok="onJumpShop"
+                style="margin-top: 24rpx"
+              />
+            </view>
+            <view class="fall-col">
+              <PingItem
+                v-for="(item, i) in rightList"
+                :key="item.id"
+                :obj="item"
+                @ok="onJumpShop"
+                style="margin-top: 24rpx"
+              />
+            </view>
           </view>
         </mescroll-uni>
       </view>
@@ -49,6 +77,7 @@
 </template>
 
 <script>
+import { toRaw } from "vue";
 import { getCascadeCategory } from "@/api/common.js";
 import Header from "@/components/common/header.vue";
 import TopSafe from "@/components/common/top-safe.nvue";
@@ -57,34 +86,35 @@ import PingItem from "@/components/shop/ping-item.vue";
 import { searchList } from "@/api/product.js";
 import CustomTabBar from "@/components/custom-tab-bar.vue";
 import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
-	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
+import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
 
 export default {
   mixins: [MescrollMixin],
-  components: { Header, TopSafe, MyBtn, PingItem,CustomTabBar,MescrollUni },
+  components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni },
   data() {
     return {
       dataList: [],
-      tabList: [{name:'推荐'}],
+      tabList: [{ name: "推荐" }],
       curTab: 0,
       upOption: {
         auto: false,
         page: {
-	  		size: 10 // 每页数据的数量,默认10
+          size: 10, // 每页数据的数量,默认10
         },
         noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
         empty: {
-	  		tip: `空空如也`
+          tip: `空空如也`,
         },
-	  	textColor: '#333',
-	  	bgColor: 'rgba(0,0,0,0)',
+        textColor: "#333",
+        bgColor: "rgba(0,0,0,0)",
       },
       downOption: {
         auto: false,
-	  	textColor: '#333',
-	  	bgColor: 'rgba(0,0,0,0)',
-	  
+        textColor: "#333",
+        bgColor: "rgba(0,0,0,0)",
       },
+      leftList: [],
+      rightList: [],
     };
   },
   onLoad() {
@@ -98,37 +128,36 @@ export default {
       let pageNum = page.num;
       let pageSize = page.size;
 
-	  
       let params = {
         type: 2,
         page: page.num,
         pageSize: page.size,
         isPar: true,
       };
-	 if(this.curTab != 0){
-	 		  params['categoryId'] = this.tabList[this.curTab].id;
+      if (this.curTab != 0) {
+        params["categoryId"] = this.tabList[this.curTab].id;
       }
-	  	searchList(params).then(res => {
-	  
+      searchList(params).then((res) => {
         let curPageLen = res.data.length;
         if (page.num === 1) this.dataList = [];
         this.dataList = this.dataList.concat(res.data);
+        console.log(this.dataList);
 
+        this.waterfall();
         this.mescroll.endBySize(curPageLen, res.data.total);
-	  	})
-	  	// this.mescroll.endBySize(1, 1);
+      });
     },
     downCallback() {
-	  	this.$nextTick(function() {
+      this.$nextTick(function () {
         this.mescroll && this.mescroll.resetUpScroll();
-	  	})
+      });
     },
     async cascadeCategory() {
       getCascadeCategory({ parentId: 0 }).then((res) => {
         if (res && res.bizcode === 100) {
-		  res.data.forEach(item=>{
+          res.data.forEach((item) => {
             this.tabList.push(item);
-		  })
+          });
           this.downCallback();
         }
       });
@@ -150,14 +179,31 @@ export default {
         pageSize: 10,
         isPar: true,
       };
-	  if(this.curTab != 0){
-		  params['categoryId'] = this.tabList[this.curTab].id;
+      if (this.curTab != 0) {
+        params["categoryId"] = this.tabList[this.curTab].id;
       }
       const resp = await searchList(params);
       if (resp && resp.bizcode === 100) {
         this.dataList = resp.data || [];
+        this.waterfall();
       }
     },
+    waterfall() {
+      this.leftList = this.dataList
+        .map((item, index) => {
+          if (index % 2 == 0) return item;
+          return null;
+        })
+        .filter(Boolean);
+      this.rightList = this.dataList
+        .map((item, index) => {
+          if (index % 2 != 0)return item;
+          return null;
+        })
+        .filter(Boolean);
+      console.log(this.leftList, this.rightList);
+    },
+
     onJumpSearch() {
       uni.navigateTo({
         url: "/pages/rwa_package/dongjian/search",
@@ -178,10 +224,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	
 .content-two {
-  
-  height: calc(100vh );
+  height: calc(100vh);
 
   background-color: $app-bj;
 }
@@ -227,7 +271,7 @@ export default {
   }
   .line {
     width: 48rpx;
-    height:6rpx;
+    height: 6rpx;
     background-color: #7a35f6;
   }
 }
@@ -249,11 +293,16 @@ export default {
     flex-direction: column;
     align-items: center;
 
-	.mescrollUniView{
+    .mescrollUniView {
       width: calc(100vw - 48rpx);
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
+
+      .fall-col {
+        width: 332rpx; /* 与 PingItem 宽度一致 */
+        height: 100%;
+      }
     }
   }
 }

utils/config.js

@@ -1,10 +1,9 @@
-
 // export const BASE_URL="https://frontend.jdns360.com/api"; // 正式环境
 // export const BASE_URL="http://cl55un59859.vicp.fun:24346"; // 测试环境
 
-export const BASE_URL = "https://api.tbmall.xin"; //生产
+// export const BASE_URL = "https://api.tbmall.xin"; //生产
 // export const BASE_URL ='http://api.hm.a-d.work:6880' // 测试
-// export const BASE_URL ='https://api.o.tbmall.xin' // 本地测试
+export const BASE_URL ='https://api.o.tbmall.xin' // 本地测试