Kroytz/yshop-drink
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(uniapp): 重构"我的"页信息层级

Browse Source
This commit is contained in:
Kroytz committed 2026-07-24 11:57:43 +08:00
1 parent 9384c68662
commit 0f2752867c
2 files changed
+245 -198
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

yshop-drink-uniapp-vue3/pages/mine/mine.vue
+243 -198
View File
@@ -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>