medicine-xcx/pagesB/nameAuthentication/uploadPapers.vue

<template>
	<view class="uploadPapers">
		<view class="p-l-30 p-r-30">
			<view class="uploadPapers-form">
				<view class="uploadPapers-form-item flex align-center m-b-40">
					<text class="font-32 text-black m-r-10">证件类型：</text>
					<u-input class="flex-1" v-model="form.type" disabled placeholder="请选择证件类型" input-align="right" @click="papersShow = true" />
				</view>
				<view class="uploadPapers-form-item flex align-center">
					<text class="font-32 text-black m-r-10">证件号码：</text>
					<u-input class="flex-1" v-model="form.idCard" placeholder="请输入证件号码" input-align="right" />
				</view>
			</view>
<!-- 
			<view class="uploadPapers-upload">
				<view class="uploadPapers-upload-title font-32 text-black font-weight-bold">身份证照片</view>
				<view class="flex align-center justify-between">
					<view class="flex align-center flex-column">
						<u-upload
							ref="uUpload1"
							:header="headerInfo" 
							:action="upload_img"
							:custom-btn="true" 
							image-mode="none"
							@on-success="onSuccess"
							@on-error="onErrorInfo"
							max-count="1" width="281" height="192" 
						>
							<image class="uploadPapers-upload-image" :src="form.idPhoto !==''?form.idPhoto : (IMG_URL + 'idCardFront.png')" slot="addBtn"></image>
						</u-upload>
						<text class="font-32 text-grey m-t-40">身份证头像面</text>
					</view>
					<view class="flex align-center flex-column">
						<u-upload
							ref="uUpload2"
							:header="headerInfo" 
							:action="upload_img"
							:custom-btn="true" 
							image-mode="none"
							@on-success="onSuccess2"
							@on-error="onErrorInfo"
							max-count="1" width="281" height="192" 
						>
							<image class="uploadPapers-upload-image" :src="form.idPhotoImage !==''?form.idPhotoImage : (IMG_URL + 'idCardOpposite.png')" slot="addBtn"></image>
						</u-upload>
						<text class="font-32 text-grey m-t-40">身份证国徽面</text>
					</view>
				</view>
			</view>
			 -->
			<u-button type="primary" shape="circle" class="confirm-order-footer-button" @click="submit">提交认证</u-button>
		</view>
		<u-select v-model="papersShow" :list="papersList" @confirm="selectConfirm" confirm-color="#01AEEA"></u-select>
	</view>
</template>

<script>
	import { IMG_URL } from '@/env.js'
// const papersList = [
// 	{
// 		value: '1',
// 		label: '身份证'
// 	},
// 	{
// 		value: '2',
// 		label: '港澳身份证'
// 	},
// 	{
// 		value: '3',
// 		label: '台湾身份证'
// 	},
// 	{
// 		value: '4',
// 		label: '护照'
// 	},
// 	{
// 		value: '5',
// 		label: '警官证'
// 	},
// 	{
// 		value: '6',
// 		label: '军官证'
// 	}
// ];
export default {
	data() {
		return {
			IMG_URL,
			papersList: [],
			papersShow: false,
			upload_img: '',
			href: 'api/info/upload',
			headerInfo: {
				"content-type": "application/x-www-form-urlencoded",
				"X-Access-Token": ''
			},
		
			form: {
				type: '',
				cardType: '',
				idCard: '',
				idPhoto: "",   //正面身份证
				idPhotoImage: "", //反面身份证
				front: [],
				opposite: []
			},
			fileList: [],
			rules: {
				type: {
					message: '请选择证件类型'
				},
				idCard: {
					message: '请输入身份证号码'
				},
				front: {
					message: '请上传身份证头像面照片'
				},
				opposite: {
					message: '请上传身份证国徽面照片'
				}
			},
			info: {}
		};
	},
	onReady() {},
	async onLoad(options) {
		await this.getLabelList();
		if(options.form){
			this.info = JSON.parse(options.form)
			if(this.info.Id !== ''){
				console.log(options.form,"ssss")
				this.form.type = this.info.cardName
				this.form.cardType =this.info.cardType
				this.form.idCard = this.info.cardId;
				// this.form.idPhoto = this.info.cardPhoto //正面身份证
				// this.form.idPhotoImage = this.info.cardPic//反面身份证
			}
		}
		console.log(this.info,'接收到了')
		let token = uni.getStorageSync("__user_token");
		this.headerInfo["X-Access-Token"] = token;
		this.upload_img = this.$upload_img;
		console.log(this.upload_img)
	},
	methods: {
		
		// 获取证件类型
		getLabelList () {
			this.$api('addCardLabelList').then(res => {
				const { code, result, message} = res;
				if(code == 200) {
					console.log(result)
					const list = []
					result.forEach(item => {
						console.log(item)
						list.push({
							label: item.name,
							value: item.id
						})
					});
					this.papersList.forEach((item,index) => {
						 console.log(item.name == result.cardName, item.name, result.cardName)
						 if(item.name == result.cardName) {
							 
						 }
					})
					console.log(list)
					this.papersList = list;
				}else{
					this.$Toast(message)
				}
			}).catch(err => {
				this.$Toast(err.message)
			})
		},

		submit() {
			// console.log(this.$util.validate(this.rules, this.form))
			// let { disabled, message } = this.$util.validate(this.rules, this.form);
			// if (disabled) return this.$Toast(message);
			// if(this.form.idPhoto == '') {
			// 	this.$Toast("请上传身份证正面图片！")
			// 	return
			// }
			// if(this.form.idPhotoImage == '') {
			// 	this.$Toast("请上传身份证反面图片！")
			// 	return
			// }
			const form = {
				...this.info,
				...this.form
			}
			this.$tools.navigateTo({
				url: '/pagesA/my_other_list/healthInfo/index?form='+JSON.stringify(form)
			})
		},
		// onSuccess(data) {
		// 	this.form.idPhoto = data.result
		// },
		// onSuccess2(data){
		// 	this.form.idPhotoImage = data.result
		// },
		selectConfirm(arr) {
			this.form.type = arr[0].label;
			this.form.cardType = arr[0].value;
		},
		uplpadComplete(lists, name) {
			let { error, file } = lists[0];
			if (error) return this.$Toast(error);
			this.form[name] = file;
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .u-input__input{
		font-size: 32rpx !important;
	}
	/deep/.u-form-item--left__content__label {
		width: 140rpx !important;
		font-size: 32rpx;
	}
	/deep/ .u-size-default {
		font-size: 32rpx !important;
	}
.uploadPapers {
	&-form {
		margin-bottom: 60rpx;
		&-item {
			height: 80rpx;
			border-bottom: 2rpx solid #f1f1f1;
		}
	}

	&-upload {
		margin-bottom: 120rpx;
		&-title {
			margin-bottom: 50rpx;
		}

		&-image {
			width: 280rpx;
			height: 190rpx;
		}
	}
}
</style>