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" @click="scanCode()" v-if='hasLogin'></u--image>
					<u--image @click="goDetailPage('/pages/mine/set',true)" 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 v-if='userName' class='username'>{{userName}} {{cargoCall}}</view>
							<view v-else class='username'>{{userInfo.userName}} </view>
							<view @click="goDetailPage('/pages/mine/cargoowner/cargoowner',true)" v-if='status'
								class='currectstatus'>已认证</view>
							<view @click="goDetailPage('/pages/mine/cargoowner/cargoowner',true)" v-if='!status'
								class='currectstatus1'>
								{{CargoOwner.authenticationStatus?CargoOwner.authenticationStatus:'未认证'}}
						</view>
					</view>
					<view class='phone'>{{starUserphone}}</view>
				</view>
				<view class='information' v-else @click="toLogin">立即登录</view>
			</view>
			<view v-if='hasLogin&&!status1' 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',true)" class='promptlyAuthentication'>立即认证
				</view>
			</view>
		</view>

		<view class='flex operate flex-space-around'>
			<view style='font-size:14px;' class='flex items-center' @click="toMyRelease">
				<u--image style='margin-right:8px;position:relative;top:3px;' :showLoading="true"
					src="../../static/mine/wodefabu.png" width="42px" height="42px"></u--image>我的发布
			</view>
			<view style='font-size:14px;' class='flex items-center' @click="goDetailPage('/pages/mine/evaluate')">
				<u--image style='margin-right:8px;position:relative;top:3px;' :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',false)">
				<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>
					<image class='right' src="@/static/mine/right.png" mode=""></image>
					<!-- <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',false)">
				<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'>
					<image class='right' src="@/static/mine/right.png" mode=""></image>
					<!-- <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',false)">
				<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>
					<image class='right' src="@/static/mine/right.png" mode=""></image>
					<!-- <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',true)">
				<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'>
					<image class='right' src="@/static/mine/right.png" mode=""></image>
					<!-- <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',false)">
				<view  class='flex'>
					<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>
					<u-badge v-if='redDotPrompt==0' :isDot="true" type="error"></u-badge>
				</view>
				<view >
					<image class='right' src="@/static/mine/right.png" mode=""></image>
					<!-- <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 align-center">
					<u--image style='margin-right:8px;' :showLoading="true" src="../../static/images/mine/kf.png"
						width="20px" height="20px"></u--image>
					<view>联系客服</view>
				</view>
				<view>
					<image class='right' src="@/static/mine/right.png" mode=""></image>
				</view>
			</view>
			<view class="flex flex-space-between content1-item"
				@click="goDetailPage('/pages/mine/helpDescription',true)">
				<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>
					<image class='right' src="@/static/mine/right.png" mode=""></image>
					<!-- <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: '',
				CargoOwner: {},
				redDotPrompt:1,
				showCancelButton: true,
				isShowAlert: false,
				alertTitle: '',
				userName: '',
				phone: '',
				status: false,
				status1: false,
				alertContent: '您尚未登录，是否立即登录？',
				cargoCall: "",
			};
		},
		onShow() {
			uni.setTabBarItem({
				index: 0,
				text: '订单',
				iconPath: 'static/images/common/dingdan@2x(1).png',
				selectedIconPath: 'static/images/common/dingdan@2x.png'
			})
			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) {
							this.CargoOwner = res.data
							if (res.data.authenticationStatus == '审核中' || res.data.authenticationStatus == '已驳回' || res
								.data.authenticationStatus == '未认证' || res.data.authenticationStatus == '已过期') {
								if (res.data.authenticationStatus == '未认证') {
									this.status1 = false
								} else {
									this.status1 = true
								}
								this.status = false
							} else {
								this.status = true
								this.status1 = true
							}

						} else {
							this.status = false
							this.status1 = 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.redDotPrompt=res.data.redDotPrompt
						this.userName = res.data.call
						if (res.data.sex) {
							if (res.data.sex == '男') {
								this.cargoCall = "先生"
							} else {
								this.cargoCall = "女士"
							}
						}
					}
					this.$forceUpdate()
				})
				// 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 => {
					console.log('111111111111111111111')
					console.log(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() {
				if (!this.hasLogin || !this.userInfo || this.userName == "立即登录") {
					uni.$u.route('/pages/public/login');
				} else {
					uni.$u.route('/pages/release/record');
				}

			},
			goDetailPage(src, isClick) {
				if (!this.hasLogin || !this.userInfo || this.userName == "立即登录") {
					// if(src!='/pages/mine/helpDescription'){
					uni.$u.route('/pages/public/login');
					// }else{
					// 	uni.$u.route(src);
					// }
				} else {
					this.$request.baseRequest('get', '/cargoOwnerInfo/firstAuthentication', {
						phone: this.userInfo.phone
					}).then(res => {
						uni.setStorageSync("firstAuthentication", res.data)
						if (res.data.authenticationStatus!='已认证'&&!isClick) {
							uni.$u.toast('请先完成货主认证！')
						}else{
							if(src=='/pages/mine/agentCargoOwner'){
								this.$request.baseRequest('post', '/cargoOwnerInfo/api/readRed', {
									id: res.data.id
								}).then(res1 => {
									uni.$u.route(src);
								})
							}else{
								uni.$u.route(src);
							}
							
						}
					})
					// if (isClick) {
					// 	uni.$u.route(src);
					// } else {
					// 	uni.$u.toast('请先完成货主认证！')
					// }


				}

			},
			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 - 35px);
		.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;
	}

	.right {
		width: 10px;
		height: 10px;
	}
	.u-badge--error{
		background:#EE5032;
		width:6px;
		height:6px;
	}
</style>