feat: 优化我的页面扫码统计卡片 1.调整标题和图标位置 2.优化数字和单位布局 3.调整同比增长文字位置

pages/index/my.vue

@@ -47,11 +47,27 @@
 			<view class="coin-section">
 				<!-- 左侧扫码统计 -->
 				<view class="coin-box left-box">
-					<view class="title">本月累计扫码酒款数量</view>
+					<block v-if="userStatus === 'verified'">
-					<view class="amount-row">
+						<view class="title">
-						<text class="amount">{{scanCount}}</text>
+							<image src="/static/tag.svg" class="tag-icon" />
+							<text>本周累计扫码</text>
 						</view>
-					<view class="desc">*击败全国0%认证门店</view>
+						<view class="amount-row">
+							<text class="amount">20</text>
+							<text class="unit">桶</text>
+						</view>
+						<view class="trend-row">
+							<view class="trend-item up">
+								<image src="/static/up.svg" class="trend-icon" />
+								<text class="trend-text">同比增长13.2%</text>
+							</view>
+						</view>
+					</block>
+					<block v-else>
+						<view class="unauth-tip">
+							<text class="tip-text">欢迎加入啤啤猩球</text>
+						</view>
+					</block>
 				</view>
 				<!-- 右侧啤酒币轮播 -->
 				<swiper class="coin-box right-box" 
@@ -61,6 +77,7 @@
 					:autoplay="true"
 					:interval="3000"
 					circular
+					@click="toBeerCoin"
 				>
 					<swiper-item v-for="(item, index) in sortedBrandCoins" :key="index">
 						<view class="brand-content">
