feat：优化
This commit is contained in:
@@ -1,50 +1,52 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<TopSafe></TopSafe>
|
||||
<Header :isBack="false" height="88rpx">
|
||||
<template v-slot:left>
|
||||
<view class="header-left-content">
|
||||
<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"
|
||||
bgColor="#f1f6ff00" class="purse_amount"></up-image>
|
||||
<text class="header-text">数字积分兑换专区: {{ balanceData.curAmount || 0 }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</Header>
|
||||
|
||||
<scroll-view scroll-x class="swiper-view">
|
||||
<view :class="['swiper-item', { 'active': currentItem === item.key }]" v-for="(item, index) in swiperList"
|
||||
:key="index" @click="onClickItem(item)">
|
||||
<view class="swiper-item-content">{{ item.label }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<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="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" @ok="onJumpShop"
|
||||
class="parity-product-item" />
|
||||
</view>
|
||||
<view class="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item" @ok="onJumpShop"
|
||||
class="parity-product-item" />
|
||||
<view class="content-two">
|
||||
<view class="top-header-container">
|
||||
<TopSafe></TopSafe>
|
||||
<Header :isBack="false" height="88rpx">
|
||||
<template v-slot:left>
|
||||
<view class="header-left-content">
|
||||
<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="36rpx"
|
||||
height="36rpx" bgColor="#f1f6ff00" class="purse_amount"></up-image>
|
||||
<text class="header-text">数字积分兑换专区: {{ balanceData.curAmount || 0 }}</text>
|
||||
</view>
|
||||
</template>
|
||||
</Header>
|
||||
|
||||
<scroll-view scroll-x class="swiper-view">
|
||||
<view :class="['swiper-item', { 'active': currentItem === item.key }]"
|
||||
v-for="(item, index) in swiperList" :key="index" @click="onClickItem(item)">
|
||||
<view class="swiper-item-content">{{ item.label }}</view>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
</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="mescrollUniView">
|
||||
<view class="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in leftList" :key="item.id" :obj="item" @ok="onJumpShop"
|
||||
style="margin-top: 24rpx" />
|
||||
</view>
|
||||
<view class="fall-col">
|
||||
<ParityProductItem v-for="(item, i) in rightList" :key="item.id" :obj="item"
|
||||
@ok="onJumpShop" style="margin-top: 24rpx" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
|
||||
<up-toast ref="uToastRef"></up-toast>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from '@/components/common/header.vue';
|
||||
import TopSafe from '@/components/common/top-safe.nvue'
|
||||
import MyBtn from '@/components/common/my-btn.vue'
|
||||
import TopSafe from '@/components/common/top-safe.nvue';
|
||||
import MyBtn from '@/components/common/my-btn.vue';
|
||||
import { searchList } from '@/api/product.js';
|
||||
import { getAcctBalance } from "@/api/finance.js";
|
||||
|
||||
@@ -55,6 +57,21 @@ import ParityProductItem from "@/components/shop/parity-product-item.vue";
|
||||
export default {
|
||||
mixins: [MescrollMixin],
|
||||
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() {
|
||||
return {
|
||||
dataList: [],
|
||||
@@ -72,8 +89,9 @@ export default {
|
||||
bgColor: "rgba(0,0,0,0)",
|
||||
},
|
||||
upOption: {
|
||||
auto: false,
|
||||
auto: true,
|
||||
page: {
|
||||
num: 0,
|
||||
size: 10,
|
||||
},
|
||||
noMoreSize: 10,
|
||||
@@ -94,7 +112,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getSearchList();
|
||||
this.getAcctBalance();
|
||||
},
|
||||
async getAcctBalance() {
|
||||
@@ -107,8 +124,13 @@ export default {
|
||||
},
|
||||
|
||||
onClickItem(item) {
|
||||
if (this.currentItem === item.key) return;
|
||||
this.currentItem = item.key;
|
||||
this.getSearchList(item);
|
||||
this.dataList = [];
|
||||
this.leftList = [];
|
||||
this.rightList = [];
|
||||
this.mescroll && this.mescroll.scrollTo(0, 0);
|
||||
this.downCallback();
|
||||
},
|
||||
|
||||
mescrollInit(mescroll) {
|
||||
@@ -125,33 +147,26 @@ export default {
|
||||
maxDeduction: currentSwiperItem.maxDeduction || 999999,
|
||||
};
|
||||
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 = [];
|
||||
this.dataList = this.dataList.concat(res.data);
|
||||
if (res.data) {
|
||||
this.dataList = this.dataList.concat(res.data);
|
||||
}
|
||||
|
||||
this.waterfall();
|
||||
this.mescroll.endBySize(curPageLen, res.total);
|
||||
this.mescroll.endBySize(curPageLen, totalCount);
|
||||
}).catch(() => {
|
||||
this.mescroll && this.mescroll.endErr();
|
||||
});
|
||||
},
|
||||
downCallback() {
|
||||
this.$nextTick(() => {
|
||||
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();
|
||||
}
|
||||
this.mescroll && this.mescroll.resetUpScroll();
|
||||
},
|
||||
|
||||
waterfall() {
|
||||
@@ -167,11 +182,10 @@ export default {
|
||||
return null;
|
||||
})
|
||||
.filter(Boolean);
|
||||
console.log(this.leftList, this.rightList);
|
||||
},
|
||||
onJumpShop(id) {
|
||||
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() {
|
||||
@@ -187,6 +201,20 @@ export default {
|
||||
</script>
|
||||
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -200,25 +228,13 @@ export default {
|
||||
}
|
||||
|
||||
.purse_amount {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
display: flex;
|
||||
margin-top: 8rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bottom-btn {
|
||||
width: 100%;
|
||||
margin-bottom: 92rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.swiper-view {
|
||||
@@ -254,29 +270,31 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.name-box {
|
||||
.setting-view {
|
||||
width: 100%;
|
||||
// flex: 1;
|
||||
height: calc(100% - 88rpx - 70rpx - var(--status-bar-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
padding: 0 32rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.mescrollUniView {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 24rpx;
|
||||
.name-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.fall-col {
|
||||
width: 332rpx;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-gap: 12rpx;
|
||||
.mescrollUniView {
|
||||
width: calc(100vw - 48rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.fall-col {
|
||||
width: 332rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user