uniProject/pages/admin/Jiazheng/zhaopianZiliao.vue

<template>
	<view class="jz-content-box">
		<view class="upload-img-box">
			<jiazhengUpload @getFileUrl="getTouxiang" 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" bottomText="上传身份证头像面"></jiazhengUpload>
			</view>
			<view class="upload-item-box">
				<jiazhengUpload @getFileUrl="getSfzGuohui" bottomText="上传身份证国徽面"></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-if="shenghuizhaoList.length>0">
					<view v-for="(item, index) in shenghuizhaoList" :key="index">
						<img :src="item" alt="">
						<view @click="deleteShenghuoZhao(item,index)">删除</view>
					</view>
				</view>
				<view>
					<jiazhengUpload @getFileUrl="getGzShenghuozhao"></jiazhengUpload>
				</view>
			</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-if="zigezhaoList.length>0">
					<view v-for="(item, index) in zigezhaoList" :key="index">
						<img :src="item" alt="">
						<view @click="deleteZigeZhao(item,index)">删除</view>
					</view>
				</view>
				<view>
					<jiazhengUpload @getFileUrl="getZgzhao"></jiazhengUpload>
				</view>
			</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" v-model="single" 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" v-model="single" type="date" @change="changeJiankang">
				<view class="form-radio-select">
					<view>{{jiankangDate}}</view>
					<icon></icon>
				</view>
			</uni-datetime-picker>
		</view>

		<view class="zpzl-tip-box form-top-margin">
			<view>体检报告文件</view>
			<view class="red-tip">（*如未经同意，体检报告均不展示在简历中;在系统中预约的体检，如有电子报告，会自动关联到简历中） </view>
			<view>
				<checkbox-group>
					<checkbox value="cb" checked="true" 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" class="phone-white-btn">上一步</button>
			<button type="default" 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 {
				single: '',
				tijianRiqi: false,
				shenghuizhaoList: [],
				zigezhaoList: [],
				icon: '',
				idcardUrl1: '',
				idcardUrl2: '',
				shenghuoUrls: '',
				tijianDate: '',
				tijianUrl: '',
				jiankangDate: '',
			}
		},
		components: {
			jiazhengUpload
		},
		methods: {
			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);
			},
			getZigezhao(data) {
				console.log('getZigezhao', data);
				this.zigezhaoList.push(data);
			},
			deleteZigeZhao(data, index) {
				this.zigezhaoList.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

			},
			switchSfzChange(data) {
				console.log('data', data);
			},
			switchGzChange(data) {
				console.log('data', data);
			},
			switchZgChange(data) {
				console.log('data', data);
			},

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

		},
	};
</script>