zdtap-uniapp-main/pagesCoin/beerCoin.vue

<template>
	<view class="page-container">
		<!-- 顶部币种展示 -->
		<view class="coin-section">
			<view class="coin-box left-box">
				<view class="title">通用啤酒币</view>
				<view class="amount-row">
					<text class="amount">{{commonCoin}}</text>
					<text class="cuIcon-rechargefill coin-icon"></text>
				</view>
				<view class="desc">*用于抵扣任意品牌啤酒币</view>
			</view>
			<swiper class="coin-box right-box" 
				:current="currentBrandIndex"
				@change="onSwiperChange"
				:duration="500"
				circular
			>
				<swiper-item v-for="(item, index) in sortedBrandCoins" :key="index">
					<view class="brand-content">
						<view class="brand-header">
							<image class="brand-logo" :src="item.logo" mode="aspectFill"></image>
							<text class="title">{{item.name}}</text>
						</view>
						<view class="amount-row">
							<text class="amount">{{item.balance}}</text>
							<text class="cuIcon-rechargefill coin-icon"></text>
						</view>
						<view class="desc">{{item.exchangeCount}}款热门商品可兑换</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 标签栏 -->
		<view class="tab-section" :class="{'fixed': isTabFixed}">
			<view 
				class="tab-item" 
				:class="{'active': curTag === index}"
				v-for="(item, index) in ['全部', '关注厂牌', '人气排名', '最新发布']" 
				:key="index"
				@click="changeTag(index)"
			>{{item}}</view>
		</view>

		<!-- 商品列表 -->
		<view class="goods-list">
			<view 
				class="goods-item" 
				v-for="(item, index) in goodsList" 
				:key="index"
				@click="toDetail(item)"
			>
				<image class="goods-image" :src="item.goodsCover" mode="aspectFill"></image>
				<view class="goods-title text-cut">{{item.goodsName}}</view>
				<view class="goods-price">
					<view class="price-left">
						<text class="price-num">{{item.redeemedNum}}</text>
						<text class="cuIcon-rechargefill coin-icon"></text>
					</view>
					<text class="brand-name">{{item.brandName}}</text>
				</view>
			</view>
		</view>

		<!-- 加载更多 -->
		<view class="load-more">
			<template v-if="goodsList.length > 0">
				<view v-if="loading" class="loading">
					<text class="cuIcon-loading2 iconfont-spin"></text>
					<text class="loading-text">加载中...</text>
				</view>
				<text v-else-if="isLoadAll" class="no-more">已经没有更多啦~</text>
				<text v-else class="pull-tip">上拉加载更多</text>
			</template>
			<text v-else-if="!loading" class="empty">暂无数据</text>
		</view>
	</view>
</template>

<style lang="scss" scoped>
/* 页面容器样式 */
.page-container {
	min-height: 100vh;
	background: #F6F7FB;
	box-sizing: border-box;
	padding: 24rpx;
}

/* 顶部币种展示区域 */
.coin-section {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;
	
	/* 币种卡片通用样式 */
	.coin-box {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 24rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); // 简化阴影
		border: 1rpx solid rgba(242, 242, 242, 0.8); // 简化边框
		
		/* 币种标题样式 */
		.title {
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
			line-height: 20rpx;
			margin-bottom: 16rpx;
		}
		
		/* 币种数量行样式 */
		.amount-row {
			margin-bottom: 26rpx;
			display: flex;
			align-items: center;
			
			/* 数量文字样式 */
			.amount {
				font-size: 48rpx;
				color: #1A1A1A;
				font-weight: 600;
			}
			
			/* 币种图标样式 */
			.coin-icon {
				color: #FFD700;
				font-size: 30rpx;
				margin-left: 10rpx;
			}
		}
		
		/* 底部描述文字样式 */
		.desc {
			font-size: 20rpx;
			font-weight: normal;
			line-height: 130%;
			color: #606060;
		}
	}
	
	/* 左侧通用啤酒币卡片样式 */
	.left-box {
		width: 298rpx;
		height: 180rpx;
		background: #FFFFFF;
	}
	
	/* 右侧品牌啤酒币轮播卡片样式 */
	.right-box {
		width: 382rpx;
		height: 180rpx;
		background: #FFFFFF;
		
		/* 品牌内容容器 */
		.brand-content {
			height: 100%;
			
			/* 品牌标题区域 */
			.brand-header {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;
				
				/* 品牌logo样式 */
				.brand-logo {
					width: 36rpx;
					height: 36rpx;
					border-radius: 8rpx;
					margin-right: 12rpx;
				}
			}
		}
	}
}

