guosen-ldt-shop/pages/shop-info/shop-info.vue

<template>
	<view>
		<u-navbar title="店铺资料" title-color="#fff" back-icon-color="#fff" :background="background"
			:border-bottom="false"></u-navbar>
		<view class="bg"></view>
		<view class="card">
			<view class="title u-flex u-row-between u-col-center">
				<text>完善商家资料</text>
				<text v-if="step==2||step==3" @click="prevStep" class="u-font-24" style="color: #999">上一步</text>
			</view>
			<u-form :model="form" :label-width="labelWidth" ref="uForm">
				<block v-if="step==1">
					<view class="border">
						<u-form-item label="门店名称" prop="name">
							<u-input :border="false" placeholder="比如名杨国福麻辣烫(时尚天河2店)" v-model="form.name"></u-input>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="业务联系人" prop="personName">
							<u-input :disabled="isEdit" :border="false" placeholder="请输入业务联系人"
								v-model="form.personName"></u-input>
						</u-form-item>
					</view>
					<view class="tips">
						<text>*认证通过后，业务联系人将不可修改</text>
					</view>
					<view class="border">
						<u-form-item label="联系方式" prop="personTel">
							<u-input disabled placeholder="请输入联系方式" v-model="form.personTel" type="number"></u-input>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="邮箱" prop="email">
							<u-input :border="false" placeholder="请输入邮箱(非必填项)" v-model="form.email"></u-input>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="所在商场" prop="phone">
							<u-input @click="mallShow=true" :border="false" placeholder="请选择所在商场(非必填项)"
								v-model="mallLabel" type="select"></u-input>
							<u-icon class="clear" color="#999" v-if="mallLabel" name="close-circle-fill"
								@click.stop="clear('mallLabel')"></u-icon>
						</u-form-item>
					</view>
					<view class="border" v-if="form.mallId&&!$isEmpty(mallAreaList)">
						<u-form-item label="所在区域" prop="phone">
							<u-input @click="mallAreaShow=true" :border="false" placeholder="请选择所在区域"
								v-model="mallAreaLabel" type="select"></u-input>
							<u-icon class="clear" color="#999" v-if="mallAreaLabel" name="close-circle-fill"
								@click.stop="clear('mallAreaLabel')"></u-icon>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="店铺标语" prop="name">
							<u-input :border="false" placeholder="请输入店铺标语(非必填项)" v-model="form.slogan"></u-input>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item  label-width="200" label="公司种类" left-icon="grid">
							<view class="flex justify-between " @click="chooseLabel">
								<view class="u-flex u-flex-wrap">
									<text v-if="form.labelKey" class="text-cut-1">{{form.labelKey}}</text>
									<text v-else style="color: #c0c4cc;">请选择</text>
								</view>
								<view>
									<u-icon name="arrow-right" color="#737373"></u-icon>
								</view>
							</view>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="所在地区"  prop="address">
							<u-input :disabled="true" :border="false" placeholder="请选择所在地区" @click="regionShow=true" v-model="form.location"></u-input>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="具体地址" label-position="top" prop="address">
							<u-input :border="false" placeholder="请详细写到门店编号" v-model="form.address"></u-input>
							<view slot="right">
								<u-button @click="chooseAddress" size="mini">获取地址</u-button>
							</view>
						</u-form-item>
					</view>

				</block>
				<block v-else-if="step==2">
					<view class="border">
						<u-form-item label="上传店铺封面" prop="cover" label-position="top">
							<upload-img title="请上传店铺封面" @click="chooseImageShop" :model="form.cover"
								dataName="cover" ></upload-img>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="上传营业执照" prop="businessLicense" label-position="top">
							<upload-img title="请上传营业执照" @click="chooseImageAudit" :model="auditForm.businessLicense"
								dataName="businessLicense" ></upload-img>
						</u-form-item>
					</view>
					<view class="tips">
						<text>*认证通过后，营业执照将不可修改</text>
					</view>
					<view class="border">
						<view style="padding: 30rpx 0 10rpx;">
							<text>店铺实况</text>
							<text style="font-size: 24rpx;color: #999999;">（请上传门头、店内、收银台照片)</text>
							<mp-upload-img @click='uploadShopPics' :count="5"></mp-upload-img>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="border">
						<u-form-item label="公司法人姓名" prop="legalPerson" label-position="top">
							<u-input :border="false" placeholder="请输入公司法人姓名(非必填项)" v-model="auditForm.legalPerson">
							</u-input>
						</u-form-item>
					</view>
					<view class="border">
						<u-form-item label="身份证号码" prop="personIdCard">
							<u-input :disabled="isEdit" :border="false" placeholder="请输入身份证号码"
								v-model="auditForm.idCard"></u-input>
						</u-form-item>
					</view>
					<view class="tips">
						<text>*认证通过后，身份证将不可修改</text>
					</view>
					<view class="photo border">
						<text>请拿出本人有效二代身份证件准备拍摄</text>
						<view class="box">
							<upload-img title="上传人像面照片" @click="chooseImageAudit" :model="auditForm.idCardFront"
								dataName="idCardFront" :enableImg="true"></upload-img>
						</view>
						<view class="tips">
							<text>*认证通过后，身份证人像面将不可修改</text>
						</view>
						<view class="box" style="margin-top: 0;">
							<upload-img title="上传国徽面照片" @click="chooseImageAudit" :model="auditForm.idCardContrary"
								dataName="idCardContrary" :enableImg="true" :bgImg="idCardContraryBgImg"></upload-img>
						</view>
						<view class="tips">
							<text>*认证通过后，身份证国徽面将不可修改</text>
						</view>
						<view style="margin: 30rpx 0;">
							<text>拍摄时确保身份证边框完整，字体清晰，亮度均匀</text>
						</view>
					</view>

				</block>
			</u-form>
			<view v-if="step==1||step==2" class="center flex-direction" style="margin-top: 100rpx;">
				<view @click="nextStep" class="btn cu-btn round" style="width:90%;height: 90rpx;font-size: 34rpx;">
					下一步
				</view>
			</view>
			<view v-else class="center flex-direction margin-bottom-30" style="margin-top: 100rpx;">
				<view v-if="!isEdit" class=" margin-bottom-20 text-sm center ">
					<text style="color: #949494;">确认注册即代表已阅读并同意</text>
					<text style="color: #104DFF;" @click="protocol">《联兑通软件服务协议》</text>
				</view>
				<view @click="submit" class="btn cu-btn round" style="width:90%;height: 90rpx;font-size: 34rpx;">
					提交资料
				</view>
			</view>
		</view>
		<!-- 商场 -->
		<u-popup border-radius="60" height="60%" mode="bottom" v-model="mallShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="mallKeyWord" type="text" :adjust-position="false"
						placeholder="请输入关键字搜索" confirm-type="search" />
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(mallList)" style="padding-top: 110rpx;height: 100%;" :scroll-y="true">
				<view @click="selectMall(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"
					v-for="(item,index) in mallList" :key="index">
					<text>{{item.name}}</text>
				</view>
				<u-divider v-if="mallList.length>=20" height="80">只显示20条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>

		<u-select v-model="mallAreaShow" label-name="name" value-name="id" mode="single-column" :list="mallAreaList"
			@confirm="mallAreaConfirm"></u-select>
		<u-picker @confirm="regionConfirm" v-model="regionShow" mode="region"></u-picker>
	</view>
