apply-assistant-v3/root/detail/fellow.vue

<template>
	<view class="p-root-detail-fellow g_w_all g_h_all g_bg_f_5 g_kuaishou">
		<view>
			<view class="g_h_10"></view>
			<g-panel-form-slot
				:list="[
					{
						icon: '',
						label: '姓名',
						result: '',
						value: info.name,
						path: '',
						tip: 'slot-upID',
						img: info.idCardImageUrl,
						placeholder: '手动输入或拍照自动识别 → ',
						type: 'slot',
						pColumn: 8,
						require: true,
					},
					{
						icon: '',
						label: '身份证号',
						result: '',
						value: info.idCard,
						path: '',
						tip: 'slot-code-idcard',
						placeholder: '请输入身份证号',
						type: 'slot',
						pColumn: 8,
						require: false,
					},
					{
						icon: '',
						label: '性别',
						result: '',
						value: info.sex,
						path: '',
						tip: 'slot-sex',
						type: 'slot',
						pColumn: 12,
						require: false,
						customRequire: true,
					},
					{
						icon: '',
						label: '年龄',
						result: '',
						value: info.age,
						path: '',
						tip: 'slot-age',
						placeholder: '请输入年龄',
						type: 'slot',
						pColumn: 8,
						require: false,
					},
					{
						icon: '',
						label: '民族',
						result: '',
						value: info.nation,
						nationIndex: nationIndex,
						path: '',
						tip: 'slot-nation',
						pColumn: 12,
						require: false,
						type: 'slot',
						customRequire: true,
					},
					{
						icon: '',
						label: '家庭住址',
						result: '',
						value: info.address,
						placeholder: '请输入家庭住址',
						path: '',
						tip: 'slot-address',
						type: 'slot',
						pColumn: 8,
					},

					{
						icon: '',
						label: '上传附件',
						result: '',
						path: '',
						type: 'slot',
						tip: 'slot-update-file',
						pColumn: 16,
					},
				]"
				@changeName="handleClickName"
				@changeSex="handleClickSex"
				@changeAge="handleClickAge"
				@changeNation="handleClickNation"
				@changeIDcard="handleClickIDcard"
				@changeAddress="handleClickAddress"
				@updateFile="updateFile"
				@updateIDInfo="handlerIDInfo"
			>
				<template v-slot:after>
					<view class="g_flex_row_start g_p_10" v-if="imgList.length > 0">
						<view v-for="(item, index) in imgList" class="g_position_rela g_mr_10 g_mt_4" :key="index">
							<i class="iconfont icon-guanbi img-close" @click="delImg(index, item.id)"></i>
							<image :src="item.url" class="g_w_56 g_h_56 g_radius_8" />
						</view>
					</view>
				</template>
			</g-panel-form-slot>
			<view class="g_h_10"></view>
			<g-panel-form-slot
				:list="[
					{
						icon: '',
						label: '老乡电话',
						result: '',
						path: '',
						value: info.tel,
						tip: 'slot-mobile',
						placeholder: '请输入联系电话',
						type: 'slot',
						pColumn: 8,
						require: false,
					},
				]"
				@changeMobile="handleClickMobile"
			></g-panel-form-slot>
			<view class="g_flex_column_between g_flex_1 g_pb_24">
				<view class="g_fs_12 g_c_9 g_flex_row_center g_mb_32" style="align-items: center; margin-top: 16px">
					<radio-group class="dib">
						<radio :checked="switchChecked" @click="switchChecked = !switchChecked" value="0" class="dib biggerSize" color="#00b666" style="transform: scale(0.7)" />
					</radio-group>
					我已阅读并同意
					<navigator url="/root/person/agreeUser" class="g_c_sub">《用户服务协议》</navigator>
					及
					<navigator url="/root/person/agreePrive" class="g_c_sub">《隐私政策》</navigator>
				</view>
			</view>
			<g-panel-fixed>
				<slot>
					<view class="g_pl_12 g_pr_12">
						<!-- <g-button btnText="取消" class="g_mr_16" size="small" type="default" @clickBtn="goReturn"></g-button> -->
						<g-button btnText="确定" class @clickBtn="handleSubmit" size="auto" type="primary"></g-button>
					</view>
				</slot>
			</g-panel-fixed>
		</view>
	</view>
</template>

<script>
// import gPanelFormSlot from "@/components/formSlot.vue";
import { nationlist } from "../../utils/nation.js";

