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="main">
			<view class="main-item" v-for="(item,index) in list" @click="navTo(item)">
				<view class="main-bg">
					<image :src="item.bg" mode=""></image>
				</view>
				<view class="main-info" v-if="item.num">
					<view class="main-info-bg">
						<image src="../../static/img/infoBg.png" mode=""></image>
					</view>
					<view class="main-info-name">
						{{item.num}}条未读
					</view>
				</view>
				<view class="main-icon">
					<image :src="item.icon" mode="heightFix"></image>
				</view>
				<view class="main-name">
					{{item.name}}
				</view>
				<view class="main-tip">
					{{item.tip}}
				</view>
			</view>
		</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: '领取新订单',
						bg: '../../static/img/user-item1.png'
					},
					{
						icon: '../../static/icon/u2.png',
						name: '待检验订单',
						tip: '检验 | 添加记录',
						bg: '../../static/img/user-item2.png'
					},
					{
						icon: '../../static/icon/u3.png',
						name: '外发检验订单',
						tip: '订单外发处理',
						bg: '../../static/img/user-item1.png'
					},
					{
						icon: '../../static/icon/u4.png',
						name: '我的订单',
						tip: '订单列表 | 提交记录',
						bg: '../../static/img/user-item2.png'
					},
					{
						icon: '../../static/icon/u5.png',
						name: '工资记录',
						tip: '历月工资详情',
						bg: '../../static/img/user-item1.png'
					},
					{
						icon: '../../static/icon/u6.png',
						name: '打卡记录',
						tip: '上班 | 迟到记录',
						bg: '../../static/img/user-item2.png',
						src: '/pages/user/dkdetail'
					},
					{
						icon: '../../static/icon/u7.png',
						name: '奖罚记录',
						tip: '奖励 | 处罚记录',
						bg: '../../static/img/user-item2.png'
					},
					{
						icon: '../../static/icon/u8.png',
						name: '订单监管',
						tip: '订单详情',
						bg: '../../static/img/user-item2.png'
					},
					{
						icon: '../../static/icon/u9.png',
						name: '待处理办件',
						tip: '处罚 | 报废返工处理',
						bg: '../../static/img/user-item1.png',
						num: 2
					},
					{
						icon: '../../static/icon/u10.png',
						name: '外发不合格处理',
						tip: '订单外发处理',
						bg: '../../static/img/user-item2.png',
						num: 2
					},
					{
						icon: '../../static/icon/u11.png',
						name: '处罚管理',
						tip: '奖励 | 处罚记录',
						bg: '../../static/img/user-item1.png',
						num: 2
					},
					{
						icon: '../../static/icon/u12.png',
						name: '报废返工处理',
						tip: '提交报废返工的数量',
						bg: '../../static/img/user-item1.png',
						num: 2
					},
					{
						icon: '../../static/icon/u13.png',
						name: '外发订单管理',
						tip: '提交检验 | 检验记录',
						bg: '../../static/img/user-item2.png'
					},
					{
						icon: '../../static/icon/u14.png',
						name: '外发不合格通知',
						tip: '外发不合格消息',
						bg: '../../static/img/user-item2.png',
						num: 2
					},
					{
						icon: '../../static/icon/u15.png',
						name: '订单状态预警',
						tip: '订单到期时间预警',
						bg: '../../static/img/user-item1.png',
						num: 2
					},
					{
						icon: '../../static/icon/u16.png',
						name: '材料未到通知',
						tip: '材料未到预警',
						bg: '../../static/img/user-item1.png',
						num: 2
					},
					{
						icon: '../../static/icon/u17.png',
						name: '外发未到通知',
						tip: '外发时间到期预警',
						bg: '../../static/img/user-item2.png',
						num: 2
					},
					{
						icon: '../../static/icon/u18.png',
						name: '订单外发',
						tip: '订单外发给合作公司',
						bg: '../../static/img/user-item2.png',
						num: 2
					},
					{
						icon: '../../static/icon/u19.png',
						name: '订单抽检',
						tip: '订单抽取检验',
						bg: '../../static/img/user-item1.png'
					},
				]
			};
		},
		computed: {
			...mapState('user', ['hasLogin']),
		},
		onShow() {
			// 判断是否已经登录
			// this.loadBaseData();
		},
		methods: {
			toJSON() {
				return this;
			},
			...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
			navTo(item) {
				if (item.src) {
					console.log(111);
					uni.navigateTo({
						url: item.src
					})
				}
			},
			// 加载初始数据
			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;
			}
		}
	}

	.main {
		padding: 50rpx 10rpx;
		display: flex;
		flex-wrap: wrap;

		.main-item {
			padding: 26rpx 36rpx 34rpx;
			width: 46%;
			height: 220rpx;
			box-shadow: 0px 7rpx 20rpx 0px rgba(50, 50, 52, 0.09);
			border-radius: 15rpx;
			margin: 0 10rpx 30rpx;
			position: relative;
			line-height: 1;

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

			.main-bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				width: 100%;
				height: 220rpx;
			}

			.main-info {
				position: absolute;
				z-index: 3;
				right: 0;
				top: 0;
				width: 120rpx;
				height: 38rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.main-info-bg {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					width: 120rpx;
					height: 38rpx;
				}

				.main-info-name {
					position: relative;
					z-index: 4;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.main-icon {
				position: relative;
				z-index: 2;
				height: 50rpx;
			}

			.main-name {
				position: relative;
				z-index: 2;
				margin-top: 26rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #3F3F3F;
			}

			.main-tip {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #8C8C8C;
				position: relative;
				z-index: 2;
				margin-top: 14rpx;
			}
		}
	}
</style>