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" @click="navTo('/pages/set/userinfo')">
				<image src="../../static/icon/set.png" mode=""></image>
			</view>
		</view>
		<view class="userInfo-box" @click="navTo('/pages/set/userinfo')">
			<view class="avatar">
				<image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image>
			</view>
			<view class="name">{{ userInfo.nickname || '游客' }}</view>
			<view class="myId flex">
				会员编号：{{ userInfo.uid || '游客' }}
				<!-- <text v-if="userInfo.now_money">
					<text class="xian"></text>
					我的余额：
					<text style="color: red;">{{ userInfo.now_money }}</text>
				</text> -->
				<view class="flex" v-if="userInfo.vip">
					<text class="xian"></text>
					<image style="width: 20rpx; height: 20rpx;" :src="userInfo.vip_icon" mode=""></image>
					<text class="level" style="color: red;">{{ userInfo.vip_name }}</text>
				</view>
			</view>
			<view class="shareId" v-if="userInfo.spread_uid && userInfo.spread_uid != 0">推荐人编号：{{ userInfo.spread_uid }}
			</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" @click="navTo('/pages/user/creation?id=0')">
				<view class="czzx-icon2">
					<image src="../../static/icon/user1.png" mode=""></image>
				</view>
				<view class="czzx-font">草稿箱</view>
			</view>
			<view class="czzx-item" @click="navTo('/pages/user/creation?id=1')">
				<view class="czzx-icon3">
					<image src="../../static/icon/user2.png" mode=""></image>
				</view>
				<view class="czzx-font">审核中</view>
			</view>
			<view class="czzx-item" @click="navTo('/pages/user/creation?id=2')">
				<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" @click="navTo('/pages/order/order?state=0')">
					<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" @click="navTo('/pages/order/order?state=0')">
					<view class="box-main-item-icon1 position-relative">
						<image src="../../static/icon/user4.png" mode=""></image>
						<view class="corner" v-if="orderInfo.unpaid_count > 0">
							<text>{{ orderInfo.unpaid_count }}</text>
						</view>
					</view>
					<view class="box-main-item-font">待付款</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/order/order?state=1')">
					<view class="box-main-item-icon2 position-relative">
						<image src="../../static/icon/user5.png" mode=""></image>
						<view class="corner" v-if="orderInfo.unshipped_count > 0">
							<text>{{ orderInfo.unshipped_count }}</text>
						</view>
					</view>
					<view class="box-main-item-font">待发货</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/order/order?state=2')">
					<view class="box-main-item-icon3 position-relative">
						<image src="../../static/icon/user6.png" mode=""></image>
						<view class="corner" v-if="orderInfo.received_count > 0">
							<text>{{ orderInfo.received_count }}</text>
						</view>
					</view>
					<view class="box-main-item-font">待收货</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/order/order?state=5')">
					<view class="box-main-item-icon4 position-relative">
						<image src="../../static/icon/user7.png" mode=""></image>
						<view class="corner" v-if="orderInfo.refund_count > 0">
							<text>{{ orderInfo.refund_count }}</text>
						</view>
					</view>
					<view class="box-main-item-font">售后</view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title flex" @click="navTo('/pages/user/vip')">
				<view class="box-title-left">我的应用</view>
			</view>
			<view class="box-main flex">
				<view class="box-main-item" @click="navTo('/pages/user/coupon')">
					<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" @click="navTo('/pages/cart/cart')">
					<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" @click="navTo('/pages/set/address')">
					<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" @click="navTo('/pages/index/coupon')">
					<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" @click="navTo('/pages/user/living')">
					<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" v-if="userInfo.is_promoter != 0" @click="navTo('/pages/user/myLq')">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user13.png" mode=""></image>
					</view>
					<view class="box-main-item-font">余额记录</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/user/myTeam')">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user14.png" mode=""></image>
					</view>
					<view class="box-main-item-font">我的团队</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/user/speardorder')">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user15.png" mode=""></image>
					</view>
					<view class="box-main-item-font">推广人订单</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/user/vip')">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user16.png" mode=""></image>
					</view>
					<view class="box-main-item-font">等级任务</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/upload/commodity')" v-if="userInfo.uper == 1">
					<view class="box-main-item-icon5">
						<image src="../../static/icon/user17.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, //待付款
									refund_count: 0 //售后
								});
							});
					})
					.catch(e => {
						console.log(e);
					});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					// 保存地址
					saveUrl();
					// 登录拦截
					interceptor();
				} else {
					uni.navigateTo({
						url,
						fail() {
							uni.switchTab({
								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: 124rpx;

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

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

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

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

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

		.avatar {
			position: relative;
			z-index: 2;
			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;
			justify-content: flex-start;

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

			.level {
				display: inline-block;
				margin-left: 10rpx;
			}
		}

		.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: -12rpx;
					width: 12rpx;
					height: 22rpx;

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

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

			.box-main-item {
				padding-bottom: 30rpx;
				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>