BlockChainH5/pages/user/address/list.vue

<template>
	<view class="Address-list" v-if="loaded">
		<!-- 收货地址列表 -->
		<view class="addr-list" v-for="(item,index) in addressLists" v-if="addressLists.length>0" @tap="select(index)"
			:key="index">
			<view class="addr-name-phone"> <span class="name">{{item.name}}</span> <span class="phone">
					{{item.mobile}}</span>
			</view>
			<view class="addr-des">{{item.full_address}}</view>
			<view class="moren-edit-del">
				<view class="moren" :style="item.default?'':'color:#cacaca'+'!important;'"
					@click.stop="moren(item.default+','+item.address_id)">
					<uni-icons class="uni-icons" type="checkbox-filled" size="20"
						:color="item.default?'#8b64fd':'#cacaca'">
					</uni-icons>
					默认
				</view>
				<view class="edit-del">
					<view class="edit" @click.stop="edit(item.address_id)">
						<uni-icons class="uni-icons" type="compose" size="16" color="#666"></uni-icons>编辑
					</view>
					<view class="del" @click.stop="del(item.address_id)" v-if="type != 'selectSite'">
						<uni-icons type="trash" size="16" color="#666"></uni-icons> 删除
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 底部新增按钮 -->
			<uni-fab horizontal="left" vertical="bottom" :pattern='pattern' @fabClick="fabClick" />
		</view>
		<!-- 没有收货地址 -->
		<no-list v-if="addressLists.length === 0" name='no-addr' txt="您还没有收货地址哦~" />
		<!-- 请求中... -->
		<!-- <view>{{loading?'请求中....':'请求结束'}}</view> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		addresses,
		addAddresses,
		getAddresses,
		delAddresses,
		defaultAddresses,
		editAddresses
	} from '@/apis/interfaces/address'
	export default {
		data() {
			return {
				addressLists: [],
				type: '', //用于分辨是否从订单页面-选择地址  有值为订单页面来源 === 1  是返回上一页时候处理上一页参数
				loaded: false, //默认页面不可渲染，请求接口后可以渲染
				pattern: {
					buttonColor: '#8b64fd'
				}
			};
		},

		onLoad(e) {
			if (e.type !== undefined) {
				this.type = e.type
			}
		},

		//  下拉刷新
		onPullDownRefresh() {
			// this.getAddr()

		},
		onShow() {
			this.getAddr()
		},
		methods: {
			// 新增
			fabClick() {
				uni.navigateTo({
					url: '/pages/user/address/create'
				})
			},
			// 修改
			edit(id) {
				uni.navigateTo({
					url: '/pages/user/address/create?id=' + id
				})
			},
			// 删除
			del(id) {
				let that = this
				uni.showModal({
					title: '是否确认删除',
					success: (res) => {
						if (res.confirm) {
							delAddresses(id).then(res => {
								that.$refs.uToast.show({
									title: res,
									type: 'primary',
									duration: 3000
								})
								that.getAddr()
							}).catch(err => {
								that.$refs.uToast.show({
									title: err.message,
									type: 'primary',
									duration: 3000
								})
							})
						}
					}
				})
			},
			// 默认
			moren(data) {
				let defaultT = data.split(',')[0]
				let id = data.split(',')[1]
				if (defaultT === 'false') {
					defaultAddresses(id).then(res => {
						this.$refs.uToast.show({
							title: res,
							type: 'primary',
							duration: 3000
						})
						setTimeout(res => {
							this.getAddr()
						}, 500)
					}).catch(err => {
						this.$refs.uToast.show({
							title: err.message,
							type: 'primary',
							duration: 3000
						})
					})
				}
			},
			//  获取列表
			getAddr() {
				this.loaded = true
				addresses().then(res => {
					this.addressLists = res
					uni.stopPullDownRefresh()
					if (this.type == '1') {
						if (this.addressLists.length === 0) {
							let pages = getCurrentPages();
							let nowPage = pages[pages.length - 1];
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.address = '';
						} else {
							let pages = getCurrentPages();
							let nowPage = pages[pages.length - 1];
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.address = res[0];
						}
					}
					uni.setStorageSync('refresh', false)
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'primary',
						duration: 3000
					})
				})
			},

			// 选择地址跳转
			select(index) {
				if (this.type == '1') {
					let pages = getCurrentPages();
					let nowPage = pages[pages.length - 1];
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.address = this.addressLists[index];
					uni.navigateBack({
						delta: 1
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Address-list {
		width: 100%;
		min-height: 100vh;
		padding: $padding;
		box-sizing: border-box;
		// margin-bottom: 150rpx;

		.no-more-addr {
			font-size: $title-size*0.9;
			color: $text-price;

			uni-icons {
				padding-right: $padding*0.5;
			}
		}

		// 地址列表
		.addr-list {
			box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.1);
			padding: $padding $padding*1.5;
			background-color: #fff;
			margin-bottom: $margin;
			border-radius: $radius*0.5;

			.name {
				color: #353535;
				font-weight: bold;
				font-size: $title-size*1.1;
			}

			.phone {
				margin-left: $margin*2;
			}

			.addr-des {
				padding: $padding*.9 0 $padding*1 0;
				font-size: $title-size-m;
				border-bottom: solid #f8f8f8 1rpx;
				color: $text-color;
			}

			.moren-edit-del {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding-top: $padding;

				.moren,
				.edit-del {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					font-size: $title-size*0.9;
					color: $text-price;

					.uni-icons {
						padding-right: $padding*0.5;
					}

					.edit {
						padding-right: $padding*1.5;
						color: $text-color;
					}

					.del {
						color: $text-color;
					}
				}

			}
		}

		// 新增地址
		.besure {
			background-color: $text-price;
			color: #fff;
			text-align: center;
			margin: $margin*1.5;
			border-radius: $radius;
			padding: $padding*1.3;
			position: absolute;
		}
	}
</style>