uniapp-ZHSQ/packages/shopEnter/edit/index.vue

<template>
    <div class="container">
        <div class="Msg">
            <div class="row">
                <div class="row_label">
                    <span>*</span>
                    门店名称
                </div>
                <div class="row_con">
                    <input type="text" placeholder="需与门牌照名称一致">
                </div>
            </div>

            <div class="row">
                <div class="row_label">
                    <span>*</span>
                    详细地址
                </div>
                <div class="row_con3">
                    <div class="province" @click="chooseCity">
                        <input type="text" disabled :value="area" placeholder="请选择省市区">
                        <image src="http://192.168.0.172:5500/local_localIcon.png" mode="widthFix"></image>

                    </div>

                    <div class="address">
                        <input type="text" placeholder="请输入详细地址">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="row_label">
                    <span>*</span>
                    手机号码
                </div>
                <div class="row_con nonebor">
                    <input type="text" placeholder="请输入您的联系方式">
                </div>
            </div>
        </div>

        <div class="Msg mt">
            <div class="row2">
                <div class="row_label">门脸照</div>
                <div class="row_con2">
                    <u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
                        :maxCount="10">
                        <div class="imgCon">
                            <image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image>
                            上传图片
                        </div>
                    </u-upload>
                </div>
            </div>

            <div class="row2 mt2">
                <div class="row_label">店内环境</div>
                <div class="row_con2">
                    <u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple
                        :maxCount="10">
                        <div class="imgCon">
                            <image src="http://192.168.0.172:5500/com_imageImg.png" mode="widthFix"></image>
                            上传图片
                        </div>
                    </u-upload>

                </div>
            </div>
        </div>

        <div class="addBtn">提交</div>


        <areaPopup :show="show" @selectArea='headerAreaClick' @close='onClose' />
    </div>
</template>

<script>
import {
    apiArr
} from '../../../api/shopEnter';
import {
    isPhone,
    picUrl,
    request,
    upload
} from '../../../utils';
export default {
    data() {
        return {
            picUrl,
            show: false,
            area: "",
            confirmCity: "",
            confirmArea: "",
            confirmBusiness: "",
            imgList: [],
            imgList2: [],

            imgList3: [],
            imgList4: [],
        }
    },
    methods: {

        chooseCity() {
            this.show = true;
        },

        onClose(){
            this.show = false;
        },

        headerAreaClick(data) {
            console.log('接受参数值', data);
            this.area = `${data.confirmProv.name}${data.confirmCity.area_name}${data.confirmDist.business_name}`;
            this.confirmCity = data.confirmProv;
            this.confirmArea = data.confirmCity;
            this.confirmBusiness = data.confirmDist;
            this.show = false;
        },
        afterReadImg(e) {
            e.file.forEach(item => {
                upload(item.url, res => {
                    console.log(res.data.path);
                    this.imgList.push({ url: this.picUrl + res.data.path })
                    this.imgList2.push({ url: res.data.path })
                })
            })
        },
        deletePic(e) {
            this.imgList.splice(e.index, 1);
            this.imgList2.splice(e.index, 1);
        },

        afterReadImg2(e) {
            e.file.forEach(item => {
                upload(item.url, res => {
                    console.log(res.data.path);
                    this.imgList3.push({ url: this.picUrl + res.data.path })
                    this.imgList4.push({ url: res.data.path })
                })
            })
        },
        deletePic2(e) {
            this.imgList3.splice(e.index, 1);
            this.imgList4.splice(e.index, 1);
        }

    },
    onLoad() {
    }
}
</script>

<style>
@import url("./index.css");
</style>