LocalLivingServicesUniapp/pages/store/editStore.vue

<template>
    <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">
            <view class="cu-form-group">
                <view class="title">门店名称</view>
                <input placeholder="请输入门店名称" v-model="form.storeName" name="input"></input>
            </view>
            <view class="cu-form-group">
                <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 style="font-size: 30rpx;">
                        <text v-if="form.locality"> {{ form.locality }}</text>
                        <text v-else style="color: grey">请选择所在地区</text>
                    </view>
                    <u-icon name="arrow-right" style="margin-left: 17rpx;"></u-icon>
                </view>
                <!-- <view>
                    <input disabled="true" @mousedown="$refs.picker.show()" placeholder="请选择所在地区" ref="inputRef"
                        name="input" v-model="form.locality"></input> 
                <text class='cuIcon-right' style="color: #C7C6CA ;" @click="$refs.picker.show()"></text> 
                <w-picker :visible.sync="visible" ref="picker" mode="region" :value="form.locality"
                    @confirm="onConfirm($event, 'region')"></w-picker>
                </view> -->

            </view>
            <view class="cu-form-group">
                <view class="title">门店地址</view>
                <input placeholder="请输入门店详细地址" v-model="form.address" name="input"></input>
            </view>
            <view class="customize">
                <view class="title">地理位置</view>
                <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> -->
                <view class="business-prompt">
                    若位置有误直接影响客户到店，请在地图中仔细核对，可拖拽地图确保位置正确
                </view>
            </view>
            <view class="cu-form-group">
                <view class="title">店铺面积</view>
                <input placeholder="请输入店铺面积" v-model="form.storeExtent" name="input"></input>
            </view>
            <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 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="headPhotoImg.length <= 4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
                <view class="business-prompt">
                    门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传5张，支持格式bmp、png、jpeg、jpg，单个图片不超过5MB，建议尺寸在2000*1500px以上
                </view>
            </view>
        </view>
        <view class="padding flex flex-direction sub-bottom">
            <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>
    </view>
</template>
<script>
import regionPicker from "../../components/w-picker/region-picker.vue"
import { USER_INFO } from "@/common/util/constants"
import configService from '../../common/service/config.service'

export default {
    components: {
        regionPicker,
        // aMap
    },
    data() {
        return {
            imgList: [],
            form: {},
            visible: false,
            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.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);
        }

    },
    methods: {
        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
                    })
                }
                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: 5-Number(this.headPhotoImg.length) , 
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: (res) => {
                    if (res) {
                        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]
        },
        DelImg(e) {
            uni.showModal({
                title: '提示',
                content: '确定要删除？',
                cancelText: '取消',
                confirmText: '确定',
                success: res => {
                    if (res.confirm) {
                        this.headPhotoImg.splice(e.currentTarget.dataset.index, 1)
                        this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)
                    }
                }
            })
        },
        ViewImage(e) {
            uni.previewImage({
                urls: this.headPhotoImg,
                current: e.currentTarget.dataset.url
            });
        },
        handleMarkerTap() {
            const queryString = this.form.longitude && this.form.latitude ?
                {
                    longitude: this.form.longitude,
                    latitude: this.form.latitude,
                }
                : uni.getStorageSync('address') ?
                    encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) : {}

            // const queryString = uni.getStorageSync('address') ? encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) : ''
            uni.navigateTo({
                url: `/pages/login/map?position=${queryString}`
            })

        },
    }
}
</script>
<style scoped lang="scss">
.creat {
    background: #F7F8FC;
    // flex-direction: column;
    // position: fixed;
}

.borderRadiu {
    margin: 22upx 26upx;
    padding-bottom: 120upx;
    background-color: #ffffff;
}

.sub-bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #FFFFFF;
    border-top: 1px solid #EEEEEE;
}

.customize {
    background-color: #fff;
    // border-top: 0.5px solid #eee;
    margin: 16upx 18upx;

    .title {
        font-size: 30upx;
        // padding: 10px;
    }

    .business-img {
        height: 218upx;
        width: 360upx;
        padding: 16upx;
        // padding-bottom: 16upx;
        background: url('/static/login/yingye2.png');
        margin: 16upx auto;
        background-size: cover;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .business-prompt {
        padding-top: 16upx;
        font-size: 20upx;
        color: #999999;
    }
}

.booder-top {
    border-bottom: 1px solid rgb(238, 238, 238);
    padding-top: 7px;
}
.picker-style {
    .w-picker-cnt .visible {
        position: absolute;
        z-index: 100000;
    }
}
</style>