xuan-pay-cweb/pages/index/addStore/addStore.vue

<template>
	<view>
		<view class="width100 mart10 backcorfff">
			<view class="titlename fcor666">营业执照</view>
			<view class="width94 displ">
				<image :src="imgsUrl+businimg" v-if="businimg" mode="widthFix" class="width45" style="margin-left: 3%;"
					@click="upload(1)"></image>
				<image src="../../../static/img/businesslic.png" v-else mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="upload(1)"></image>
				<image src="../../../static/img/businesslic1.png" mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="perImage('../../../static/img/businesslic1.png')"></image>
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">公司名称</view>
				<input placeholder="请输入营业执照上的名称" v-model="companyname" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="notes font13" style="color: #eb5823;border-bottom: 1px solid #f6f6f6;">
				<image mode="widthFix" class="iconw" src="../../../static/img/gth.png"></image> 公司名称应与营业执照一致
			</view>
			<view class="username">
				<view class="namecont">营业执照号</view>
				<input placeholder="请输入营业执照号" v-model="businnum" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">注册地址</view>
				<input placeholder="请输入注册地址" v-model="regaddress" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username" style="border-bottom: 0px;">
				<view class="namecont">营业期限</view>
				<view class="width30 aliitem" @tap="timetype='1'">
					<radio class="checbox" :checked="timetype == '1'" color="#0083f5" /> 选择时间
				</view>
				<view class="width30 aliitem" @tap="timetype='2'">
					<radio class="checbox" :checked="timetype == '2'" color="#0083f5" /> 长期有效
				</view>
			</view>
			<view class="username width80">
				<picker mode="date" class="width40 fotct" :value="start_date" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="date">{{start_date}}</view>
				</picker>
				<view class="width10 fotct">至</view>
				<picker v-if="timetype == '1'" mode="date" class="width40 fotct" :value="end_date" :start="startDate"
					:end="endDate" @change="bindDateChange2">
					<view class="date">{{end_date}}</view>
				</picker>
				<view class="width40 fotct fcor999" v-if="timetype == '2' ">长期有效</view>
			</view>
			<view class="username">
				<view class="namecont">行业类目</view>
				<input placeholder="请选择类目" v-model="industrycategory" style="width: 70%;" disabled="true"
					@click="showjob()" placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
				<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw"></image>
			</view>
			<view class="username">
				<view class="namecont">经营地区</view>
				<pickRegions :defaultRegion="defaultRegionCode" class="width70" @getRegion="handleGetRegion">
					<view style="color: #333333;font-size:14px;padding-top:2px;" v-if="regionName">
						{{regionName}}
					</view>
					<view style="color: #bfbfbf;font-size:14px;padding-top:2px;" v-else>请选择经营地区</view>
				</pickRegions>
				<image src="../../../static/img/jtg.png" mode="widthFix" class="iconw"></image>
			</view>
			<view class="username">
				<view class="namecont">详情地址</view>
				<input placeholder="请精确到XX路XX号" v-model="detailsaddress" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">门店账号</view>
				<input placeholder="请输入门店账号" v-model="storeaccount" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">门店名称</view>
				<input placeholder="请输入门店名称" v-model="storename" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="username">
				<view class="namecont">门店电话</view>
				<input placeholder="请输入门店电话" v-model="storephone" style="width: 70%;"
					placeholder-style="color: #bfbfbf;font-size:14px;padding-top:2px;" />
			</view>
			<view class="notes font16" style="border-bottom: 0px;">
				<view class="width70 aliitem fcor666">
					门店照片
				</view>
			</view>
			<view class="width94 displ mart5">
				<image :src="imgsUrl+storeimg1" v-if="storeimg1" mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="upload(6)"></image>
				<image src="../../../static/img/store/store1.png" v-else mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="upload(6)"></image>
				<image src="../../../static/img/store/store2.png" mode="widthFix" class="width45"
					@click="perImage('../../../static/img/store/store2.png')" style="margin-left: 3%;"></image>
			</view>

			<view class="width94 displ mart5">
				<image :src="imgsUrl+storeimg2" v-if="storeimg2" mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="upload(7)"></image>
				<image src="../../../static/img/store/store3.png" v-else mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="upload(7)"></image>
				<image src="../../../static/img/store/store4.png" mode="widthFix" class="width45"
					@click="perImage('../../../static/img/store/store4.png')" style="margin-left: 3%;"></image>
			</view>

			<view class="width94 displ mart5 marb15">
				<image :src="imgsUrl+storeimg3" v-if="storeimg3" mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="upload(8)"></image>
				<image src="../../../static/img/store/store5.png" v-else mode="widthFix" class="width45"
					style="margin-left: 3%;" @click="upload(8)"></image>
				<image src="../../../static/img/store/store6.png" mode="widthFix" class="width45"
					@click="perImage('../../../static/img/store/store6.png')" style="margin-left: 3%;"></image>
			</view>
		</view>
		<view class="btn" @tap="configStore">提交</view>
		<view class="height60"></view>
	</view>
