youdas/pages/me/me.vue

<template>
	<view class="content">
		<view class="header-container">
			<view class="title">我的</view>
		</view>

		<view class="main-container">
			<!-- 用户信息区域 -->
			<view class="user-info-section" v-if="userInfo" @click="navigateTo('/pages/me/account-info');">
				<view class="avatar">
					<image :src="userInfo.userIcon" mode="aspectFill"
						style="width: 80.15rpx;height: 80.15rpx;border-radius: 10rpx;"></image>
				</view>
				<view class="user-id">{{ userInfo.username }}</view>
				<view class="user-days">已陪你走过了{{ userInfo.days }}天</view>
			</view>
			<view class="user-info-section" v-else @click="navigateToAccountLogin();">
				<view class="avatar">
				</view>
				<view class="user-id">点击登录</view>
				<view class="user-days"></view>
			</view>
			<!-- 订单状态区域 -->
			<view class="order-status-section">
				<view class="status-item" @click="navigateTo('/pages/mall/order-list?type=1');">
					<text class="status-count">0</text>
					<text class="status-label">待发货</text>
				</view>
				<view class="status-item" @click="navigateTo('/pages/mall/order-list?type=2');">
					<text class="status-count">0</text>
					<text class="status-label">待收货</text>
				</view>
				<view class="status-item" @click="navigateTo('/pages/mall/order-list?type=3');">
					<text class="status-count">0</text>
					<text class="status-label">待评价</text>
				</view>
				<view class="status-item" @click="navigateTo('/pages/mall/order-list?type=4');">
					<text class="status-count">0</text>
					<text class="status-label">退款售后</text>
				</view>
			</view>

			<!-- 功能列表区域 -->
			<view class="function-list-section">
				<view v-for="item in itemList" :key="item.id" class="function-item"
					@click="item.onClick ? item.onClick(item) : null">
					<text class="function-title">{{ item.title }}</text>
					<image src="/static/ic_arrow.png" class="arrow-icon"></image>
				</view>
			</view>
		</view>
		<page-popup ref="_pagePopup" />
	</view>
</template>

<script setup>
import { getUserInfo } from '@/common/server/user';
import { onShow } from '@dcloudio/uni-app'
import { navigateTo, navigateToAccountLogin } from '@/common/system/router';
let _pagePopup = ref(null);
const itemList = ref([

]);

let userInfo = ref(null);

onShow(async () => {
	yds.showLoading();
	const res = await getUserInfo();
	console.log("res", res);
	userInfo.value = res;
	loadMenu();
	yds.hideLoading();
});
const loadMenu = async () => {
	const menuList = [
		{
			id: 1,
			title: "消费记录",
			onClick: (res) => {
				navigateTo("/pages/mall/order-list");
			}
		}, {
			id: 2,
			title: "我的收藏",
			onClick: (res) => {
				navigateTo("/pages/mall/collect");
			}
		}, {
			id: 3,
			title: "优惠券",
			onClick: (res) => {
				navigateTo("/pages/other/coupon");
			}
		}, {
			id: 4,
			title: "收货地址管理",
			onClick: (res) => {
				navigateTo("/pages/address/address-list");
			}
		},
		{
			id: 5,
			title: "用户协议",
			onClick: (res) => {
				yds.navigateToAgreement("user");
			}
		},
		{
			id: 6,
			title: "隐私政策",
			onClick: (res) => {
				yds.navigateToAgreement("privacy");
			}
		},
	];
	if (yds.userInfo.isAccountLogin()) {
		menuList.push({
			id: 7,
			title: "退出登录",
			onClick: async (res) => {
				const { confirm } = await _pagePopup.value.showModal('退出登录', '确定退出登录吗？');
				if (confirm) {
					yds.userInfo.logout();
					userInfo.value = null;
					loadMenu();
					navigateTo("/pages/me/account-login");
				}
			}
		}, {
			id: 8,
			title: "注销账号",
			onClick: (res) => {
				navigateTo("/pages/me/account-deletion");
			}
		});
	}
	itemList.value = menuList;
}

</script>

<style lang="scss">
.content {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #F7F7F7;
}

.header-container {
	width: 100%;
	height: 225.19rpx;
	background-color: white;
	position: relative;
}

.title {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32.44rpx;
	position: absolute;
	bottom: 30rpx;
}

.main-container {
	width: 688.93rpx;
	display: flex;
	flex-direction: column;
	margin: 34rpx auto;
}

// 用户信息区域样式
.user-info-section {
	width: 100%;
	height: 80.15rpx;
	position: relative;
}

.avatar {
	width: 80.15rpx;
	height: 80.15rpx;
	border-radius: 10rpx;
	background-color: #D8D8D8;
}

.user-id {
	position: absolute;
	left: 103rpx;
	top: 11rpx;
	font-size: 22.9rpx;
	color: #333333;
}

.user-days {
	position: absolute;
	left: 103rpx;
	top: 50rpx;
	font-size: 19.08rpx;
	color: #8A8A8A;
}

// 订单状态区域样式
.order-status-section {
	width: 100%;
	height: 143.13rpx;
	background-color: white;
	border-radius: 15.27rpx;
	margin-top: 36rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.status-item {
	display: flex;
	flex-direction: column;
	width: 100rpx;
	height: 100%;
	align-items: center;
	justify-content: center;
}

.status-count {
	font-size: 41.98rpx;
	color: #333333;
}

.status-label {
	font-size: 19.08rpx;
	color: #8A8A8A;
}

// 功能列表区域样式
.function-list-section {
	width: 100%;
	margin-top: 36rpx;
}

.function-item {
	width: 100%;
	height: 82.06rpx;
	background-color: white;
	border-radius: 15.27rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 15rpx;
	align-items: center;
}

.function-title {
	margin-left: 27rpx;
	font-size: 22.9rpx;
	color: #333333;
}

.arrow-icon {
	width: 10.67rpx;
	height: 19.66rpx;
	margin-right: 25rpx;
}
</style>