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="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>
-			</view>
-		</view>
-	</view>
+  <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="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(){
-		},
-		methods: {
-			onClick(){
-				this.$emit('ok',this.obj.id);
-			}
-		}
-	}
+export default {
+  name: 'PingItem',
+  props: {
+    obj: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('ok', this.obj.id);
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-	.shop-view{
-		width:332rpx;
-		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;
-			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;
-			
-		}
-		
-	}
-	.text-overflow {
-		display: inline-block;
-		overflow: hidden;         
-		text-overflow: ellipsis;  
-		white-space: nowrap; 
-	}
-</style>
+.ping-item {
+  width: 332rpx;
+  background: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
+  margin-bottom: 0;          /* 瀑布流父层控制间距，这里清零 */
+}
+
+.top-img {
+  width: 332rpx;
+  display: block;
+  border-radius: 12rpx 12rpx 0 0;
+}
+
+.shop-bottom-panel {
+  padding: 12rpx 16rpx 16rpx;
+}
+
+.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,8 +44,29 @@
 				  v-for="(item, index) in dataList"
 				  :key="index"
 				></PingItem>
-			</view>
-		</mescroll-uni>
+			</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>
     </view>
     <!-- #ifndef H5 -->
@@ -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,91 +86,91 @@ 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 },
+  mixins: [MescrollMixin],
+  components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni },
   data() {
     return {
       dataList: [],
-      tabList: [{name:'推荐'}],
+      tabList: [{ name: "推荐" }],
       curTab: 0,
-	  upOption: {
-	  	auto: false,
-	  	page: {
-	  		size: 10 // 每页数据的数量,默认10
-	  	},
-	  	noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
-	  	empty: {
-	  		tip: `空空如也`
-	  	},
-	  	textColor: '#333',
-	  	bgColor: 'rgba(0,0,0,0)',
-	  },
-	  downOption: {
-	  	auto: false,
-	  	textColor: '#333',
-	  	bgColor: 'rgba(0,0,0,0)',
-	  
-	  },
+      upOption: {
+        auto: false,
+        page: {
+          size: 10, // 每页数据的数量,默认10
+        },
+        noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
+        empty: {
+          tip: `空空如也`,
+        },
+        textColor: "#333",
+        bgColor: "rgba(0,0,0,0)",
+      },
+      downOption: {
+        auto: false,
+        textColor: "#333",
+        bgColor: "rgba(0,0,0,0)",
+      },
+      leftList: [],
+      rightList: [],
     };
   },
   onLoad() {
     this.init();
   },
   methods: {
-	  mescrollInit(mescroll) {
-	  	this.mescroll = mescroll;
-	  },
-	  upCallback(page) {
-	  	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;
-	 }
-	  	searchList(params).then(res => {
-	  
-	  		let curPageLen = res.data.length;
-	  		if (page.num === 1) this.dataList = [];
-	  		this.dataList = this.dataList.concat(res.data);
-	  		
-	  		this.mescroll.endBySize(curPageLen, res.data.total);
-	  	})
-	  	// this.mescroll.endBySize(1, 1);
-	  },
-	  downCallback() {
-	  	this.$nextTick(function() {
-	  		this.mescroll && this.mescroll.resetUpScroll();
-	  	})
-	  },
+    mescrollInit(mescroll) {
+      this.mescroll = mescroll;
+    },
+    upCallback(page) {
+      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;
+      }
+      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);
+      });
+    },
+    downCallback() {
+      this.$nextTick(function () {
+        this.mescroll && this.mescroll.resetUpScroll();
+      });
+    },
     async cascadeCategory() {
       getCascadeCategory({ parentId: 0 }).then((res) => {
         if (res && res.bizcode === 100) {
-		  res.data.forEach(item=>{
-			  this.tabList.push(item);
-		  })
+          res.data.forEach((item) => {
+            this.tabList.push(item);
+          });
           this.downCallback();
         }
       });
     },
     onTab(index) {
       if (index != this.curTab) {
-        this.curTab = index;    
-		  this.dataList = [];
-		this.downCallback();
+        this.curTab = index;
+        this.dataList = [];
+        this.downCallback();
       }
     },
     init() {
-		this.cascadeCategory();
+      this.cascadeCategory();
     },
     async getSearchList() {
       const params = {
@@ -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,11 +224,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	
 .content-two {
-  
-  height: calc(100vh );
-  
+  height: calc(100vh);
+
   background-color: $app-bj;
 }
 .head-view {
@@ -227,13 +271,13 @@ export default {
   }
   .line {
     width: 48rpx;
-    height:6rpx;
+    height: 6rpx;
     background-color: #7a35f6;
   }
 }
 .setting-view {
   width: 100%;
-	height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
+  height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
 
   display: flex;
   flex-direction: column;
@@ -249,12 +293,17 @@ export default {
     flex-direction: column;
     align-items: center;
 
-	.mescrollUniView{
-		width: calc(100vw - 48rpx);
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-	}
+    .mescrollUniView {
+      width: calc(100vw - 48rpx);
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+
+      .fall-col {
+        width: 332rpx; /* 与 PingItem 宽度一致 */
+        height: 100%;
+      }
+    }
   }
 }
 </style>

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' // 本地测试