/* 标签栏样式 */
.tab-section {
	display: flex;
	margin-bottom: 28rpx;
	padding: 24rpx;
	background: #FFFFFF;
	z-index: 99;
	width: 100%;
	box-sizing: border-box;
	
	/* 固定定位状态样式 */
	&.fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		margin-bottom: 0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
	}
	
	/* 标签项样式 */
	.tab-item {
		width: 144rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
		color: #666666;
		background: #F9F9F9;
		border-radius: 12rpx;
		margin-right: 16rpx;
		
		/* 激活状态样式 */
		&.active {
			color: #FFFFFF;
			background: #D42E78;
		}
		
		&:last-child {
			margin-right: 0;
		}
	}
}

/* 商品列表样式 */
.goods-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: v-bind('isTabFixed ? "112rpx" : "0"');
	
	/* 商品项样式 */
	.goods-item {
		width: 336rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); // 简化阴影
		
		/* 商品图片样式 */
		.goods-image {
			width: 100%;
			height: 258rpx;
			background: #F5F5F5;
		}
		
		/* 商品标题样式 */
		.goods-title {
			padding: 16rpx;
			font-size: 24rpx;
			color: #1A1A1A;
			font-weight: 600;
		}
		
		/* 商品价格区域样式 */
		.goods-price {
			padding: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			/* 价格左侧区域 */
			.price-left {
				display: flex;
				align-items: center;
				
				/* 价格数字样式 */
				.price-num {
					font-size: 32rpx;
					color: #1A1A1A;
					font-weight: bold;
				}
				
				/* 价格图标样式 */
				.coin-icon {
					color: #FFD700;
					font-size: 24rpx;
					margin-left: 12rpx;
				}
			}
			
			/* 品牌名称样式 */
			.brand-name {
				font-size: 20rpx;
				color: #808080;
				background: #F6F7FB;
				padding: 4rpx 12rpx;
				border-radius: 20rpx;
			}
		}
	}
}

/* 加载更多提示样式 */
.load-more {
	text-align: center;
	padding: 24rpx;
	color: #999999;
	font-size: 24rpx;
	
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		
		.iconfont-spin {
			animation: loading-rotate 1s linear infinite;
			margin-right: 8rpx;
		}
		
		.loading-text {
			color: #666666;
		}
	}
	
	.no-more {
		color: #999999;
	}
	
	.pull-tip {
		color: #666666;
	}
	
	.empty {
		color: #999999;
		font-size: 28rpx;
	}
}

