|
|
@@ -1,9 +1,10 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <cu-custom bgColor="bg-fff" :isBack="true">
|
|
|
+ <view class="creat">
|
|
|
+ <cu-custom bgColor="bg-fff" :isBack="true" style="position: relative;
|
|
|
+ z-index: 999999999999999999">
|
|
|
<block slot="content">编辑门店</block>
|
|
|
</cu-custom>
|
|
|
- <view class="borderRadiu" style="margin: 22upx 26upx;padding-bottom: 120upx">
|
|
|
+ <view class="borderRadiu">
|
|
|
<view class="cu-form-group">
|
|
|
<view class="title">门店名称</view>
|
|
|
<input placeholder="请输入门店名称" v-model="form.storeName" name="input"></input>
|
|
|
@@ -12,9 +13,9 @@
|
|
|
<view class="title">所在地区</view>
|
|
|
<view style="display: flex;width: 77%;justify-content: space-between;" @click="$refs.picker.show()">
|
|
|
<!-- <u-input readonly placeholder="去设置" v-model="form.locality" @click="$refs.picker.show()" /> -->
|
|
|
- <view >
|
|
|
+ <view style="font-size: 30rpx;">
|
|
|
<text v-if="form.locality"> {{ form.locality }}</text>
|
|
|
- <text v-else>去设置</text>
|
|
|
+ <text v-else style="color: grey">请选择所在地区</text>
|
|
|
</view>
|
|
|
<u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
|
|
|
</view>
|
|
|
@@ -33,9 +34,10 @@
|
|
|
</view>
|
|
|
<view class="customize">
|
|
|
<view class="title">地理位置</view>
|
|
|
- <view class=" booder-top" style="padding-bottom: 16upx;">
|
|
|
- <map style="width: 100%; height: 218upx;" :latitude="form.latitude" scale="14"
|
|
|
- :longitude="form.longitude" :markers="markers" @tap="handleMarkerTap"></map>
|
|
|
+ <view class=" booder-top" style="padding-bottom: 16upx;" :style="{ 'display': mapIsHidden }">
|
|
|
+ <map style="width: 100%; height: 218upx; position: relative;
|
|
|
+ z-index: 1;" :latitude="form.latitude" scale="14"
|
|
|
+ :longitude="form.longitude" :markers="markers" @tap="handleMarkerTap"></map>
|
|
|
</view>
|
|
|
|
|
|
<!-- <aMap class=" booder-top" style="padding-bottom: 7px;"></aMap> -->
|
|
|
@@ -50,19 +52,19 @@
|
|
|
<view class="customize">
|
|
|
<view class="title">门头照片</view>
|
|
|
<view class="grid col-3 grid-square flex-sub booder-top">
|
|
|
- <view class="bg-img" v-for="(item, index) in form.headPhoto" :key="index" @tap="ViewImage"
|
|
|
- :data-url="form.headPhoto[index]">
|
|
|
- <image :src="form.headPhoto[index]" mode="aspectFill"></image>
|
|
|
+ <view class="bg-img" v-for="(item, index) in headPhotoImg" :key="index" @tap="ViewImage"
|
|
|
+ :data-url="headPhotoImg[index]">
|
|
|
+ <image :src="headPhotoImg[index]" mode="aspectFill"></image>
|
|
|
<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
|
|
|
<text class='cuIcon-close'></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="solids" @tap="ChooseImage" v-if="form.headPhoto.length < 4">
|
|
|
+ <view class="solids" @tap="ChooseImage" v-if="headPhotoImg.length <= 4">
|
|
|
<text class='cuIcon-cameraadd'></text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="business-prompt">
|
|
|
- 门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传10张，支持格式bmp、png、jpeg、jpg，单个图片不超过5MB，建议尺寸在2000*1500px以上
|
|
|
+ 门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传5张，支持格式bmp、png、jpeg、jpg，单个图片不超过5MB，建议尺寸在2000*1500px以上
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -70,7 +72,7 @@
|
|
|
<button class="cu-btn bg-blue round " @click="submit">提交审核</button>
|
|
|
</view>
|
|
|
<w-picker :visible.sync="visible" ref="picker" mode="region" :value="form.locality"
|
|
|
- @confirm="onConfirm($event, 'region')"></w-picker>
|
|
|
+ @confirm="onConfirm($event, 'region')"></w-picker>
|
|
|
</view>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -88,26 +90,37 @@ export default {
|
|
|
imgList: [],
|
|
|
form: {},
|
|
|
visible: false,
|
|
|
- markers: []
|
|
|
+ markers: [],
|
|
|
+ headPhotoImg: [],
|
|
|
+ imageList: [],
|
|
|
+ mapIsHidden: false,
|
|
|
|
|
|
}
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ visible(val) {
|
|
|
+ if (!val) {
|
|
|
+ this.mapIsHidden = 'block'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
async onShow() {
|
|
|
this.merchantId = uni.getStorageSync(USER_INFO).merchantId;
|
|
|
let res = await this.$http.get("/merchant/localMerchantInfo/queryAppInfoById?id=" + this.merchantId)
|
|
|
if (res.data.success) {
|
|
|
- this.markers = res.data.result.longitude && res.data.result.latitude?
|
|
|
- [
|
|
|
- {
|
|
|
- longitude: res.data.result.longitude,
|
|
|
- latitude: res.data.result.latitude,
|
|
|
- iconPath: '../../static/boiaoji.png'
|
|
|
- }
|
|
|
- ]
|
|
|
- : uni.getStorageSync('address')?
|
|
|
- [Object.assign(uni.getStorageSync('address'), { iconPath: '../../static/boiaoji.png' })]:[]
|
|
|
- res.data.result.headPhoto= res.data.result.headPhoto? res.data.result.headPhoto.split(',').filter(id => id !== ''):[]
|
|
|
-
|
|
|
+ this.markers = res.data.result.longitude && res.data.result.latitude ?
|
|
|
+ [
|
|
|
+ {
|
|
|
+ longitude: res.data.result.longitude,
|
|
|
+ latitude: res.data.result.latitude,
|
|
|
+ iconPath: '../../static/boiaoji.png'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ : uni.getStorageSync('address') ?
|
|
|
+ [Object.assign(uni.getStorageSync('address'), { iconPath: '../../static/boiaoji.png' })] : []
|
|
|
+ res.data.result.headPhoto = res.data.result.headPhoto ? res.data.result.headPhoto.split(',').filter(id => id !== '') : []
|
|
|
+ this.headPhotoImg = res.data.result.headPhoto ? res.data.result.headPhoto : []
|
|
|
+ res.data.result.locality=res.data.result.locality?res.data.result.locality:''
|
|
|
this.form = res.data.result
|
|
|
} else {
|
|
|
this.$tip.toast(res.data.message);
|
|
|
@@ -115,50 +128,72 @@ export default {
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
- submit(){
|
|
|
- this.$http.post('/merchant/localMerchantInfo/edit', {...this.form, headPhoto: this.form.headPhoto.join(',') }).then(res => {
|
|
|
+ submit() {
|
|
|
+ this.$http.post('/merchant/localMerchantInfo/edit', { ...this.form, headPhoto: this.form.headPhoto.join(',') }).then(res => {
|
|
|
if (res.data.success) {
|
|
|
this.$tip.success(res.data.result || '成功')
|
|
|
uni.navigateBack({
|
|
|
- delta: 1 // 返回的页面数，默认为1
|
|
|
- })
|
|
|
+ delta: 1 // 返回的页面数，默认为1
|
|
|
+ })
|
|
|
}
|
|
|
else {
|
|
|
this.$tip.error(res.data.message);
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
+ uploadAll() {
|
|
|
+ if (this.imageList.length === 0) {
|
|
|
+ uni.showToast({ title: '请先选择图片', icon: 'none' });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ uni.showLoading({ title: '上传中...', mask: true });
|
|
|
+
|
|
|
+ const uploadPromises = this.imageList.map((path, index) => {
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ uni.uploadFile({
|
|
|
+ url: configService.apiUrl + '/sys/common/upload',// 替换为实际接口
|
|
|
+ filePath: path,
|
|
|
+ formData: {
|
|
|
+ 'biz': 'temp',
|
|
|
+ },
|
|
|
+ name: 'file',
|
|
|
+ success: (files) => {
|
|
|
+ resolve(configService.apiUrl + '/' + JSON.parse(files.data).message)
|
|
|
+ },
|
|
|
+ fail: reject
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+ Promise.all(uploadPromises)
|
|
|
+ .then(results => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.imageList = []; // 清空已上传列表
|
|
|
+ this.headPhotoImg = this.headPhotoImg.concat(results)
|
|
|
+ this.form.headPhoto = this.form.headPhoto.concat(results)
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
ChooseImage() {
|
|
|
uni.chooseImage({
|
|
|
- // count: 4, //默认9
|
|
|
+ count: 5-Number(this.headPhotoImg.length) ,
|
|
|
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
|
sourceType: ['album'], //从相册选择
|
|
|
success: (res) => {
|
|
|
if (res) {
|
|
|
- uni.uploadFile({
|
|
|
- url: configService.apiUrl + '/sys/common/upload',
|
|
|
- filePath: res.tempFilePaths[0],
|
|
|
- name: "file",
|
|
|
- formData: {
|
|
|
- 'biz': 'temp',
|
|
|
- },
|
|
|
- success: (files) => {
|
|
|
- let data = JSON.parse(files.data);
|
|
|
- if (data.success) {
|
|
|
- if (this.form.headPhoto.length != 0) {
|
|
|
- this.form.headPhoto.push(configService.apiUrl + '/' + data.message)
|
|
|
- } else {
|
|
|
- this.form.headPhoto = [configService.apiUrl + '/' + data.message]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ this.imageList = [...this.imageList, ...res.tempFilePaths];
|
|
|
+ this.uploadAll()
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
onConfirm(e) {
|
|
|
+
|
|
|
+ this.mapIsHidden = false
|
|
|
this.form.locality = e.result
|
|
|
this.form.country = e.value[e.value.length - 1]
|
|
|
},
|
|
|
@@ -170,27 +205,26 @@ export default {
|
|
|
confirmText: '确定',
|
|
|
success: res => {
|
|
|
if (res.confirm) {
|
|
|
+ this.headPhotoImg.splice(e.currentTarget.dataset.index, 1)
|
|
|
this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)
|
|
|
- this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
ViewImage(e) {
|
|
|
uni.previewImage({
|
|
|
- urls: this.form.headPhoto,
|
|
|
+ urls: this.headPhotoImg,
|
|
|
current: e.currentTarget.dataset.url
|
|
|
});
|
|
|
},
|
|
|
handleMarkerTap() {
|
|
|
- const queryString = this.form.longitude && this.form.latitude?
|
|
|
+ const queryString = this.form.longitude && this.form.latitude ?
|
|
|
{
|
|
|
- longitude: this.form.longitude,
|
|
|
- latitude: this.form.latitude,
|
|
|
+ longitude: this.form.longitude,
|
|
|
+ latitude: this.form.latitude,
|
|
|
}
|
|
|
- : uni.getStorageSync('address')?
|
|
|
- encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) :{}
|
|
|
+ : uni.getStorageSync('address') ?
|
|
|
+ encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) : {}
|
|
|
|
|
|
// const queryString = uni.getStorageSync('address') ? encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) : ''
|
|
|
uni.navigateTo({
|
|
|
@@ -202,15 +236,16 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
-page {
|
|
|
- background: #F8F8FA;
|
|
|
+.creat {
|
|
|
+ background: #F7F8FC;
|
|
|
+ // flex-direction: column;
|
|
|
+ // position: fixed;
|
|
|
}
|
|
|
|
|
|
.borderRadiu {
|
|
|
- border-radius: 8px;
|
|
|
- padding-bottom: 10px;
|
|
|
+ margin: 22upx 26upx;
|
|
|
+ padding-bottom: 120upx;
|
|
|
background-color: #ffffff;
|
|
|
- // border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
|
|
|
.sub-bottom {
|
|
|
@@ -257,4 +292,10 @@ page {
|
|
|
border-bottom: 1px solid rgb(238, 238, 238);
|
|
|
padding-top: 7px;
|
|
|
}
|
|
|
+.picker-style {
|
|
|
+ .w-picker-cnt .visible {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100000;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
lihongxiao