junzitang/pagesT/address/address.vue

<template>
	<view class="content" :class="['qn-page-' + theme]">
		<!-- 空白页 -->
		<Aempty text="您还没有收货地址哦～～" src="https://onlineimg.qianniao.vip/address.png" v-if="addressList.length === 0"></Aempty>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="get-WX-Address clearfix" @click="chooseWxAddress">
			<text class="ibonfont ibonweixin"></text>
			<text>获取微信收货地址</text>
			<text class="ibonfont ibonjinru float_right"></text>
		</view> -->
		<!-- #endif -->
		<view @scrolltolower="lower" v-for="(item, index) in addressList" :key="index" class="address-item">
			<view class="list-item-in clearfix" @click="checkAddress(item)">
				<view class="wrapper float_left">
					<view class="u-box">
						<text>收货人：</text>
						<text class="name">{{ item.name }}</text>
						<text class="mobile">{{ item.mobile }}</text>
					</view>
					<view class="address-box ">
						<text class="address">收货地址：{{ item.area.provinceName }}{{ item.area.cityName }}{{ item.area.districtName }}{{ item.address }}</text>
					</view>
				</view>
			</view>
			<view class="ad-bottom-view clearfix">
				<view class="float_left" @click="editAddress(item)">
					<text class="icon-del ibonfont" :class="[item.defaultStatus===5?'ibonxuanze1 primary-color':'ibonweixuanze']"></text>
					设为默认
				</view>
				<view class="float_right">
					<view style="margin-right: 40rpx;display: inline-block" @click="addAddress(item.id)">
						<text class="ibonfont ibonbianji icon-del"></text>
						编辑
					</view>
					<view @click="delData(item.id)" style="display: inline-block">
						<text class="ibonfont ibonshanchu icon-del"></text>
						删除
					</view>
				</view>
			</view>
		</view>
		<u-loadmore margin-top="20" v-if="addressList.length" :status="loading_status" />
		<button class="add-btn primary-bg" @click="addAddress('add')">新增地址</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageTotal: 0,
			pageSize: 10,
			page: 1,
			loading_status: 'loadmore',
			source: 0,
			isLoding: false,
			addressList: [],
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}
			]
		};
	},
	onLoad(option) {
		this.source = option.source;
	},
	onShow() {
		this.getAllShippingAddress();
	},
	onPullDownRefresh() {
		if (this.pageTotal / this.pageSize > this.page) {
			this.page += 1;
			this.getAllShippingAddress();
		}
	},
	methods: {
		chooseWxAddress() {
			uni.chooseAddress({
				success(res) {
					console.log(res);
				}
			});
		},
		// 设为默认
		editAddress(item) {
			this.$u.api
				.updateShippingAddress(item.id, {
					name: item.name,
					mobile: item.mobile,
					provinceCode: item.provinceCode,
					cityCode: item.cityCode,
					districtCode: item.districtCode,
					address: item.address,
					defaultStatus: 5
				})
				.then(res => {
					this.getAllShippingAddress();
				});
		},
		// 点击按钮
		delData(id) {
			uni.showModal({
				title: '提示',
				content: '你确定删除地址',
				success: () => {
					this.$u.api.deleteShippingAddress(id).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.getAllShippingAddress();
					});
				}
			});
		},
		//选择地址
		checkAddress(item) {
			if (parseInt(this.source) === 1) {
				this.$api.prePage().addressData = item;
				uni.navigateBack();
			}
		},
		addAddress(type, item) {
			uni.navigateTo({
				url: `/pagesT/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
			});
		},
		// 获取客户地址列表 getAllShippingAddress
		getAllShippingAddress() {
			this.loading_status = 'loading';
			this.$u.api
				.getAllShippingAddress({
					page: this.page,
					pageSize: 10
				})
				.then(data => {
					uni.stopPullDownRefresh();
					if (this.page === 1) {
						this.addressList = data.data;
					} else {
						this.addressList = this.addressList.concat(data.data);
					}
					const address = data.data.find(item => item.defaultStatus === 5) || this.addressList[0];
					const addressData = {
						provinceCode: address.provinceCode,
						cityCode: address.cityCode,
						districtCode: address.districtCode,
						provinceName: address.area.provinceName,
						cityName: address.area.cityName,
						districtName: address.area.districtName
					};
					this.$store.commit('commit_nowAddress', addressData);
					this.pageTotal = data.pageTotal;
					this.loading_status =  this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
				});
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: 120upx;
	background: #fafafa;
}

.content {
	position: relative;
}
.no-select {
	display: inline-block;
	width: 34upx;
	height: 34upx;
	border-radius: 100%;
	border: 1px solid #999;
}
.list {
	display: flex;
	align-items: center;
	background: #fff;
	position: relative;
}

.address-box {
	font-size: 26upx;
	color: #666;
	font-weight: 300;
}

.u-box {
	font-size: 28upx;
	color: $font-color-dark;
	padding-bottom: 10upx;

	.name {
		margin-right: 30upx;
	}
}

.address-item {
	width: 702upx;
	margin: 20upx auto;
	background: #ffffff;
	padding: 28upx 24upx;
	border-radius: 8upx;
	box-shadow: 0px 0px 20upx 0px #eee;
	/*margin-bottom: 20upx;*/

	.ad-bottom-view {
		font-size: 24upx;
		font-weight: 300;
		padding-top: 20upx;

		.icon-del {
			width: 26upx;
			height: 26upx;
			font-size: 26upx;
			line-height: 26upx;
			margin-right: 10upx;
			transform: translateY(4upx);
		}
		.ibonfont{
			font-size: 28rpx;
		}
	}

	.list-item-in {
		padding-bottom: 20upx;
		border-bottom: 1upx solid #f5f5f5;
	}
}

.icon-bianji {
	display: flex;
	align-items: center;
	height: 80upx;
	font-size: 40upx;
	color: $font-color-light;
	padding-left: 30upx;
}

.add-btn {
	position: fixed;
	left: 30upx;
	right: 30upx;
	bottom: 16upx;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	font-size: 32upx;
	color: #fff;
	// background: $base-btn-bg;
	// box-shadow: 0px 2upx 14upx 0px rgba(116, 190, 66, 0.4);
	border-radius: 10upx;
}

.add-btn:after {
	border: 0 none;
}
.get-WX-Address {
	line-height: 88upx;
	height: 88upx;
	width: 702upx;
	box-shadow: 0px 0px 20rpx 0px #eee;
	margin: 20upx auto 0;
	background-color: #ffffff;
	padding: 0 24rpx;
	border-radius: 8upx;
	.ibonweixin {
		font-size: 40upx;
		color: #04be02;
		margin-right: 10upx;
	}
	.ibonjinru {
		color: #999;
		font-size: 26upx;
	}
}
</style>