|
|
|
@ -1,49 +1,82 @@ |
|
|
|
<template> |
|
|
|
<view class="address-popup-box"> |
|
|
|
<view style="height: 60px;line-height: 60px;font-size: 18px;font-weight: 700;text-align: center;"> |
|
|
|
<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="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;"> |
|
|
|
<text style="font-size: 15px;font-weight: 700;">沁园春第三食堂A20窗口</text> |
|
|
|
<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="color: #777;"> |
|
|
|
刘柳柳 18827381928 |
|
|
|
<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 |
|
|
|
style="margin-top: 15px;width: 44px;height: 25px;line-height: 25px;text-align: center;border: 1px solid #777;border-radius: 25px;color: #777;"> |
|
|
|
编辑 |
|
|
|
|
|
|
|
<view v-if="addressList.length === 0" style="text-align: center;color: #999;margin-top: 50px;"> |
|
|
|
暂无收货地址 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bottom-btn" @tap="$refs.addBookPopup.open('bottom')"> |
|
|
|
<view class="bottom-btn" @tap="openAdd"> |
|
|
|
新增地址 |
|
|
|
</view> |
|
|
|
<!-- 新增地址弹出层 --> |
|
|
|
<uni-popup ref="addBookPopup" background-color="#fff"> |
|
|
|
<view class="book-popup-content" style="height: 335px;"> |
|
|
|
<view style="height: 60px;line-height: 60px;font-size: 18px;font-weight: 700;text-align: center;"> |
|
|
|
填写地址 |
|
|
|
<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: #eee;border-radius: 10px;overflow: hidden;"> |
|
|
|
<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select> |
|
|
|
<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 type="text" placeholder="请填写详细地址" /> |
|
|
|
<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 type="text" placeholder="收货人名字" /> |
|
|
|
<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 type="text" placeholder="联系电话" /> |
|
|
|
<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 class="bottom-btn"> |
|
|
|
<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> |
|
|
|
@ -55,23 +88,148 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
selected: 'phone', |
|
|
|
range: [{ |
|
|
|
"value": 0, |
|
|
|
"text": "篮球运动" |
|
|
|
}, { |
|
|
|
"value": 1, |
|
|
|
"text": "足球运动", |
|
|
|
}, { |
|
|
|
"value": 2, |
|
|
|
"text": "游泳健身运动" |
|
|
|
}] |
|
|
|
isComboxFocused: false, |
|
|
|
addressList: [], |
|
|
|
areaList: [], |
|
|
|
areaTitleList: [], |
|
|
|
areaTitleInput: '', |
|
|
|
addressForm: { |
|
|
|
id: '', |
|
|
|
areaId: '', |
|
|
|
areaName: '', |
|
|
|
floor: '', |
|
|
|
roomNum: '', |
|
|
|
receiverName: '', |
|
|
|
receiverPhone: '', |
|
|
|
isDefault: 0 |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.getAddressList(); |
|
|
|
this.getAreaList(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
openAddressBook() { |
|
|
|
this.$refs.bookPopup.open('bottom') |
|
|
|
|
|
|
|
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(() => {}); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
