<template>
|
<el-row>
|
<div class="cardCurrentStyle1 returnAddressStyle">
|
<el-tabs type="card">
|
<el-tab-pane label="退货地址管理">
|
<h6 style="margin-left:29px;">温馨提示：该地址为消费者购买【总厂订单】退货地址</h6>
|
<el-col class="configForm" :span="10">
|
<el-form size="mini" ref="form" :model="form" :disabled="formDisabled"
|
label-width="120px" :rules="formRules">
|
<el-form-item label="收货联系人：" prop="linkMan">
|
<el-input placeholder="请输入收货联系人" v-model="form.linkMan"></el-input>
|
</el-form-item>
|
<el-form-item label="收货电话：" prop="linkPhone">
|
<el-input placeholder="请输入收货电话" v-model="form.linkPhone"></el-input>
|
</el-form-item>
|
<el-form-item label="收货地址：" prop="provinceId">
|
<address-component ref="addressComponent" :allAdress="allAdress" :isRequest="false" :adressArr.sync='adress'>
|
</address-component>
|
</el-form-item>
|
<el-form-item label="详细地址：" prop="shopAddress">
|
<el-input type="textarea" :autosize="{minRows:4,maxRows:6}"
|
v-model="form.shopAddress"></el-input>
|
</el-form-item>
|
</el-form>
|
<el-row class="buttonPosition">
|
<el-button size="mini" type="primary" v-if="formDisabled" @click="edit">编辑</el-button>
|
<el-button type="primary" size="mini" v-else @click="submit">保存</el-button>
|
<el-button size="mini" v-if="!formDisabled" @click="cancel">取消</el-button>
|
</el-row>
|
</el-col>
|
</el-tab-pane>
|
<el-tab-pane label="限购区域管理">
|
<div class="right-con">
|
<order-limit-area :allAdress="allAdress"></order-limit-area>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</el-row>
|
</template>
|
<script>
|
import productListApi from '@/api/productmanagement/productList'
|
import addressComponent from '@/components/formTemplate/addressComponent.vue'
|
import { validateMobile } from '@/utils/validator'
|
import { mapState } from 'vuex'
|
import orderLimitArea from '@/views/refundMgt/returnAddress/components/orderLimitArea.vue'
|
import addressResourcesApi from '@/api/addressResources'
|
|
export default {
|
components: { addressComponent, orderLimitArea },
|
computed: {
|
...mapState(['userInfo'])
|
},
|
data () {
|
const addressValid = (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请选择收货地址'))
|
} else {
|
callback()
|
}
|
}
|
return {
|
formDisabled: true,
|
form: {
|
linkMan: null,
|
linkPhone: null,
|
provinceId: null,
|
province: null,
|
cityId: null,
|
city: null,
|
aeraId: null,
|
aera: null,
|
areaMapName: null,
|
shopAddress: null,
|
shopId: null
|
},
|
adress: [],
|
cascaderObj: [],
|
allAdress: [],
|
formRules: {
|
linkMan: [{ required: true, message: '请输入收货联系人', trigger: 'change' }],
|
linkPhone: [
|
{ validator: validateMobile, required: true, trigger: 'change' }
|
],
|
shopAddress: [{ required: true, message: '请输入详细地址', trigger: 'change' }],
|
provinceId: [
|
{ required: true, message: '请选择收货地址' },
|
{ validator: addressValid, trigger: 'submit' }
|
]
|
}
|
}
|
},
|
created () {
|
this.getAdressArray()
|
this.getDetails()
|
},
|
watch: {
|
adress (newValue, oldValue) {
|
if (newValue.length) {
|
this.$refs.form.clearValidate()
|
}
|
}
|
},
|
methods: {
|
/**
|
* 获取省市区数据
|
*/
|
getAdressArray () {
|
addressResourcesApi.getList().then(res => {
|
if (res.data) {
|
this.allAdress = res.data
|
}
|
})
|
},
|
/**
|
* 查询详情
|
*/
|
getDetails () {
|
// 传入固定值：WLY
|
productListApi.findShopByMerchantId('WLY').then(res => {
|
if (res.data) {
|
const { linkMan, linkPhone, provinceId, province, cityId, city, aeraId, aera, areaMapName, shopAddress, shopId } = res.data[0]
|
this.form = { linkMan, linkPhone, provinceId, province, cityId, city, aeraId, aera, areaMapName, shopAddress, shopId }
|
if (provinceId) {
|
if (provinceId === '810000' || provinceId === '820000') {
|
this.adress = [provinceId, aeraId]
|
} else {
|
this.adress = [provinceId, cityId, aeraId]
|
}
|
}
|
}
|
})
|
},
|
/**
|
* 获取级联label
|
*/
|
getCascaderObj (val, opt) {
|
return val.map(function (value, index, array) {
|
for (var itm of opt) {
|
if (itm.value === value) { opt = itm.children; return itm.label }
|
}
|
return null
|
})
|
},
|
/**
|
* 获取省市区
|
*/
|
getAddress () {
|
const cascaderObj = this.getCascaderObj(this.adress, this.allAdress)
|
if (this.adress[0] === '810000' || this.adress[0] === '820000') {
|
this.form.provinceId = this.adress[0]
|
this.form.cityId = this.adress[0]
|
this.form.aeraId = this.adress[1]
|
this.form.province = cascaderObj[0]
|
this.form.city = cascaderObj[0]
|
this.form.aera = cascaderObj[1]
|
} else {
|
this.form.provinceId = this.adress[0]
|
this.form.cityId = this.adress[1]
|
this.form.aeraId = this.adress[2]
|
this.form.province = cascaderObj[0]
|
this.form.city = cascaderObj[1]
|
this.form.aera = cascaderObj[2]
|
}
|
this.form.areaMapName = cascaderObj.join('')
|
},
|
/**
|
* 保存
|
*/
|
submit () {
|
this.getAddress() // 获取省市区
|
this.$refs.form.validate().then((res) => {
|
productListApi.updateShop(this.form).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '修改成功',
|
type: 'success'
|
})
|
this.formDisabled = true
|
}
|
})
|
}).catch(() => { })
|
},
|
// 取消
|
cancel () {
|
this.getDetails()
|
this.formDisabled = true
|
},
|
/**
|
* 编辑
|
*/
|
edit () {
|
this.formDisabled = false
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.configForm {
|
width: 700px;
|
}
|
.buttonPosition {
|
text-align: center;
|
margin-top: 10px;
|
}
|
.cardCurrentStyle1 {
|
.el-tabs__content {
|
background: #fff;
|
padding-bottom: 76px;
|
}
|
}
|
.right-con {
|
padding-left: 30px;
|
}
|
.returnAddressStyle{
|
padding:20px;
|
background-color: #FFF;
|
}
|
</style>
|
