feat: 优化我的页面UI和功能 1. 调整功能区图标和间距 2. 更新SVG图标 3. 优化布局结构和样式

pages/index/my.vue

@@ -9,12 +9,17 @@
 			<view class="flex-direction flex">
 				<text class="text-xl font-bold margin-bottom">{{ userInfo.nickName || barInfo.nickName || '未设置昵称' }}</text>
 				<text class="text-sm margin-bottom-sm text-gray">门店名称：{{ barInfo.barName || '-'}}</text>
-				<view class="flex align-center">
+				<view class="flex align-center margin-bottom-sm">
 					<text class="text-sm text-gray">门店ID：{{ barInfo.barNumber || '-' }}</text>
 					<view class="copy-btn" @click.stop="copyBarNumber">
 						<text class="cuIcon-copy"></text>
 					</view>
 				</view>
+				<view v-if="barInfo" class="auth-status">
+					<text v-if="barInfo.authState == 0" class="status-tag">未认证</text>
+					<text v-else-if="barInfo.authState == 2" class="status-tag">认证中</text>
+					<text v-else class="status-tag">{{ barInfo.authEndTime }}认证到期</text>
+				</view>
 			</view>
 		</view>
 		<view v-else class="user-box flex align-center justify-start" :style="{'padding-top': statusBaeHeight + 60 + 'px'}" @click="handleUserBoxClick">
@@ -38,9 +43,6 @@
 			</view>
 		</view>
 		<view v-if="barInfo" class="scan-box">
-			<view v-if="barInfo.authState == 0" class="exprieTime">未认证</view>
-			<view v-else-if="barInfo.authState == 2" class="exprieTime">认证中</view>
-			<view v-else class="exprieTime">{{ barInfo.authEndTime }}认证到期</view>
 			<text>本月累计扫码酒款数量</text>
 			<view class="margin-top">
 				<view class="flex justify-between align-end margin-bottom-xs">
@@ -57,51 +59,51 @@
 		<view class="fun-box">
 			<view class="flex justify-between align-center margin-bottom" @click="toPage(1)">
 				<view class="flex align-center">
-					<image src="../../static/order.png" class="icon"></image>
+					<image src="@/static/mine.svg" class="icon"></image>
 					<text class="text-lg">我参与的</text>
 				</view>
 				<text class="cuIcon-right"></text>
 			</view>
 			<view class="flex justify-between align-center margin-bottom" @click="toPage(2)">
 				<view class="flex align-center">
-					<image src="../../static/collect.png" class="icon"></image>
+					<image src="@/static/focus on.svg" class="icon"></image>
 					<text class="text-lg">我的关注</text>
 				</view>
 				<text class="cuIcon-right"></text>
 			</view>
 			<view class="flex justify-between align-center margin-bottom" @click="toPage(3)">
 				<view class="flex align-center">
-					<image src="../../static/wineReview.png" class="icon"></image>
+					<image src="@/static/Wine Review.svg" class="icon"></image>
 					<text class="text-lg">我的酒评</text>
 				</view>
 				<text class="cuIcon-right"></text>
 			</view>
-			<view class="flex justify-between align-center" @click="toPage(4)">
+			<view class="flex justify-between align-center margin-bottom" @click="toPage(5)">
 				<view class="flex align-center">
-					<image src="../../static/address.png" class="icon"></image>
+					<image src="@/static/help.svg" class="icon"></image>
-					<text class="text-lg">地址信息</text>
+					<text class="text-lg">添加啤啤猩球小助手</text>
 				</view>
 				<text class="cuIcon-right"></text>
 			</view>
 		</view>
 		<view class="fun-box">
-			<view class="flex justify-between align-center margin-bottom" @click="toPage(5)">
-				<view class="flex align-center">
-					<image src="@/static/wenhao.png" class="icon"></image>
-					<text class="text-lg">添加啤啤猩球小助手</text>
-				</view>
-				<text class="cuIcon-right"></text>
-			</view>
 			<view class="flex justify-between align-center margin-bottom" @click="toPage(6)">
 				<view class="flex align-center">
