junzitang/pagesT/store/components/ApplyForm.vue

<template>
	<view :class="['qn-page-' + theme]">
		<block v-if="apply_set.applyProp">
			<view v-if="apply_set.banner_img"><image :src="apply_set.banner_img" mode="aspectFill" class="top-img"></image></view>
			<view class="apply-form" v-if="apply_set.applyProp">
				<u-form :model="apply_form" ref="applyForm" label-position="top" :label-width="120">
					<block v-for="(item, index) in apply_term" :key="index">
						<block v-if="item.is_enable">
							<u-form-item :label="item.name" v-if="item.type === 1" :required="item.is_required">
								<u-input v-if="item.data_type === 1" v-model="apply_form[item.prop]" />
								<u-input v-if="item.data_type === 2" v-model="apply_form[item.prop]" type="textarea" />
								<RegionSel @pickerRegionChange="pickerRegionChange($event, index)" v-if="item.data_type === 3">
									<span v-if="apply_form[item.prop]">{{ apply_form[item.prop] }}</span>
									<span style="color: #999;" v-else>请选择</span>
								</RegionSel>
								<QiniuUpload @uploadSuccess="uploadLicense($event, index, item.prop)" v-if="item.data_type === 4">
									<div slot="cont">
										<view class="user-img-license">
											<img v-if="apply_form[item.prop]" class="license-pic" :src="apply_form[item.prop]" alt="" />
											<text v-else>+</text>
										</view>
									</div>
								</QiniuUpload>
								<view @click="openLocation(index)" v-if="item.data_type === 5">
									<span v-if="apply_form[item.prop]">{{ apply_form[item.prop] }}</span>
									<span style="color: #999;" v-else>请选择</span>
								</view>
							</u-form-item>
							<u-form-item :label="item.name" :required="item.is_required" v-else>
								<u-input v-if="item.data_type === 1" @blur="inputBlur($event, index)" :value="apply_form.info[index - form_length].value" />
								<u-input v-if="item.data_type === 2" @blur="inputBlur($event, index)" :value="apply_form.info[index - form_length].value" type="textarea" />
								<RegionSel @pickerRegionChange="pickerRegionChange($event, index)" v-if="item.data_type === 3">
									<span v-if="apply_form.info[index - form_length].value">{{ apply_form.info[index - form_length].value }}</span>
									<span style="color: #999;" v-else>请选择</span>
								</RegionSel>
								<QiniuUpload @uploadSuccess="uploadLicense($event, index)" v-if="item.data_type === 4">
									<div slot="cont">
										<view class="user-img-license">
											<img v-if="apply_form.info[index - form_length].value" class="license-pic" :src="apply_form.info[index - form_length].value" alt="" />
											<text v-else>+</text>
										</view>
									</div>
								</QiniuUpload>
							</u-form-item>
						</block>
					</block>
				</u-form>
				<view class="agreement" v-if="apply_set.settlement === 5">
					<text class="ibonfont" :class="[is_agree ? 'ibonxuanze1 primary-color' : 'ibonweixuanze']" @click="is_agree = !is_agree"></text>
					<text @click="is_agree = !is_agree">我已阅读并同意</text>
					<text class="agreement-name primary-color" @click="agreement_show = true">《入驻申请协议》</text>
				</view>
			</view>
			<view class="btn-bottom">
				<view class="btn-li primary-btn-pain" @click="goPage('/pages/index/index', 'switchTab')">回到首页</view>
				<view class="btn-li primary-btn" @click="MerchantApply">申请入驻</view>
			</view>
			<u-popup v-model="agreement_show" :width="600" mode="center" border-radius="14">
				<view class="agreement_view">
					<view class="agreement_tit">{{ apply_set.settlement_set || '入驻申请协议' }}</view>
					<view class="agreement_main"><u-input disabled :value="apply_set.settlement_content" type="textarea" :border="false" :height="100" :auto-height="true" /></view>
					<view class="primary-btn agreement_btn" @click="agreement_show = false">我知道了</view>
				</view>
			</u-popup>
		</block>
		<block v-else>
			<!-- 空白页 -->
			<Aempty text="该商家未开通商户入驻，敬请期待" src="https://onlineimg.qianniao.vip/data.png"></Aempty>
		</block>
	</view>
