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">
			<view class="avatar"><image :src="userInfo.avatar || '/static/error/missing-face.png'" mode=""></image></view>
			<view class="name">{{ userInfo.nickname || '游客' }}</view>
			<view class="myId">
				会员编号：{{ userInfo.uid || '游客' }}
				<!-- <text class="xian"></text> -->
				<!-- 推荐人：{{李丹丹}} -->
			</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=2')">
				<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=1')">
				<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"><image src="../../static/icon/user4.png" mode=""></image></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"><image src="../../static/icon/user5.png" mode=""></image></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"><image src="../../static/icon/user6.png" mode=""></image></view>
					<view class="box-main-item-font">待收货</view>
				</view>
				<view class="box-main-item" @click="navTo('/pages/order/order?state=3')">
					<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" @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">
					<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,
					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: 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 {
		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;

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