wangluohuoyun-app/pages/mine/index.vue

<!-- 我的 -->
<template>
	<view class="content">
		<view class="top-height"></view>
		<view class="head">
			<view class="row1">
			<!-- 	<u--image class="flex-end" :showLoading="true" src="../../static/images/mine/saoma.png" width="30px"
					height="30px"></u--image> -->
			</view>
			<view class="row2 flex align-center">
				<u--image class="flex-end" :showLoading="true" :src="headUrl" width="60px" height="60px" shape='circle'>
				</u--image>
				<view class="right-text">
					<!-- <view @click="toLogin" class="name">{{hasLogin? userName : '立即登录' }} -->
					<!-- {{hasLogin?driverSex:""}} -->
					<!-- <view class="name" v-if='userName'></view> -->
					<view @click="toLogin" class="name">{{hasLogin? userName : '立即登录' }} {{hasLogin?driverSex:""}}</view>
					<view @click="toLogin" class="phone" v-if="hasLogin">{{starUserphone}}</view>
				</view>
			</view>
			<view></view>
		</view>
		<view class="content1">
			<view @click="goDetailPage('/pages/mine/driverCertification',1)" class="left">
				<view class="icon">
					<image class="sfrz-icon" src="@/static/images/mine/sfrz.png" mode='widthFix'>
					</image>
				</view>
				<view class="right-text" >
					<view class="top">司机认证</view>
					<view class="bottom">{{hasLogin? statusVal : '你还没有完成身份认证' }}</view>
				</view>
			</view>
			<view @click="goDetailPage('/pages/mine/evaluate')" class="right">
				<view class="icon">
					<image class="sfrz-icon" src="@/static/images/mine/pingjia@2x.png" mode='widthFix'>
					</image>
				</view>
				<view class="right-text" >
					<view class="top">货主评价</view>
					<view class="bottom">看看货主对你的评价吧</view>
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="flex flex-space-between" @click="goDetailPage('/pages/mine/manageBankCards/index',2)">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/yhk@2x.png" mode='widthFix'>
					</image>
					<view>管理银行卡</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<view class="flex flex-space-between" @click="goDetailPage('/pages/mine/manageVehicles/index',3)">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/cheliang@2x.png" mode='widthFix'>
					</image>
					<view>管理车辆</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<view class="flex flex-space-between" @click="goDetailPage('/pages/mine/often/oftenRoute',3)">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/changyongluxian.png" mode='widthFix'>
					</image>
					<view>常用路线</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<view class="flex flex-space-between" @click="$helper.contactCustomerService()">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/kf.png" mode='widthFix'>
					</image>
					<view>联系客服</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<view class="flex flex-space-between" @click="goDetailPage('/pages/mine/helpDescription')">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/icon-help@2x.png" mode='widthFix' style="top: 6rpx;">
					</image>
					<view>帮助说明</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<view class="flex flex-space-between" @click="goDetailPage('/pages/mine/set')">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/set.png" mode='widthFix'>
					</image>
					<view>设置</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<view class="flex flex-space-between" @click="goDetailPage('/pages/mine/index1')">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/set.png" mode='widthFix'>
					</image>
					<view>测试</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view>
			<!-- 	<view class="flex flex-space-between" @click="goDetailPage('/pages/mine/evaluate')">
				<view class="flex align-center">
					<image class="img" src="@/static/images/mine/set.png" mode='widthFix'>
					</image>
					<view>货主评价</view>
				</view>
				<view>
					<image src="../../static/images/myimg/gengduo1@3x.png" class="arrow"></image>
				</view>
			</view> -->
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' :confirmText='confirmText'
			:showCancelButton='showCancelButton' confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	var that;
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				confirmText: '确定',
				showCancelButton: true,
				userName: '',
				phone: '',
				headUrl: "../../static/images/myimg/YongHu@3x.png",
				isShowAlert: false,
				alertTitle: '您尚未登录，是否立即登录？',
				// alertContent: '您尚未登录，是否立即登录？',
				statusVal: '',
				isFirstRZ: null,
				driverCall: '',
				isFirstSH: false,
				driverSex: ""

			};
		},
		onShow() {
			uni.setTabBarItem({
				index: 0,
				text: '货源',
				iconPath: 'static/images/common/huoyuan@2x(1).png',
				selectedIconPath: 'static/images/common/huoyuan@2x.png'
			})
			uni.setTabBarItem({
				index: 2,
				text: '订单',
				iconPath: 'static/images/common/dingdan@2x(1).png',
				selectedIconPath: 'static/images/common/dingdan@2x.png'
			})
			// console.log("111111111111111111111111111", this.firstAuthentication)
			//获取认证状态
			// console.log(userInfo)
			// console.log(hasLogin)
			if (!this.hasLogin) {
				this.isShowAlert = true
				return
			}
			this.getAuthenticationStatus()
			that.$request.baseRequest('get', '/newsInfo/unreadMessage', {
				reCommonId: this.userInfo.id,
			}).then(res3 => {
				if (res3.data||res3.data==0) {
					let name = 'myTip';
					let value = res3.data
					if (value == 0) {
						uni.removeTabBarBadge({
							index: 3
						})
					}
					that.$store.commit('$uStore', {
						name,
						value
					});
					if (value != 0 && value) {
						uni.setTabBarBadge({
							index: 3,
							text: value + ""
						})
					}
				}
			})
		},
		async onLoad() {
			that = this

			// let _status = await that.$request.baseRequest('get', '/driverInfo/firstAuthentication', {
			// 	driverPhone: this.userInfo.phone,
			// }).then(res => {
			// 	return res.data.authenticationStatus
			// })
			// if (_status == '已禁用') {
			// 	this.isShowAlert = true
			// 	this.alertTitle = '账号审核中'
			// 	this.confirmText = '退出APP'
			// 	this.showCancelButton = false
			// } else {
			// 	console.log(1231233212332312312213)
			// }


		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			// 手机号中间4位加*
			starUserphone() {
				let reg = /^(\d{3})\d{4}(\d{4})$/;
				if (this.phone) {
					return this.phone.replace(reg, "$1****$2");
				}
			}
		},
		methods: {
			async getAuthenticationStatus() {
				await this.$request.baseRequest('', '/driverInfo/firstAuthentication', {
						driverPhone: this.userInfo.phone,
					}).then(res => {
						if(res.data){
							uni.setStorageSync("firstAuthentication", res.data) //更新缓存数据（解决pc端审核后未及时更新缓存  用于车友判断）
						}
						this.firstAuthentication = res.data
						if (this.firstAuthentication) {
							this.isFirstSH = false
							if (this.firstAuthentication.driverSex == '女') {
								this.driverSex = "女士"
								this.userName = this.firstAuthentication.driverCall
							} else if (this.firstAuthentication.driverSex == '男') {
								this.userName = this.firstAuthentication.driverCall
								this.driverSex = "先生"
							} else {
								// this.userName = this.firstAuthentication.driverCall
								this.userName = this.userInfo.userName //未认证时  显示（用户 + 电话号）未认证没有性别,通过性别判断认证或未认证
								this.driverSex = ""
							}

							if (this.firstAuthentication.authenticationStatus == '审核中') {
								this.statusVal = '身份认证审核中'
							} else if (this.firstAuthentication.authenticationStatus == '未通过') {
								this.statusVal = '身份认证未通过'
							}  else if (this.firstAuthentication.authenticationStatus == '已驳回') {
								this.statusVal = '已驳回'
							} else if (this.firstAuthentication.authenticationStatus == '已过期') {
								this.statusVal = '证件已过期'
							}  else if (this.firstAuthentication.authenticationStatus == '未认证') {
								this.statusVal = '未认证'
							}else {
								this.statusVal = '已认证'
							}
						} else {
							this.statusVal = '你还没有完成身份认证'
							this.userName = this.userInfo.userName
							this.isFirstSH = true
						}
						this.phone = this.userInfo.phone
						if (this.userInfo) {
							if (!this.userInfo.avatarUrl) {
								this.headUrl = "../../static/images/myimg/YongHu@3x.png"
							} else {
								this.headUrl = this.userInfo.avatarUrl
							}
							this.userphone = this.userInfo.phone

						} else {
							this.headUrl = "../../static/images/myimg/YongHu@3x.png"
							this.username = "立即登录"
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			confirmClick() {
				// #ifdef APP-PLUS
				if (this.alertTitle == '账号审核中') {
					if (uni.getSystemInfoSync().platform == 'ios') {
						plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
					} else if (uni.getSystemInfoSync().platform == 'android') {
						plus.runtime.quit();
					}
					return
				}
				// #endif
				this.isShowAlert = false
				uni.$u.route('/pages/public/login');
			},
			cancelClick() {
				this.isShowAlert = false
			},
			goDetailPage(src, type) {
				console.log(type)
				if (!this.hasLogin) {
					this.isShowAlert = true;
				} else {
					if (type == 1 && this.statusVal == '已认证' || type == 1 &&this.statusVal == '证件已过期' || type == 1 &&this.statusVal == '身份认证未通过'|| type == 1 &&this.statusVal == '已驳回') {
						src = '/pages/mine/editDriverCertification'
					}
					if ((type == 2 || type == 3) && this.isFirstSH) {
						this.$refs.uToast.show({
							type: 'error',
							message: "请先完成司机身份认证",
						})
					} else if (type == 1 && this.statusVal == '身份认证审核中') {
						this.$refs.uToast.show({
							type: 'error',
							message: "正在审核中，请耐心等待！",
						})
						return
					} else {
						uni.$u.route(src);
					}
				}
			},
			toLogin() {
				console.log("userInfo", this.userInfo)
				if (!this.hasLogin || !this.userInfo || this.userName == "立即登录") {
					uni.$u.route('/pages/public/login');
				} else {}
				// else if(!this.userInfo.nickname){
				// 	this.inputShow = true
				// 	this.inputStatus = 'inline'
				// 	this.feild = "nickname"
				// 	this.inputContent = ''
				// }
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url(../../static/images/mine/bg@2x.png);
		background-size: 100% 100%;
		height: 100vh;
		padding: 0 25rpx;
	}

	.top-height {
		height: var(--status-bar-height);
	}

	.arrow {
		margin-left: 15px;
		width: 8px;
		height: 12px;
		// justify-content: flex-end

	}

	.head {
		.row1 {
			display: flex;
			justify-content: flex-end;
			margin-top: 46rpx;
		}

		.row2 {
			.right-text {
				margin-left: 40rpx;
			}

			.name {
				font-size: 42rpx;
				font-weight: 700;
				color: #333333;
			}

			.phone {
				font-size: 26rpx;
				font-weight: 500;
				color: #8F97AB;
			}
		}

	}

	.content1 {
		display: flex;
		justify-content: space-between;
		margin-top: 60rpx;

		.left,
		.right {
			width: 49%;
			padding: 30rpx 20rpx;
			background: white;
			border-radius: 25rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.sfrz-icon {
				width: 42rpx;
				height: 42rpx;
			}

			.right-text {
				margin-left: 20rpx;

				.top {
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
				}

				.bottom {
					margin-top: 6rpx;
					font-size: 24rpx;
					color: #898989;
				}
			}
		}
	}

	.content2 {
		background: white;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.img {
			margin-right: 10rpx;
			width: 40rpx;
			height: 40rpx;
			top: 2rpx;
		}

		.flex-space-between {
			margin: 10rpx 0 50rpx 0;
		}
	}
</style>