@@ -164,15 +181,19 @@
 		},
 		data() {
 			return {
-				userInfo: null,
-				loading: true,
 				barInfo: null,
 				myScanData: null,
-				statusBaeHeight: 40,
+				statusBaeHeight: 0,
 				isLoggedIn: false,
 				currentBrandIndex: 0,
 				sortedBrandCoins: [],
-				scanCount: 0
+				scanCount: 0,
+				userInfo: null,
+				// 扫码统计数据
+				weekScanStats: {
+					total: 20,
+					weekGrowth: 13.2
+				}
 			};
 		},
 		computed: {
@@ -204,65 +225,28 @@
 		},
 		methods: {
 			// 检查登录状态
-			async checkLoginStatus() {
+			checkLoginStatus() {
 				try {
-					const token = uni.getStorageSync('token');
+					const token = getToken();
-					const userInfo = uni.getStorageSync('userInfo');
+					const userInfo = getUserInfoFromAuth();
 					
-					// 检查token和userInfo是否有效
+					if (!token || !userInfo) {
-					if (!token || token.startsWith('temp_') || !userInfo) {
 						this.isLoggedIn = false;
 						this.userInfo = null;
-						this.barInfo = null;
+						return;
-						this.myScanData = null;
-						return false;
 					}
 					
 					this.isLoggedIn = true;
 					this.userInfo = userInfo;
 					
-					// 先获取酒吧信息
+					// 获取门店信息和扫码数据
-					await getBarInfo().then(res => {
+					this.getBarInfo();
-						if (res && res.data) {
+					this.getMyScanData();
-							this.barInfo = res.data;
-							// 如果是认证中状态，设置默认的扫码数据
-							if (this.barInfo.authState === 2) {
-								this.myScanData = { scanCount: 0, percent: 0 };
-							}
-						}
-					}).catch(err => {
-						console.error('获取酒吧信息失败:', err);
-						if (err.code === 500 && err.msg.includes('门店未认证')) {
-							this.barInfo = {
-								authState: 2,
-								barName: '',
-								barNumber: '',
-								barContactPhone: ''
-							};
-							this.myScanData = { scanCount: 0, percent: 0 };
-						} else {
-							this.barInfo = null;
-						}
-					});
 					
-					// 如果不是认证中状态，获取扫码数据
-					if (this.barInfo && this.barInfo.authState !== 2) {
-						await getMyScanData().then(res => {
-							if (res.code === 200) {
-								this.myScanData = res.data;
-							}
-						}).catch(err => {
-							console.error('获取扫码数据失败:', err);
-							this.myScanData = { scanCount: 0, percent: 0 };
-						});
-					}
-					
-					return true;
 				} catch (error) {
 					console.error('检查登录状态失败:', error);
-					return false;
+					this.isLoggedIn = false;
-				} finally {
+					this.userInfo = null;
-					this.loading = false;
 				}
 			},
 			loginSuccess() {
@@ -271,14 +255,23 @@
 				this.userInfo = getUserInfoFromAuth();
 				this.isLoggedIn = true;
 				
+				// 显示加载提示
+				uni.showLoading({
+					title: '加载中...',
+					mask: true
+				});
+				
 				// 使用 Promise.all 同时获取所有需要的数据
 				Promise.all([
-					this.getBarInfoFun(),
+					this.getBarInfo(),
-					this.getMyScanDataFun()
+					this.getMyScanData(),
+					this.getStoreCoinBalanceFun()
 				]).then(() => {
 					console.log('所有数据更新完成');
 					// 强制更新视图
 					this.$forceUpdate();
+					// 隐藏加载提示
+					uni.hideLoading();
 					// 显示登录成功提示
 					uni.showToast({
 						title: '登录成功',
@@ -287,6 +280,7 @@
 					});
 				}).catch(err => {
 					console.error('数据更新失败:', err);
+					uni.hideLoading();
 					uni.showToast({
 						title: '数据更新失败',
 						icon: 'none'
@@ -294,51 +288,26 @@
 				});
 			},
 			// 获取酒吧信息
-			getBarInfoFun() {
+			async getBarInfo() {
-				if (!this.isLoggedIn) {
+				try {
-					console.log('用户未登录，不获取酒吧信息');
+					const res = await getBarInfo();
-					return Promise.reject('未登录');
+					if (res.code === 200) {
-				}
-				
-				return getBarInfo().then(res => {
-					console.log('获取酒吧信息成功:', res);
-					if (res && res.data) {
 						this.barInfo = res.data;
-						// 强制更新视图
-						this.$forceUpdate();
-						return this.barInfo;
-					} else {
-						console.log('获取酒吧信息成功，但数据为空');
-						this.barInfo = null;
-						return Promise.reject('数据为空');
 					}
-				}).catch(err => {
+				} catch (error) {
-					console.error('获取酒吧信息失败:', err);
+					console.error('获取门店信息失败:', error);
-					this.barInfo = null;
+				}
-					return Promise.reject(err);
-				});
 			},
 			// 获取我的扫码数据
-			getMyScanDataFun() {
+			async getMyScanData() {
-				if (!this.isLoggedIn) {
+				try {
-					return Promise.reject('未登录');
+					const res = await getMyScanData();
-				}
-				
-				return getMyScanData().then(res => {
 					if (res.code === 200) {
 						this.myScanData = res.data;
-						return this.myScanData;
-					} else {
-						return Promise.reject(res);
 					}
-				}).catch(err => {
+				} catch (error) {
-					console.error('获取扫码数据失败:', err);
+					console.error('获取扫码数据失败:', error);
-					uni.showToast({
+				}
-						title: '获取扫码数据失败',
-						icon: 'none'
-					});
-					return Promise.reject(err);
-				});
 			},
 			// 处理用户信息区域点击
 			handleUserBoxClick() {
@@ -443,17 +412,31 @@
 					content: '确定要退出登录吗？',
 					success: (res) => {
 						if (res.confirm) {
-							// 清除本地存储的用户信息
 							clearLoginStatus();
-							
+							// 重置所有数据
-							// 跳转到首页
+							this.resetData();
-							uni.reLaunch({
+							// 刷新页面状态
-								url: '/pages/index/index'
+							this.checkLoginStatus();
+							// 显示退出成功提示
+							uni.showToast({
+								title: '已退出登录',
+								icon: 'success',
+								duration: 1500
 							});
 						}
 					}
 				});
 			},
+			// 重置数据方法
+			resetData() {
+				this.barInfo = null;
+				this.myScanData = null;
+				this.isLoggedIn = false;
+				this.currentBrandIndex = 0;
+				this.sortedBrandCoins = [];
+				this.scanCount = 0;
+				this.userInfo = null;
+			},
 			// 关闭登录弹窗
 			closeLoginPopup() {
 				this.$refs.loginRef.close();
@@ -466,11 +449,9 @@
 			},
 			// 跳转到设置页面
 			toSettings() {
-				if (this.userStatus === 'verified') {
 				uni.navigateTo({
-						url: '/pagesMy/setting'
+					url: '/pagesMy/settings'
-					})
+				});
-				}
 			},
 			
 			// 显示修改头像提示
@@ -615,8 +596,8 @@
 			// 获取啤酒币余额
 			async getStoreCoinBalanceFun() {
 				try {
-					const token = uni.getStorageSync('token');
+					const token = getToken();
-					const userInfo = uni.getStorageSync('userInfo');
+					const userInfo = getUserInfoFromAuth();
 					
 					if (!token || !userInfo) {
 						this.sortedBrandCoins = [];
@@ -648,9 +629,15 @@
 						this.sortedBrandCoins = [];
 					}
 				} catch (error) {
-					console.error('获取啤酒币余额失败', error);
+					console.error('获取啤酒币余额失败:', error);
 					this.sortedBrandCoins = [];
 				}
+			},
+			// 跳转到啤酒币页面
+			toBeerCoin() {
+				uni.navigateTo({
+					url: '/pagesCoin/beerCoin'
+				});
 			}
 		}
 	}
@@ -659,7 +646,7 @@
 <style lang="scss" scoped>
 	.page-content {
 		min-height: 100vh;
-		background: #F8F8F8;
+		background-color: #F6F7FB;
 		padding-bottom: env(safe-area-inset-bottom);
 	}
 
@@ -933,7 +920,7 @@
 
 	/* 数据统计区域样式 */
 	.data-section {
-		padding: 24rpx;
+		padding: 0 24rpx;
 		
 		/* 币种区域样式 */
 		.coin-section {
@@ -957,22 +944,104 @@
 					font-size: 28rpx;
 					color: #333333;
 					font-weight: 600;
-					margin-bottom: 16rpx;
+					margin-bottom: 8rpx;
+					display: flex;
+					align-items: center;
+					height: 88rpx;
+					line-height: 88rpx;
+					padding: 8rpx 0;
+					margin-top: -24rpx;
+					position: relative;
+					
+					.tag-icon {
+						width: 70rpx;
+						height: 70rpx;
+						margin-top: 32rpx;
+						margin-right: 8rpx;
+					}
+					
+					text {
+						margin-top: -20rpx;
+					}
 				}
 				
 				.amount-row {
-					margin-bottom: 26rpx;
+					margin-bottom: 8rpx;
+					margin-left: 150rpx;
+					display: flex;
+					align-items: flex-end;
+					padding-right: 12rpx;
+					margin-top: -24rpx;
 					
 					.amount {
 						font-size: 48rpx;
 						color: #1A1A1A;
 						font-weight: 600;
+						line-height: 48rpx;
+						margin-right: 8rpx;
+					}
+					
+					.unit {
+						font-size: 24rpx;
+						color: #666666;
+						line-height: 48rpx;
+						padding-bottom: 8rpx;
+						margin-bottom: -8rpx;
+						transform: translateY(8rpx);
 					}
 				}
 				
-				.desc {
+				.trend-row {
+					display: flex;
+					align-items: center;
 					font-size: 20rpx;
 					color: #606060;
+					line-height: 28rpx;
+					margin-bottom: 12rpx;
+					position: relative;
+					width: 100%;
+					
+					.trend-item {
+						position: absolute;
+						top: 8rpx;
+						right: 10rpx;
+						display: flex;
+						align-items: center;
+						white-space: nowrap;
+						
+						.trend-icon {
+							width: 32rpx;
+							height: 32rpx;
+							margin-right: 56rpx;
+						}
+						
+						.trend-text {
+							white-space: nowrap;
+						}
+						
+						&.up {
+							color: #606060;
+						}
+						
+						&.down {
+							color: #52C41A;
+						}
+					}
+				}
+				
+				.unauth-tip {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 100%;
+					
+					.tip-text {
+						font-size: 28rpx;
+						color: #333333;
+						font-weight: 600;
+						white-space: nowrap;
+						line-height: 28rpx;
+					}
 				}
 			}
 			
@@ -988,27 +1057,31 @@
 				/* 品牌内容容器 */
 				.brand-content {
 					height: 100%;
-					padding: 16rpx;
+					padding: 0 24rpx;
 					box-sizing: border-box;
 					
 					/* 品牌标题区域 */
 					.brand-header {
 						display: flex;
-						align-items: center;
+						align-items: flex-start;
-						margin-bottom: 12rpx;
+						padding: 8rpx;
 						
 						.brand-logo {
 							width: 72rpx;
 							height: 72rpx;
+							margin-top: 12rpx;
+							// margin-left: 12rpx;
 							border-radius: 12rpx;
-							margin-right: 16rpx;
+							margin-right: 12rpx;
 						}
 						
 						.title {
 							font-size: 28rpx;
 							color: #333333;
 							font-weight: 600;
+							text-align: right;
 							flex: 1;
+							padding-top: 8rpx;
 						}
 					}
 					
@@ -1016,18 +1089,23 @@
 					.amount-row {
 						display: flex;
 						align-items: center;
-						margin-bottom: 12rpx;
+						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;
 						}
 						
 						.coin-icon {
 							color: #FFD700;
 							font-size: 30rpx;
 							margin-left: 10rpx;
+							line-height: 48rpx;
 						}
 					}
 					
@@ -1035,6 +1113,10 @@
 					.desc {
 						font-size: 20rpx;
 						color: #606060;
+						text-align: right;
+						line-height: 28rpx;
+						padding-right: 20rpx;
+						margin-bottom: 12rpx;
 					}
 					
 					/* 空数据状态样式 */
@@ -1043,6 +1125,7 @@
 						flex-direction: column;
 						justify-content: center;
 						align-items: center;
+						height: 100%;
 						
 						.empty-icon {
 							font-size: 40rpx;