From 0f2752867c07ad12dbf8d20bb0af06b2693a44fc Mon Sep 17 00:00:00 2001
From: Kroytz <neko_chocola@qq.com>
Date: Fri, 24 Jul 2026 11:57:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor(uniapp):=20=E9=87=8D=E6=9E=84"?=
 =?UTF-8?q?=E6=88=91=E7=9A=84"=E9=A1=B5=E4=BF=A1=E6=81=AF=E5=B1=82?=
 =?UTF-8?q?=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yshop-drink-uniapp-vue3/pages.json          |   2 +
 yshop-drink-uniapp-vue3/pages/mine/mine.vue | 441 +++++++++++---------
 2 files changed, 245 insertions(+), 198 deletions(-)

diff --git a/yshop-drink-uniapp-vue3/pages.json b/yshop-drink-uniapp-vue3/pages.json
index 8131e3a..ab5398d 100644
--- a/yshop-drink-uniapp-vue3/pages.json
+++ b/yshop-drink-uniapp-vue3/pages.json
@@ -32,6 +32,8 @@
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "我的",
+                "navigationBarBackgroundColor": "#fff3e6",
+                "backgroundColor": "#fff3e6",
                 "enablePullDownRefresh": true
             }
             
diff --git a/yshop-drink-uniapp-vue3/pages/mine/mine.vue b/yshop-drink-uniapp-vue3/pages/mine/mine.vue
index 95b7f61..ab04d6e 100644
--- a/yshop-drink-uniapp-vue3/pages/mine/mine.vue
+++ b/yshop-drink-uniapp-vue3/pages/mine/mine.vue
@@ -1,160 +1,140 @@
 <template>
-	<layout>
+	<view class="mine-page">
 		<uv-navbar
-		  :fixed="false"
-		  :title="title"
-		  left-arrow
-		  @leftClick="$onClickLeft"
+			:fixed="false"
+			title="我的"
+			bgColor="transparent"
+			leftIcon=""
 		/>
-		<view class="container mine-page">
-			<view class="mine-page__user-section">
-				<!-- user box begin -->
-				<view class="mine-user d-flex flex-column bg-white">
 
-					<view class="mine-user__header d-flex align-items-center">
-						<view class="mine-user__avatar rounded-circle">
-							<image :src="isLogin ? member.avatar ? member.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'"></image>
-						</view>
-						<view class="mine-user__info d-flex flex-column flex-fill overflow-hidden">
-							<view v-if="isLogin"
-								class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
-								@tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
-								<view class="text-truncate">{{ member.nickname }}</view>
-								<view class="iconfont iconarrow-right line-height-100"></view>
-							</view>
-							<view v-else class="font-size-lg font-weight-bold" @tap="login">游客</view>
-						</view>
-					</view>
-					<!-- user grid begin -->
-					<view class="mine-user__stats w-100 d-flex align-items-center just-content-center">
-						<view class="mine-user__stat" @tap="serv({type:'pages',pages:'/pages/components/pages/coupons/coupons'})">
-							<view class="value font-size-extra-lg font-weight-bold text-color-base">
-								{{ isLogin ? member.couponCount : 0}}
-							</view>
-							<view class="font-size-sm text-color-assist">优惠券</view>
-						</view>
-						<view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=1'})">
-							<view class="value font-size-extra-lg font-weight-bold text-color-base">
-								{{ isLogin ? member.integral : 0 }}
-							</view>
-							<view class="font-size-sm text-color-assist">积分</view>
-						</view>
-						<view class="mine-user__stat">
-							<view class="value font-size-extra-lg font-weight-bold text-color-base">
-								{{ isLogin ? member.nowMoney : 0 }}
-							</view>
-							<view class="font-size-sm text-color-assist">余额</view>
-						</view>
-						<view class="mine-user__stat" @tap="serv({type:'pages', pages: '/pages/components/pages/balance/bill?cate=0'})">
-							<view class="value font-size-extra-lg font-weight-bold text-color-base">
-								{{ isLogin ? member.sumMoney : 0 }}
-							</view>
-							<view class="font-size-sm text-color-assist">历史消费</view>
-						</view>
-					</view>
-					<!-- user grid end -->
+		<!-- 用户卡片 -->
+		<view class="mine-user">
+			<view
+				class="mine-user__header"
+				@tap="isLogin ? serv({ type: 'pages', pages: '/pages/components/pages/mine/userinfo' }) : login()"
+			>
+				<view class="mine-user__avatar">
+					<image
+						:src="avatarSrc"
+						mode="aspectFill"
+					/>
 				</view>
