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 : '立即登录' }}</view>
					<view @click="toLogin" class="phone" v-if="hasLogin">{{phone}}</view>
				</view>

			</view>

			<view></view>
		</view>
		<view class="content1">
			<view class="left">
				<view class="icon">
					<image class="sfrz-icon" src="@/static/images/mine/sfrz.png" mode='widthFix'>
					</image>
				</view>
				<view class="right-text" @click="goDetailPage('/pages/mine/driverCertification',1)">
					<view class="top">司机认证</view>
					<view class="bottom">{{hasLogin? statusVal : '你还没有完成身份认证' }}</view>
				</view>

			</view>
			<view class="right">
				<view class="icon">
					<image class="sfrz-icon" src="@/static/images/mine/pingjia@2x.png" mode='widthFix'>
					</image>
				</view>
				<view class="right-text" @click="goDetailPage('/pages/mine/driverCertification')">
					<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> > </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> > </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> > </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'>
					</image>
					<view>帮助说明</view>
				</view>
				<view> > </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> > </view>
			</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='true' confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
			<u-toast ref="uToast"></u-toast>
	</view>
</template>

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

			};
		},
		onShow() {
			console.log("111111111111111111111111111", this.firstAuthentication)
			if (this.firstAuthentication) {
				this.userName = this.firstAuthentication.driverCall
				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 = "立即登录"
			}



		},
		onLoad() {
			that = this

		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'firstAuthentication']),
			// 手机号中间4位加*
			// starUserphone() {
			// 	let reg = /^(\d{3})\d{4}(\d{4})$/;
			// 	if (this.userphone) {
			// 		return this.userphone.replace(reg, "$1****$2");
			// 	}
			// }
		},
		methods: {

			confirmClick() {
				this.isShowAlert = false
				uni.$u.route('/pages/public/login');
			},
			cancelClick() {
				this.isShowAlert = false
			},
			goDetailPage(src,type) {
				if (!this.hasLogin) {
					this.isShowAlert = true;
				} else {
					if(type==1&&this.statusVal == '已认证'){
						src='/pages/mine/editDriverCertification'
					}
					if((type==2||type==3)&&this.isFirstSH){
						this.$refs.uToast.show({
							type: 'error',
							message: "请先完成司机身份认证",
						})
					}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 20rpx;
	}

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

	.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;
		}

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