fix:修复bug

2026-02-06 18:09:23 +08:00
parent f476cee76d
commit bb5a6dd100
51 changed files with 4491 additions and 2630 deletions
@@ -0,0 +1,275 @@
+<template>
+	<view class="login-container">
+		<view class="logo">
+			<image src="/static/logo.png" mode="aspectFit" />
+			<text class="app-name">{{ $t('app.slogan') }}</text>
+		</view>
+
+		<view class="title">{{ $t('auth.loginTitle') }}</view>
+		<view class="subtitle">{{ $t('auth.loginDesc') }}</view>
+
+	<!-- 微信一键手机号快捷登录（推荐） -->
+	<button v-if="!isAgreed" class="btn primary" @click="handleLoginClick">
+		{{ $t('auth.getPhoneNumber') }}
+	</button>
+	<button v-else class="btn primary" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
+		{{ $t('auth.getPhoneNumber') }}
+	</button>
+
+	<!-- 手机号验证码登录 -->
+	<button class="btn outline" @click="goToPhoneLogin" v-if="isHTML5">
+		{{ $t('auth.phoneLogin') }}
+	</button>
+
+	<view class="agreement-box">
+		<checkbox-group @change="onAgreementChange">
+			<label class="agreement-label">
+				<checkbox value="agreed" :checked="isAgreed" color="#07c160" class="agreement-checkbox" />
+				<text class="agreement-text">
+					{{ $t('auth.agreeToTerms') }}
+					<text class="link" @tap.stop="go('/subPackages/other/legal/agreement')">{{ $t('user.userAgreement') }}</text>
+					{{ $t('common.and') }}
+					<text class="link" @tap.stop="go('/subPackages/other/legal/privacy')">{{ $t('user.privacyPolicy') }}</text>
+				</text>
+			</label>
+		</checkbox-group>
+	</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, onMounted } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	import { wxLogin, getUserPhoneNumber, getUserInfo } from '@/util/index.js'
+	import { useI18n } from '@/utils/i18n.js'
+
+	const { t } = useI18n()
+
+	// 设置页面标题
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: t('auth.loginTitle')
+		})
+	})
+
+	const isHTML5 = ref(false) // 是否是HTML5模式
+
+	const redirect = ref('/pages/index/index')
+	const isAgreed = ref(false) // 是否同意协议
+
+	// 勾选协议变化
+	const onAgreementChange = (e) => {
+		isAgreed.value = e.detail.value.includes('agreed')
+	}
+
+	// 未勾选协议时点击登录按钮
+	const handleLoginClick = async () => {
+		try {
+			await checkAgreement()
+			// 协议已同意后，按钮会自动切换为带open-type的版本
+		} catch (error) {
+			// 用户取消了协议同意
+		}
+	}
+
+	// 检查是否同意协议
+	const checkAgreement = () => {
+		return new Promise((resolve, reject) => {
+			if (isAgreed.value) {
+				resolve()
+				return
+			}
+
+		// 未勾选，弹窗提示
+		uni.showModal({
+			title: t('common.tips'),
+			content: t('auth.pleaseAgreeToTerms'),
+			confirmText: t('common.confirm'),
+			cancelText: t('common.cancel'),
+			success: (res) => {
+				if (res.confirm) {
+					// 用户点击同意，自动勾选
+					isAgreed.value = true
+					resolve()
+				} else {
+					// 用户点击取消
+					reject(new Error(t('auth.pleaseAgreeToTerms')))
+				}
+			}
+		})
+		})
+	}
+
+	const navigateAfterLogin = async () => {
+		try {
+			// 可选：刷新一次用户信息
+			await getUserInfo().catch(() => {})
+		} catch (e) {}
+
+		// 读取跳转路径（支持 tabBar 页面）
+		const target = '/pages/index/index'
+		const tabPages = ['/pages/index/index', '/pages/my/index']
+		if (tabPages.includes(target)) {
+			uni.reLaunch({ url: target })
+			return
+		}
+		uni.reLaunch({ url: target })
+	}
+
+	const onWeChatLogin = async () => {
+		try {
+			// 先检查是否同意协议
+			await checkAgreement()
+			
+		await wxLogin()
+		uni.showToast({ title: t('auth.loginSuccess'), icon: 'success' })
+			await navigateAfterLogin()
+		} catch (error) {
+			if (error.message !== t('auth.pleaseAgreeToTerms')) {
+				uni.showToast({ title: error.message || t('auth.loginFailed'), icon: 'none' })
+			}
+		}
+	}
+
+	const onGetPhoneNumber = async (e) => {
+		if (!e || e.detail.errMsg !== 'getPhoneNumber:ok') {
+			uni.showToast({ title: t('auth.phoneCancelled'), icon: 'none' })
+			return
+		}
+		
+		try {
+			// 先微信登录，获取 token
+			await wxLogin()
+			// 再用微信返回的临时 code 换取手机号
+			await getUserPhoneNumber(e.detail.code)
+			uni.showToast({ title: t('auth.loginSuccess'), icon: 'success' })
+			await navigateAfterLogin()
+		} catch (error) {
+			uni.showToast({ title: error.message || t('auth.loginFailed'), icon: 'none' })
+		}
+	}
+
+	onLoad((opts) => {
+		if (opts && opts.redirect) {
+			try {
+				redirect.value = decodeURIComponent(opts.redirect)
+			} catch (_) {}
+		}
+		// #ifdef H5
+		isHTML5.value = true
+		// #endif
+	})
+
+	const go = (url) => {
+		uni.navigateTo({ url })
+	}
+
+	// 跳转到手机号登录页面
+	const goToPhoneLogin = () => {
+		uni.navigateTo({ url: '/subPackages/user/login/phone' })
+	}
+</script>
+
+<style lang="scss" scoped>
+	.login-container {
+		min-height: 100vh;
+		background: linear-gradient(180deg, #C8F4D9 0%, #FFFFFF 100%);
+		padding: 80rpx 40rpx 40rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		box-sizing: border-box;
+
+		.logo {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin-bottom: 60rpx;
+
+			image {
+				width: 160rpx;
+				height: 160rpx;
+				margin-bottom: 16rpx;
+			}
+
+			.app-name {
+				font-size: 36rpx;
+				font-weight: 600;
+				color: #333;
+			}
+		}
+
+		.title {
+			font-size: 40rpx;
+			font-weight: 600;
+			color: #222;
+			margin-bottom: 12rpx;
+		}
+
+		.subtitle {
+			font-size: 26rpx;
+			color: #888;
+			margin-bottom: 60rpx;
+		}
+
+		.btn {
+			width: 100%;
+			height: 96rpx;
+			border-radius: 48rpx;
+			font-size: 32rpx;
+			margin-bottom: 24rpx;
+		}
+
+        .primary {
+            background: #07c160;
+            color: #fff;
+            box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+        }
+
+        .outline {
+            background: #fff;
+            color: #07c160;
+            border: 2rpx solid #07c160;
+        }
+
+		.agreement-box {
+			margin-top: 32rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 100%;
+			bottom: 40rpx;
+			position: absolute;
+			
+			.agreement-label {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				
+				.agreement-checkbox {
+					flex-shrink: 0;
+					// margin-right: 12rpx;
+					// margin-top: 2rpx;
+					transform:scale(0.7);
+				}
+				
+				.agreement-text {
+					flex: 1;
+					font-size: 24rpx;
+					color: #666;
+					line-height: 1.8;
+					word-break: break-all;
+					
+					.link {
+						color: #07c160;
+						font-weight: 500;
+						text-decoration: none;
+					}
+				}
+			}
+		}
+	}
+</style>
+
@@ -0,0 +1,394 @@
+<template>
+	<view class="login-container">
+		<view class="header">
+			<view class="title">Hello,</view>
+			<view class="subtitle">{{ $t('app.welcome') }}</view>
+		</view>
+
+		<!-- 国家区号选择器 -->
+		<view class="form-group">
+			<view class="phone-input-wrapper">
+				<view class="country-code" @click="showCountryPicker">
+					<text>{{ countryCode }}</text>
+					<text class="arrow">▼</text>
+				</view>
+				<view class="divider"></view>
+				<input 
+					class="phone-input" 
+					v-model="phone" 
+					type="number" 
+					maxlength="11"
+					:placeholder="$t('auth.phonePlaceholder')" 
+				/>
+			</view>
+		</view>
+
+		<!-- 验证码输入 -->
+		<view class="form-group">
+			<view class="code-input-wrapper">
+				<input 
+					class="code-input" 
+					v-model="verifyCode" 
+					type="number" 
+					maxlength="6"
+					:placeholder="$t('auth.codePlaceholder')" 
+				/>
+				<view class="code-btn" @click="handleSendCode" :class="{ disabled: countdown > 0 }">
+					<text class="code-btn-text">{{ countdown > 0 ? `${countdown}s` : $t('auth.getCode') }}</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 区域提示 -->
+		<view class="region-notice">
+			<text>{{ $t('auth.regionNotSupported') }}</text>
+		</view>
+
+		<!-- 登录按钮 -->
+		<view class="login-btn" @click="handleLogin">
+			<text class="login-btn-text">{{ $t('auth.loginBtn') }}</text>
+		</view>
+
+		<!-- 协议勾选 -->
+		<view class="agreement-box">
+			<checkbox-group @change="onAgreementChange">
+				<label class="agreement-label">
+					<checkbox value="agreed" :checked="isAgreed" color="#07c160" class="agreement-checkbox" />
+					<text class="agreement-text">
+						{{ $t('auth.agreeToTerms') }}
+						<text class="link" @tap.stop="go('/pages/legal/agreement')">{{ $t('user.userAgreement') }}</text>
+						{{ $t('common.and') }}
+						<text class="link" @tap.stop="go('/pages/legal/privacy')">{{ $t('user.privacyPolicy') }}</text>
+					</text>
+				</label>
+			</checkbox-group>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import { ref, onMounted, onUnmounted } from 'vue'
+	import { onLoad } from '@dcloudio/uni-app'
+	import { sendVerifyCode, loginWithCode } from '@/config/api/user.js'
+	import { fetchAndCacheCustomerPhone } from '@/util/index.js'
+	import { useI18n } from '@/utils/i18n.js'
+
+	const { t } = useI18n()
+
+	// 设置页面标题
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: t('auth.phoneLogin')
+		})
+	})
+
+	const redirect = ref('/pages/index/index')
+	const isAgreed = ref(false) // 是否同意协议
+	const phone = ref('') // 手机号
+	const verifyCode = ref('') // 验证码
+	const countryCode = ref('+86') // 国家区号
+	const countdown = ref(0) // 验证码倒计时
+	let timer = null // 计时器
+
+	// 勾选协议变化
+	const onAgreementChange = (e) => {
+		isAgreed.value = e.detail.value.includes('agreed')
+	}
+
+	// 显示国家区号选择器（暂时仅支持+86）
+	const showCountryPicker = () => {
+		uni.showToast({
+			title: t('auth.onlyMainlandSupported'),
+			icon: 'none'
+		})
+	}
+
+	// 验证手机号格式
+	const validatePhone = () => {
+		if (!phone.value) {
+			uni.showToast({ title: t('auth.phoneRequired'), icon: 'none' })
+			return false
+		}
+		const phoneReg = /^1[3-9]\d{9}$/
+		if (!phoneReg.test(phone.value)) {
+			uni.showToast({ title: t('auth.phoneInvalid'), icon: 'none' })
+			return false
+		}
+		return true
+	}
+
+	// 发送验证码
+	const handleSendCode = async () => {
+		if (countdown.value > 0) return
+		
+		if (!validatePhone()) return
+		
+		try {
+			uni.showLoading({ title: t('common.sending') })
+			await sendVerifyCode(phone.value)
+			uni.hideLoading()
+			uni.showToast({ title: t('auth.codeSent'), icon: 'success' })
+			
+			// 启动60秒倒计时
+			countdown.value = 60
+			timer = setInterval(() => {
+				countdown.value--
+				if (countdown.value <= 0) {
+					clearInterval(timer)
+					timer = null
+				}
+			}, 1000)
+		} catch (error) {
+			uni.hideLoading()
+			uni.showToast({ 
+				title: error.message || t('auth.sendCodeFailed'), 
+				icon: 'none' 
+			})
+		}
+	}
+
+	// 登录
+	const handleLogin = async () => {
+		if (!validatePhone()) return
+		
+		if (!verifyCode.value) {
+			uni.showToast({ title: t('auth.codeRequired'), icon: 'none' })
+			return
+		}
+		
+		if (!isAgreed.value) {
+			uni.showToast({ title: t('auth.pleaseAgreeToTerms'), icon: 'none' })
+			return
+		}
+		
+		try {
+			uni.showLoading({ title: t('common.loggingIn') })
+			const res = await loginWithCode(phone.value, verifyCode.value)
+			
+			// 保存token和client_id
+			// 兼容多种返回格式：res.data.token, res.token, res.data.access_token
+			const token = res.token || (res.data && (res.data.token || res.data.access_token))
+			const clientId = res.client_id || (res.data && (res.data.client_id || res.data.clientId))
+			
+			if (token) {
+				uni.setStorageSync('token', token)
+				if (clientId) {
+					uni.setStorageSync('client_id', clientId)
+				}
+				
+				// 登录成功后获取并缓存客服电话
+				fetchAndCacheCustomerPhone().catch(err => {
+					console.error(t('auth.getServicePhoneFailed'), err)
+				})
+			} else {
+				throw new Error(t('auth.noAuthToken'))
+			}
+			
+			uni.hideLoading()
+			uni.showToast({ title: t('auth.loginSuccess'), icon: 'success' })
+			
+			// 跳转到首页
+			setTimeout(() => {
+				uni.reLaunch({ url: redirect.value })
+			}, 1500)
+		} catch (error) {
+			uni.hideLoading()
+			uni.showToast({ 
+				title: error.message || t('auth.loginFailed'), 
+				icon: 'none' 
+			})
+		}
+	}
+
+	// 页面加载
+	onLoad((opts) => {
+		if (opts && opts.redirect) {
+			try {
+				redirect.value = decodeURIComponent(opts.redirect)
+			} catch (_) {}
+		}
+	})
+
+	const go = (url) => {
+		uni.navigateTo({ url })
+	}
+
+	// 清理定时器
+	onUnmounted(() => {
+		if (timer) {
+			clearInterval(timer)
+			timer = null
+		}
+	})
+</script>
+
+<style lang="scss" scoped>
+	.login-container {
+		min-height: 100vh;
+		background: linear-gradient(180deg, #C8F4D9 0%, #FFFFFF 100%);
+		padding: 0 48rpx;
+		box-sizing: border-box;
+		position: relative;
+		
+		.header {
+			padding-top: 120rpx;
+			margin-bottom: 80rpx;
+			
+			.title {
+				font-size: 64rpx;
+				font-weight: 700;
+				color: #000000;
+				line-height: 1.2;
+				margin-bottom: 8rpx;
+			}
+			
+			.subtitle {
+				font-size: 64rpx;
+				font-weight: 700;
+				color: #000000;
+				line-height: 1.2;
+			}
+		}
+		
+		.form-group {
+			margin-bottom: 32rpx;
+			
+			.phone-input-wrapper {
+				background: #FFFFFF;
+				border-radius: 48rpx;
+				height: 96rpx;
+				display: flex;
+				align-items: center;
+				padding: 0 32rpx;
+				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+				
+				.country-code {
+					display: flex;
+					align-items: center;
+					font-size: 32rpx;
+					color: #333333;
+					padding-right: 16rpx;
+					
+					.arrow {
+						margin-left: 8rpx;
+						font-size: 20rpx;
+						color: #999999;
+					}
+				}
+				
+				.divider {
+					width: 2rpx;
+					height: 40rpx;
+					background: #E5E5E5;
+					margin: 0 16rpx;
+				}
+				
+				.phone-input {
+					flex: 1;
+					font-size: 32rpx;
+					color: #333333;
+				}
+			}
+			
+			.code-input-wrapper {
+				background: #FFFFFF;
+				border-radius: 48rpx;
+				height: 96rpx;
+				display: flex;
+				align-items: center;
+				padding: 0 32rpx;
+				box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
+				
+				.code-input {
+					flex: 1;
+					font-size: 32rpx;
+					color: #333333;
+				}
+				
+				.code-btn {
+					padding-left: 24rpx;
+					border-left: 2rpx solid #E5E5E5;
+					
+					&.disabled {
+						opacity: 0.5;
+					}
+					
+					.code-btn-text {
+						font-size: 28rpx;
+						color: #07c160;
+						font-weight: 500;
+						white-space: nowrap;
+					}
+				}
+			}
+		}
+		
+		.region-notice {
+			margin-bottom: 48rpx;
+			padding: 0 8rpx;
+			
+			text {
+				font-size: 24rpx;
+				color: #666666;
+				line-height: 1.6;
+			}
+		}
+		
+		.login-btn {
+			background: #07c160;
+			border-radius: 60rpx;
+			height: 112rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.3);
+			margin-bottom: 48rpx;
+			
+			&:active {
+				opacity: 0.9;
+			}
+			
+			.login-btn-text {
+				font-size: 36rpx;
+				color: #FFFFFF;
+				font-weight: 600;
+			}
+		}
+		
+		.agreement-box {
+			position: absolute;
+			left: 48rpx;
+			right: 48rpx;
+			bottom: 60rpx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			
+			.agreement-label {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				
+				.agreement-checkbox {
+					flex-shrink: 0;
+					transform: scale(0.75);
+					margin-right: 4rpx;
+				}
+				
+				.agreement-text {
+					flex: 1;
+					font-size: 24rpx;
+					color: #666;
+					line-height: 1.8;
+					word-break: break-all;
+					
+					.link {
+						color: #07c160;
+						font-weight: 500;
+						text-decoration: none;
+					}
+				}
+			}
+		}
+	}
+</style>
@@ -0,0 +1,479 @@
+<template>
+	<view class="my-card-page">
+		<!-- 会员卡列表 -->
+		<view class="card-list" v-if="cardList.length > 0">
+			<view v-for="card in cardList" :key="card.id" style="position: relative;background-color: #f5f5f5;"
+				@click="viewCardDetail(card)" :style="card.cardType==='COUNT'?'height: 240rpx;':'height: 240rpx;'">
+				<view
+					style="height: 120rpx;background-color: #ffffff;z-index: 999;border-radius: 25rpx;padding: 32rpx;position: absolute;top: 0;left: 0;right: 0;">
+					<!-- 卡片头部：标题和日期 -->
+					<view class="card-header">
+						<text class="card-name">{{ card.name }}</text>
+						<view class="card-date">
+							<text class="date-text" v-if="card.status !== 'expired'">{{ card.endDate }}{{
+								$t('myCard.expire') }}</text>
+							<text class="date-text expired" v-else>{{ $t('myCard.expiredOn') }}{{ card.endDate }}</text>
+						</view>
+					</view>
+
+					<!-- 地区信息 -->
+					<view class="card-region">
+						<text
+							class="region-text">{{ $t('myCard.onlyForRegionBefore') }}{{ card.positionName }}{{ $t('myCard.onlyForRegionAfter') }}</text>
+						<!-- 状态标签 / 去使用按钮 -->
+						<view v-if="card.status !== 'expired'" class="status-tag active"
+							style="display: flex; align-items: center; gap: 4rpx; background-color: #FFE2B8; border-radius: 20rpx; padding: 6rpx 20rpx;"
+							@click.stop="handleUseCard(card)">
+							<text class="status-text" style="color: #A16300;">{{ $t('myCard.toUse') }}</text>
+							<!-- <uv-icon name="scan" size="12" color="#D4A574"></uv-icon> -->
+						</view>
+						<view v-else class="status-tag" :class="getStatusClass(card.status)">
+							<text class="status-text">{{ getStatusText(card.status) }}</text>
+						</view>
+					</view>
+				</view>
+				<!-- 使用情况和操作按钮 -->
+				<view style="position: absolute; bottom: -20rpx; left: 0; right: 0; padding: 20rpx;z-index:1;">
+					<view class="card-footer">
+						<!-- 次卡信息 -->
+						<view v-if="card.cardType === 'COUNT'" class="card-usage-info">
+							<text class="usage-text">{{ $t('myCard.remainingTimes') }}{{ card.remainingCount }}{{
+								$t('myCard.times') }}</text>
+						</view>
+						<!-- 时长卡信息 -->
+						<view v-else class="card-usage-info">
+							<text class="usage-text">每日限用次数：{{card.dailyLimitCount}}次</text>
+						</view>
+
+						<!-- 操作按钮 -->
+						<view class="card-actions">
+							<!-- 续卡按钮（仅次卡显示） -->
+							<view v-if="card.cardType === 'COUNT'" class="renew-btn" @click.stop="renewCard(card)">
+								<text class="renew-text">{{ $t('myCard.renew') }}</text>
+								<uv-icon name="arrow-right" size="14" color="#D4A574"></uv-icon>
+
+							</view>
+							<view v-else class="renew-btn">
+								<text class="renew-text">单次限时：{{card.singleLimitMinutes}}分钟</text>
+							</view>
+
+						</view>
+					</view>
+				</view>
+
+			</view>
+		</view>
+
+		<!-- 空状态 -->
+		<view class="empty-state" v-else>
+			<image class="empty-icon" src="/static/empty-card.png" mode="aspectFit"></image>
+			<text class="empty-text">{{ $t('myCard.noCards') }}</text>
+			<view class="buy-btn" @click="goToBuy">
+				<text class="buy-text">{{ $t('myCard.buyNow') }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	import {
+		useI18n
+	} from '@/utils/i18n.js'
+	import {
+		getMemberCardsByStatus
+	} from '@/config/api/member.js'
+	import {
+		getQueryString
+	} from '@/util/index.js'
+	import {
+		getDeviceInfo
+	} from '@/config/api/device.js'
+	import {
+		getInUseOrder,
+		getUnpaidOrder
+	} from '@/config/api/order.js'
+	const {
+		t
+	} = useI18n()
+
+	// 会员卡列表
+	const cardList = ref([])
+
+	// 获取会员卡列表
+	const getCardList = async () => {
+		try {
+			const response = await getMemberCardsByStatus()
+			// 处理API返回的数据，转换为模板需要的格式
+			if (response.code === 200 && response.data) {
+				cardList.value = response.data.map(item => ({
+					id: item.id,
+					name: item.cardName,
+					cardType: item.cardType, // TIME 或 COUNT
+					// 次卡相关
+					totalCount: item.totalCount,
+					remainingCount: item.remainingCount,
+					singleLimitMinutesForCount: item.singleLimitMinutesForCount,
+					// 时长卡相关
+					cycleDays: item.cycleDays,
+					dailyLimitCount: item.dailyLimitCount,
+					singleLimitMinutes: item.singleLimitMinutes,
+					currentCycleStartTime: item.currentCycleStartTime,
+					currentCycleUsedCount: item.currentCycleUsedCount,
+					// 通用信息
+					status: item.status,
+					startDate: item.startTime?.split(' ')[0] || item.startTime,
+					endDate: item.endTime?.split(' ')[0] || item.endTime,
+					positionId: item.positionId,
+					positionName: item.positionName,
+					purchasePrice: item.purchasePrice,
+					remark: item.remark
+				}))
+			} else {
+				cardList.value = []
+			}
+		} catch (error) {
+			console.error('获取会员卡列表失败:', error)
+			uni.showToast({
+				title: t('myCard.getListFailed'),
+				icon: 'none'
+			})
+		}
+	}
+
+	// 计算进度条宽度
+	const getProgressWidth = (used, total) => {
+		if (!total || total === 0) return '0%'
+		const percentage = (used / total) * 100
+		return `${Math.min(percentage, 100)}%`
+	}
+
+	// 获取状态类名
+	const getStatusClass = (status) => {
+		const statusMap = {
+			'unused': 'active',
+			'expired': 'expired',
+			'used': 'used',
+			'active': 'active' // 兼容原始状态
+		}
+		return statusMap[status] || 'active' // 默认为active
+	}
+
+	// 获取状态文本
+	const getStatusText = (status) => {
+		const statusMap = {
+			'unused': t('myCard.active'), // unused表示未使用，即活跃状态
+			'expired': t('myCard.expired'),
+			'used': t('myCard.used'),
+			'active': t('myCard.active') // 兼容原始状态
+		}
+		return statusMap[status] || t('myCard.active') // 默认为active
+	}
+
+	// 查看卡详情
+	const viewCardDetail = (card) => {
+		// TODO: 跳转到卡详情页面
+		// uni.showToast({
+		// 	title: t('common.functionDeveloping'),
+		// 	icon: 'none'
+		// })
+	}
+
+	// 续卡
+	const renewCard = (card) => {
+		uni.navigateTo({
+			url: `/pages/purchase/index?positionId=${card.positionId}`
+		})
+	}
+
+	// 去使用会员卡
+	const handleUseCard = async (card) => {
+		try {
+			const scanResult = await new Promise((resolve, reject) => {
+				uni.scanCode({
+					success: resolve,
+					fail: reject
+				})
+			})
+
+			console.log('扫码结果:', scanResult);
+			let deviceNo;
+			// 兼容不同平台的扫码结果
+			if (scanResult.scanType === 'QR_CODE' || scanResult.scanType === 'qrCode') {
+				deviceNo = getQueryString(scanResult.result, 'deviceNo')
+			} else if (scanResult.path) {
+				deviceNo = getQueryString(scanResult.path, 'deviceNo')
+			} else {
+				deviceNo = scanResult.result
+			}
+
+			if (!deviceNo) {
+				uni.showToast({
+					title: t('home.invalidQRCode'),
+					icon: 'none'
+				})
+				return
+			}
+
+			uni.showLoading({
+				title: t('common.getting')
+			})
+
+			// 检查是否有使用中的订单
+			const inUseRes = await getInUseOrder()
+			if (inUseRes && inUseRes.code === 200 && inUseRes.data) {
+				uni.hideLoading()
+				const inUseOrder = inUseRes.data
+				uni.reLaunch({
+					url: `/pages/order/detail?orderId=${inUseOrder.orderId}&deviceId=${deviceNo || inUseOrder.deviceNo}`
+				})
+				return
+			}
+
+			// 检查是否有待支付订单
+			const orderRes = await getUnpaidOrder()
+			if (orderRes && orderRes.code === 200 && orderRes.data) {
+				uni.hideLoading()
+				const unpaidOrder = orderRes.data
+				uni.navigateTo({
+					url: `/pages/order/payment?orderId=${unpaidOrder.orderId}`
+				})
+				return
+			}
+
+			// 获取设备信息并跳转详情
+			const deviceInfoRes = await getDeviceInfo(deviceNo)
+			uni.hideLoading()
+
+			if (deviceInfoRes.code === 200 && deviceInfoRes.data && deviceInfoRes.data.device) {
+				const deviceInfo = deviceInfoRes.data.device
+				let url = `/pages/device/detail?deviceNo=${deviceNo}`
+				if (deviceInfo.feeConfig) {
+					url += `&feeConfig=${encodeURIComponent(deviceInfo.feeConfig)}`
+				}
+				uni.navigateTo({
+					url
+				})
+			} else {
+				uni.navigateTo({
+					url: `/pages/device/detail?deviceNo=${deviceNo}`
+				})
+			}
+		} catch (error) {
+			console.error('扫码处理失败:', error)
+			if (error && error.errMsg !== 'scanCode:fail cancel') {
+				uni.showToast({
+					title: t('home.scanFailed'),
+					icon: 'none'
+				})
+			}
+		}
+	}
+
+	// 去购买
+	const goToBuy = () => {
+		uni.navigateTo({
+			url: '/pages/purchase/index'
+		})
+	}
+
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: t('user.myCards')
+		})
+		getCardList()
+	})
+</script>
+
+<style lang="scss" scoped>
+	.my-card-page {
+		min-height: 100vh;
+		background-color: #f5f5f5;
+		padding: 24rpx;
+	}
+
+	.card-list {
+		display: flex;
+		flex-direction: column;
+		gap: 24rpx;
+	}
+
+	.card-item {
+		// background-color: #ffffff;
+		border-radius: 25rpx;
+		padding: 32rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
+		position: relative;
+		z-index: 5;
+
+	}
+
+	// 卡片头部
+	.card-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		margin-bottom: 16rpx;
+	}
+
+	.card-name {
+		font-size: 36rpx;
+		font-weight: 600;
+		color: #333333;
+		line-height: 50rpx;
+	}
+
+	.card-date {
+		.date-text {
+			font-size: 24rpx;
+			color: #999999;
+			line-height: 34rpx;
+
+			&.expired {
+				color: #999999;
+			}
+		}
+	}
+
+	// 地区信息
+	.card-region {
+		margin-bottom: 24rpx;
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		gap: 16rpx;
+
+		.region-text {
+			font-size: 26rpx;
+			color: #666666;
+			line-height: 36rpx;
+		}
+	}
+
+	// 卡片底部
+	.card-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx;
+		padding-top: 50rpx;
+		position: absolute;
+		background: rgba(255, 244, 227, 1);
+		z-index: 1;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border-radius: 0 0 25rpx 25rpx;
+		
+		/* text-align: 30rpx ; */
+	}
+
+	.card-usage-info {
+		flex: 1;
+
+		.usage-text {
+			font-size: 26rpx;
+			color: #D4A574;
+			font-weight: 500;
+			line-height: 36rpx;
+		}
+	}
+
+	.card-actions {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+	}
+
+	// 续卡按钮
+	.renew-btn {
+		display: flex;
+		align-items: center;
+		gap: 4rpx;
+		padding: 8rpx 16rpx;
+		// background-color: #FFF9F0;
+		border-radius: 8rpx;
+
+		.renew-text {
+			font-size: 24rpx;
+			color: #D4A574;
+			line-height: 34rpx;
+		}
+
+		.arrow {
+			font-size: 24rpx;
+			color: #D4A574;
+		}
+	}
+
+	// 状态标签
+	.status-tag {
+		padding: 8rpx 20rpx;
+		border-radius: 8rpx;
+
+		.status-text {
+			font-size: 24rpx;
+			line-height: 34rpx;
+		}
+
+		&.active {
+			// background-color: #FFF9F0;
+
+			.status-text {
+				color: #D4A574;
+			}
+		}
+
+		&.expired {
+			// background-color: #F5F5F5;
+
+			.status-text {
+				color: #999999;
+			}
+		}
+
+		&.used {
+			// background-color: #F5F5F5;
+
+			.status-text {
+				color: #999999;
+			}
+		}
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 120rpx 0;
+
+		.empty-icon {
+			width: 200rpx;
+			height: 200rpx;
+			margin-bottom: 40rpx;
+			opacity: 0.5;
+		}
+
+		.empty-text {
+			font-size: 28rpx;
+			color: #999;
+			margin-bottom: 40rpx;
+		}
+
+		.buy-btn {
+			padding: 20rpx 60rpx;
+			background-color: #B8741A;
+			border-radius: 48rpx;
+
+			.buy-text {
+				font-size: 28rpx;
+				color: #ffffff;
+				font-weight: 500;
+			}
+		}
+	}
+</style>
@@ -0,0 +1,542 @@
+<template>
+	<view class="my-coupon-page">
+		<!-- Tab 切换 -->
+		<!-- 		<view class="tab-container">
+			<view class="tab-item" :class="{ active: currentTab === 'available' }" @click="switchTab('available')">
+				<text class="tab-text">{{ $t('myCoupon.available') }}</text>
+			</view>
+			<view class="tab-item" :class="{ active: currentTab === 'used' }" @click="switchTab('used')">
+				<text class="tab-text">{{ $t('myCoupon.used') }}</text>
+			</view>
+			<view class="tab-item" :class="{ active: currentTab === 'expired' }" @click="switchTab('expired')">
+				<text class="tab-text">{{ $t('myCoupon.expired') }}</text>
+			</view>
+		</view> -->
+
+		<!-- 优惠券列表 -->
+		<view class="coupon-list" v-if="filteredCoupons.length > 0">
+			<view v-for="coupon in filteredCoupons" :key="coupon.id" class="coupon-item-wrapper">
+				<view class="coupon-item" :class="getCouponClass(coupon.status)">
+
+					<!-- 虚线上下圆形缺口 -->
+					<view class="coupon-circle-top"></view>
+					<view class="coupon-circle-bottom"></view>
+
+					<view class="coupon-left">
+						<view class="coupon-value">
+							<text v-if="coupon.type === 'cash'" class="coupon-unit">¥</text>
+							<text class="coupon-amount">{{ coupon.type === 'discount' ? coupon.discount : coupon.value }}</text>
+							<text v-if="coupon.type === 'discount'" class="coupon-unit">折</text>
+						</view>
+						<view style="display: flex;flex-direction: column;">
+							<text class="coupon-condition">{{ coupon.condition }}</text>
+							<text class="coupon-validity-left">{{ coupon.validity }}</text>
+						</view>
+					</view>
+					<view class="coupon-divider"></view>
+					<view class="coupon-right">
+						<!-- <text class="coupon-name">{{ coupon.name }}</text> -->
+						<!-- <text class="coupon-region" v-if="coupon.positionName"
+							style="font-size: 22rpx; color: #999; margin-top: 4rpx;">
+							{{ $t('myCoupon.onlyForRegionBefore') }}{{ coupon.positionName }}{{ $t('myCoupon.onlyForRegionAfter') }}
+						</text> -->
+						<view class="use-btn" v-if="coupon.status == 'unused'" @click="useCoupon(coupon)">
+							<text class="use-text">{{ $t('myCoupon.useNow') }}</text>
+						</view>
+						<text class="coupon-status" v-else>{{ getStatusText(coupon.status) }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 空状态 -->
+		<view class="empty-state" v-else>
+			<image class="empty-icon" src="/static/empty-coupon.png" mode="aspectFit"></image>
+			<text class="empty-text">{{ getEmptyText() }}</text>
+			<view class="buy-btn" @click="goToBuy" v-if="currentTab === 'available'">
+				<text class="buy-text">{{ $t('myCoupon.buyNow') }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from '@/utils/i18n.js'
+import { getUserCoupons } from '@/config/api/coupon.js'
+import { getQueryString } from '@/util/index.js'
+import { getDeviceInfo } from '@/config/api/device.js'
+import { getInUseOrder, getUnpaidOrder } from '@/config/api/order.js'
+
+const { t } = useI18n()
+
+// 当前选中的 Tab
+const currentTab = ref('available')
+
+// // Tab 与 API 状态的映射
+// const tabToStatusMap = {
+// 	available: 'unused',
+// 	used: 'used',
+// 	expired: 'expired'
+// }
+
+// 优惠券列表
+const couponList = ref([])
+
+// 过滤后的优惠券
+const filteredCoupons = computed(() => {
+	return couponList.value;
+})
+
+// 获取优惠券列表
+const getCouponList = async () => {
+	try {
+		// const apiStatus = tabToStatusMap[currentTab.value]
+		const res = await getUserCoupons('')
+
+		if (res.code === 200 && res.data) {
+			// 将后端数据转换为前端需要的格式
+			couponList.value = (res.data || []).map(item => {
+				// 判断优惠券类型：discount_coupon 折扣券，deduction_coupon 抵扣券
+				const isCashCoupon = item.couponType === 'deduction_coupon'
+
+				// 格式化使用条件
+				let condition = '无门槛'
+				if (item.usableCondition && item.usableCondition > 0) {
+					condition = `满${item.usableCondition}可用`
+				}
+
+				// 格式化有效期
+				let validity = ''
+				if (currentTab.value === 'used') {
+					// 已使用显示使用时间
+					validity = item.couponStartTime ? `使用时间 ${item.couponStartTime.split(' ')[0]}` : ''
+				} else if (item.couponEndTime) {
+					validity = `于 ${item.couponEndTime.split(' ')[0]} 过期`
+				}
+				console.log(item.status);
+
+				return {
+					id: item.id,
+					name: item.couponName || '优惠券',
+					type: isCashCoupon ? 'cash' : 'discount',
+					value: item.deductAmount ? parseFloat(item.deductAmount) : 0,
+					discount: item.discountRate ? parseFloat(item.discountRate) * 10 : null,
+					condition: condition,
+					validity: validity,
+					status: item.status,
+					positionName: item.positionName
+				}
+			})
+		} else {
+			couponList.value = []
+		}
+	} catch (error) {
+		console.error('获取优惠券列表失败:', error)
+		couponList.value = []
+		uni.showToast({
+			title: t('myCoupon.getListFailed'),
+			icon: 'none'
+		})
+	}
+}
+
+// 切换 Tab
+const switchTab = (tab) => {
+	currentTab.value = tab
+	getCouponList()
+}
+
+// 获取优惠券样式类名
+const getCouponClass = (status) => {
+	return status === 'unused' ? '' : 'disabled'
+}
+
+// 获取状态文本
+const getStatusText = (status) => {
+	const statusMap = {
+		'used': t('myCoupon.usedStatus'),
+		'expired': t('myCoupon.expiredStatus'),
+		'refunded':t('myCoupon.refundedStatus')
+	}
+	console.log("获取状态文本："+statusMap[status]);
+	return statusMap[status] || ''
+}
+
+// 获取空状态文本
+const getEmptyText = () => {
+	const textMap = {
+		'available': t('myCoupon.noAvailableCoupons'),
+		'used': t('myCoupon.noUsedCoupons'),
+		'expired': t('myCoupon.noExpiredCoupons')
+	}
+	return textMap[currentTab.value] || ''
+}
+
+// 使用优惠券
+const useCoupon = async (coupon) => {
+	try {
+		const scanResult = await new Promise((resolve, reject) => {
+			uni.scanCode({
+				success: resolve,
+				fail: reject
+			})
+		})
+
+		console.log('扫码结果:', scanResult);
+		let deviceNo;
+		// 兼容不同平台的扫码结果
+		if (scanResult.scanType === 'QR_CODE' || scanResult.scanType === 'qrCode') {
+			deviceNo = getQueryString(scanResult.result, 'deviceNo')
+		} else if (scanResult.path) {
+			deviceNo = getQueryString(scanResult.path, 'deviceNo')
+		} else {
+			deviceNo = scanResult.result
+		}
+
+		if (!deviceNo) {
+			uni.showToast({
+				title: t('home.invalidQRCode'),
+				icon: 'none'
+			})
+			return
+		}
+
+		uni.showLoading({
+			title: t('common.getting')
+		})
+
+		// 检查是否有使用中的订单
+		const inUseRes = await getInUseOrder()
+		if (inUseRes && inUseRes.code === 200 && inUseRes.data) {
+			uni.hideLoading()
+			const inUseOrder = inUseRes.data
+			uni.reLaunch({
+				url: `/pages/order/detail?orderId=${inUseOrder.orderId}&deviceId=${deviceNo || inUseOrder.deviceNo}`
+			})
+			return
+		}
+
+		// 检查是否有待支付订单
+		const orderRes = await getUnpaidOrder()
+		if (orderRes && orderRes.code === 200 && orderRes.data) {
+			uni.hideLoading()
+			const unpaidOrder = orderRes.data
+			uni.navigateTo({
+				url: `/pages/order/payment?orderId=${unpaidOrder.orderId}`
+			})
+			return
+		}
+
+		// 获取设备信息并跳转详情
+		const deviceInfoRes = await getDeviceInfo(deviceNo)
+		uni.hideLoading()
+
+		if (deviceInfoRes.code === 200 && deviceInfoRes.data && deviceInfoRes.data.device) {
+			const deviceInfo = deviceInfoRes.data.device
+			let url = `/pages/device/detail?deviceNo=${deviceNo}`
+			if (deviceInfo.feeConfig) {
+				url += `&feeConfig=${encodeURIComponent(deviceInfo.feeConfig)}`
+			}
+			uni.navigateTo({
+				url
+			})
+		} else {
+			uni.navigateTo({
+				url: `/pages/device/detail?deviceNo=${deviceNo}`
+			})
+		}
+	} catch (error) {
+		console.error('扫码处理失败:', error)
+		if (error && error.errMsg !== 'scanCode:fail cancel') {
+			uni.showToast({
+				title: t('home.scanFailed'),
+				icon: 'none'
+			})
+		}
+	}
+}
+
+// 去购买
+const goToBuy = () => {
+	uni.navigateTo({
+		url: '/pages/purchase/index?tab=coupon'
+	})
+}
+
+onMounted(() => {
+	uni.setNavigationBarTitle({
+		title: t('user.myCoupons')
+	})
+	getCouponList()
+})
+</script>
+
+<style lang="scss" scoped>
+// 优惠券样式变量封装
+$coupon-theme-color: #A16300;
+$coupon-divider-color: #B8741A;
+$coupon-bg-faded: #f5f5f5;
+$coupon-active-bg-start: #FFF4E6;
+$coupon-active-bg-end: #FFE8CC;
+$coupon-divider-left: 65%;
+$coupon-circle-radius: 16rpx;
+
+.my-coupon-page {
+	min-height: 100vh;
+	background-color: #f5f5f5;
+}
+
+/* Tab 切换 */
+.tab-container {
+	position: sticky;
+	top: 0;
+	display: flex;
+	background-color: #ffffff;
+	z-index: 999;
+	padding: 20rpx 0;
+}
+
+.tab-item {
+	flex: 1;
+	text-align: center;
+	padding: 20rpx 0;
+	position: relative;
+
+	.tab-text {
+		font-size: 28rpx;
+		color: #666;
+		font-weight: 500;
+	}
+
+	&.active {
+		.tab-text {
+			color: #333;
+			font-weight: 600;
+		}
+
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 60rpx;
+			height: 6rpx;
+			background-color: #FFA928;
+			border-radius: 3rpx;
+		}
+	}
+}
+
+.coupon-list {
+	padding: 20rpx;
+	display: flex;
+	flex-direction: column;
+	gap: 20rpx;
+}
+
+.coupon-item-wrapper {
+	position: relative;
+}
+
+.coupon-item {
+	background: #FFF4E3;
+	border-radius: 20rpx;
+	padding: 40rpx 30rpx;
+	display: flex;
+	align-items: stretch;
+	position: relative;
+	overflow: visible;
+	min-height: 180rpx;
+	box-sizing: border-box;
+	border: 2rpx solid transparent;
+	transition: all 0.3s;
+
+	&.selected {
+		border-color: $coupon-divider-color;
+		box-shadow: 0 4rpx 20rpx rgba(184, 116, 26, 0.2);
+
+		.coupon-circle-top,
+		.coupon-circle-bottom {
+			background-color: $coupon-active-bg-start;
+			border: 2rpx solid $coupon-divider-color;
+		}
+	}
+
+	&.disabled {
+		background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+		opacity: 0.6;
+
+		.coupon-value,
+		.coupon-condition,
+		.coupon-name {
+			color: #999;
+		}
+
+		.coupon-circle-top,
+		.coupon-circle-bottom {
+			background-color: #f5f5f5;
+		}
+	}
+}
+
+/* 虚线顶部圆形缺口 */
+.coupon-circle-top {
+	position: absolute;
+	left: $coupon-divider-left+4%;
+	top: -$coupon-circle-radius;
+	transform: translateX(-50%);
+	width: $coupon-circle-radius * 2;
+	height: $coupon-circle-radius * 2;
+	border-radius: 50%;
+	background-color: $coupon-bg-faded;
+	z-index: 10;
+}
+
+/* 虚线底部圆形缺口 */
+.coupon-circle-bottom {
+	position: absolute;
+	left: $coupon-divider-left+4%;
+	bottom: -$coupon-circle-radius;
+	transform: translateX(-50%);
+	width: $coupon-circle-radius * 2;
+	height: $coupon-circle-radius * 2;
+	border-radius: 50%;
+	background-color: $coupon-bg-faded;
+	z-index: 10;
+}
+
+.coupon-left {
+	flex: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 8rpx;
+}
+
+.coupon-value {
+	display: flex;
+	align-items: flex-end; // 单位在脚
+	color: $coupon-theme-color;
+	line-height: 1;
+	width:120rpx;
+}
+
+.coupon-amount {
+	font-size: 56rpx; // 值要大
+	font-weight: 700;
+}
+
+.coupon-unit {
+	font-size: 24rpx; // 单位小
+	font-weight: 500;
+	margin-bottom: 6rpx; // 微调单位垂直位置，使其更贴合“脚”
+	margin-left: 4rpx;
+	margin-right: 4rpx;
+}
+
+.coupon-condition {
+	font-size: 24rpx;
+	color: #000;
+	font-weight: 600;
+}
+
+.coupon-validity-left {
+	font-size: 22rpx;
+	color: #999;
+	margin-top: 8rpx;
+}
+
+.coupon-divider {
+	width: 2rpx;
+	height: 100%;
+	position: absolute;
+	left: $coupon-divider-left;
+	transform: translateX(-50%);
+	top: 0;
+	bottom: 0;
+	align-self: stretch;
+	background: repeating-linear-gradient(to bottom,
+			$coupon-divider-color 0rpx,
+			$coupon-divider-color 8rpx,
+			transparent 8rpx,
+			transparent 16rpx);
+	margin: 0 30rpx;
+}
+
+.coupon-right {
+	// flex: 1;
+	display: flex;
+	flex-direction: column;
+	gap: 8rpx;
+	align-items: center;
+	margin: auto 0;
+	width: 160rpx;
+	// align-content: center;
+	// transform: translateY(50%);
+}
+
+.coupon-name {
+	font-size: 28rpx;
+	font-weight: 600;
+	color: #333;
+}
+
+.coupon-validity {
+	font-size: 22rpx;
+	color: #999;
+}
+
+.use-btn {
+	// margin-top: 10rpx;
+	// padding: 12rpx 28rpx;
+	// background-color: #B8741A;
+	// border-radius: 40rpx;
+
+	.use-text {
+		font-size: 28rpx;
+		color: #A16300;
+		font-weight: 600;
+	}
+}
+
+.coupon-status {
+	margin-top: 10rpx;
+	font-size: 24rpx;
+	color: #999;
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 120rpx 0;
+
+	.empty-icon {
+		width: 200rpx;
+		height: 200rpx;
+		margin-bottom: 40rpx;
+		opacity: 0.5;
+	}
+
+	.empty-text {
+		font-size: 28rpx;
+		color: #999;
+		margin-bottom: 40rpx;
+	}
+
+	.buy-btn {
+		padding: 20rpx 60rpx;
+		background-color: #B8741A;
+		border-radius: 48rpx;
+
+		.buy-text {
+			font-size: 28rpx;
+			color: #ffffff;
+			font-weight: 500;
+		}
+	}
+}
+</style>
@@ -0,0 +1,867 @@
+<template>
+	<view class="my-page">
+		<view class="user-card" @click="navigateTo('/pages/userProfile/index')">
+			<view class="avatar-box">
+				<image class="avatar" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
+				<image v-else class="avatar" src="@/static/head.png" mode="aspectFill"></image>
+			</view>
+			<view class="user-text">
+				<view class="nickname">{{ userInfo.nickName || $t('user.clickToLogin') }}</view>
+				<view class="subtext">{{ userInfo.phone ? maskPhone(userInfo.phone) : $t('user.loginPrompt') }}</view>
+			</view>
+			<uv-icon type="right" size="16" color="#999"></uv-icon>
+		</view>
+
+
+		<!-- <view class="assets-card">
+			<view class="assets-left">
+				<view class="label">押金余额</view>
+				<view class="amount">¥{{ deposit }}</view>
+			</view>
+			<view class="assets-right" @click="handleWithdraw">
+				<text class="withdraw-btn">提现</text>
+			</view>
+		</view> -->
+
+		<view class="section">
+			<!-- 广告轮播 -->
+			<view class="banner-card" v-if="bannerImages.length > 0">
+				<swiper class="banner-swiper" :indicator-dots="bannerImages.length > 1"
+					:autoplay="bannerImages.length > 1" :circular="true" :interval="3000">
+					<swiper-item v-for="(image, index) in bannerImages" :key="index">
+						<image class="banner-image" :src="image" mode="aspectFill" @click="handleBannerClick(index)">
+						</image>
+					</swiper-item>
+				</swiper>
+			</view>
+			<!-- 默认图片（当没有广告时显示） -->
+			<view class="banner-card" v-else @click="navigateTo('/pages/join/index')">
+				<image class="banner-image" src="/static/userCenter_swiper.png" mode="aspectFill"></image>
+			</view>
+			<!-- <view class="section-title">常用服务</view> -->
+			<view class="list">
+				<view class="list-item" @click="handleQuickReturn">
+					<view class="left">
+						<image class="icon" src="/static/express_return.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.quickReturn') }}<text
+								style="font-size: 18rpx;">{{ $t('user.quickReturnDesc') }}</text></text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<view class="list-item" @click="navigateTo('/pages/expressReturn/index')" v-if="showMenuItem">
+					<view class="left">
+						<image class="icon" src="/static/express.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.expressReturn') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<view class="list-item" @click="navigateTo('/subPackages/order/index')">
+					<view class="left">
+						<image class="icon" src="/static/orderList.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.myOrders') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<view class="list-item" @click="navigateTo('/subPackages/user/my/card')">
+					<view class="left">
+						<image class="icon" src="/static/my_member.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.myCards') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<view class="list-item" @click="navigateTo('/subPackages/user/my/coupon')">
+					<view class="left">
+						<image class="icon" src="/static/my_coupon.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.myCoupons') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<view class="list-item" @click="navigateTo('/subPackages/service/help/index')">
+					<view class="left">
+						<image class="icon" src="/static/customer-service.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.customerService') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<view class="list-item" @click="navigateTo('/subPackages/service/feedback/index')">
+					<view class="left">
+						<image class="icon" src="/static/suggess.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.feedback') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<!-- <view class="list-item" @click="navigateTo('/pages/legal/agreement')">
+					<view class="left">
+						<image class="icon" src="/static/business-licence.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.businessLicense') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view> -->
+				<view class="list-item" @click="navigateTo('/subPackages/other/join/index')">
+					<view class="left">
+						<image class="icon" src="/static/peopleInWork.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.cooperation') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+				<view class="list-item" @click="navigateTo('/subPackages/user/setting/index')">
+					<view class="left">
+						<image class="icon" src="/static/setting.png" mode="aspectFit"></image>
+						<text class="title">{{ $t('user.settings') }}</text>
+					</view>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+			</view>
+		</view>
+
+		<view class="footer-agreements">
+			<view class="link-box">
+				<text class="link" @click="navigateTo('/subPackages/other/legal/agreement')">{{ $t('user.userAgreement') }}</text>
+				<text class="sep">｜</text>
+				<text class="link" @click="navigateTo('/subPackages/other/legal/privacy')">{{ $t('user.privacyPolicy') }}</text>
+			</view>
+			<view class="version">{{ $t('user.version') }}{{ appVersion }}</view>
+		</view>
+
+		<!-- 保留授权弹窗，暂不启用 -->
+		<!--
+		<u-popup ref="authPopup" mode="center" border-radius="15" width="600rpx" @open="onPopupOpen" @close="onPopupClose">
+			<view class="auth-popup">
+				<view class="auth-title">授权登录</view>
+				<view class="auth-desc">获取您的微信头像、昵称等公开信息</view>
+				<view class="auth-buttons">
+					<button class="cancel-btn" @click="closeAuthPopup">取消</button>
+					<button class="confirm-btn" @click="getUserProfile">确定</button>
+				</view>
+			</view>
+		</u-popup>
+		-->
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		onMounted
+	} from 'vue';
+	import {
+		onShow
+	} from '@dcloudio/uni-app';
+
+	import {
+		wxLogin,
+		getUserInfo
+	} from '@/util/index.js';
+	import {
+		uploadUserAvatar
+	} from '@/config/api/user.js'
+	import {
+		getCurrentAdvertisement
+	} from '@/config/api/system.js'
+	import {
+		getInUseOrder
+	} from '@/config/api/order.js'
+	import {
+		useI18n
+	} from '@/utils/i18n.js'
+	// 设置页执行退出登录，此页不再直接调用
+
+	const {
+		t
+	} = useI18n()
+
+	// 响应式状态
+	const userInfo = ref({});
+	const deposit = ref('0.00');
+	const openId = ref('');
+	const authPopup = ref(null); // u-popup 的引用
+	const isPopupVisible = ref(false);
+	const appVersion = ref('1.0.0');
+
+	const showMenuItem = ref(false)
+	const bannerImages = ref([]) // 广告图片列表
+	const bannerImageList = ref([]) // 完整的广告配置列表（包含链接信息）
+
+	// 获取广告图片
+	const getBannerImages = async () => {
+		try {
+			// 调用接口获取广告内容
+			const res = await getCurrentAdvertisement({
+				appPlatform: 'wechat', // 微信平台
+				appType: 'user', // 用户端
+				pictureLocation:'userProfile_banner'
+			})
+
+			if (res && res.code === 200 && res.data) {
+				// 使用 imageList 字段（包含图片和链接信息）
+				const imageList = res.data.imageList || []
+				if (imageList.length > 0) {
+					bannerImageList.value = imageList
+					// 提取图片URL用于展示
+					bannerImages.value = imageList.map(item => item.imageUrl)
+				}
+			} else {
+				console.warn('获取个人中心广告失败:', res?.msg || '未知错误')
+			}
+		} catch (error) {
+			console.error('获取个人中心广告失败:', error)
+		}
+	}
+
+	// 处理广告点击
+	const handleBannerClick = (index) => {
+		if (!bannerImageList.value || !bannerImageList.value[index]) {
+			return
+		}
+
+		const config = bannerImageList.value[index]
+
+		// 根据链接类型进行跳转
+		if (config.linkType === 'miniapp' && config.appId) {
+			// 跳转到外部小程序
+			// #ifdef MP-WEIXIN
+			uni.navigateToMiniProgram({
+				appId: config.appId,
+				path: config.linkUrl || '',
+				success: () => {},
+				fail: (err) => {
+					console.error('跳转小程序失败:', err)
+					uni.showToast({
+						title: t('common.loadFailed'),
+						icon: 'none'
+					})
+				}
+			})
+			// #endif
+			// #ifndef MP-WEIXIN
+			uni.showToast({
+				title: t('auth.pleaseUseInWechat'),
+				icon: 'none'
+			})
+			// #endif
+		} else if (config.linkType === 'external' && config.linkUrl) {
+			// 跳转到外部链接（H5页面）
+			uni.navigateTo({
+				url: `subPackages/other/webview/index?url=${encodeURIComponent(config.linkUrl)}`
+			})
+		} else if (config.linkType === 'internal' && config.linkUrl) {
+			// 跳转到内部页面
+			uni.navigateTo({
+				url: config.linkUrl
+			})
+		}
+	}
+
+	// 页面加载时初始化
+	onMounted(() => {
+		uni.setNavigationBarTitle({
+			title: t('user.personalCenter')
+		})
+		getInfo();
+		initVersion();
+		getBannerImages(); // 加载广告
+	});
+
+	// 页面显示时刷新用户信息
+	onShow(() => {
+		getInfo();
+		getBannerImages(); // 刷新广告
+	});
+
+	// 获取用户信息
+	const getInfo = async () => {
+		try {
+			const res = await getUserInfo();
+
+			if (res.code == 401 || res.code == 40101) {
+				redirectToLogin()
+				return
+			} else if (res.code == 200) {
+				// 保存openId
+				if (res.data.openId) {
+					openId.value = res.data.openId;
+					uni.setStorageSync('openId', res.data.openId);
+				}
+
+				// 更新用户信息
+				userInfo.value = {
+					nickName: res.data.nickname,
+					phone: res.data.phone,
+					avatar: res.data.iconUrl,
+					isAdmin: res.data.isAdmin
+				};
+
+				uni.setStorageSync('userInfo', userInfo.value);
+				deposit.value = res.data.balanceAmount || '0.00';
+			}
+		} catch (error) {
+			uni.showToast({
+				title: t('user.getUserInfoFailed'),
+				icon: 'none'
+			});
+		}
+	};
+
+	// 初始化应用版本号（多端兼容，取可用信息）
+	const initVersion = () => {
+		// #ifdef MP-WEIXIN
+		try {
+			const info = wx.getAccountInfoSync && wx.getAccountInfoSync();
+			if (info && info.miniProgram && info.miniProgram.version) {
+				appVersion.value = info.miniProgram.version;
+			}
+		} catch (e) {}
+		// #endif
+
+		// #ifdef APP-PLUS
+		try {
+			if (typeof plus !== 'undefined' && plus.runtime && plus.runtime.version) {
+				appVersion.value = plus.runtime.version;
+			}
+		} catch (e) {}
+		// #endif
+	};
+
+	const redirectToLogin = () => {
+		try {
+			const pages = getCurrentPages()
+			const current = pages && pages.length ? pages[pages.length - 1] : null
+			const route = current && current.route ? ('/' + current.route) : '/pages/index/index'
+			const query = current && current.options ? Object.keys(current.options).map(k =>
+				`${k}=${encodeURIComponent(current.options[k])}`).join('&') : ''
+			const redirect = encodeURIComponent(query ? `${route}?${query}` : route)
+			uni.reLaunch({
+				url: `/pages/login/index?redirect=${redirect}`
+			})
+		} catch (e) {
+			uni.reLaunch({
+				url: '/pages/login/index'
+			})
+		}
+	}
+
+	// 导航到指定页面
+	const navigateTo = (url) => {
+		uni.navigateTo({
+			url
+		});
+	};
+
+	// 处理快速归还
+	const handleQuickReturn = async () => {
+		try {
+			uni.showLoading({
+				title: t('common.loading')
+			});
+
+			// 获取使用中的订单
+			const res = await getInUseOrder();
+
+			uni.hideLoading();
+
+			if (res && res.code === 200 && res.data) {
+				const inUseOrder = res.data;
+				// 跳转到统一订单详情页面
+				uni.navigateTo({
+					url: `/pages/order/detail?orderId=${inUseOrder.orderId}&deviceId=${inUseOrder.deviceNo}`
+				});
+			} else {
+				uni.showToast({
+					title: t('order.noOrder'),
+					icon: 'none'
+				});
+			}
+		} catch (error) {
+			uni.showToast({
+				title: t('order.getOrderFailed'),
+				icon: 'none'
+			});
+		}
+	};
+
+	// 处理提现按钮点击
+	const handleWithdraw = () => {
+		navigateTo('/pages/deposit/index');
+	};
+
+	// 处理用户资料点击
+	const handleUserProfileClick = () => {
+		const token = uni.getStorageSync('token')
+		if (!token) {
+			redirectToLogin()
+			return
+		}
+		// #ifdef MP-WEIXIN
+		getUserProfile()
+		// #endif
+		// #ifndef MP-WEIXIN
+		uni.showToast({
+			title: t('auth.pleaseUseInWechat'),
+			icon: 'none'
+		})
+		// #endif
+	};
+
+	// 小程序原生选择头像回调（需基础库>=2.21.2）
+	const onChooseAvatar = async (e) => {
+		try {
+			const token = uni.getStorageSync('token')
+			if (!token) {
+				redirectToLogin()
+				return
+			}
+			const avatarLocalPath = e?.detail?.avatarUrl
+			if (!avatarLocalPath) {
+				uni.showToast({
+					title: t('user.noAvatar'),
+					icon: 'none'
+				})
+				return
+			}
+			uni.showLoading({
+				title: t('common.uploading'),
+				mask: true
+			})
+			const uploadRes = await uploadUserAvatar(avatarLocalPath)
+			const serverAvatar = uploadRes?.data?.url || uploadRes?.url || uploadRes?.data || ''
+			if (serverAvatar) {
+				userInfo.value = {
+					...userInfo.value,
+					avatar: serverAvatar
+				}
+				uni.setStorageSync('userInfo', userInfo.value)
+			}
+			uni.showToast({
+				title: t('user.avatarUpdated'),
+				icon: 'success'
+			})
+			await getInfo()
+		} catch (err) {
+			uni.showToast({
+				title: t('user.avatarUploadFailed'),
+				icon: 'none'
+			})
+		} finally {
+			uni.hideLoading()
+		}
+	}
+
+	// 打开授权弹窗
+	const openAuthPopup = () => {
+		if (authPopup.value) {
+			authPopup.value.open();
+			isPopupVisible.value = true;
+		}
+	};
+
+	// 弹窗打开事件处理
+	const onPopupOpen = () => {
+		isPopupVisible.value = true;
+		// 这里可以添加弹窗打开后的逻辑
+	};
+
+	// 弹窗关闭事件处理
+	const onPopupClose = () => {
+		isPopupVisible.value = false;
+		// 这里可以添加弹窗关闭后的逻辑
+	};
+
+	// 获取微信用户个人信息
+	const getUserProfile = () => {
+		// #ifdef MP-WEIXIN
+		uni.showLoading({
+			title: t('common.getting'),
+			mask: true
+		});
+
+		wx.getUserProfile({
+			desc: '用于完善会员资料',
+			success: (res) => {
+				console.log('获取用户信息成功:', res);
+				updateUserInfo(res.userInfo);
+				uploadAvatarAndRefresh(res.userInfo);
+			},
+			fail: (err) => {
+				console.error('获取用户信息失败:', err);
+				uni.showToast({
+					title: t('user.getUserInfoFailed'),
+					icon: 'none'
+				});
+			},
+			complete: () => {
+				uni.hideLoading();
+				closeAuthPopup();
+			}
+		});
+		// #endif
+
+		// #ifndef MP-WEIXIN
+		uni.showToast({
+			title: t('auth.pleaseUseInWechat'),
+			icon: 'none'
+		});
+		closeAuthPopup();
+		// #endif
+	};
+
+	// 更新用户信息
+	const updateUserInfo = async (wxUserInfo) => {
+		try {
+			// 更新本地用户信息
+			const updatedInfo = {
+				...userInfo.value,
+				nickName: wxUserInfo.nickName,
+				avatar: wxUserInfo.avatarUrl
+			};
+
+			userInfo.value = updatedInfo;
+			uni.setStorageSync('userInfo', updatedInfo);
+
+			// 这里可以添加调用后端API更新用户信息的代码
+			// const updateRes = await updateUserInfoApi({
+			//   openId: openId.value,
+			//   nickName: wxUserInfo.nickName,
+			//   avatarUrl: wxUserInfo.avatarUrl,
+			//   gender: wxUserInfo.gender
+			// });
+
+			uni.showToast({
+				title: t('user.updateSuccess'),
+				icon: 'success'
+			});
+
+			// 更新完成后重新获取用户信息
+			getInfo();
+		} catch (error) {
+			console.error('更新用户信息失败:', error);
+			uni.showToast({
+				title: t('user.updateFailed'),
+				icon: 'none'
+			});
+		}
+	};
+
+	// 下载并上传头像，更新用户信息
+	const uploadAvatarAndRefresh = async (wxUserInfo) => {
+		try {
+			const avatarUrl = wxUserInfo?.avatarUrl
+			if (!avatarUrl) {
+				uni.showToast({
+					title: t('user.noAvatarUrl'),
+					icon: 'none'
+				})
+				return
+			}
+			// 下载微信头像为本地临时文件
+			const tempFilePath = await new Promise((resolve, reject) => {
+				uni.downloadFile({
+					url: avatarUrl,
+					success: (res) => {
+						if (res.statusCode === 200 && res.tempFilePath) {
+							resolve(res.tempFilePath)
+							return
+						}
+						reject(new Error(t('user.avatarDownloadFailed')))
+					},
+					fail: reject
+				})
+			})
+			// 上传到后端
+			const uploadRes = await uploadUserAvatar(tempFilePath)
+			// 直接使用返回的头像地址（如果有），并刷新用户信息
+			const serverAvatar = uploadRes?.data?.url || uploadRes?.url || uploadRes?.data || ''
+			if (serverAvatar) {
+				userInfo.value = {
+					...userInfo.value,
+					avatar: serverAvatar
+				}
+				uni.setStorageSync('userInfo', userInfo.value)
+			}
+			uni.showToast({
+				title: t('user.avatarUpdated'),
+				icon: 'success'
+			})
+			await getInfo()
+		} catch (error) {
+			uni.showToast({
+				title: t('user.avatarUploadFailed'),
+				icon: 'none'
+			})
+		} finally {
+			uni.hideLoading()
+		}
+	}
+
+	// 关闭授权弹窗
+	const closeAuthPopup = () => {
+		if (authPopup.value) {
+			authPopup.value.close();
+			isPopupVisible.value = false;
+		}
+	};
+
+	// 关于我们
+	const handleAboutUs = () => {
+		uni.showToast({
+			title: t('help.functionDeveloping'),
+			icon: 'none'
+		});
+	};
+
+	// 隐私政策
+	const handlePrivacyPolicy = () => {
+		uni.showToast({
+			title: t('help.functionDeveloping'),
+			icon: 'none'
+		});
+	};
+
+	// 手机号掩码函数
+	function maskPhone(phone) {
+		if (!phone) return '';
+		// 只处理11位手机号
+		return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+	}
+
+	// 退出登录移动至设置页
+</script>
+
+<style lang="scss" scoped>
+	.my-page {
+		min-height: 100vh;
+		background-color: #ffffff;
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+		padding-bottom: env(safe-area-inset-bottom);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.user-card {
+		display: flex;
+		align-items: center;
+		padding: 24rpx 30rpx;
+
+		// background-color: #D1FFE1;
+		background: linear-gradient(180deg, #D1FFE1 0%, #ffffff 100%);
+		// border-bottom: 1rpx solid #f0f0f0;
+		// margin: 0 20rpx;
+	}
+
+	.banner-card {
+		margin: 20rpx 30rpx 0 30rpx;
+		background-color: #ffffff;
+		border-radius: 50rpx;
+		overflow: hidden;
+		border: 1rpx solid #f0f0f0;
+	}
+
+	.banner-swiper {
+		width: 100%;
+		height: 260rpx;
+	}
+
+	.banner-image {
+		width: 100%;
+		height: 260rpx;
+		border-radius: 50rpx;
+		display: block;
+	}
+
+	.avatar-box {
+		margin-right: 20rpx;
+		position: relative;
+	}
+
+	.avatar {
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 50rpx;
+		background-color: #f0f0f0;
+	}
+
+	/* 仅小程序端存在，此按钮覆盖在头像上捕获点击以触发选择头像 */
+	/* #ifdef MP-WEIXIN */
+	.avatar-choose-btn {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100rpx;
+		height: 100rpx;
+		border: none;
+		background: transparent;
+		padding: 0;
+		margin: 0;
+		opacity: 0;
+		/* 保持可点击但不可见 */
+	}
+
+	/* #endif */
+
+	.user-text {
+		flex: 1;
+	}
+
+	.nickname {
+		font-size: 32rpx;
+		color: #222222;
+		font-weight: 600;
+	}
+
+	.subtext {
+		margin-top: 6rpx;
+		font-size: 24rpx;
+		color: #999999;
+	}
+
+	.assets-card {
+		margin: 20rpx 0;
+		padding: 24rpx 30rpx;
+		background-color: #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-top: 1rpx solid #f0f0f0;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+
+	.assets-left .label {
+		font-size: 26rpx;
+		color: #666666;
+	}
+
+	.assets-left .amount {
+		margin-top: 8rpx;
+		font-size: 40rpx;
+		color: #e2231a;
+		font-weight: 600;
+	}
+
+	.withdraw-btn {
+		display: inline-block;
+		padding: 14rpx 28rpx;
+		color: #e2231a;
+		border: 1rpx solid #e2231a;
+		border-radius: 6rpx;
+		font-size: 26rpx;
+	}
+
+	.section {
+		margin-top: 20rpx;
+		margin: 0 20rpx 20rpx 20rpx;
+		background-color: #ffffff;
+		flex: 1;
+		// border-top: 1rpx solid #f0f0f0;
+		// border-bottom: 1rpx solid #f0f0f0;
+		border-radius: 20rpx;
+	}
+
+	.section-title {
+		padding: 20rpx 30rpx;
+		font-size: 26rpx;
+		color: #999999;
+	}
+
+	.list-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 30rpx;
+		border-top: 1rpx solid #f5f5f5;
+	}
+
+	.list-item:first-child {
+		border-top: none;
+	}
+
+	.left {
+		display: flex;
+		align-items: center;
+	}
+
+	.icon {
+		width: 40rpx;
+		height: 40rpx;
+		margin-right: 16rpx;
+	}
+
+	.title {
+		font-size: 30rpx;
+		color: #333333;
+	}
+
+	.footer-agreements {
+		margin: 40rpx 0 20rpx 0;
+		position: absolute;
+		bottom: 10rpx;
+		left: 0;
+		right: 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		color: #999999;
+		font-size: 22rpx;
+
+		.link-box {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	.footer-agreements .link {
+		color: #999999;
+	}
+
+	.footer-agreements .sep {
+		margin: 0 10rpx;
+		color: #c0c0c0;
+	}
+
+	.footer-agreements .version {
+		margin-top: 10rpx;
+		color: #c0c0c0;
+		font-size: 20rpx;
+	}
+
+	/* 保留弹窗样式（未启用） */
+	.auth-popup {
+		background-color: #ffffff;
+		width: 100%;
+		padding: 40rpx;
+		border-radius: 12rpx;
+	}
+
+	.auth-title {
+		font-size: 34rpx;
+		font-weight: 600;
+		color: #333333;
+		text-align: center;
+		margin-bottom: 20rpx;
+	}
+
+	.auth-desc {
+		font-size: 28rpx;
+		color: #666666;
+		text-align: center;
+		margin-bottom: 40rpx;
+	}
+
+	.auth-buttons {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.cancel-btn,
+	.confirm-btn {
+		width: 240rpx;
+		height: 80rpx;
+		line-height: 80rpx;
+		text-align: center;
+		border-radius: 40rpx;
+		font-size: 28rpx;
+	}
+</style>
@@ -0,0 +1,176 @@
+<template>
+	<view class="setting-page">
+		<view class="group">
+			<view class="item" @click="showLanguageSelector">
+				<text class="label">{{ $t('settings.language') }}</text>
+				<view class="right">
+					<text class="value">{{ currentLanguageText }}</text>
+					<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+				</view>
+			</view>
+		</view>
+		<view class="group">
+			<view class="item" @click="navigateTo('/subPackages/other/legal/agreement')">
+				<text class="label">{{ $t('user.userAgreement') }}</text>
+				<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+			</view>
+			<view class="item" @click="navigateTo('/subPackages/other/legal/privacy')">
+				<text class="label">{{ $t('user.privacyPolicy') }}</text>
+				<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+			</view>
+			<view class="item" @click="navigateTo('/subPackages/other/legal/terms')">
+				<text class="label">{{ $t('legal.termsAndConditions') }}</text>
+				<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+			</view>
+		</view>
+		<view class="group">
+			<view class="item" @click="handleLogout">
+				<text class="label">{{ $t('user.logout') }}</text>
+				<uv-icon name="arrow-right" size="16" color="#c8c8c8"></uv-icon>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, getCurrentInstance } from 'vue'
+import { userLogout } from '@/config/api/user.js'
+import { useI18n } from '@/utils/i18n.js'
+
+const { t } = useI18n()
+
+// 获取全局 i18n 实例
+const instance = getCurrentInstance()
+const globalI18n = instance?.appContext?.config?.globalProperties?.$i18n
+
+// 设置页面标题
+onMounted(() => {
+	uni.setNavigationBarTitle({
+		title: t('settings.title')
+	})
+})
+
+// 当前语言
+const currentLanguage = ref(uni.getStorageSync('language') || 'zh-CN')
+
+// 当前语言文本显示
+const currentLanguageText = computed(() => {
+	if (currentLanguage.value === 'zh-CN') {
+		return t('settings.chinese')
+	} else if (currentLanguage.value === 'id-ID') {
+		return t('settings.indonesian')
+	} else {
+		return t('settings.english')
+	}
+})
+
+const navigateTo = (url) => {
+	uni.navigateTo({ url })
+}
+
+// 显示语言选择器
+const showLanguageSelector = () => {
+	const languages = [
+		{ code: 'zh-CN', label: t('settings.chinese') },
+		{ code: 'en-US', label: t('settings.english') },
+		{ code: 'id-ID', label: t('settings.indonesian') }
+	]
+	
+	uni.showActionSheet({
+		itemList: languages.map(lang => lang.label),
+		success: (res) => {
+			const selectedLang = languages[res.tapIndex].code
+			if (selectedLang !== currentLanguage.value) {
+				// 1. 保存到缓存
+				uni.setStorageSync('language', selectedLang)
+				
+				// 2. 立即更新 i18n 实例（重要！）
+				if (globalI18n) {
+					globalI18n.locale = selectedLang
+				}
+				
+				// 3. 更新当前语言状态
+				currentLanguage.value = selectedLang
+				
+				// 4. 提示用户
+				uni.showToast({
+					title: t('settings.languageSwitched'),
+					icon: 'none',
+					duration: 800
+				})
+				
+				// 5. 延迟后重新加载应用（确保 i18n 更新已生效）
+				setTimeout(() => {
+					// 使用 reLaunch 完全重启应用
+					uni.reLaunch({
+						url: '/pages/index/index'
+					})
+				}, 800)
+			}
+		}
+	})
+}
+
+const handleLogout = async () => {
+	uni.showModal({
+		title: t('common.tips'),
+		content: t('user.confirmLogout'),
+		success: async (res) => {
+			if (res.confirm) {
+				const response = await userLogout();
+				if (response.code == 200) {
+					uni.showToast({ title: t('user.logoutSuccess'), icon: 'none' })
+					setTimeout(() => {
+						uni.removeStorageSync('token')
+						uni.removeStorageSync('userInfo')
+						uni.reLaunch({ url: '/subPackages/user/login/index' })
+					}, 1200)
+				}
+			}
+		}
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+	.setting-page {
+		min-height: 100vh;
+		background-color: #f6f6f6;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.group {
+		margin-top: 20rpx;
+		background-color: #ffffff;
+		border-top: 1rpx solid #f0f0f0;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+
+	.item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 30rpx;
+		border-top: 1rpx solid #f5f5f5;
+	}
+
+	.item:first-child {
+		border-top: none;
+	}
+
+	.label {
+		font-size: 30rpx;
+		color: #333333;
+	}
+
+	.right {
+		display: flex;
+		align-items: center;
+		gap: 8rpx;
+	}
+
+	.value {
+		font-size: 28rpx;
+		color: #999999;
+	}
+</style>
@@ -0,0 +1,240 @@
+<template>
+  <view class="container">
+    <!-- 用户信息卡片 -->
+    <view class="user-card">
+      <view class="avatar">
+        <image :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
+      </view>
+      <view class="user-info">
+        <text class="nickname">{{ userInfo.nickName || $t('user.notLoggedIn') }}</text>
+        <text class="phone">{{ userInfo.phone || $t('user.phoneNotBound') }}</text>
+      </view>
+    </view>
+
+    <!-- 余额卡片 -->
+    <view class="balance-card">
+      <view class="balance-title">{{ $t('userProfile.balance') }}</view>
+      <view class="balance-amount">￥{{ userInfo.balanceAmount || '0.00' }}</view>
+      <view class="balance-desc">{{ $t('user.balanceDesc') }}</view>
+    </view>
+
+    <!-- 功能菜单 -->
+    <view class="menu-list">
+      <view class="menu-item" @click="navigateTo('/pages/order/index')">
+        <text class="menu-icon">📋</text>
+        <text class="menu-text">{{ $t('user.myOrders') }}</text>
+        <text class="menu-arrow">></text>
+      </view>
+      <view class="menu-item" @click="navigateTo('/pages/feedback/index')">
+        <text class="menu-icon">💬</text>
+        <text class="menu-text">{{ $t('user.feedback') }}</text>
+        <text class="menu-arrow">></text>
+      </view>
+      <view class="menu-item" @click="navigateTo('/pages/help/index')">
+        <text class="menu-icon">ℹ️</text>
+        <text class="menu-text">{{ $t('help.title') }}</text>
+        <text class="menu-arrow">></text>
+      </view>
+    </view>
+
+    <!-- 退出登录按钮 -->
+    <view class="logout-btn" @click="handleLogout" v-if="isLogin">
+      <text>{{ $t('user.logout') }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getUserInfo } from '@/util/index.js'
+import { URL } from '@/config/url'
+
+export default {
+  data() {
+    return {
+      userInfo: {},
+      isLogin: false
+    }
+  },
+  onLoad() {
+    // 设置页面标题
+    uni.setNavigationBarTitle({
+      title: this.$t('user.personalCenter')
+    })
+  },
+  onShow() {
+    this.loadUserInfo()
+  },
+  methods: {
+    async loadUserInfo() {
+      try {
+        const res = await getUserInfo()
+        if (res.code === 401 || res.code === 40101) {
+          // 无提示跳转至登录
+          try {
+            const pages = getCurrentPages()
+            const current = pages && pages.length ? pages[pages.length - 1] : null
+            const route = current && current.route ? ('/' + current.route) : '/pages/index/index'
+            const query = current && current.options ? Object.keys(current.options).map(k => `${k}=${encodeURIComponent(current.options[k])}`).join('&') : ''
+            const redirect = encodeURIComponent(query ? `${route}?${query}` : route)
+            uni.reLaunch({ url: `/pages/login/index?redirect=${redirect}` })
+          } catch (e) {
+            uni.reLaunch({ url: '/pages/login/index' })
+          }
+        } else if (res.code === 200) {
+          this.userInfo = res.data
+          this.isLogin = true
+        } else {
+          this.isLogin = false
+        }
+      } catch (error) {
+        console.error('加载用户信息失败:', error)
+        this.isLogin = false
+      }
+    },
+    navigateTo(url) {
+      uni.navigateTo({ url })
+    },
+    handleLogout() {
+      uni.showModal({
+        title: this.$t('common.tips'),
+        content: this.$t('user.confirmLogout'),
+        success: (res) => {
+          if (res.confirm) {
+            uni.removeStorageSync('token')
+            uni.removeStorageSync('userInfo')
+            this.isLogin = false
+            uni.showToast({
+              title: this.$t('user.logoutSuccess'),
+              icon: 'success'
+            })
+            setTimeout(() => {
+              uni.redirectTo({
+                url: '/pages/login/index'
+              })
+            }, 500)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.container {
+  padding: 20rpx;
+  background-color: #f5f5f5;
+  min-height: 100vh;
+}
+
+.user-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  display: flex;
+  align-items: center;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.avatar {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 60rpx;
+  overflow: hidden;
+  margin-right: 30rpx;
+}
+
+.avatar image {
+  width: 100%;
+  height: 100%;
+}
+
+.user-info {
+  flex: 1;
+}
+
+.nickname {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+  display: block;
+}
+
+.phone {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.balance-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.balance-title {
+  font-size: 28rpx;
+  color: #666;
+  margin-bottom: 20rpx;
+}
+
+.balance-amount {
+  font-size: 48rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10rpx;
+}
+
+.balance-desc {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.menu-list {
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.menu-item:last-child {
+  border-bottom: none;
+}
+
+.menu-icon {
+  font-size: 36rpx;
+  margin-right: 20rpx;
+}
+
+.menu-text {
+  flex: 1;
+  font-size: 28rpx;
+  color: #333;
+}
+
+.menu-arrow {
+  font-size: 28rpx;
+  color: #999;
+}
+
+.logout-btn {
+  margin-top: 40rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  text-align: center;
+  color: #ff4d4f;
+  font-size: 28rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
+</style> 
@@ -0,0 +1,413 @@
+<template>
+	<view class="profile-page">
+		<view class="avatar-section">
+			<view class="avatar-container">
+				<image class="avatar" v-if="userInfo.avatar" :src="userInfo.avatar" mode="aspectFill"></image>
+				<image v-else class="avatar" src="@/static/head.png" mode="aspectFill"></image>
+				<!-- 覆盖在头像上的微信选择头像授权按钮，仅小程序生效 -->
+				<!-- #ifdef MP-WEIXIN -->
+				<button class="avatar-choose-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"></button>
+				<!-- #endif -->
+			</view>
+		<view class="avatar-tip">{{ $t('userProfile.clickToChange') }}</view>
+	</view>
+
+	<view class="form-section">
+		<!-- 昵称编辑区域 -->
+		<view class="form-item nickname-item" :class="{ editing: isEditingNickname }">
+			<view class="label">{{ $t('userProfile.nickname') }}</view>
+			<view class="value" v-if="!isEditingNickname" @click="startEditNickname">
+				<text class="value-text">{{ userInfo.nickName || $t('userProfile.notSet') }}</text>
+				<uv-icon name="edit-pen" size="16" color="#999999"></uv-icon>
+			</view>
+		</view>
+		
+		<!-- 昵称编辑输入框（展开状态） -->
+		<view class="nickname-edit-area" v-if="isEditingNickname">
+			<input 
+				class="nickname-input" 
+				v-model="newNickname" 
+				:placeholder="$t('userProfile.enterNickname')" 
+				maxlength="20"
+				:focus="true"
+			/>
+			<view class="edit-buttons">
+				<button class="cancel-btn" @click="cancelEditNickname">{{ $t('common.cancel') }}</button>
+				<button class="save-btn" @click="saveNickname">{{ $t('common.save') }}</button>
+			</view>
+		</view>
+
+		<view class="form-item">
+			<view class="label">{{ $t('userProfile.phone') }}</view>
+			<view class="value">
+				<text class="value-text">{{ userInfo.phone ? maskPhone(userInfo.phone) : $t('userProfile.notBound') }}</text>
+			</view>
+		</view>
+
+<!-- 		<view class="form-item" v-if="userInfo.balanceAmount !== undefined">
+			<view class="label">{{ $t('userProfile.balance') }}</view>
+			<view class="value">
+				<text class="value-text amount">¥{{ userInfo.balanceAmount || '0.00' }}</text>
+			</view>
+		</view> -->
+	</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted } from 'vue';
+import { getMyIndexInfo, uploadUserAvatar, updateUserInfo } from '@/config/api/user.js';
+import { useI18n } from '@/utils/i18n.js'
+
+const { t } = useI18n()
+
+// 响应式状态
+const userInfo = ref({
+	nickName: '',
+	phone: '',
+	avatar: '',
+	balanceAmount: '0.00'
+});
+
+const newNickname = ref('');
+const isEditingNickname = ref(false);
+
+// 页面加载时初始化
+onMounted(() => {
+	uni.setNavigationBarTitle({
+		title: t('userProfile.title')
+	})
+	loadUserInfo();
+});
+
+// 获取用户信息
+const loadUserInfo = async () => {
+	try {
+		const res = await getMyIndexInfo();
+		console.log('User info response:', res);
+
+		if (res.code == 401 || res.code == 40101) {
+			redirectToLogin();
+			return;
+		} else if (res.code == 200) {
+			userInfo.value = {
+				nickName: res.data.nickname,
+				phone: res.data.phone,
+				avatar: res.data.iconUrl,
+				balanceAmount: res.data.balanceAmount || '0.00',
+				isAdmin: res.data.isAdmin
+			};
+			uni.setStorageSync('userInfo', userInfo.value);
+		}
+	} catch (error) {
+		console.error('获取用户信息失败:', error);
+		uni.showToast({
+			title: t('user.getUserInfoFailed'),
+			icon: 'none'
+		});
+	}
+};
+
+// 跳转登录
+const redirectToLogin = () => {
+	try {
+		const pages = getCurrentPages();
+		const current = pages && pages.length ? pages[pages.length - 1] : null;
+		const route = current && current.route ? ('/' + current.route) : '/pages/index/index';
+		const query = current && current.options ? Object.keys(current.options).map(k =>
+			`${k}=${encodeURIComponent(current.options[k])}`).join('&') : '';
+		const redirect = encodeURIComponent(query ? `${route}?${query}` : route);
+		uni.reLaunch({
+			url: `/pages/login/index?redirect=${redirect}`
+		});
+	} catch (e) {
+		uni.reLaunch({
+			url: '/pages/login/index'
+		});
+	}
+};
+
+// 小程序原生选择头像回调
+const onChooseAvatar = async (e) => {
+	try {
+		const token = uni.getStorageSync('token');
+		if (!token) {
+			redirectToLogin();
+			return;
+		}
+		const avatarLocalPath = e?.detail?.avatarUrl;
+		if (!avatarLocalPath) {
+			uni.showToast({
+				title: t('user.noAvatar'),
+				icon: 'none'
+			});
+			return;
+		}
+		uni.showLoading({
+			title: t('userProfile.uploading'),
+			mask: true
+		});
+		const uploadRes = await uploadUserAvatar(avatarLocalPath);
+		const serverAvatar = uploadRes?.data?.url || uploadRes?.url || uploadRes?.data || '';
+		if (serverAvatar) {
+			userInfo.value = {
+				...userInfo.value,
+				avatar: serverAvatar
+			};
+			uni.setStorageSync('userInfo', userInfo.value);
+		}
+		uni.showToast({
+			title: t('user.avatarUpdated'),
+			icon: 'success'
+		});
+		await loadUserInfo();
+	} catch (err) {
+		console.error('选择/上传头像失败:', err);
+		uni.showToast({
+			title: t('user.avatarUploadFailed'),
+			icon: 'none'
+		});
+	} finally {
+		uni.hideLoading();
+	}
+};
+
+// 开始编辑昵称
+const startEditNickname = () => {
+	newNickname.value = userInfo.value.nickName || '';
+	isEditingNickname.value = true;
+};
+
+// 取消编辑昵称
+const cancelEditNickname = () => {
+	isEditingNickname.value = false;
+	newNickname.value = '';
+};
+
+// 保存昵称
+const saveNickname = async () => {
+	if (!newNickname.value || !newNickname.value.trim()) {
+		uni.showToast({
+			title: t('userProfile.nicknameRequired'),
+			icon: 'none'
+		});
+		return;
+	}
+
+	try {
+		uni.showLoading({
+			title: t('userProfile.saving'),
+			mask: true
+		});
+
+		// 先获取最新的用户信息，确保数据是最新的
+		const latestUserInfo = await getMyIndexInfo();
+		
+		if (latestUserInfo.code !== 200) {
+			throw new Error('获取用户信息失败');
+		}
+
+		// 使用最新的服务器数据，只修改昵称字段
+		const updateData = {
+			nickname: newNickname.value.trim(),
+			phone: latestUserInfo.data.phone,
+			iconUrl: latestUserInfo.data.iconUrl,
+			// 保留其他可能的字段
+			...latestUserInfo.data
+		};
+		
+		// 确保昵称使用新值
+		updateData.nickname = newNickname.value.trim();
+
+		// 调用后端接口更新用户信息
+		const res = await updateUserInfo(updateData);
+		
+		if (res.code === 200) {
+			// 更新成功后重新获取用户信息，确保数据同步
+			await loadUserInfo();
+			
+			uni.hideLoading();
+			uni.showToast({
+				title: t('userProfile.nicknameUpdated'),
+				icon: 'success'
+			});
+			isEditingNickname.value = false;
+		} else {
+			throw new Error(res.message || t('userProfile.updateFailed'));
+		}
+
+	} catch (error) {
+		console.error('修改昵称失败:', error);
+		uni.hideLoading();
+		uni.showToast({
+			title: error.message || t('userProfile.updateFailed'),
+			icon: 'none'
+		});
+	}
+};
+
+// 手机号掩码函数
+function maskPhone(phone) {
+	if (!phone) return '';
+	return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
+}
+</script>
+
+<style lang="scss" scoped>
+.profile-page {
+	min-height: 100vh;
+	background-color: #f5f5f5;
+	padding-bottom: env(safe-area-inset-bottom);
+}
+
+.avatar-section {
+	background: linear-gradient(180deg, #D1FFE1 0%, #ffffff 100%);
+	padding: 60rpx 0 40rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.avatar-container {
+	position: relative;
+	margin-bottom: 20rpx;
+}
+
+.avatar {
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 80rpx;
+	background-color: #f0f0f0;
+	display: block;
+}
+
+/* 仅小程序端存在，此按钮覆盖在头像上捕获点击以触发选择头像 */
+/* #ifdef MP-WEIXIN */
+.avatar-choose-btn {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 160rpx;
+	height: 160rpx;
+	border: none;
+	background: transparent;
+	padding: 0;
+	margin: 0;
+	opacity: 0;
+	border-radius: 80rpx;
+}
+/* #endif */
+
+.avatar-tip {
+	font-size: 24rpx;
+	color: #999999;
+}
+
+.form-section {
+	margin: 20rpx 30rpx;
+	background-color: #ffffff;
+	border-radius: 20rpx;
+	overflow: hidden;
+}
+
+.form-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 32rpx 30rpx;
+	border-bottom: 1rpx solid #f5f5f5;
+	transition: all 0.3s ease;
+}
+
+.form-item:last-child {
+	border-bottom: none;
+}
+
+.form-item.nickname-item.editing {
+	border-bottom: none;
+	padding-bottom: 20rpx;
+}
+
+.label {
+	font-size: 30rpx;
+	color: #333333;
+	font-weight: 500;
+}
+
+.value {
+	display: flex;
+	align-items: center;
+}
+
+.value-text {
+	font-size: 28rpx;
+	color: #666666;
+	margin-right: 10rpx;
+}
+
+.value-text.amount {
+	color: #e2231a;
+	font-weight: 600;
+	font-size: 32rpx;
+}
+
+/* 昵称编辑区域样式 */
+.nickname-edit-area {
+	padding: 0 30rpx 30rpx 30rpx;
+	border-bottom: 1rpx solid #f5f5f5;
+	animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+	from {
+		opacity: 0;
+		transform: translateY(-20rpx);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.nickname-input {
+	width: 100%;
+	height: 80rpx;
+	border: 1rpx solid #e0e0e0;
+	border-radius: 10rpx;
+	padding: 0 20rpx;
+	font-size: 28rpx;
+	color: #333333;
+	box-sizing: border-box;
+	margin-bottom: 20rpx;
+	background-color: #fafafa;
+}
+
+.edit-buttons {
+	display: flex;
+	justify-content: flex-end;
+	gap: 20rpx;
+}
+
+.cancel-btn,
+.save-btn {
+	padding: 0 40rpx;
+	height: 64rpx;
+	line-height: 64rpx;
+	text-align: center;
+	border-radius: 32rpx;
+	font-size: 28rpx;
+	border: none;
+	min-width: 120rpx;
+}
+
+.cancel-btn {
+	background-color: #f5f5f5;
+	color: #666666;
+}
+
+.save-btn {
+	background: linear-gradient(135deg, #42d392 0%, #28c76f 100%);
+	color: #ffffff;
+}
+</style>
+