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 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="https://cdn.uviewui.com/uview/album/1.jpg" width="56px"
					height="56px"></u--image>
					<view class='information' v-if='hasLogin'>
						<view class='flex items-center'>
							<view class='username'>李振华</view>
							<view class='currectstatus'>已认证</view>
						</view>
						<view class='phone'>18513069273</view>
					</view>
					<view class='information' v-else @click="toLogin">立即登录</view>
				</view>
				<view 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'>
					<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/manageBankCards/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/manageVehicles/index')">
					<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="$helper.contactCustomerService">
					<view class='flex items-center'><u--image style='margin-right:8px;' :showLoading="true" src="../../static/mine/kefu.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>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				userName:'',
			};
		},
		onLoad() {
			// debugger
			this.userName = this.userInfo.userName
		},
		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: {
			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 36px 17px;
	}
	.currectstatus{
		font-size:10px;
		color:#D6B798;background:#161111;
		padding:1px 6px;
		border-radius:10px;
		margin:0 6px;
	}
	.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-bottom:15px;
	}
	.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%);;
	}
</style>