</template>

<script>
	import {
		recognizeBusinessLicense,
		configStore
	} from '../../../Utils/Api.js';
	import pickRegions from '../../../components/pick-regions/pick-regions.vue';
	let app = getApp();
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				reqUrl: app.globalData.url, //请求地址
				imgsUrl: app.globalData.imgUrl, //图片访问地址
				businessLicenselist: [], // 营业执照识别数据
				businimg: '', //营业执照图片
				companyname: '', //公司名称
				businnum: '', // 营业执照号
				regaddress: '', //注册地址
				industrycategory: '', //行业类目
				inducateid: '', //行业id
				detailsaddress: '', // 详情地址 
				timetype: '1', // times:选择时间  longterm: 长期
				start_date: '开始时间', //开始时间
				end_date: '结束时间', //到期时间
				region: [], //选择区域
				areaCode: '', //区级
				defaultRegion: ['北京市', '市辖区', '东城区'], //默认地区
				defaultRegionCode: '110101', //区级编号
				storeaccount: '', //门店账号
				storename: '', //门店名称
				storephone: '', //门店电话
				storeimg1: '', //门店图片
				storeimg2: '', //门店图片
				storeimg3: '', //门店图片
				userInfo: app.globalData.userInfo
			}
		},
		computed: {
			//开始时间转化
			startDate() {
				return this.getDate('start');
			},
			//结束时间转化
			endDate() {
				return this.getDate('end');
			},
			//地区转换
			regionName() {
				// 转为字符串
				this.areaCode = this.region.map(item => item.code)[2];
				return this.region.map(item => item.name).join('-');
			}
		},
		methods: {
			// 选择开始日期
			bindDateChange: function(e) {
				this.start_date = e.target.value;
			},
			// 选择结束日期
			bindDateChange2: function(e) {
				this.end_date = e.target.value;
			},
			// 获取当前时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//选择地区
			handleGetRegion(region) {
				this.region = region;
			},
			// 放大图片
			perImage(item) {
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [item] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			//上传图片
			upload(item) {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: that.reqUrl + '/mer/uploadfile?merId=' + that.userInfo.mer.id,
							filePath: tempFilePaths[0],
							header: {
								"Authorization": app.globalData.token
							},
							name: 'image',
							formData: {
								files: tempFilePaths[0]
							},
							success: function(uploadFileRes) {
								if (item == 1) {
									that.recognizeBusinessLicense(JSON.parse(uploadFileRes.data)
										.return_data[0]);
								}
								if (item == 6) {
									that.storeimg1 = JSON.parse(uploadFileRes.data).return_data[0];
								}
								if (item == 7) {
									that.storeimg2 = JSON.parse(uploadFileRes.data).return_data[0];
								}
								if (item == 8) {
									that.storeimg3 = JSON.parse(uploadFileRes.data).return_data[0];
								}
							}
						});
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			onShow() {
				if (app.globalData.businessid) {
					this.industrycategory = app.globalData.businessname;
					this.inducateid = app.globalData.businessid;
				}
			},
			//营业执照识别
			recognizeBusinessLicense(item) {
				uni.showLoading({
					title: '识别中...'
				})
				let params = {
					url: this.imgsUrl + item
				}
				recognizeBusinessLicense(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000' && res.return_data) {
						this.businimg = item;
						this.businessLicenselist = JSON.parse(res.return_data.data).data;
						this.companyname = this.businessLicenselist.companyName;
						this.detailsaddress = this.businessLicenselist.businessAddress;
						this.businnum = this.businessLicenselist.creditCode;
						this.regaddress = this.businessLicenselist.businessAddress;
						this.start_date = this.businessLicenselist.RegistrationDate;
						let times = this.businessLicenselist.validPeriod.split('至');
						if (times[1] == '永久') {
							this.timetype = '2';
						}
					} else {
						uni.showToast({
							title: '请上传正确的营业执照',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			//选择行业
			showjob() {
				uni.navigateTo({
					url: '../business-category/business-category'
				})
			},
			// 提交门店信息
			configStore() {
				let that = this;
				if (!that.businimg) {
					uni.showToast({
						title: '请上传营业执照',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.businnum) {
					uni.showToast({
						title: '请填写营业执照号',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.regaddress) {
					uni.showToast({
						title: '请填写注册地址',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.start_date) {
					uni.showToast({
						title: '请填写营业执照开始时间',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.end_date) {
					uni.showToast({
						title: '请填写营业执照结束时间',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.companyname) {
					uni.showToast({
						title: '请填写公司名称',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.inducateid) {
					uni.showToast({
						title: '请选择行业类目',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.areaCode) {
					uni.showToast({
						title: '请选择经营地区',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.detailsaddress) {
					uni.showToast({
						title: '请填写详情地址',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.storeaccount) {
					uni.showToast({
						title: '请填写门店账号',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.storename) {
					uni.showToast({
						title: '请填写门店名称',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.storephone) {
					uni.showToast({
						title: '请填写门店电话',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.storeimg1) {
					uni.showToast({
						title: '请上传门头照片',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.storeimg2) {
					uni.showToast({
						title: '请上传收银台照片',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (!that.storeimg3) {
					uni.showToast({
						title: '请上传室内照片',
						icon: "none",
						duration: 2000
					});
					return;
				}
				if (that.timetype == 2) {
					that.end_date = '长期有效'
				}
				uni.showModal({
					title: '提交门店',
					content: '确认信息是否正确。',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中...'
							})
							let datas = {
								"account": {
									"loginName": that.storeaccount
								},
								"name": that.storename,
								"telephone": that.storephone,
								"doorHeadImg": that.storeimg1,
								"cashRegisterImg": that.storeimg2,
								"internalImg": that.storeimg3,
								"blisUrl": that.businimg,
								"blisName": that.companyname,
								"blisNo": that.businnum,
								"blisPeriodStart": that.start_date,
								"blisPeriodType": that.timetype, // 营业执照期限类型  1：有效期   2：长期
								"blisPeriodEnd": that.end_date,
								"blisRegAddress": that.regaddress,
								"merId": that.userInfo.mer.id,
								"storeIndustry": {
									"childId": that.inducateid
								},
								"storeRegion": {
									"areaCode": that.areaCode,
									"address": that.detailsaddress
								}
							}
							configStore(datas).then(res => {
								uni.hideLoading();
								if (res.return_code == '000000') {
									uni.showToast({
										title: '提交成功',
										icon: 'none',
										duration: 2000,
										success() {
											setTimeout(() => {
												uni.navigateBack({})
											}, 1000);
										}
									})
								} else {
									uni.showToast({
										title: res.return_msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.btn {
		color: #FFFFFF;
		background-color: #0083f5;
		width: 90%;
		margin-left: 5%;
		margin-top: 80rpx;
		margin-bottom: 50rpx;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		font-size: 40rpx;
	}

	.titlename {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		padding: 0 45upx;
	}

	.username {
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 8upx 45upx;

		input {
			width: 50%;
			height: 50upx;
			font-size: 16px;
			color: #333333;
			font-weight: blod;
		}

		.get-code {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 7px;
			z-index: 3;
			border: 1px solid #bfbfbf;
			width: 25%;
			padding: 3px 5px;
			border-radius: 22px;

			&:after {
				content: " ";
				width: 1upx;
				height: 50upx;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}

		.namecont {
			color: #666666;
			width: 28%;
		}
	}

	.storename {
		width: calc(100% - 40upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 8upx 20upx;

		.namecont {
			color: #666666;
			width: 25%;
		}
	}

	.notes {
		width: calc(100% - 90upx);
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 20rpx 45rpx;
		color: #bfbfbf;

	}
</style>