export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	components: {
		// gPanelFormSlot,
	},
	data() {
		return {
			switchChecked: false,
			cdnBaseImg: this.G.store().cdnBaseImg,
			info: {
				nation: "汉族",
			},
			nation: nationlist.map((item, index) => {
				return item.name;
			}),
			nationIndex: 0,
			imgList: [],
			newAddImg: [],
		};
	},
	props: {
		// info: {
		// 	type: Object,
		// 	default: {},
		// },
	},
	onLoad(options) {
		let that = this;
		console.log("快速报名：", options);
		if (options) {
			if (options.sex) {
				options.sex = Number(options.sex);
			} else {
				options.sex = 1;
			}
			if (!options.nation) {
				options.nation = "汉族";
			}
			this.info = options;
			// if (this.info.imgs) {
			// 	this.imgList = this.info.imgs.split(",");
			// }
		}
		console.log("获取老乡信息：", options);
	},
	onShow() {
		let that = this;
		that.getImg();
		// that.nation.forEach((item, index) => {
		// 	if (item == that.info.nation) {
		// 		console.log(that.info.nation);
		// 		console.log(index);
		// 		that.nationIndex = index;
		// 	}
		// });
		// that.speed = 0;
		// setTimeout(() => {
		// }, 300);
	},
	created() {
		let that = this;
	},
	methods: {
		handleClickName(e) {
			this.info.name = this.info.userName = e;
			this.changeInfo();
		},
		handleClickSex(e) {
			this.info.sex = e;
			this.changeInfo();
		},
		handleClickAge(e) {
			this.info.age = e;
			this.changeInfo();
		},
		handleClickMobile(e) {
			this.info.tel = e;
			this.changeInfo();
		},
		handleClickNation(e) {
			let that = this;
			console.log(e.name);
			this.info.nation = e.name;
			that.nation.forEach((item, index) => {
				if (item == e.name) {
					// console.log(that.info.nation)
					// console.log(index)
					that.nationIndex = index;
				}
			});
			this.changeInfo();
		},
		changeInfo() {
			this.$emit("changeInfo", this.info);
		},
		/**
		 * 获取上传的身份信息
		 */
		handlerIDInfo(res) {
			console.log("res", res);
			let that = this;
			that.info.name = res.info.name;
			that.info.sex = res.info.sex ? (res.info.sex == "男" ? 1 : 2) : "";
			that.info.age = res.info.age;
			that.info.nation = res.info.nationality + "族";
			that.info.idCard = res.info.num;
			that.info.idCardImageUrl = res.image;
			that.info.userName = res.info.name;
			that.info.address = res.info.address;
			that.nation.forEach((item, index) => {
				console.log("item1", item);
				console.log('that.info.nation + "族"', that.info.nation + "族");
				if (item == that.info.nation) {
					console.log("item2", item);

					that.nationIndex = index;
				}
			});
			this.changeInfo();
			console.log("that.info", that.info);
			console.log("that.nationIndex", that.nationIndex);
		},

		getImg() {
			let that = this;
			uni.request({
				url: that.G.ajaxUrl + `/imgs/list/${that.info.userId}?type=20`,
				method: "GET",
				header: Object.assign(
					{
						Authorization: "Bearer " + uni.getStorageSync("apply-token"),
					},
					that.G.setPublicParams()
				),
				success: (res) => {
					if (res.statusCode === 200) {
						console.log(res.data.data.userImgs);
						if (that.info.fujian) {
							that.imgList = that.info.fujian
								.split(",")
								.map((item) => {
									return {
										url: item,
									};
								})
								.concat(res.data.data.userImgs);
						} else {
							that.imgList = res.data.data.userImgs;
						}

						console.log(that.imgList);
					} else {
						console.error("Failed to fetch images:", res);
					}
				},
				fail: (error) => {
					console.error("Error fetching images:", error);
				},
			});
		},
		// 删除图片
		delImg(ind, id) {
			let that = this;
			uni.showModal({
				title: "提示",
				content: "确定要删除该图片？",
				success: function (res) {
					if (res.confirm) {
						that.imgList.splice(
							that.imgList.findIndex((item, index) => index == ind),
							1
						);
						uni.request({
							url: that.G.ajaxUrl + `/imgs/del/${id}`,
							method: "GET",
							header: Object.assign(
								{
									Authorization: "Bearer " + uni.getStorageSync("apply-token"),
								},
								that.G.setPublicParams()
							),
							success: (res) => {
								if (res.statusCode === 200) {
									console.log(res.data.data.userImgs);
									// 如果需要更新 imgList，可以在这里处理
									// that.imgList = res.data.data.userImgs;
								} else {
									console.error("Failed to fetch images:", res);
								}
							},
							fail: (error) => {
								console.error("Error fetching images:", error);
							},
						});
					} else if (res.cancel) {
						console.log("用户点击取消");
					}
				},
			});
		},
		// 上传图片
		updateFile(e) {
			let that = this;
			if (that.imgList.length < 4) {
				that.imgList.push({ url: e, id: -999 });
				// that.info.imgs = that.imgList;
				that.newAddImg.push(e);
				that.changeInfo();
				uni.hideLoading();
			} else {
				uni.showToast({
					title: "最多只能上传4张",
					icon: "none",
				});
			}
		},
		handleClickIDcard(e) {
			this.info.idCard = e;
			if (this.info.idCard.length == 15 || this.info.idCard.length == 18) {
				let info = this.G.getInfoByIDcard(this.info.idCard);
				this.info.age = info.age;
				this.info.sex = info.sex ? (info.sex == "男" ? 1 : 2) : "";
			}
			this.changeInfo();
			// console.log(this.G.getInfoByIDcard(this.info.idCard));
		},
		handleClickAddress(e) {
			this.info.address = e;
			this.changeInfo();
		},
		goReturn() {
			uni.navigateBack();
		},
		handleSubmit() {
			let that = this;
			console.log("that.info.imgs", that.info.imgs);
			console.log("that.imgList", that.imgList);

			if (!that.info.name) {
				uni.showToast({
					icon: "none",
					title: "请输入姓名",
				});
				return false;
			}
			if (!that.info.tel && !that.info.idCard) {
				uni.showToast({
					icon: "none",
					title: "请输入手机号或身份证号",
				});
				return false;
			}
			if (that.info.tel && !that.G.setReg(that.info.tel, "tel")) {
				uni.showToast({
					icon: "none",
					title: "请输入正确的手机号",
				});
				return false;
			}
			if (that.info.idCard && !that.G.isValidIdCard(that.info.idCard)) {
				uni.showToast({
					icon: "none",
					title: "请输入正确的身份证号",
				});
				return false;
			}
			console.log(that.info);
			if (that.imgList.length > 0) {
				that.info.imgs = that.newAddImg.toString();
			}
			let submitInfo = {
				name: that.info.userName,
				sex: that.info.sex,
				age: that.info.age,
				nation: that.info.nation,
				tel: that.info.tel,
				idCard: that.info.idCard,
				address: that.info.address,
				idCardImageUrl: that.info.idCardImageUrl ? that.info.idCardImageUrl : "",
				userName: that.info.userName,
				userId: that.info.userId,
				orderId: that.info.id,
				userApplyOrderFiles:
					that.imgList && that.imgList.length > 0
						? that.imgList
								.map((item) => {
									return item.url;
								})
								.join(",")
						: "",
			};
			let url = "order_submitFellowNew";
			that.G.Post(that.api[url], submitInfo, (res) => {
				uni.showToast({
					icon: "success",
					title: "保存成功",
				});
				uni.$emit("infoUpdate");
				uni.navigateBack();
			});
			// uni.$emit("getTownsman", { info: that.info });
			// uni.navigateBack();
		},
		handleClickInfo() {
			let that = this;
			that.G.uploadImg((res) => {
				console.log("res", res);
				that.info.name = res.info.name;
				that.info.sex = res.info.sex ? (res.info.sex == "男" ? 1 : 2) : "";
				that.info.age = res.info.age;
				that.info.nation = res.info.nationality;
				that.info.idCard = res.info.num;
				that.info.idCardImageUrl = res.image;
				that.info.userName = res.info.name;
				that.info.address = res.info.address;
				that.nation.forEach((item, index) => {
					if (item == that.info.nation) {
						that.nationIndex = index;
					}
				});
			}, "idcard");
		},
	},
};
</script>

<style>
.img-close {
	position: absolute;
	width: 18px;
	height: 18px;
	right: -6px;
	top: -6px;
	z-index: 99;
	background-color: #666;
	color: #fff;
	font-size: 8px;
	text-align: center;
	line-height: 18px;
	border-radius: 50%;
}
</style>