@keyframes loading-rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* 文本截断样式 */
.text-cut {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>

<script>
import { getGoodsList, getStoreCoinBalance } from '@/api/bar.js'

export default {
	data() {
		return {
			curTag: 0,
			loading: false,
			goodsList: [],
			queryForm: {
				pageNum: 1,
				pageSize: 10,
				status: 0
			},
			total: 0,
			commonCoin: 0,
			currentBrandIndex: 0,
			sortedBrandCoins: [
				{
					id: 1,
					name: '青岛啤酒',
					logo: '/static/images/brand1.png',
					balance: 120,
					exchangeCount: 5
				},
				{
					id: 2,
					name: '百威啤酒',
					logo: '/static/images/brand2.png',
					balance: 80,
					exchangeCount: 3
				},
				{
					id: 3,
					name: '雪花啤酒',
					logo: '/static/images/brand3.png',
					balance: 50,
					exchangeCount: 2
				}
			],
			isTabFixed: false,
			statusBarHeight: 0,
			tabOffsetTop: 160, // 调整标签栏距离顶部的固定距离
			isLoadAll: false, // 是否已加载全部数据
		}
	},
	
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight
		
		this.getGoodsListFun()
	},
	
	onShow() {
		this.getStoreCoinBalanceFun()
	},

	// 页面滚动监听
	onPageScroll(e) {
		this.isTabFixed = e.scrollTop >= this.tabOffsetTop
	},
	
	// 添加上拉触底事件
	onReachBottom() {
		this.loadMore()
	},
	
	methods: {
		// 切换标签
		async changeTag(tag) {
			if (this.curTag === tag) return
			
			try {
				// 先请求新数据
				const params = {
					pageNum: 1,
					pageSize: 10,
					status: tag
				}
				
				const res = await getGoodsList(params)
				
				// 数据请求成功后再更新UI
				this.curTag = tag
				this.queryForm = params
				this.total = res.total
				this.goodsList = res.rows || []
				this.isLoadAll = this.goodsList.length >= this.total // 更新加载状态
				
			} catch (error) {
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		
		// 轮播切换事件
		onSwiperChange(e) {
			this.currentBrandIndex = e.detail.current
		},
		
		// 获取商品列表
		async getGoodsListFun() {
			if (this.loading) return
			
			this.loading = true
			
			try {
				const res = await getGoodsList(this.queryForm)
				this.total = res.total
				
				// 如果是加载更多，则追加数据
				if (this.queryForm.pageNum > 1) {
					this.goodsList.push(...(res.rows || []))
				} else {
					this.goodsList = res.rows || []
					this.isLoadAll = false // 重置加载状态
				}
				
				// 判断是否已加载全部
				if (this.goodsList.length >= this.total) {
					this.isLoadAll = true
				}
			} catch (error) {
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		// 获取啤酒币余额
		getStoreCoinBalanceFun() {
			const token = uni.getStorageSync('token')
			const userInfo = uni.getStorageSync('userInfo')
			
			if (!token || !userInfo || userInfo.isVerified !== 1) {
				this.sortedBrandCoins = []
				this.commonCoin = 0
				return
			}
			
			getStoreCoinBalance().then(res => {
				if (res.data?.length > 0) {
					// 获取通用啤酒币
					const commonCoin = res.data.find(it => it.breweryId == 0)
					this.commonCoin = commonCoin?.balance || 0
					
					// 获取品牌啤酒币列表并排序
					// TODO: 后续接口返回完整数据后，替换下面的处理逻辑
					const brandCoins = res.data.filter(it => it.breweryId != 0)
					if (brandCoins.length > 0) {
						// 这里使用虚拟数据，实际项目中需要使用真实数据
						this.sortedBrandCoins = this.sortedBrandCoins.map((brand, index) => {
							const realData = brandCoins[index]
							return {
								...brand,
								balance: realData?.balance || brand.balance
							}
						}).sort((a, b) => b.balance - a.balance)
					}
				} else {
					this.sortedBrandCoins = []
					this.commonCoin = 0
				}
			}).catch(() => {
				this.sortedBrandCoins = []
				this.commonCoin = 0
			})
		},
		
		// 跳转商品详情
		toDetail(item) {
			uni.navigateTo({
				url: `/pagesCoin/goodsDetail?id=${item.id}&breweryId=${item.breweryId}`
			})
		},
		
		// 加载更多
		async loadMore() {
			// 如果正在加载、已加载全部，或列表为空，则不处理
			if (this.loading || this.isLoadAll || this.goodsList.length === 0) return
			
			// 如果当前数量小于总数，则加载下一页
			if (this.goodsList.length < this.total) {
				this.queryForm.pageNum++
				await this.getGoodsListFun()
			} else {
				this.isLoadAll = true
			}
		},
	}
}
</script>