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

fixbug: 修改页面改造bug

Browse Source
This commit is contained in:
charles
2026-07-14 23:08:25 +08:00
parent fd25002ab3
commit 45176d7d22
7 changed files with 243 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/supply_chain/supply_chain.vue
+87 -83
View File
@@ -8,56 +8,28 @@
</view>
</view>
<view class="tab-box">
<view
class="tab-item"
v-for="(item, index) in tabArr"
:key="index"
@click="onTab(index)"
>
<image
:src="curTab == index ? item.icon : item.icon"
mode="aspectFill"
class="tab-img"
></image>
<view
class="tab-name"
:style="{
color: curTab == index ? '#7A35F6' : '#666',
}"
>{{ item.name }}</view
>
<view class="tab-item" v-for="(item, index) in tabArr" :key="item.id" @click="onTab(item.id)">
<image :src="curTab == item.id ? item.iconActive : item.icon" mode="aspectFill" class="tab-img">
</image>
<view class="tab-name" :style="{
color: curTab == item.id ? '#7A35F6' : '#666',
}">{{ item.name }}</view>
</view>
</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"
>
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@init="mescrollInit" :fixed="false">
<!-- 原来单个 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"
/>
<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"
/>
<PingItem v-for="(item, i) in rightList" :key="item.id" :obj="item" @ok="onJumpShop"
style="margin-top: 24rpx" />
</view>
</view>
</mescroll-uni>
@@ -75,19 +47,41 @@ import Header from "@/components/common/header.vue";
import TopSafe from "@/components/common/top-safe.nvue";
import MyBtn from "@/components/common/my-btn.vue";
import PingItem from "@/components/shop/ping-item.vue";
import { searchList,getGoodsTags } from "@/api/product.js";
import { searchList, getGoodsTags } 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";
export default {
mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn,PingItem, CustomTabBar, MescrollUni },
components: { Header, TopSafe, MyBtn, PingItem, CustomTabBar, MescrollUni },
data() {
return {
dataList: [],
tabArr: [ ],
curTab: 0,
tabArr: [
{
id: 7,
name: '信任专享',
icon: 'https://static.tbmall.xin/static/new-home/xinren.png',
iconActive: 'https://static.tbmall.xin/static/new-home/xinren_active.png',
}, {
id: 15,
name: '全网爆款',
icon: 'https://static.tbmall.xin/static/new-home/baokuan.png',
iconActive: 'https://static.tbmall.xin/static/new-home/baokuan_active.png',
}, {
id: 16,
name: '低价好物',
icon: 'https://static.tbmall.xin/static/new-home/cart.png',
iconActive: 'https://static.tbmall.xin/static/new-home/cart_active.png',
}, {
id: 6,
name: '品牌特卖',
icon: 'https://static.tbmall.xin/static/new-home/huiyuan.png',
iconActive: 'https://static.tbmall.xin/static/new-home/huiyuan_active.png',
},
],
curTab: 7,
upOption: {
auto: false,
page: {
@@ -111,18 +105,20 @@ export default {
};
},
onLoad(options) {
this.init();
if(options.index){
console.log("+++++", options)
if (options.index) {
this.curTab = options.index;
}
this.getSearchList()
},
onShow() {
if (this.tabArr.length > 0) {
const sortParams = uni.getStorageSync('sortParams');
if (sortParams) {
const targetIndex = this.tabArr.find(item => item.name === sortParams.value)?.id;
uni.removeStorageSync('sortParams');
const targetIndex = this.tabArr.findIndex(item => item.name === sortParams.value);
if (targetIndex !== -1 && targetIndex !== this.curTab) {
if (targetIndex) {
this.curTab = targetIndex;
this.dataList = [];
this.downCallback();
@@ -132,29 +128,29 @@ export default {
},
methods: {
/**
* 查询分类列表
*/
async getSortList() {
const resp = await getGoodsTags({ type: 5 });
if (resp && resp.bizcode === 100) {
this.tabArr = resp.data.sort((a, b) => a.sort - b.sort);
this.$nextTick(() => {
this.applySortParams();
this.downCallback();
});
}
},
applySortParams() {
const sortParams = uni.getStorageSync('sortParams');
if (sortParams && this.tabArr.length > 0) {
uni.removeStorageSync('sortParams');
const targetIndex = this.tabArr.findIndex(item => item.name === sortParams.value);
if (targetIndex !== -1 && targetIndex !== this.curTab) {
this.curTab = targetIndex;
this.dataList = [];
}
}
},
* 查询分类列表
*/
async getSortList() {
const resp = await getGoodsTags({ type: 5 });
if (resp && resp.bizcode === 100) {
this.tabArr = resp.data.sort((a, b) => a.sort - b.sort);
this.$nextTick(() => {
this.applySortParams();
this.downCallback();
});
}
},
applySortParams() {
const sortParams = uni.getStorageSync('sortParams');
if (sortParams && this.tabArr.length > 0) {
uni.removeStorageSync('sortParams');
const targetIndex = this.tabArr.findIndex(item => item.name === sortParams.value);
if (targetIndex !== -1 && targetIndex !== this.curTab) {
this.curTab = targetIndex;
this.dataList = [];
}
}
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
@@ -166,11 +162,10 @@ export default {
type: 2,
page: page.num,
pageSize: page.size,
isPar: true
isPar: true,
tag: this.curTab
};
if (this.tabArr.length > 0 && this.tabArr[this.curTab]) {
params["tag"] = this.tabArr[this.curTab].id;
}
searchList(params).then((res) => {
let curPageLen = res.data.length;
this.dataList = this.dataList.concat(res.data);
@@ -187,22 +182,19 @@ export default {
onTab(index) {
if (index != this.curTab) {
this.curTab = index;
console.log("----", this.curTab)
this.dataList = [];
this.downCallback();
}
},
init() {;
this.getSortList();
},
async getSearchList() {
const params = {
page: 1,
pageSize: 10,
isPar: true,
tag: this.curTab
};
if (this.tabArr.length > 0 && this.tabArr[this.curTab]) {
params["type"] = this.tabArr[this.curTab].id;
}
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.dataList = resp.data || [];
@@ -249,6 +241,7 @@ export default {
height: calc(100vh);
background-color: $app-bj;
}
.head-view {
width: 100%;
min-height: 88rpx;
@@ -258,6 +251,7 @@ export default {
padding: 0 32rpx;
box-sizing: border-box;
background-color: #fff;
.head-search {
width: 100%;
height: 76rpx;
@@ -269,6 +263,7 @@ export default {
border-radius: 16rpx;
}
}
.tab-box {
width: 100%;
height: 160rpx;
@@ -280,21 +275,25 @@ export default {
box-sizing: border-box;
background-color: #fff;
overflow-x: auto;
.tab-item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
.tab-img {
width: 56rpx;
height: 56rpx;
}
.tab-name {
font-size: 28rpx;
margin-top: 24rpx;
}
}
}
.tab-view {
width: 100%;
height: 80rpx;
@@ -305,6 +304,7 @@ export default {
box-sizing: border-box;
background-color: #fff;
overflow-x: auto;
.tab-list {
margin-right: 24rpx;
display: flex;
@@ -315,12 +315,14 @@ export default {
justify-content: space-between;
margin-top: 22rpx;
}
.line {
width: 48rpx;
height: 6rpx;
background-color: #7a35f6;
}
}
.setting-view {
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
@@ -332,6 +334,7 @@ export default {
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
.name-box {
width: 100%;
height: calc(100vh - 88rpx - 80rpx - 100rpx - var(--status-bar-height));
@@ -346,7 +349,8 @@ export default {
justify-content: space-between;
.fall-col {
width: 332rpx; /* 与 PingItem 宽度一致 */
width: 332rpx;
/* 与 PingItem 宽度一致 */
height: 100%;
}
}