learn_applet/pages/my/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="one_1" v-if="user&&user._id">
				<view class="left">
					<image v-if="user.icon&&user.icon.length>0&&user.icon" class="logo" :src="user.icon[0].url"></image>
					<image v-else class="logo" :src="config.icon[0].url"></image>
				</view>
				<view class="right">
					<view class="name">{{user.nick_name||'暂无昵称'}}</view>
					<view class="gender">性别：{{getGender(user.gender)}}</view>
				</view>
			</view>
			<view class="one_1" v-else>
				<view class="left">
					<image class="logo" :src="config.icon[0].url"></image>
				</view>
				<view class="right">
					<view class="name" @click="show=true">点击登录</view>
				</view>
			</view>
		</view>
		<view class="two">
			<view class="two_1">
				<view class="left">我的订单</view>
				<view class="right" @tap="toCommon(`pagesMy/order/index?status=${'-1'}`)">查看全部订单
					<up-icon name="arrow-right" size="16"></up-icon>
				</view>
			</view>
			<view class="two_2">
				<view class="list" v-for="(item,index) in configInfo.orderList" :key="index" @tap="toRoute(item)">
					<uni-badge :text="item.num" absolute="rightTop" size="normal">
						<view class="icon">
							<text class="t-icon" :class="[item.icon]"></text>
						</view>
						<text class="title">{{item.title}}</text>
					</uni-badge>
				</view>
			</view>
		</view>
		<view class="thr">
			<view class="list" v-for="(item, index) in configInfo.menuList" :key="index" @click="toCommon(item.route)">
				<view class="left">
					<view class="icon">
						<text class="t-icon" :class="[item.icon]"></text>
					</view>
					<text class="title">{{item.title}}</text>
				</view>
				<view class="right">
					<up-icon name="arrow-right" size="16"></up-icon>
				</view>
			</view>
		</view>
		<up-overlay :show="show">
			<login @showChange='showChange'></login>
		</up-overlay>
	</view>
</template>

<script setup lang="ts">
	import configInfo from '../../config.js';
	import login from "@/components/login.vue"
	import { inject, computed, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = inject('$api');
	const $config = inject('$config');
	// 基本信息
	const config = ref({ logo: [], icon: [], file: [] });
	// 遮罩层
	const show = ref(false);
	const user = ref({ icon: [] });
	// 字典表
	const genderList = ref([]);
	onShow(async () => {
		await searchConfig();
		await searchUser();
		await searchOther();
		await search();
		if (!user.value) show.value = true
	})
	// user信息
	const searchUser = async () => {
		user.value = uni.getStorageSync('user');
	};
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 其他查询信息
	const searchOther = async () => {
		let res;
		// 性别
		res = await $api(`dictData`, 'GET', { code: 'gender', is_use: '0' });
		if (res.errcode === 0) genderList.value = res.data;
	};
	// 查询
	const search = async () => { };
	const showChange = () => {
		show.value = false
	}
	const getGender = (i) => {
		if (i) {
			const r = genderList.value.find((f) => f.value === i)
			if (r) return r.label
			else return '暂无'
		} else return '暂无'
	}
	// 订单
	const toRoute = (item) => {
		if (user.value && user.value._id) {
			uni.navigateTo({
				url: `/${item.route}?status=${item.status}`
			})
		} else show.value = true
	}
	// 公共跳转
	const toCommon = (e) => {
		if (user.value && user.value._id) {
			uni.navigateTo({
				url: `/${e}`
			})
		} else show.value = true
	}
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #3c9cff, #f1f1f1);

		.one {
			padding: 5vw;

			.one_1 {
				display: flex;
				align-items: center;

				.left {
					margin: 0 2vw 0 0;

					.logo {
						width: 15vw;
						height: 15vw;
						border-radius: 90px;
					}
				}

				.right {
					color: var(--mainColor);

					.name {
						font-size: var(--font16Size);
						margin: 0 0 2vw 0;
					}

					.gender {
						font-size: var(--font14Size);
					}
				}
			}
		}

		.two {
			display: flex;
			flex-direction: column;
			padding: 3vw;
			margin: 2vw;
			border-radius: 10px;
			background-color: var(--mainColor);

			.two_1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 0 2vw 0;
				border-bottom: 1px solid var(--f9Color);

				.left {
					font-weight: 600;
					font-size: var(--font16Size);
				}

				.right {
					display: flex;
					align-items: center;
					font-size: var(--font14Size);
					color: var(--f99Color);
				}
			}

			.two_2 {
				display: flex;
				justify-content: space-between;
				padding: 2vw 0;

				.list {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text-align: center;


					.title {
						display: inline-block;
						margin: 1vw 0 0 0;
						font-size: var(--font14Size);
					}
				}
			}
		}

		.thr {
			display: flex;
			flex-direction: column;
			margin: 2vw;
			border-radius: 10px;
			background-color: var(--mainColor);

			.list {
				display: flex;
				justify-content: space-between;
				padding: 3vw;
				border-bottom: 1px solid var(--f9Color);

				.left {
					display: flex;
					align-items: center;
					font-size: var(--font14Size);

					.icon {
						padding: 0 2vw 0 0;
					}

					.title {
						display: inline-block;
						font-size: var(--font14Size);
					}
				}

				.right {
					display: flex;
					align-items: center;
					font-size: var(--font14Size);
					color: var(--f99Color);
				}
			}

			.list:last-child {
				border: none;
			}
		}
	}
</style>