147 lines
3.4 KiB
Vue
147 lines
3.4 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="Msg">
|
|
<div class="row">
|
|
<div class="row_label">门店名称</div>
|
|
<div class="row_con">
|
|
<input type="text" placeholder="需与门牌照名称一致">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="row_label">所在城市</div>
|
|
<div class="row_con" @click="chooseCity">
|
|
<input type="text" disabled :value="area" placeholder="请选择省市区">
|
|
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="row_label">详细地址</div>
|
|
<div class="row_con">
|
|
<input type="text" placeholder="请输入详细地址">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="row_label">联系人</div>
|
|
<div class="row_con">
|
|
<input type="text" placeholder="请输入联系人">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="row_label">手机号</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;
|
|
},
|
|
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 => {
|
|
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> |