xinwang/pages/store/storeList.vue

<template>
	<view class="store-list">
		<scroll-view scroll-y="true" class="list" @scrolltolower="loadData()">
			<empty v-if="loaded && list.length == 0"></empty>
			<view class="store flex" v-for="item in list" @click="navTo('/pages/store/storeDetail?id=' + item.id)">
				<image :src="item.image" mode="" class="store-img"></image>
				<view class="store-info">
					<view class="store-name clamp">{{item.name}}</view>
					<view class="store-detail">{{item.detailed_address}}</view>
					<view class="store-tip">门店</view>
					<view class="store-des">
						<image src="../../static/icon/dingwei.png" mode=""></image>
						距离 {{item.space}}
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType" v-if="list !=0"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
	import { getStoreList } from '@/api/index.js';
	import { mapState, mapMutations } from 'vuex';
	import empty from '@/components/empty';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore,
			empty
		},
		data() {
			return {
				list: [],
				storeList: [],
				loadingType: 'more',
				page: 1,
				limit: 10,
				height: '',//滚动区域高度
				loaded: false,
			}
		},
		onReady(res) {
			var _this = this;
			uni.getSystemInfo({
				success: resu => {
					const query = uni.createSelectorQuery();
					query.select('.list').boundingClientRect();
					query.exec(function(res) {
						console.log(res, 'ddddddddddddd');
						_this.height = resu.windowHeight - res[0].top + 'px';
						console.log('打印页面的剩余高度', _this.height);
					});
				},
				fail: res => {}
			});
		},
		onLoad() {
			this.loadData()
		},
		computed: {
			...mapState('latlon',['lat','lon']),
		},
		methods: {
			//获取门店list
			loadData() {
				let obj = this
				if(obj.loadingType == 'loading') {
					return
				}
				if(obj.loadingType == 'noMore') {
					return 
				}
				obj.loadingType = 'loading'
				getStoreList({
					page: obj.page,
					limit: obj.limit,
					latitude: obj.lat,
					longitude: obj.lon
				}).then(({data}) => {
					let list = data.list.map(item => {
						item.space = obj.space(obj.lat,obj.lon,item.latitude,item.longitude)
						console.log(item.space,'item.space++++++++++')
						return item
					})
					obj.list = obj.list.concat(list)
					obj.page++;
					if (obj.limit == data.list.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.loadingType = 'more';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						obj.loadingType = 'noMore';
					}
					// uni.hideLoading();
					this.$set(obj, 'loaded', true);
					
				})
				
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getStoreList(latitude,longitude) {
				let obj = this
				getStoreList({
					page: obj.page,
					limit: obj.limit,
					latitude: latitude,
					longitude: longitude
				}).then( ({data}) => {
					data.list = data.list.map(item => {
						item.space = obj.space(obj.lat,obj.lon,item.latitude,item.longitude)
						console.log(item.space,'item.space++++++++++')
						return item
					})
					obj.storeList = data.list
				})
			},
			space(lat1, lng1,lat2,lng2) {
				console.log(lat1, lng1, lat2, lng2, '位置信息');
				var radLat1 = (lat1 * Math.PI) / 180.0;
				var radLat2 = (lat2 * Math.PI) / 180.0;
				var a = radLat1 - radLat2;
				var b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137;
				s = Math.round(s * 10000) / 10000;
				// return s * 1000;
				if (s > 1) {
					return s.toFixed(2) + 'km';
				} else {
					return s * 1000 + 'm'; // 单位米
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.store-list {
		padding-top: 20rpx;
	}
	.store {
		margin: 0 auto 20rpx;
		width: 710rpx;
		height: 210rpx;
		background: #ffffff;
		box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 10rpx;
		padding: 19rpx 25rpx 11rpx 20rpx;
		justify-content: flex-start;
		.store-img {
			flex-shrink: 0;
			width: 180rpx;
			height: 180rpx;
			border-radius: 10rpx;
		}
		.store-info {
			width: 100%;
			height: 100%;
			padding-left: 19rpx;
			position: relative;
			.store-name {
				max-width: 400rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.store-detail {
				padding-top: 10rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
			.store-tip {
				width: 66rpx;
				height: 40rpx;
				background: linear-gradient(120deg, #ffc063, #ffa163);
				border-radius: 8rpx;
				position: absolute;
				right: 0;
				top: 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
				line-height: 40rpx;
				text-align: center;
			}
			.store-des {
				// width: 400rpx;
				position: absolute;
				bottom: 0;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				height: 35rpx;
				image {
					margin-right: 8rpx;
					width: 17rpx;
					height: 24rpx;
				}
			}
		}
	}
</style>