hjt_erdao_WeChatApplet/pages/soldier/home/identity.vue

<template>
	<view class="identity main-bg">
		<u-form :model="form" ref="uForm" :rules="rules">
			<u-form-item 
				:leftIconStyle="{color: '#2E4F1C', fontSize: '40rpx'}" 
				left-icon="account-fill" 
				label-width="180" 
				:label-position="labelPosition" 
				prop="veteransName">
				<u-input 
					v-model="form.veteransName" 
					placeholder-style="color: #2E4F1C;"
					placeholder="请输入您的姓名" />
			</u-form-item>
			<u-form-item
				prop="veteransIdcard"
				label-width="180" 
				:label-position="labelPosition">
				<view class="form-item">
					<image src="../../../static/idcard.png" class="form-img"></image>
					<u-input 
						v-model="form.veteransIdcard" 
						placeholder-style="color: #2E4F1C;"
						placeholder="请输入您的身份证号码" />
				</view>
			</u-form-item>
			<u-form-item
				:leftIconStyle="{color: '#2E4F1C', fontSize: '40rpx'}" 
				left-icon="phone-fill" 
				label-width="180" 
				:label-position="labelPosition" 
				>
				<u-input 
					v-model="form.veteransTel" 
					placeholder-style="color: #2E4F1C;"
					placeholder="请输入您的手机号码" />
			</u-form-item>
			<u-form-item
			  :leftIconStyle="{color: '#2E4F1C', fontSize: '40rpx'}"
			  left-icon="calendar-fill" 
			  :label-position="labelPosition" 
			  prop="levelType" 
			  label-width="180">
				<u-input 
				type="select" 
				:select-open="selectShow" 
				v-model="levelType"
				placeholder="请选择身份类别"
				placeholder-style="color: #2E4F1C;"
				@click="selectShow = true" />
				<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
			</u-form-item>
			<view class="store-dis">
				<view class="store-address">
					<view class="select-address">
						<view style="color: #303133;" class="font-twenty">
							家庭住址
						</view>
						<u-input
							v-model="form.address" 
							placeholder-style="color: #2E4F1C;"
							placeholder="请选择地址"/>
					</view>
				</view>
				<view class="map-icon" @click="chooseLocation()">
					<image src="/static/map.png" class="icon-img"></image>
				</view>
			</view>
			<view class="form-upload">
				<view class="upload-title font-twenty font-color2">
					照片上传
					<view class="tips font-twenty font-color5">*省外必须上传</view>
				</view>
				<view style="display: flex;">
					<image :src="image(form.veteransPic)" v-if='flag' style="width:160rpx; height:160rpx"></image>
					<u-upload
						v-else
						width="160"
						height="160"
						:action="action"
						max-count="1" 
						@on-success="onSuccess">
					</u-upload>
				</view>
			</view>
		</u-form>
		<view class="point font-color5">
			{{ string }}
		</view>
		<view class="btn1" v-if='flag'>
			<view v-if="type === '2'" class="form-submit form-submit-nei font-thirty">您已认证</view>
			<view v-else-if="type === '3'" class="form-submit11 form-submit-nei font-thirty">您是军属，无法认证</view>
		</view>
		<view v-else>
			<view class="font-twenty-two font-color2" style="text-align: center; padding-top: 25rpx;" @click="gotoDetails">请认真阅读平台服务协议《服务及隐私协议》使用平台</view>
			
			<view class="btn">
				<view @click="submit('1')" class="form-submit form-submit-nei font-thirty">省内认证</view>
				<view @click="submit('2')" class="form-submit form-submit-wai font-thirty">省外认证</view>
			</view>
		</view>
		<!-- <view class="btn">
			<view @click="submit('1')" class="form-submit form-submit-nei font-thirty">省内认证</view>
			<view @click="submit('2')" class="form-submit form-submit-wai font-thirty">省外认证</view>
		</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import server from "@/api/index";
	import http from '@/common/http.js';
	import amap from '@/lib/amap-wx.130.js';
	export default {
		data() {
			return {
				action: http.webUrl+`/wx/common/upload`,
				labelPosition: 'left',
				selectShow: false,
				userInfo: null,
				flag: true,
				levelType: null,//身份
				type: '',
				addressName: '',
				key:'1dc63f21c12985e199a715faf4c02f36',
				form: {
					veteransName: '',
					veteransIdcard: '',
					veteransTel: '',
					veteransPic:'',
					level: null,
					address: ''
				},
				selectList: [],
				string: '备注：1.省内军人不需要上传照片（即输入姓名与身份证号，然后点击【省内认证】即可）2.省外需要上传相关凭证（即需要上传照片，然后点击【省外认证】即可',
				rules: {
					veteransName: [
						{ 
							required: true, 
							message: '请输入您的姓名!', 
							trigger: ['change','blur'],
						}
					],
					veteransIdcard: [
						{	
							required: true, 
							message: '请输入您的身份证号码!', 
							trigger: ['change','blur']
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.idCard(value);
							},
							message: '身份证号码格式不正确',
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onLoad(e) {
			this.getUploadInfoFn();
			if(e.name){
				this.form.veteransName = e.name;
				this.form.veteransIdcard = e.pwd;
				this.flag = false
			}else if(e.id === '123'){
				this.flag = false
			}else{
				this.flag = true
				this.userInfo = uni.getStorageSync('userInfo');
				if(this.userInfo){
					if(this.userInfo.userId){
						this.getRegisterFn();
						this.type = this.userInfo.type;
					}
				}
			};
			this.amapPulgin = new amap.AMapWX({
				key: this.key
			});
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			chooseLocation(e) {
				uni.chooseLocation({
					success: (res) => {
						this.form.address = res.address
					}
				})
			},
			image(e) {
				return http.webUrl + e
			},
			getUploadInfoFn(){
				server.getUploadInfo({dictType: 'basics_level'}).then(res =>{
					console.log("999[[[[]]]]",)
					if(res){
						res.forEach(item =>{
							this.selectList.push({
								label: item.dictLabel,
								value: item.dictValue,
							})
						})
					}
				})
			},
			// 选择商品类型回调
			selectConfirm(e) {
				this.form.level = '';
				this.levelType = null;
				e.map((val, index) => {
					this.form.level = val.value;
					this.levelType = val.label;
				})
			},
			getRegisterFn(){
				server.getRegister(this.userInfo.userId, this.userInfo.type).then(res =>{
					this.form = res
				})
			},
			onSuccess(data, index, lists, name){
				this.form.veteransPic = data.fileName
			},
			gotoDetails(){
				uni.navigateTo({
					url: '/pages/soldier/home/yxDetails'
				})
			},
			submit(type) {
				let _this = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(type === '2'){
							console.log('red')
							if(_this.form.veteransPic === ''){
								this.$refs.uToast.show({
									title: '请上传图片!',
									type: 'default',
								})
								return
							}
						}
						this.getUserIdCardFn(type)
					} else {
					}
				});
			},
			getUserIdCardFn(type){
				let _this = this;
				let params = this.form;
				params.veteransStatus = "1";
				params.veteransType = type;
				console.log(this.form,']]]')
				server.getUserIdCard(params).then(res =>{
					_this.$refs.uToast.show({
						title: '提交认证成功，等待审核!',
						type: 'default',
					})
					setTimeout(function()  {
						uni.navigateBack({
						    delta: 1
						});
					}, 2000);
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-form-item__message{
		padding-left: 50rpx!important;
	}
	/deep/ .u-input__input{
		color: #2E4F1C!important;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
	/deep/ .u-border, .u-border-bottom, .u-border-left, .u-border-right, .u-border-top, .u-border-top-bottom{
		
	}
	/deep/ .u-form-item{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		box-sizing: border-box;
		line-height: 96rpx;
		-webkit-flex-direction: column;
		flex-direction: column;
		background: rgba(46, 79, 28, 0.05);
		border-radius: 48rpx;
		height: 96rpx;
		margin-bottom: 60rpx;
		padding-left: 30rpx!important;
	}
	.store-dis{
		display: flex;
		margin-bottom: 30rpx;
		.store-address{
			width: 580rpx;
			padding: 16rpx 30rpx;
			background:  rgba(46, 79, 28, 0.05);
			border-radius: 48rpx 0rpx 0rpx 48rpx;
			.select-address{
				display: flex; 
				align-items: center;
				justify-content: space-between; 
			}
		}
		.map-icon{
			width: 110rpx;
			background: #2E4F1C;
			text-align: center;
			border-radius: 0rpx 48rpx 48rpx 0rpx;
			padding-top: 31rpx;
			.icon-img{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
	.identity{
		width: 100%;
		height: 100vh;
		padding: 60rpx 30rpx 10rpx;
		.form-item{
			display: flex;
			.form-img{
				width: 40rpx;
				height: 40rpx;
				padding-top: 15rpx;
				padding-right: 18rpx;
			}
		}
		.form-upload{
			width: 100%;
			height: 300rpx;
			background: rgba(46, 79, 28, 0.05);
			border-radius: 16rpx;
			padding-left: 30rpx;
			.upload-title{
				height: 100rpx;
				line-height: 100rpx;
				position: relative;
				.tips{
					position: absolute;
					top: 0rpx;
					right: 30rpx;
					text-align: right;
				}
			}
		}
		.point{
			padding-top: 40rpx;
			line-height: 48rpx;
		}
		.btn{
			display: flex;
			padding-top: 60rpx;
			justify-content: space-between;
		}
		.btn1{
			display: flex;
			padding-top: 60rpx;
			justify-content: center;
		}
		.form-submit{
			width: 330rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 46rpx;
			text-align: center;
			font-weight: 600;
		}
		.form-submit11{
			width: 390rpx;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 46rpx;
			text-align: center;
			font-weight: 600;
		}
		.form-submit-nei{
			background: #2E4F1C;
			color: #FFFFFF;
		}
		.form-submit-wai{
			background: #FFF;
			color: #2E4F1C;
			border: 2rpx solid #2E4F1C;
		}
	}
</style>