|
...
|
...
|
@@ -30,6 +30,57 @@ |
|
|
|
<Form-item label="营业执照：">
|
|
|
|
<editor :content="shopData.businessLicense" @change="updateLicense"> </editor>
|
|
|
|
</Form-item>
|
|
|
|
<Form-item v-if="shopData.shopNature === 6" label="店铺地址:">
|
|
|
|
<!--省市区街道联动下拉框-->
|
|
|
|
<div class="address-select-container">
|
|
|
|
<Select v-model="addressSelected.province.value"
|
|
|
|
class="province-select"yar
|
|
|
|
placeholder="请选择省/直辖市"
|
|
|
|
:label-in-value="labelInValue"
|
|
|
|
@on-change="changeProvince"
|
|
|
|
data-type="province">
|
|
|
|
<Option v-for="prvOption in provinceList" :label="prvOption.name" :value="prvOption.value" :key="prvOption.value"></Option>
|
|
|
|
</Select>
|
|
|
|
<Select v-model="addressSelected.city.value"
|
|
|
|
class="city-select"
|
|
|
|
placeholder="请选择市"
|
|
|
|
:label-in-value="labelInValue"
|
|
|
|
@on-change="changeCity"
|
|
|
|
data-type="city">
|
|
|
|
<Option v-for="cityOption in cityList[addressSelected.province.value]" :label="cityOption.name" :value="cityOption.value" :key="cityOption.value"></Option>
|
|
|
|
</Select>
|
|
|
|
<Select v-model="addressSelected.district.value"
|
|
|
|
class="district-select"
|
|
|
|
placeholder="请选择区/县"
|
|
|
|
:label-in-value="labelInValue"
|
|
|
|
@on-change="changeDistrict"
|
|
|
|
data-type="district">
|
|
|
|
<Option v-for="disOption in districtList[addressSelected.city.value]" :label="disOption.name" :value="disOption.value" :key="disOption.value"></Option>
|
|
|
|
</Select>
|
|
|
|
<Select v-model="addressSelected.street.value"
|
|
|
|
class="street-select"
|
|
|
|
placeholder="请选择街道"
|
|
|
|
:label-in-value="labelInValue"
|
|
|
|
@on-change="changeStreet"
|
|
|
|
data-type="street">
|
|
|
|
<Option v-for="streetOption in streetList[addressSelected.district.value]" :label="streetOption.name" :value="streetOption.value" :key="streetOption.value"></Option>
|
|
|
|
</Select>
|
|
|
|
<Input v-model="addressDetail" placeholder="详细地址"></Input>
|
|
|
|
<p>注：店铺地址味店铺最新可联系到的地址</p>
|
|
|
|
</div>
|
|
|
|
</Form-item>
|
|
|
|
<Form-item v-if="shopData.shopNature === 6" label="店铺客服电话:">
|
|
|
|
<Input v-model="customerTel" placeholder="请填写电话" style="width: 150px"></Input>
|
|
|
|
</Form-item>
|
|
|
|
<Form-item v-if="shopData.shopNature === 6" label="支付宝帐号:">
|
|
|
|
<p>{{shopData.zfbAccount}}</p>
|
|
|
|
</Form-item>
|
|
|
|
<Form-item v-if="shopData.shopNature === 6" label="支付宝帐号名称:">
|
|
|
|
<p>{{shopData.zfbAccountName}}</p>
|
|
|
|
</Form-item>
|
|
|
|
<Form-item v-if="shopData.shopNature === 6" label="联系方式:">
|
|
|
|
<p>{{shopData.checkTel}}</p>
|
|
|
|
</Form-item>
|
|
|
|
<Form-item label="品牌－供应商：">
|
|
|
|
<Table :columns="tableCols" width="700" :data="tableData"></Table>
|
|
|
|
</Form-item>
|
|
...
|
...
|
@@ -44,11 +95,13 @@ |
|
|
|
import xss from 'xss';
|
|
|
|
import _ from 'lodash';
|
|
|
|
import ShopService from 'services/shop/shop-service';
|
|
|
|
import AddressData from 'services/shop/regions.json';
|
|
|
|
|
|
|
|
const SHOPNATURE = {
|
|
|
|
1: '旗舰店',
|
|
|
|
2: '专卖店',
|
|
|
|
3: '初始状态（异常情况）',
|
|
|
|
6: '一件代发'
|
|
|
|
};
|
|
|
|
|
|
|
|
export default {
|
|
...
|
...
|
@@ -71,6 +124,19 @@ export default { |
|
|
|
],
|
|
|
|
tableData: null,
|
|
|
|
bucket: 'yhb-img01',
|
|
|
|
addressSelected: { // 下拉框选择的省市区
|
|
|
|
province: {value: '', label: ''},
|
|
|
|
city: {value: '', label: ''},
|
|
|
|
district: {value: '', label: ''},
|
|
|
|
street: {value: '', label: ''}
|
|
|
|
},
|
|
|
|
addressDetail: '', // 用户填写的地址
|
|
|
|
provinceList: [],
|
|
|
|
cityList: {},
|
|
|
|
districtList: {},
|
|
|
|
streetList: {},
|
|
|
|
labelInValue: true,
|
|
|
|
customerTel: ''
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
...
|
...
|
@@ -78,14 +144,123 @@ export default { |
|
|
|
this.shopService.getShop().then(
|
|
|
|
res => {
|
|
|
|
this.shopData = res.data;
|
|
|
|
console.log(this.shopData);
|
|
|
|
this.customerTel = this.shopData.customerTel || '';
|
|
|
|
if (res.data.shopsAddressInfo) {
|
|
|
|
setTimeout(this.manageAddress.bind(this), 1000, res.data.shopsAddressInfo)
|
|
|
|
}
|
|
|
|
this.tableData = JSON.parse(res.data.shopRelationList || '[]');
|
|
|
|
},
|
|
|
|
error => {
|
|
|
|
this.$Message.error(error.message);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
this.getAddressData();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getAddressData() { // 处理省市区数据
|
|
|
|
this.provinceList = [];
|
|
|
|
_.each(AddressData, (province) => {
|
|
|
|
let pro_item = { // 省份
|
|
|
|
name: province.label,
|
|
|
|
value: province.value
|
|
|
|
};
|
|
|
|
this.provinceList.push(pro_item);
|
|
|
|
|
|
|
|
this.cityList[province.value] = [];
|
|
|
|
_.each(province.children, (city) => { // 城市
|
|
|
|
let city_item = {
|
|
|
|
name: city.label,
|
|
|
|
value: city.value,
|
|
|
|
};
|
|
|
|
this.cityList[province.value].push(city_item);
|
|
|
|
|
|
|
|
this.districtList[city.value] = [];
|
|
|
|
_.each(city.children, (district) => { // 区划
|
|
|
|
let district_item = {
|
|
|
|
name: district.label,
|
|
|
|
value: district.value
|
|
|
|
};
|
|
|
|
this.districtList[city.value].push(district_item);
|
|
|
|
|
|
|
|
this.streetList[district.value] = [];
|
|
|
|
_.each(district.children, (street) => { // 街道
|
|
|
|
let street_item = {
|
|
|
|
name: street.label,
|
|
|
|
value: street.value
|
|
|
|
};
|
|
|
|
this.streetList[district.value].push(street_item);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
})
|
|
|
|
});
|
|
|
|
},
|
|
|
|
clearAddress(clr1,clr2,clr3,clr4) {
|
|
|
|
if (clr1) {
|
|
|
|
this.addressSelected.province = {value: '', label: ''};
|
|
|
|
}
|
|
|
|
if (clr2) {
|
|
|
|
this.addressSelected.city = {value: '', label: ''};
|
|
|
|
}
|
|
|
|
|
|
|
|
if (clr3) {
|
|
|
|
this.addressSelected.district = {value: '', label: ''};
|
|
|
|
}
|
|
|
|
|
|
|
|
if (clr4) {
|
|
|
|
this.addressSelected.street = {value: '', label: ''};
|
|
|
|
}
|
|
|
|
},
|
|
|
|
manageAddress(address) { // 把接口返回的省市区数据从文字对应成value
|
|
|
|
if (address.province && this.provinceList.length > 0) {
|
|
|
|
let province = this.provinceList.filter(item => item.name === address.province);
|
|
|
|
if (province[0]) { // 找到省份对应的value
|
|
|
|
this.addressSelected.province = {value: province[0].value, label: province[0].name};
|
|
|
|
|
|
|
|
let city = this.cityList[province[0].value].filter(item => item.name === address.city);
|
|
|
|
if (city[0]) {
|
|
|
|
setTimeout(() => { // 找到城市对应的value，因为数据是级联绑定，需要setTimeout
|
|
|
|
this.addressSelected.city = {value: city[0].value, label: city[0].name};
|
|
|
|
|
|
|
|
let district = this.districtList[city[0].value].filter(item => item.name === address.county);
|
|
|
|
|
|
|
|
if (district[0]) { // 找到区划对应的value
|
|
|
|
setTimeout(() => {
|
|
|
|
this.addressSelected.district = {value: district[0].value, label: district[0].label};
|
|
|
|
|
|
|
|
let street = this.streetList[district[0].value].filter(item => item.name === address.street);
|
|
|
|
|
|
|
|
if (street[0]) { // 找到街道对应的value
|
|
|
|
setTimeout(() => {
|
|
|
|
this.addressSelected.street = {value: street[0].value, label: street[0].label};
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}, 100);
|
|
|
|
}
|
|
|
|
}, 100);
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.addressDetail = address.detailAdd || '';
|
|
|
|
},
|
|
|
|
changeProvince(val) {
|
|
|
|
this.clearAddress(1, 1, 1, 1);
|
|
|
|
this.addressSelected.province = val;
|
|
|
|
},
|
|
|
|
changeCity(val) {
|
|
|
|
this.clearAddress(0, 1, 1, 1);
|
|
|
|
this.addressSelected.city = val;
|
|
|
|
},
|
|
|
|
changeDistrict(val) {
|
|
|
|
this.clearAddress(0, 0, 1, 1);
|
|
|
|
this.addressSelected.district = val;
|
|
|
|
},
|
|
|
|
changeStreet(val) {
|
|
|
|
this.clearAddress(0, 0, 0, 1);
|
|
|
|
this.addressSelected.street = val;
|
|
|
|
},
|
|
|
|
updateIntro(content) {
|
|
|
|
this.shopData.shopIntro = content;
|
|
|
|
},
|
|
...
|
...
|
@@ -107,6 +282,12 @@ export default { |
|
|
|
shopRelationList: this.shopData.shopRelationList,
|
|
|
|
shopsId: this.shopData.shopsId,
|
|
|
|
shopsType: this.shopData.shopsType,
|
|
|
|
province: this.addressSelected.province.label,
|
|
|
|
city: this.addressSelected.city.label,
|
|
|
|
county: this.addressSelected.district.label,
|
|
|
|
street: this.addressSelected.street.label,
|
|
|
|
detailAdd: this.addressDetail,
|
|
|
|
customerTel: this.customerTel,
|
|
|
|
shopIntro: xss(this.shopData.shopIntro),
|
|
|
|
businessLicense: xss(this.shopData.businessLicense),
|
|
|
|
};
|
|
...
|
...
|
@@ -153,6 +334,24 @@ export default { |
|
|
|
this.$Loading.start();
|
|
|
|
|
|
|
|
const newShop = this.beforeSubmit();
|
|
|
|
const regExp = /^([1]\d{10}|\d{2,4}-\d{0,3}[-]{0,1}\d{4,8})/;
|
|
|
|
|
|
|
|
if (newShop.shopNature === 6) {
|
|
|
|
if (!newShop.customerTel || !regExp.test(newShop.customerTel)) {
|
|
|
|
this.$Notice.error({
|
|
|
|
title: '保存错误',
|
|
|
|
desc: '请填写正确的客服电话',
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (!newShop.province || !newShop.city || !newShop.detailAdd) {
|
|
|
|
this.$Notice.error({
|
|
|
|
title: '保存错误',
|
|
|
|
desc: '请选择并填写店铺地址',
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.shopService.saveBaseShopInfo(newShop).then(result => {
|
|
|
|
this.$Loading.finish();
|
|
...
|
...
|
@@ -193,4 +392,23 @@ export default { |
|
|
|
width: 124px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
|
|
|
.address-select-container {
|
|
|
|
.ivu-select {
|
|
|
|
width: 180px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-input-wrapper {
|
|
|
|
width: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-input {
|
|
|
|
width: 300px;
|
|
|
|
}
|
|
|
|
|
|
|
|
p {
|
|
|
|
font-size: 12px;
|
|
|
|
color: red;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
