frontend-app/pages/rwa_package/shop/points-shop.vue

<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>
				</view>
			</mescroll-uni>
		</view>

		<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 { searchList } from '@/api/product.js';
import { getAcctBalance } from "@/api/finance.js";

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import ParityProductItem from "@/components/shop/parity-product-item.vue";

export default {
	mixins: [MescrollMixin],
	components: { Header, TopSafe, MyBtn, ParityProductItem, MescrollUni, },
	data() {
		return {
			dataList: [],
			swiperList: [
				{ key: 0, label: '全部', minDeduction: 0, maxDeduction: 999999 },
				{ key: 1, label: '<300积分', minDeduction: 0, maxDeduction: 299.99 },
				{ key: 2, label: '300-500积分', minDeduction: 300, maxDeduction: 499.99 },
				{ key: 3, label: '500-1000积分', minDeduction: 500, maxDeduction: 999.99 },
				{ key: 4, label: '>1000积分', minDeduction: 1000, maxDeduction: 999999 },
			],
			currentItem: 0,
			downOption: {
				auto: false,
				textColor: "#333",
				bgColor: "rgba(0,0,0,0)",
			},
			upOption: {
				auto: false,
				page: {
					size: 10,
				},
				noMoreSize: 10,
				empty: {
					tip: `空空如也`,
				},
				textColor: "#333",
				bgColor: "rgba(0,0,0,0)",
			},
			leftList: [],
			rightList: [],
			mescroll: null,
			balanceData: {},
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			this.getSearchList();
			this.getAcctBalance();
		},
		async getAcctBalance() {
			const resp = await getAcctBalance();
			let data = [];
			if (resp && resp.bizcode === 100) {
				data = resp.data || [];
			}
			this.balanceData = data.filter(item => item.categoty === 'vcoin')[0] || {};
		},

		onClickItem(item) {
			this.currentItem = item.key;
			this.getSearchList(item);
		},

		mescrollInit(mescroll) {
			this.mescroll = mescroll;
		},
		upCallback(page) {
			let currentSwiperItem = this.swiperList.find(item => item.key === this.currentItem) || {};

			let params = {
				type: -1,
				page: page.num,
				pageSize: page.size,
				minDeduction: currentSwiperItem.minDeduction || 0,
				maxDeduction: currentSwiperItem.maxDeduction || 999999,
			};
			searchList(params).then((res) => {
				let curPageLen = res.data.length;
				if (page.num === 1) this.dataList = [];
				this.dataList = this.dataList.concat(res.data);

				this.waterfall();
				this.mescroll.endBySize(curPageLen, res.total);
			});
		},
		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();
			}
		},

		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);
		},
		onJumpShop(id) {
			uni.navigateTo({
				url: '/pages/other_package/productInfo/productInfo?id=' + id + '&isPar=true&curAmount=' + this.balanceData.curAmount || 0,
			})
		},
		onShare() {
			uni.navigateTo({
				url: '/pages/other_package/invite_friends/invite_friends',
			})
		},
		goback() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.header-left-content {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.header-text {
	font-size: 28rpx;
	color: #333;
	margin-left: 18rpx;
}

.purse_amount {
	width: 36rpx;
	height: 36rpx;
	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;

}

.swiper-view {
	width: 100%;
	height: 80rpx;
	background: #FFFFFF;
	white-space: nowrap;
	padding: 0 16rpx;
	box-sizing: border-box;

	.swiper-item {
		padding: 0 16rpx;
		height: 100%;
		color: #666;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-sizing: border-box;
		font-size: 28rpx;
		border-bottom: 4rpx solid transparent;

		.swiper-item-content {
			font-size: 28rpx;
			line-height: 40rpx;
		}

		&.active {
			color: #7A35F6;
			font-weight: bold;
			border-bottom-color: #7A35F6;
		}
	}
}

.name-box {
	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;
}

.mescrollUniView {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24rpx;

	.fall-col {
		width: 332rpx;
		height: 100%;
		display: grid;
		grid-gap: 12rpx;
	}
}
</style>