qjm/pages/user/user.vue

<template>
	<view class="container">
		<!-- <view class="vheigh"></view> -->
		<view class="top">
			<view class="bg">
				<image src="../../static/img/userBg.png" mode=""></image>
			</view>
			<view class="set">
				<image src="../../static/icon/set.png" mode=""></image>
			</view>
		</view>
		<view class="userInfo-box">
			<view class="avatar">
				<image src="../../static/icon/fire.png" mode=""></image>
			</view>
			<view class="name">
				李丹丹
			</view>
			<view class="myId">
				会员编号：12010 <text class="xian"></text> 推荐人：李丹丹
			</view>
			<view class="shareId">
				推荐人编号：12010
			</view>
		</view>
		<view class="czzx-box flex">
			<view class="czzx-item">
				<view class="czzx-icon1">
					<image src="../../static/icon/czzx.png" mode=""></image>
				</view>
			</view>
			<view class="czzx-xian"></view>
			<view class="czzx-item">
				<view class="czzx-icon2">
					<image src="../../static/icon/user1.png" mode=""></image>
				</view>
				<view class="czzx-font">
					草稿箱
				</view>
			</view>
			<view class="czzx-item">
				<view class="czzx-icon3">
					<image src="../../static/icon/user2.png" mode=""></image>
				</view>
				<view class="czzx-font">
					审核中
				</view>
			</view>
			<view class="czzx-item">
				<view class="czzx-icon4">
					<image src="../../static/icon/user3.png" mode=""></image>
				</view>
				<view class="czzx-font">
					已审核
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title flex">
				<view class="box-title-left">
					我的订单
				</view>
				<view class="box-title-right flex">
					<view class="box-title-right-font">
						全部
					</view>
					<view class="jt">
						<image src="../../static/icon/jt.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box-main flex">
				<view class="box-main-item">
					<view class="box-main-item-icon1">
						<image src="../../static/icon/user4.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						待付款
					</view>
				</view>
				<view class="box-main-item">
					<view class="box-main-item-icon2">
						<image src="../../static/icon/user5.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						待发货
					</view>
				</view>
				<view class="box-main-item">
					<view class="box-main-item-icon3">
						<image src="../../static/icon/user6.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						待收获
					</view>
				</view>
				<view class="box-main-item">
					<view class="box-main-item-icon4">
						<image src="../../static/icon/user7.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						已完成
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title flex">
				<view class="box-title-left">
					我的应用
				</view>
			</view>
			<view class="box-main flex">
				<view class="box-main-item">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user8.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						我的优惠券
					</view>
				</view>
				<view class="box-main-item">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user9.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						购物车
					</view>
				</view>
				<view class="box-main-item">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user10.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						收货地址
					</view>
				</view>
				<view class="box-main-item">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user11.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						新品提醒
					</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title flex">
				<view class="box-title-left">
					更多服务
				</view>
			</view>
			<view class="box-main flex">
				<view class="box-main-item">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user12.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						直播广场
					</view>
				</view>
				<view class="box-main-item">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user13.png" mode=""></image>
					</view>
					<view class="box-main-item-font">
						主播入口
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import uniList from '@/components/uni-list/uni-list.vue';
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
	import {
		orderData,
		getUserInfo
	} from '@/api/user.js';
	import {
		saveUrl,
		interceptor
	} from '@/utils/loginUtils.js';
	export default {
		data() {
			return {};
		},
		onShow() {
			// 判断是否已经登录
			if (this.hasLogin) {
				this.loadBaseData();
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		methods: {
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			// 加载初始数据
			loadBaseData() {
				getUserInfo({})
					.then(({
						data
					}) => {
						this.setUserInfo(data);
						// 获取用户数据完毕后在获取订单数据防止多次跳转到登录页
						orderData({})
							.then(({
								data
							}) => {
								this.setOrderInfo(data);
							})
							.catch(e => {
								this.setOrderInfo({
									complete_count: 0, //完成
									received_count: 0, //待收货
									unshipped_count: 0, //待发货
									order_count: 0, //订单总数
									unpaid_count: 0 //待付款
								});
							});
					})
					.catch(e => {
						console.log(e);
					});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url
					});
				}
			},

		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10rpx;
	}

	.container {
		height: 100%;
		background-color: $page-color-base;
	}

	.content-box {
		height: 100%;
	}

	.vheigh {
		height: var(--status-bar-height);
		background-color: #ffffff;
	}

	.top {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 750rpx;
		height: 224rpx;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 750rpx;
			height: 224rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.set {
			position: absolute;
			z-index: 2;
			width: 44rpx;
			height: 44rpx;
			top: 96rpx;
			right: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.userInfo-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 117rpx;

		.avatar {
			width: 130rpx;
			height: 130rpx;
			background: #FFFFFF;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.name {
			margin-top: 20rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #000000;
		}

		.myId {
			margin-top: 20rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;

			.xian {
				display: inline-block;
				margin: 0 12rpx;
				width: 2rpx;
				height: 20rpx;
				background: #CBCDCF;
			}
		}

		.shareId {
			margin-top: 20rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}
	}

	.czzx-box {
		margin: 50rpx auto 0;
		width: 708rpx;
		background: #FFFFFF;
		border-radius: 5rpx;
		padding: 28rpx 0 22rpx;

		.czzx-xian {
			width: 1px;
			height: 81rpx;
			background: #EBEBEB;
		}

		.czzx-item {
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 100%;
				height: 100%;
			}

			.czzx-icon1 {
				width: 58rpx;
				height: 64rpx;
			}

			.czzx-icon2 {
				width: 42rpx;
				height: 42rpx;
			}

			.czzx-icon3 {
				width: 44rpx;
				height: 36rpx;
			}

			.czzx-icon4 {
				width: 42rpx;
				height: 40rpx;
			}

			.czzx-font {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.box {
		margin: 20rpx auto 0;
		width: 708rpx;
		background: #FFFFFF;
		border-radius: 5rpx;

		.box-title {
			padding: 27rpx 36rpx 20rpx 28rpx;
			border-bottom: 1px solid #F5F5F5;

			.box-title-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.box-title-right {
				justify-content: flex-end;
				align-items: center;

				.box-title-right-font {
					font-size: 26rpx;
					font-family: SourceHanSansCN;
					font-weight: 400;
					color: #666666;
					margin-right: 14rpx;
				}

				.jt {
					position: relative;
					top: -6rpx;
					width: 12rpx;
					height: 22rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.box-main {
			padding: 34rpx 0 30rpx;
			justify-content: start;

			.box-main-item {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				image {
					width: 100%;
					height: 100%;
				}

				.box-main-item-icon1 {
					width: 42rpx;
					height: 38rpx;
				}

				.box-main-item-icon2 {
					width: 47rpx;
					height: 40rpx;
				}

				.box-main-item-icon3 {
					width: 42rpx;
					height: 40rpx;
				}

				.box-main-item-icon4 {
					width: 42rpx;
					height: 42rpx;
				}

				.box-main-item-icon5 {
					width: 70rpx;
					height: 70rpx;
				}

				.box-main-item-font {
					margin-top: 23rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}
			}
		}
	}
</style>