gc/pages/user/user.vue

<template>
	<view class="content">
		<view class="top">
			<view class="top-bg">
				<image src="../../static/img/userBg.png" mode=""></image>
			</view>
			<view class="userInfo">
				<view class="avatar">
					<image src="../../static/img/avatar.png" mode=""></image>
				</view>
				<view class="user">
					<view class="userbox">
						<view class="name">
							海儿
						</view>
						<view class="post">
							部门管理
						</view>
					</view>
					<view class="phone">
						137****1523
					</view>
				</view>
			</view>
			<view class="tz">
				<view class="tzimage">
					<image src="../../static/img/tong.png" mode=""></image>
				</view>
				<u-notice-bar class="tz-main" :text="text1" direction="column" :icon="false" bgColor="#ffffff"
					color="#000000" fontSize="25rpx"></u-notice-bar>
			</view>
		</view>
		<view class="">

		</view>
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		orderData,
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				text1: ['123456', '654321'],
				list: [{
						icon: '../../static/icon/u1.png',
						name: '领单',
						tip: '领取新订单'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '待检验订单',
						tip: '检验 | 添加记录'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '外发检验订单',
						tip: '订单外发处理'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '我的订单',
						tip: '订单列表 | 提交记录'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '工资记录',
						tip: '历月工资详情'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '打卡记录',
						tip: '上班 | 迟到记录'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '奖罚记录',
						tip: '奖励 | 处罚记录'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '订单监管',
						tip: '订单详情'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '待处理办件',
						tip: '处罚 | 报废返工处理'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '外发不合格处理',
						tip: '订单外发处理'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '处罚管理',
						tip: '奖励 | 处罚记录'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '报废返工处理',
						tip: '提交报废返工的数量'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '外发订单管理',
						tip: '提交检验 | 检验记录'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '外发不合格通知',
						tip: '外发不合格消息'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '订单状态预警',
						tip: '订单到期时间预警'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '材料未到通知',
						tip: '材料未到预警'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '外发未到通知',
						tip: '外发时间到期预警'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '订单外发',
						tip: '订单外发给合作公司'
					},
					{
						icon: '../../static/icon/u1.png',
						name: '订单抽检',
						tip: '订单抽取检验'
					},
				]
			};
		},
		computed: {
			...mapState('user', ['hasLogin']),
		},
		onShow() {
			uni.setTabBarStyle({
				backgroundColor: '#FFFFFF'
			})
			// 判断是否已经登录
			// this.loadBaseData();
			// 判断是否用户页面
			if (this.isUserPage && this.hasLogin) {
				this.$nextTick(() => {
					this.$refs.userPage.getUser();
				})
			} else if (this.hasLogin) {
				this.$nextTick(() => {
					this.$refs.shopPage.getInit();
				})
			}
		},
		methods: {
			toJSON() {
				return this;
			},
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			changeTab(bool) {
				if (bool) {
					this.$refs.shopPage.getInit();
				}
				if (!bool) {
					this.$refs.userPage.getUser();
				}
				// 判断 是否切换为商家
				this.isUserPage = !bool;
			},
			// 加载初始数据
			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
			 */
		}
	};
</script>
<style lang="scss">
	.content,
	page {
		height: auto;
		min-height: 100%;
		background: #ffffff;
	}

	.top {
		position: relative;

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

		.top-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 750rpx;
			height: 490rpx;
		}

		.userInfo {
			display: flex;
			align-items: center;
			padding: 126rpx 20rpx 0;

			.avatar {
				width: 126rpx;
				height: 126rpx;
				border-radius: 50%;

				image {
					border-radius: 50%;
				}
			}

			.user {
				position: relative;
				z-index: 2;
				padding-left: 10rpx;
				line-height: 1;

				.userbox {
					display: flex;

					.name {
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.post {
						margin-left: 10rpx;
						border: 1rpx solid #FFFFFF;
						border-radius: 10rpx;
						padding: 4rpx 8rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}

				.phone {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.tz {
			position: relative;
			z-index: 2;
			padding: 20rpx 30rpx 0;
			display: flex;
			align-items: center;

			.tzimage {
				width: 68rpx;
				height: 68rpx;

				image {
					border-radius: 50%;
				}
			}

			.tz-main {
				height: 58rpx;
				margin-left: -34rpx;
				padding-left: 44rpx;
				border-radius: 0px 29rpx 29rpx 0px;
			}
		}
	}
</style>