</template>

<script>
import RegionSel from '../../components/region/RegionSel.vue';
import QiniuUpload from '../../components/qiniu/QiniuUpload.vue';
import webUrl from '@/config.js';
export default {
	components: {
		RegionSel,
		QiniuUpload
	},
	props: {
		merchantInfo: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			agreement_show: false,
			is_agree: false,
			apply_form: {
				info: [],
				userCenterId: '',
				provinceCode: '',
				cityCode: '',
				districtCode: '',
				latitude: '', //经度
				longitude: '' // 纬度
			},
			apply_set: {},
			apply_term: [
				{
					origin_name: '联系人姓名',
					name: '联系人姓名',
					prop: 'contactName',
					is_enable: true,
					is_required: true,
					data_type: 1,
					type: 1,
					disable: true
				},
				{
					origin_name: '联系方式',
					name: '联系方式',
					prop: 'contactMobile',
					is_enable: true,
					is_required: true,
					data_type: 1,
					disable: true,
					type: 1
				},
				{
					origin_name: '商户名称',
					name: '商户名称',
					prop: 'name',
					is_enable: true,
					is_required: true,
					data_type: 1,
					disable: true,
					type: 1
				},
				{
					origin_name: '主营类目',
					name: '主营类目',
					prop: 'category',
					is_enable: true,
					is_required: true,
					data_type: 1,
					type: 1
				},
				{
					origin_name: '商户地区',
					name: '商户地区',
					prop: 'regionName',
					is_enable: true,
					is_required: true,
					data_type: 3,
					type: 1
				},
				{
					origin_name: '详细地址',
					name: '详细地址',
					prop: 'address',
					is_enable: true,
					is_required: true,
					data_type: 1,
					type: 1
				},
				{
					origin_name: '商户简介',
					name: '商户简介',
					prop: 'desc',
					is_enable: true,
					is_required: true,
					data_type: 2,
					type: 1
				},
				{
					origin_name: '营业执照',
					name: '营业执照',
					prop: 'license',
					is_enable: true,
					is_required: true,
					data_type: 4,
					type: 1
				}
			],
			form_length: 8
		};
	},
	created() {
		this.MerchantGetSeting();
		// 获取客户的ID
		this.apply_form.userCenterId = this.$store.state.userStatus.id;
	},
	methods: {
		openLocation(index) {
			// uni.setStorageSync('12', '213');
			// #ifdef MP-WEIXIN
			uni.chooseLocation({
				success: res => {
					console.log(res);
					// const location = this.$_utils.getArea(res.address);
					this.apply_form.address = res.name;
					this.apply_form.latitude = res.latitude;
					this.apply_form.longitude = res.longitude;
					console.log(this.apply_form);
				}
			});
			// #endif
			// #ifdef APP-PLUS || MP-TOUTIAO
			// this.goPage('/pages/index/SearchAddress');
			// #endif
		},
		// 获取设置(小程序)
		MerchantGetSeting() {
			this.$u.api.MerchantGetSeting().then(res => {
				this.apply_set = res.data;
				uni.setNavigationBarTitle({
					title: res.data.apply_title || '入驻申请'
				});
				if (this.apply_set.applyProp) {
					// 获取没有禁用的字段
					this.apply_term = this.apply_set.applyProp.filter(item => item.is_enable);
					// 获取系统自带字段的length
					this.form_length = this.apply_term.filter(item => item.type === 1).length;
					// 把字段放进form的obj里
					this.apply_term.forEach((item, index) => {
						if (item.type === 1) {
							// 系统自带字段直接放入
							this.apply_form[item.prop] = '';
						} else {
							// 自定义字段塞进info对象里面
							this.apply_form.info.push({
								name: item.name,
								value: ''
							});
						}
					});
					// 重新申请，获取之前填写的信息
					if (this.merchantInfo.id) {
						for (let i in this.apply_form) {
							if (this.merchantInfo[i]) {
								this.apply_form[i] = this.merchantInfo[i];
							}
						}
						if (this.merchantInfo.area) {
							this.apply_form.regionName = `${this.merchantInfo.area.provinceName}-${this.merchantInfo.area.cityName}-${this.merchantInfo.area.districtName}`;
						}
						this.apply_form.userCenterId = this.$store.state.userStatus.id;
					}
				}
			});
		},
		// 立即申请
		MerchantApply() {
			// 验证必填项
			let isSubmit = true;
			for (let i in this.apply_term) {
				let item = this.apply_term[i];
				if (item.type === 1) {
					// 判断系统自带字段的必填项
					if (item.is_required && !this.apply_form[item.prop]) {
						this.$api.msg(`${item.name}不能为空`);
						isSubmit = false;
						break;
					}
				} else {
					// 判断自定义字段的必填项
					if (i - this.form_length >= 0) {
						if (item.is_required && !this.apply_form.info[i - this.form_length].value) {
							this.$api.msg(`${item.name}不能为空`);
							isSubmit = false;
							break;
						}
					}
				}
			}
			// 如果有必填项没有值的，不允许提交
			if (!isSubmit) {
				return;
			}
			if (this.apply_set.settlement === 5 && !this.is_agree) {
				this.$api.msg('请先阅读并勾选入驻申请协议');
				return;
			}
			if (this.merchantInfo.id) {
				// 入住申请修改(小程序)
				this.$u.api.updateApply(this.merchantInfo.id, this.apply_form).then(res => {
					this.$api.msg('已申请');
					this.$emit('applySuccess');
				});
			} else {
				this.$u.api.MerchantApply(this.apply_form).then(res => {
					this.$api.msg('已申请');
					this.$emit('applySuccess');
				});
			}
		},
		// 上传图片
		uploadLicense(res, index, prop) {
			let target = this.$u.deepClone(this.apply_form);
			const uploadPicUrl = `${webUrl.QINIU_URL}/${res.key}`;
			if (index <= this.form_length) {
				target.license = uploadPicUrl;
			} else {
				target.info[index - this.form_length].value = uploadPicUrl;
			}
			this.apply_form = target;
		},
		// 输入框失去焦点
		// 也不知道为什么使用 v-model 双向绑定不行，所以只能使用失去焦点事件了
		inputBlur(val, index) {
			this.apply_form.info[index - this.form_length].value = val;
		},
		// 地区
		pickerRegionChange(row, index) {
			if (index <= this.form_length) {
				this.apply_form.provinceCode = row[0].value;
				this.apply_form.cityCode = row[1].value;
				this.apply_form.districtCode = row[2].value;
				this.apply_form.regionName = `${row[0].label}-${row[1].label}-${row[2].label}`;
			} else {
				this.apply_form.info[index - this.form_length].value = `${row[0].label}-${row[1].label}-${row[2].label}`;
			}
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style scoped lang="scss">
.top-img {
	width: 750rpx;
	height: 320rpx;
}
.apply-form {
	padding: 0 30rpx;
	padding-bottom: 120rpx;
}
.agreement_view {
	padding: 30rpx;
	.agreement_tit {
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx 0;
		text-align: center;
	}
	.agreement_main {
		font-size: 26rpx;
		line-height: 36rpx;
		color: #666666;
	}
	.agreement_btn {
		border-radius: 8rpx;
		width: 300rpx;
		text-align: center;
		line-height: 70rpx;
		color: #ffffff;
		margin: 60rpx auto 30rpx;
		height: 70rpx;
	}
}
.btn-bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20rpx;
	display: flex;
	background-color: #ffffff;
	border-top: 1px solid #f4f4f4;
	z-index: 9;
	.btn-li {
		flex: 2;
		line-height: 70rpx;
		text-align: center;
		border-radius: 8rpx;
		&:first-child {
			border: 1px solid #f53c28;
			margin-right: 10rpx;
		}
		&:last-child {
			color: #ffffff;
			margin-left: 10px;
		}
	}
}
.agreement {
	font-size: 24rpx;
	line-height: 60rpx;
	.ibonfont {
		font-size: 24rpx;
		margin-right: 10rpx;
		color: #666666;
	}
}
.user-img-license {
	width: 120upx;
	height: 120upx;
	border-radius: 8upx;
	margin: 32upx auto;
	background: #f4f5f6;
	text-align: center;
	line-height: 100upx;
	color: #999999;
	font-size: 100rpx;
	font-weight: 300;
}
.license-pic {
	width: 120upx;
	height: 120upx;
}
</style>