449 lines
12 KiB
Vue
449 lines
12 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="Msg">
|
||
<view class="row">
|
||
<view class="row_label">门店名称<text class="red">*</text></view>
|
||
<view class="row_con">
|
||
<input type="text" v-model="store_name" placeholder="需与门牌照名称一致">
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="row_label">所在省<text class="red">*</text></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">所在市<text class="red">*</text></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">所在区<text class="red">*</text></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">详细地址<text class="red">*</text></view>
|
||
<view class="row_con">
|
||
<input type="text" v-model="address" placeholder="请输入详细地址">
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="row_label">联系人<text class="red">*</text></view>
|
||
<view class="row_con">
|
||
<input type="text" v-model="contact_name" placeholder="请输入联系人">
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="row_label">手机号<text class="red">*</text></view>
|
||
<view class="row_con">
|
||
<input type="text" v-model="contact_phone" placeholder="请输入联系方式">
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="row_label">商家分类<text class="red">*</text></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">营业执照<text class="red">*</text></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,
|
||
|
||
itemObj: {},
|
||
}
|
||
},
|
||
methods: {
|
||
// 根据ad_code解析省市区信息
|
||
parseAdCode(adCode) {
|
||
if (!adCode) return;
|
||
|
||
// 提取省级ad_code（前2位）
|
||
const provinceCode = adCode.toString().substring(0, 2) + '0000';
|
||
// 提取市级ad_code（前4位）
|
||
const cityCode = adCode.toString().substring(0, 4) + '00';
|
||
// 区县级ad_code（完整6位）
|
||
const districtCode = adCode.toString();
|
||
|
||
// 查找省份信息
|
||
const province = this.pro.find(item => item.ad_code == provinceCode);
|
||
if (province) {
|
||
this.confirmProv = province;
|
||
|
||
// 获取对应城市列表并查找城市信息
|
||
this.getCity(provinceCode).then(() => {
|
||
const city = this.city.find(item => item.ad_code == cityCode);
|
||
if (city) {
|
||
this.confirmCity = city;
|
||
|
||
// 获取对应区县列表并查找区县信息
|
||
this.getBuss(cityCode).then(() => {
|
||
const district = this.buss.find(item => item.ad_code == districtCode);
|
||
if (district) {
|
||
this.confirmBusiness = district;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
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) {
|
||
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]
|
||
},
|
||
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 => {
|
||
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.store_name) {
|
||
return uni.showToast({
|
||
title: '请输入门店名称',
|
||
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.address) {
|
||
return uni.showToast({
|
||
title: '请输入详细地址',
|
||
duration: 2000
|
||
});
|
||
}
|
||
if (!that.contact_name) {
|
||
return uni.showToast({
|
||
title: '请输入联系人姓名',
|
||
duration: 2000
|
||
});
|
||
}
|
||
if (!that.contact_phone) {
|
||
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,
|
||
phone: that.contact_phone,
|
||
bank_card: that.bank_card,
|
||
merchant_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")
|
||
}).catch(res => {
|
||
if(res.message.includes("agent_nil")) {
|
||
uni.showToast({
|
||
title: '未找到对应的代理商信息',
|
||
icon: 'none',
|
||
});
|
||
}
|
||
})
|
||
},
|
||
|
||
// 省市区
|
||
getPro() {
|
||
return request(MapApi.getArea, "POST", {}).then(res => {
|
||
this.pro = res.rows
|
||
})
|
||
},
|
||
getCity(e) {
|
||
return request(MapApi.getArea, "POST", {
|
||
parent_ad_code: e
|
||
}).then(res => {
|
||
this.city = res.rows
|
||
})
|
||
},
|
||
getBuss(e) {
|
||
return request(MapApi.getArea, "POST", {
|
||
parent_ad_code: e
|
||
}).then(res => {
|
||
this.buss = res.rows
|
||
})
|
||
},
|
||
getClassify() {
|
||
const params = {
|
||
is_shop: 1,
|
||
}
|
||
return request(apiArr.getMerChantCateList, "POST", params).then(res => {
|
||
this.classify = res.rows
|
||
})
|
||
},
|
||
|
||
},
|
||
onLoad(options) {
|
||
// 先执行数据获取方法
|
||
Promise.all([this.getPro(), this.getClassify()]).then(() => {
|
||
// 数据获取完成后再进行赋值操作
|
||
if (options.itemObj) {
|
||
this.itemObj = JSON.parse(options.itemObj)
|
||
this.store_name = this.itemObj.merchant_name
|
||
this.address = this.itemObj.address
|
||
this.contact_name = this.itemObj.contact_name
|
||
this.contact_phone = this.itemObj.phone
|
||
this.confirmClassify = this.classify.find(item => item.id == this.itemObj.merchant_cate_id)
|
||
this.bank_card = this.itemObj.bank_card
|
||
// 解析ad_code回显省市区
|
||
if (this.itemObj.ad_code) {
|
||
this.parseAdCode(this.itemObj.ad_code);
|
||
}
|
||
this.imgList = this.itemObj.facade_photo ? this.itemObj.facade_photo.split(",").map(item => ({ url: this.picUrl + item })) : []
|
||
this.imgList2 = this.itemObj.facade_photo ? this.itemObj.facade_photo.split(",") : []
|
||
this.imgList3 = this.itemObj.interior_photo ? this.itemObj.interior_photo.split(",").map(item => ({ url: this.picUrl + item })) : []
|
||
this.imgList4 = this.itemObj.interior_photo ? this.itemObj.interior_photo.split(",") : []
|
||
this.imgList5 = this.itemObj.license_photo?.split(",").map(item => ({ url: this.picUrl + item }))
|
||
this.imgList6 = this.itemObj.license_photo?.split(",")
|
||
}
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |