H5-Merchant/openmerchant/shopentry/processstore.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">
					店铺LOGO
				</view>
				<view class="process-zhuti-yi-upload" @click="storeLogo">
					<image v-if="merchantsInStore.logo" :src="merchantsInStore.logo" mode=""></image>
					<image v-else src="https://cdn.bjtdba.com/vod/image/2022-08-22/20220822172529458.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="merchantsInStore.mer_short_name">
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					门店简介
				</view>
				<view class="process-zhuti-yi-input">
					<input placeholder="请填写门店简介" v-model="merchantsInStore.mark">
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					门店分类
				</view>
				<view class="process-zhuti-yi-input">
					<picker class="process-zhuti-yi-picker" @change="changeStoretype" :value="storeTypeindex" :range="storeTypeData" :range-key="'category_name'">
						<view v-if="storeTypeindex === null" class="uni-input int-col">请选择门店分类</view>
						<view v-else class="uni-input">{{storeTypeData[storeTypeindex].category_name}}</view>
					</picker>
					<!-- <view class="back-combox">
						<view class="back-combox__input-box">
							<input class="back-combox__input" placeholder="请选择门店分类" disabled v-model="storeType.category_name" @click="showSelector = true" />
						</view>
						<view class="back-combox__selector" v-if="showSelector">
							<view class="back-popper__arrow"></view>
							<scroll-view scroll-y="true" class="back-combox__selector-scroll">
								<view class="back-combox__selector-item" v-for="(item,index) in storeTypeData" :key="index" @click="onSelectorClick(item)">
									<text>{{item.category_name}}</text>
								</view>
							</scroll-view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					选择省份
				</view>
				<view class="process-zhuti-yi-input">
					<picker class="process-zhuti-yi-picker" @change="changeProvince" :value="provinceListindex" :range="provinceList" :range-key="'name'">
						<view v-if="provinceListindex === null" class="uni-input int-col">请选择省份</view>
						<view v-else class="uni-input">{{provinceList[provinceListindex].name}}</view>
					</picker>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					选择城市
				</view>
				<view class="process-zhuti-yi-input">
					<picker class="process-zhuti-yi-picker" @change="changeCity" :value="cityListindex" :range="cityList" :range-key="'name'">
						<view v-if="cityListindex === null" class="uni-input int-col">请选择城市</view>
						<view v-else class="uni-input">{{cityList[cityListindex].name}}</view>
					</picker>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					选择区
				</view>
				<view class="process-zhuti-yi-input">
					<picker class="process-zhuti-yi-picker" @change="changeArea" :value="areaListindex" :range="areaList" :range-key="'name'">
						<view v-if="areaListindex === null" class="uni-input int-col">请选择区</view>
						<view v-else class="uni-input">{{areaList[areaListindex].name}}</view>
					</picker>
				</view>
			</view>
			<view class="process-zhuti-yi">
				<view class="process-zhuti-yi-text">
					选择街道
				</view>
				<view class="process-zhuti-yi-input">
					<picker class="process-zhuti-yi-picker" @change="changeStreet" :value="streetListindex" :range="streetList" :range-key="'name'">
						<view v-if="streetListindex === null" class="uni-input int-col">请选择街道</view>
						<view v-else class="uni-input">{{streetList[streetListindex].name}}</view>
					</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="merchantsInStore.addr">
				</view>
			</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 ? nextStep() : '' ">
				下一步
			</view>
		</view>
		
	</view>
</template>

