wx-qhb/pageC/addressManagement/addressManagement.vue

<template>
	<view>
		<view class="top-tab">
			<view :class="{ select: manage == 1 }" @click="switchTab(1)">
				{{ i18n.inland }}
			</view>
			<view :class="{ select: manage == 0 }" @click="switchTab(0)">
				{{ i18n.international }}
			</view>
		</view>
		<view class="content" v-if="addressList.length != 0">
			<addressVue @deleteAddress="deleteAddress" @setDefault="setDefault" @toDetail="toDetail"
				@goBack="goBack(item)" v-for="item in addressList" :itemInfo="item" :key="item.id" />
		</view>
		<view class="empty" v-else> 空空如也~ </view>
		<view class="footer" v-if="manage == 1">
			<!-- <button class="wx">{{ i18n.wx }}</button> -->
			<button class="add-international" @click="toAddRess('/pageC/addEditAddress/addEditAddress?ifadd=1')">
				{{ i18n.add }}
			</button>
		</view>
		<view class="footer" v-else>
			<button class="add-international" @click="toAddRess('/pageC/internationalAddress/internationalAddress?')">
				{{ i18n.add }}
			</button>
		</view>
	</view>
</template>

<script>
	import addressVue from "./component/address.vue";
	export default {
		components: {
			addressVue,
		},
		data() {
			return {
				manage: 1,
				addressList: [],
				type: "", //判断在哪个页面进来
			};
		},
		onLoad(options) {
			console.log(options);
			if (options.tabs) {
				this.manage = options.tabs;
			}
			this.type = options.type;

		},
		computed: {
			i18n() {
				return this.$t("index");
			},
		},
		methods: {
			goBack(item) {
				//从账号设置进入该页面，则不允许返回上一页面
				if (this.type == "setup") return;
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit("getadd", item);
				uni.$emit("isRefresh", this.index);
				uni.navigateBack({
					delta: 1,
				});
			},

			switchTab(num) {
				this.manage = num;
				this.getAddressList(num);
			},
			//设置默认地址
			setDefault(value) {
				uni.$u.http
					.post(`/api/address/default/${value.id}`)
					.then((res) => {
						this.getAddressList(this.manage);
					})
					.catch(() => {});
			},
			//跳转地址详情页
			toDetail(id) {
				if (this.manage) {
					uni.navigateTo({
						url: `/pageC/addEditAddress/addEditAddress?id=${id}`,
					});
				} else {
					uni.navigateTo({
						url: `/pageC/internationalAddress/internationalAddress?id=${id}`,
					});
				}
			},
			//删除地址
			deleteAddress(value) {
				uni.$u.http.delete(`/api/address/${value.id}`).then((res) => {
					this.getAddressList(this.manage);
				});
			},
			toAddRess(url) {
				uni.navigateTo({
					url,
				});
			},
			getAddressList(num) {
				uni.$u.http
					.get(
						`/api/address?is_page=0&page=1&limit=10&is_domestic=${num}&is_default=`
					)
					.then((res) => {
						this.addressList = res;
					});
			},
		},
		onShow() {
			// this.getAddressList(this.manage);
		},
		mounted() {
			this.getAddressList(this.manage);
			// this.getAddressList(1);
			uni.setNavigationBarTitle({
				title: this.i18n.address,
			});
		},
	};
</script>

<style scoped lang="scss">
	.top-tab {
		display: flex;
		font-size: 32rpx;
		color: rgba(34, 34, 34, 0.8);
		justify-content: space-around;
		background-color: #fff;
		height: 80rpx;
		align-items: center;

		.select {
			position: relative;
			font-weight: 600;
		}

		.select::before {
			content: "";
			display: block;
			width: 50%;
			height: 4rpx;
			background-color: #f83224;
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.content {
		padding: 20rpx 24rpx;
		padding-bottom: 200rpx;
	}

	.empty {
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: rgba(51, 51, 51, 0.7);
		margin-top: 200rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		width: 750rpx;
		padding: 20rpx 0 66rpx;

		.wx {
			width: 338rpx;
			background-color: #fff;
			border-radius: 40rpx;
			height: 80rpx;
			font-size: 32rpx;
			color: #222;
			padding: 0;
			margin: 0;
			border: 2rpx solid #979797;
		}

		.add {
			width: 338rpx;
			background-color: #f83224;
			border-radius: 40rpx;
			height: 80rpx;
			font-size: 32rpx;
			color: #fff;
			padding: 0;
			margin: 0;
		}

		.add-international {
			width: 702rpx;
			background-color: #f83224;
			border-radius: 40rpx;
			height: 80rpx;
			font-size: 32rpx;
			color: #fff;
			margin: 0 auto;
		}
	}
</style>