apply-assistant-v3/root/home/quickApplication.vue

<template>
	<view class="p-root-home-quick g_w_all g_bg_f_5 g_kuaishou">
		<view class="">
			<view class="card-tip g_pt_24 g_pb_8 g_pl_20 g_c_6">老乡信息</view>
			<view>
				<view class="g_bg_f g_pl_15 g_pr_15 g_pt_10 g_ml_10 g_mr_10 g_radius_8 g_mb_12" 
							v-for="(item, index) in persenInfo" :key="index"
							style="margin-bottom: 12px;"
				>
					<view class="g_pb_2 g_flex_row_between">
						<view class="g_flex_1 g_flex_column_center g_mr_10">
							<view class="g_flex_row_start g_fs_16 g_fw_bold">
								<view> {{ item.userName ? item.userName + "/" : "姓名/" }} </view>
								<view v-if="!item.sex">性别/</view>
								<view v-if="item.sex == 1">男/</view>
								<view v-if="item.sex == 2">女/</view>
								<view> {{ item.age ? item.age + "岁/" : "年龄/" }} </view>
								<view> {{ item.nation ? item.nation : "民族" }} </view>
							</view>
						</view>
						<view class="g_flex_none g_flex_row_end">
							<view class="g_flex_row_end g_pl_16 g_pr_16 g_pt_9 g_pb_9" style="background-color: #f0fff8; border-radius: 17px">
								<view class="g_flex_row_end" @click="goFellow(item, index)">
									<view class="g_flex_column_center">
										<i class="iconfont icon-bianji g_c_3"></i>
									</view>
									<view class="g_fs_12 g_c_3 g_ml_8">编辑</view>
								</view>
							</view>
						</view>
					</view>
					<view class="g_pb_4 g_fs_16 g_c_6">{{ item.address ? item.address : "家庭住址" }}</view>
					<view class="g_flex_row_start g_pb_15">
						<view class="g_flex_row_start g_mr_14">
							<view class="g_flex_none g_mr_4 g_w_28 g_h_28 g_radius_50 g_flex_c">
								<image :src="cdnBaseImg + 'order_idcard.svg'" class="g_w_28 g_h_28"></image>
							</view>
							<view class="g_flex_column_center g_c_6">{{ item.idCard ? item.idCard : "身份证号" }}</view>
						</view>
						<view class="g_flex_row_start">
							<view class="g_flex_none g_mr_4 g_w_28 g_h_28 g_radius_50 g_flex_c">
								<image :src="cdnBaseImg + 'order_tel.svg'" class="g_w_28 g_h_28"></image>
							</view>
							<view class="g_flex_column_center g_c_6">{{ item.tel ? item.tel : "手机号" }}</view>
						</view>
					</view>
					<view class="g_pb_17 g_flex_row_start">
						<g-panel-image :url="item.idCardImageUrl" v-if="item.idCardImageUrl" radius="4" size="112" @clickItem="handleClickIDcard" />
						<view v-if="item.imgs" class="g_flex_row_start">
							<view v-for="i in item.imgs" class="g_ml_10">
								<g-panel-image :url="i" radius="4" size="112" @clickItem="handleClickIDcard" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="g_flex_row_center flex_center g_flex_1 g_h_48 g_bg_f g_fs_16 g_c_main g_ml_10 g_mr_10 g_radius_8" @click="goFellow('')" v-if="persenInfo.length <= 2">
				<!-- <view class="g_w_18 g_h_18 g_mr_6 g_text_c g_radius_20 g_border_main g_fsi_18" style="line-height: 13px">+</view> -->
				<view class="g_flex_column_center">
					<i class="iconfont icon-jia1 g_c_min g_mr_6" style="font-size: 18px"></i>
				</view>
				<view class="">添加老乡</view>
			</view>
			<view>
				<view class="card-tip g_pt_24 g_pb_8 g_pl_20 g_c_6">职位信息</view>
				<view class="fs_top text-wrap">
					<g-panel-form-slot :list="jobData" @clickResult="changePage" @changeTime="getInviteTime"> </g-panel-form-slot>
				</view>
			</view>
			<view>
				<view class="card-tip g_pt_24 g_pb_8 g_pl_20 g_c_6">报名备注</view>
				<view class="g_flex_row_center g_p_10 g_pt_16 g_ml_10 g_mr_10 g_bg_f g_radius_8" style="width: calc(100vw- 20px)">
					<textarea class="weui-input g_flex_1 g_fs_16" placeholder="请输入报名备注" v-model="updateInfo.desp" placeholder-style="color:#999" :maxlength="-1" auto-height style="min-height: 137px; width: 100%; z-index: 0"></textarea>
				</view>
			</view>
			<view class="g_mt_12">
				<view class="g_flex_row_center g_mb_12" style="color: rgba(0, 0, 0, 0.45)">
					<u-checkbox-group @change="radioGroupChange" shape="circle">
						<u-checkbox v-model="agreeRadio" name="agree" active-color="#00b666">
							<view class="g_flex_row_center g_fs_12">
								<view>我已阅读并同意</view>
								<view @click.stop="goPage('/root/person/agreeUser')">《用户协议》</view>
								<view>及</view>
								<view @click.stop="goPage('/root/person/agreePrive')">《隐私政策》</view>
							</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="g_h_84"></view>
				<g-panel-fixed>
					<slot>
						<view class="g_flex_row_between g_pl_16 g_pr_16" style="z-index: 99">
							<view class="g_fs_16 g_c_6 g_flex_c g_pl_8 g_pr_8 g_radius_6 g_ml_16" hover-class="thover" @click="goReturn">取消</view>
							<g-button btnText="立即报名" type="primary" @clickBtn="submitForm" />
						</view>
					</slot>
				</g-panel-fixed>
			</view>
		</view>
	</view>
