336 lines
8.6 KiB
Vue
336 lines
8.6 KiB
Vue
|
<template>
|
||
|
|
<el-dialog
|
||
|
|
title="选择退货地址"
|
||
|
|
:visible.sync="AgreeReturnvisible"
|
||
|
|
width="800px"
|
||
|
|
custom-class="AgreeReturn"
|
||
|
|
:before-close="close"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<div v-if="AgreeReturndata.ag_site_management_id !== 76">
|
||
|
|
<div class="add" v-if="!addactive" @click="addadrdss">
|
||
|
|
<div class="name">
|
||
|
|
<span>新增地址</span>
|
||
|
|
</div>
|
||
|
|
<div class="addressinfo">
|
||
|
|
<span>________省</span>
|
||
|
|
<span>________市</span>
|
||
|
|
<span>________区</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="add" v-else :class="{ active: addactive }">
|
||
|
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||
|
|
<div class="top">
|
||
|
|
<el-form-item>
|
||
|
|
<el-input
|
||
|
|
class="input_w"
|
||
|
|
size="small"
|
||
|
|
v-model="form.consignee_name"
|
||
|
|
placeholder="请输入收货人姓名"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-input
|
||
|
|
class="input_w"
|
||
|
|
size="small"
|
||
|
|
v-model="form.mobile"
|
||
|
|
placeholder="请输入收货人电话"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
<el-row :gutter="10" class="bottom">
|
||
|
|
<el-col v-for="item in inputAdd" :key="item.value" :span="4">
|
||
|
|
<el-form-item :prop="item.value">
|
||
|
|
<el-select
|
||
|
|
v-model="form[item.value]"
|
||
|
|
size="small"
|
||
|
|
:placeholder="`请选择${item.label}`"
|
||
|
|
@change="selectaddress(item.label)"
|
||
|
|
filterable
|
||
|
|
clearable
|
||
|
|
>
|
||
|
|
<el-option
|
||
|
|
v-for="items in item.options"
|
||
|
|
:key="items.value"
|
||
|
|
:label="items.label"
|
||
|
|
:value="items.value"
|
||
|
|
/></el-select>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item>
|
||
|
|
<el-input
|
||
|
|
size="small"
|
||
|
|
v-model="form.detail"
|
||
|
|
placeholder="请输入详细地址"
|
||
|
|
></el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<div
|
||
|
|
class="addredss-box"
|
||
|
|
:class="{ active: el.checked }"
|
||
|
|
v-for="(el, id) in addressDate"
|
||
|
|
:key="id"
|
||
|
|
@click="select(el)"
|
||
|
|
>
|
||
|
|
<div class="name">
|
||
|
|
<span>{{ el.consignee_name }}</span>
|
||
|
|
<span>{{ el.mobile }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="addressinfo">
|
||
|
|
<span>{{ el.province }} </span>
|
||
|
|
<span>{{ el.city }} </span>
|
||
|
|
<span>{{ el.area }}</span>
|
||
|
|
<span>{{ el.town }}</span>
|
||
|
|
<span>{{ el.detail }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click="close" size="small">取 消</el-button>
|
||
|
|
<el-button type="primary" size="small" @click="confirm">确 定</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
get_after_sale_address,
|
||
|
|
administrative_division,
|
||
|
|
refund_after_sale,
|
||
|
|
} from "@/api/idleFish";
|
||
|
|
export default {
|
||
|
|
|
||
|
|
props: ["AgreeReturnvisible", "AgreeReturndata"],
|
||
|
|
components: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
province: [],
|
||
|
|
addressDate: [],
|
||
|
|
inputAdd: [
|
||
|
|
{
|
||
|
|
options: [],
|
||
|
|
label: "省",
|
||
|
|
value: "province",
|
||
|
|
placeholder: "请填写省",
|
||
|
|
},
|
||
|
|
{ options: [], label: "市", value: "city", placeholder: "请填写市" },
|
||
|
|
{ options: [], label: "区", value: "area", placeholder: "请填写区" },
|
||
|
|
],
|
||
|
|
checked: false, //选择状态
|
||
|
|
addactive: false, //添加状态
|
||
|
|
form: {
|
||
|
|
consignee_name: "",
|
||
|
|
mobile: "",
|
||
|
|
province: "",
|
||
|
|
city: "",
|
||
|
|
area: "",
|
||
|
|
town: "",
|
||
|
|
detail: "",
|
||
|
|
},
|
||
|
|
post_code: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
this.getaddress();
|
||
|
|
this.getprovince();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getaddress() {
|
||
|
|
const res = await get_after_sale_address();
|
||
|
|
this.addressDate = res.datas;
|
||
|
|
},
|
||
|
|
async getprovince() {
|
||
|
|
const res = await administrative_division();
|
||
|
|
this.inputAdd.forEach((item) => {
|
||
|
|
if (item.value === "province") {
|
||
|
|
item.options = res.datas.map((item1) => {
|
||
|
|
return {
|
||
|
|
label: item1.province,
|
||
|
|
value: item1.province,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
async selectaddress(row) {
|
||
|
|
if (row === "省") {
|
||
|
|
const res = await administrative_division({
|
||
|
|
province: this.form.province,
|
||
|
|
});
|
||
|
|
console.log(res);
|
||
|
|
this.inputAdd.forEach((item) => {
|
||
|
|
if (item.value === "city") {
|
||
|
|
item.options = res.datas.map((item1) => {
|
||
|
|
return {
|
||
|
|
label: item1.city,
|
||
|
|
value: item1.city,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else if (row === "市") {
|
||
|
|
const res = await administrative_division({
|
||
|
|
province: this.form.province,
|
||
|
|
city: this.form.city,
|
||
|
|
});
|
||
|
|
console.log(res);
|
||
|
|
this.inputAdd.forEach((item) => {
|
||
|
|
if (item.value === "area") {
|
||
|
|
item.options = res.datas.map((item1) => {
|
||
|
|
return {
|
||
|
|
label: item1.area,
|
||
|
|
value: item1.area,
|
||
|
|
post_code: item1.city_id,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
if (this.inputAdd && this.form.area) {
|
||
|
|
this.inputAdd.forEach((item) => {
|
||
|
|
if (item.options && item.options.some((items) => items.post_code)) {
|
||
|
|
let res = item.options.filter(
|
||
|
|
(item_) => item_.label === this.form.area
|
||
|
|
);
|
||
|
|
if (res.length > 0) {
|
||
|
|
this.post_code = res[0].post_code;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (this.form.province === "") {
|
||
|
|
this.form.city = "";
|
||
|
|
this.form.area = "";
|
||
|
|
this.form.town = "";
|
||
|
|
this.form.detail = "";
|
||
|
|
} else if (this.form.city === "") {
|
||
|
|
this.form.area = "";
|
||
|
|
this.form.town = "";
|
||
|
|
this.form.detail = "";
|
||
|
|
}
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.$emit("closeAgreeReturn");
|
||
|
|
},
|
||
|
|
async confirm() {
|
||
|
|
this.form.post_code = this.post_code;
|
||
|
|
if (!this.form.town) {
|
||
|
|
this.form.town = "无";
|
||
|
|
}
|
||
|
|
const params = {
|
||
|
|
xy_sale_after_id: this.AgreeReturndata.id,
|
||
|
|
operation: "AGREE_RETURN",
|
||
|
|
address_detail: this.form,
|
||
|
|
};
|
||
|
|
const res = await refund_after_sale(params);
|
||
|
|
this.$emit("closeAgreeReturn");
|
||
|
|
},
|
||
|
|
select(data) {
|
||
|
|
this.addactive = false;
|
||
|
|
this.addressDate.forEach((el) => {
|
||
|
|
el.id == data.id
|
||
|
|
? this.$set(el, "checked", true)
|
||
|
|
: this.$set(el, "checked", false);
|
||
|
|
});
|
||
|
|
this.post_code = data.post_code; //如果使用已有地址清空id
|
||
|
|
this.form = { ...data };
|
||
|
|
},
|
||
|
|
addadrdss() {
|
||
|
|
this.addactive = true;
|
||
|
|
this.addressDate.forEach((el) => {
|
||
|
|
this.$set(el, "checked", false);
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
::v-deep .el-dialog__body {
|
||
|
|
padding: 10px 20px 0 !important;
|
||
|
|
}
|
||
|
|
.addredss-box,
|
||
|
|
.add {
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid #dcdfe6;
|
||
|
|
padding: 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
.name {
|
||
|
|
color: #000;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 16px;
|
||
|
|
span {
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.addressinfo {
|
||
|
|
color: #606266;
|
||
|
|
font-weight: 400;
|
||
|
|
margin-top: 10px;
|
||
|
|
span {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.addredss-box:hover {
|
||
|
|
border: 1px solid #c0c4cc;
|
||
|
|
}
|
||
|
|
.active {
|
||
|
|
border: 1px solid #409eff;
|
||
|
|
}
|
||
|
|
.active:hover {
|
||
|
|
border: 1px solid #409eff;
|
||
|
|
}
|
||
|
|
.add {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
height: 110px;
|
||
|
|
cursor: pointer;
|
||
|
|
span {
|
||
|
|
color: #9e9fa1;
|
||
|
|
}
|
||
|
|
.addressinfo {
|
||
|
|
color: #9e9fa1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
::v-deep .el-form {
|
||
|
|
.top {
|
||
|
|
.el-form-item {
|
||
|
|
width: 177px;
|
||
|
|
margin-bottom: 0 !important;
|
||
|
|
.el-input {
|
||
|
|
width: 150px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bottom {
|
||
|
|
.el-form-item {
|
||
|
|
margin: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.el-input__inner {
|
||
|
|
border: none;
|
||
|
|
border-bottom: 1px solid #c0c4cc;
|
||
|
|
border-radius: 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
padding: 10px 10px 0px 10px;
|
||
|
|
height: 400px;
|
||
|
|
overflow-y: auto;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
</style>
|