388 lines
9.4 KiB
Vue
388 lines
9.4 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="Msg">
|
|
<view class="row">
|
|
<view class="row_label">门店名称</view>
|
|
<view class="row_con">
|
|
<input type="text" v-model="store_name" placeholder="需与门牌照名称一致">
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">所在省</view>
|
|
<view class="row_con" @click="chooseCity">
|
|
<input type="text" disabled v-model="confirmProv.ad_name" placeholder="请选择所在省">
|
|
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">所在市</view>
|
|
<view class="row_con" @click="chooseCity2">
|
|
<input type="text" disabled v-model="confirmCity.short_name" placeholder="请选择所在市">
|
|
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">所在区</view>
|
|
<view class="row_con" @click="chooseCity3">
|
|
<input type="text" disabled v-model="confirmBusiness.short_name" placeholder="请选择所在区">
|
|
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">详细地址</view>
|
|
<view class="row_con">
|
|
<input type="text" v-model="address" placeholder="请输入详细地址">
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">联系人</view>
|
|
<view class="row_con">
|
|
<input type="text" v-model="contact_name" placeholder="请输入联系人">
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">手机号</view>
|
|
<view class="row_con">
|
|
<input type="text" v-model="contact_phone" placeholder="请输入联系方式">
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">商家分类</view>
|
|
<view class="row_con" @click="chooseClassify">
|
|
<input type="text" disabled v-model="confirmClassify.cate_name" placeholder="请选择商家分类">
|
|
<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="row_label">银行卡号</view>
|
|
<view class="row_con nonebor">
|
|
<input type="text" v-model="bank_card" placeholder="请输入银行卡号">
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="Msg mt">
|
|
<view class="row2">
|
|
<view class="row_label">门脸照</view>
|
|
<view class="row_con2">
|
|
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
|
|
:maxCount="10">
|
|
<view class="imgCon">
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
|
mode="widthFix"></image>
|
|
上传图片
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row2 mt2">
|
|
<view class="row_label">店内环境</view>
|
|
<view class="row_con2">
|
|
<u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple
|
|
:maxCount="10">
|
|
<view class="imgCon">
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
|
mode="widthFix"></image>
|
|
上传图片
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row2 mt2">
|
|
<view class="row_label">营业执照</view>
|
|
<view class="row_con2">
|
|
<u-upload :fileList="imgList5" @afterRead="afterReadImg3" @delete="deletePic3" name="1" multiple
|
|
:maxCount="1">
|
|
<view class="imgCon">
|
|
<image
|
|
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png"
|
|
mode="widthFix"></image>
|
|
上传图片
|
|
</view>
|
|
</u-upload>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="addBtn" @click="submit">立即入驻</view>
|
|
|
|
<u-picker :show="show" :columns="[pro]" keyName="ad_name" @confirm="clickPro" @cancel="cancelPro"></u-picker>
|
|
<u-picker :show="show2" :columns="[city]" keyName="short_name" @confirm="clickCity"
|
|
@cancel="cancelCity"></u-picker>
|
|
<u-picker :show="show3" :columns="[buss]" keyName="short_name" @confirm="clickBuss"
|
|
@cancel="cancelBuss"></u-picker>
|
|
<u-picker :show="show4" :columns="[classify]" keyName="cate_name" @confirm="clickClassify"
|
|
@cancel="cancelClassify"></u-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
apiArr
|
|
} from '../../../api/v2local';
|
|
|
|
import { apiArr as MapApi } from '../../../api/area';
|
|
import {
|
|
isPhone,
|
|
picUrl,
|
|
request,
|
|
upload,
|
|
NavgateTo
|
|
} from '../../../utils';
|
|
export default {
|
|
data() {
|
|
return {
|
|
picUrl,
|
|
area: "",
|
|
confirmCity: "",
|
|
confirmArea: "",
|
|
confirmBusiness: "",
|
|
imgList: [],
|
|
imgList2: [],
|
|
|
|
imgList3: [],
|
|
imgList4: [],
|
|
imgList5: [],
|
|
imgList6: [],
|
|
|
|
contact_name: "",
|
|
contact_phone: "",
|
|
bank_card: "",
|
|
store_name: "",
|
|
address: "",
|
|
|
|
confirmProv: "",
|
|
confirmCity: "",
|
|
confirmBusiness: "",
|
|
confirmClassify: "",
|
|
pro: [],
|
|
show: false,
|
|
city: [],
|
|
show2: false,
|
|
buss: [],
|
|
show3: false,
|
|
classify: [],
|
|
show4: false,
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
|
|
cancelBuss() {
|
|
this.show3 = false;
|
|
},
|
|
clickBuss(e) {
|
|
console.log(e);
|
|
this.show3 = false;
|
|
this.confirmBusiness = e.value[0]
|
|
},
|
|
|
|
cancelCity() {
|
|
this.show2 = false;
|
|
},
|
|
clickCity(e) {
|
|
this.show2 = false;
|
|
this.getBuss(e.value[0].ad_code)
|
|
this.confirmCity = e.value[0]
|
|
},
|
|
|
|
cancelPro() {
|
|
this.show = false;
|
|
},
|
|
clickPro(e) {
|
|
console.log(e);
|
|
this.show = false;
|
|
this.getCity(e.value[0].ad_code)
|
|
this.confirmProv = e.value[0]
|
|
},
|
|
cancelClassify() {
|
|
this.show4 = false;
|
|
},
|
|
clickClassify(e) {
|
|
this.show4 = false;
|
|
this.confirmClassify = e.value[0]
|
|
console.log("🚀 ~ this.confirmClassify:", this.confirmClassify)
|
|
},
|
|
chooseCity() {
|
|
this.show = true;
|
|
},
|
|
chooseCity2() {
|
|
this.show2 = true;
|
|
},
|
|
chooseCity3() {
|
|
this.show3 = true;
|
|
},
|
|
chooseClassify() {
|
|
this.show4 = true;
|
|
},
|
|
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(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(res.data.path)
|
|
})
|
|
})
|
|
},
|
|
afterReadImg3(e) {
|
|
e.file.forEach(item => {
|
|
upload(item.url, res => {
|
|
this.imgList5.push({ url: this.picUrl + res.data.path })
|
|
this.imgList6.push(res.data.path)
|
|
})
|
|
})
|
|
},
|
|
deletePic2(e) {
|
|
this.imgList3.splice(e.index, 1);
|
|
this.imgList4.splice(e.index, 1);
|
|
},
|
|
deletePic3(e) {
|
|
this.imgList5.splice(e.index, 1);
|
|
this.imgList6.splice(e.index, 1);
|
|
},
|
|
submit() {
|
|
let that = this
|
|
if (!that.contact_name) {
|
|
return uni.showToast({
|
|
title: '请输入联系人姓名',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.contact_phone) {
|
|
return uni.showToast({
|
|
title: '请输入联系人手机号',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.store_name) {
|
|
return uni.showToast({
|
|
title: '请输入门店名称',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.address) {
|
|
return uni.showToast({
|
|
title: '请输入address',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.confirmProv.ad_code) {
|
|
return uni.showToast({
|
|
title: '请选择所在省',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.confirmCity.ad_code) {
|
|
return uni.showToast({
|
|
title: '请选择所在市',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.confirmBusiness.ad_code) {
|
|
return uni.showToast({
|
|
title: '请选择所在区',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.confirmClassify.id) {
|
|
return uni.showToast({
|
|
title: '请选择商家分类',
|
|
duration: 2000
|
|
});
|
|
}
|
|
if (!that.imgList6.length) {
|
|
return uni.showToast({
|
|
title: '请上传营业执照',
|
|
duration: 2000
|
|
});
|
|
}
|
|
|
|
let interior_photo = that.imgList4.join(",")
|
|
let facade_photo = that.imgList2.join(",")
|
|
let license_photo = that.imgList6.join(",")
|
|
request(apiArr.createStore, "POST", {
|
|
contact_name: that.contact_name,
|
|
contact_phone: that.contact_phone,
|
|
bank_card: that.bank_card,
|
|
store_name: that.store_name,
|
|
address: that.address,
|
|
ad_code: that.confirmBusiness.ad_code,
|
|
facade_photo,
|
|
interior_photo,
|
|
license_photo,
|
|
merchant_cate_id: that.confirmClassify.id,
|
|
}).then(res => {
|
|
that.contact_name = ''
|
|
that.contact_phone = ''
|
|
that.bank_card = ''
|
|
that.store_name = ''
|
|
that.address = ''
|
|
that.confirmProv = ''
|
|
that.confirmCity = ''
|
|
that.confirmBusiness = ''
|
|
that.imgList = []
|
|
that.imgList2 = []
|
|
that.imgList3 = []
|
|
that.imgList4 = []
|
|
that.imgList5 = []
|
|
that.imgList6 = []
|
|
that.confirmClassify = ''
|
|
NavgateTo("../sucess/index")
|
|
})
|
|
},
|
|
|
|
// 省市区
|
|
getPro() {
|
|
request(MapApi.getArea, "POST", {}).then(res => {
|
|
console.log(res);
|
|
this.pro = res.rows
|
|
})
|
|
},
|
|
getCity(e) {
|
|
request(MapApi.getArea, "POST", {
|
|
parent_ad_code: e
|
|
}).then(res => {
|
|
this.city = res.rows
|
|
})
|
|
},
|
|
getBuss(e) {
|
|
request(MapApi.getArea, "POST", {
|
|
parent_ad_code: e
|
|
}).then(res => {
|
|
this.buss = res.rows
|
|
})
|
|
},
|
|
getClassify(e) {
|
|
request(apiArr.getMerChantCateList, "POST", {}).then(res => {
|
|
this.classify = res.rows
|
|
})
|
|
},
|
|
|
|
},
|
|
onLoad() {
|
|
this.getPro()
|
|
this.getClassify()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |