From 2fdbba6fa0c125c667080f070530d2d96c6df301 Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Fri, 4 Apr 2025 14:25:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96beerCoin=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=20-=20=E4=BC=98=E5=8C=96=E6=A0=87=E7=AD=BE=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=97=B6=E7=9A=84=E5=8A=A0=E8=BD=BD=E6=95=88=E6=9E=9C=EF=BC=8C?=
 =?UTF-8?q?=E9=81=BF=E5=85=8D=E9=97=AA=E5=8A=A8=20-=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=9B=B4=E5=A4=9A=E5=8A=9F=E8=83=BD=E5=92=8C?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=B1=95=E7=A4=BA=20-=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB=E5=92=8C=E5=8F=8B=E5=A5=BD?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20-=20=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E6=95=B4=E4=BD=93=E6=A0=B7=E5=BC=8F=E5=92=8C=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pagesCoin/beerCoin.vue | 833 ++++++++++++++++++++++++++---------------
 1 file changed, 526 insertions(+), 307 deletions(-)

diff --git a/pagesCoin/beerCoin.vue b/pagesCoin/beerCoin.vue
index 30962f3..aee2747 100644
--- a/pagesCoin/beerCoin.vue
+++ b/pagesCoin/beerCoin.vue
@@ -1,326 +1,545 @@
 <template>
-	<view class="page-content">
-		<!-- :style="{'padding-top': statusBaeHeight + 60 + 'px'}" -->
-		<view class="flex" style="padding-top: 24rpx;">
-			<view class="left" @click="toPage">
-				<view>品牌啤酒币</view>
-				<view class="flex justify-between align-end" style="margin-bottom: 26rpx;">
-					<text class="fs-20">{{coinList.length}}家品牌方</text>
-					<view class="num">
-						{{ totalCoin}}
-						<text class="cuIcon-rechargefill xl"
-							style="color:#FEE034;font-size: 30rpx;margin-left: 10rpx;"></text>
-					</view>
+	<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="text-right fs-20" style="color: #979797;">多品牌累计数量</view>
+				<view class="desc">*用于抵扣任意品牌啤酒币</view>
 			</view>
-			<view class="right">
-				<view>通用啤酒币</view>
-				<view class="num text-right" style="margin-bottom: 26rpx;">
-					{{commonCoin}}
-					<text class="cuIcon-rechargefill xl"
-						style="color:#FEE034;font-size: 30rpx;margin-left: 10rpx;"></text>
-				</view>
-				<view class="text-right fs-20" style="color: #979797;">用于抵扣任意品牌啤酒币</view>
-			</view>
-		</view>
-		<view class="flex justify-start" style="margin-bottom: 28rpx;margin-top: 28rpx;">
-			<view class="text-sm tag" :class="{'active-tag': curTag == 0}" @click="changeTag(0)">热门推荐</view>
-			<view class="text-sm tag" :class="{'active-tag': curTag == 1}" @click="changeTag(1)">关注厂牌</view>
-			<view class="text-sm tag" :class="{'active-tag': curTag == 2}" @click="changeTag(2)">人气优先</view>
-		</view>
-		<view class="goods-container">
-			<scroll-view scroll-y enable-flex class="flex justify-start flex-wrap" style="height: 100%;"
-				lower-threshold="20" @scrolltolower="pageChange">
-				<view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="toDetail(item)">
-					<view class="cover-box">
-						<image :src="item.goodsCover" class="cover"></image>
-						<!-- <view class="like">
-							<text v-if="index % 2 == 0" class="cuIcon-like" style="color: #1E2019"></text>
-							<text v-else class="cuIcon-likefill" style="color: pink"></text>
-						</view> -->
-					</view>
-					<view class="title">
-						<text>{{ item.goodsName }}</text>
-					</view>
-					<view class="flex justify-between align-center" style="padding:26rpx 16rpx">
-						<view class="flex align-center">
-							<text class="num">{{ item.redeemedNum}}</text>
-							<image src="@/static/beerCoin.png" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;">
-							</image>
+			<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>
-						<!-- <text style="color: #979797;font-size: 20rpx;">青岛啤酒</text> -->
+						<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 class="cu-load" style="width: 100%;"
-					:class="loading?'loading': goodsList.length == total ? 'over' :'more'"></view>
-			</scroll-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>
 
