You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
268 lines
10 KiB
268 lines
10 KiB
<template>
|
|
<view class="address-popup-box">
|
|
<view style="height: 120rpx;line-height: 120rpx;font-size: 36rpx;font-weight: 700;text-align: center;position:relative;">
|
|
收货地址
|
|
<uni-icons type="closeempty" size="24" @tap="$emit('close')" style="position:absolute;right:30rpx;top:36rpx;"></uni-icons>
|
|
</view>
|
|
<view style="padding-bottom: 140rpx;">
|
|
<view v-for="(item, index) in addressList" :key="index" @tap="selectAddress(item)"
|
|
style="margin-bottom: 20rpx;display: flex;padding: 20rpx 40rpx 40rpx;background: #eee;border-radius: 20rpx;">
|
|
<view style="flex: 1;">
|
|
<view style="height: 70rpx;line-height: 70rpx;display: flex;align-items: center;">
|
|
<text v-if="item.isDefault == 1" style="font-size: 20rpx;color: white;background: red;padding: 4rpx 12rpx;border-radius: 8rpx;margin-right: 10rpx;line-height:1;">默认</text>
|
|
<text style="font-size: 30rpx;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: 20rpx;">
|
|
<view @tap.stop="openEdit(item)"
|
|
style="width: 88rpx;height: 50rpx;line-height: 50rpx;text-align: center;border: 1px solid #777;border-radius: 50rpx;color: #777;">
|
|
编辑
|
|
</view>
|
|
<view @tap.stop="deleteAddress(item.id)"
|
|
style="width: 88rpx;height: 50rpx;line-height: 50rpx;text-align: center;border: 1px solid #e43d33;border-radius: 50rpx;color: #e43d33;">
|
|
删除
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="addressList.length === 0" style="text-align: center;color: #999;margin-top: 100rpx;">
|
|
暂无收货地址
|
|
</view>
|
|
</view>
|
|
<view class="bottom-btn" @tap="openAdd">
|
|
新增地址
|
|
</view>
|
|
<!-- 新增地址弹出层 -->
|
|
<uni-popup ref="addBookPopup" background-color="#fff">
|
|
<view class="book-popup-content" :style="{'height':isComboxFocused?'1200px':'auto'}" style="padding-top:40rpx;">
|
|
<view style="height: 80rpx;line-height: 80rpx;font-size: 36rpx;font-weight: 700;text-align: center;">
|
|
{{addressForm.id ? '编辑地址' : '填写地址'}}
|
|
</view>
|
|
<view style="margin-bottom: 20rpx;background: #eee;border-radius: 20rpx;">
|
|
<uni-combox :candidates="areaTitleList" placeholder="请搜索选择楼座区域" :border="false" v-model="areaTitleInput" emptyTips="未找到匹配的楼座" @focus="isComboxFocused = true" @blur="isComboxFocused = false"></uni-combox>
|
|
</view>
|
|
<view style="margin-bottom: 20rpx;display: flex;padding: 20rpx;background: #eee;border-radius: 20rpx;">
|
|
<input :disabled="isComboxFocused" type="number" v-model="addressForm.floor" placeholder="请填写所在楼层(仅限整数)" style="width: 100%;" />
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 42rpx; line-height: 42rpx;">
|
|
<text v-if="addressForm.floor">{{addressForm.floor}}</text>
|
|
<text v-else style="color: grey;">请填写所在楼层(仅限整数)</text>
|
|
</view>
|
|
</view>
|
|
<view style="margin-bottom: 20rpx;display: flex;padding: 20rpx;background: #eee;border-radius: 20rpx;">
|
|
<input :disabled="isComboxFocused" type="text" v-model="addressForm.roomNum" placeholder="请填写门牌号或所在机构科室" style="width: 100%;" />
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 42rpx; line-height: 42rpx;">
|
|
<text v-if="addressForm.roomNum">{{addressForm.roomNum}}</text>
|
|
<text v-else style="color: grey;">请填写门牌号或所在机构科室</text>
|
|
</view>
|
|
</view>
|
|
<view style="margin-bottom: 20rpx;display: flex;padding: 20rpx;background: #eee;border-radius: 20rpx;">
|
|
<input :disabled="isComboxFocused" type="text" v-model="addressForm.receiverName" placeholder="收货人名字" style="width: 100%;" />
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 42rpx; line-height: 42rpx;">
|
|
<text v-if="addressForm.receiverName">{{addressForm.receiverName}}</text>
|
|
<text v-else style="color: grey;">收货人名字</text>
|
|
</view>
|
|
</view>
|
|
<view style="margin-bottom: 20rpx;display: flex;padding: 20rpx;background: #eee;border-radius: 20rpx;">
|
|
<input :disabled="isComboxFocused" type="number" maxlength="11" v-model="addressForm.receiverPhone" placeholder="联系电话" style="width: 100%;" />
|
|
<view v-show="isComboxFocused" style="width: 100%; height: 42rpx; line-height: 42rpx;">
|
|
<text v-if="addressForm.receiverPhone">{{addressForm.receiverPhone}}</text>
|
|
<text v-else style="color: grey;">联系电话</text>
|
|
</view>
|
|
</view>
|
|
<view style="margin-bottom: 20rpx;display: flex;padding: 20rpx;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: 40rpx;">
|
|
确认
|
|
</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.$emit('shopAreaList',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" scoped>
|
|
.address-popup-box {
|
|
height: 1200rpx;
|
|
}
|
|
|
|
.bottom-btn {
|
|
width: 90%;
|
|
height: 100rpx;
|
|
background: linear-gradient(90deg, #e3ff96, #a6ffea);
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
line-height: 100rpx;
|
|
text-align: center;
|
|
border-radius: 100rpx;
|
|
margin: 20rpx auto;
|
|
position: fixed;
|
|
bottom: 20rpx;
|
|
}
|
|
.book-popup-content{
|
|
height: auto;
|
|
}
|
|
|
|
</style>
|
|
<style>
|
|
.uni-combox{
|
|
border: 0 !important;
|
|
padding: 10px 10px !important;
|
|
background: #eee;
|
|
}
|
|
</style>
|