</template>

<script>
	import mpUploadImg from "@/components/mp-uploadImg/mp-uploadImg.vue"
	import uploadImg from "@/components/uploadimg/uploadImg.vue"
	export default {
		components: {
			uploadImg,mpUploadImg
		},
		data() {
			return {
				//身份证正面背景图
				idCardContraryBgImg: 'https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/525724b4977d457eafea331f8595a675-6MM5CLdbBt1z7042ac12465719c764f2ca05a37ffee9.png',
				//上传图片
				imgList: [],

				title: '',
				background: {
					backgroundColor: '#D18C42',
				},
				labelWidth: 170,
				//商户实体
				form: {
					id: '',
					mallId: '',
					personName: '',
					personTel: '',
					locationCode:'',
					location:'',
					cover: '',
					name: '',
					labelParentIds:'',
					labelJson:"",
					labelKey:"",
					shopPic:"",
					email: '',
					slogan: '',
					longitude:'',
					latitude:'',
					address:'',
					auditStatus: this.$global.SHOP_AUDIT.WAITING,//待审核
				},
				auditForm:{
					address:"",
					entity:'',
					idCard:'',
					idCardFront:'',
					idCardContrary:'',
					businessLicense:'',
					legalPerson:"",
				},
				//商场
				mallShow: false,
				mallKeyWord: '',
				mallList: [],
				mallLabel: '',
				//区域
				mallAreaShow: false,
				mallAreaList: [],
				mallAreaLabel: '',
				//所在地区
				regionShow:false,
				//门店地址
				shopAddress: '',
				step: 1,
				//编辑还是修改
				isEdit: false
			}
		},
		watch: {
			mallKeyWord() {
				let that = this
				//节流函数
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.mallList = []
					that.fetchMallList()
				}, 500)
			},
			imgList() {
				if (!this.$isEmpty(this.imgList)) {
					this.form.shopPic = this.imgList.join(",")
				}
			}
		},
		onLoad(options) {
			if (this.$isEmpty(options.phone)) {
				this.$dialog.showModal('系统错误', false).then(() => {
					this.$back()
				})
				return
			}
			uni.$on('labelData',(labelData)=>{
				this.form.labelJson=labelData.labelJson
				this.form.labelKey=labelData.labelKey
				this.form.labelParentIds=labelData.labelParentIds
				this.$forceUpdate()
			})
			this.form.personTel = options.phone
			if (options.edit) {
				this.isEdit = true
				this.fetchShopDetail()
			}
			this.fetchMallList()
		},
		methods: {
			//所在地区
			regionConfirm(e){
				this.form.location=e.province.label+"-"+e.city.label+"-"+e.area.label
				this.form.locationCode=e.province.value+"0000,"+e.city.value+"00,"+e.area.value
			},
			//具体地址
			chooseAddress() {
				var _this = this
				uni.chooseLocation({
					success(res) {
						console.log(res);
						_this.form.address = res.address
						_this.form.longitude = res.longitude
						_this.form.latitude = res.latitude
					}
				})
			},
			//选择标签
			chooseLabel(){
				uni.navigateTo({
					url:"../chooseLable/chooseLable?label="+this.form.labelJson
				})
			},
			uploadShopPics(data) {
				this.imgList=data
			},
			async fetchShopDetail() {
				let params = {
					id: this.vuex_shopId
				}
				let res = await this.$api.shop.detail(params)
				this.$util.objectCoppy(this.form, res.data)
				this.mallLabel = res.data.mallName
				this.imgList = this.form.shopPic.split(",")
				this.getShopLabelByMallId()
			},
			prevStep() {
				if (this.step > 1 && this.step < 4) {
					this.step--
				}
			},
			nextStep() {
				if (this.step == 1) {
					if (this.$isEmpty(this.form.name)) {
						this.$u.toast('请输入店铺名')
						return
					}
					if (this.$isEmpty(this.form.personName)) {
						this.$u.toast('请输入业务联系人')
						return
					}
					if (this.$isEmpty(this.form.labelKey)) {
						this.$u.toast('请选择公司种类')
						return
					}
					if (this.$isEmpty(this.form.location)) {
						this.$u.toast('请选择所在地区')
						return
					}
					if (this.$isEmpty(this.form.address)) {
						this.$u.toast('请选择具体地址')
						return
					}
				}
				if (this.step == 2) {
					if (this.$isEmpty(this.auditForm.businessLicense)) {
						this.$u.toast('请上传营业执照')
						return
					}
				}
				if (this.step > 0 && this.step < 3) {
					this.step++
				}
			},
			
			clear(t) {
				if (t == 'mallAreaLabel') {
					this.mallAreaLabel = ''
				} else if (t == 'mallLabel') {
					this.mallLabel = ''
				}
			},
			async chooseImageShop(name) {
				let res = await this.$mpi.chooseImage()
				this.$api.uploadFile(res[0]).then(res => {
					this.form[name] = res.data.link
				})
			},
			async chooseImageAudit(name) {
				if (this.isEdit) {
					this.$u.toast('不可修改')
					return
				}
				let res = await this.$mpi.chooseImage()
				this.$api.uploadFile(res[0]).then(res => {
					this.auditForm[name] = res.data.link
					console.log(this.auditForm[name]);
				})
			},
			fetchMallList() {
				let params = {
					name: this.mallKeyWord,
					size: 20
				}
				this.$api.mall.list(params).then(res => {
					this.mallList = res.data.records
				})
			},
			fetchMallAreaList() {
				this.$api.mall.getMallAreaByMallId(this.form.mallId).then(res => {
					this.mallAreaList = res.data
				})
			},
			selectMall(item) {
				this.mallLabel = item.name
				this.form.mallId = item.id
				this.mallShow = false
				// this.fetchMallAreaList()
				//重新获取标签
				this.getShopLabelByMallId()
			},
			mallAreaConfirm(e) {
				this.mallAreaLabel = e[0].label
				this.form.mallAreaId = e[0].value
			},
			submit() {
				if (this.$isEmpty(this.auditForm.idCard)) {
					this.$u.toast('请输入身份证号码')
					return
				}
				if (this.$isEmpty(this.auditForm.idCardFront)) {
					this.$u.toast('请上传身份证正面照')
					return
				}
				if (this.$isEmpty(this.auditForm.idCardContrary)) {
					this.$u.toast('请上传身份证反面照')
					return
				}
				
				let params={
					shop:this.form,
					audit:this.auditForm
				}
				this.$api.shop.submitAudit(params).then(res=>{
					if (res.success == true) {
						uni.navigateTo({
							url:"/pages/login/submit-success"
						})
					}
				})
			},
			protocol() {
				uni.navigateTo({
					url: "/pages/webView/webView?url=" + this.$global.shopRegister
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.clear {
		position: absolute;
		right: 50rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99;
	}

	.bg {
		height: 220rpx;
		background-image: linear-gradient(#D18C42, #C99864);
		border-radius: 0 0 30% 30%;
	}

	.btn {
		background-color: $color;
		color: #FFFFFF;
	}

	.border {
		border-bottom: 1rpx solid #F4F4F4;
	}

	.tips {
		color: $color;
		text-align: right;
		margin-top: 10rpx;
		font-size: 22rpx;
	}

	.card {
		box-shadow: 0 0 20rpx #bebebe;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		position: relative;
		top: -180rpx;
		margin: 0 30rpx;
		padding: 40rpx;

		.title {
			margin-bottom: 30rpx;
			font-size: 36rpx;
			color: #000;
			font-weight: 800;
		}

		.photo {
			font-size: 26rpx;
			padding-top: 20rpx;

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
			}
		}
	}
</style>