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">
					<u--image class='image' :showLoading="true" src="../../static/mine/saoma.png" width="20px"
						height="20px"></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"></u--image>
					<view class='information' v-if='hasLogin'>
						<view class='flex items-center'>
							<view class='username'>{{userName}}</view>
							<view v-if='status' class='currectstatus'>已认证</view>
							<view v-if='!status' class='currectstatus1'>未认证</view>
						</view>
						<view class='phone'>{{phone}}</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'>
					<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/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/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/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/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/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='true' 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 {
				isShowAlert:false,
				alertTitle: '',
				userName: '',
				phone: '',
				status: false,
				alertContent: '您尚未登录，是否立即登录？',
			};
		},
		onShow() {
			if (!this.hasLogin) {
				this.isShowAlert = true
				return
			}
		},
		onLoad() {
			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.userName = this.userInfo.userName
			this.phone = this.userInfo.phone.replace(this.userInfo.phone.substring(3, 7), "****")
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			// 手机号中间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
			},
			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>