material_applet/pages/my/index.vue

<template>
	<view class="content">
		<view class="one">
			<image class="logo" :src="logo"></image>
			<view class="one_1">
				<text class="name">{{user.name}}</text>
				<text class="gender">性别: {{user.gender=='0'?'男':user.gender=='1'?'女':'未知'}}</text>
			</view>
		</view>
		<view class="two">
			<view class="two_1">
				<view class="left">我的订单</view>
				<view class="right" @tap="toCommon(`pagesMy/order/index?status=${'-1'}`)">查看全部订单 <text
						class="iconfont icon-dayuhao"></text></view>
			</view>
			<view class="two_2">
				<view class="list" v-for="(item,index) in orderList" :key="index" @tap="toRoute(item)">
					<uni-badge :text="item.num" absolute="rightTop" size="normal">
						<view class="icon">
							<text class="iconfont" :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 menuList" :key="index" @click="toCommon(item.route)">
				<view class="left">
					<view class="icon">
						<text class="iconfont" :class="[item.icon]"></text>
					</view>
					<text class="title">{{item.title}}</text>
				</view>
				<view class="right">
					<text class="iconfont icon-dayuhao"></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: '',
				user: {},
				// 订单图标菜单
				orderList: [],
				// 菜单
				menuList: [],
			}
		},
		async onLoad() {
			const that = this;
			that.searchToken();
			await that.searchOther();
		},
		methods: {
			// 订单或维修跳转
			toRoute(item) {
				const that = this;
				if (that.user && that.user._id) {
					uni.navigateTo({
						url: `/${item.route}?status=${item.status}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/login/index`
					})
				}
			},
			// 公共跳转
			toCommon(e) {
				const that = this;
				if (that.user && that.user._id) {
					uni.navigateTo({
						url: `/${e}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/login/index`
					})
				}
			},
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) that.$set(that, `user`, res);
					uni.getStorage({
						key: 'config',
						success: function(arr) {
							if (res.gender == '0') that.$set(that, `logo`,
								arr.data.boy_url[0].url);
							else if (res.gender == '1') that.$set(that, `logo`,
								arr.data.girl_url[0].url);
							else that.$set(that, `logo`, arr.data.logo_url[0].url ||
								'../../static/login.jpeg');
						}
					})
				} catch (e) {
					uni.showToast({
						title: err.errmsg,
						icon: 'error',
						duration: 2000
					});
				}
			},
			async searchOther() {
				const that = this;
				let config = that.$config;
				that.$set(that, `orderList`, config.orderList);
				let menu = []
				for (let val of config.menuList) {
					const role = val.role.find((i) => i == that.user.role);
					if (role) menu.push(val)
				}
				that.$set(that, `menuList`, menu);
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		background-color: var(--f9Color);

		.one {
			display: flex;
			align-items: center;
			background: repeating-linear-gradient(to bottom, var(--f3CColor), var(--mainColor));
			padding: 5vw;

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

			.one_1 {
				display: flex;
				flex-direction: column;
				padding: 0 2vw;

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

				.gender {
					color: var(--f85Color);
					font-size: var(--font13Size);
				}
			}
		}

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

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

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

				.right {
					display: flex;
					align-items: center;
					font-size: var(--font12Size);
					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;

					.icon {
						.iconfont {
							font-size: 25px;
						}
					}

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

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

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

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

					.icon {
						padding: 0 2vw 0 0;

						.iconfont {
							color: var(--f3CColor);
							font-size: 20px;
						}
					}

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

				.right {
					display: flex;
					align-items: center;
					font-size: var(--font12Size);
					color: var(--f99Color);
				}
			}
		}
	}
</style>