-					<image src="@/static/code.png" class="icon"></image>
+					<image src="@/static/Opinion.svg" class="icon"></image>
 					<text class="text-lg">意见反馈</text>
 				</view>
 				<text class="cuIcon-right"></text>
 			</view>
-			<view class="flex justify-between align-center" @click="toPage(7)">
+			<view class="flex justify-between align-center margin-bottom" @click="toPage(4)">
 				<view class="flex align-center">
-					<image src="../../static/setting.png" class="icon"></image>
+					<image src="@/static/map.svg" class="icon"></image>
+					<text class="text-lg">地址信息</text>
+				</view>
+				<text class="cuIcon-right"></text>
+			</view>
+			<view class="flex justify-between align-center margin-bottom" @click="toPage(7)">
+				<view class="flex align-center">
+					<image src="@/static/set up.svg" class="icon"></image>
 					<text class="text-lg">设置</text>
 				</view>
 				<text class="cuIcon-right"></text>
@@ -575,115 +577,276 @@
 
 <style lang="scss" scoped>
 	.page-content {
-		height: 100vh;
+		min-height: 100vh;
-		overflow-y: auto;
+		background: #F8F8F8;
-		padding-bottom: 40rpx;
+		padding-bottom: env(safe-area-inset-bottom);
-		background: #f9f9f9;
+	}
 
 	.user-box {
-			margin-left: 36rpx;
+		background: #19367A ;
+		padding: 32rpx;
+		margin-bottom: 24rpx;
+		box-shadow: 0 4rpx 12rpx rgba(25, 54, 122, 0.2);
+		
+		.flex-direction {
+			.text-xl {
+				color: #FFFFFF;
+				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
+				font-size: 36rpx;
+				margin-bottom: 16rpx;
+				line-height: 1.2;
+			}
+			
+			.text-sm {
+				color: rgba(255, 255, 255, 0.9);
+				font-size: 26rpx;
+				margin-bottom: 12rpx;
+				line-height: 1.2;
+				
+				&.margin-bottom-sm {
+					margin-bottom: 12rpx;
+				}
+				
+				&.text-gray {
+					color: rgba(255, 255, 255, 0.9);
+				}
+			}
+		}
+		
+		.avatar-img, .avatar-placeholder {
+			width: 140rpx;
+			height: 140rpx;
+			border-radius: 70rpx;
 			margin-right: 32rpx;
+			flex-shrink: 0;
+		}
+		
+		.avatar-img {
+			border: 4rpx solid rgba(255, 255, 255, 0.8);
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
+		}
+		
+		.avatar-placeholder {
+			background: rgba(255, 255, 255, 0.2);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			
+			.default-avatar {
+				width: 70rpx;
+				height: 70rpx;
+			}
+			
+			.cuIcon-people {
+				font-size: 70rpx;
+				color: rgba(255, 255, 255, 0.8);
+			}
+		}
+		
+		.login-text {
+			height: auto;
+			
+			.status-text {
+				margin-right: 16rpx;
+				
+				text {
+					display: block;
+					color: #FFFFFF;
+					
+					&.text-xl {
+						font-size: 36rpx;
+						margin-bottom: 12rpx;
+						line-height: 1.2;
+						font-weight: bold;
+					}
+					
+					&.text-xs {
+						font-size: 24rpx;
+						color: rgba(255, 255, 255, 0.8);
+						line-height: 1.2;
+					}
+				}
+			}
+			
+			.cuIcon-right {
+				color: rgba(255, 255, 255, 0.8);
+				font-size: 28rpx;
+			}
+		}
+		
+		.auth-status {
+			margin-top: 4rpx;
+			
+			.status-tag {
+				display: inline-block;
+				padding: 4rpx 16rpx;
+				background: rgba(255, 255, 255, 0.2);
+				border-radius: 20rpx;
+				font-size: 24rpx;
+				color: #FFFFFF;
+			}
+		}
+		
+		.copy-btn {
+			margin-left: 32rpx;
+			padding: 6rpx 16rpx;
+			background: rgba(255, 255, 255, 0.2);
+			border-radius: 20rpx;
+			
+			.cuIcon-copy {
+				color: #FFFFFF;
+				font-size: 24rpx;
+			}
+		}
 	}
 
 	.scan-box {
-			position: relative;
+		background: #FFFFFF;
-			margin-top: 52rpx;
+		margin: 0 24rpx 32rpx;
-			background-color: #FFF;
+		padding: 32rpx;
-			padding: 28rpx 24rpx;
+		border-radius: 16rpx;
-			margin-left: 36rpx;
+		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
-			margin-right: 32rpx;
-			border-radius: 20rpx;
 		
-			.exprieTime {
+		text {
-				position: absolute;
+			color: #666666;
-				right: 0;
+			font-size: 28rpx;
-				top: 0;
+		}
-				background-color: #FFED34;
+		
-				border-radius: 0 20rpx 0 30rpx;
+		.margin-top {
-				padding: 10rpx 20rpx;
+			margin-top: 24rpx;
+		}
+		
+		.text-xxl {
+			font-size: 48rpx;
+			color: #333333;
+			font-weight: 600;
+			line-height: 1.2;
+		}
+		
+		.text-xs {
+			color: #666666;
+			font-size: 24rpx;
+		}
+		
+		.cu-progress {
+			height: 12rpx;
+			background: #F5F5F5;
+			margin-top: 16rpx;
+			border-radius: 8rpx;
+			overflow: hidden;
+			
+			.bg-green {
+				background: linear-gradient(90deg, #19367A 0%, #2C4B9E 100%);
+				transition: width 0.3s ease;
+			}
 		}
 	}
 
 	.fun-box {
-			border-radius: 30rpx;
+		background: #FFFFFF;
-			padding: 40rpx 38rpx;
+		margin: 0 24rpx 24rpx;
-			background-color: #FFF;
+		padding: 32rpx;
-			margin: 26rpx 32rpx 32rpx 36rpx;
+		border-radius: 16rpx;
+		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
+		
+		.margin-bottom {
+			width: 630rpx;
+			height: 80rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			position: relative;
+			margin: 0 auto;
+			
+			&:not(:last-child) {
+				margin-bottom: 24rpx;
+			}
+			
+			&:active {
+				opacity: 0.7;
+			}
+			
+			.flex.align-center {
+				height: 100%;
+				display: flex;
+				align-items: center;
 				
 				.icon {
-				width: 80rpx;
+					width: 96rpx;
-				height: 80rpx;
+					height: 96rpx;
-				margin-right: 40rpx;
+					margin-right: 24rpx;	
+					opacity: 0.9;
+					flex-shrink: 0;
+				}
+				
+				.text-lg {
+					color: #333333;
+					font-size: 30rpx;
+					font-weight: 400;
+					letter-spacing: 0.5rpx;
+					line-height: 1;
 				}
 			}
 			
-		.avatar-img {
+			.cuIcon-right {
-			width: 160rpx;
+				color: #CCCCCC;
-			height: 160rpx;
+				font-size: 24rpx;
-			border-radius: 50%;
+				height: 100%;
-			margin-right: 48rpx;
+				display: flex;
-			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+				align-items: center;
+				transition: transform 0.3s ease;
 			}
 			
-		.avatar-placeholder {
+			&:active .cuIcon-right {
-			width: 160rpx;
+				transform: translateX(4rpx);
-			height: 160rpx;
+			}
-			border-radius: 50%;
-			margin-right: 48rpx;
-			background: #F7F7F7;
-			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
-			overflow: hidden;
 		}
 		
-		.default-avatar {
+		// 分组样式
-			width: 80rpx;
+		& + .fun-box {
-			height: 80rpx;
+			margin-top: 24rpx;
+		}
+	}
+
+	.cu-btn {
+		width: calc(100% - 48rpx);
+		height: 88rpx;
+		line-height: 88rpx;
+		border-radius: 44rpx;
+		font-size: 30rpx;
+		margin: 24rpx auto 0;
+		background: #F5F5F5;
+		color: #666666;
+		transition: all 0.3s ease;
+		letter-spacing: 1rpx;
+		
+		&:active {
+			opacity: 0.8;
+			transform: scale(0.98);
+			background: #EBEBEB;
+		}
 	}
 
 	.login-text {
 		height: 160rpx;
 		transition: opacity 0.3s ease;
 		
-			&:active {
-				opacity: 0.7;
-			}
-
 		.status-text {
-				margin-right: 12rpx;
+			margin-right: 16rpx;
 			
 			text {
-					&:first-child {
+				display: block;
-						margin-bottom: 8rpx;
+				
-					}
+				&.text-xl {
-				}
+					font-size: 36rpx;
-			}
+					margin-bottom: 12rpx;
-		}
 				}
 				
-	.btn {
+				&.text-xs {
-		width: 686rpx;
-		height: 104rpx;
-		border-radius: 30rpx;
-		margin: 0 auto;
-	}
-
-	.copy-btn {
-		margin-left: 16rpx;
-		padding: 4rpx 12rpx;
-		background: #F5F5F5;
-		border-radius: 8rpx;
-		
-		.cuIcon-copy {
 					font-size: 24rpx;
-			color: #666666;
+					color: rgba(255, 255, 255, 0.8);
-		}
+				}
-		
-		&:active {
-			opacity: 0.7;
 			}
 		}
-
-	.text-gray {
-		color: #999999;
 	}
 </style>

pages/index/myJoin.vue

@@ -15,7 +15,12 @@
 		<!-- 状态提示区域 -->
 		<view class="status-tip" v-if="!isLoggedIn || userStatus !== 'verified'">
 			<view class="flex-col status-text">
-				<block v-if="userStatus === 'guest'">
+				<block v-if="!hasNetwork">
+					<text class="text-lg">网络连接失败</text>
+					<text class="sub-text">请检查网络设置后重试</text>
+					<button class="login-btn" @click="checkNetwork">重新加载</button>
+				</block>
+				<block v-else-if="userStatus === 'guest'">
 					<text class="text-lg">暂无法查看信息</text>
 					<text class="sub-text">您还没有登录，请登录后查看信息</text>
 					<button class="login-btn" @click="toLogin">
@@ -198,6 +203,7 @@
 				orderTotal: 0, // 订单总数
 				isLoading: false, // 是否正在加载数据
 				isRefreshing: false, // 是否正在刷新
+				hasNetwork: true, // 网络状态
 			};
 		},
 		computed: {
@@ -210,7 +216,8 @@
 			}
 		},
 		onLoad() {
-			this.initData()
+			this.checkLoginStatus()
+			this.checkNetwork()
 		},
 		onShow() {
 			this.checkUserInfo()
@@ -614,6 +621,26 @@
 					// 其他状态打开登录弹窗
 					this.$refs.loginRef.open()
 				}
+			},
+			
+			// 检查网络状态
+			checkNetwork() {
+				uni.getNetworkType({
+					success: (res) => {
+						this.hasNetwork = res.networkType !== 'none'
+						if (this.hasNetwork) {
+							this.checkLoginStatus()
+						}
+					}
+				})
+				
+				// 监听网络状态变化
+				uni.onNetworkStatusChange((res) => {
+					this.hasNetwork = res.isConnected
+					if (this.hasNetwork) {
+						this.checkLoginStatus()
+					}
+				})
 			}
 		}
 	}
