CommunityApp/pagesM/pages/address_list.vue

<template>
	<view class="dt-page">
		<view class="container">
			<view class="no-data-wrap" v-if="dataList.length <= 0">
				<image class="addr-nodata-img" src="http://139.9.103.171:1888/img/image/noData.png"></image>
				<view class="addr-nodata-tip">暂无可用地址哦</view>
			</view>
			<view v-for="(item, idx) in dataList" :key="idx" class="item-list" @tap="addressItemClick(item)">
				<view style="display: flex;align-items: center;">
					<view class="addr-name-phone">{{ item.consignee }} {{ item.phone }}</view>
					<view v-if="item.isAgent" style="
					margin-top: 33upx;
					font-size: 18upx;
					margin-left: 10upx;
					border-radius: 10upx;
					padding: 10upx;
					height: 18upx;
					line-height: 18upx;
					background-color: red;
					color: white;">代理</view>
				</view>
				<view class="addr-des">{{ item.areaName }}{{ item.address }}</view>
				<view class="item-bottom">
					<view @tap.native.stop="setDefaultAddress(item, idx)" class="bottom-left">
						<image v-if="item.isDefault" class="addr-def-icon" src="/static/mail/select.png" mode="widthFix"></image>
						<image v-else class="addr-def-icon" src="http://139.9.103.171:1888/img/image/no_selected_icon.png" mode="widthFix"></image>
						<text class="addr-def-text">默认地址</text>
					</view>
					<view class="bottom-right">
						<image @tap.native.stop="editAdd(item)" src="http://139.9.103.171:1888/img/image/addr_edit.png" class="addr-edit-img"></image>

						<image @tap.native.stop="deleteAdd(item, idx)" src="http://139.9.103.171:1888/img/image/delete.png" class="addr-del-img"></image>
					</view>
				</view>
			</view>
			<view class="addr-list-fix" :style="footSafe"></view>
		</view>

		<view>
			<view class="addr-add-wrap" :style="footSafe">
				<view class="btnLayout" @tap="getNewAdd">
					<text class="addr-add-tip">获取微信收货地址</text>
				</view>
				<view class="btnLayout" @tap="addNewAdd">
					<!-- <image class="addr-add-icon" src="http://139.9.103.171:1888/img/image/addr_add.png" mode="widthFix"></image> -->
					<text class="addr-add-tip">新增收货地址</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			flag:false,
			
			
			dataList: [],
			isFromOrder: null,
			memberId: 0
		};
	},
	computed: {
		footSafe() {
			return `padding-bottom:${this.safeAreaBottom}px`;
		}
	},
	methods: {
		editAdd(item) {
			var objStr = JSON.stringify(item);
			uni.navigateTo({
				url: '/pagesM/pages/address_edit?addNew=0' + '&item=' + objStr
			});
		},

		addNewAdd() {
			uni.navigateTo({
				url: '/pagesM/pages/address_edit?addNew=1'
			});
		},

		getNewAdd(){
			let _this = this;
			wx.chooseAddress({
				success(res) {
					if (res.errMsg == 'chooseAddress:ok') {
						_this.getAreaList(res);
					}
				}
			});
		},
		
		async setDefaultAddress(item, idx) {
			if (item.isDefault) return;
			let areaId = item.areaIds[item.areaIds.length - 1];
			let res = await this.$api.addAddress({
				id: item.id,
				consignee: item.consignee,
				phone: item.phone,
				address: item.address,
				isDefault: true,
				areaId: areaId
			});
			this.$dialog.success('修改成功');
			this.isNoMore = false;
			this.pageIndex = 0;
			this.dataList.length = 0;
			this.getAddressList();
		},

		addressItemClick(item) {
			if (this.loadOptions.isFromOrder === '1') {
				console.log(86, 'select');
				let lastPage = this.$util.getPageCtx(1).$vm;
				lastPage.isCalculate = true;
				lastPage.receiverAddress = item;
				uni.navigateBack({ delta: 1 });
			}else if (this.loadOptions.isFromOrder === '2') {
				console.log(86, 'select');
				if(item.isAgent){
					let lastPage = this.$util.getPageCtx(1).$vm;
					lastPage.isCalculate = true;
					lastPage.receiverAddress = item;
					uni.navigateBack({ delta: 1 });
				}else{
					this.$dialog.toast('该地址不是代理收货地址，请先新增代理收货地址');
				}
				
			}
		},

		// 获取地址列表
		async getAddressList() {
			if (this.isPull) {
				this.isNoMore = false;
				this.pageIndex = 0;
				this.dataList.length = 0;
			}
			// let resp = await this.$api.queryAddrList({
			// 	pageNo: this.pageIndex,
			// 	pageSize: this.pageSize
			// });
			let resp = await this.$api.queryAddrList({
				pageNo: 0,
				pageSize: 1000
			});

			this.dataList = this.getDataList(resp);
			// this.dataList = this.dataList.concat(list);
		},

		deleteAdd(item, index) {
			this.$dialog.confirm({
				titie: '温馨提示',
				content: '是否要删除？',
				success: res => {
					if (res.confirm) {
						this.deleteAddAction(item, index);
					}
				}
			});
		},

		async deleteAddAction(item, index) {
			let resp = await this.$api.deleteAddress({
				id: item.id
			});
			this.dataList.splice(index, 1);
			this.$dialog.success('删除成功');
		},
		onLoadPage(options) {
			this.flag=true
			wx.hideShareMenu();
			if (this.isLoad) {
				this.memberId = this.$auth.getMemberId();
			}
			this.getAddressList();
		},
		async getAreaList(res){
			let addressList = await this.$api.areaList();
			if(addressList != null && addressList.length > 0){
				let areaId = 0;
				let address = res.detailInfo;
				let isOk1 = false, isOk2 = false, isOk3 = false;
				for (let item of addressList) {
					if(item.name == res.provinceName){
						areaId = item.id;
						isOk1 = true;
						if(item.addresses != null && item.addresses.length > 0){
							for (let item2 of item.addresses) {
								if(item2.name == res.cityName){
									areaId = item2.id;
									isOk2 = true;
									if(item2.addresses != null && item2.addresses.length > 0){
										for (let item3 of item2.addresses) {
											if(item3.name == res.countyName){
												areaId = item3.id;
												isOk3 = true;
												break;
											}
										}
										if(!isOk3) address = res.countyName + address;
									}
									break;
								}
							}
							if(!isOk2) address = res.cityName + res.countyName + address;
						}
						break;
					}
				}
				if(!isOk1) address = res.provinceName + res.cityName + res.countyName + address;
				let params = {
				  _isShowLoading:true,
				  _loadingText:'添加中...',
				  consignee: res.userName,
				  phone: res.telNumber,
				  address: address,
				  isDefault: false,
				  areaId: areaId
				}
				let isExit = false;
				if(this.dataList != null && this.dataList.length > 0){
					for (let item of this.dataList) {
						if(item.address == params.address && item.consignee == params.consignee && item.phone == params.phone){
							if(item.areaIds != null && item.areaIds.length > 0){
								for (let areaId of item.areaIds) {
									if(areaId == params.areaId){
										isExit = true;
										break;
									}
								}
							}
							break;
						}
					}
				}
				if(!isExit){
					let resp = await this.$api.addAddress(params);
					this.dataList = [];
					this.getAddressList();
				}
			}
		}
	},
	onShow() {
		//第一次进入页面不通过onshow方法获取地址列表
		if (this.flag) {
			this.flag=false
		}else{
			this.getAddressList()
		}
		this.onShowPage();
	},
	onReachBottom() {
		this.onReachBottomPage();
	}
};
</script>

