diff --git a/src/project/tianfuxing/AppHome/AddMerchants.vue b/src/project/tianfuxing/AppHome/AddMerchants.vue index 9d58f42..7daf55d 100644 --- a/src/project/tianfuxing/AppHome/AddMerchants.vue +++ b/src/project/tianfuxing/AppHome/AddMerchants.vue @@ -20,12 +20,12 @@

门店照片

-
+
添加照片
-
- +
+
@@ -48,7 +48,8 @@ lat: '', lng: '', merchantName: '', - photoUrl: '', + logoFiles: [], + hideStatus: false, isAdd: false } }, @@ -70,7 +71,7 @@ this.lat = this.user.merchantInfo.lat this.lng = this.user.merchantInfo.lng this.merchantName = this.user.merchantInfo.merchantName - this.photoUrl = this.user.merchantInfo.photoUrl + this.logoFiles = this.user.merchantInfo.logoFiles || [] } }) } @@ -96,47 +97,73 @@ }) }, - upLoad () { - if (this.isAdd) { - return false + upLoad1 () { + console.log(232) + this.hideStatus = false + if (this.logoFiles.length > 9) { + return this.$toast(`图片不能超过9张`) } - uni.chooseImage({ - count: 1, + count: (9 - this.logoFiles.length) > 0 ? 9 - this.logoFiles.length : 0, sizeType: ['compressed'], sourceType: ['album', 'camera'], success: (res) => { + if (res.tempFilePaths.length > 9) { + this.$toast(`图片不能超过9张`) + + return false + } + this.$loading('上传中') - - uni.uploadFile({ - url: this.$instance.defaults.baseURL + (process.env.NODE_ENV == 'production' ? '/api' : '') + '/file/add', - filePath: res.tempFilePaths[0], - name: 'file', - header: { - 'Content-Type': 'multipart/form-data', - Authorization: uni.getStorageSync('token'), - }, - success: (res) => { - const data = JSON.parse(res.data) - - if (data.code === 0) { - this.photoUrl = data.data[0].split(';')[0] - } else { - this.$toast(data.msg) - } - }, - complete: () => { - uni.hideLoading() + res.tempFilePaths.forEach((item, index) => { + if (index === res.tempFilePaths.length - 1) { + this.hideStatus = true } + + this.$nextTick(() => { + this.uploadFile(item, res.tempFilePaths.length) + }) }) - }, + } }) }, - prev () { + uploadFile (img) { + uni.uploadFile({ + url: this.$instance.defaults.baseURL + (process.env.NODE_ENV == 'production' ? '/api' : '') + '/file/add', + filePath: img, + name: 'file', + header: { + 'Content-Type': 'multipart/form-data', + Authorization: uni.getStorageSync('token'), + }, + success: (res) => { + const data = JSON.parse(res.data) + + if (data.code === 0 && this.logoFiles.length < 9) { + this.logoFiles.push({ + url: data.data[0].split(';')[0], + id: data.data[0].split(';')[1] + }) + } else { + this.$toast(data.msg) + } + }, + complete: () => { + this.$nextTick(() => { + if (this.hideStatus) { + this.$hideLoading() + this.hideStatus = false + } + }) + } + }) + }, + + prev (url) { wx.previewImage({ - current: this.photoUrl, - urls: [this.photoUrl] + current: url, + urls: this.logoFiles.map(v => v.url) }) }, @@ -149,7 +176,7 @@ return this.$toast('请选择商家地址') } - if (!this.photoUrl) { + if (!this.logoFiles.length) { return this.$toast('请上传门店照片') } @@ -161,7 +188,7 @@ this.$instance.post('/api/appmerchantinfo/addOrUpdate', { merchantName: this.merchantName, address: this.address, - photoUrl: this.photoUrl, + logoFiles: this.logoFiles, lat: this.lat, lng: this.lng, openId: this.user.openId, @@ -247,21 +274,29 @@ color: #666666; } + .upload-wrapper { + display: flex; + align-items: center; + flex-wrap: wrap; + } + .imgs { position: relative; - width: 216px; - height: 216px; + width: 200px; + height: 200px; + margin: 0 10px 10px 0; border-radius: 8px; image { - width: 216px; - height: 216px; + width: 200px; + height: 200px; border-radius: 8px; } .remove { position: absolute; top: 0%; right: 0%; + z-index: 11; width: 36px; height: 36px; transform: translate(50%, -50%); @@ -273,8 +308,9 @@ align-items: center; flex-direction: column; justify-content: center; - width: 216px; - height: 216px; + width: 200px; + height: 200px; + margin: 0 10px 10px 0; background: #EFF5FA; border-radius: 8px; diff --git a/src/project/tianfuxing/AppHome/AppHome.vue b/src/project/tianfuxing/AppHome/AppHome.vue index 2379382..e196912 100644 --- a/src/project/tianfuxing/AppHome/AppHome.vue +++ b/src/project/tianfuxing/AppHome/AppHome.vue @@ -16,7 +16,7 @@