uniProject/pages/admin/Jiazheng/zhaopianZiliao.vue

<template>
	<view class="jz-content-box">
		<view :class="isZijiazheng=='true'?'mask-view':''">
			<view class="upload-img-box" :class="String(statusFlag) =='false'?'upload-img-mask-box':''"
				@click="touxiangTishi">
				<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>

			<view @click="changeZhankai" :class="zhankaiFlag==1?'zpzl-open-box':'zpzl-close-box'">
				<view class="gdzl-row">更多资料<icon></icon>
				</view>
				<view v-show="zhankaiFlag">
					<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>
				</view>
			</view>

			<!-- 	<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 v-if="isZijiazheng !='true'" class="page-btn-box">
				<button type="default" v-if="status =='add'&&isZijiazheng !='true'" @click="goNext"
					class="phone-green-btn">下一步</button>
				<button type="default" v-if="status =='edit'&&isZijiazheng !='true'" @click="editSave"
					class="phone-green-btn">保存</button>
			</view>
		</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: '',
				accordionVal: '',
				zhankaiFlag: false
			}
		},
		props: {
			status: {
				type: String,
			},
			isZijiazheng: {
				type: String,
			},
			statusFlag: {
				type: Boolean,
			},
		},
		components: {
			jiazhengUpload
		},
		methods: {
			touxiangTishi() {

				if (String(this.statusFlag) == 'false') {
					uni.showToast({
						title: '已提交办证申请，禁止修改',
						icon: 'none'
					});
					return false
				}

			},
			changeZhankai() {
				this.zhankaiFlag = !this.zhankaiFlag
				console.log('this.changeZhankai', this.changeZhankai);
			},
			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>