wangluohuoyun-huozhuapp/pages/mine/index.vue

<!-- 我的 -->
<template>
	<view class="container">
		<view class='container_content'>
			<view class="head">
				<view style='margin-bottom:14px;' class="row flex flex-end" v-if='hasLogin'>
					<u--image class='image' :showLoading="true" src="../../static/mine/saoma.png" width="20px"
						height="20px" @click="scanCode()"></u--image>
					<u--image @click="goDetailPage('/pages/mine/set')" style='margin-right:0;' class='image'
						:showLoading="true" src="../../static/mine/shezhi.png" width="20px" height="20px"></u--image>
				</view>
				<view class="flex">
					<u--image :showLoading="true"
						:src="userInfo.avatarUrl?userInfo.avatarUrl:'../../static/mine/avatar1.png'" width="56px"
						height="56px" shape='circle'></u--image>
					<view class='information' v-if='hasLogin'>
						<view class='flex items-center'>
							<view class='username'>{{userName}} {{cargoCall}}</view>
							<view v-if='status' class='currectstatus'>已认证</view>
							<view v-if='!status' class='currectstatus1'>未认证</view>
						</view>
						<view class='phone'>{{starUserphone}}</view>
					</view>
					<view class='information' v-else @click="toLogin">立即登录</view>
				</view>
				<view v-if='hasLogin&&!status' class='authentication flex flex-space-between'>
					<view>
						<view style='font-size:14px;'>货主身份认证</view>
						<view style='color:#DDA558;font-size:12px;'>您还没有完成货主认证哦~</view>
					</view>
					<view @click="goDetailPage('/pages/mine/cargoowner/cargoowner')" class='promptlyAuthentication'>立即认证
					</view>
				</view>
			</view>

			<view class='flex operate flex-space-around'>
				<view class='flex items-center' @click="toMyRelease">
					<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/wodefabu.png"
						width="42px" height="42px"></u--image>我发布的
				</view>
				<view class='flex items-center' @click="goDetailPage('/pages/mine/evaluate')">
					<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/pingjia.png"
						width="42px" height="42px"></u--image>
					司机评价
				</view>
			</view>
			<view class="content1">
				<view class="flex flex-space-between content1-item"
					@click="goDetailPage('/pages/mine/myAccount/index')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/zhanghu.png"
							width="20px" height="20px"></u--image>我的账户
					</view>
					<view>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view>
				<view class="flex flex-space-between content1-item" @click="goDetailPage('/pages/mine/company/index')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/wodegongsi.png"
							width="20px" height="20px"></u--image>我的公司
					</view>
					<view class='flex'>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view>
				<view class="flex flex-space-between content1-item"
					@click="goDetailPage('/pages/mine/manageBankCards/index')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/yinhangka.png"
							width="20px" height="20px"></u--image>我的银行卡
					</view>
					<view>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view>
				<view class="flex flex-space-between content1-item"
					@click="goDetailPage('/pages/mine/cargoowner/cargoowner')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/huozhu.png"
							width="20px" height="20px"></u--image>货主认证
					</view>
					<view class='flex'>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view>
				<view class="flex flex-space-between content1-item"
					@click="goDetailPage('/pages/mine/agentCargoOwner')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/dailihuozhu.png"
							width="20px" height="20px"></u--image>代理货主
					</view>
					<view>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view>
				<view class="flex flex-space-between content1-item"
					@click="goDetailPage('/pages/mine/helpDescription')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true"
							src="../../static/mine/bangzhushuoming.png" width="20px" height="20px"></u--image>帮助说明
					</view>
					<view>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view>
				
				<!-- 		<view class="flex flex-space-between content1-item"
					@click="goDetailPage('/pages/mine/driverEvaluation')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/dailihuozhu.png"
							width="20px" height="20px"></u--image>司机评价
					</view>
					<view>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view> -->
				<!-- <view class="flex flex-space-between content1-item" @click="goDetailPage('/pages/mine/set')">
					<view class='flex items-center'>
						<u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/dailihuozhu.png"
							width="20px" height="20px"></u--image>设置
					</view>
					<view>
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view> -->

			</view>
		</view>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='showCancelButton' confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				confirmText: '',
				showCancelButton: true,
				isShowAlert: false,
				alertTitle: '',
				userName: '',
				phone: '',
				status: false,
				alertContent: '您尚未登录，是否立即登录？',
				cargoCall: "",
			};
		},
		onShow() {
			if (this.hasLogin) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('get', '/cargoOwnerInfo/selectCargoOwner', {
						commonId: this.userInfo.id
					}).then(res => {
						uni.hideLoading()
						if (res.data) {
							if (res.data.authenticationStatus == '审核中' || res.data.authenticationStatus == '已驳回') {
								this.status = false
							} else {
								this.status = true
							}

						} else {
							this.status = false
						}
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
				this.$request.baseRequest('get', '/cargoOwnerInfo/firstAuthentication', {
					phone: this.userInfo.phone
				}).then(res => {
					uni.setStorageSync("firstAuthentication", res.data)
					if (res.data) {
						this.userName = res.data.call
						if (res.data.sex == '男') {
							this.cargoCall = "先生"
						} else {
							this.cargoCall = "女士"
						}
					}else{
						this.userName = this.userInfo.userName
					}
				})
				// this.phone = this.userInfo.phone ? this.userInfo.phone.replace(this.userInfo.phone.substring(3, 7),"****") : ''
				this.phone = this.userInfo.phone
				if (!this.cargoCall) {
					this.userName = this.userInfo.userName
				}
				if (!this.hasLogin) {
					this.isShowAlert = true
					return
				}
			}

		},
		onLoad() {

		},
		computed: {
			...mapState(['hasLogin', 'userInfo', "firstAuthentication"]),
			// 手机号中间4位加*
			starUserphone() {
				let reg = /^(\d{3})\d{4}(\d{4})$/;
				if (this.phone) {
					return this.phone.replace(reg, "$1****$2");
				}
			}
		},
		methods: {
			scanCode() {
				let _this = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码内容：' + res.result);

						_this.token = res.result.split('?token=')[1];
						_this.mobileScanOk();
					}
				});
			},
			mobileScanOk() {
				this.$request.baseRequest('get', '/login/loginInfo', {
					token: this.token
				}).then(res => {
					let resultData = res;
					console.log(resultData);
					uni.navigateTo({
						url: `./confirm?token=${this.token}`
					});

				})
			},
			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
			},
			toMyRelease() {
				uni.$u.route('/pages/release/record');
			},
			goDetailPage(src) {
				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>
	.container {
		padding-top: 85px;
		padding-top: 35px;
		background-color: #F5F6FA;
		position: relative;
		width: 100vw;
		overflow: hidden;
		background: url('~@/static/mine/bg@3x.png');
		background-size: 100% 100%;
		margin: 0 auto;
		height: calc(100vh - 0px);

		.container_content {
			padding: 18px;
		}
	}

	.image {
		margin: 0 7px;
	}

	.username {
		font-size: 21px;
	}

	.information {
		margin: 0 0 10px 17px;
	}

	.currectstatus {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 40rpx;
		background: #161111;
		border-radius: 16px;
		color: #D6B798;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.currectstatus1 {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100rpx;
		height: 40rpx;
		background: linear-gradient(145deg, #C1C3CC 0%, #85909E 100%);
		;
		border-radius: 16px;
		color: #D6B798;
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.phone {
		color: #8F97AB;
		font-size: 13px;
		margin-top: 5px;
	}

	.operate {
		font-size: 16px;
		font-weight: 600;
		background: #fff;
		border-radius: 10px;
		padding: 10px 15px;
		margin: 15px 0;
	}

	.content1 {
		background: #fff;
		padding: 10px;
		border-radius: 10px;

		.content1-item {
			padding: 10px;
		}
	}

	.authentication {
		border: 1px solid #F3EACF;
		margin: 10px 0;
		height: 64px;
		border-radius: 10px;
		padding: 15px;
		box-sizing: border-box;
		background: linear-gradient(144deg, #FEFAEE 0%, #FEFDF8 100%);
	}

	.promptlyAuthentication {
		font-size: 13px;
		padding: 8px 16px;
		border-radius: 15px;
		background: linear-gradient(327deg, #EDBB63 0%, #FFDEA5 100%);
		;
	}

	.items-center {
		align-items: center;
	}
</style>