charles/frontend-app
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

feat: 修改瀑布流

Browse Source
This commit is contained in:
charles
2025-11-10 23:34:16 +08:00
parent 1158231bce
commit f1d4634240
4 changed files with 239 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/shop/ping-item.vue
+82 -59
View File
@@ -1,66 +1,89 @@
<template> <template>
<view class="shop-view" @click.stop="onClick"> <view class="ping-item" @click.stop="onClick">
<image :src="obj.url" class="top-img" mode="widthFix"></image> <image
<view class="shop-bottom-panel"> class="top-img"
<text class="text-30 text-zu text-overflow" style="padding-top:8rpx">{{obj.title}}</text> :src="obj.url"
<view class="flex-r-lr" style="width:100%;margin-top:10rpx;margin-bottom: 14px;"> mode="widthFix"
<text class="text-28 text-zi text-bold">￥{{obj.price}}</text> lazy-load
<text class="text-24 " style="color:#999">已售{{obj.sales}}件</text> />
</view> <view class="shop-bottom-panel">
</view> <text class="title text-30 text-zu text-overflow">
</view> {{ 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> </template>
<script> <script>
import MyBtn from '@/components/common/my-btn.vue' export default {
export default { name: 'PingItem',
components:{MyBtn}, props: {
props:{ obj: {
obj:{ type: Object,
type:Object, default: () => ({})
default:()=>{} }
}, },
}, methods: {
mounted(){ onClick() {
}, this.$emit('ok', this.obj.id);
methods: { }
onClick(){ }
this.$emit('ok',this.obj.id); };
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.shop-view{ .ping-item {
width:332rpx; width: 332rpx;
border-radius: 12rpx; background: #fff;
display: flex; border-radius: 12rpx;
flex-direction: column; overflow: hidden;
align-items: center; margin-bottom: 0; /* 瀑布流父层控制间距，这里清零 */
justify-content: space-between; }
box-sizing: border-box;
background-color: #fff; .top-img {
.top-img{ width: 332rpx;
width:332rpx; display: block;
display: block; border-radius: 12rpx 12rpx 0 0;
border-radius: 12rpx; }
}
.shop-bottom-panel{ .shop-bottom-panel {
width:100%; padding: 12rpx 16rpx 16rpx;
padding: 0 12rpx; }
box-sizing: border-box;
flex-direction: column; .title {
justify-content: space-between; line-height: 40rpx;
display: flex; max-width: 300rpx;
}
}
.price-line {
} margin-top: 10rpx;
.text-overflow { }
display: inline-block;
overflow: hidden; .sold {
text-overflow: ellipsis; color: #999;
white-space: nowrap; }
}
</style> /* 通用工具类（如已全局引入可删除） */
.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
+25 -1
View File
@@ -40,6 +40,8 @@
:list="swiperList" :list="swiperList"
style="width: 100%; border-radius: 20rpx; height: 160rpx" style="width: 100%; border-radius: 20rpx; height: 160rpx"
circular circular
@click="onSwiperClick"
@change="(e) => (currentNum = e.current)"
></up-swiper> ></up-swiper>
</view> </view>
<view class="swiper-title"> <view class="swiper-title">
@@ -49,6 +51,7 @@
></image> ></image>
<view class="swiper-center">信任桥-畅享全球好物</view> <view class="swiper-center">信任桥-畅享全球好物</view>
<image <image
@click="goShare"
src="/static/home/shop-go.png" src="/static/home/shop-go.png"
style="width: 92rpx; height: 30rpx" style="width: 92rpx; height: 30rpx"
></image> ></image>
@@ -63,6 +66,7 @@
:style="{ background: 'url(' + item.url + ')' }" :style="{ background: 'url(' + item.url + ')' }"
style="text-align: center; background-size: 202rpx 228rpx" style="text-align: center; background-size: 202rpx 228rpx"
:key="index" :key="index"
@click="jumpInfo(item)"
> >
<view class="shop-content"> <view class="shop-content">
<view class="shop-name">{{ item.title }}</view> <view class="shop-name">{{ item.title }}</view>
@@ -100,6 +104,7 @@ export default {
dataList: [], dataList: [],
faddishProduct: [], // 爆款专区 faddishProduct: [], // 爆款专区
swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'], swiperList: ['https://cdn.uviewui.com/uview/swiper/swiper1.png'],
swiperListData:[],
}; };
}, },
onShow() {}, onShow() {},
@@ -124,7 +129,25 @@ export default {
this.faddishProduct = resp.data; 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() { async getSearchList() {
const params = { const params = {
type: 1, type: 1,
@@ -143,6 +166,7 @@ export default {
const resp = await getCarouselImage(params); const resp = await getCarouselImage(params);
if (resp && resp.bizcode === 100) { if (resp && resp.bizcode === 100) {
const data = resp.data || []; const data = resp.data || [];
this.swiperListData = data;
this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : []; this.swiperList = data.length !== 0 ? data.map((obj) => obj.carouselImage) : [];
} }
}, },
pages/supply_chain/supply_chain.vue
+130 -81
View File
@@ -26,9 +26,16 @@
</view> </view>
<view class="setting-view"> <view class="setting-view">
<view class="name-box"> <view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" <mescroll-uni
:down="downOption" @init="mescrollInit" :fixed="false"> ref="mescrollRef"
<view class="mescrollUniView"> @down="downCallback"
@up="upCallback"
:up="upOption"
:down="downOption"
@init="mescrollInit"
:fixed="false"
>
<!-- <view class="mescrollUniView">
<PingItem <PingItem
@ok="onJumpShop" @ok="onJumpShop"
@@ -37,8 +44,29 @@
v-for="(item, index) in dataList" v-for="(item, index) in dataList"
:key="index" :key="index"
></PingItem> ></PingItem>
</view> </view> -->
</mescroll-uni> <!-- 原来单个 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>
</view> </view>
<!-- #ifndef H5 --> <!-- #ifndef H5 -->
@@ -49,6 +77,7 @@
</template> </template>
<script> <script>
import { toRaw } from "vue";
import { getCascadeCategory } from "@/api/common.js"; import { getCascadeCategory } from "@/api/common.js";
import Header from "@/components/common/header.vue"; import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue"; 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 { searchList } from "@/api/product.js";
import CustomTabBar from "@/components/custom-tab-bar.vue"; import CustomTabBar from "@/components/custom-tab-bar.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; 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 { export default {
mixins: [MescrollMixin], mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, PingItem,CustomTabBar,MescrollUni }, components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni },
data() { data() {
return { return {
dataList: [], dataList: [],
tabList: [{name:'推荐'}], tabList: [{ name: "推荐" }],
curTab: 0, curTab: 0,
upOption: { upOption: {
auto: false, auto: false,
page: { page: {
size: 10 // 每页数据的数量,默认10 size: 10, // 每页数据的数量,默认10
}, },
noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示 noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
empty: { empty: {
tip: `空空如也` tip: `空空如也`,
}, },
textColor: '#333', textColor: "#333",
bgColor: 'rgba(0,0,0,0)', bgColor: "rgba(0,0,0,0)",
}, },
downOption: { downOption: {
auto: false, auto: false,
textColor: '#333', textColor: "#333",
bgColor: 'rgba(0,0,0,0)', bgColor: "rgba(0,0,0,0)",
},
}, leftList: [],
rightList: [],
}; };
}, },
onLoad() { onLoad() {
this.init(); this.init();
}, },
methods: { methods: {
mescrollInit(mescroll) { mescrollInit(mescroll) {
this.mescroll = mescroll; this.mescroll = mescroll;
}, },
upCallback(page) { upCallback(page) {
let pageNum = page.num; let pageNum = page.num;
let pageSize = page.size; let pageSize = page.size;
let params = {
let params = { type: 2,
type: 2, page: page.num,
page: page.num, pageSize: page.size,
pageSize: page.size, isPar: true,
isPar: true, };
}; if (this.curTab != 0) {
if(this.curTab != 0){ params["categoryId"] = this.tabList[this.curTab].id;
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 = [];
let curPageLen = res.data.length; this.dataList = this.dataList.concat(res.data);
if (page.num === 1) this.dataList = []; console.log(this.dataList);
this.dataList = this.dataList.concat(res.data);
this.waterfall();
this.mescroll.endBySize(curPageLen, res.data.total); this.mescroll.endBySize(curPageLen, res.data.total);
}) });
// this.mescroll.endBySize(1, 1); },
}, downCallback() {
downCallback() { this.$nextTick(function () {
this.$nextTick(function() { this.mescroll && this.mescroll.resetUpScroll();
this.mescroll && this.mescroll.resetUpScroll(); });
}) },
},
async cascadeCategory() { async cascadeCategory() {
getCascadeCategory({ parentId: 0 }).then((res) => { getCascadeCategory({ parentId: 0 }).then((res) => {
if (res && res.bizcode === 100) { if (res && res.bizcode === 100) {
res.data.forEach(item=>{ res.data.forEach((item) => {
this.tabList.push(item); this.tabList.push(item);
}) });
this.downCallback(); this.downCallback();
} }
}); });
}, },
onTab(index) { onTab(index) {
if (index != this.curTab) { if (index != this.curTab) {
this.curTab = index; this.curTab = index;
this.dataList = []; this.dataList = [];
this.downCallback(); this.downCallback();
} }
}, },
init() { init() {
this.cascadeCategory(); this.cascadeCategory();
}, },
async getSearchList() { async getSearchList() {
const params = { const params = {
@@ -150,14 +179,31 @@ export default {
pageSize: 10, pageSize: 10,
isPar: true, isPar: true,
}; };
if(this.curTab != 0){ if (this.curTab != 0) {
params['categoryId'] = this.tabList[this.curTab].id; params["categoryId"] = this.tabList[this.curTab].id;
} }
const resp = await searchList(params); const resp = await searchList(params);
if (resp && resp.bizcode === 100) { if (resp && resp.bizcode === 100) {
this.dataList = resp.data || []; 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() { onJumpSearch() {
uni.navigateTo({ uni.navigateTo({
url: "/pages/rwa_package/dongjian/search", url: "/pages/rwa_package/dongjian/search",
@@ -178,11 +224,9 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-two { .content-two {
height: calc(100vh);
height: calc(100vh );
background-color: $app-bj; background-color: $app-bj;
} }
.head-view { .head-view {
@@ -227,13 +271,13 @@ export default {
} }
.line { .line {
width: 48rpx; width: 48rpx;
height:6rpx; height: 6rpx;
background-color: #7a35f6; background-color: #7a35f6;
} }
} }
.setting-view { .setting-view {
width: 100%; width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height)); height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -249,12 +293,17 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.mescrollUniView{ .mescrollUniView {
width: calc(100vw - 48rpx); width: calc(100vw - 48rpx);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
}
.fall-col {
width: 332rpx; /* 与 PingItem 宽度一致 */
height: 100%;
}
}
} }
} }
</style> </style>
utils/config.js
+2 -3
View File
@@ -1,10 +1,9 @@
// export const BASE_URL="https://frontend.jdns360.com/api"; // 正式环境 // export const BASE_URL="https://frontend.jdns360.com/api"; // 正式环境
// export const BASE_URL="http://cl55un59859.vicp.fun:24346"; // 测试环境 // 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 ='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' // 本地测试