wxapp_shuibei/pages/users/user_address_list/index.vue

<template>
	<view>
		<z-paging ref="paging" class="list-container" v-model="addressList" @query="queryList" loading-more-no-more-text="我也是有底线的">
			<template #empty>
				<uni-empty-view />
			</template>
			<view class="address-management">

				<view class="item" v-for="(item, index) in addressList" :key="index">
					<view class="address" @click="goOrder(item.id)">
						<view class="consignee">{{ item.province }}{{ item.city }}{{ item.district
							}}{{ item.detail }}</view>
						<view class="">{{ item.realName
              }}<text class="phone">{{ item.phone }}</text></view>

					</view>
					<view class="operation acea-row row-between-wrapper">
						<view @click="radioChange(item,index)" class="radio" :class="{active:item.isDefault}">
							<image v-if="item.isDefault" src="@/static/images/select-active@2x.png" mode=""></image>
							<image v-else src="@/static/images/select@2x.png" mode=""></image>
							<view class="">设为默认</view>
						</view>

						<view class="operation-right">
							<view @click="editAddressFn(item.id)">编辑</view>
							<view @click="delAddressFn(index)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<template #bottom>
				<view class="footer acea-row row-between-wrapper">
					<!-- #ifdef MP-->
					<view class="addressBnt" @click="addAddress"><text class="iconfont icon-tianjiadizhi"></text>添加新地址
					</view>
					<view class="addressBnt wxbnt" @click="getWxAddress"><text class="iconfont icon-weixin2"></text>导入微信地址</view>
					<!-- #endif -->
					<!-- #ifdef H5-->
				
					<view class="addressBnt" :class="wechat.isWeixin() ? '' : 'on'" @click="addAddress"><text
							class="iconfont icon-tianjiadizhi"></text>添加新地址</view>
					<view v-if="wechat.isWeixin()" class="addressBnt wxbnt" @click="getAddress"><text
							class="iconfont icon-weixin2"></text>导入微信地址</view>
						<!-- #endif -->
				
					<!-- #ifdef APP-->
					<view class="addressBnt on" @click="addAddress"><text class="iconfont icon-tianjiadizhi"></text>添加新地址
					</view>
					<!-- #endif -->
				</view>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from "vue";
	import {
		useAppStore
	} from "@/stores/app.js";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		getAddressList,
		setAddressDefault,
		delAddress,
		editAddress,
	} from "@/api/user.js";
	import {
		toLogin
	} from "@/libs/login.js";
	import {
		useToast
	} from "@/hooks/useToast.js";
	import wechat from "@/libs/wechat.js";
	const {
		Toast
	} = useToast();
	const appStore = useAppStore();

	const addressList = ref([]);
	const cartId = ref("");
	const pinkId = ref(0);
	const couponId = ref(0);
	const loading = ref(false);
	const loadend = ref(false);
	const loadTitle = ref("加载更多");
	const page = ref(1);
	const limit = ref(20);
	const isAuto = ref(false);
	const isShowAuth = ref(false);
	const bargain = ref(false);
	const combination = ref(false);
	const secKill = ref(false);
	const preOrderNo = ref(0);
	const isFlashSale = ref(false); // 是否为秒杀订单
	const isGroupBuy = ref(false); // 是否为团购订单

	watch(
		() => appStore.isLogin,
		(newV) => {
			if (newV) {
				getUserAddress(true);
			}
		}
	);

	function getUserAddress(isPage) {
		getAddressListFn(isPage);
	}

	onLoad((options) => {
		if (appStore.isLogin) {
			preOrderNo.value = options.preOrderNo || 0;
			isFlashSale.value = options.isFlashSale === "1"; // 接收秒杀订单标识
			isGroupBuy.value = options.isGroupBuy === "1"; // 接收团购订单标识
			getAddressListFn(true);
		} else {
			toLogin();
		}
	});

	onShow(() => {
		getAddressListFn(true);
	});

	function onLoadFun() {
		getAddressListFn();
	}

	function authColse(e) {
		isShowAuth.value = e;
	}

	// 导入微信地址（小程序）
	function getWxAddress() {
		uni.authorize({
			scope: "scope.address",
			success: function() {
				uni.chooseAddress({
					success: function(res) {
						let addressP = {
							province: res.provinceName,
							city: res.cityName,
							district: res.countyName,
							cityId: 0,
						};
						editAddress({
								address: addressP,
								isDefault: true,
								realName: res.userName,
								postCode: res.postalCode,
								phone: res.telNumber,
								detail: res.detailInfo,
								id: 0,
							})
							.then(() => {
								Toast({
										title: "添加成功",
										icon: "success",
									},
									() => {
										getAddressListFn(true);
									}
								);
							})
							.catch((err) => {
								return Toast({
									title: err,
								});
							});
					},
					fail: function(res) {
						if (res.errMsg == "chooseAddress:cancel")
							return Toast({
								title: "取消选择",
							});
					},
				});
			},
			fail: function() {
				uni.showModal({
					title: "您已拒绝导入微信地址权限",
					content: "是否进入权限管理，调整授权？",
					success(res) {
						if (res.confirm) {
							uni.openSetting({
								success: function(res) {
									console.log(res.authSetting);
								},
							});
						} else if (res.cancel) {
							return Toast({
								title: "已取消！",
							});
						}
					},
				});
			},
		});
	}

	// 导入微信地址（公众号）
	function getAddress() {
		wechat.openAddress().then((userInfo) => {
			editAddress({
					realName: userInfo.userName,
					phone: userInfo.telNumber,
					address: {
						province: userInfo.provinceName,
						city: userInfo.cityName,
						district: userInfo.countryName,
						cityId: 0,
					},
					detail: userInfo.detailInfo,
					postCode: userInfo.postalCode,
					isDefault: true,
				})
				.then(() => {
					Toast({
							title: "添加成功",
							icon: "success",
						},
						() => {
							getAddressListFn(true);
						}
					);
				})
				.catch((err) => {
					Toast({
						title: err || "添加失败",
					});
				});
		});
	}


	const paging = ref(null)
	const queryList = async (pageNo, pageSize) => {
		try {
			let res = await getAddressList({
				page: pageNo,
				limit: pageSize
			})
			paging.value.complete(res.data.list);
		} catch (err) {
			paging.value.complete(false);
		}
	}


	function getAddressListFn(isPage) {
		if (isPage) {
			loadend.value = false;
			page.value = 1;
			addressList.value = [];
		}
		if (loading.value || loadend.value) return;
		loading.value = true;
		loadTitle.value = "";
		getAddressList({
				page: page.value,
				limit: limit.value,
			})
			.then((res) => {
				let list = res.data.list;
				let isLoadend = list.length < limit.value;
				addressList.value = [...addressList.value, ...list];
				loadend.value = isLoadend;
				loadTitle.value = isLoadend ? "我也是有底线的" : "加载更多";
				page.value = page.value + 1;
				loading.value = false;
			})
			.catch(() => {
				loading.value = false;
				loadTitle.value = "加载更多";
			});
	}

	// 设置默认地址
	function radioChange(item, index) {

		let address = addressList.value[index];
		if (address == undefined) return Toast({
			title: "您设置的默认地址不存在!"
		});
		setAddressDefault(address.id)
			.then(() => {
				addressList.value.forEach((item, i) => {
					item.isDefault = i === index;
				});
				Toast({
						title: "设置成功",
						icon: "success",
					},
					() => {
						addressList.value = [...addressList.value];
					}
				);
			})
			.catch((err) => {
				return Toast({
					title: err,
				});
			});
	}

	// 编辑地址
	function editAddressFn(id) {
		const cart = cartId.value;
		const pink = pinkId.value;
		const coupon = couponId.value;
		cartId.value = "";
		pinkId.value = "";
		couponId.value = "";
		const flashSaleParam = isFlashSale.value ? "&isFlashSale=1" : "";
		uni.navigateTo({
			url: `/pages/users/user_address/index?id=${id}&cartId=${cart}&pinkId=${pink}&couponId=${coupon}&secKill=${secKill.value}&combination=${combination.value}&bargain=${bargain.value}&preOrderNo=${preOrderNo.value}${flashSaleParam}`,
		});
	}

	// 删除地址
	function delAddressFn(index) {
		let address = addressList.value[index];
		if (address == undefined) return Toast({
			title: "您删除的地址不存在!"
		});
		delAddress(address.id)
			.then(() => {
				Toast({
						title: "删除成功",
						icon: "success",
					},
					() => {
						addressList.value.splice(index, 1);
						addressList.value = [...addressList.value];
					}
				);
			})
			.catch((err) => {
				return Toast({
					title: err,
				});
			});
	}

	// 新增地址
	function addAddress() {
		cartId.value = "";
		pinkId.value = "";
		couponId.value = "";
		const flashSaleParam = isFlashSale.value ? "&isFlashSale=1" : "";
		const groupBuyParam = isGroupBuy.value ? "&isGroupBuy=1" : "";
		uni.navigateTo({
			url: `/pages/users/user_address/index?preOrderNo=${preOrderNo.value}${flashSaleParam}${groupBuyParam}`,
		});
	}

	function goOrder(id) {
		if (preOrderNo.value) {
			// 根据订单类型跳转到不同的确认页面
			if (isFlashSale.value) {
				// 秒杀订单跳转到秒杀确认页面
				uni.redirectTo({
					url: `/pages/users/utils/flashSale/confirmOrder?is_address=1&preOrderNo=${preOrderNo.value}&addressId=${id}`,
				});
			} else if (isGroupBuy.value) {
				// 团购支付返回到支付详情页
				uni.redirectTo({
					url: `/pages/group_buying/paydetail?is_address=1&preOrderNo=${preOrderNo.value}&addressId=${id}`,
				});
			} else {
				// 普通订单跳转到普通确认页面
				uni.redirectTo({
					url: `/pages/users/order_confirm/index?is_address=1&preOrderNo=${preOrderNo.value}&addressId=${id}`,
				});
			}
		}
	}

	onReachBottom(() => {
		getAddressListFn();
	});
