yicangzongtai_app_240321/pages/recommendDonation/index.vue

<template>
	<view class="main">
		<navbar :config="config" backColor="#666"></navbar>
		<image class="cover" src="/static/recommendDonation/cover.png"></image>
		<view class="content">
			<view class="detail-top-title">
				<image class="line" src="/static/common/line1.png"></image>
				<text class="title">帮扶对象信息</text>
				<image class="line" src="/static/common/line1.png"></image>
			</view>
		</view>
		<view class="common-form">
			<view class="form-title required">真实姓名</view>
			<view class="form-item">
				<input v-model="form.real_name" placeholder="请输入帮扶对象姓名" :maxlength="10" />
			</view>
			<view class="form-title required">联系电话</view>
			<view class="form-item">
				<input v-model="form.phone" placeholder="请输入帮扶对象联系电话" type="number" :maxlength="11" />
			</view>
			<view class="form-title">性别</view>
			<view class="form-item" @click="sexShow=true">
				<text v-if="form.sex===0||form.sex===1">{{sexList[form.sex].label}}</text>
				<input disabled v-else placeholder="请选择性别" />
				<text class="iconfont2">&#xe6cc;</text>
			</view>
			<view class="form-title">年龄</view>
			<view class="form-item">
				<input v-model="form.age" placeholder="请输入年龄" type="number" :maxlength="3" />
			</view>
			<view class="form-title">身份证号</view>
			<view class="form-item">
				<input style="width: 100%;" v-model="form.id_number" :adjust-position="false" placeholder="请输入身份证号" type="text"
					:maxlength="18" />
			</view>
			<view class="form-title">所在地区</view>
			<view class="form-item" @click="addressShow=true">
				<view v-if="form.province_name&&form.city_name&&form.area_name">
					{{form.province_name+form.city_name+form.area_name}}</view>
				<input v-else disabled placeholder="选择省市区" />
				<text class="iconfont2">&#xe65f;</text>
			</view>
			<view class="form-title">详细地址</view>
			<view class="form-item">
				<input v-model="form.address" placeholder="请输入详细地址" />
			</view>
			<view class="form-title required">情况说明</view>
			<view class="form-item no-border">
				<u-input v-model="form.explanation" type="textarea" border height="214" maxlength="500"
					placeholder="请详细说明帮扶对象的情况" style="background-color: #FAFAFA;" />
			</view>
			<view class="form-split"></view>
			<view class="detail-top-title">
				<image class="line" src="/static/common/line1.png"></image>
				<text class="title">推荐人信息</text>
				<image class="line" src="/static/common/line1.png"></image>
			</view>
			<view class="form-title required">联系人</view>
			<view class="form-item">
				<input v-model="form.contacts" placeholder="请输入推荐人姓名" :maxlength="10" />
			</view>
			<view class="form-title required">联系电话</view>
			<view class="form-item">
				<input v-model="form.contact_number" type="number" placeholder="请输入推荐人联系电话" :maxlength="11" />
			</view>
			<view class="form-tip">
				注意：您填写捐赠信息后，基金工作人员将会电话联系帮扶对象或您、确定具体帮扶事宜！
			</view>
			<button class="submit-btn" @click="submit()">立即提交</button>
		</view>
		<uni-popup class="submit-popup" ref="submitPopup" type="center" :mask-click="false">
			<view class="content-box">
				<view class="title">提交完成</view>
				<view class="content">
					<image class="success-icon" src="/static/common/success-icon.png"></image>
					<view class="tip" style="width: 416rpx;">
						公益捐款信息已经提交，工作人员会 尽快与您取得联系对接帮扶事宜。
					</view>
					<button class="btn" @click="closePopup()">知道了</button>
				</view>
			</view>
		</uni-popup>
		<!-- 选择性别 -->
		<u-select v-model="sexShow" mode="single-column" :list="sexList" @confirm="sexConfirm"></u-select>
		<!-- 选择地区 -->
		<u-select v-model="addressShow" mode="mutil-column-auto" :list="addressArr" @confirm="addressConfirm">
		</u-select>
		<u-modal v-model="tostShow" content="确认提交？" show-cancel-button @confirm="affirmSubmit"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					back: true,
					title: '推荐帮扶',
					color: '#1a1a1a',
					backgroundColor: [1, '#fff'],
					statusBarFontColor: 'black'
				},
				form: {},
				imgFiles: [],
				sexShow: false,
				sexList: [{
						value: 0,
						label: '男'
					},
					{
						value: 1,
						label: '女'
					}
				],
				addressShow: false,
				addressArr: [],
				tostShow: false
			}
		},
		onLoad() {
			this.getAddressCode()
		},
		methods: {
			getAddressCode() {
				this.$http.get('/cnarea/tree-lbs').then(res => {
					if (res && res.code == 200) {
						this.addressArr = res.tree.children;
					}
				})
			},
			// 选择性别
			sexConfirm(e) {
				this.form.sex = e[0].value;
			},
			// 选择地区
			addressConfirm(e) {
				this.form.province_name = e[0].label;
				this.form.province_code = e[0].value;
				this.form.city_name = e[1].label;
				this.form.city_code = e[1].value;
				this.form.area_name = e[2].label;
				this.form.area_code = e[2].value;
			},
			submit() {
				let regExp = new RegExp("^1\\d{10}$");
				if (!this.form.real_name) {
					uni.showToast({
						icon: "none",
						title: '请输入帮扶对象姓名',
						duration: 1500
					});
					return
				} else if (!this.form.phone) {
					uni.showToast({
						icon: "none",
						title: '请输入帮扶对象联系电话',
						duration: 1500
					});
					return
				} else if (!regExp.test(this.form.phone)) {
					uni.showToast({
						icon: "none",
						title: '请输入正确的帮扶对象联系电话',
						duration: 1500
					});
					return
				} else if (!this.form.explanation) {
					uni.showToast({
						icon: "none",
						title: '请输入情况说明',
						duration: 1500
					});
					return
				} else if (!this.form.contacts) {
					uni.showToast({
						icon: "none",
						title: '请输入推荐人姓名',
						duration: 1500
					});
					return
				} else if (!this.form.contact_number) {
					uni.showToast({
						icon: "none",
						title: '请输入推荐人联系电话',
						duration: 1500
					});
					return
				} else if (!regExp.test(this.form.contact_number)) {
					uni.showToast({
						icon: "none",
						title: '请输入正确的推荐人联系电话',
						duration: 1500
					});
					return
				}
				this.tostShow = true;
			},
			affirmSubmit() {
				uni.showLoading({
					title: '加载中'
				});
				this.$http.post('/recommend/assist/submit', this.form).then(res => {
					uni.hideLoading();
					if (res && res.code == 200) {
						this.$refs.submitPopup.open();
					}
				})
			},
			closePopup() {
				this.$refs.submitPopup.close();
				uni.navigateBack()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		box-sizing: border-box;

		.cover {
			width: 100%;
			height: 340rpx;
			background-color: #f2f2f2;
		}

		.content {
			box-sizing: border-box;
			padding: 40rpx 0 18rpx 0;
		}

		.form-item {
			text {
				font-size: 30rpx;
			}
		}
	}
</style>