hire-wx-houxuanren/pagesD/apply.vue

<template>
	<view class="personal">
		<view class="">
			<text class="title">添加求职意向</text>
			<view class="titleb">不同的求职期望，推荐啊的职位也会不同。</view>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
			<text class="input-title">求职时间</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的求职时间" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="from.birthday"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="cityShow = true">
			<text class="input-title">期望城市</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的期望城市" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="from.birthday"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
			<text class="input-title">期望薪资</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的期望薪资" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="from.birthday"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
			<text class="input-title">当前行业</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的当前行业" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="from.birthday"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
			<text class="input-title">期望行业</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的期望行业" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="from.birthday"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
			<text class="input-title">当前职位</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的当前职位" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="from.birthday"></u--input>
		</view>
		<view class="body-input u-flex-col u-row-center" @click="birthdayBtn">
			<text class="input-title">期望职位</text>
			<u--input :disabled="true" disabledColor="#fff" customStyle="padding:0 !important" type="text"
				placeholder="请选择您的期望职位" border placeholderClass='input-style' suffixIcon="arrow-right"
				suffixIconStyle="font-size: 32rpx;font-weight: 400;color: #CACACA;" v-model="from.birthday"></u--input>
		</view>
		<view class="u-flex u-row-between" style="margin-top: 30rpx;">
			<view class="">
				付费求职
				<image @click="propshow=true" style="width: 32rpx;height: 32rpx;" src="/static/images/xiangguan.png" mode=""></image>
			</view>
			<u-switch v-model="value" @change="change"></u-switch>
		</view>
		<view class="button" @click="next">
			保存
		</view>
		<u-datetime-picker ref="picker" title="求职时间" :minDate="minDate" @confirm="birthdayConfirm" :show="birthdayShow"
			mode="date" @cancel='birthdayShow = false'></u-datetime-picker>
		<u-picker ref="uPicker" keyName="name" title="期望城市" :defaultIndex="indexs" :show="cityShow" :columns="cityList"
			@confirm="cityconfirm" @cancel="cityShow = false" @change="changeHandler"></u-picker>
		<u-popup :show="propshow" mode="center" @close="close" @open="open">
			<view style="width:570rpx ;padding: 32rpx;border-radius: 20rpx;">
				<text>感谢您使用平安健康保险App，我们非常重视您的信息和隐私</text>
				<view class="u-flex" style="justify-content: center;">
					<view class="btn" @click="propshow=false">
						我知道了
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {
		getAllArea
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				propshow:false,
				value: false,
				province: [], //省数据
				city: [], //市数据
				area: [], //区数据
				provinceid: "", //省数据
				cityid: "", //市数据
				areaid: "", //区数据
				indexs: [], //默认地区下标
				//选择器状态
				birthdayShow: false, //出生年月
				workShow: false, //工作时间
				cityShow: false, //户口所在地
				jobShow: false, //工作显示
				cityList: [], //数据地址
				cityids: [], //数据地址
				joblist: [],
				id: ""
			}
		},
		onLoad(opsition) {
			this.AllArea()
			this.id = opsition.id
		},
		methods: {
			change() {

			},
			//所有地区
			AllArea() {
				getAllArea().then((res) => {
					console.log(res);
					this.province = res.data.map(t => {
						return {
							name: t.name,
							id: t.id
						}
					})
					console.log("aaa", this.province);
					this.city = res.data.map(t => t.children.map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
					this.area = res.data.map(t => t.children.map(v => v.children.map(i => {
						return {
							name: i.name,
							id: i.id
						}
					})))
					//默认显示数据
					// this.cityList = [
					// 	this.province.map(res => res.name),
					// 	this.city[0].map(res => res.name),
					// 	this.area[0][0].map(res => res.name)
					// ]
					let a = []
					let b = []
					let c = []
					this.province.map(res => {
						a.push({
							name: res.name,
							id: res.id,
						})
					})
					this.city[0].map(res => {
						b.push({
							name: res.name,
							id: res.id,
						})
					})
					this.area[0][0].map(res => {
						c.push({
							name: res.name,
							id: res.id,
						})
					})

					this.cityList = [a, b, c]
					// if (this.province && this.city && this.area) {
					// 	//省索引
					// 	let pIdx = this.province.findIndex(v => v.name == this.province);
					// 	//根据省索引设置默认市数据
					// 	this.columns[1] = this.city[pIdx].map(res => res.name)
					// 	//市索引
					// 	let cIdx = this.city[pIdx].findIndex(v => v.name == this.city);
					// 	//根据市索引设置默认区数据
					// 	this.columns[2] = this.area[pIdx][cIdx].map(res => res.name)
					// 	//区索引
					// 	let aIdx = this.area[pIdx][cIdx].findIndex(v => v.name == this.area);
					// 	this.indexs = [pIdx, cIdx, aIdx];
					// 	// console.log(pIdx, cIdx, aIdx);
					// 	console.log(this.indexs);
					// }
					// if (this.addressData.province && this.addressData.city && this.addressData.area) {
					// 	//省索引
					// 	let pIdx = this.province.findIndex(v => v.name == this.addressData.province);
					// 	//根据省索引设置默认市数据
					// 	this.columns[1] = this.city[pIdx].map(res => res.name)
					// 	//市索引
					// 	let cIdx = this.city[pIdx].findIndex(v => v.name == this.addressData.city);
					// 	//根据市索引设置默认区数据
					// 	this.columns[2] = this.area[pIdx][cIdx].map(res => res.name)
					// 	//区索引
					// 	let aIdx = this.area[pIdx][cIdx].findIndex(v => v.name == this.addressData.area);
					// 	this.indexs = [pIdx, cIdx, aIdx];
					// 	// console.log(pIdx, cIdx, aIdx);
					// 	console.log(this.indexs);
					// }
				})
			},
			changeHandler(e) {
				const {
					columnIndex, //当前改变值的列下标
					value,
					values, // values为当前变化列的数组内容
					indexs, //当前地区值下标
					picker = this.$refs.uPicker
				} = e
				//columnIndex代表第几列，意思是下标为0的列发生变化

				if (columnIndex === 0) {
					picker.setColumnValues(1, this.city[indexs[0]].map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
					picker.setColumnValues(2, this.area[indexs[0]][0].map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
				}
				if (columnIndex === 1) {
					picker.setColumnValues(2, this.area[indexs[0]][indexs[1]].map(v => {
						return {
							name: v.name,
							id: v.id
						}
					}))
				}
			},
			//点击显示时间选择器
			birthdayBtn() {
				this.birthdayShow = true
				//new Date(this.endDate).getTime()为你需要在选择器上显示的时间戳
				this.$refs.picker.innerValue = new Date(946656000000).getTime()
			},
			//出生日期选择器
			async birthdayConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				let timeValue = await timeFormat(e.value, 'yyyy-mm-dd');
				this.from.birthday = timeValue;
				this.birthdayShow = false
			},
			//户口地址
			cityconfirm(e) {
				let a = e.value[0].name + e.value[1].name + e.value[2].name
				let ids = String(e.value[0].id) + String(e.value[1].id) + String(e.value[2].id)
				this.from.domicile_city_id = e.value[1].id
				this.from.domicile_province_id = e.value[0].id
				// this.city1 = e.value.join("")
				this.city1 = a
				this.cityShow = false
			},
		}
	}
</script>


<style lang="scss">
	.btn{
		background: #0C66C2;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 310rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		margin-top: 24rpx;
	}
	//个人信息
	.personal {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 99;
		padding: 40rpx 32rpx 0;
		margin-bottom: 60rpx;
		box-sizing: border-box;

		.title {
			font-size: 48rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #222222;
		}

		.titleb {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #777777;
			margin-top: 20rpx;
		}

		.body-input {
			height: 150rpx;
			border-bottom: 2rpx solid #F4F4F4;

			.input-title {
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
				margin-top: 30rpx;
				box-sizing: border-box;
			}

			.input-style {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #CACACA;
			}
		}

		.button {
			width: 686rpx;
			height: 88rpx !important;
			background: #0C66C2;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			margin: 54rpx 0 0rpx 0;
			display: flex;
			justify-content: center;
		}
	}
</style>