<template>
|
<div class="content" v-loading="loading">
|
<template v-if="isAdd == true">
|
<el-form
|
:model="addressItem"
|
ref="form"
|
label-position="left"
|
:rules="rules"
|
label-width="130px"
|
>
|
<el-form-item label="收货人：" prop="name">
|
<el-input
|
class=""
|
v-model="addressItem.name"
|
placeholder="请填写收货人的姓名"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="手机号：" prop="tel">
|
<el-input
|
class=""
|
v-model="addressItem.tel"
|
placeholder="请填写手机号"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="所在地区：" prop="city">
|
<div>
|
<el-cascader
|
size="large"
|
:options="options"
|
v-model="selectedOptions"
|
@change="handleChange"
|
>
|
</el-cascader>
|
</div>
|
</el-form-item>
|
<el-form-item label="详细地址：" prop="address">
|
<el-input
|
class=""
|
v-model="addressItem.address"
|
placeholder="请填写详细地址"
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div class="addAddress">
|
<span class="">设为默认地址：</span>
|
<el-switch
|
v-model="addressItem.ifdefalut"
|
:change="
|
() => {
|
this.addressItem.ifdefalut = !this.addressItem.ifdefalut;
|
}
|
"
|
:active-value="true"
|
active-color="#00873C"
|
:inactive-value="false"
|
inactive-color="#666666"
|
>
|
</el-switch>
|
</div>
|
<div>
|
<div class="addAddressButton saveAddressBtn greenButton" @click="save">
|
保存
|
</div>
|
<div
|
class="addAddressButton saveAddressBtn delete"
|
v-show="edit"
|
@click="deleteAddress(addressItem.id)"
|
>
|
删除
|
</div>
|
<div class="addAddressButton saveAddressBtn delete" @click="cancel">
|
取消
|
</div>
|
</div>
|
</template>
|
<template v-else>
|
<div
|
class="addAddressButton greenButton"
|
@click="
|
() => {
|
this.isAdd = true;
|
this.edit = false;
|
}
|
"
|
>
|
新增收货地址
|
</div>
|
<!-- 写加载状态 -->
|
<template v-if="addressList.length > 0">
|
<div
|
class="addressItem"
|
v-for="(item, index) in addressList"
|
:key="index"
|
>
|
<div>
|
<div>
|
<span class="name">{{ item.name }}</span>
|
<span class="phoneNum">{{ item.tel }}</span>
|
<span class="default primaryTxt" v-if="item.ifdefalut">默认</span>
|
</div>
|
<p class="detailedAddress">
|
{{ item.city }}
|
{{ item.address }}
|
</p>
|
</div>
|
<div @click="editor(index)">
|
<i class="f18 el-icon-edit"></i>
|
</div>
|
</div>
|
</template>
|
|
<template v-else>
|
<el-empty description="暂无收货地址，请添加收货地址"></el-empty>
|
</template>
|
</template>
|
</div>
|
</template>
|
<script>
|
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
|
|
export default {
|
data() {
|
return {
|
edit: false, // 是否编辑状态
|
isAdd: false,
|
addressItem: {
|
name: "",
|
tel: "",
|
city: "",
|
ifdefalut: false,
|
address: ""
|
},
|
rules: {
|
name: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
|
tel: [
|
{ required: true, message: "请输入手机号", trigger: "blur" },
|
{
|
pattern:
|
/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
|
message: "请输入正确手机号",
|
trigger: "blur"
|
}
|
],
|
city: [{ required: true, message: "请选择地区", trigger: "change" }],
|
address: [
|
{ required: true, message: "请输入详细地址", trigger: "blur" }
|
]
|
},
|
addressList: [],
|
options: regionData,
|
selectedOptions: [], // 地区选项值
|
loading: false
|
};
|
},
|
created() {
|
this.getAddress();
|
},
|
methods: {
|
handleChange(city) {
|
let cityStr =
|
CodeToText[city[0]] +
|
"/" +
|
CodeToText[city[1]] +
|
"/" +
|
CodeToText[city[2]];
|
let cityArr = cityStr.split("/");
|
if (cityArr[1] == "市辖区") {
|
cityArr[1] = cityArr[0];
|
}
|
this.addressItem.city = cityArr.join("/");
|
},
|
// 取消新建地址
|
cancel() {
|
this.isAdd = false;
|
this.edit = false;
|
// 重置输入框
|
Object.assign(this.addressItem, {
|
name: "",
|
tel: "",
|
city: "",
|
ifdefalut: false,
|
address: ""
|
});
|
this.selectedOptions = [];
|
},
|
// 保存新建的地址
|
save() {
|
// 验证必填项
|
this.$refs["form"].validate((valid) => {
|
if (valid) {
|
this.loading = true;
|
// 保存地址 / 新增地址
|
// 如果该地址为默认值，去除其他状态为默认值
|
if (this.addressItem.ifdefalut == true) {
|
this.addressList.map((item) => {
|
item.ifdefalut = false;
|
});
|
}
|
if (this.addressItem.id) {
|
// 修改地址
|
let index = this.addressList.findIndex(
|
(item) => item.id == this.addressItem.id
|
);
|
this.addressList[index] = { ...this.addressItem };
|
} else {
|
// 新增地址
|
this.addressItem.id = this.tool.uuid();
|
this.addressList.push(JSON.parse(JSON.stringify(this.addressItem)));
|
}
|
const userInfo = {
|
requests: [
|
{
|
data: JSON.stringify(this.addressList),
|
name: "地址管理",
|
type: "Address"
|
}
|
]
|
};
|
this.MG.identity.setAppUserInfo(userInfo).then((res) => {
|
this.loading = false;
|
if (res) {
|
this.$message({
|
showClose: true,
|
message: "成功",
|
type: "success"
|
});
|
// 清空输入值
|
for (const key in this.addressItem) {
|
this.addressItem[key] = "";
|
}
|
this.selectedOptions = [];
|
|
// 切换状态
|
this.isAdd = false;
|
// 新增地址后将默认地址设为关闭状态
|
this.addressItem.ifdefalut = false;
|
} else {
|
this.$message({
|
showClose: true,
|
message: "失败，请稍后重试",
|
type: "error"
|
});
|
}
|
});
|
}
|
});
|
},
|
// 获取所有地址
|
getAddress() {
|
this.loading = true;
|
this.MG.identity.getCurrentAppUser().then((res) => {
|
this.loading = false;
|
let storeInfoList = res.infoList.find((i) => i.type == "Address");
|
if (storeInfoList && storeInfoList.data) {
|
this.addressList = JSON.parse(storeInfoList.data);
|
if (this.addressList.length == 0) {
|
// 用户为第一次添加地址，则当前所选地址为默认地址
|
this.addressItem.ifdefalut = true;
|
}
|
} else {
|
// 用户为第一次添加地址，则当前所选地址为默认地址
|
this.addressItem.ifdefalut = true;
|
}
|
});
|
},
|
// 编辑选中地址
|
editor(index) {
|
this.isAdd = true;
|
this.edit = true;
|
this.addressItem = { ...this.addressList[index] };
|
let city = this.addressItem.city.split("/");
|
if (city[0] == city[1]) {
|
city[1] = "市辖区";
|
}
|
this.selectedOptions.push(TextToCode[city[0]].code);
|
this.selectedOptions.push(TextToCode[city[0]][city[1]].code);
|
this.selectedOptions.push(TextToCode[city[0]][city[1]][city[2]].code);
|
},
|
// 删除地址
|
deleteAddress(id) {
|
this.$confirm("是否移除该地址", "提示", {
|
type: "warning"
|
})
|
.then(() => {
|
let basicInfo = this.addressList.filter((item) => item.id != id);
|
// 将当前第一个地址设置为默认地址
|
if (basicInfo.length != 0) {
|
basicInfo[0].ifdefalut = true;
|
}
|
const userInfo = {
|
requests: [
|
{
|
data: JSON.stringify(basicInfo),
|
name: "地址管理",
|
type: "Address"
|
}
|
]
|
};
|
this.MG.identity.setAppUserInfo(userInfo).then((res) => {
|
if (res) {
|
this.$message({
|
type: "success",
|
message: "地址移除成功"
|
});
|
// 清空输入值
|
for (const key in this.addressItem) {
|
this.addressItem[key] = "";
|
}
|
this.selectedOptions = [];
|
this.addressItem.ifdefalut = false;
|
|
this.isAdd = false;
|
// 重新获取数据
|
this.getAddress();
|
}
|
});
|
})
|
.catch(() => {});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.content {
|
padding: 40px;
|
&:deep(.el-input) {
|
width: 603px;
|
}
|
.addressItem {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
padding-bottom: 40px;
|
margin-bottom: 40px;
|
align-items: center;
|
border-bottom: 1px solid #eeeeee;
|
.detailedAddress {
|
font-size: 16px;
|
font-weight: 400;
|
color: #333333;
|
line-height: 24px;
|
}
|
.name {
|
font-size: 18px;
|
font-weight: 700;
|
color: #333333;
|
margin-right: 20px;
|
}
|
.phoneNum {
|
font-size: 16px;
|
font-weight: 700;
|
color: #999999;
|
line-height: 36px;
|
margin-right: 20px;
|
}
|
.default {
|
padding: 1px 7px;
|
border: 2px solid #00873c;
|
border-radius: 4px;
|
}
|
.f18 {
|
cursor: pointer;
|
font-size: 18px;
|
}
|
}
|
.greenButton {
|
background: linear-gradient(0deg, #00873c 0%, #00aa4c 100%);
|
}
|
.addAddressButton {
|
cursor: pointer;
|
width: 120px;
|
height: 40px;
|
border-radius: 4px;
|
color: #fff;
|
font-size: 16px;
|
text-align: center;
|
line-height: 40px;
|
margin-bottom: 30px;
|
}
|
.saveAddressBtn {
|
float: right;
|
}
|
.addAddress {
|
width: 100%;
|
display: flex;
|
margin-bottom: 30px;
|
align-items: center;
|
span {
|
display: inline-block;
|
width: 140px;
|
font-size: 16px;
|
color: #666666;
|
line-height: 40px;
|
}
|
&:deep(.el-input) {
|
width: 576px;
|
}
|
}
|
.delete {
|
color: #00873c;
|
background-color: #fff;
|
border: 1px solid #00873c;
|
border-radius: 4px;
|
margin-right: 20px;
|
}
|
}
|
</style>
|
