修改

components/mp-uploadImg/mp-uploadImg.vue

@@ -0,0 +1,78 @@
+<template>
+	<view class="">
+		<view class="grid  grid-square flex-sub margin-top-50" :class="'col-'+count">
+			<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage(index)">
+				<image :src="imgList[index]" mode="aspectFill"></image>
+				<view class="cu-tag bg-red" @tap.stop="delImg(index)">
+					<text class='cuIcon-close'></text>
+				</view>
+			</view>
+			<view class="border" @click="uploadShopPics" v-if="imgList.length< count">
+				<image class="icon" src="@/static/icon/camera.png" mode=""></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			count: {
+				type: Number,
+				default: 4
+			}
+		},
+		data() {
+			return {
+				imgList: []
+			};
+		},
+		onLoad() {
+
+		},
+		methods: {
+			async uploadShopPics() {
+				let resp = await this.$mpi.chooseImage()
+				let res=await this.$api.uploadFile(resp[0])
+				this.imgList.push(res.data.link)
+				this.$emit('click',this.imgList)
+			},
+			viewImage(index) {
+				uni.previewImage({
+					urls: this.imgList,
+					current: index
+				});
+			},
+			delImg(index) {
+				let _this = this
+				uni.showModal({
+					title: '提示',
+					content: '确定删除',
+					success: (res) => {
+						if (res.confirm) {
+							_this.imgList.splice(index, 1)
+						}
+					}
+				})
+			},
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.border {
+		border: 4rpx dashed #e1e1e1;
+		position: relative;
+	}
+
+	.icon {
+		width: 50rpx;
+		height: 50rpx;
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		top: 0;
+		margin: auto;
+	}
+</style>

pages/shop-info/shop-info.vue

@@ -22,7 +22,8 @@
 					</view>
 					<view class="border">
 						<u-form-item label="业务联系人" prop="personName">
-							<u-input :disabled="isEdit" :border="false" placeholder="请输入业务联系人" v-model="form.personName"></u-input>
+							<u-input :disabled="isEdit" :border="false" placeholder="请输入业务联系人"
+								v-model="form.personName"></u-input>
 						</u-form-item>
 					</view>
 					<view class="tips">
@@ -70,7 +71,7 @@
 							</view>
 						</u-form-item>
 					</view>
-<!-- 					<view class="border">
+					<!-- 					<view class="border">
 						<u-form-item label="门店地址" prop="area">
 							<u-input @click="regionShow=true" :border="false" placeholder="请选择门店地址"
 								v-model="shopAddress" type="select"></u-input>
@@ -89,24 +90,14 @@
 				<block v-else-if="step==2">
 					<view class="border">
 						<u-form-item label="上传店铺封面" prop="cover" label-position="top">
-							<view class="uploadImg" @click="chooseImage('cover')">
-								<view v-if="$isEmpty(form.cover)">
-									<image class="icon" src="/static/icon/camera.png"></image>
-									<text>请上传店铺封面</text>
-								</view>
-								<image class="img" v-else :src="form.cover"></image>
-							</view>
+							<upload-img title="请上传店铺封面" @click="chooseImage" :model="form.cover"
+								dataName="cover" ></upload-img>
 						</u-form-item>
 					</view>
 					<view class="border">
 						<u-form-item label="上传营业执照" prop="businessLicense" label-position="top">
-							<view class="uploadImg" @click="chooseImage('businessLicense')">
-								<view v-if="$isEmpty(form.businessLicense)">
-									<image class="icon" src="/static/icon/camera.png"></image>
-									<text>请上传营业执照</text>
-								</view>
-								<image class="img" v-else :src="form.businessLicense"></image>
-							</view>
+							<upload-img title="请上传营业执照" @click="chooseImage" :model="form.businessLicense"
+								dataName="businessLicense" ></upload-img>
 						</u-form-item>
 					</view>
 					<view class="tips">
@@ -116,27 +107,18 @@
 						<view style="padding: 30rpx 0 10rpx;">
 							<text>店铺实况</text>
 							<text style="font-size: 24rpx;color: #999999;">（请上传门头、店内、收银台照片)</text>
-							<view class="grid col-5 grid-square flex-sub margin-top-50">
-								<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage(index)">
-								 <image :src="imgList[index]" mode="aspectFill"></image>
-									<view class="cu-tag bg-red" @tap.stop="delImg(index)" >
-										<text class='cuIcon-close'></text>
-									</view>
-								</view>
-								<view style="border: 4rpx dashed #e1e1e1;position: relative;" @tap="uploadShopPics" v-if="imgList.length<5">
-									<image style="width: 50rpx;height: 50rpx;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;" src="@/static/icon/camera.png" mode=""></image>
-								</view>
-							</view>
+							<mp-upload-img @click='uploadShopPics' :count="5"></mp-upload-img>
 						</view>
 					</view>
 				</block>
 				<block v-else>
 					<view class="border">
 						<u-form-item label="公司法人姓名" prop="legalPersonName" label-position="top">
