uniProject/pages/admin/Jiazheng/zhaopianZiliao.vue

<template>
	<view class="jz-content-box">
		<view class="upload-img-box">
			<jiazhengUpload @getFileUrl="getTouxiang" :img='icon' bottomText="上传头像和生活照"></jiazhengUpload>
		</view>
		<view class="form-label-switch">
			<view class="phone-form-label"><text class="form-label-require"></text>身份证照片</view>
			<!-- 	<switch @change="switchSfzChange" color="#3fd2a1" style="transform:scale(0.7)" /> -->
		</view>
		<view class="ziliao-upload-box">
			<view class="upload-item-box">
				<jiazhengUpload @getFileUrl="getSfzTouxiang" :img='idcardUrl1' bottomText="上传身份证头像面"></jiazhengUpload>
			</view>
			<view class="upload-item-box">
				<jiazhengUpload @getFileUrl="getSfzGuohui" :img='idcardUrl2' bottomText="上传身份证国徽面"></jiazhengUpload>
			</view>
		</view>

		<uni-collapse>
			<uni-collapse-item title="展开更多">
		<view class="form-label-switch form-top-margin">
			<view class="phone-form-label"><text class="form-label-require"></text>体检报告</view> 
			<!-- <switch @change="switchGzChange" color="#3fd2a1" style="transform:scale(0.7)" /> -->
		</view>
		<view class="zhaopianZiliao-shenfenzhengImg">
			<view class="ziliao-upload-box">
				<view v-for="(item, index) in tijianbaogaoList" :key="index" v-if="tijianbaogaoList.length>0"
					class="ziliao-image-box">
					<img class="ziliao-image" :src="item" alt="">
					<view @click="deleteTijianbaogao(item,index)" class="ziliao-image-close"></view>
				</view>
				<jiazhengUpload changjingType="more" @getFileUrl="getTijianbaogao"></jiazhengUpload>
			</view>
		</view>
		
		<view class="form-label-switch form-top-margin">
			<view class="phone-form-label"><text class="form-label-require"></text>工作生活照</view>
			<!-- <switch @change="switchGzChange" color="#3fd2a1" style="transform:scale(0.7)" /> -->
		</view>
		<view class="zhaopianZiliao-shenfenzhengImg">
			<view class="ziliao-upload-box">
				<view v-for="(item, index) in shenghuizhaoList" :key="index" v-if="shenghuizhaoList.length>0"
					class="ziliao-image-box">
					<img class="ziliao-image" :src="item" alt="">
					<view @click="deleteShenghuoZhao(item,index)" class="ziliao-image-close"></view>
				</view>
				<jiazhengUpload changjingType="more" @getFileUrl="getGzShenghuozhao"></jiazhengUpload>
			</view>
		</view>
		<view class="form-label-switch form-top-margin">
			<view class="phone-form-label"><text class="form-label-require"></text>资格类照片</view>
			<!-- 	<switch @change="switchZgChange" color="#3fd2a1" style="transform:scale(0.7)" /> -->
		</view>
		<view class="zhaopianZiliao-shenfenzhengImg">
			<view class="ziliao-upload-box">
				<view v-for="(item, index) in zigezhaoList" :key="index" v-if="zigezhaoList.length>0"
					class="ziliao-image-box">
					<img class="ziliao-image" :src="item" alt="">
					<view @click="deleteZigeZhao(item,index)" class="ziliao-image-close"></view>
				</view>
				<jiazhengUpload changjingType="more" @getFileUrl="getZigezhao"></jiazhengUpload>
			</view>
		</view>
		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require"></text>最近体检日期</view>
			<uni-datetime-picker class="form-radio-picker" type="date" @change="changeTijian">
				<view class="form-radio-select">
					<view>{{tijianDate}}</view>
					<icon></icon>
				</view>
			</uni-datetime-picker>
		</view>
		
		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require"></text>健康证日期</view>
			<uni-datetime-picker class="form-radio-picker" type="date" @change="changeJiankang">
				<view class="form-radio-select">
					<view>{{jiankangDate}}</view>
					<icon></icon>
				</view>
			</uni-datetime-picker>
		</view>
			</uni-collapse-item>

		</uni-collapse>

	

		<!-- 	<view class="zpzl-tip-box form-top-margin">
			<view>体检报告文件</view>
			<view class="red-tip">（*如未经同意，体检报告均不展示在简历中;在系统中预约的体检，如有电子报告，会自动关联到简历中） </view>
			<view>
				<checkbox-group>
					<checkbox :checked="tijianbaogaoFlag" @click="changeTijianbaogao" color="#3fd2a1"
						style="transform:scale(0.65)" />
					已经同意，上传个人体检报告
				</checkbox-group>
			</view>
			<view class="scbg-tip">
				还没有上传的体验报告<br>
				可点击下方上传体检报告
			</view>
			<button type="default" class="phone-green-btn scbg-btn">＋从手机上传体检报告(pdf)</button>
		</view> -->

		<view class="page-btn-box">
			<button type="default" v-if="status =='add'" @click="goNext" class="phone-green-btn">下一步</button>
			<button type="default" v-if="status =='edit'" @click="editSave" class="phone-green-btn">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		getAliyunPolicy
	} from "@/api/jiazheng.js"
	import jiazhengUpload from "./common/jiazhengUpload.vue"

	export default {
		data() {

			return {
				shenghuizhaoList: [],
				tijianbaogaoList: [],
				zigezhaoList: [],
				icon: '',
				idcardUrl1: '',
				idcardUrl2: '',
				shenghuoUrls: '',
				tijianDate: '',
				tijianUrls: '',
				jiankangDate: '',
				tijianbaogaoFlag: false,
				zhengshuUrls: '',
			}
		},
		props: {
			status: {
				type: String,
			}
		},
		components: {
			jiazhengUpload
		},
		methods: {
			editinfo(data) { 
				console.log('data', data);
				this.$nextTick(() => {
					this.icon = data.icon
					this.idcardUrl1 = data.idcardUrl1
					this.idcardUrl2 = data.idcardUrl2
					this.shenghuizhaoList = data.shenghuoUrls == '' ? '' : data.shenghuoUrls.split(",")
					this.zigezhaoList = data.zhengshuUrls == '' ? '' : data.zhengshuUrls.split(",")
					this.tijianbaogaoList = data.tijianUrls == '' ? '' : data.tijianUrls.split(",")
					this.tijianDate = data.tijianDate
					this.jiankangDate = data.jiankangDate

				})
			},
			getTouxiang(data) {
				this.icon = data
				console.log('getTouxiang', data);
			},
			getSfzTouxiang(data) {
				this.idcardUrl1 = data
				console.log('getSfzTouxiang', data);
			},
			getSfzGuohui(data) {
				this.idcardUrl2 = data
				console.log('getSfzGuohui', data);
			},
			getGzShenghuozhao(data) {
				console.log('getGzShenghuozhao', data);
				this.shenghuizhaoList.push(data);
			},
			getTijianbaogao(data) {
				console.log('getTijianbaogao', data);
				this.tijianbaogaoList.push(data);
			},
			getZigezhao(data) {
				console.log('getZigezhao', data);
				this.zigezhaoList.push(data);
			},
			deleteZigeZhao(data, index) {
				this.zigezhaoList.splice(index, 1);
			},
			deleteTijianbaogao(data, index) {
				this.tijianbaogaoList.splice(index, 1);
			},
			deleteShenghuoZhao(data, index) {
				this.shenghuizhaoList.splice(index, 1);
			},
			changeTijian(data) {
				console.log('data', data);
				this.tijianDate = data

			},
			changeJiankang(data) {
				console.log('data', data);
				this.jiankangDate = data

			},
			changeTijianbaogao(data) {
				this.tijianbaogaoFlag = !this.tijianbaogaoFlag
			},
			switchSfzChange(data) {
				console.log('data', data);
			},
			switchGzChange(data) {
				console.log('data', data);
			},
			switchZgChange(data) {
				console.log('data', data);
			},

			goNext() {
				this.formData = {
					icon: this.icon,
					idcardUrl1: this.idcardUrl1,
					idcardUrl2: this.idcardUrl2,
					tijianbaogaoFlag: this.tijianbaogaoFlag,
					shenghuoUrls: this.shenghuizhaoList ? this.shenghuizhaoList.join(',') : '',
					zhengshuUrls: this.zigezhaoList ? this.zigezhaoList.join(',') : '',
					tijianUrls: this.tijianbaogaoList ? this.tijianbaogaoList.join(',') : '',
					tijianDate: this.tijianDate,
					jiankangDate: this.jiankangDate,


				}
				console.log('this.formData', this.formData);
				this.$emit('goNext', this.formData, 2);
			},
			editSave() {
				this.formData = {
					icon: this.icon,
					idcardUrl1: this.idcardUrl1,
					idcardUrl2: this.idcardUrl2,
					tijianbaogaoFlag: this.tijianbaogaoFlag,
					shenghuoUrls: this.shenghuizhaoList.length > 0 ? this.shenghuizhaoList.join(',') : '',
					zhengshuUrls: this.zigezhaoList.length > 0 ? this.zigezhaoList.join(',') : '',
					tijianDate: this.tijianDate,
					jiankangDate: this.jiankangDate,
					tijianUrls: this.tijianbaogaoList ? this.tijianbaogaoList.join(',') : '',

				}
				console.log('this.formData', this.formData);
				this.$emit('editSave', this.formData);
			},

		},
		created() {
			// setTimeout(()=>{
			// 	 this.$refs.datePicker.show()
			// },1000)

		},
	};
</script>