</script>
<style>
	page {
		background: #F9F7F0;
	}
</style>
<style lang="scss" scoped>
	.list-container{
		background-color: #f9f7f0;
		height: 100%;
	}
	.address-management {
		padding: 16rpx 16rpx 0;
	}


	.address-management .item {
		background-color: #FFFFFF;
		padding: 16rpx;
		border-radius: 16rpx;
		margin-bottom: 16rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.address-management .item .address {
		font-size: 28rpx;
		color: #333333;
	}

	.address-management .item .address .consignee {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.address-management .item .address .phone {
		margin-left: 32rpx;
	}

	.address-management .item .operation-right {
		display: flex;
		align-items: center;

		view {
			font-size: 28rpx;
			color: #333333;
			width: 120rpx;
			text-align: center;
			line-height: 60rpx;
			background: rgba(248, 192, 8, 0.1);
			border-radius: 8rpx;

			&:last-child {
				background: #F8C008;
				margin-left: 16rpx;
			}
		}
	}

	.address-management .item .operation .radio {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 16rpx;
		}
	}

	.address-management .item .operation .radio.active {
		color: #F8C008;
	}

	.address-management .item .operation .iconfont {
		color: #2c2c2c;
		font-size: 35rpx;
		vertical-align: -2rpx;
		margin-right: 10rpx;
	}

	.address-management .item .operation .iconfont.icon-shanchu {
		margin-left: 35rpx;
		font-size: 38rpx;
	}

	.footer {
		width: 100%;
		background-color: #FFFFFF;
		padding: 22rpx 32rpx 56rpx;
	}

	.footer .addressBnt {
		line-height: 76rpx;
		width: 330rpx;
		border-radius: 16rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		background: #F8C008;
	}

	.footer .addressBnt.on {
		width: 690rpx;
		margin: 0 auto;
	}
	
	.footer .addressBnt.wxbnt {
	  background-color: #fe960f;
	}

	.footer .addressBnt .iconfont {
		font-size: 35rpx;
		margin-right: 8rpx;
		vertical-align: -1rpx;
	}
</style>