H5-Merchant/openmerchant/shopentry/processidentity.vue

<template>
	<view class="process">
		<view class="process-header">
			<view class="process-header-text">
				<view class="process-header-text-neishi" @click="topgi">
					<view class="process-header-text-icon">
						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
						</image>
					</view>
				</view>
				<view class="process-header-text-title">
					店铺入驻
				</view>
			</view>
		</view>
		<view class="process-zhuti">
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					请上传身份证人像面：
				</view>
				<view class="process-zhuti-yi-upload" @click="cardPositivePerson">
					<image v-if="merchantspersonal.card_positive_person" :src="merchantspersonal.card_positive_person"
						mode=""></image>
					<image v-else src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822174457868.png" mode="">
					</image>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					请上传身份证国徽面：
				</view>
				<view class="process-zhuti-yi-upload" @click="cardBackPerson">
					<image v-if="merchantspersonal.card_back_person" :src="merchantspersonal.card_back_person" mode="">
					</image>
					<image v-else src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822174524262.png" mode="">
					</image>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					身份证号
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写身份证号" v-model="merchantspersonal.idcard_no">
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					身份证有效期限
				</view>
				<view class="process-zhuti-yi-input" style="display: flex;">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="merchantspersonal.identification_valid_date_start" @maskClick="maskClick">
						<input placeholder="有效期限开始" v-model="merchantspersonal.identification_valid_date_start" disabled>
					</uni-datetime-picker>
					<view class="" style="width: 100rpx;height: 100%;background-color: rgba(31, 124, 255, 0.1); display: flex;justify-content: center;align-items: center; color: #B6B6B6;">
							——
					</view>
					<!-- :disabled="merchantspersonal.identification_valid_date_end == '长期' ? true : false" -->
					<uni-datetime-picker type="date" :clear-icon="false" v-model="merchantspersonal.identification_valid_date_end" @maskClick="maskClick">
						<input placeholder="有效期限结束" v-model="merchantspersonal.identification_valid_date_end" disabled>
					</uni-datetime-picker>
					<checkbox-group style="line-height: 94rpx;background: rgba(31, 124, 255, 0.1);padding: 0 20rpx;" @change="checkboxChange">
						<label>
							<checkbox value="2099-12-31" />长期
						</label>
					</checkbox-group>
					<!-- <uni-datetime-picker v-model="range" type="date"  @change="changeLog" style="display: flex;">
						<input placeholder="请填写身份证有效期限" v-model="merchantspersonal.identification_valid_date_start" disabled>
					</uni-datetime-picker>
					<uni-datetime-picker v-model="range" type="date"  @change="changeLog" style="display: flex;">
						<input placeholder="请填写身份证有效期限" v-model="merchantspersonal.identification_valid_date_end" disabled>
					</uni-datetime-picker> -->
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					联系人姓名
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写联系人姓名" v-model="merchantspersonal.name">
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					联系人手机号
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写联系人手机号" maxlength="11" v-model="merchantspersonal.phone" @input="inputPhone">
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					联系人邮箱
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写联系人邮箱" v-model="merchantspersonal.email">
				</view>
			</view>
		</view>
		<view class="process-zhuti-fot">
			<view class="process-zhuti-fottext">
				<view class="fottext-img" @click="agreement = !agreement">
					<image v-if="agreement" src="https://cdn.bjtdba.com/vod/image/2022-08-23/20220823132347513.png"
						mode=""></image>
					<image v-else src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822155008662.png" mode="">
					</image>
				</view>
				<view class="fottext-nav">
					点击表示同意<span style="color: #1f7cff" @click="xieyi()">《商家入驻协议》</span>
				</view>
			</view>
			<view class="process-zhuti-btnbox">
				<view class="process-zhuti-btn backbtn" @click="backStep">
					上一步
				</view>
				<view :class="[btnBir ? 'btn-bir' : '', 'process-zhuti-btn' ]" @click="btnBir ? goIdentity() : ''">
					立即申请
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		merchaSettlen,
		updateMerchaSettlen
	} from '@/commit/api.js';
	import {
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				merchantspersonal: {
					card_positive_person: '', // 身份证正面
					card_back_person: '', // 身份证反面
					idcard_no: '', // 身份证号
					identification_valid_date_start: '', // 身份证开始时间
					identification_valid_date_end: '', // 身份证结束时间
					name: '', //姓名
					phone: '', // 手机号
					email: '', // 邮箱
					uid: ''
				},
				longtime:'',
				value: 0,
				range: [],
				agreement: false,
				merchantData: {},
				btnBir: false,
				nextMerchantsData: {}
			}
		},
		computed: {
			...mapGetters(['merchantsDataAlls'])
		},
		onLoad(opsition) {
			this.identification_valid_date_end
			console.log(this.merchantspersonal.identification_valid_date_end,"989898")
			let userinfo = uni.getStorageSync('userinfo')
			this.merchantspersonal.uid = userinfo.uid
			const merchantsDataAll = this.merchantsDataAlls.merchantsDataAll;
			if (JSON.stringify(merchantsDataAll) != "{}") {
				this.range = [merchantsDataAll.identification_valid_date_start, merchantsDataAll
					.identification_valid_date_end
				];
				this.merchantspersonal.card_positive_person = merchantsDataAll.card_positive_person; // 身份证正面
				this.merchantspersonal.card_back_person = merchantsDataAll.card_back_person; // 身份证反面
				this.merchantspersonal.idcard_no = merchantsDataAll.idcard_no; // 身份证号
				this.merchantspersonal.identification_valid_date_start = merchantsDataAll.identification_valid_date_start; // 身份证开始时间
				this.merchantspersonal.identification_valid_date_end = merchantsDataAll.identification_valid_date_end; // 身份证结束时间
				this.merchantspersonal.name = merchantsDataAll.name; // 姓名
				this.merchantspersonal.phone = merchantsDataAll.phone; // 手机号
				this.merchantspersonal.email = merchantsDataAll.email; // 邮箱
			}
		},
		watch: {
			merchantspersonal: {
				handler: function(val) {
					this.isShow(val)
				},
				deep: true
			},
			agreement: {
				handler: function(val) {
					this.isShow()
				}
			}
		},
		methods: {
			maskClick(e){
				console.log('maskClick事件:', e);
			},
			checkboxChange: function (e) {
				if(e.detail.value){
					this.longtime = e.detail.value[0];
				}else{
					this.longtime = "";
				}
			},
			topgi() {
				uni.navigateBack({
					delta: 1
				});
			},
			//商户协议
			xieyi() {
				uni.setStorageSync('agreementType','6')
				uni.navigateTo({
					url: "/pages/index/bottombat?type=6" 
				})
			},
			isShow(list) {
				let temp = true
				if (list) {

					for (let i in list) {
						if (list[i] == "" || list[i] == null) {
							temp = false
						}
					}
				}

				if (!this.agreement) {
					temp = false
				}
				this.btnBir = temp
			},
			// 身份证正面
			cardPositivePerson() {
				let that = this;
				that.$time.uploadPictures(res => {
					that.merchantspersonal.card_positive_person = res;
				});
			},
			// 身份证反面
			cardBackPerson() {
				let that = this;
				that.$time.uploadPictures(res => {
					that.merchantspersonal.card_back_person = res;
				});
			},
			// 身份证有效期
			changeLog(e) {
				// this.merchantspersonal.identification_valid_date_start = e[0];
				// this.merchantspersonal.identification_valid_date_end = e[1];
			},
			// 手机号
			inputPhone(e) {
				this.$nextTick(function() {
					this.merchantspersonal.phone = e.target.value.replace(/[^\d]/g, '');
				})
			},
			backStep() {
				uni.navigateBack({
					delta: 1
				});
			},
			goIdentity() {
				let that = this;
				if (that.merchantspersonal.card_positive_person == "") return uni.showToast({
					title: "请上传身份证人像面",
					icon: "none"
				});
				if (that.merchantspersonal.card_back_person == "") return uni.showToast({
					title: "请上传身份证国徽面",
					icon: "none"
				});
				if (that.merchantspersonal.idcard_no == "") return uni.showToast({
					title: "请填写身份证号",
					icon: "none"
				});
				if (!/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/
					.test(that.merchantspersonal.idcard_no)) {
					uni.showToast({
						title: "请填写有效身份证号",
						icon: "none"
					});
					 return
				}
				if (that.merchantspersonal.identification_valid_date_start == "" && (that.merchantspersonal
					.identification_valid_date_end == "" || this.longtime == "")) return uni.showToast({
					title: "请选择身份证有效期限",
					icon: "none"
				});
				if (that.merchantspersonal.name == "") return uni.showToast({
					title: "请填写联系人姓名",
					icon: "none"
				});
				if (that.merchantspersonal.phone == "")
					return uni.showToast({
						title: "请填写联系人手机号",
						icon: "none"
					});
				if (!/^1[3456789]\d{9}$/.test(that.merchantspersonal.phone)) {
					uni.showToast({
						title: "请填写有效联系人手机号",
						icon: "none"
					});
					return
				}
				if (that.merchantspersonal.email == "") {
					uni.showToast({
						title: "请填写联系人邮箱",
						icon: "none"
					});
					return
				}
				if (!/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(
						that.merchantspersonal.email)) {
					uni.showToast({
						title: "请填写有效联系人邮箱",
						icon: "none"
					});
					return
				}
				if (!that.agreement) return uni.showToast({
					title: "请阅读并勾选同意《商家入驻协议》",
					icon: "none"
				});
				if(that.longtime){
					that.merchantspersonal.identification_valid_date_end = that.longtime;
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				uni.getStorage({
					key: 'merchants_in',
					success: function(res) {
						that.merchantData = Object.assign(that.merchantData, res.data)

						uni.getStorage({
							key: 'merchants_in_store',
							success: function(res) {
								that.merchantData = Object.assign(that.merchantData, res.data, that
									.merchantspersonal)
								let selectmerchant = uni.getStorageSync('selectmerchant')
								let merchantsStatus = that.merchantsDataAlls.merchantsStatus;
								if (merchantsStatus == 1) {
									//修改信息
									that.merchantData = Object.assign(that.merchantData, {
										mer_id: selectmerchant.merId
									})
									updateMerchaSettlen(that.merchantData).then(res => {
										if (res.data.status == 200) {
											console.log('成功', res);
											uni.removeStorage({
												key: 'merchants_in'
											});
											uni.removeStorage({
												key: 'merchants_in_store'
											});
											uni.redirectTo({
												url: './processaudit?submitCode=1'
											});
											uni.hideLoading();
										}
									}, fail => {
										console.log('fail', fail)
										uni.hideLoading();
									})
								} else {
									if (selectmerchant.pay_type == 2) {
										//修改信息
										that.merchantData = Object.assign(that.merchantData, {
											mer_id: selectmerchant.merId
										})
										updateMerchaSettlen(that.merchantData).then(res => {
											if (res.data.status == 200) {
												console.log('成功', res);
												uni.removeStorage({
													key: 'merchants_in'
												});
												uni.removeStorage({
													key: 'merchants_in_store'
												});
												uni.redirectTo({
													url: './processaudit?submitCode=1'
												});
												uni.hideLoading();
											}
										}, fail => {
											console.log('fail', fail)
											uni.hideLoading();
										})
									} else {
										// 新增信息
										merchaSettlen(that.merchantData).then(res => {
											console.log('res', res)
											if (res.data.status == 200) {
												console.log('成功', res);
												uni.removeStorage({
													key: 'merchants_in'
												});
												uni.removeStorage({
													key: 'merchants_in_store'
												});
												uni.redirectTo({
													url: './processaudit?submitCode=1'
												});
												uni.hideLoading();
											}
										}, fail => {
											console.log('fail', fail)
											uni.hideLoading();
										})
									}
								}
							}
						});

					}
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.process {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.process-header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 111;
			width: 100%;
			height: 176rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: center;

			.process-header-text {
				width: 686rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				display: flex;
				margin-top: 107rpx;
				align-items: center;

				.process-header-text-neishi {
					width: 45rpx;
					height: 45rpx;
					margin-right: 17rpx;

					.process-header-text-icon {
						width: 36rpx;
						height: 36rpx;
						margin-top: 2rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.process-zhuti {
			width: 100%;
			height: auto;
			margin-top: 202rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			// padding: 32rpx 0 40rpx;
			padding-bottom: 40rpx;
			background: #FFFFFF;

			.process-zhuti-yi {
				width: 686rpx;
				// height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				margin-top: 32rpx;

				.process-zhuti-yi-text {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 26rpx;
				}

				.process-zhuti-yi-input {
					width: 100%;
					height: 94rpx;
					// background: #1F7CFF;
					// 31 124 255 10
					border-radius: 8rpx;
					// opacity: 0.1;

					input {
						width: 100%;
						height: 94rpx;
						background: rgba(31, 124, 255, 0.1);
						border-radius: 8rpx;
						box-sizing: border-box;
						padding-left: 32rpx;
					}
				}

				.process-zhuti-yi-upload {
					width: 100%;
					// height: 404rpx;
					// background: rgba(31, 124, 255, 0.1);
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 520rpx;
						height: 279rpx;
						border: 1rpx dashed #aaa;
					}
				}
			}
		}

		.process-zhuti-fot {
			margin: 50rpx 0 94rpx;
		}

		.process-zhuti-fottext {
			font-size: 24rpx;
			margin-bottom: 20rpx;

			.fottext-img {
				display: inline-block;
				vertical-align: middle;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 15rpx;
				}
			}

			.fottext-nav {
				display: inline-block;
			}
		}

		.process-zhuti-btnbox {
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
		}

		.process-zhuti-btn {
			width: 330rpx;
			height: 98rpx;
			background: rgba(31, 124, 255, 0.4);
			text-align: center;
			line-height: 98rpx;
			border-radius: 8rpx;
		}

		.backbtn {
			margin-right: 26rpx;
			background: #1F7CFF;
		}

		.btn-bir {
			background: #1F7CFF;
		}
	}
	/deep/.uni-date{
		width: 50%;
		display: inline-block;
	}
</style>