From c0ebcb26547eaebaeaac7e1fb34653c242389835 Mon Sep 17 00:00:00 2001
From: davy <davy@example.com>
Date: Tue, 8 Apr 2025 13:23:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Dmy=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=95=A4=E9=85=92=E5=B8=81=E4=BD=99=E9=A2=9D=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E6=9C=AA=E5=AF=BC=E5=85=A5=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/index/my.vue | 239 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 228 insertions(+), 11 deletions(-)

diff --git a/pages/index/my.vue b/pages/index/my.vue
index 2dbe9bb..b2fdff3 100644
--- a/pages/index/my.vue
+++ b/pages/index/my.vue
@@ -42,17 +42,50 @@
 				<text class="cuIcon-right text-gray"></text>
 			</view>
 		</view>
-		<view v-if="barInfo" class="scan-box">
-			<text>本月累计扫码酒款数量</text>
-			<view class="margin-top">
-				<view class="flex justify-between align-end margin-bottom-xs">
-					<text class="text-xxl text-bold">{{myScanData.scanCount}}</text>
-					<text class="text-xs">击败全国{{myScanData.percent}}%认证门店</text>
-				</view>
-
-				<view class="cu-progress round striped active">
-					<view class="bg-green" :style="[{ width:`${myScanData.percent}%`}]"></view>
+		<!-- 数据统计区域 -->
+		<view class="data-section">
+			<view class="coin-section">
+				<!-- 左侧扫码统计 -->
+				<view class="coin-box left-box">
+					<view class="title">本月累计扫码酒款数量</view>
+					<view class="amount-row">
+						<text class="amount">{{scanCount}}</text>
+					</view>
+					<view class="desc">*击败全国0%认证门店</view>
 				</view>
+				<!-- 右侧啤酒币轮播 -->
+				<swiper class="coin-box right-box" 
+					:current="currentBrandIndex"
+					@change="onSwiperChange"
+					:duration="100"
+					:autoplay="true"
+					:interval="3000"
+					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.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.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>
 			</view>
 		</view>
 		<!-- 功能区 -->
@@ -123,6 +156,7 @@
 	import { getMyScanData } from '@/api/user.js'
 	import loginPopup from '@/components/loginPopup.vue';
 	import { getToken, removeToken, getUserInfo as getUserInfoFromAuth, checkLogin, clearLoginStatus } from '@/utils/auth.js';
+	import { getStoreCoinBalance } from '@/api/bar.js'
 	
 	export default {
 		components: {
@@ -135,7 +169,10 @@
 				barInfo: null,
 				myScanData: null,
 				statusBaeHeight: 40,
-				isLoggedIn: false
+				isLoggedIn: false,
+				currentBrandIndex: 0,
+				sortedBrandCoins: [],
+				scanCount: 0
 			};
 		},
 		computed: {
@@ -163,6 +200,7 @@
 		onShow() {
 			console.log('页面显示，检查登录状态');
 			this.checkLoginStatus();
+			this.getStoreCoinBalanceFun();
 		},
 		methods: {
 			// 检查登录状态
@@ -570,6 +608,49 @@
 				} finally {
 					uni.hideLoading();
 				}
+			},
+			onSwiperChange(e) {
+				this.currentBrandIndex = e.detail.current;
+			},
+			// 获取啤酒币余额
+			async getStoreCoinBalanceFun() {
+				try {
+					const token = uni.getStorageSync('token');
+					const userInfo = uni.getStorageSync('userInfo');
+					
+					if (!token || !userInfo) {
+						this.sortedBrandCoins = [];
+						return;
+					}
+					
+					const res = await getStoreCoinBalance();
+					
+					if (res.data?.length > 0) {
+						// 获取品牌啤酒币列表并排序
+						const brandCoins = res.data.filter(it => it.breweryId != 0);
+						
+						if (brandCoins.length > 0) {
+							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 = [];
+					}
+				} catch (error) {
+					console.error('获取啤酒币余额失败', error);
+					this.sortedBrandCoins = [];
+				}
 			}
 		}
 	}
@@ -849,4 +930,140 @@
 			}
 		}
 	}
+
+	/* 数据统计区域样式 */
+	.data-section {
+		padding: 24rpx;
+		
+		/* 币种区域样式 */
+		.coin-section {
+			display: flex;
+			justify-content: space-between;
+			align-items: flex-start;
+			margin-bottom: 24rpx;
+			
+			/* 左侧扫码统计卡片样式 */
+			.left-box {
+				width: 298rpx;
+				height: 180rpx;
+				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;
+					margin-bottom: 16rpx;
+				}
+				
+				.amount-row {
+					margin-bottom: 26rpx;
+					
+					.amount {
+						font-size: 48rpx;
+						color: #1A1A1A;
+						font-weight: 600;
+					}
+				}
+				
+				.desc {
+					font-size: 20rpx;
+					color: #606060;
+				}
+			}
+			
+			/* 右侧品牌啤酒币轮播卡片样式 */
+			.right-box {
+				width: 382rpx;
+				height: 180rpx;
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+				border: 1rpx solid rgba(242, 242, 242, 0.8);
+				
+				/* 品牌内容容器 */
+				.brand-content {
+					height: 100%;
+					padding: 16rpx;
+					box-sizing: border-box;
+					
+					/* 品牌标题区域 */
+					.brand-header {
+						display: flex;
+						align-items: center;
+						margin-bottom: 12rpx;
+						
+						.brand-logo {
+							width: 72rpx;
+							height: 72rpx;
+							border-radius: 12rpx;
+							margin-right: 16rpx;
+						}
+						
+						.title {
+							font-size: 28rpx;
+							color: #333333;
+							font-weight: 600;
+							flex: 1;
+						}
+					}
+					
+					/* 币种数量行样式 */
+					.amount-row {
+						display: flex;
+						align-items: center;
+						margin-bottom: 12rpx;
+						
+						.amount {
+							font-size: 48rpx;
+							color: #1A1A1A;
+							font-weight: 600;
+						}
+						
+						.coin-icon {
+							color: #FFD700;
+							font-size: 30rpx;
+							margin-left: 10rpx;
+						}
+					}
+					
+					/* 底部描述文字样式 */
+					.desc {
+						font-size: 20rpx;
+						color: #606060;
+					}
+					
+					/* 空数据状态样式 */
+					&.empty-content {
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+						align-items: center;
+						
+						.empty-icon {
+							font-size: 40rpx;
+							color: #CCCCCC;
+							margin-bottom: 8rpx;
+						}
+						
+						.empty-text {
+							font-size: 26rpx;
+							color: #333333;
+							font-weight: 500;
+							margin-bottom: 6rpx;
+						}
+						
+						.empty-desc {
+							font-size: 20rpx;
+							color: #999999;
+						}
+					}
+				}
+			}
+		}
+	}
 </style>
\ No newline at end of file