LocalLivingServicesUniapp/pages/store/editStore.vue

<template>
    <view>
        <cu-custom bgColor="bg-fff" :isBack="true">
            <block slot="content">编辑门店</block>
        </cu-custom>
        <view class="borderRadiu" style="margin: 22upx 26upx;">
            <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>
                <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 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;">
                    <!-- <map style="width: 100%; height: 218upx;" :latitude="latitude" scale="14"
                                :longitude="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 imgList" :key="index" @tap="ViewImage"
                        :data-url="imgList[index]">
                        <image :src="imgList[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="imgList.length < 4">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
                <view class="business-prompt">
                    门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传10张，支持格式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 ">提交审核</button>
        </view>
    </view>
</template>
<script>
import regionPicker from "../../components/w-picker/region-picker.vue"
export default {
    components: {
        regionPicker,
        // aMap
    },
    data() {
        return {
            imgList: [],
            form:{},
            visible: false,

        }
    },
   
     methods:{
        onConfirm(e) {
            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.imgList.splice(e.currentTarget.dataset.index, 1)
                        this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)

                    }
                }
            })
        },
        ViewImage(e) {
            uni.previewImage({
                urls: this.imgList,
                current: e.currentTarget.dataset.url
            });
        },
    }
}
</script>
<style scoped lang="scss">
page {
    background: #F8F8FA;
}
.borderRadiu {
    border-radius: 8px;
    padding-bottom: 10px;
    background-color: #ffffff;
    // border-bottom: 1px solid #eee;
}
.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;
}
</style>