-							<u-input :border="false" placeholder="请输入公司法人姓名(非必填项)" v-model="form.legalPersonName"></u-input>
+							<u-input :border="false" placeholder="请输入公司法人姓名(非必填项)" v-model="form.legalPersonName">
+							</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>
@@ -144,7 +126,8 @@
 					</view>
 					<view class="border">
 						<u-form-item label="身份证号码" prop="personIdCard">
-							<u-input :disabled="isEdit" :border="false" placeholder="请输入身份证号码" v-model="form.personIdCard"></u-input>
+							<u-input :disabled="isEdit" :border="false" placeholder="请输入身份证号码"
+								v-model="form.personIdCard"></u-input>
 						</u-form-item>
 					</view>
 					<view class="tips">
@@ -153,31 +136,15 @@
 					<view class="photo border">
 						<text>请拿出本人有效二代身份证件准备拍摄</text>
 						<view class="box">
-							<view style="position: relative;" class="uploadImg" @click="chooseImage('idCardFront')">
-								<view v-if="$isEmpty(form.idCardFront)">
-									<image style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"
-										src="/static/icon/add1.png"></image>
-									<text>上传人像面照片</text>
-								</view>
-								<image class="img" v-else :src="form.idCardFront"></image>
-								<image v-if="$isEmpty(form.idCardFront)" style="height: 160rpx;width: 90%;position: absolute;z-index: 1;"
-									src="../../static/icon/idcard1.png"></image>
-							</view>
+							<upload-img title="上传人像面照片" @click="chooseImage" :model="form.idCardFront"
+								dataName="idCardFront" :enableImg="true"></upload-img>
 						</view>
 						<view class="tips">
 							<text>*认证通过后，身份证人像面将不可修改</text>
 						</view>
 						<view class="box" style="margin-top: 0;">
-							<view style="position: relative;" class="uploadImg" @click="chooseImage('idCardContrary')">
-								<view v-if="$isEmpty(form.idCardContrary)">
-									<image style="width: 60rpx;height: 60rpx;margin-bottom: 20rpx;"
-										src="/static/icon/add1.png"></image>
-									<text>上传国徽面照片</text>
-								</view>
-								<image class="img" v-else :src="form.idCardContrary"></image>
-								<image v-if="$isEmpty(form.idCardContrary)" style="height: 160rpx;width: 90%;position: absolute"
-									src="../../static/icon/idcard2.png"></image>
-							</view>
+							<upload-img title="上传国徽面照片" @click="chooseImage" :model="form.idCardContrary"
+								dataName="idCardContrary" :enableImg="true" :bgImg="idCardContraryBgImg"></upload-img>
 						</view>
 						<view class="tips">
 							<text>*认证通过后，身份证国徽面将不可修改</text>
@@ -195,7 +162,7 @@
 				</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 " >
+				<view v-if="!isEdit" class=" margin-bottom-20 text-sm center ">
 					<text style="color: #949494;">确认注册即代表已阅读并同意</text>
 					<text style="color: #104DFF;" @click="protocol">《联兑通软件服务协议》</text>
 				</view>
@@ -243,22 +210,26 @@
 </template>
 
 <script>
+	import mpUploadImg from "@/components/mp-uploadImg/mp-uploadImg.vue"
 	import uploadImg from "@/components/uploadimg/uploadImg.vue"
 	export default {
 		components: {
-			uploadImg
+			uploadImg,mpUploadImg
 		},
 		data() {
 			return {
-				imgList:[],
-				
+				//身份证正面背景图
+				idCardContraryBgImg: 'https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/525724b4977d457eafea331f8595a675-6MM5CLdbBt1z7042ac12465719c764f2ca05a37ffee9.png',
+				//上传图片
+				imgList: [],
+
 				title: '',
 				background: {
 					backgroundColor: '#D18C42',
 				},
 				labelWidth: 170,
 				form: {
-					id:'',
+					id: '',
 					mallId: '',
 					mallAreaId: '',
 					name: '',
@@ -274,7 +245,7 @@
 					businessLicense: '',
 					shopPic: '',
 					slogan: '',
-					email:'',
+					email: '',
 
 					province: '',
 					city: '',
@@ -285,7 +256,7 @@
 
 					auditStatus: 0,
 					labelIds: '',
-					labelNames:'',
+					labelNames: '',
 					cover: '',
 				},
 				regionShow: false,
@@ -305,7 +276,7 @@
 				checkboxList: [],
 				step: 1,
 				//编辑还是修改
-				isEdit:false
+				isEdit: false
 			}
 		},
 		watch: {
@@ -325,9 +296,9 @@
 					this.getShopLabelAll()
 				}
 			},
-			imgList(){
+			imgList() {
 				if (!this.$isEmpty(this.imgList)) {
-					this.form.shopPic=this.imgList.join(",")
+					this.form.shopPic = this.imgList.join(",")
 				}
 			}
 		},
@@ -339,35 +310,27 @@
 				return
 			}
 			this.form.personTel = options.phone
