|
|
|
|
<template>
|
|
|
|
|
<view class="address-popup-box">
|
|
|
|
|
<view style="height: 60px;line-height: 60px;font-size: 18px;font-weight: 700;text-align: center;position:relative;">
|
|
|
|
|
收货地址
|
|
|
|
|
<uni-icons type="closeempty" size="24" @tap="$emit('close')" style="position:absolute;right:15px;top:18px;"></uni-icons>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="padding-bottom: 70px;">
|
|
|
|
|
<view v-for="(item, index) in addressList" :key="index" @tap="selectAddress(item)"
|
|
|
|
|
style="margin-bottom: 10px;display: flex;padding: 10px 20px 20px;background: #eee;border-radius: 10px;">
|
|
|
|
|
<view style="flex: 1;">
|
|
|
|
|
<view style="height: 35px;line-height: 35px;display: flex;align-items: center;">
|
|
|
|
|
<text v-if="item.isDefault == 1" style="font-size: 10px;color: white;background: red;padding: 2px 6px;border-radius: 4px;margin-right: 5px;line-height:1;">默认</text>
|
|
|
|
|
<text style="font-size: 15px;font-weight: 700;">{{item.areaName || ''}}{{item.floor ? item.floor + '层' : ''}}{{item.roomNum || ''}}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="color: #777;">
|
|
|
|
|
{{item.receiverName}} {{item.receiverPhone}}
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="display: flex; align-items: center; gap: 10px;">
|
|
|
|
|
<view @tap.stop="openEdit(item)"
|
|
|
|
|
style="width: 44px;height: 25px;line-height: 25px;text-align: center;border: 1px solid #777;border-radius: 25px;color: #777;">
|
|
|
|
|
编辑
|
|
|
|
|
</view>
|
|
|
|
|
<view @tap.stop="deleteAddress(item.id)"
|
|
|
|
|
style="width: 44px;height: 25px;line-height: 25px;text-align: center;border: 1px solid #e43d33;border-radius: 25px;color: #e43d33;">
|
|
|
|
|
删除
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<view v-if="addressList.length === 0" style="text-align: center;color: #999;margin-top: 50px;">
|
|
|
|
|
暂无收货地址
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="bottom-btn" @tap="openAdd">
|
|
|
|
|
新增地址
|
|
|
|
|
</view>
|
|
|
|
|
<!-- 新增地址弹出层 -->
|
|
|
|
|
<uni-popup ref="addBookPopup" background-color="#fff">
|
|
|
|
|
<view class="book-popup-content" style="height: 400px;padding-top:20px;">
|
|
|
|
|
<view style="height: 40px;line-height: 40px;font-size: 18px;font-weight: 700;text-align: center;">
|
|
|
|
|
{{addressForm.id ? '编辑地址' : '填写地址'}}
|
|
|
|
|
</view>
|
|
|
|
|
<view style="margin-bottom: 10px;background: #fff;border-radius: 10px;">
|
|
|
|
|
<uni-combox :candidates="areaTitleList" placeholder="请搜索选择楼座区域" v-model="areaTitleInput" emptyTips="未找到匹配的楼座" @focus="isComboxFocused = true" @blur="isComboxFocused = false"></uni-combox>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="margin-bottom: 10px;display: flex;padding: 10px;background: #eee;border-radius: 10px;">
|
|
|
|
|
<input v-show="!isComboxFocused" type="number" v-model="addressForm.floor" placeholder="请填写所在楼层(仅限整数)" style="width: 100%;" />
|
|
|
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 21px; line-height: 21px;">
|
|
|
|
|
<text v-if="addressForm.floor">{{addressForm.floor}}</text>
|
|
|
|
|
<text v-else style="color: grey;">请填写所在楼层(仅限整数)</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="margin-bottom: 10px;display: flex;padding: 10px;background: #eee;border-radius: 10px;">
|
|
|
|
|
<input v-show="!isComboxFocused" type="text" v-model="addressForm.roomNum" placeholder="请填写门牌号或所在机构科室" style="width: 100%;" />
|
|
|
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 21px; line-height: 21px;">
|
|
|
|
|
<text v-if="addressForm.roomNum">{{addressForm.roomNum}}</text>
|
|
|
|
|
<text v-else style="color: grey;">请填写门牌号或所在机构科室</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="margin-bottom: 10px;display: flex;padding: 10px;background: #eee;border-radius: 10px;">
|
|
|
|
|
<input v-show="!isComboxFocused" type="text" v-model="addressForm.receiverName" placeholder="收货人名字" style="width: 100%;" />
|
|
|
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 21px; line-height: 21px;">
|
|
|
|
|
<text v-if="addressForm.receiverName">{{addressForm.receiverName}}</text>
|
|
|
|
|
<text v-else style="color: grey;">收货人名字</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="margin-bottom: 10px;display: flex;padding: 10px;background: #eee;border-radius: 10px;">
|
|
|
|
|
<input v-show="!isComboxFocused" type="number" maxlength="11" v-model="addressForm.receiverPhone" placeholder="联系电话" style="width: 100%;" />
|
|
|
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 21px; line-height: 21px;">
|
|
|
|
|
<text v-if="addressForm.receiverPhone">{{addressForm.receiverPhone}}</text>
|
|
|
|
|
<text v-else style="color: grey;">联系电话</text>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
<view style="margin-bottom: 10px;display: flex;padding: 10px;justify-content: space-between;align-items: center;">
|
|
|
|
|
<text>设为默认地址</text>
|
|
|
|
|
<switch :checked="addressForm.isDefault === 1" @change="e => addressForm.isDefault = e.detail.value ? 1 : 0" color="#a6ffea" />
|
|
|
|
|
</view>
|
|
|
|
|
<view class="bottom-btn" @tap="submitAddress" style="position: relative; margin-top: 20px;">
|
|
|
|
|
确认
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</uni-popup>
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isComboxFocused: false,
|
|
|
|
|
addressList: [],
|
|
|
|
|
areaList: [],
|
|
|
|
|
areaTitleList: [],
|
|
|
|
|
areaTitleInput: '',
|
|
|
|
|
addressForm: {
|
|
|
|
|
id: '',
|
|
|
|
|
areaId: '',
|
|
|
|
|
areaName: '',
|
|
|
|
|
floor: '',
|
|
|
|
|
roomNum: '',
|
|
|
|
|
receiverName: '',
|
|
|
|
|
receiverPhone: '',
|
|
|
|
|
isDefault: 0
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.getAddressList();
|
|
|
|
|
this.getAreaList();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getAddressList() {
|
|
|
|
|
let that = this;
|
|
|
|
|
that.tui.request("/app/userAddress/list", "GET", {userId:uni.getStorageSync('id')}, false, true).then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
that.addressList = res.result || [];
|
|
|
|
|
that.syncCache();
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
syncCache() {
|
|
|
|
|
let cached = uni.getStorageSync('selectedAddress');
|
|
|
|
|
let nextSelect = null;
|
|
|
|
|
if (this.addressList.length > 0) {
|
|
|
|
|
if (cached && cached.id) {
|
|
|
|
|
// Look for the cached address in the fresh list to obtain updated fields if any
|
|
|
|
|
nextSelect = this.addressList.find(a => a.id === cached.id);
|
|
|
|
|
}
|
|
|
|
|
if (!nextSelect) {
|
|
|
|
|
// If cached address was deleted or none existed, fallback to default or first
|
|
|
|
|
nextSelect = this.addressList.find(a => a.isDefault == 1) || this.addressList[0];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (nextSelect) {
|
|
|
|
|
uni.setStorageSync('selectedAddress', nextSelect);
|
|
|
|
|
this.$emit('syncAddress', nextSelect);
|
|
|
|
|
} else {
|
|
|
|
|
uni.removeStorageSync('selectedAddress');
|
|
|
|
|
this.$emit('syncAddress', null);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getAreaList() {
|
|
|
|
|
let that = this;
|
|
|
|
|
that.tui.request("/app/shopArea/getByParentId/"+JSON.parse(uni.getStorageSync('area')).id, "GET", {}, false, true).then((res) => {
|
|
|
|
|
if (res.code == 200 && res.result) {
|
|
|
|
|
that.areaList = res.result;
|
|
|
|
|
that.areaTitleList = res.result.map(item => item.title);
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
selectAddress(item) {
|
|
|
|
|
this.$emit('selectAddress', item);
|
|
|
|
|
},
|
|
|
|
|
openAdd() {
|
|
|
|
|
this.addressForm = {
|
|
|
|
|
id: '',
|
|
|
|
|
areaId: '',
|
|
|
|
|
areaName: '',
|
|
|
|
|
floor: '',
|
|
|
|
|
roomNum: '',
|
|
|
|
|
receiverName: '',
|
|
|
|
|
receiverPhone: '',
|
|
|
|
|
isDefault: 0
|
|
|
|
|
};
|
|
|
|
|
this.areaTitleInput = '';
|
|
|
|
|
this.$refs.addBookPopup.open('bottom');
|
|
|
|
|
},
|
|
|
|
|
openEdit(item) {
|
|
|
|
|
this.addressForm = {
|
|
|
|
|
id: item.id,
|
|
|
|
|
areaId: item.areaId,
|
|
|
|
|
areaName: item.areaName || '',
|
|
|
|
|
floor: item.floor || '',
|
|
|
|
|
roomNum: item.roomNum,
|
|
|
|
|
receiverName: item.receiverName,
|
|
|
|
|
receiverPhone: item.receiverPhone,
|
|
|
|
|
isDefault: item.isDefault || 0
|
|
|
|
|
};
|
|
|
|
|
let match = this.areaList.find(a => a.id === item.areaId);
|
|
|
|
|
this.areaTitleInput = match ? match.title : (item.areaName || '');
|
|
|
|
|
this.$refs.addBookPopup.open('bottom');
|
|
|
|
|
},
|
|
|
|
|
submitAddress() {
|
|
|
|
|
if(this.areaTitleInput) {
|
|
|
|
|
let match = this.areaList.find(a => a.title === this.areaTitleInput);
|
|
|
|
|
if (match) {
|
|
|
|
|
this.addressForm.areaId = match.id;
|
|
|
|
|
this.addressForm.areaName = match.title;
|
|
|
|
|
} else {
|
|
|
|
|
return this.tui.toast('请搜索并选择有效的楼座');
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if(!this.addressForm.areaId) return this.tui.toast('请搜索并选择楼座');
|
|
|
|
|
if(!this.addressForm.floor) return this.tui.toast('请填写所在楼层');
|
|
|
|
|
if(!/^-?\d+$/.test(this.addressForm.floor)) return this.tui.toast('楼层必须为整数');
|
|
|
|
|
if(!this.addressForm.roomNum) return this.tui.toast('请填写详细地址门牌号');
|
|
|
|
|
if(!this.addressForm.receiverName) return this.tui.toast('请填写收件人');
|
|
|
|
|
if(!this.addressForm.receiverPhone) return this.tui.toast('请填写联系电话');
|
|
|
|
|
if(!/^1[3-9]\d{9}$/.test(this.addressForm.receiverPhone)) return this.tui.toast('请输入有效的11位手机号码');
|
|
|
|
|
|
|
|
|
|
let url = this.addressForm.id ? "/app/userAddress/edit" : "/app/userAddress/save";
|
|
|
|
|
let that = this;
|
|
|
|
|
this.addressForm.userId = uni.getStorageSync('id')
|
|
|
|
|
that.tui.request(url, "POST", this.addressForm, false, true).then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
that.tui.toast("保存成功");
|
|
|
|
|
that.$refs.addBookPopup.close();
|
|
|
|
|
that.getAddressList();
|
|
|
|
|
} else {
|
|
|
|
|
that.tui.toast(res.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
},
|
|
|
|
|
deleteAddress(id) {
|
|
|
|
|
let that = this;
|
|
|
|
|
uni.showModal({
|
|
|
|
|
title: '提示',
|
|
|
|
|
content: '确定要删除该地址吗？',
|
|
|
|
|
success: function (res) {
|
|
|
|
|
if (res.confirm) {
|
|
|
|
|
that.tui.request("/app/userAddress/delById", "POST", {id: id}, false, true).then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
that.tui.toast("删除成功");
|
|
|
|
|
that.getAddressList();
|
|
|
|
|
} else {
|
|
|
|
|
that.tui.toast(res.message);
|
|
|
|
|
}
|
|
|
|
|
}).catch(() => {});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.address-popup-box {
|
|
|
|
|
height: 600px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom-btn {
|
|
|
|
|
width: 90%;
|
|
|
|
|
height: 50px;
|
|
|
|
|
background: linear-gradient(90deg, #e3ff96, #a6ffea);
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
font-weight: 700;
|
|
|
|
|
line-height: 50px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-radius: 50px;
|
|
|
|
|
margin: 10px auto;
|
|
|
|
|
position: fixed;
|
|
|
|
|
bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
