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 v-if="speed == 0">
			<g-loading />
		</view>
		<view v-if="speed == 1">
			<view class="g_h_10"></view>
			<view class="m-photo">
				<g-panel-card-info
					:info="{
						avatar: cdnBaseImg + 'mock_photo.svg',
						title: '拍照或相册上传',
						num: '系统智能识别并自动填写',
						titleFS: 16,
						imgSize: 72,
					}"
					radius="0"
					rightType="image"
					:rightImage="info.idCardImageUrl"
					@clickCard="handleClickInfo"
				/>
			</view>
			<view class="g_h_10"></view>
			<g-panel-form-slot
				:list="[
					{
						icon: '',
						label: '联系电话',
						result: '',
						path: '',
						tip: 'tel',
						type: 'slot',
						pColumn: 12,
					},
				]"
			>
				<slot>
					<!-- #ifdef APP-PLUS || H5 || MP-TOUTIAO || MP-KUAISHOU -->
					<u-input type="number" :clearable="false" :password-icon="false" placeholder="请输入联系电话" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#cccccc;font-size:32rpx;line-height:1" v-model="info.tel" style="width: calc(100vw - (122px);flex: none;" />
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<u-input type="number" :clearable="false" :password-icon="false" placeholder="请输入联系电话" input-align="right" class="g_text_r g_w_all" placeholder-style="color:#cccccc;font-size:32rpx;line-height:1" v-model="info.tel" />
					<!-- #endif -->
				</slot>
			</g-panel-form-slot>
			<view class="g_h_10"></view>
			<g-panel-form-slot
				:list="[
					{
						icon: '',
						label: '姓名',
						result: '',
						value: info.name,
						path: '',
						tip: 'slot-name',
						placeholder: '请输入姓名',
						type: 'slot',
						pColumn: 12,
						require: true,
					},
					{
						icon: '',
						label: '性别',
						result: '',
						value: info.sex,
						path: '',
						tip: 'slot-sex',
						type: 'slot',
						pColumn: 12,
						require: true,
						customRequire: true,
					},
					{
						icon: '',
						label: '年龄',
						result: '',
						value: info.age,
						path: '',
						tip: 'slot-age',
						placeholder: '请输入年龄',
						type: 'slot',
						pColumn: 12,
						require: true,
					},
					{
						icon: '',
						label: '民族',
						result: '',
						value: info.nation,
						nationIndex: nationIndex,
						path: '',
						tip: 'slot-nation',
						pColumn: 12,
						type: 'slot',
					},
					{
						icon: '',
						label: '身份证号',
						result: '',
						value: info.idCard,
						path: '',
						tip: 'slot-code-idcard',
						placeholder: '请输入身份证号',
						type: 'slot',
						pColumn: 12,
					},
					{
						icon: '',
						label: '家庭住址',
						result: '',
						value: info.address,
						placeholder: '请输入家庭住址',
						path: '',
						tip: 'slot-address',
						type: 'slot',
						pColumn: 12,
					},
				]"
				@changeName="handleClickName"
				@changeSex="handleClickSex"
				@changeAge="handleClickAge"
				@changeNation="handleClickNation"
				@changeIDcard="handleClickIDcard"
				@changeAddress="handleClickAddress"
			>
			</g-panel-form-slot>
			<g-panel-fixed>
				<slot>
					<view class="g_flex_row_center">
						<g-button btnText="取消" class="g_mr_16" size="small" type="default" @clickBtn="goReturn"></g-button>
						<g-button btnText="确定" class=" " @clickBtn="handleSubmit" size="small" type="primary"></g-button>
					</view>
				</slot>
			</g-panel-fixed>
		</view>
	</view>
</template>

<script>
import { nationlist } from "../../utils/nation.js";
export default {
	onReady() {
		this.G.setNavStyle();
	},
	onShareAppMessage() {
		return this.G.shareFun();
	},
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			speed: 0,
			info: {},
			nation: nationlist.map((item, index) => {
				return item.name;
			}),
			nationIndex: 0,
		};
	},
	onLoad(options) {
		let that = this;
		this.info = options;
		console.log("获取老乡信息：", options);
	},
	onShow() {
		let that = this;
		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(() => {
			that.speed = 1;
		}, 300);
	},
	created() {
		let that = this;
	},
	methods: {
		handleClickName(e) {
			this.info.name = this.info.userName = e;
		},
		handleClickSex(e) {
			this.info.sex = e;
		},
		handleClickAge(e) {
			this.info.age = e;
		},
		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;
				}
			});
		},
		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;
				}
			});
		},
		handleClickIDcard(e) {
			this.info.idCard = e;
		},
		handleClickAddress(e) {
			this.info.address = e;
		},
		goReturn() {
			uni.navigateBack();
		},
		handleSubmit() {
			let that = this;
			if (!that.G.setReg(that.info.tel, "tel")) {
				uni.showToast({
					icon: "none",
					title: "请输入正确的手机号",
				});
				return false;
			}

			if (!that.G.setReg(that.info.idCard, "idcard")) {
				uni.showToast({
					icon: "none",
					title: "请输入正确的身份证号",
				});
				return false;
			}

			if (!that.info.nation) {
				that.info.nation = "汉族";
			}
			that.G.Post(that.api.order_submitFellow, that.info, (res) => {
				uni.showToast({
					icon: "success",
					title: "保存成功",
				});
				setTimeout(() => {
					that.goReturn();
				}, 300);
			});
		},
		handleClickInfo() {
			let that = this;
			that.G.uploadImg((res) => {
				that.info.name = res.info.name;
				that.info.sex = res.info.sex;
				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></style>