-			
+
 			if (options.edit) {
-				this.isEdit=true
+				this.isEdit = true
 				this.fetchShopDetail()
-			}else{
+			} else {
 				this.getShopLabelAll()
 			}
 			this.fetchMallList()
 		},
 		methods: {
-			async uploadShopPics(){
-				let res=await this.$mpi.chooseImage()
-				this.$api.uploadFile(res[0]).then(res=>{
-					this.imgList.push(res.data.link)
-				})
-			},
-			delImg(index){
-				this.$dialog.showModal('确定删除？').then(res=>{
-					this.imgList.splice(index, 1)
-				})
+			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.$util.objectCoppy(this.form, res.data)
+				this.mallLabel = res.data.mallName
+				this.imgList = this.form.shopPic.split(",")
 				this.getShopLabelByMallId()
 			},
 			prevStep() {
@@ -376,7 +339,7 @@
 				}
 			},
 			nextStep() {
-				if (this.step==1) {
+				if (this.step == 1) {
 					if (this.$isEmpty(this.form.name)) {
 						this.$u.toast('请输入店铺名')
 						return
@@ -386,8 +349,10 @@
 						return
 					}
 					if (!this.$isEmpty(this.checkboxList)) {
-						this.form.labelIds = this.checkboxList.filter(item => item.checked == true).map(item => item.id).join(",")
-						this.form.labelNames=this.checkboxList.filter(item=>item.checked == true).map(item => item.name).join(",")
+						this.form.labelIds = this.checkboxList.filter(item => item.checked == true).map(item => item.id)
+							.join(",")
+						this.form.labelNames = this.checkboxList.filter(item => item.checked == true).map(item => item
+							.name).join(",")
 					}
 					if (this.$isEmpty(this.form.labelIds)) {
 						this.$u.toast('请选择公司种类')
@@ -398,8 +363,8 @@
 						return
 					}
 				}
-				
-				if (this.step==2) {
+
+				if (this.step == 2) {
 					if (this.$isEmpty(this.form.businessLicense)) {
 						this.$u.toast('请上传营业执照')
 						return
@@ -415,8 +380,8 @@
 					success(res) {
 						console.log(res);
 						_this.form.address = res.address
-						_this.form.longitude=res.longitude
-						_this.form.latitude=res.latitude
+						_this.form.longitude = res.longitude
+						_this.form.latitude = res.latitude
 					}
 				})
 			},
@@ -438,12 +403,9 @@
 				} else if (t == 'mallLabel') {
 					this.mallLabel = ''
 				}
-			},
-			fetchData() {
-
 			},
 			async chooseImage(name) {
-				if (this.isEdit && (name=='businessLicense' || name=='idCardFront'|| name=='idCardContrary')) {
+				if (this.isEdit && (name == 'businessLicense' || name == 'idCardFront' || name == 'idCardContrary')) {
 					this.$u.toast('不可修改')
 					return
 				}
@@ -489,15 +451,15 @@
 			},
 			//获取多选的标签
 			async getShopLabelByMallId() {
-				let res=await this.$api.mall.getShopLabelByMallId(this.form.mallId)
+				let res = await this.$api.mall.getShopLabelByMallId(this.form.mallId)
 				res.data.forEach(item => {
 					if (this.$isEmpty(this.form.id)) {
 						item.checked = false
-					}else{
-						if (this.form.labelIds.indexOf(item.id)!=-1) {
-							item.checked=true
-						}else{
-							item.checked=false
+					} else {
+						if (this.form.labelIds.indexOf(item.id) != -1) {
+							item.checked = true
+						} else {
+							item.checked = false
 						}
 					}
 				})
@@ -521,16 +483,16 @@
 					this.$u.toast('请上传身份证反面照')
 					return
 				}
-				
-				
-				let content='提交成功，请耐心等待商场管理员审核'
-				let url='/pages/login/account-login'
+
+
+				let content = '提交成功，请耐心等待商场管理员审核'
+				let url = '/pages/login/account-login'
 				if (this.isEdit) {
-					content='修改成功'
-					url='/pages/index/index'
-				}else{
+					content = '修改成功'
+					url = '/pages/index/index'
+				} else {
 					if (this.$isEmpty(this.form.mallId)) {
-						content='提交成功，请耐心等待平台审核'
+						content = '提交成功，请耐心等待平台审核'
 					}
 				}
 				this.$api.shop.submit(this.form).then(res => {
@@ -543,7 +505,7 @@
 					}
 				})
 			},
-			protocol(){
+			protocol() {
 				uni.navigateTo({
 					url: "/pages/webView/webView?url=" + this.$global.shopRegister
 				})
@@ -553,39 +515,6 @@
 </script>
 
 <style lang="scss" scoped>
-	.uploadImg {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin: 20rpx;
-
-		view {
-			z-index: 10;
-			border: 4rpx dashed #e1e1e1;
-			width: 480rpx;
-			height: 300rpx;
-			border-radius: 10rpx;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			flex-direction: column;
-		}
-
-		.icon {
-			width: 70rpx;
-			height: 70rpx;
-		}
-
-		.img {
-			width: 480rpx;
-			height: 300rpx;
-		}
-
-		text {
-			color: #999;
-		}
-	}
-
 	.clear {
 		position: absolute;
 		right: 50rpx;