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">{{starUserphone}}</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">
					<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>
	var that;
	import {
		mapState
	} from 'vuex';
	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)
			//获取认证状态
			// 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) {
					let name = 'myTip';
					let value = res3.data
					if (value == 0) {
						uni.removeTabBarBadge({
							index: 2
						})
					}
					that.$store.commit('$uStore', {
						name,
						value
					});
					if (value != 0 && value) {
						uni.setTabBarBadge({
							index: 2,
							text: value + ""
						})
					}
				}
			})
		},
		onLoad() {
			debugger
			that = this

		},
		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 => {
						debugger
						this.firstAuthentication = res.data
						console.log("this.firstAuthentication", this.firstAuthentication)
						if (this.firstAuthentication) {
							this.isFirstSH = false
							if (this.firstAuthentication.driverSex == '女') {
								this.userName = this.firstAuthentication.driverCall + '女士'
							} else {
								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 = "立即登录"
						}
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			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'
					}
					console.log('this.isFirstSH', this.isFirstSH)
					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>