-<script>
-	import {
-		getGoodsList,
-		getStoreCoinBalance,
+<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); // 简化边框
 		
-	} from '@/api/bar.js'
-	export default {
-		data() {
-			return {
-				statusBaeHeight: 40,
-				curTag: 0,
-				tabCur: 0,
-				loading: false,
-				goodsList: [],
-				queryForm: {
-					pageNum: 1,
-					pageSize: 4
-				},
-				total: 0,
-				totalCoin: 0,
-				commonCoin: 0,
-				coinList:[]
-			};
-		},
-		onLoad() {
-			// setTimeout(() => {
-			// 	uni.setNavigationBarColor({
-			// 		frontColor: '#000000',
-			// 		backgroundColor: '#FFFFFF',
-			// 		animation: {
-			// 			duration: 400,
-			// 			timingFunc: 'easeIn'
-			// 		}
-			// 	})
-			// }, 500)
-			// this.statusBaeHeight = uni.getWindowInfo.statusBarHeight
-			this.getGoodsListFun()
-		},
-		onShow() {
-			this.getStoreCoinBalanceFun()
-		},
-		methods: {
-			tabSelect(e) {
-				console.log(e)
-				this.tabCur = e.currentTarget.dataset.id;
-			},
-			changeTag(key) {
-				this.curTag = key
-				this.queryForm.status = key
-				this.queryForm.pageNum = 1
-				this.goodsList = []
-				this.getGoodsListFun()
-			},
+		/* 币种标题样式 */
+		.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;
 			
-			toPage() {
-				uni.navigateTo({
-					url: "/pagesCoin/coinCollect"
-				})
-			},
-			// 跳转详情
-			toDetail(item) {
-				uni.navigateTo({
-					url: "/pagesCoin/goodsDetail?id=" + item.id + "&breweryId=" + item.breweryId
-				})
-			},
-			// 获取商品列表
-			getGoodsListFun() {
-				this.loading = true
-				uni.showLoading({
-					mask: true
-				})
-				getGoodsList(this.queryForm).then(res => {
-					// this.goodsList = this.goodsList.concat(res.rows)
-					this.total = res.total
-					if (res.rows && res.rows.length > 0) {
-						res.rows.forEach(it => {
-							this.goodsList.push(it)
-						})
-					}
-					// for (let i = 0; i < 20; i++) {
-					// 	this.goodsList.push(res.rows[0])
-					// }
-					this.loading = false
-					uni.hideLoading()
-				}).catch(() => {
-					this.loading = false
-					uni.hideLoading()
-				})
-			},
-			// 翻页
-			pageChange() {
-				console.log('翻页')
-				if(this.goodsList.length < this.total) {
-					this.queryForm.pageNum++
-					this.getGoodsListFun()
-				}
-			},
-			// 门店啤酒币余额
-			getStoreCoinBalanceFun() {
-				// 检查登录状态
-				const token = uni.getStorageSync('token')
-				if (!token) {
-					// 未登录状态，重置数据
-					this.coinList = []
-					this.totalCoin = 0
-					this.commonCoin = 0
-					return
-				}
-				
-				getStoreCoinBalance().then(res => {
-					console.log(res)
-					// 累加balance
-					if(res.data && res.data.length > 0) {
-						this.coinList = res.data.filter(it => it.breweryId != 0)
-						this.totalCoin = this.coinList.reduce((total, item) => {
-							return total + item.balance
-						}, 0)
-						let common = res.data.filter(it => it.breweryId == 0)
-						if(common && common.length > 0) {
-							this.commonCoin = common[0].balance
-						}
-					} else {
-						// 没有数据时重置
-						this.coinList = []
-						this.totalCoin = 0
-						this.commonCoin = 0
-					}
-				}).catch(err => {
-					console.error('获取啤酒币余额失败:', err)
-					// 请求失败时重置数据
-					this.coinList = []
-					this.totalCoin = 0
-					this.commonCoin = 0
-				})
-			},
+			/* 数量文字样式 */
+			.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;
 		}
 	}
