215 lines
7.5 KiB
Vue
215 lines
7.5 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 顶部操作条 -->
|
||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||
<block slot="backText">返回</block>
|
||
<block slot="content">编辑地址</block>
|
||
</cu-custom>
|
||
<!-- 地址信息form -->
|
||
<view class="bg-white margin-top-sm">
|
||
<form @submit="submit">
|
||
<view class="cu-form-group">
|
||
<view class="title">联系人</view>
|
||
<input name="name" v-model="formData.name"></input>
|
||
</view>
|
||
<view class="cu-form-group">
|
||
<view class="title">手机号码</view>
|
||
<input name="phone" v-model="formData.phone"></input>
|
||
</view>
|
||
<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
|
||
<view class="cu-form-group">
|
||
<view class="title">地址选择</view>
|
||
<picker :mode="'multiSelector'" @change="regionChange" @columnchange="regionColChange" :value="multiIndex" :range-key="'areaName'" :range="areaList">
|
||
<view class="picker">
|
||
{{formData.area && formData.area.length ? formData.area[0].areaName + '-' + formData.area[1].areaName + '-' + formData.area[2].areaName + '-' + formData.area[3].areaName : '请选择'}}
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="cu-form-group">
|
||
<view class="title">详细地址</view>
|
||
<input name="address" v-model="formData.address"></input>
|
||
</view>
|
||
<view class="cu-form-group margin-top margin-bottom-with-bar">
|
||
<view class="title">默认地址</view>
|
||
<!-- 0.普通地址, 1.默认地址 -->
|
||
<switch class="main-color radius" @change="isDefaultChange" :class="formData.isDefault?'checked':''"
|
||
:checked="formData.isDefault?true:false" name="isDefault" :value="formData.isDefault" v-model="formData.isDefault"></switch>
|
||
</view>
|
||
<!-- 底部操作栏 -->
|
||
<view class="cu-bar tabbar border shop fixed-bottom-bar">
|
||
<button class="cu-btn bg-main-color long-btn margin-lr-sm shadow-blur" form-type="submit">保存</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
areaList: [],
|
||
multiIndex: [0, 0, 0],
|
||
formData: {
|
||
},
|
||
mode: 1 // 1为新增，0为修改
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
let params = JSON.parse(decodeURIComponent(options.params));
|
||
this.mode = params ? params.mode : this.mode;
|
||
console.log(this.mode)
|
||
if (this.mode === 0) {
|
||
// 修改
|
||
this.fillForm(params.addressInfo);
|
||
}
|
||
this.loadData();
|
||
},
|
||
methods: {
|
||
async loadData() {
|
||
// this.areaList = await this.$api.data('areaList');
|
||
this.loadAreaList();
|
||
},
|
||
fillForm(addressInfo) {
|
||
this.formData = addressInfo && Object.keys(addressInfo).length > 0 ? addressInfo : this.formData;
|
||
},
|
||
async loadAreaList(idArr) {
|
||
let areaList = await this.$request.areaListByStep();
|
||
areaList = areaList.data;
|
||
let col1Code = idArr ? idArr[0] : areaList[0].areaCode;
|
||
let subAreaList = await this.$request.areaListByStep({ parentCode: col1Code });
|
||
subAreaList = subAreaList.data;
|
||
let col2Code = idArr ? idArr[1] : subAreaList[0].areaCode;
|
||
let subSubAreaList = await this.$request.areaListByStep({ parentCode: col2Code });
|
||
subSubAreaList = subSubAreaList.data;
|
||
let col3Code = idArr ? idArr[2] : subSubAreaList[0].areaCode;
|
||
let subSub2AreaList = await this.$request.areaListByStep({ parentCode: col3Code });
|
||
subSub2AreaList = subSub2AreaList.data;
|
||
this.areaList.push(areaList);
|
||
this.areaList.push(subAreaList);
|
||
this.areaList.push(subSubAreaList);
|
||
this.areaList.push(subSub2AreaList);
|
||
},
|
||
regionChange(e) {
|
||
this.multiIndex = e.detail.value;
|
||
let chosenArea = [];
|
||
for(let i = 0; i < this.areaList.length; i++) {
|
||
chosenArea.push(this.areaList[i][this.multiIndex[i]]);
|
||
}
|
||
this.formData.area = chosenArea;
|
||
this.formData.provinceId = chosenArea[0].areaId;
|
||
this.formData.cityId = chosenArea[1].areaId;
|
||
this.formData.countryId = chosenArea[2].areaId;
|
||
this.formData.streetId = chosenArea[3].areaId;
|
||
},
|
||
async regionColChange(e) {
|
||
let colObj = e.detail;
|
||
if (colObj.column == 0) {
|
||
let subSubAreaList = [], subSub2AreaList = [];
|
||
// 通过一级查询二级，通过二级查三级
|
||
let subAreaList = await this.$request.areaListByStep({parentCode: this.areaList[0][colObj.value].areaCode});
|
||
subAreaList = subAreaList.data;
|
||
if (subAreaList && subAreaList.length) {
|
||
subSubAreaList = await this.$request.areaListByStep({parentCode: subAreaList[0].areaCode});
|
||
subSubAreaList = subSubAreaList.data;
|
||
if(subSubAreaList && subSubAreaList.length) {
|
||
subSub2AreaList = await this.$request.areaListByStep({parentCode: subSubAreaList[0].areaCode});
|
||
subSub2AreaList = subSub2AreaList.data;
|
||
}
|
||
}
|
||
this.areaList[1] = subAreaList
|
||
this.areaList[2] = subSubAreaList
|
||
this.areaList[3] = subSub2AreaList
|
||
this.multiIndex = [colObj.value, 0, 0, 0];
|
||
} else if (colObj.column == 1) {
|
||
let subSub2AreaList = []
|
||
// 通过二级查三级
|
||
let subSubAreaList = await this.$request.areaListByStep({parentCode: this.areaList[1][colObj.value].areaCode});
|
||
subSubAreaList = subSubAreaList.data;
|
||
if (subSubAreaList && subSubAreaList.length) {
|
||
subSub2AreaList = await this.$request.areaListByStep({parentCode: subSubAreaList[0].areaCode});
|
||
subSub2AreaList = subSub2AreaList.data;
|
||
}
|
||
this.areaList[2] = subSubAreaList
|
||
this.areaList[3] = subSub2AreaList
|
||
this.multiIndex = [this.multiIndex[0], colObj.value, 0, 0];
|
||
} else if (colObj.column == 2) {
|
||
// 通过二级查三级
|
||
let subSubAreaList = await this.$request.areaListByStep({parentCode: this.areaList[2][colObj.value].areaCode});
|
||
subSubAreaList = subSubAreaList.data;
|
||
this.areaList[3] = subSubAreaList;
|
||
this.multiIndex = [this.multiIndex[0], this.multiIndex[1], colObj.value, 0];
|
||
}
|
||
},
|
||
isDefaultChange(e) {
|
||
this.formData.isDefault = e.detail.value;
|
||
},
|
||
validateForm(addressInfo) {
|
||
let valid = Boolean(addressInfo.name) &&
|
||
Boolean(addressInfo.phone) &&
|
||
Boolean(addressInfo.address) &&
|
||
Boolean(addressInfo.area) && addressInfo.area.length > 0
|
||
|
||
if (!valid) {
|
||
uni.showToast({
|
||
title: '请填写完整信息',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
} else if (!this.$validate.validContactNum(addressInfo.phone)) {
|
||
valid = false;
|
||
uni.showToast({
|
||
title: '联系号码格式错误',
|
||
icon: 'none',
|
||
mask: true
|
||
})
|
||
}
|
||
return valid;
|
||
},
|
||
async submit(e) {
|
||
const confirmFormData = Object.assign({}, this.formData, e.detail.value)
|
||
let formValid = this.validateForm(confirmFormData);
|
||
if (formValid) {
|
||
let isSuccess = false;
|
||
if (this.mode === 1) {
|
||
let res = await this.$request.addAddressList({
|
||
...this.formData,
|
||
customerId: this.$request.getCurUserInfo().customerId,
|
||
isDefault: this.formData.isDefault ? 1 : 0
|
||
});
|
||
if (res.code === 0) {
|
||
isSuccess = true;
|
||
}
|
||
} else if (this.mode === 0) {
|
||
let res = await this.$request.editAddressList({
|
||
...this.formData,
|
||
customerId: this.$request.getCurUserInfo().customerId,
|
||
isDefault: this.formData.isDefault ? 1 : 0
|
||
});
|
||
if (res.code === 0) {
|
||
isSuccess = true;
|
||
}
|
||
}
|
||
if (isSuccess) {
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
mask: true
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '保存失败',
|
||
icon: 'error',
|
||
mask: true
|
||
})
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
</style>
|