feat:优化

This commit is contained in:
2026-07-27 14:45:25 +08:00
parent 86c7bf206f
commit 7fa29cf312
4 changed files with 185 additions and 111 deletions
+5 -5
View File
@@ -12,7 +12,7 @@
<view class="level level-grade" @click="jumpToTrustBridge" v-if="currentUserData.agentName"> <view class="level level-grade" @click="jumpToTrustBridge" v-if="currentUserData.agentName">
<up-image src="/static/common/rz.png" style="margin-right: 8rpx; margin-top: 6rpx" <up-image src="/static/common/rz.png" style="margin-right: 8rpx; margin-top: 6rpx"
shape="circle" width="13" height="13" bgColor="#f1f6ff00"></up-image> shape="circle" width="26rpx" height="26rpx" bgColor="#f1f6ff00"></up-image>
<view>{{ currentUserData.agentName }}</view> <view>{{ currentUserData.agentName }}</view>
</view> </view>
@@ -21,9 +21,8 @@
<view style="display: flex; align-items: center"> <view style="display: flex; align-items: center">
<up-image <up-image
:src="currentUserData.grade ? '/static/common/level.png' : 'https://static.tbmall.xin/static/mine/rz.png'" :src="currentUserData.grade ? '/static/common/level.png' : 'https://static.tbmall.xin/static/mine/rz.png'"
style="margin-right: 8rpx; margin-top: 6rpx" shape="circle" width="14" shape="circle" width="30rpx" height="30rpx" bgColor="#f1f6ff00"></up-image>
height="14" bgColor="#f1f6ff00"></up-image> <view style="margin-left: 8rpx;">{{ currentUserData.gradeName }}</view>
<view>{{ currentUserData.gradeName }}</view>
</view> </view>
</view> </view>
@@ -81,7 +80,8 @@
<view class="mine_order_list"> <view class="mine_order_list">
<view class="mine_fontsize_comm_warp order_list_item" v-for="item in orderTemplList" :key="item.id" <view class="mine_fontsize_comm_warp order_list_item" v-for="item in orderTemplList" :key="item.id"
@click="jumpOrder(item)"> @click="jumpOrder(item)">
<up-image :lazy-load="true" :src="item.url" width="28" height="28" bgColor="#f1f6ff00"></up-image> <up-image :lazy-load="true" :src="item.url" width="28" height="28"
bgColor="#f1f6ff00"></up-image>
<view>{{ item.title }}</view> <view>{{ item.title }}</view>
<up-badge :absolute="true" :offset="[-9, 9]" max="99" <up-badge :absolute="true" :offset="[-9, 9]" max="99"
:customStyle="{ width: '40rpx', height: '32rpx', borderRadius: '45% 45% 45% 0', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }" :customStyle="{ width: '40rpx', height: '32rpx', borderRadius: '45% 45% 45% 0', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }"
+63 -8
View File
@@ -1,10 +1,14 @@
<template> <template>
<view class="order_warp"> <view class="order_warp" :style="mpWarpStyle">
<view class="order_header"> <view class="order_header" :style="mpHeaderStyle">
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00" @click="jumpLeft"></up-image> <view class="back_btn" @click="jumpLeft">
<up-image src="/static/common/left.png" width="20" height="20" bgColor="#f1f6ff00"></up-image>
</view>
<view class="search_box">
<up-search shape="round" bgColor="#FFFFFFFF" :showAction="false" @blur="onBlur" @search="searchFun" <up-search shape="round" bgColor="#FFFFFFFF" :showAction="false" @blur="onBlur" @search="searchFun"
v-model="search"></up-search> v-model="search"></up-search>
</view> </view>
</view>
<view class="order_type_title"> <view class="order_type_title">
<view :class="form.type === item.id <view :class="form.type === item.id
? 'order_type_title_item order_type_title_item_sel' ? 'order_type_title_item order_type_title_item_sel'
@@ -392,10 +396,15 @@ export default {
activeIndex: 0, activeIndex: 0,
aftterSalesProduct: {}, //售后商品信息 aftterSalesProduct: {}, //售后商品信息
deleteShow: false, deleteShow: false,
deleteInfo: {} deleteInfo: {},
mpWarpStyle: {},
mpHeaderStyle: {}
}; };
}, },
onLoad(options) { onLoad(options) {
// #ifdef MP-WEIXIN || MP
this.initMPHeader();
// #endif
const type = options.type; const type = options.type;
this.form.type = type ? parseInt(type, 10) : MINE_ORDER_TYPE.UNPAID; this.form.type = type ? parseInt(type, 10) : MINE_ORDER_TYPE.UNPAID;
this.$nextTick(() => { this.$nextTick(() => {
@@ -411,6 +420,34 @@ export default {
this.userinfo(); this.userinfo();
}, },
methods: { methods: {
initMPHeader() {
// #ifdef MP-WEIXIN || MP
try {
const menuButton = uni.getMenuButtonBoundingClientRect();
const systemInfo = uni.getSystemInfoSync();
if (menuButton && menuButton.top && menuButton.top > 0) {
const menuButtonHeight = menuButton.height || 32;
const menuButtonTop = menuButton.top;
const menuButtonLeft = menuButton.left;
const windowWidth = systemInfo.windowWidth;
this.mpWarpStyle = {
paddingTop: `${menuButtonTop}px`
};
this.mpHeaderStyle = {
height: `${menuButtonHeight}px`,
paddingRight: `${windowWidth - menuButtonLeft + 10}px`,
display: 'flex',
alignItems: 'center'
};
}
} catch (e) {
console.error("initMPHeader error:", e);
}
// #endif
},
dayjs, dayjs,
getValue, getValue,
formatDate1, formatDate1,
@@ -654,10 +691,6 @@ export default {
} catch (error) { } catch (error) {
console.error("加载数据失败:", error); console.error("加载数据失败:", error);
} finally { } finally {
console.log(
"this.orderList1111",
JSON.parse(JSON.stringify(this.orderList))
);
this.$forceUpdate(); this.$forceUpdate();
this.loading = false; // 设置加载状态为false this.loading = false; // 设置加载状态为false
} }
@@ -969,13 +1002,35 @@ export default {
height: calc(100vh - env(safe-area-inset-bottom) - 130rpx); height: calc(100vh - env(safe-area-inset-bottom) - 130rpx);
background-color: $app-bj; background-color: $app-bj;
padding: 100rpx 30rpx 30rpx; padding: 100rpx 30rpx 30rpx;
/* #ifdef MP-WEIXIN */
padding-top: 20rpx;
/* #endif */
overflow-y: hidden; overflow-y: hidden;
position: relative; position: relative;
} }
.order_header { .order_header {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
width: 100%;
box-sizing: border-box;
.back_btn {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin-right: 20rpx;
flex-shrink: 0;
}
.search_box {
flex: 1;
display: flex;
align-items: center;
height: 100%;
}
} }
.order_type_title { .order_type_title {
+81 -63
View File
@@ -1,41 +1,43 @@
<template> <template>
<view class="content"> <view class="content-two">
<view class="top-header-container">
<TopSafe></TopSafe> <TopSafe></TopSafe>
<Header :isBack="false" height="88rpx"> <Header :isBack="false" height="88rpx">
<template v-slot:left> <template v-slot:left>
<view class="header-left-content"> <view class="header-left-content">
<u-icon size="36rpx" name="arrow-left" color="#000" @click="goback"></u-icon> <u-icon size="36rpx" name="arrow-left" color="#000" @click="goback"></u-icon>
<up-image src="https://static.tbmall.xin/static/mine-purse/vcoin.png" width="18" height="18" <up-image src="https://static.tbmall.xin/static/mine-purse/vcoin.png" width="36rpx"
bgColor="#f1f6ff00" class="purse_amount"></up-image> height="36rpx" bgColor="#f1f6ff00" class="purse_amount"></up-image>
<text class="header-text">数字积分兑换专区: {{ balanceData.curAmount || 0 }}</text> <text class="header-text">数字积分兑换专区: {{ balanceData.curAmount || 0 }}</text>
</view> </view>
</template> </template>
</Header> </Header>
<scroll-view scroll-x class="swiper-view"> <scroll-view scroll-x class="swiper-view">
<view :class="['swiper-item', { 'active': currentItem === item.key }]" v-for="(item, index) in swiperList" <view :class="['swiper-item', { 'active': currentItem === item.key }]"
:key="index" @click="onClickItem(item)"> v-for="(item, index) in swiperList" :key="index" @click="onClickItem(item)">
<view class="swiper-item-content">{{ item.label }}</view> <view class="swiper-item-content">{{ item.label }}</view>
</view> </view>
</scroll-view> </scroll-view>
</view>
<mescroll-uni ref="mescrollRef" :top="mescrollTop" @down="downCallback" @up="upCallback" :up="upOption"
:down="downOption" @init="mescrollInit">
<view class="setting-view">
<view class="name-box"> <view class="name-box">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption"
@init="mescrollInit" :fixed="false">
<!-- 原来单个 v-for 替换成两列 -->
<view class="mescrollUniView"> <view class="mescrollUniView">
<view class="fall-col"> <view class="fall-col">
<ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" @ok="onJumpShop" <ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" @ok="onJumpShop"
class="parity-product-item" /> style="margin-top: 24rpx" />
</view> </view>
<view class="fall-col"> <view class="fall-col">
<ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item" @ok="onJumpShop" <ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item"
class="parity-product-item" /> @ok="onJumpShop" style="margin-top: 24rpx" />
</view>
</view>
</view> </view>
</view> </view>
</mescroll-uni> </mescroll-uni>
</view>
<up-toast ref="uToastRef"></up-toast> <up-toast ref="uToastRef"></up-toast>
</view> </view>
@@ -43,8 +45,8 @@
<script> <script>
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';
import MyBtn from '@/components/common/my-btn.vue' import MyBtn from '@/components/common/my-btn.vue';
import { searchList } from '@/api/product.js'; import { searchList } from '@/api/product.js';
import { getAcctBalance } from "@/api/finance.js"; import { getAcctBalance } from "@/api/finance.js";
@@ -55,6 +57,21 @@ import ParityProductItem from "@/components/shop/parity-product-item.vue";
export default { export default {
mixins: [MescrollMixin], mixins: [MescrollMixin],
components: { Header, TopSafe, MyBtn, ParityProductItem, MescrollUni, }, components: { Header, TopSafe, MyBtn, ParityProductItem, MescrollUni, },
computed: {
mescrollTop() {
// #ifdef MP-WEIXIN
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
return (statusBarHeight * 2 + 168) + 'rpx';
// #endif
// #ifdef H5
return '168rpx';
// #endif
// #ifdef APP-PLUS
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
return (statusBarHeight * 2 + 168) + 'rpx';
// #endif
},
},
data() { data() {
return { return {
dataList: [], dataList: [],
@@ -72,8 +89,9 @@ export default {
bgColor: "rgba(0,0,0,0)", bgColor: "rgba(0,0,0,0)",
}, },
upOption: { upOption: {
auto: false, auto: true,
page: { page: {
num: 0,
size: 10, size: 10,
}, },
noMoreSize: 10, noMoreSize: 10,
@@ -94,7 +112,6 @@ export default {
}, },
methods: { methods: {
init() { init() {
this.getSearchList();
this.getAcctBalance(); this.getAcctBalance();
}, },
async getAcctBalance() { async getAcctBalance() {
@@ -107,8 +124,13 @@ export default {
}, },
onClickItem(item) { onClickItem(item) {
if (this.currentItem === item.key) return;
this.currentItem = item.key; this.currentItem = item.key;
this.getSearchList(item); this.dataList = [];
this.leftList = [];
this.rightList = [];
this.mescroll && this.mescroll.scrollTo(0, 0);
this.downCallback();
}, },
mescrollInit(mescroll) { mescrollInit(mescroll) {
@@ -125,33 +147,26 @@ export default {
maxDeduction: currentSwiperItem.maxDeduction || 999999, maxDeduction: currentSwiperItem.maxDeduction || 999999,
}; };
searchList(params).then((res) => { searchList(params).then((res) => {
let curPageLen = res.data.length; let curPageLen = res.data ? res.data.length : 0;
let totalCount = (res.data && res.data.total !== undefined)
? res.data.total
: ((res.data && res.data.totalCount !== undefined)
? res.data.totalCount
: (res.total !== undefined ? res.total : (res.totalCount !== undefined ? res.totalCount : 0)));
if (page.num === 1) this.dataList = []; if (page.num === 1) this.dataList = [];
if (res.data) {
this.dataList = this.dataList.concat(res.data); this.dataList = this.dataList.concat(res.data);
}
this.waterfall(); this.waterfall();
this.mescroll.endBySize(curPageLen, res.total); this.mescroll.endBySize(curPageLen, totalCount);
}).catch(() => {
this.mescroll && this.mescroll.endErr();
}); });
}, },
downCallback() { downCallback() {
this.$nextTick(() => {
this.mescroll && this.mescroll.resetUpScroll(); this.mescroll && this.mescroll.resetUpScroll();
});
},
async getSearchList(item = {}) {
const params = {
type: -1,
page: 1,
pageSize: 99,
minDeduction: item.minDeduction || 0,
maxDeduction: item.maxDeduction || 999999,
}
const resp = await searchList(params);
if (resp && resp.bizcode === 100) {
this.dataList = resp.data || [];
this.waterfall();
}
}, },
waterfall() { waterfall() {
@@ -167,11 +182,10 @@ export default {
return null; return null;
}) })
.filter(Boolean); .filter(Boolean);
console.log(this.leftList, this.rightList);
}, },
onJumpShop(id) { onJumpShop(id) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/other_package/productInfo/productInfo?id=' + id + '&isPar=true&curAmount=' + this.balanceData.curAmount || 0, url: '/pages/other_package/productInfo/productInfo?id=' + id + '&isPar=true&curAmount=' + (this.balanceData.curAmount || 0),
}) })
}, },
onShare() { onShare() {
@@ -187,6 +201,20 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-two {
min-height: 100vh;
background-color: #fff;
}
.top-header-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 99;
background-color: #fff;
}
.header-left-content { .header-left-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -200,25 +228,13 @@ export default {
} }
.purse_amount { .purse_amount {
width: 36rpx; width: 38rpx;
height: 36rpx; height: 38rpx;
display: flex; display: flex;
margin-top: 8rpx;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
vertical-align: middle; vertical-align: middle;
} margin-left: 20rpx;
.bottom-btn {
width: 100%;
margin-bottom: 92rpx;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 32rpx;
box-sizing: border-box;
position: relative;
} }
.swiper-view { .swiper-view {
@@ -254,29 +270,31 @@ export default {
} }
} }
.setting-view {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 32rpx 40rpx;
box-sizing: border-box;
.name-box { .name-box {
width: 100%; width: 100%;
// flex: 1;
height: calc(100% - 88rpx - 70rpx - var(--status-bar-height));
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow-y: auto;
margin-top: 20rpx;
}
.mescrollUniView { .mescrollUniView {
width: 100%; width: calc(100vw - 48rpx);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
gap: 24rpx;
.fall-col { .fall-col {
width: 332rpx; width: 332rpx;
height: 100%; height: 100%;
display: grid; }
grid-gap: 12rpx; }
} }
} }
</style> </style>
+2 -1
View File
@@ -52,7 +52,8 @@
pItem.unitPrice pItem.unitPrice
}}</text> }}</text>
</view> </view>
<view class="shopping_info_amount_original">¥{{ pItem.unitPrice }}</view> <view class="shopping_info_amount_original" v-if="pItem.originalPrice">¥{{ pItem.originalPrice }}
</view>
</view> </view>
<view> <view>
<view class="shopping_info_quantity"> <view class="shopping_info_quantity">