yangdaxia/pages/set/shopList.vue

<template>
	<view class="content b-t">
		<view class="list" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
			<view class="wrapper">
				<view class="address-box">
					<text class="name">{{ item.name }}</text>
					<text class="mobile">{{ item.phone }}</text>
				</view>
				<view class="u-box">
					<view class="address">{{ item.address }}</view>
					<view class="address">{{ item.detailed_address }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { shopList } from '@/api/user.js';
export default {
	data() {
		return {
			source: 0,
			addressList: [], //显示的地址数据
			value: '', //保存查询值
			addressListAll: [] //保存地址数据
		};
	},
	// #ifdef APP-PLUS || H5
	onNavigationBarButtonTap(e) {
		if (e.text === '搜索') {
			this.searchAddressList();
		}
	},
	// 监听原生标题栏搜索输入框输入内容变化事件
	onNavigationBarSearchInputChanged(e) {
		this.value = e.text;
	},
	// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发
	onNavigationBarSearchInputConfirmed() {
		this.searchAddressList();
	},
	// #endif
	onLoad(option) {
		console.log(this.addressListAll);
		this.shopList();
	},
	methods: {
		// 获取地址列表
		shopList(){
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			shopList({}).then((e) => {
				uni.hideLoading()
				this.addressListAll = this.addressList= e.data.list;
			}).catch((e) => {
				console.log(e);
			});
		},
		// 地址查询功能
		searchAddressList() {
			let obj = this;
			obj.addressList = obj.addressListAll.filter(e => {
				// 判断客户是否有输入值并且能查询到
				if (e.name.indexOf(obj.value) >= 0 && obj.value) {
					return true;
				} else if (obj.value.length == 0) {
					return true;
				}
			});
			console.log(obj.addressList);
		},
		//选择地址
		checkAddress(item) {
			// 设置商品页面地址
			this.$api.prePage().shopAddress = item;
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
page {
	padding-bottom: 120rpx;
	padding-top: 20rpx;
}
.content {
	position: relative;
}
.list {
	align-items: center;
	padding: 20rpx 30rpx;
	background: #fff;
	margin: 20rpx;
	margin-top: 0;
	.buttom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 10rpx;
		.checkbox {
			font-size: 44rpx;
			line-height: 1;
			padding: 4rpx;
			color: $font-color-disabled;
			background: #fff;
			border-radius: 50px;
		}
		.checkbox.checked {
			color: $base-color;
		}
		.default-buttom {
			display: flex;
			align-items: center;
		}
		.operation {
			display: flex;
			align-items: center;
			.blank {
				width: 30rpx;
			}
		}
		.text {
			padding-left: 10rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
}
.wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	// border-bottom: 1px solid #f0f0f0;
	// padding-bottom: 20rpx;
}
.address-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	.address {
		font-size: $font-base + 2rpx;
		color: $font-color-dark;
	}
	.mobile {
		font-size: $font-base;
		color: rgba(51, 51, 51, 1);
	}
}
.u-box {
	font-size: $font-base;
	color: $font-color-light;
	margin-top: 16rpx;
	.name {
		margin-right: 30rpx;
	}
}
.icon-bianji {
	display: flex;
	align-items: center;
	height: 80rpx;
	font-size: 40rpx;
	color: $font-color-light;
	padding-left: 30rpx;
}

.add-btn {
	position: fixed;
	left: 30rpx;
	right: 30rpx;
	bottom: 16rpx;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10rpx;
}
</style>