-				<!-- user box end -->
-
+				<view class="mine-user__info">
+					<template v-if="isLogin">
+						<view class="mine-user__name">{{ member.nickname || '用户' }}</view>
+						<view class="mine-user__hint">个人资料</view>
+					</template>
+					<template v-else>
+						<view class="mine-user__name">点击登录</view>
+						<view class="mine-user__hint">登录后同步优惠券与积分</view>
+					</template>
+				</view>
+				<uv-icon name="arrow-right" size="14" color="#C4B5A5" />
 			</view>
-			<!-- service box begin -->
-			<view class="mine-service">
-				<view class="mine-service__title font-size-lg text-color-base font-weight-bold">我的服务</view>
-				<view class="u-m-t-20">
-					<uv-cell-group>
-						<block v-for="(item, index) in services" :key='index'>
-							<uv-cell :title="item.name" v-if="item.type == 'contact'" :isLink="true">
-								<template #icon>
-									<image :src="item.image" class="mine-service__icon mr-1"></image>
-								</template>
-							</uv-cell>
-							<uv-cell :isLink="true" :title="item.name" v-else-if="item.type == 'call'" v-on:click="makePhoneCall(item.phone)">
-								<template #icon>
-									<image :src="item.image" class="mine-service__icon mr-1"></image>
-								</template>
-							</uv-cell>
-							<uv-cell :isLink="true" :title="item.name" v-else @tap="serv(item)">
-								<template #icon>
-									<image :src="item.image" class="mine-service__icon mr-1"></image>
-								</template>
-							</uv-cell>
-						</block>
-					</uv-cell-group>
+
+			<view class="mine-user__stats">
+				<view
+					class="mine-user__stat"
+					@tap="serv({ type: 'pages', pages: '/pages/components/pages/coupons/coupons' })"
+				>
+					<view class="mine-user__stat-value">{{ isLogin ? (member.couponCount || 0) : 0 }}</view>
+					<view class="mine-user__stat-label">优惠券</view>
+				</view>
+				<view
+					class="mine-user__stat"
+					@tap="serv({ type: 'pages', pages: '/pages/components/pages/balance/bill?cate=1' })"
+				>
+					<view class="mine-user__stat-value">{{ isLogin ? (member.integral || 0) : 0 }}</view>
+					<view class="mine-user__stat-label">积分</view>
+				</view>
+				<view class="mine-user__stat">
+					<view class="mine-user__stat-value">{{ isLogin ? (member.nowMoney || 0) : 0 }}</view>
+					<view class="mine-user__stat-label">余额</view>
+				</view>
+				<view
+					class="mine-user__stat"
+					@tap="serv({ type: 'pages', pages: '/pages/components/pages/balance/bill?cate=0' })"
+				>
+					<view class="mine-user__stat-value">{{ isLogin ? (member.sumMoney || 0) : 0 }}</view>
+					<view class="mine-user__stat-label">历史消费</view>
 				</view>
 			</view>
 		</view>
