activitys-uniapp/pages/address/address.vue

<!-- 地址列表 -->
<template>
	<view class="address-wrap" :style="vuex_skin">
		<view v-if="addressList" class="address-list" v-for="address in addressList" :key="address.id"
			@tap="useAddress(address)">
			<view class="top u-flex">
				<text class="name">{{ address.consignee }}</text>
				<text class="phone ">{{ address.phone }}</text>
				<text class="tag" v-if="address.isDefault">默认</text>
			</view>
			<view class="detail">
				{{ address.provinceName }}{{ address.cityName }}{{ address.areaName }}{{ address.address }}</view>
			<button class="u-reset-button set-btn" @tap.stop="edit(address.id)">编辑</button>
		</view>

		<view class="empty" v-else>
			<image src="@/static/icon/empty.png" mode="widthFix"></image>
			<text>暂无地址</text>
		</view>

		<view class="foot_box-wrap safe-area-inset-bottom">
			<view class="foot_box u-flex u-row-between safe-area-inset-bottom">
				<!-- 微信小程序和微信H5 -->
				<button class="u-reset-button sync-wxaddress u-m-20 u-flex u-row-center u-col-center"
					@tap="getWXaddress">
					<text class="u-iconfont uicon-weixin-fill u-p-r-10" style="color:#09bb07;font-size: 40rpx;"></text>
					导入微信地址
				</button>
				<button class="u-reset-button add-btn u-m-20"
					@tap="$jump('/pages/address/add')">添加新的收货地址</button>
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		components: {},
		data() {
			return {
				addressList: [],
			};
		},
		computed: {},
		onLoad() {
			_this = this
		},
		onShow() {
			this.getAddressList();
		},
		methods: {
			// 选中
			useAddress(addressData) {
				let params = {
					addressData
				}
				this.$util.backWithParams(params)

				uni.$emit('ADDRESS', addressData)
			},
			//编辑
			edit(id) {
				uni.navigateTo({
					url: "./add?addressId=" + id
				})
			},
			// 微信导入
			getWXaddress() {
				uni.chooseAddress({
					success: res => {
						_this.$jump('/pages/address/add?wxAddress=' + JSON.stringify(res))
					},
					fail: err => {
						console.log('%cuni.chooseAddress,调用失败', 'color:green;background:yellow');
					}
				});
			},
			getAddressList() {
				let params = {
					userId: this.vuex_userId
				}
				this.$api.address.list(params).then(res => {
					this.addressList = res.data.data.records
				})
			}
		}
	};
</script>

<style lang="scss">
	.empty {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 360rpx;
		flex-direction: column;

		image {
			width: 220rpx;
			height: 170rpx;
		}

		text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #c1c1c1;
		}
	}

	.address-list {
		padding: 40rpx;
		position: relative;
		background: #fff;
		margin-bottom: 20rpx;

		.name {
			font-size: 30rpx;
			font-weight: 600;
			margin-bottom: 10rpx;
		}

		.phone {
			font-size: 30rpx;
			margin: 0 20rpx;
		}

		.tag {
			background: rgba(233, 191, 113, 0.2);
			border-radius: 6rpx;
			padding: 0 16rpx;
			line-height: 38rpx;
			color: var(--bgColor);
			font-size: 22rpx;
		}

		.detail {
			margin-top: 25rpx;
			width: 543rpx;
			font-size: 26rpx;

			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			line-height: 40rpx;
		}

		.set-btn {
			background: none;
			position: absolute;
			font-size: 26rpx;
			color: var(--bgColor);
			top: 40rpx;
			right: 40rpx;
		}
	}

	// 底部按钮
	.foot_box-wrap {
		height: 140rpx;
		width: 100%;
	}

	.foot_box {
		padding: 10rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid rgba(#ccc, 0.2);

		.sync-wxaddress {
			flex: 1;
			line-height: 80rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 40rpx;
			box-shadow: 0 0 1rpx 6rpx rgba(#ccc, 0.2);
		}

		.add-btn {
			line-height: 80rpx;
			flex: 1;
			background: var(--bgColor);
			color:  rgba(255, 255, 255, 1);
			border-radius: 40rpx;
		}
	}
</style>