<style lang="scss" scoped>
.dt-page {
	min-height: 100vh;
	background-color: #f2f2f2;
	.container {
		font-size: 28upx;
		color: rgb(51, 51, 51);

		.item-list {
			display: flex;
			flex-direction: column;
			margin-top: 20upx;
			background: white;
			.addr-name-phone {
				margin-top: 33upx;
				margin-left: 30upx;
			}
			.addr-des {
				margin-top: 30upx;
				margin-left: 30upx;
				color: #666;
			}

			.item-bottom {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 28upx;
				border: 2upx solid rgb(238, 238, 238);
				.bottom-left {
					display: flex;
					flex-direction: row;
					align-items: center;
					.addr-def-icon {
						margin: 0 14upx 0 30upx;
						width: 34upx;
						height: 34upx;
					}
					.addr-def-text {
						color: #666666;
						padding-left: 20upx;
						padding-top: 24upx;
						padding-bottom: 23upx;
						font-size: 24upx;
					}
				}
				.bottom-right {
					display: flex;
					flex-direction: row;
					align-items: center;
					.addr-edit-img {
						width: 33upx;
						height: 32upx;
						padding: 20upx 25upx;
						// padding-right: 50upx;
					}
					.addr-del-img {
						width: 33upx;
						height: 32upx;
						padding: 20upx 25upx;
						padding-right: 40upx;
					}
				}
			}
		}
		.addr-list-fix {
			width: 100%;
			height: 98upx;
		}
	}

	.addr-add-wrap {
		height: 120upx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-top: 2upx solid rgb(238, 238, 238);
		.btnLayout{
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10upx 10upx;
			border: 1px solid $base;
			border-radius: 10upx;
			flex: 1;
			height: 70%;
			.addr-add-tip {
				color: $base;
				font-size: 30upx;
				padding-left: 10upx;
			}
			.addr-add-icon {
				width: 40upx;
				height: 40upx;
			}
		}
	}
	.no-data-wrap {
		width: 100%;
		padding-top: 302upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.addr-nodata-img {
			width: 215upx;
			height: 159upx;
		}
		.addr-nodata-tip {
			color: #999;
			font-size: 30upx;
			padding-top: 22upx;
		}
	}
}
</style>