waterDelivery/pages/order/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 flex ">
				<image class="logo margin-r-20" :src="item.image" mode="scaleToFill"></image>
				<view class="list-content position-relative">
					<view class="address-box flex">
						<view class="name clamp">{{ item.name }}</view>
						<view class="range flex" v-if="item.distance<1000">
							<text>
							距离{{ item.distance }}M
							</text>
							</view>
						<view class="range flex" v-else>
							<image class="address-icon" src="../../static/icon/shopAddress.png" mode="scaleToFill"></image>
							<text>
								
							距离{{ item.range }}KM
							</text>
							</view>
					</view>
					<view class="u-box">
						<view class="text flex-start">
							<image class="icon" src="../../static/icon/shopIcon2.png" mode="widthFix"></image>
							<text>
								{{ item.phone }}
							</text>
						</view>
						<view class="text flex-start">
							<image class="icon" src="../../static/icon/shopIcon1.png" mode="widthFix"></image>
							<text>
								{{ item.address + item.detailed_address }}
							</text>
						</view>
					</view>
					<view class="time">
						营业时间：{{item.day_time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		storeList
	} from '@/api/order.js';
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				source: 0,
				addressList: [], //显示的地址数据
				value: '', //保存查询值
				addressListAll: [], //保存地址数据
				longitude: '', //经度
				latitude: '', //未读
				time:''//保存定时获取对象
			};
		},
		// #ifdef APP-PLUS || H5
		onNavigationBarButtonTap(e) {
			if (e.text === '搜索') {
				this.searchAddressList();
			}
		},
		// 监听原生标题栏搜索输入框输入内容变化事件
		onNavigationBarSearchInputChanged(e) {
			this.value = e.text;
		},
		// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发
		onNavigationBarSearchInputConfirmed() {
			this.searchAddressList();
		},
		// #endif
		onLoad(option) {
			const that = this;
			that.longitude = uni.getStorageSync('CACHE_LONGITUDE');
			that.latitude = uni.getStorageSync('CACHE_LATITUDE');
			if (!that.longitude) {
				uni.showModal({
					title: '获取定位',
					content: '为了更好的提供最近的门店需要获取您的定位信息',
					cancelText: '暂不授权',
					confirmText: '立即授权',
					success: res => {
						if (res.cancel) {
							that.getStoreList();
						}
						if (res.confirm) {
							util.$L.getLocation();
							that.time = setInterval(()=>{
								console.log(uni.getStorageSync('CACHE_LONGITUDE'),'获取到金纬度');
								
								if(uni.getStorageSync('CACHE_LONGITUDE')){
									that.longitude = uni.getStorageSync('CACHE_LONGITUDE');
									that.latitude = uni.getStorageSync('CACHE_LATITUDE');
									that.getStoreList();
									clearInterval(that.time)
								}
							},1000)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			} else {
				// 获取当前位置
				that.getStoreList();
			}
		},
		methods: {

			// 获取列表
			getStoreList() {
				storeList({
					longitude:this.longitude,
					latitude:this.latitude,
				}).then((res) => {
					this.addressListAll = this.addressList = res.data.list;
				})
			},
			// 地址查询功能
			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">
	.content {
		position: relative;
		padding-top: 30rpx;
	}

	.list {
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		margin: 0 $page-row-spacing;
		margin-bottom: $page-row-spacing;
		border-radius: 20rpx;

		.wrapper {
			.logo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 10rpx;
			}

			.list-content {
				align-self: stretch;
				display: flex;
				flex-direction: column;
				flex: 1;

				.address-box {
					.range {
						font-size: $font-sm - 2rpx;
						color: $font-color-disabled;
						flex-shrink: 0;
						.address-icon{
							width: 28rpx;
							height: 28rpx;
						}
					}

					.name {
						font-size: $font-lg;
						font-weight: bold;
						flex-grow: 1;
					}
				}

				.u-box {
					font-size: $font-sm;
					color: $font-color-light;
					margin-top: 16rpx;

					.text {
						.icon {
							width: 28rpx;
							margin-right: 10rpx;
						}
					}
				}

				.time {
					position: absolute;
					background: rgba(60, 130, 230, 0.12);
					border-radius: 20rpx;
					font-size: $font-sm - 4rpx;
					color: $base-color;
					bottom: 0;
					left: 0;
					padding: 0 20rpx;
				}
			}
		}
	}
</style>