feat: 优化啤酒币轮播效果 1.调整轮播切换时间为300ms 2.优化轮播指示点样式和位置

pagesCoin/beerCoin.vue

@@ -3,7 +3,10 @@
 		<!-- 顶部币种展示 -->
 		<view class="coin-section">
 			<view class="coin-box left-box">
-				<view class="title">通用啤酒币</view>
+				<view class="brand-header">
+					<image class="brand-logo" src="/static/logo.png" mode="aspectFill"></image>
+					<text class="title">通用啤酒币</text>
+				</view>
 				<view class="amount-row">
 					<text class="amount">{{commonCoin}}</text>
 					<text class="cuIcon-rechargefill coin-icon"></text>
@@ -13,20 +16,30 @@
 			<swiper class="coin-box right-box" 
 				:current="currentBrandIndex"
 				@change="onSwiperChange"
-				:duration="500"
+				:duration="300"
 				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>
+							<image class="brand-logo" :src="item.brandLogo || '/static/logo.png'" mode="aspectFill"></image>
+							<text class="title">{{item.brandName}}</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 class="desc">{{item.goodsNum}}款热门商品可兑换</view>
+					</view>
+				</swiper-item>
+				<!-- 添加空数据状态提示 -->
+				<swiper-item v-if="sortedBrandCoins.length === 0">
+					<view class="brand-content empty-content">
+						<view class="empty-icon">
+							<text class="cuIcon-info"></text>
+						</view>
+						<view class="empty-text">暂未获得任何品牌啤酒币</view>
+						<view class="empty-desc">扫描酒款即可获得品牌啤酒币</view>
 					</view>
 				</swiper-item>
 			</swiper>
@@ -97,31 +110,51 @@
 	.coin-box {
 		background: #FFFFFF;
 		border-radius: 16rpx;
-		padding: 24rpx;
+		padding: 12rpx;
 		box-sizing: border-box;
 		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04); // 简化阴影
 		border: 1rpx solid rgba(242, 242, 242, 0.8); // 简化边框
 		
-		/* 币种标题样式 */
+		/* 品牌标题区域 */
+		.brand-header {
+			display: flex;
+			align-items: flex-start;
+			padding: 8rpx;
+			
+			/* 品牌logo样式 */
+			.brand-logo {
+				width: 72rpx;
+				height: 72rpx;
+				border-radius: 12rpx;
+				margin-right: 12rpx;
+			}
+			
+			/* 品牌名称样式 */
 			.title {
 				font-size: 28rpx;
 				color: #333333;
 				font-weight: 600;
-			line-height: 20rpx;
-			margin-bottom: 16rpx;
+				text-align: right;
+				flex: 1;
+				padding-top: 8rpx;
+			}
 		}
 		
 		/* 币种数量行样式 */
 		.amount-row {
-			margin-bottom: 26rpx;
 			display: flex;
 			align-items: center;
+			justify-content: flex-end;
+			padding-right: 12rpx;
+			margin-bottom: 8rpx;
+			margin-top: -24rpx;
 			
 			/* 数量文字样式 */
 			.amount {
 				font-size: 48rpx;
 				color: #1A1A1A;
 				font-weight: 600;
+				line-height: 48rpx;
 			}
 			
 			/* 币种图标样式 */
@@ -129,49 +162,36 @@
 				color: #FFD700;
 				font-size: 30rpx;
 				margin-left: 10rpx;
+				line-height: 48rpx;
 			}
 		}
 		
 		/* 底部描述文字样式 */
 		.desc {
 			font-size: 20rpx;
-			font-weight: normal;
-			line-height: 130%;
 			color: #606060;
+			text-align: right;
+			line-height: 28rpx;
+			padding-right: 20rpx;
 		}
 	}
 	
 	/* 左侧通用啤酒币卡片样式 */
 	.left-box {
 		width: 298rpx;
-		height: 180rpx;
-		background: #FFFFFF;
+		height: 198rpx;
 	}
 	
 	/* 右侧品牌啤酒币轮播卡片样式 */
 	.right-box {
 		width: 382rpx;
-		height: 180rpx;
-		background: #FFFFFF;
+		height: 198rpx;
 		
 		/* 品牌内容容器 */
 		.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;
-				}
-			}
+			padding-right: 24rpx;
+			box-sizing: border-box;
 		}
 	}
 }
@@ -362,51 +382,37 @@ export default {
 			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
-				}
-			],
+			sortedBrandCoins: [],
 			isTabFixed: false,
 			statusBarHeight: 0,
-			tabOffsetTop: 160, // 调整标签栏距离顶部的固定距离
-			isLoadAll: false, // 是否已加载全部数据
+			tabOffsetTop: 160,
+			isLoadAll: false
 		}
 	},
 	
 	onLoad() {
 		// 获取状态栏高度
+		try {
 			const systemInfo = uni.getSystemInfoSync()
-		this.statusBarHeight = systemInfo.statusBarHeight
+			this.statusBarHeight = systemInfo.statusBarHeight || 0
+		} catch (e) {
+			console.error('获取系统信息失败', e)
+		}
 		
-		this.getGoodsListFun()
+		// 初始化数据
+		this.initData()
 	},
 	
 	onShow() {
+		// 每次页面显示时获取最新的啤酒币余额
 		this.getStoreCoinBalanceFun()
 	},
 
 	// 页面滚动监听
 	onPageScroll(e) {
+		if (e && typeof e.scrollTop === 'number') {
 			this.isTabFixed = e.scrollTop >= this.tabOffsetTop
+		}
 	},
 	
 	// 添加上拉触底事件
