<template>
|
<div>
|
<div class="setButtonStyle setInputStyle">
|
<el-form-item label="收货人姓名：">
|
<el-input v-model="form.omsOrderDelivery.contactName" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
<div class="btnStyle" v-if="isShowEditAdressBtn()">
|
<el-button size="mini" @click="editInfo" :type="isDisabled ? 'primary' : ''"
|
v-show="(form.orderStatus === '01' || form.orderStatus === '03')&&form.interceptType!=='2'">
|
{{ isDisabled ? '修改地址' : '取消' }}
|
</el-button>
|
<el-button size="mini" @click="saveInfo" type="primary" v-show="!isDisabled"
|
:loading="loading">保存</el-button>
|
</div>
|
</div>
|
<div class="setInputStyle">
|
<el-form-item label="收货人电话：">
|
<el-input v-model="form.omsOrderDelivery.contactPhone" :disabled="isDisabled"></el-input>
|
</el-form-item>
|
</div>
|
<div class="setInputStyle">
|
<el-form-item label="收货人地址：">
|
<address-component ref="addressComponent" :isDisabled="isDisabled" :adressArr.sync="adress">
|
</address-component>
|
<el-input type="textarea" v-model="form.omsOrderDelivery.detail" :autosize="{ minRows: 6}"
|
:disabled="isDisabled" maxlength="120" style="width:350px;" show-word-limit>
|
</el-input>
|
</el-form-item>
|
</div>
|
|
<div class="setInputStyle">
|
<el-form-item label="商家备注：">
|
<el-input type="textarea" v-model="form.orderMerchantMemo"
|
:autosize="{ minRows: 3, maxRows: 5 }" :disabled="isDisabled" maxlength="20"
|
style="width:350px;" show-word-limit></el-input>
|
</el-form-item>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import orderMgtApi from '@/api/orderMgt'
|
import addressComponent from '@/components/formTemplate/addressComponent.vue'
|
|
export default {
|
props: ['form', 'newForm', 'originalOrderAddressInfo'],
|
components: { addressComponent },
|
data() {
|
return {
|
adress: [],
|
isDisabled: true,
|
loading: false
|
}
|
},
|
watch: {
|
originalOrderAddressInfo: {
|
handler() {
|
const userInfo = this.form.omsOrderDelivery
|
this.setAdress(userInfo)
|
},
|
deep: true,
|
immediate: true
|
}
|
},
|
methods: {
|
/**
|
* 是否展示编辑地址按钮
|
*/
|
isShowEditAdressBtn() {
|
if (this.form.orderType === 'T04') {
|
return true
|
} else {
|
switch (this.form.orderSource) {
|
case 'WLY':
|
return true
|
case 'YDJS':
|
return true
|
case 'XCX':
|
return true
|
default:
|
break
|
}
|
}
|
},
|
/**
|
* 设置地址的值
|
*/
|
setAdress(userInfo) {
|
if (userInfo && userInfo.provinceId) {
|
if (userInfo.provinceId === '810000' || userInfo.provinceId === '820000') {
|
this.adress = [userInfo.provinceId, userInfo.aeraId]
|
} else {
|
this.adress = [userInfo.provinceId, userInfo.cityId, userInfo.aeraId]
|
}
|
} else {
|
this.adress = []
|
}
|
},
|
/**
|
* 获取级联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.$refs.addressComponent.adressArray)
|
const area = this.form.omsOrderDelivery
|
if (this.adress[0] === '810000' || this.adress[0] === '820000') {
|
area.provinceId = this.adress[0]
|
area.cityId = this.adress[0]
|
area.aeraId = this.adress[1]
|
area.province = cascaderObj[0]
|
area.city = cascaderObj[0]
|
area.aera = cascaderObj[1]
|
} else {
|
area.provinceId = this.adress[0]
|
area.cityId = this.adress[1] ? this.adress[1] : null
|
area.aeraId = this.adress[2] ? this.adress[2] : null
|
area.province = cascaderObj[0]
|
area.city = cascaderObj[1] ? cascaderObj[1] : null
|
area.aera = cascaderObj[2] ? cascaderObj[2] : null
|
}
|
},
|
/**
|
* 保存收货人信息
|
*/
|
saveInfo() {
|
this.getAddress() // 获取省市区
|
if (!this.form.omsOrderDelivery.contactName || !this.form.omsOrderDelivery.contactPhone || !this.form.omsOrderDelivery.detail || !this.adress.length) {
|
this.$message({
|
message: '收货人信息不能为空',
|
type: 'warning'
|
})
|
return
|
}
|
// 收货人姓名
|
const _contactName = this.newForm.omsOrderDelivery.contactName
|
// 收货人详细地址
|
const _detail = this.newForm.omsOrderDelivery.detail
|
// 收货人电话
|
const _contactPhone = this.newForm.omsOrderDelivery.contactPhone
|
|
// 为true表示未改动，false表示改动过
|
const bool1 = this.form.omsOrderDelivery.contactName.includes(_contactName) && _contactName.length === this.form.omsOrderDelivery.contactName.length;
|
const bool2 = this.form.omsOrderDelivery.detail.includes(_detail) && _detail.length === this.form.omsOrderDelivery.detail.length;
|
const bool3 = this.form.omsOrderDelivery.contactPhone.includes(_contactPhone) && _contactPhone.length === this.form.omsOrderDelivery.contactPhone.length;
|
if (this.form.omsOrderDelivery.contactName.includes('*') && !bool1) {
|
this.$message({
|
message: '收货人姓名格式不正确，请修改',
|
type: 'warning'
|
})
|
return
|
}
|
if (this.form.omsOrderDelivery.detail.includes('*') && !bool2) {
|
this.$message({
|
message: '收货人详细地址格式不正确，请修改',
|
type: 'warning'
|
})
|
return
|
}
|
const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
|
if (!bool3 && !reg.test(this.form.omsOrderDelivery.contactPhone)) {
|
this.$message({
|
message: '收货人电话格式不正确，请修改',
|
type: 'warning'
|
})
|
return
|
}
|
this.loading = true
|
this.form.omsOrderDelivery.orderMerchantMemo = this.form.orderMerchantMemo
|
const params = JSON.parse(JSON.stringify(this.form.omsOrderDelivery))
|
// 未修改的情况参数加密参数不传递
|
if (bool1) {
|
delete params.contactName
|
}
|
if (bool2) {
|
delete params.detail
|
}
|
if (bool3) {
|
delete params.contactPhone
|
}
|
orderMgtApi.editUserInfo(params).then(res => {
|
if (res.data) {
|
this.$message({
|
message: '修改地址成功',
|
type: 'success'
|
})
|
this.isDisabled = true
|
this.loading = false
|
const adddressInfo = JSON.parse(JSON.stringify(this.form.omsOrderDelivery))
|
adddressInfo.orderMerchantMemo = this.form.orderMerchantMemo
|
this.$emit('handleAdddressInfo', adddressInfo)
|
this.setAdress(adddressInfo)
|
} else {
|
this.loading = false
|
}
|
}).catch(() => {
|
this.loading = false
|
})
|
},
|
/**
|
* 编辑收货人信息
|
*/
|
editInfo() {
|
this.isDisabled = !this.isDisabled
|
if (this.isDisabled) {
|
this.form.omsOrderDelivery = JSON.parse(JSON.stringify(this.originalOrderAddressInfo))
|
this.form.orderMerchantMemo = this.originalOrderAddressInfo.orderMerchantMemo
|
this.setAdress(this.originalOrderAddressInfo)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.order_details_style {
|
.setInputStyle {
|
.el-input {
|
width: 350px;
|
}
|
.el-cascader {
|
margin-bottom: 15px;
|
}
|
}
|
.form_item_style {
|
margin-right: 83px;
|
}
|
}
|
</style>
|