<script>
	import { addressList, selectMerchantSort } from '@/commit/api.js';
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				merchantsInStore: {
					logo: '', // 店铺logoURL
					mer_short_name: '', // 门店简称
					mark: '', // 门店简介
					cate_id: '', // 门店分类
					province_id: 0, // 省ID
					city_id: 0, // 市ID
					area_id: 0, // 区ID
					street_id: 0, // 街道ID
					addr: '', // 详细地址
				},
				showSelector: false,
				storeTypeData: [],
				storeTypeindex: null,
				storeType: {},
				value: 0,
				addressData: [], //城市区列表
				provinceList:[{name:'暂无数据'}],
				provinceListindex: null,
				cityList:[{name:'暂无数据'}],
				cityListindex: null,
				areaList:[{name:'暂无数据'}],
				areaListindex: null,
				streetList:[{name:'暂无数据'}],
				streetListindex: null,
				btnBir: false,
				nextMerchantsData: {},
				merchantsPass: false
			}
		},
		onLoad(opsition) {
			const fanxian = uni.getStorageSync('merchants_in_store');
			const merchantsDataAll = this.merchantsDataAlls.merchantsDataAll;
			
			if(JSON.stringify(merchantsDataAll)!="{}"){
				// 获取门店分类反显
				selectMerchantSort().then(res => {
					if(res.data.status==200){
						this.storeTypeData = res.data.data.merchantCategory;
						this.storeTypeData.filter((item,index) => {
							if(item.merchant_category_id == merchantsDataAll.cate_id){
								return this.storeTypeindex = index
							}
						})
					}
				}, fail => {
					console.log(fail)
				})
				
				// 获取省市区街道反显
				addressList({id:1}).then(res => {
					if(res.data.status==200){
						this.provinceList = res.data.data.addressList;
						this.provinceListindex = Number(merchantsDataAll.provinceMap.index);
						
						addressList({id:2, code: merchantsDataAll.province_id}).then(res => {
							if(res.data.status==200){
								this.cityList = res.data.data.addressList;
								this.cityListindex = Number(merchantsDataAll.cityMap.index);
								
								addressList({id:3, code: merchantsDataAll.city_id}).then(res => {
									if(res.data.status==200){
										this.areaList = res.data.data.addressList;
										this.areaListindex = Number(merchantsDataAll.areaMap.index);
										
										addressList({id:4, code: merchantsDataAll.area_id}).then(res => {
											if(res.data.status==200){
												this.streetList = res.data.data.addressList;
												this.streetListindex = Number(merchantsDataAll.streetMap.index);
											}
										}, fail => {
											console.log(fail)
										})
									}
								}, fail => {
									console.log(fail)
								})
							}
						}, fail => {
							console.log(fail)
						})
					}
				}, fail => {
					console.log(fail)
				})
				// this.merchantsInStore = this.nextMerchantsData;
				
				this.merchantsInStore.logo = merchantsDataAll.logo; // 店铺logoURL
				this.merchantsInStore.mer_short_name = merchantsDataAll.mer_short_name;// 门店简称
				this.merchantsInStore.mark = merchantsDataAll.mark; // 门店简介
				this.merchantsInStore.cate_id = merchantsDataAll.cate_id; // 门店分类
				this.merchantsInStore.province_id = merchantsDataAll.province_id; // 省ID
				this.merchantsInStore.city_id = merchantsDataAll.city_id; // 市ID
				this.merchantsInStore.area_id = merchantsDataAll.area_id; // 区ID
				this.merchantsInStore.street_id = merchantsDataAll.street_id; // 街道ID
				this.merchantsInStore.addr = merchantsDataAll.addr; // 详细地址
				// this.merchantsPass = true;
				
			}else if(fanxian){
				// 获取门店分类反显
				selectMerchantSort().then(res => {
					if(res.data.status==200){
						this.storeTypeData = res.data.data.merchantCategory;
						this.storeTypeData.filter((item,index) => {
							if(item.merchant_category_id == fanxian.cate_id){
								return this.storeTypeindex = index
							}
						})
					}
				}, fail => {
					console.log(fail)
				})
				
				// 获取省市区街道反显
				addressList({id:1}).then(res => {
					if(res.data.status==200){
						this.provinceList = res.data.data.addressList;
						this.provinceList.filter((item,index) => {
							if(item.code == fanxian.province_id){
								return this.provinceListindex = index
							}
						})
						
						addressList({id:2, code: fanxian.province_id}).then(res => {
							if(res.data.status==200){
								this.cityList = res.data.data.addressList;
								this.cityList.filter((item,index) => {
									if(item.code == fanxian.city_id){
										return this.cityListindex = index
									}
								})
								
								addressList({id:3, code: fanxian.city_id}).then(res => {
									if(res.data.status==200){
										this.areaList = res.data.data.addressList;
										this.areaList.filter((item,index) => {
											if(item.code == fanxian.area_id){
												return this.areaListindex = index
											}
										})
										
										addressList({id:4, code: fanxian.area_id}).then(res => {
											if(res.data.status==200){
												this.streetList = res.data.data.addressList;
												this.streetList.filter((item,index) => {
													if(item.code == fanxian.street_id){
														return this.streetListindex = index
													}
												})
											}
										}, fail => {
											console.log(fail)
										})
									}
								}, fail => {
									console.log(fail)
								})
							}
						}, fail => {
							console.log(fail)
						})
					}
				}, fail => {
					console.log(fail)
				})
				
				this.merchantsInStore = fanxian;
			}else{
				// 获取门店分类
				selectMerchantSort().then(res => {
					if(res.data.status==200){
						this.storeTypeData = res.data.data.merchantCategory;
					}
				}, fail => {
					console.log(fail)
				})
				
				// 获取省
				addressList({id:1}).then(res => {
					if(res.data.status==200){
						this.provinceList = res.data.data.addressList;
					}
				}, fail => {
					console.log(fail)
				})
			}
		},
		onShow(){
		},
		computed:{
			...mapGetters(['merchantsDataAlls'])
		},
		watch: {
			merchantsInStore:{
				handler: function(val) {
					this.isShow(val)
				},
				deep: true
			}
		},
		methods: {
			topgi(){
				uni.navigateBack({
					delta:1
				});
			},
			isShow(list) {
				let temp = true
				if(list){
					for(let i in list){
						if(list[i] == "" || list[i] == null){
							temp = false
						}
					}
				}
				this.btnBir = temp
			},
			// 店铺logoURL
			storeLogo(){
				let that = this;
				that.$time.uploadPictures(res => {
					that.merchantsInStore.logo = res;
				});
			},
			// 选择门店分类
			// onSelectorClick(data) {
			// 	this.showSelector = false;
			// 	this.storeType = data;
			// 	this.merchantsInStore.cate_id = data.merchant_category_id;
			// },
			changeStoretype(e){
				this.storeTypeindex = e.detail.value;
				this.merchantsInStore.cate_id = this.storeTypeData[this.storeTypeindex].merchant_category_id;
			},
			//选择省份
			changeProvince(e) {
				if(this.provinceList[0].name == '暂无数据'){
					return false
				}
				this.provinceListindex = e.detail.value;
				this.merchantsInStore.province_id = this.provinceList[this.provinceListindex].code;
				addressList({id:2 , code:this.merchantsInStore.province_id}).then(res => {
					if(res.data.status==200){
						this.cityList = res.data.data.addressList;
						
						this.cityListindex = null;
						this.areaList = [{name:'暂无数据'}];
						this.areaListindex = null;
						this.streetList = [{name:'暂无数据'}];
						this.streetListindex = null;
					}
				}, fail => {
					console.log(fail)
				})
				
			},
			// 选择城市
			changeCity(e){
				if(this.cityList[0].name == '暂无数据'){
					return false
				}
				this.cityListindex = e.detail.value;
				this.merchantsInStore.city_id = this.cityList[this.cityListindex].code;
				addressList({id:3 , code:this.merchantsInStore.city_id}).then(res => {
					if(res.data.status==200){
						this.areaList = res.data.data.addressList;
						
						this.areaListindex = null;
						this.streetList = [{name:'暂无数据'}];
						this.streetListindex = null;
					}
				}, fail => {
					console.log(fail)
				})
			},
			// 选择区
			changeArea(e){
				if(this.areaList[0].name == '暂无数据'){
					return false
				}
				this.areaListindex = Number(e.detail.value);
				this.merchantsInStore.area_id = this.areaList[this.areaListindex].code;
				addressList({id:4 , code:this.merchantsInStore.area_id}).then(res => {
					if(res.data.status==200){
						this.streetList = res.data.data.addressList;
						
						this.streetListindex = null;
					}
				}, fail => {
					console.log(fail)
				})
			},
			// 选择街道
			changeStreet(e){
				if(this.streetList[0].name == '暂无数据'){
					return false
				}
				this.streetListindex = Number(e.detail.value);
				this.merchantsInStore.street_id = this.streetList[this.streetListindex].code;
			},
			// 上一步
			backStep(){
				// uni.request({
				// 	url: 'https://kfcs.bjtdba.com/sys/captcha',
				// 	method: 'POST',
				// 	header:{
						
				// 	},
				// 	data: {
						
				// 	},
				// 	success: (res) => {
							
				// 	}
				// });
				// return
				uni.navigateBack({
					delta:1
				});
			},
			// 下一步
			nextStep(){
				if(this.merchantsInStore.logo == "" )return uni.showToast({ title: "请上传店铺LOGO", icon: "none" });
				if(this.merchantsInStore.mer_short_name == "" ) return uni.showToast({ title: "请填写门店简称", icon: "none" });
				if(this.merchantsInStore.mark == "" ) return uni.showToast({ title: "请填写门店简介", icon: "none" });
				if(this.merchantsInStore.cate_id == "" ) return uni.showToast({ title: "请选择门店分类", icon: "none" });
				if(this.merchantsInStore.province_id == 0 ) return uni.showToast({ title: "请选择省份", icon: "none" });
				if(this.merchantsInStore.city_id == 0 ) return uni.showToast({ title: "请选择城市", icon: "none" });
				if(this.merchantsInStore.area_id == 0 ) return uni.showToast({ title: "请选择街道", icon: "none" });
				if(this.merchantsInStore.addr == "" ) return uni.showToast({ title: "请填写详细地址", icon: "none" });
				
				uni.setStorage({
					key: 'merchants_in_store',
					data: this.merchantsInStore
				});
				
				// if(this.merchantsPass){
				// 	this.merchantsInStore = Object.assign(this.merchantsInStore, this.nextMerchantsData)
				// 	uni.navigateTo({
				// 		url: `./processidentity?positionResult=${JSON.stringify(this.merchantsInStore)}`
				// 	});
				// }else{
					uni.navigateTo({
						url: './processidentity'
					});
				// }
				
			}
		}
	}