@@ -415,6 +421,22 @@ export default {
 	},
 	
 	methods: {
+		// 初始化数据
+		async initData() {
+			try {
+				// 先获取啤酒币余额
+				await this.getStoreCoinBalanceFun()
+				// 然后获取商品列表
+				await this.getGoodsListFun()
+			} catch (error) {
+				console.error('初始化数据失败', error)
+				uni.showToast({
+					title: '加载失败',
+					icon: 'none'
+				})
+			}
+		},
+		
 		// 切换标签
 		async changeTag(tag) {
 			if (this.curTag === tag) return
@@ -432,11 +454,12 @@ export default {
 				// 数据请求成功后再更新UI
 				this.curTag = tag
 				this.queryForm = params
-				this.total = res.total
+				this.total = res.total || 0
 				this.goodsList = res.rows || []
-				this.isLoadAll = this.goodsList.length >= this.total // 更新加载状态
+				this.isLoadAll = this.goodsList.length >= this.total
 				
 			} catch (error) {
+				console.error('切换标签失败', error)
 				uni.showToast({
 					title: '加载失败',
 					icon: 'none'
@@ -446,7 +469,9 @@ export default {
 		
 		// 轮播切换事件
 		onSwiperChange(e) {
+			if (e && e.detail && typeof e.detail.current === 'number') {
 				this.currentBrandIndex = e.detail.current
+			}
 		},
 		
 		// 获取商品列表
@@ -457,21 +482,20 @@ export default {
 			
 			try {
 				const res = await getGoodsList(this.queryForm)
-				this.total = res.total
+				this.total = res.total || 0
 				
 				// 如果是加载更多，则追加数据
 				if (this.queryForm.pageNum > 1) {
-					this.goodsList.push(...(res.rows || []))
+					this.goodsList = [...this.goodsList, ...(res.rows || [])]
 				} else {
 					this.goodsList = res.rows || []
-					this.isLoadAll = false // 重置加载状态
+					this.isLoadAll = false
 				}
 				
 				// 判断是否已加载全部
-				if (this.goodsList.length >= this.total) {
-					this.isLoadAll = true
-				}
+				this.isLoadAll = this.goodsList.length >= this.total
 			} catch (error) {
+				console.error('获取商品列表失败', error)
 				uni.showToast({
 					title: '加载失败',
 					icon: 'none'
@@ -482,65 +506,72 @@ export default {
 		},
 		
 		// 获取啤酒币余额
-		getStoreCoinBalanceFun() {
-			const token = uni.getStorageSync('token')
-			const userInfo = uni.getStorageSync('userInfo')
+		async getStoreCoinBalanceFun() {
+			try {
+				const token = uni.getStorageSync('token');
+				const userInfo = uni.getStorageSync('userInfo');
 				
-			if (!token || !userInfo || userInfo.isVerified !== 1) {
-				this.sortedBrandCoins = []
-				this.commonCoin = 0
-				return
+				if (!token || !userInfo) {
+					this.sortedBrandCoins = [];
+					this.commonCoin = 0;
+					return;
 				}
 				
-			getStoreCoinBalance().then(res => {
+				const res = await getStoreCoinBalance();
+				
 				if (res.data?.length > 0) {
 					// 获取通用啤酒币
-					const commonCoin = res.data.find(it => it.breweryId == 0)
-					this.commonCoin = commonCoin?.balance || 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)
+					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)
+						this.sortedBrandCoins = brandCoins.map(item => ({
+							id: item.id,
+							breweryId: item.breweryId,
+							brandName: item.brandName,
+							brandLogo: item.brandLogo,
+							balance: item.balance || 0,
+							goodsNum: item.goodsNum || 0,
+							barName: item.barName,
+							barCode: item.barCode,
+							barCity: item.barCity
+						})).sort((a, b) => b.balance - a.balance);
+					} else {
+						this.sortedBrandCoins = [];
 					}
 				} else {
-					this.sortedBrandCoins = []
-					this.commonCoin = 0
+					this.sortedBrandCoins = [];
+					this.commonCoin = 0;
+				}
+			} catch (error) {
+				console.error('获取啤酒币余额失败', error);
+				this.sortedBrandCoins = [];
+				this.commonCoin = 0;
 			}
-			}).catch(() => {
-				this.sortedBrandCoins = []
-				this.commonCoin = 0
-			})
 		},
 		
 		// 跳转商品详情
 		toDetail(item) {
+			if (!item || !item.id) return
 			uni.navigateTo({
-				url: `/pagesCoin/goodsDetail?id=${item.id}&breweryId=${item.breweryId}`
+				url: `/pagesCoin/goodsDetail?id=${item.id}&breweryId=${item.breweryId || 0}`
 			})
 		},
 		
 		// 加载更多
 		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>