wangluohuoyun-huozhuapp/pages/mine/cargoowner/cargoowner.vue

<template>
	<view class='content'>
<!-- 		<view @click='goDetailPage("/pages/mine/cargoowner/editpersonalinformation")'
			:class="[statustext == '审核中'?'identity2':'identity']" class=' flex items-center'>
			<view style='width:100%;' class='flex items-center content1'>
				<u--image style='margin-right:5px;' class='image' :showLoading="true"
					:src="status?'../../../static/mine/huozhurenzheng/shenfen2.png':'../../../static/mine/huozhurenzheng/shenfen.png'"
					width="32px" height="32px"></u--image>
				<view style='width:100%;'>
					<view v-if='!datastatus' style='font-size:21px;'>身份信息</view>
					<view v-else style='font-size:21px;'>{{personage.name}}</view>
					<view v-if='!datastatus' class='flex flex-space-between'
						style='width:100%;color:#999999;font-size:14px;'>您还未认证身份信息<u-icon name="arrow-right"
							color="#7E7E7E" size="10"></u-icon>
					</view>
					<view v-else class='flex flex-space-between' style='width:100%;color:#999999;font-size:14px;'>
						{{phone}}
						<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
					</view>
				</view>
			</view>
		</view> -->
		 <!-- @click='goDetailPage("/pages/mine/cargoowner/editpersonalinformation")' -->
				<view class=' flex items-center identity' @click='toEditPage()'>
					<view style='width:100%;' class='flex items-center content1'>
						<u--image style='margin-right:5px;' class='image' :showLoading="true"
							:src="personage.authenticationStatus=='已认证'?'../../../static/mine/huozhurenzheng/shenfen2.png':'../../../static/mine/huozhurenzheng/shenfen.png'"
							width="32px" height="32px"></u--image>
						<view style='width:100%;'>
							<view v-if='!personage' style='font-size:21px;'>身份信息</view>
							<view v-else style='font-size:21px;'>{{personage.name}}</view>
							<view v-if="personage.authenticationStatus!='已认证'" class='flex flex-space-between'
								style='width:100%;color:#999999;font-size:14px;'>您的身份信息{{personage.authenticationStatus?personage.authenticationStatus:'未认证'}}
								<u-icon name="arrow-right" color="#7E7E7E" size="10" v-if="datastatus"></u-icon>
							</view>
							<view v-else class='flex flex-space-between' style='width:100%;color:#999999;font-size:14px;'>
								{{starUserphone}}
								<u-icon name="arrow-right" color="#7E7E7E" size="10"></u-icon>
							</view>
						</view>
					</view>
				</view>
		<view>
			<view class="content2-title">所属企业 
			<!-- <text style='color:#999;'>({{enterprise.length}})</text> -->
			</view>
			<view v-if='enterprise.length>0'>
				<view v-for='item in enterprise' class='wrap'>
					<view class='flex flex-space-between'>
						<view>{{item.company}}</view>
						<view v-if='item.status=="企业已驳回"' class='status wtg-color'>{{item.status}}</view>
						<view v-if='item.status=="企业审核中"' class='status number-color'>{{item.status}}</view>
						<view v-if='item.status=="平台审核中"' class='status number-color'>{{item.status}}</view>
						<view v-if='item.status=="平台已驳回"' class='status wtg-color'>{{item.status}}</view>
						<view v-if='item.status=="已认证"' class='status ytg-color'>{{item.status}}</view>
						<view v-if='item.status=="授权已过期"' class='status shz-color'>{{item.status}}</view>
						<view v-if='item.status=="企业暂不可用"' class='status wtg-color'>{{item.status}}</view>
						<view v-if='item.status=="企业不存在"' class='status shz-color'>{{item.status}}</view>
						<view v-if='item.status=="授权已撤销"' class='status shz-color'>{{item.status}}</view>
					</view>
					<view class="row2">
						{{item.advanceFreightService==1?'可垫付运费':'不可垫付运费'}}
					</view>
					<view class="row3">
						<view class="right">
							<!-- v-if='item.status!="平台审核中"&&item.status!="企业审核中"&&item.status!="企业暂不可用"&&item.status!="企业不存在"&&item.status!="授权已撤销"' -->
							<image v-if='item.status!="企业审核中"&&item.status!="平台审核中"' @click='edit(item)'
								style='width:17px;height:17px;margin:0 10px;' src="@/static/mine/company/edit.png">
							</image>
							<image @click='del(item)' style='width:17px;height:17px;margin:0 10px;'
								src="@/static/mine/company/del.png"></image>
						</view>
					</view>
				</view>

			</view>
			<view v-else style='text-align:center;'>
				<image class='image weibangding' :showLoading="true"
					src="../../../static/mine/huozhurenzheng/weibangding.png"></image>
				<view style='font-size:12px;color:#999;'>您还未认证企业信息</view>
			</view>
			<view class='footer'>
				<view @click='goDetailPage("/pages/mine/cargoowner/addEnerprise",1)' class='newlyIncreased' v-if='datastatus'>新增</view>
				<view @click='goDetailPage("/pages/mine/cargoowner/editpersonalinformation")' class='newlyIncreased' v-if="!datastatus">去认证</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				personage: {},
				phone: '',
				status: false,
				datastatus: false,
				statustext: '未认证',
				enterprise: [],
				isFirst:false
			}
		},
		onLoad() {
			
		},
		onShow() {
			var _this = this;
			if (!this.hasLogin) {
				uni.$u.route('/pages/public/login');
			}
			this.getList()
		},
		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: {
			toEditPage(){
				if(this.personage&&this.personage.authenticationStatus=='已认证'){
					uni.$u.route("/pages/mine/cargoowner/editpersonalinformation",this.personage);
				}else{
					uni.$u.route("/pages/mine/cargoowner/editpersonalinformation",this.personage);
				}
			},
			edit(val){
				uni.$u.route('/pages/mine/cargoowner/editEnerprise', val);
			},
			del(val){
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				var that=this
				this.$request.baseRequest('post', '/cargoOwnerCompInfo/api/deleteCargoOwnerComp',{id:val.id} ).then(res => {
					uni.hideLoading()
						that.getList()
				})
				.catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
				});
			},
			goDetailPage(src, status) {
				if (status) {
					uni.setStorageSync('cargoOwnerId', this.personage.id)
				}
				uni.$u.route(src);
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.$request.baseRequest('get', '/cargoOwnerInfo/selectCargoOwner', {
						commonId: this.userInfo.id
					}).then(res => {
						uni.hideLoading()
						if (res.data) {
							this.datastatus = true
							this.personage = res.data
							if (res.data.hyCargoOwnerCompInfoList) {
								this.enterprise = res.data.hyCargoOwnerCompInfoList
								
							}else{
								this.enterprise =[]
							}
							if (this.personage) {
								// this.statustext = this.personage.authenticationStatus
								// if (this.personage.authenticationStatus == '审核中' || this.personage
								// 	.authenticationStatus == '已驳回') {
								// 	this.status = false
								// } else {
								// 	this.status = true
								// }
								this.phone = this.personage.phone
								// this.phone = this.personage.phone.replace(this.personage.phone.substring(3, 7), "****")
							}

						} else {
							this.datastatus = false
						}
					})
					.catch(res => {
						uni.hideLoading()
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						})
					});
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				// this.$request.baseRequest('get', '/cargoOwnerCompInfo/api/addCargoOwnerComp',{commonId:this.userInfo.id} ).then(res => {
				// 	uni.hideLoading()
				// 	if(res.data){
				// 		this.enterprise=res.data
				// 	}
				// })
				// .catch(res => {
				// 	uni.hideLoading()
				// 	uni.showToast({
				// 		title: res.message,
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height:100vh;
		padding-bottom: 320rpx;
	}

	.identity {
		background: linear-gradient(150deg, #FFFFFF 0%, #F8FCFF 100%);
		box-shadow: 9rpx 10rpx 17rpx 0px rgba(53, 105, 255, 0.06), inset 2rpx 4rpx 0px 0px rgba(255, 255, 255, 0.5);
		padding: 60rpx;
		display: flex;
		align-items: center;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.content1 {
		display: flex;
		align-items: center;
	}

	.content2-title {
		margin: 20rpx;
	}

	.weibangding {
		width: 141px;
		height: 141px;
	}

	.footer {
		position: fixed;
		background: #fff;
		width: 100%;
		bottom: 0;
		left: 0;
		padding: 15px 15px 40px;
		box-sizing: border-box;
	}

	.newlyIncreased {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		height: 48px;
		line-height: 48px;
		color: #fff;
		background: url(../../../static/mine/huozhurenzheng/Mask@3x.png) no-repeat;
		background-size: 100%;
	}

	.wrap {
		background: #fff;
		border-radius: 10rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin: 20rpx;
		.row2{
			margin: 20rpx 0;
			color: #AFB3BF;
		}
		.row3 {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;
		}
	}

	.status {
		font-size: 26rpx;
		padding: 5rpx 18rpx;
		border-radius: 20rpx;
	}

	.status.passed {
		background: #25E491;
	}

	.status.aduit {
		background: #FE8031;
	}

	.status.reject {
		background: #FC5A51;
	}

	.content {
		margin-bottom: 200rpx;
	}
</style>