school_uni/package1/address/addressList.vue

<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.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>