-</script>
-
-<style lang="scss" scoped>
-	.page-content {
-		background: #F2F2F2;
-		padding: 0rpx 32rpx 32rpx;
-		display: flex;
-		flex-direction: column;
-		height: 100vh;
-
-		.fs-20 {
-			font-size: 20rpx;
-		}
-
-		.num {
-			font-size: 48rpx;
-			color: #3D3D3D;
-
-		}
-
-		.left {
-			width: 382rpx;
-			height: 196rpx;
-			border-radius: 12rpx;
-			background: #FFFFFF;
-			box-sizing: border-box;
-			border: 1px solid rgba(242, 242, 242, 0.902);
-			margin-right: 18rpx;
-			padding: 24rpx 24rpx;
-
-
-		}
-
-		.right {
-			width: 286rpx;
-			height: 196rpx;
-			border-radius: 12rpx;
-			opacity: 1;
-			background: #FFFFFF;
-			box-sizing: border-box;
-			border: 1px solid rgba(242, 242, 242, 0.902);
-			padding: 24rpx 14rpx;
-
-		}
-
-		.tab {
-			color: #A5A7B9;
-			margin-bottom: 18rpx;
-		}
-
-		.active {
-			color: #1E2019;
-		}
-
-		.tag {
-			background-color: transparent;
-			border-radius: 12rpx;
-			padding: 12rpx 30rpx;
-			border: 1px solid #0B0E26;
-			margin-right: 24rpx;
-		}
-
-		.active-tag {
-			background-color: #39E5B1;
-			font-weight: bold;
-			border: 1px solid #39E5B1;
-		}
-
-		.goods-container {
-			// flex: 1;
-			// overflow-y: auto;
-			// padding-bottom: constant(safe-area-inset-bottom);
-			// padding-bottom: env(safe-area-inset-bottom);
-
-			.goods-item {
-				// width: 334rpx;
-				width: 48%;
-				height: 605rpx;
-				border-radius: 12rpx;
-				background: #fff;
-				box-sizing: border-box;
-				// border: 1px solid rgba(242, 242, 242, 0.702);
-				margin-right: 20rpx;
-				margin-bottom: 20rpx;
-
-				&:nth-child(2n) {
-					margin-right: 0;
+	
+	/* 左侧通用啤酒币卡片样式 */
+	.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;
 				}
-
-				.cover-box {
-					// width: 334rpx;
-					width: 100%;
-					height: 440rpx;
-					border-radius: 30rpx 30rpx 0 0;
-					position: relative;
-
-					.cover {
-						width: 100%;
-						height: 100%;
-						border-radius: 30rpx 30rpx 0 0;
-					}
-
-					.like {
-						position: absolute;
-						right: 16rpx;
-						bottom: 18rpx;
-						width: 48rpx;
-						height: 48rpx;
-						border-radius: 50%;
-						background-color: #fff;
-						display: flex;
-						justify-content: center;
-						align-items: center;
-					}
-				}
-
-				.title {
-					padding: 16rpx 14rpx;
-					font-size: 24rpx;
-					border-bottom: 1px solid #D8D8D8;
-					color: #3D3D3D;
-				}
-
 			}
 		}
 	}
-</style>
\ No newline at end of file
+}
+
+/* 标签栏样式 */
+.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>
\ No newline at end of file