point-app/pages/my/index.vue

<template>
	<mobile-frame :frameStyle="frameStyle" @toPath="toPath">
		<view class="main">
			<view class="one">
				<view class="one_1" v-if="!user._id">
					<text class="iconfont icon-geren2" @click="toCommon('pages/login/index')"></text>
					<view class="name">未登录</view>
				</view>
				<view class="one_1" v-else>
					<image class="image" :src="user.icon&&user.icon.length>0?user.icon[0].url:''"></image>
					<view class="name">
						<text>{{user.name||'暂无名称'}}</text>
						<text>普通会员</text>
					</view>
				</view>
				<view class="one_2">
					<view class="one_2_1">
						<text v-if="user._id">{{user.collect||0}}</text>
						<text @click="toCommon('pagesMy/collection/market')">收藏的商品</text>
					</view>
					<text class="link">|</text>
					<view class="one_2_1">
						<text v-if="user._id">{{user.collect||0}}</text>
						<text @click="toCommon('pagesMy/collection/shop')">收藏的店铺</text>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="two_1">
					<view class="title">我的订单</view>
					<view class="title">
						<text @click="toOrder({route:'pagesMy/order/index',type:'order',status:'0'})">全部订单</text>
						<text class="iconfont icon-dayufuhao"></text>
					</view>
				</view>
				<view class="two_2">
					<view class="orderList" v-for="(item, index) in orderList" :key="index" @click="toOrder(item)">
						<view class="icon">
							<text class="iconfont" :class="[item.icon]"></text>
						</view>
						<text class="title">{{item.title}}</text>
					</view>
				</view>
				<view class="two_1" v-for="(item, index) in menuList" :key="index" @click="toCommon(item.route)">
					<view class="title">{{item.title}}</view>
					<view class="title">
						<text v-if="user.id&&item.title=='我的积分'">{{user.integral||0}}分</text>
						<text v-if="item.title=='客服电话'">{{serviceContaceInfo.phone||''}}</text>
						<text class="iconfont icon-dayufuhao"></text>
					</view>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				frameStyle: {
					useBar: true
				},
				// 用户信息
				user: {},
				// 客服信息
				serviceContaceInfo: {},
				// 图标菜单
				orderList: [ //订单列表
					{
						icon: 'icon-daifukuan',
						title: '待付款',
						status: '1',
						type: 'order',
						route: "pagesMy/order/index",
					},
					{
						icon: 'icon-daifahuo',
						title: '待发货',
						status: '2',
						type: 'order',
						route: "pagesMy/order/index",
					},
					{
						icon: 'icon-daishouhuo',
						title: '待收货/消费',
						status: '3',
						type: 'order',
						route: "pagesMy/order/index",
					},
					{
						icon: 'icon-daipinglun',
						title: '待评论',
						status: '4',
						type: 'order',
						route: "pagesMy/order/index",
					},
					{
						icon: 'icon-shouhoufuwuicon',
						title: '售后',
						type: 'after',
						route: "pagesMy/order/after",
					},
				],
				// 菜单
				menuList: [{
						title: '我的优惠劵',
						route: 'pagesMy/discount/index'
					},
					{
						title: '我的积分',
						route: 'pagesMy/integral/index'
					},
					{
						title: '我的资产',
						route: 'pagesMy/assets/index'
					},
					{
						title: '我的拼团',
						route: 'pagesMy/dough/index'
					},
					{
						title: '我的收货地址',
						route: 'pagesMy/address/index'
					},
					{
						title: '账号管理',
						route: 'pagesMy/account/index'
					},
					{
						title: '客服电话',
						route: ''
					},
				],
			};
		},
		onShow: async function() {
			const that = this;
			// 查询其他信息
			await that.searchOther();
			// 监听用户登录
			await that.watchLogin();

		},
		methods: {
			// 监听用户登录
			watchLogin() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async (res) => {
						let user = that.$jwt(res.data);
						const arr = await that.$api(`/user/${user.id}`, 'GET');
						if (arr.errcode == '0') that.$set(that, `user`, arr.data);
					},
					fail: (err) => {}
				})
			},
			// 查询其他信息
			async searchOther() {
				const that = this;
				let res;
				res = await that.$api(`/serviceContace`, 'GET');
				if (res.errcode == '0' && res.total > 0) {
					that.$set(that, `serviceContaceInfo`, res.data[0])
				}
			},
			// 底部菜单跳转
			toPath(e) {
				if (e && e.route) uni.redirectTo({
					url: `/${e.route}`
				})
			},
			// 公共跳转
			toCommon(e) {
				uni.getStorage({
					key: 'token',
					success: function(res) {
						uni.navigateTo({
							url: `/${e}`
						})
					},
					fail: function(err) {
						uni.navigateTo({
							url: `/pages/login/index`
						})
					}
				});

			},
			// 订单跳转页面
			toOrder(e) {
				if (e.type == 'order') {
					uni.navigateTo({
						url: `/${e.route}?status=${e.status}`
					})
				} else if (e.type == 'after') {
					uni.navigateTo({
						url: `/${e.route}`
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			text-align: center;
			padding: 4vw 0;
			background-color: var(--fFB1Color);
			color: var(--mainColor);

			.one_1 {
				margin: 0 0 5vw 0;

				image {
					width: 25vw;
					height: 25vw;
					border-radius: 25vw;
				}

				.iconfont {
					font-size: 80px;
				}

				.name {
					display: flex;
					justify-content: space-evenly;
					margin: 2vw 0;
					font-size: var(--font18Szie);
				}

				.image {
					border: 1px solid var(--f1Color);
				}
			}

			.one_2 {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				font-size: var(--font16Szie);

				.one_2_1 {
					display: flex;
					flex-direction: column;
				}

				.link {
					font-weight: bold;
				}
			}
		}

		.two {
			background-color: var(--f1Color);

			.two_1 {
				display: flex;
				justify-content: space-between;
				padding: 4vw;
				background-color: var(--mainColor);
				margin: 0 0 0.1vw 0;

				.title {
					font-size: var(--font16Szie);

					text:first-child {
						margin: 0 1vw 0 0;
					}
				}

				.title:last-child {
					color: var(--f85Color);
					font-size: var(--font14Size);
				}
			}

			.two_1:nth-last-child(2) {
				margin: 0 0 2vw 0;
			}

			.two_1:nth-last-child(4) {
				margin: 0 0 2vw 0;
			}

			.two_2 {
				display: flex;
				justify-content: space-between;
				padding: 5vw;
				background-color: var(--mainColor);
				margin: 0 0 2vw 0;

				.orderList {
					text-align: center;

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

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