jp-zeroWorkerStation/pages/packages/mine/otherServices/authentication.vue

<template>
	<view>
		<u-navbar back-text="实名认证" back-icon-size="28" back-icon-color="#ffffff" :background="{backgroundColor: '#2795FD',}"
			:back-text-style="{color: '#ffffff'}"></u-navbar>
		<!-- 标签 -->
		<view class="tabs">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="personal-box" v-if="current==0">
			<!-- 个人认证 -->
			<view class="personal-authentication" v-if="authentication">
				<view class="headline">
					您的信息将会被严格保密，请放心填写
				</view>
				<!-- 信息 -->
				<view class="infos-group">
					<view class="item">
						<view class="title">
							手机号码
						</view>
						<view class="value">
							{{personalForm.phone}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							真实姓名
						</view>
						<view class="value">
							<input v-model="personalForm.realName" type="text" placeholder="请填写真实姓名">
						</view>
					</view>
					<view class="item">
						<view class="title">
							身份证号
						</view>
						<view class="value">
							<input v-model="personalForm.idCard" type="text" placeholder="请填写18位身份证号">
						</view>
					</view>
				</view>
				<button class="save" @click="personalAut" v-if="!perinReview">保存</button>
				<button class="save" style="background-color: #777777;" v-else>审核中</button>
			</view>
			
			<!-- 认证成功 -->
			<view class="success" v-if="!authentication">
				<view class="img-box">
					<img src="@/assets/img/success.png" alt="">
				</view>
				<!-- 信息 -->
				<view class="infos-box">
					<view class="item">
						<view class="title">
							手机号码
						</view>
						<view class="title">
							{{personalForm.phone}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							姓名
						</view>
						<view class="title">
							{{personalForm.realName}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							身份证号
						</view>
						<view class="title">
							{{personalForm.idCard.slice(0,1)+'****************'+personalForm.idCard.slice(-1)}}
						</view>
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="tips" v-if="!authentication">
				<view class="tips-item">
					<view class="icon">
						<img src="@/assets/img/shield-user-line.png" alt="">
					</view>
					<view class="text">
						信息安全保护中，认证信息将用于创建信息等功能，与账号为已绑定，未经您允许不对外提供
					</view>
				</view>
				<view class="tips-item">
					<view class="icon">
						<u-icon name="info-circle"></u-icon>
					</view>
					<view class="text">
						每个账号只能进行一次实名认证，认证成功不支持修改
					</view>
				</view>
			</view>
		</view>
		
		<!-- 企业认证 -->
		<view class="enterprise-box" v-if="current==1">
			<view class="enterprise-authentication" v-if="enterprise">
				<view class="headline">
					您的信息将会被严格保密，请放心填写
				</view>
				<!-- 企业信息 -->
				<view class="enterprise-infos">
					<view class="infos-input">
						<view class="item">
							<view class="title">
								企业全称
							</view>
							<view class="input">
								<input v-model="enterpriseForm.name" type="text" placeholder="请填写企业全称">
							</view>
						</view>
						<view class="item">
							<view class="title">
								企业地址
							</view>
							<view class="input">
								<input v-model="enterpriseForm.address" type="text" placeholder="请填写企业地址">
							</view>
						</view>
						<view class="item">
							<view class="title">
								企业联系人
							</view>
							<view class="input">
								<input v-model="enterpriseForm.contactsPersonId" type="text" placeholder="请填写企业联系人">
							</view>
						</view>
					</view>
					<!-- 营业执照 -->
					<view class="business-license">
						<view class="title">
							<view class="title-left">
								营业执照
							</view>
							<view class="title-right">
								请保证图中文字、印章等清晰可辨识
							</view>
						</view>
						<view class="img-box" v-if="entinReview" >
							<img width="100%" height="100%" :src="enterpriseForm.licenseImage" alt="">
						</view>
						<u-upload v-else ref="uUpload" :action="action" name="photoFile" :file-list="listPic"
							:form-data="formData" :header="header" width="686" max-count="1" @on-success="onSuccess">
						</u-upload>
					</view>
				</view>
				<button class="save" @click="enterpriseCer" v-if="!entinReview">保存</button>
				<button class="save" style="background-color: #777777;" v-else>审核中</button>
			</view>
			
			<!-- 企业认证成功 -->
			<view class="success" v-if="!enterprise">
				<view class="img-box">
					<img src="@/assets/img/success.png" alt="">
				</view>
				<!-- 信息 -->
				<view class="infos-box">
					<view class="item">
						<view class="title">
							企业全称
						</view>
						<view class="value">
							{{enterpriseForm.name}}
						</view>
					</view>
					<view class="item">
						<view class="title">
							企业地址
						</view>
						<view class="value">
							
							{{enterpriseForm.address?enterpriseForm.address:'' }}
						</view>
					</view>
					<view class="item">
						<view class="title">
							企业联系人
						</view>
						<view class="value">
							{{enterpriseForm.contactsPersonId?enterpriseForm.contactsPersonId:'' }}
						</view>
					</view>
					<view class="item">
						<view class="title">
							营业执照
						</view>
					</view>
					<view class="img-box">
						<img :src="enterpriseForm.licenseImage" alt="">
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="tips" v-if="!enterprise">
				<view class="tips-item">
					<view class="icon">
						<img src="@/assets/img/shield-user-line.png" alt="">
					</view>
					<view class="text">
						信息安全保护中，认证信息将用于创建信息等功能，与账号为已绑定，未经您允许不对外提供
					</view>
				</view>
				<view class="tips-item">
					<view class="icon">
						<u-icon name="info-circle"></u-icon>
					</view>
					<view class="text">
						每个账号只能进行一次实名认证，认证成功不支持修改
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import * as API_main from '@/apis/pagejs/packages.js'
	import * as API_weixin from '@/apis/weixin.js'
	import {
		checkIdCard
	} from '@/apis/utils'
	
	export default {
		data() {
			return {
				authentication: true,
				enterprise: true,
				perinReview: false,
				entinReview: false,
				list: [{
					name: '个人认证'
				}, {
					name: '企业认证'
				}],
				current: 0,
				personalForm: {
					realName: '',
					idCard: '',
					type: '0'
				},
				enterpriseForm: {
					name: '',
					licenseUrl: '',
					type: '1',
					address: '',
				
					contactsPersonId: '',
					
				},
				phone: '',
				listPic: [],
				action: '',
				header: '',
				formData: {}
			}
		},
		onLoad() {
			this.action = process.car.BASE_URL+"uploadPicture";
			this.formData = {
				subFolder: "licenseUrl"
			}
			var token = this.carhelp.getToken();
			this.header={
				'Authorization': token,
				'X-Requested-With': 'XMLHttpRequest'
			}
		},
		onReady() {
			this.getFindByOpenId();
		},
		methods: {
			onSuccess(data, index, lists, name) {
				//.log(data)
				if(data.result) {
					this.enterpriseForm.licenseUrl = data.data;
				}
			},
			personalAutApi(){
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				API_main.createAuthentication(this.personalForm).then((res) => {
					uni.hideLoading();
					this.getFindByOpenId();
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			personalAut() {
				if(!this.personalForm.realName) {
					uni.showToast({icon: 'none',
						title: "请填写真实姓名",
						icon: "none"
					})
					return
				}
				if(!this.personalForm.idCard) {
					uni.showToast({icon: 'none',
						title: "请填写身份证号",
						icon: "none"
					})
					return
				}
				var checkIdCardResult = checkIdCard(this.personalForm.idCard);
				if (checkIdCardResult !== true) {
					uni.showToast({icon: 'none',
						title: checkIdCardResult,
						icon: "none"
					})
					return;
				}
				var _this=this;
				uni.showModal({
					title: '提示',
					content:"确认提交个人认证信息",
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.personalAutApi()
						} else if (res.cancel) {
							//.log('用户点击取消');
						}
					}
				});
				
				
			},
			enterpriseCerApi() {
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				API_main.createAuthentication({
					enterpriseName: this.enterpriseForm.name,
					licenseUrl: this.enterpriseForm.licenseUrl,
					contactsPersonId: this.enterpriseForm.contactsPersonId,
					address: this.enterpriseForm.address,
					type: this.enterpriseForm.type
				}).then((res) => {
					uni.hideLoading();
					this.getFindByOpenId();
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			enterpriseCer() {
				if(!this.enterpriseForm.name) {
					uni.showToast({icon: 'none',
						title: "请填写企业全称",
						icon: "none"
					})
					return
				}
				if(!this.enterpriseForm.address) {
					uni.showToast({icon: 'none',
						title: "请填写企业地址",
						icon: "none"
					})
					return
				}
				if(!this.enterpriseForm.contactsPersonId) {
					uni.showToast({icon: 'none',
						title: "请填写企业联系人",
						icon: "none"
					})
					return
				}
				if(!this.enterpriseForm.licenseUrl) {
					uni.showToast({icon: 'none',
						title: "请上传营业执照",
						icon: "none"
					})
					return
				}
				
				var _this=this;
				uni.showModal({
					title: '提示',
					content:"确认提交企业认证信息",
					//content: '这是一个模态弹窗',
					success: function(res) {
						if (res.confirm) {
							_this.enterpriseCerApi()
						} else if (res.cancel) {
							//.log('用户点击取消');
						}
					}
				});
				
			},
			getFindByOpenId(){
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				API_weixin.findByOpenId({
					openId:this.carhelp.getOpenId()
				}).then((res) => {
					uni.hideLoading();
					
					var userList = res.data.regUser;
					var enterList = res.data.enterpriseInfo;
					this.personalForm = userList;
					if(userList.status == '1') {
						this.authentication = false;
						this.personalForm.realName = userList.realName;
						
					}
					if(enterList != null) {
						this.enterpriseForm = enterList;
						if(enterList.status == '0') {
							this.entinReview = true;
						} else {
							this.enterprise = false;
						}
					}
					if(userList.status == '0' && userList.idCard != null) {
						this.perinReview = true;
					}
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			change(index) {
				this.current = index;
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 150px;
	}
</style>

<style lang="scss" scoped>
	.headline {
		color: rgba(51, 51, 51, 1);
		padding-left: 32rpx;
		margin-top: 32rpx;
	}

	.personal-box {


		// 信息
		.infos-group {
			background-color: #fff;
			margin-top: 16rpx;

			.item {
				display: flex;
				align-items: center;
				padding: 24rpx 32rpx;

				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					width: 180rpx;
				}

				.value {
					/deep/.uni-input-input {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
					}
				}
			}

			.img-box {
				display: flex;
				justify-content: center;

				img {
					width: 100%;
					height: 440rpx;
				}
			}

		}





	}

	// 企业认证
	.enterprise-box {

		.enterprise-authentication {


			.enterprise-infos {
				background-color: #fff;
				padding: 24rpx 32rpx;
				margin-top: 16rpx;
				.item{
					    padding: 6px 0;
					    border-bottom: 1px solid #f1f1f1;
				}
			}

			.infos-input {
				padding: 0 0 24rpx 0;
				border-bottom: 1px solid #e6e6e6;
			}

			.item {
				display: flex;
				align-items: center;

				.title {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					width: 180rpx;
				}

				.value {
					/deep/.uni-input-input {
						color: rgba(51, 51, 51, 1);
						font-size: 32rpx;
					}
				}
			}
		}

		.business-license {

			.title {
				display: flex;
				justify-content: space-between;
				padding: 24rpx 0 20rpx;

				.title1 {
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
				}

				.title2 {
					color: #999999;
				}

			}

			// 上传
			/deep/.u-list-item {
				width: 686rpx;
				height: 360rpx !important;
			}

			/deep/.u-add-btn {
				color: #ACBAC9;
				font-size: 96rpx
			}

			/deep/.uicon-plus[data-v-2ee87dc9]:before {
				font-size: 72rpx;
			}
		}

	}

	//认证成功
	.success {
		background-color: #fff;

		.img-box {
			display: flex;
			justify-content: center;
			width: 686rpx;
			height: 596rpx;
			margin: 0 auto;
			padding: 48rpx;

			img {
				width: 100%;
				height: 100%;

			}
		}

		// 信息
		.infos-box {

			.item {
				display: flex;
				align-items: center;
				padding: 24rpx;
				margin: 0 32rpx;
				border-bottom: 1px solid #e3e3e3;

				.title {
					color: rgba(119, 119, 119, 1);
					font-size: 16px;
					width: 190rpx;
				}

				.value {
					color: rgba(51, 51, 51, 1);
					font-size: 16px;
				}
			}
		}

	}


	//提示
	.tips {
		padding: 24rpx 32rpx;

		.tips-item {
			display: flex;
			margin-bottom: 24rpx;
			font-size: 24rpx;
			line-height: 34rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;

				img {
					width: 100%;
					height: 100%;
					vertical-align: middle;
				}
			}

			.text {
				flex: 1;
				margin-left: 8rpx;
			}
		}
	}

	// 保存
	.save {
		background-color: rgba(34, 149, 255, 1);
		color: rgba(241, 241, 241, 1);
		font-size: 36rpx;
		height: 96rpx;
		margin: 40rpx 32rpx;
		border-radius: 50px;
	}
</style>