H5-frontend/pages/my/my.vue

<template>
	<view class="my-wrapper pr">
		<view class="w-full pa tw-top-0 tw-left-0 tw-z-1">
			<image class="w-full" :src="config.ossPathPerfixs + '/my-bg.png'" mode="widthFix"></image>
		</view>
		<view class="pr tw-z-10">
			<view class="my-top">
				<view class="radius-lg top-box" @click="toRegister">
					<view class="user-info" v-if="openId">
						<fs-avatar size="120rpx" :src="userInfo.photo || config.defaultAvatarUrl"></fs-avatar>
						<view class="top-box-content">
							<view class="top-box-title">{{ userInfo.name || getMobileLast }}</view>
							<view class="tw-flex tw-items-center">
								<fs-avatar size="32rpx" src="/static/images/icon/phone.png"
									class="pr tw-top-[-2rpx]"></fs-avatar>
								<text class="tw-ml-[4rpx]">{{ userInfo.mobile || '-' }}</text>
							</view>
						</view>
					</view>
					<view v-else class="text-center">
						<fs-avatar size=" 140rpx" border>去登录</fs-avatar>
					</view>
				</view>
			</view>
			<view class="my-bottom">
				<fs-cell-group arrow border radius bgColor="transparent">
					<fs-cell arrowColor="#CACBCB"
						:link="userInfo?.mobile ? '/pages/my/update-phone' : '/pages/index/register'" v-if="openId">
						<template #title>
							<view class="pr tw-w-[40rpx]">
								<fs-avatar src="/static/images/menu/menu1.png" size="80rpx"
									class="pa tw-top-[10rpx] tw-left-[-22rpx]"></fs-avatar>
							</view>
						</template>
						<template #value>
							<view class="tw-flex tw-items-center tw-justify-between">
								<view class="tw-text-[28rpx] tw-text-[#666]">手机号</view>
								<view class="tw-text-[#4479FF] tw-text-[28rpx]">
									{{ userInfo?.mobile ? '更换' : '绑定' }}
								</view>
							</view>
						</template>
					</fs-cell>
					<fs-cell arrowColor="#CACBCB" link="/modules/class/study-record" v-if="openId">
						<template #title>
							<view class="pr tw-w-[40rpx]">
								<fs-avatar src="/static/images/menu/menu6.png" size="80rpx"
									class="pa tw-top-[10rpx] tw-left-[-22rpx]"></fs-avatar>
							</view>
						</template>
						<template #value>
							<view class="tw-flex tw-items-center tw-justify-between">
								<view class="tw-text-[28rpx] tw-text-[#666]">学习记录</view>
								<view></view>
							</view>
						</template>
					</fs-cell>
					<fs-cell arrowColor="#CACBCB" link="/modules/activity/reservation-record-list" v-if="openId">
						<template #title>
							<view class="pr tw-w-[40rpx]">
								<fs-avatar src="/static/images/menu/menu6.png" size="80rpx"
									class="pa tw-top-[10rpx] tw-left-[-22rpx]"></fs-avatar>
							</view>
						</template>
						<template #value>
							<view class="tw-flex tw-items-center tw-justify-between">
								<view class="tw-text-[28rpx] tw-text-[#666]">我的预约</view>
								<view></view>
							</view>
						</template>
					</fs-cell>
					<fs-cell arrowColor="#CACBCB"
						:link="`/modules/my/student/student-feedback?data=${encodeURIComponent(JSON.stringify({ type: 'student' }))}`"
						v-if="openId">
						<template #title>
							<view class="pr tw-w-[40rpx]">
								<fs-avatar src="/static/images/menu/menu2.png" size="80rpx"
									class="pa tw-top-[10rpx] tw-left-[-22rpx]"></fs-avatar>
							</view>
						</template>
						<template #value>
							<view class="tw-flex tw-items-center tw-justify-between">
								<view class="tw-text-[28rpx] tw-text-[#666]">问题反馈</view>
								<view></view>
							</view>
						</template>
					</fs-cell>
					<fs-cell arrowColor="#CACBCB" link="/modules/my/version">
						<template #title>
							<view class="pr tw-w-[40rpx]">
								<fs-avatar src="/static/images/menu/menu3.png" size="80rpx"
									class="pa tw-top-[10rpx] tw-left-[-22rpx]"></fs-avatar>
							</view>
						</template>
						<template #value>
							<view class="tw-flex tw-items-center tw-justify-between">
								<view class="tw-text-[28rpx] tw-text-[#666]">版本信息</view>
								<view></view>
							</view>
						</template>
					</fs-cell>
					<fs-cell arrowColor="#CACBCB" link="/modules/my/aboutus">
						<template #title>
							<view class="pr tw-w-[40rpx]">
								<fs-avatar src="/static/images/menu/menu4.png" size="80rpx"
									class="pa tw-top-[10rpx] tw-left-[-22rpx]"></fs-avatar>
							</view>
						</template>
						<template #value>
							<view class="tw-flex tw-items-center tw-justify-between">
								<view class="tw-text-[28rpx] tw-text-[#666]">关于我们</view>
								<view></view>
							</view>
						</template>
					</fs-cell>
					<fs-cell arrowColor="#CACBCB" v-if="openId" @click="handleLogout">
						<template #title>
							<view class="pr tw-w-[40rpx]">
								<fs-avatar src="/static/images/menu/menu5.png" size="80rpx"
									class="pa tw-top-[10rpx] tw-left-[-22rpx]"></fs-avatar>
							</view>
						</template>
						<template #value>
							<view class="tw-flex tw-items-center tw-justify-between">
								<view class="tw-text-[28rpx] tw-text-[#666]">退出登录</view>
								<view></view>
							</view>
						</template>
					</fs-cell>
				</fs-cell-group>
			</view>
		</view>
	</view>
</template>

<script setup>
import config from '@/utils/config'
import { useUserStore } from '@/stores/user'

const user = useUserStore()
const userInfo = computed(() => user.userInfo)
const openId = computed(() => user.openId)

const getMobileLast = computed(() => {
	if (userInfo.value.mobile) return '用户' + userInfo.value.mobile.slice(-4)
	else return openId.value || '游客'
})

const toRegister = () => {
	if (!openId.value) return uni.navigateTo({ url: '/pages/index/welcome' })
	else {
		if (userInfo.value.mobile) uni.navigateTo({ url: '/pages/my/update-phone' })
		else uni.navigateTo({ url: '/pages/index/register' })
	}
}

const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				user.logout().then(() => {
					uni.reLaunch({ url: '/pages/index/index' })
				})
			}
		}
	})

}
</script>

<style lang="scss" scoped>
.my-wrapper {
	background-color: #fff;

	.my-top {
		padding: 40rpx var(--gutter) 0;
		margin-bottom: var(--gutter);

		.top-box {
			position: relative;
			padding: 60rpx 0;
			color: #fff;

			&-title {
				font-size: 30rpx;
				font-weight: 700;
				margin-left: 4rpx;
			}

			&-content {
				padding: 10rpx 0;
				margin-left: 20rpx;
			}

			.user-info {
				display: flex;
			}

		}

	}

	.my-bottom {
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, #fff 100%);
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		padding-top: 20rpx;

		:deep(.fs-cell) {
			padding: 12rpx var(--gutter);
		}
	}
}
</style>