</template>
<script>
import { nationlist } from "../../utils/nation.js";
import dateUtil from "../../utils/dateUtil.js";
console.log("dateUtil", dateUtil);
export default {
	onReady() {
		this.G.setNavStyle();
		let that = this;
		uni.$on("getTownsman", function (data) {
			console.log("getTownsman", data);
			if (that.persenInfo.length == 0) {
				that.persenInfo[0] = { ...data.info, index: that.persenInfo.length };
			} else if (data.info.index) {
				that.persenInfo[data.info.index] = data.info;
			} else {
				that.persenInfo[that.persenInfo.length] = { ...data.info, index: that.persenInfo.length };
			}
			that.$forceUpdate();
		});
		uni.$on("changeJobInfo", function (data) {
			that.updateInfo.jobId = data.info.leafCateId;
			that.updateInfo.jobName = data.info.title;
			that.jobType = data.info.jobType;
			console.log("data.info", data.info);
			that.getJobDetail(data.info);
			that.$forceUpdate();
		});
		uni.$on("resetTownsman", function (data) {
			if (data.reset) {
				that.persenInfo = [];
			}
			that.$forceUpdate();
		});
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	onLoad(options) {
		let that = this;
		console.log("options.jobId", options.jobId);
		if (options.jobId) {
			this.updateInfo.jobId = options.jobId;
			this.updateInfo.jobName = options.jobName;
		}
		uni.setNavigationBarTitle({
			title: options.title ? options.title : "报名",
		});
		if (options.type == 1 || options.type == 2) {
			that.jobType = options.type;
		}
		if (options.agencyId) {
			that.updateInfo.upAgencyId = options.agencyId;
		}
		this.updateInfo.interviewTimeStr = "";
	},
	data() {
		return {
			IS_CREATOR: false,
			jobType: 2,
			cdnBaseImg: this.G.store().cdnBaseImg,
			nation: nationlist.map((item, index) => {
				return item.name;
			}),
			nationIndex: 0,
			userTel: "",
			info: {
				name: "",
				sex: "男",
				age: "",
				nation: "",
				idCard: "",
				address: "",
			},
			updateInfo: {
				jobId: 0,
				jobName: "请选择报名职位",
				desp: "",
				interviewTimeStr: "",
			},
			persenInfo: [],
			agreeRadio: ["agree"],
			jobData: [],
			zhengceTextList: [],
		};
	},
	onShow() {
		let that = this;
		that.pageSpeed = -1;
		that.jobData = [
			{
				icon: "",
				label: "报名职位",
				result: "",
				path: "/root/other/search?from=record",
				placeholder: "请选择报名职位",
				fontColor: that.updateInfo.jobName == "请选择报名职位" ? "g_c_9" : "g_c_3",
				tip: "applia-job",
				require: true,
				customRequire: true,
				pColumn: 12,
			},
			{
				icon: "",
				label: "预约面试时间",
				result: "",
				path: "",
				value: "",
				tip: "slot-time",
				require: true,
				customRequire: true,
				type: "slot",
				pColumn: 12,
				from: "reservation-time",
			},
			{
				icon: "",
				label: "财务结算",
				result: "",
				path: "",
				value: "-",
				tip: "slot-caiwu",
				require: false,
				customRequire: false,
				type: "slot",
				pColumn: 12,
				from: "slot-caiwu",
			},
		];
		setTimeout(() => {
			that.IS_CREATOR = uni.getStorageSync("IS_CREATOR") == 1 ? true : false;
			that.updateInfo.interviewTimeStr = "";
			console.log("获取面试时间：", that.updateInfo.interviewTimeStr);
			// 设置默认时间
			let hour = new Date().getHours();
			if (hour < 20 && hour >= 6) {
				this.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " " + (hour + 1) + ":00";
			} else if (hour >= 20) {
				this.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " 19:30";
			} else if (hour < 6) {
				this.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " 6:00";
			}
			// that.updateInfo.interviewTimeStr = dateUtil.formatDateYMD(new Date().toLocaleDateString()) + " 06:00";
			that.jobData = [
				{
					icon: "",
					label: "报名职位",
					result: that.updateInfo.jobName,
					path: "/root/other/search?from=record",
					placeholder: "请选择报名职位",
					fontColor: that.updateInfo.jobName == "请选择报名职位" ? "g_c_9" : "g_c_3",
					tip: "applia-job",
					require: true,
					customRequire: true,
					pColumn: 12,
				},
				{
					icon: "",
					label: "预约面试时间",
					result: "",
					path: "",
					value: that.updateInfo.interviewTimeStr,
					tip: "slot-time",
					require: true,
					customRequire: true,
					type: "slot",
					pColumn: 12,
					from: "reservation-time",
				},
				{
					icon: "",
					label: "财务结算",
					result: "",
					path: "",
					value: "-",
					tip: "slot-caiwu",
					require: false,
					customRequire: false,
					type: "slot",
					pColumn: 12,
					from: "slot-caiwu",
				},
			];
			that.$forceUpdate();
			if (that.updateInfo.jobId) {
				that.getJobDetail({
					leafCateId: that.updateInfo.jobId,
				});
			}
		}, 1);
	},
	methods: {
		getJobDetail($data) {
			let that = this;
			that.G.Get(
				that.api.job_personDetail + "/" + $data.leafCateId,
				{
					id: $data.leafCateId,
				},
				(res) => {
					let policyStr = "1. 服务费：" + (res.record.returnFeeType !== "" ? that.G.setReturnFee(res.record.returnFee, res.record.returnFeeType) : "详询客服") + " \n\n" + "2. 服务费详情：" + (res.record.returnFeeDesp || "详询客服") + " \n\n" + "3. 薪资待遇：" + (res.record.salaryDetail || "详询客服") + "\n\n";
					console.log("政策列表：", res);
					that.jobData = [
						{
							icon: "",
							label: "报名职位",
							result: that.updateInfo.jobName,
							path: "/root/other/search?from=record",
							placeholder: "请选择报名职位",
							fontColor: that.updateInfo.jobName == "请选择报名职位" ? "g_c_9" : "g_c_3",
							tip: "applia-job",
							require: true,
							customRequire: true,
							pColumn: 12,
						},
						{
							icon: "",
							label: "预约面试时间",
							result: "",
							path: "",
							value: that.updateInfo.interviewTimeStr,
							tip: "slot-time",
							require: true,
							customRequire: true,
							type: "slot",
							pColumn: 12,
							from: "reservation-time",
						},
						{
							icon: "",
							label: "财务结算",
							result: "",
							path: "",
							value: policyStr,
							tip: "slot-caiwu",
							require: false,
							customRequire: false,
							type: "slot",
							pColumn: 12,
							from: "slot-caiwu",
						},
					];
				}
			);
		},

		handleClickIDcard(e) {
			this.info.idCard = e;
		},

		clickDesp(e) {
			this.updateInfo.desp = e.value;
		},
		changePage(e) {
			uni.navigateTo({
				url: e.path,
			});
		},
		getInviteTime(e) {
			console.log("获取预约面试时间：", e);
			this.updateInfo.interviewTimeStr = e;
		},
		radioGroupChange(e) {},
		goReturn() {
			uni.navigateBack();
		},
		goPage($path) {
			uni.navigateTo({
				url: $path,
			});
		},
		goFellow($item, $index) {
			let that = this,
				params = {},
				info = null;
			// 如果第一个老乡信息没有编辑, 则进行提示
			// if (!that.persenInfo[0].userName && $item === "") {
			// 	uni.showToast({
			// 		title: "请先编辑第一个老乡信息",
			// 		icon: "none",
			// 	});
			// 	return;
			// }
			if ($item) {
				info = $item;
				params = {
					name: info.userName || "",
					sex: info.sex,
					age: info.age || "",
					nation: info.nation || "",
					tel: info.tel ? info.tel : "" || "",
					idCard: info.idCard ? info.idCard : "" || "",
					idCardImageUrl: info.idCardImageUrl ? info.idCardImageUrl : "",
					address: info.address ? info.address : "",
					imgs: info.imgs || "",
					userName: info.userName || "",
					index: $index,
				};
			}

			if (info) {
				uni.navigateTo({
					url: "/root/home/editTownsman?" + that.G.objToStr(params),
				});
			} else {
				uni.navigateTo({
					url: "/root/home/editTownsman",
				});
			}
		},
		handleClickMobile() {},
		submitForm() {
			let that = this;
			if (!that.agreeRadio) {
				uni.showToast({
					icon: "none",
					title: "请阅读协议",
				});
				return false;
			}
			if (!that.updateInfo.jobId) {
				uni.showToast({
					icon: "none",
					title: "请选择职位",
				});
				return false;
			}
			if (that.persenInfo.length == 0) {
				uni.showToast({
					icon: "none",
					title: "请输入老乡信息",
				});
				return false;
			}
			that.persenInfo.forEach((item) => {
				that.submitFormSub(item);
			});
		},
		submitFormSub($item) {
			let that = this;
			// uni.navigateTo({
			// 	url: "/root/home/applicationSuccess",
			// });
			// return;
			let submitInfo = {
				...that.updateInfo,
				...$item,
			};
			if (!submitInfo.userName) {
				uni.showToast({
					icon: "none",
					title: "请编辑用户信息",
				});
				return false;
			}
			uni.showLoading({
				title: "提交中",
			});
			// submitInfo.sex = submitInfo.sex == "男" ? 1 : 2;
			if (submitInfo.imgs && submitInfo.imgs.length > 0) {
				submitInfo.imgs = submitInfo.imgs.join(",");
			}
			that.G.Post(that.api.job_recordJob, submitInfo, (res) => {
				// uni.hideLoading();
				uni.showToast({
					icon: "success",
					title: "报名成功",
					duration: 2000,
				});
				// that.persenInfo = [];

				// that.$forceUpdate();
				setTimeout(() => {
					uni.navigateTo({
						url: "/root/home/applicationSuccess",
					});
				}, 1500);
			});
			// setTimeout(() => {
			// 	uni.navigateTo({
			// 		url: "/root/home/applicationSuccess",
			// 	});
			// }, 500);
		},
	},
};
</script>

<style lang="scss">
.p-root-home-quick {
	min-height: 100%;
	.fs_top {
		.m-set {
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
	}
	.fs_bottom {
		.m-set {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			.item {
				position: relative;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 10px;
					border-top: 1rpx solid #eee;
					height: 1rpx solid #eee;
					width: calc(100% - 20px);
				}
			}
		}
	}
	.text-wrap {
		white-space: pre-wrap;
	}
}
</style>