</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: 500rpx;
						height: 340rpx;
					}
				}
				.process-zhuti-yi-picker{
					height: 94rpx;
					background: rgba(31, 124, 255, 0.1);
					padding-left: 32rpx;
					line-height: 94rpx;
					border-radius: 8rpx;
				}
				.int-col{
					color: #999999;
				}
			}
		}
		.process-zhuti-btnbox{
			margin: 50rpx 0 94rpx;
			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;
		}
		
		.back-combox {
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 100%;
			height: 94rpx;
			// background: rgba(31, 124, 255, 0.1);
			border-radius: 8rpx;
			box-sizing: border-box;
		}
		
		.back-combox__input-box {
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: row;
			align-items: center;
		}
		
		.back-combox__input {
			flex: 1;
			font-size: 30rpx;
			height: 94rpx;
			line-height: 94rpx;
		}
		
		.back-combox__selector {
			box-sizing: border-box;
			position: absolute;
			top: calc(100% + 24rpx);
			left: 0;
			width: 100%;
			background-color: #FFFFFF;
			border: 1px solid #EBEEF5;
			border-radius: 12rpx;
			box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
			z-index: 1000;
			padding: 8rpx 0;
		}
		
		.back-combox__selector-scroll {
			max-height: 400rpx;
			box-sizing: border-box;
		}
		
		.back-combox__selector-empty,
		.back-combox__selector-item {
			display: flex;
			cursor: pointer;
			line-height: 72rpx;
			font-size: 28rpx;
			text-align: center;
			padding: 0px 20rpx;
		}
		
		.back-combox__selector-item:hover {
			background-color: #f9f9f9;
		}
		
		.back-combox__selector-empty:last-child,
		.back-combox__selector-item:last-child {
			border-bottom: none;
		}
		
		// picker 弹出层通用的指示小三角
		.back-popper__arrow,
		.back-popper__arrow::after {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			border-width: 12rpx;
		}
		
		.back-popper__arrow {
			filter: drop-shadow(0 4rpx 24rpx rgba(0, 0, 0, 0.03));
			top: -12rpx;
			left: 10%;
			margin-right: 6rpx;
			border-top-width: 0;
			border-bottom-color: #EBEEF5;
		}
		
		.back-popper__arrow::after {
			content: " ";
			top: 2rpx;
			margin-left: -12rpx;
			border-top-width: 0;
			border-bottom-color: #fff;
		}
		
		.back-combox__no-border {
			border: none;
		}
		
		.btn-bir{
			background: #1F7CFF;
		}
	}
</style>