-	</layout>
+
+		<!-- 我的服务 -->
+		<view class="mine-service" v-if="services.length">
+			<view class="mine-service__title">我的服务</view>
+			<view class="mine-service__list">
+				<view
+					v-for="(item, index) in services"
+					:key="index"
+					class="mine-service__item"
+					@tap="onServiceTap(item)"
+				>
+					<image
+						v-if="item.image"
+						:src="item.image"
+						class="mine-service__icon"
+						mode="aspectFit"
+					/>
+					<view v-else class="mine-service__icon mine-service__icon--placeholder">
+						<uv-icon name="setting" size="18" color="#F28C38" />
+					</view>
+					<text class="mine-service__name">{{ item.name }}</text>
+					<uv-icon name="arrow-right" size="12" color="#C4B5A5" />
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script setup>
-import {
-  ref,
-  computed
-} from 'vue'
+import { ref, computed } from 'vue'
 import { useMainStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
-import { onLoad,onShow} from '@dcloudio/uni-app'
-import { formatDateTime,kmUnit } from '@/utils/util'
-import {
-  userGetUserInfo,
-  mineService
-} from '@/api/user'
-const main = useMainStore()
-const { member,isLogin } = storeToRefs(main)
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { userGetUserInfo, mineService } from '@/api/user'
 
-const title = ref('个人中心')
+const main = useMainStore()
+const { member, isLogin } = storeToRefs(main)
 const services = ref([])
 
-const growthValue = computed(() => { 
-	if (!isLogin.value) return 0
-	const {
-		currentValue,
-		needValue
-	} = member.value
-	return currentValue / (currentValue + needValue) * 100
+const avatarSrc = computed(() => {
+	if (isLogin.value && member.value?.avatar) return member.value.avatar
+	return '/static/images/mine/default.png'
 })
 
 onLoad(() => {
-	getServices();
-})	
-onShow(() => {
-	getUserInfo();
+	getServices()
 })
 
+onShow(() => {
+	getUserInfo()
+})
 
-const getUserInfo = async() => {
-	if (isLogin.value) {
-		let data = await userGetUserInfo();
-		if (data) {
-			main.SET_MEMBER(data);
-		}
-	}
-}
-const getServices = async() => {
-	let data = await mineService();
+const getUserInfo = async () => {
+	if (!isLogin.value) return
+	const data = await userGetUserInfo()
 	if (data) {
-		services.value = data;
+		main.SET_MEMBER(data)
 	}
 }
+
+const getServices = async () => {
+	const data = await mineService()
+	if (data) {
+		services.value = data
+	}
+}
+
 const makePhoneCall = (phoneNumber) => {
-	uni.makePhoneCall({
-		phoneNumber: phoneNumber,
-	})
+	uni.makePhoneCall({ phoneNumber })
 }
+
 const login = () => {
-	uni.navigateTo({
-		url: '/pages/components/pages/login/login'
-	})
-}
-const packages = () => {
-	if (!isLogin.value) {
-		login()
-		return
-	}
-	uni.navigateTo({
-		url: '/pages/components/pages/packages/index'
-	})
+	uni.navigateTo({ url: '/pages/components/pages/login/login' })
 }
+
 const serv = (item) => {
 	switch (item.type) {
 		case 'pages':
@@ -162,52 +142,45 @@ const serv = (item) => {
 				login()
 				return
 			}
-			uni.navigateTo({
-				url: item.pages
-			})
-			break;
+			uni.navigateTo({ url: item.pages })
+			break
 		case 'miniprogram':
-			uni.navigateToMiniProgram({
-				appId: item.app_id
-			})
-			break;
+			uni.navigateToMiniProgram({ appId: item.app_id })
+			break
 		case 'menu':
 			uni.navigateTo({
 				url: '/pages/components/pages/mine/service?id=' + item.id + '&name=' + item.name
 			})
-			break;
+			break
 		case 'content':
 			uni.navigateTo({
 				url: '/pages/components/pages/mine/content?id=' + item.id + '&name=' + item.name
 			})
-			break;
+			break
 	}
 }
 
-
-
+const onServiceTap = (item) => {
+	if (item.type === 'call') {
+		makePhoneCall(item.phone)
+		return
+	}
+	if (item.type === 'contact') {
+		// 与原 uv-cell contact 项一致：仅展示，无额外跳转
+		return
+	}
+	serv(item)
+}
 </script>
 
 <style lang="scss" scoped>
-// 个人中心页局部 token（与 uni.scss 全局变量配合）
-$mine-section-padding-x: $spacing-row-lg;
-$mine-user-box-radius: $border-radius-lg;
-$mine-user-box-margin-top: 70rpx;
-$mine-user-box-margin-bottom: $spacing-row-lg;
-$mine-avatar-size: 160rpx;
-$mine-avatar-image-size: 140rpx;
-$mine-avatar-offset-top: -35rpx;
-$mine-avatar-margin-x: 35rpx;
-$mine-avatar-radius: 20rpx;
-$mine-avatar-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
-$mine-stat-width: 25%;
-$mine-stat-padding: $spacing-row-lg;
-$mine-stat-value-gap: $spacing-row-base;
-$mine-info-margin-top: $spacing-row-base;
-$mine-service-padding-y: 32rpx;
-$mine-service-padding-bottom: 10rpx;
-$mine-service-icon-size: $img-size-sm;
-$mine-service-title-gap: $spacing-row-base;
+$bg-top: #fff3e6;
+$bg-mid: #fff8f0;
+$bg-bottom: #ffffff;
+$accent: #f28c38;
+$text-main: #2b2b2b;
+$text-sub: #9a9590;
+$card-radius: 24rpx;
 
 /* #ifdef H5 */
 page {
@@ -217,76 +190,148 @@ page {
 /* #endif */
 
 .mine-page {
-	--mine-avatar-size: #{$mine-avatar-size};
-	--mine-avatar-image-size: #{$mine-avatar-image-size};
-	--mine-service-icon-size: #{$mine-service-icon-size};
-
-	&__user-section {
-		padding: 0 $mine-section-padding-x;
-	}
+	min-height: 100vh;
+	padding: 0 24rpx 40rpx;
+	box-sizing: border-box;
+	background: linear-gradient(180deg, $bg-top 0%, $bg-mid 42%, $bg-bottom 100%);
 }
 
 .mine-user {
-	position: relative;
-	margin-top: $mine-user-box-margin-top;
-	margin-bottom: $mine-user-box-margin-bottom;
-	border-radius: $mine-user-box-radius;
-	box-shadow: $box-shadow;
+	margin-bottom: 24rpx;
+	padding: 28rpx 24rpx 8rpx;
+	border-radius: $card-radius;
+	background: #fff;
+	box-shadow: 0 8rpx 24rpx rgba(180, 120, 60, 0.08);
 
-	&__info {
-		margin-top: $mine-info-margin-top;
+	&__header {
+		display: flex;
+		align-items: center;
+		padding: 8rpx 8rpx 28rpx;
 	}
 
 	&__avatar {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		width: 112rpx;
+		height: 112rpx;
+		margin-right: 24rpx;
+		border-radius: 50%;
+		overflow: hidden;
 		flex-shrink: 0;
-		width: var(--mine-avatar-size);
-		height: var(--mine-avatar-size);
-		margin-top: $mine-avatar-offset-top;
-		margin-left: $mine-avatar-margin-x;
-		margin-right: $mine-avatar-margin-x;
-		border-radius: $mine-avatar-radius;
-		background-color: $text-color-white;
-		box-shadow: $mine-avatar-shadow;
+		background: #fff3e6;
+		border: 4rpx solid #fff3e6;
 
 		image {
-			width: var(--mine-avatar-image-size);
-			height: var(--mine-avatar-image-size);
-			border-radius: $border-radius-circle;
+			width: 100%;
+			height: 100%;
 		}
 	}
 
+	&__info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__name {
+		font-size: 34rpx;
+		font-weight: 700;
+		color: $text-main;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__hint {
+		margin-top: 8rpx;
+		font-size: 24rpx;
+		color: $text-sub;
+	}
+
+	&__stats {
+		display: flex;
+		align-items: stretch;
+		margin: 0 4rpx 16rpx;
+		padding: 8rpx 0;
+		border-radius: 20rpx;
+		background: #fffaf4;
+	}
+
 	&__stat {
+		flex: 1;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		width: $mine-stat-width;
-		padding: $mine-stat-padding;
+		padding: 22rpx 8rpx;
+		position: relative;
 
-		.value {
-			margin-bottom: $mine-stat-value-gap;
+		&:not(:last-child)::after {
+			content: '';
+			position: absolute;
+			right: 0;
+			top: 28%;
+			bottom: 28%;
+			width: 1rpx;
+			background: #f0e4d6;
 		}
 	}
+
+	&__stat-value {
+		font-size: 34rpx;
+		font-weight: 700;
+		color: $accent;
+		line-height: 1.2;
+	}
+
+	&__stat-label {
+		margin-top: 10rpx;
+		font-size: 22rpx;
+		color: $text-sub;
+	}
 }
 
 .mine-service {
-	width: 100%;
-	padding: $mine-service-padding-y $mine-section-padding-x $mine-service-padding-bottom;
-	background-color: $text-color-white;
-	box-shadow: $box-shadow;
+	padding: 28rpx 8rpx 12rpx;
+	border-radius: $card-radius;
+	background: #fff;
+	box-shadow: 0 8rpx 24rpx rgba(180, 120, 60, 0.08);
 
 	&__title {
-		margin-bottom: $mine-service-title-gap;
+		padding: 0 20rpx 8rpx;
+		font-size: 30rpx;
+		font-weight: 700;
+		color: $text-main;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		padding: 28rpx 20rpx;
+		border-bottom: 1rpx solid #f3ebe3;
+
+		&:last-child {
+			border-bottom: none;
+		}
 	}
 
 	&__icon {
-		width: var(--mine-service-icon-size);
-		height: var(--mine-service-icon-size);
+		width: 44rpx;
+		height: 44rpx;
+		margin-right: 20rpx;
 		flex-shrink: 0;
+
+		&--placeholder {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 12rpx;
+			background: #fff3e6;
+		}
+	}
+
+	&__name {
+		flex: 1;
+		min-width: 0;
+		font-size: 28rpx;
+		color: $text-main;
 	}
 }
 </style>