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="toOrrder('logo')"></text>
					<view class="name">未登录</view>
				</view>
				<view class="one_1" v-else>
					<image :src="user.icon"></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="toOrrder('收藏的商品')">收藏的商品</text>
					</view>
					<text class="link">|</text>
					<view class="one_2_1">
						<text v-if="user._id">{{user.collect||0}}</text>
						<text @click="toOrrder('收藏的店铺')">收藏的店铺</text>
					</view>
				</view>
			</view>
			<view class="two">
				<view class="two_1">
					<view class="title">我的订单</view>
					<view class="title">
						<text @click="toOrrder('我的订单')">全部订单</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="toOrrder(item.type)">
						<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="toOrrder(item.type)">
					<view class="title">{{item.title}}</view>
					<view class="title">
						<text v-if="user._id&&item.title=='我的积分'">{{user.integral||0}}分</text>
						<text v-if="user._id&&item.title=='客服电话'">{{user.phone||'123-345-6780'}}</text>
						<text class="iconfont icon-dayufuhao"></text>
					</view>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				frameStyle: {
					useBar: true
				},
				// 用户信息
				user: {},
				// 图标菜单
				orderList: [{
						icon: 'icon-daifukuan',
						title: '待付款',
						type: 'a'
					},
					{
						icon: 'icon-daifahuo',
						title: '待发货',
						type: 'b'
					},
					{
						icon: 'icon-daishouhuo',
						title: '待收货/消费',
						type: 'c'
					},
					{
						icon: 'icon-daipinglun',
						title: '待评论',
						type: 'd'
					},
					{
						icon: 'icon-shouhoufuwuicon',
						title: '售后',
						type: 'e'
					},
				],
				// 菜单
				menuList: [{
						title: '我的优惠劵',
						type: 'f'
					},
					{
						title: '我的积分',
						type: 'g'
					},
					{
						title: '我的资产',
						type: 'h'
					},
					{
						title: '我的拼团',
						type: 'i'
					},
					{
						title: '我的收货地址',
						type: 'j'
					},
					{
						title: '账号管理',
						type: 'k'
					},
					{
						title: '客服电话',
						type: 'l'
					},
				],
			};
		},
		onShow: function() {},
		methods: {
			toPath(e) {
				if (e && e.route) uni.redirectTo({
					url: `/${e.route}`
				})
			},
			// 跳转页面
			toOrrder(e) {
				const that = this;
				console.log(e);
			},
		}
	}
</script>

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

		.one {
			text-align: center;
			padding: 4vw 0;
			background-color: #FB1438;
			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);
				}
			}

			.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);
				}

				.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>