Delivery-merchant/pages/Applicationshop.vue

<template>
	<view>
		<!-- <titlenav></titlenav> -->
		<view class="page">
			<view class="page-top">
				<view class="text1 text2">您还没有店铺</view>
				<view class="text1">立即创建一个店铺吧</view>
				<view class="text3">申请所填信息仅用于平台店家审核使用，决不做其他用途</view>
				<view class="text3 text4">填写店铺信息</view>
			</view>
			<u-cell-group :border="false">
				<u-field name="店家名称" label="店家名称" placeholder="请输入您店铺的名称" v-model="form.storeName" />
				<u-field name="详细地址" label="详细地址" placeholder="请输入详细地址"v-model="form.address" />
				<u-field name="经营品类" label="经营品类" placeholder="请输入经营品类" v-model="form.management" />
				<u-field type="number" name="联系方式" label="联系方式" placeholder="请输入您的手机号码" v-model="form.phone" />
				<u-field type="text" label="法人姓名" placeholder="请输入真实姓名" v-model="form.name" />
				<u-field type="number" label="身份证号" placeholder="请输入18位身份证号" v-model="form.idNo" />
				<view class="imgBox">
					身份证照片(正)
					<img-uploader ref="idNoImage" v-model="form.idNoImage"></img-uploader>
				</view>
				<view class="imgBox">
					身份证照片(反)
					<img-uploader ref="idNoBackImage" v-model="form.idNoBackImage"></img-uploader>
				</view>
				<view class="imgBox">
					营业执照
					<img-uploader class="imgBox2" ref="licenseImage" v-model="form.licenseImage"></img-uploader>
				</view>
				<view class="imgBox">
					店铺环境
					<img-uploader class="imgBox2" ref="storeenvironment" v-model="form.storeenvironment"></img-uploader>
				</view>
				<view class="btn"><u-button block type="primary" :disabled="!next"  @click="submit">提交审核</u-button></view>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import ImgUploader from '../components/ImgUploader.vue';
import Titlenav from '../components/Titlenav.vue';
import { mapState } from 'vuex';
export default {
	components: { ImgUploader,Titlenav },
	data() {
		return {
			form: {
				storeName: '',
				phone: '',
				name: '',
				address: '',
				management: '',
				idNo: '',
				idNoImage: '',
				idNoBackImage: '',
				licenseImage: '',
				storeenvironment: ''
			},
			form2: {
				storeName: '',
				phone: '',
				name: '',
				address: '',
				management: '',
				idNo: '',
				idNoImage: '',
				idNoBackImage: '',
				licenseImage: '',
				storeenvironment: ''
			}
		};
	},
	computed: {
		...mapState(['systemInfo']),
		next() {
			return (
				!!this.form.storeName &&
				!!this.form.phone &&
				!!this.form.name &&
				!!this.form.address &&
				!!this.form.management &&
				!!this.form.idNo &&
				!!this.form.idNoImage &&
				!!this.form.idNoBackImage &&
				!!this.form.licenseImage &&
				!!this.form.storeenvironment
			);
		}
	},
	methods: {
		submit() {
			console.log(this.form)
			if (!this.form.storeName) {
				this.toast('请输入店家名称');
				return;
			}
			if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
				this.toast('请输入正确手机号');
				return;
			}

			if (!this.form.name) {
				this.toast('请输入真实姓名');
				return;
			}
			if (!this.form.management) {
				this.toast('请输入经营品类');
				return;
			}
			if (!this.form.address) {
				this.toast('请输入详细地址');
				return;
			}
			if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.form.idNo)) {
				this.toast('请输入正确身份证');
				return;
			}
			if (!this.form.idNoImage) {
				this.toast('请上传身份证照片（正面照）');
				return;
			}
			if (!this.form.idNoBackImage) {
				this.toast('请上传身份证照片（反面照）');
				return;
			}
			if (!this.form.licenseImage) {
				this.toast('请上传营业执照');
				return;
			}
			if (!this.form.storeenvironment) {
				this.toast('请上传店铺环境');
				return;
			}
			let data = { ...this.form };
			if (!data.id) {
				data.userId = this.$store.state.userInfo.id;
			}
			// data.status = 'CREATED';
			// this.showLoading();
			// this.$http.postJson('/storeAuthentication/save', data).then(res => {
			//     this.toast('申请成功', 'success');

			//     setTimeout(() => {
			//         wx.redirectTo({
			//             url: '/pages/store/review'
			//         });
			//     }, 1500);
			// });
		},
		loginMethods() {
			// console.log('init');
			// this.$http
			//     .postJson('/storeAuthentication/all', {
			//         query: { userId: this.$store.state.userInfo.id, del: false }
			//     })
			//     .then(res => {
			//         if (!res.empty) {
			//             this.form2 = res.content[0];
			//             this.form = res.content[0];
			//             this.$refs.idNoImage.setFile(res.content[0].idNoImage);
			//             this.$refs.idNoBackImage.setFile(res.content[0].idNoBackImage);
			//             this.$refs.licenseImage.setFile(res.content[0].licenseImage);
			//             this.$refs.storeenvironment.setFile(res.content[0].storeenvironment);
			//         }
			//     });
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/ .u-btn {
		height: 48px;
		font-size: 14px;
		margin: 6px 0;
	}
.page {
	padding-bottom: 100px;
}
.page-top {
	padding-left: 30px;
	.text1 {
		font-size: 24px;
		font-weight: bold;
		color: #000000;
		line-height: 33px;
		&.text2 {
			margin-top: 10px;
		}
	}
	.text3 {
		font-size: 13px;
		font-weight: 400;
		color: #aaabad;
		line-height: 22px;
		margin-top: 9px;
		&.text4 {
			font-size: 16px;
			font-weight: bold;
			margin-top: 30px;
		}
	}
}
.imgBox {
	display: flex;
	margin: 20px 0 20px 30px;
	font-size: 14px;
	font-weight: bold;
	color: #000000;
	line-height: 28px;
	.imgBox2 {
		margin-left: 40px;
	}
}
/deep/ .u-field {
	padding: 26px 0;
	margin: 0 30px;
}
/deep/.u-label {
	color: #000000;
	font-size: 14px;
	font-weight: bold;
	flex: 0 0 74px !important;
}
/deep/ .uni-input-placeholder {
	font-size: 13px;
	font-weight: 400;
	color: #aaabad;
	line-height: 24px;
}
.btn {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	padding: 6px 43px;
	padding-bottom: 34px;
	padding-bottom: calc(34px + constant(safe-area-inset-bottom)); // 兼容 IOS<11.2
	padding-bottom: calc(34px + env(safe-area-inset-bottom)); // 兼容 IOS>=11.2
	background-color: #FFFFFF;
}
</style>