@@ -873,12 +900,6 @@
 				align-items: center;
 				justify-content: center;
 				border-radius: 44rpx;
-				
-				.btn-icon {
-					width: 48rpx;
-					height: 48rpx;
-					margin-right: 16rpx;
-				}
 			}
 		}
 	}

static/Opinion.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="41.4677734375" height="40" viewBox="0 0 41.4677734375 40"><g><g><ellipse cx="20.733945846557617" cy="20" rx="20.733945846557617" ry="20" fill="#FFFFFF" fill-opacity="1"/></g><g><path d="M27.7244,13.279736L27.7207,13.276017L27.7203,13.275594Q26.8001,12.357143,25.5,12.357143Q24.1999,12.357143,23.2797,13.275594L23.276,13.279306Q22.35714,14.1999,22.35714,15.5L22.35714,17.35714L18.64286,17.35714L18.64286,15.5Q18.64286,14.19819,17.72234,13.277665Q16.80181,12.357143,15.5,12.357143Q14.19819,12.357143,13.277665,13.277665Q12.357143,14.19819,12.357143,15.5Q12.357143,16.80181,13.277664,17.72234Q14.19819,18.64286,15.5,18.64286L17.35714,18.64286L17.35714,22.35714L15.5,22.35714Q14.1999,22.35714,13.279737,23.2756L13.276079,23.2793Q12.357143,24.1999,12.357143,25.5Q12.357143,26.8001,13.275593,27.7203L13.279367,27.724Q14.1999,28.642899999999997,15.5,28.642899999999997Q16.80181,28.642899999999997,17.72234,27.7223Q18.64286,26.8018,18.64286,25.5L18.64286,23.642899999999997L22.35714,23.642899999999997L22.35714,25.5Q22.35714,26.8018,23.2777,27.7223Q24.1982,28.642899999999997,25.5,28.642899999999997Q26.8018,28.642899999999997,27.7223,27.7223Q28.642899999999997,26.8018,28.642899999999997,25.5Q28.642899999999997,24.1982,27.7223,23.2777Q26.8018,22.35714,25.5,22.35714L23.642899999999997,22.35714L23.642899999999997,18.64286L25.5,18.64286Q26.8018,18.64286,27.7223,17.72234Q28.642899999999997,16.80181,28.642899999999997,15.5Q28.642899999999997,14.1999,27.7244,13.279736ZM22.35714,18.64286L18.64286,18.64286L18.64286,22.35714L22.35714,22.35714L22.35714,18.64286ZM23.642899999999997,17.35714L25.5,17.35714Q26.2693,17.35714,26.813200000000002,16.813200000000002Q27.357100000000003,16.26926,27.357100000000003,15.5Q27.357100000000003,14.73176,26.8144,14.18803L26.811999999999998,14.18558L26.8116,14.18515Q26.267899999999997,13.642857,25.5,13.642857Q24.7318,13.642857,24.188000000000002,14.18558L24.1851,14.18846Q23.642899999999997,14.73176,23.642899999999997,15.5L23.642899999999997,17.35714ZM23.642899999999997,23.642899999999997L23.642899999999997,25.5Q23.642899999999997,26.2693,24.186799999999998,26.813200000000002Q24.7307,27.357100000000003,25.5,27.357100000000003Q26.2693,27.357100000000003,26.813200000000002,26.813200000000002Q27.357100000000003,26.2693,27.357100000000003,25.5Q27.357100000000003,24.7307,26.813200000000002,24.186799999999998Q26.2693,23.642899999999997,25.5,23.642899999999997L23.642899999999997,23.642899999999997ZM17.35714,23.642899999999997L15.5,23.642899999999997Q14.73176,23.642899999999997,14.18803,24.1856L14.18509,24.188499999999998Q13.642857,24.7318,13.642857,25.5Q13.642857,26.2682,14.18558,26.811999999999998L14.1884,26.814799999999998Q14.73176,27.357100000000003,15.5,27.357100000000003Q16.26925,27.357100000000003,16.813200000000002,26.813200000000002Q17.35714,26.2693,17.35714,25.5L17.35714,23.642899999999997ZM17.35714,17.35714L17.35714,15.5Q17.35714,14.73075,16.813200000000002,14.1868Q16.26925,13.642857,15.5,13.642857Q14.73075,13.642857,14.1868,14.1868Q13.642857,14.73075,13.642857,15.5Q13.642857,16.26925,14.1868,16.813200000000002Q14.73075,17.35714,15.5,17.35714L17.35714,17.35714Z" fill-rule="evenodd" fill="#2AE1E1" fill-opacity="1"/></g></g></svg>