cgst/pages/index/shoplist.vue

<template>
	<view class="center">
		<view class="djq-wrap flex f-ai-s" v-for="storeitem in storeList">
			<image :src="storeitem.image" mode="" class="djq-img"></image>
			<view class="djq-right pl20">
				<view class="djq-tit flex f-j-sb f-ai-s">
					<view class="djq-name clamp">{{ storeitem.name }}</view>
					<!-- <view class="djq-dis">
						<image src="../../static/icon/index10.png" mode=""></image>
						距离{{ storeitem.range * 1 }}KM
					</view> -->
				</view>
				<view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
					<view class="djq-dz clamp">{{ storeitem.detailed_address }}</view>
					<view class="djq-hd flex f-j-sb">
						<view class="buy-info"><!-- {{storeitem.count}}人已购买 --></view>
						<view class="hd-btn">
							<image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;" @click.stop="makeCall(storeitem.phone)"></image>
							<!-- #ifdef H5 -->
							<image src="../../static/icon/dh.png" mode="" @click.stop="toGaodeMap(storeitem.latitude, storeitem.longitude, storeitem.name)"></image>
							<!-- #endif -->
							<!-- #ifdef MP -->
							<image src="../../static/icon/dh.png" mode="" @click.stop="dh(storeitem)"></image>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
import { store_list } from '@/api/coupon.js';
export default {
	data() {
		return {
			page: 1,
			limitt: 20,
			loadingType: 'more',
			district: '定位中',
			storeList: [],
			latitude: '',
			longitude: ''
		};
	},
	onReachBottom() {
		this.getStoreList();
	},
	onLoad: function(option) {
		this.getaddress();
	},
	onShow: function() {
		this.getStoreList();
	},
	methods: {
		getaddress() {
			console.log('dizhi+++++++++++');
			let obj = this;
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					obj.latitude = res.latitude;
					obj.longitude = res.longitude;
				},
				fail: err => {
					console.log(err, 'shi+++++++++++++++');
					openMap().then(e => {
						this.getaddress();
					});
				}
			});
		},
		getStoreList() {
			let obj = this;
			if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
				return;
			}
			obj.loadingType = 'loading';
			store_list({
				page: obj.page,
				latitude: obj.latitude,
				longitude: obj.longitude,
				limit: obj.limitt
			}).then(res => {
				if (res.data.list.length > 0) {
					res.data.list.forEach(e => {
						e.range = this.getFlatternDistance(this.latitude, this.longitude, e.latitude, e.longitude);
					});
					obj.storeList = obj.storeList.concat(res.data.list);
					obj.page++;
					console.log('数据加载完毕');
				}

				if (obj.limitt == res.data.list.length) {
					//说明数据已经加载完毕了
					obj.loadingType = 'more';
					console.log('加载完毕1111111');
				} else {
					console.log('加载完毕1222222222211');
					obj.loadingType = 'noMore';
				}
				//说明还有数据
				this.$set(obj.storeList, 'loaded', true);
			});
		},
		// 导航
		dh(item) {
			wx.openLocation({
				latitude: item.latitude * 1,
				longitude: item.longitude * 1,
				name: item.name,
				address: item.detailed_address
			});
		},
		//根据经纬度计算距离
		getFlatternDistance(lat1, lng1, lat2, lng2) {
			let radLat1 = (lat1 * Math.PI) / 180.0;
			let radLat2 = (lat2 * Math.PI) / 180.0;
			let a = radLat1 - radLat2;
			let b = (lng1 * Math.PI) / 180.0 - (lng2 * Math.PI) / 180.0;
			let 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;
		},
		// 拨打电话
		makeCall(phone) {
			uni.makePhoneCall({
				phoneNumber: phone //仅为示例
			});
		}
	}
};
</script>

<style lang="scss">
.djq-wrap {
	width: 701rpx;
	// height: 255rpx;
	background: #ffffff;
	box-shadow: 0px 0px 27rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 0 auto 20rpx;
	padding: 23rpx 22rpx;

	&:last-of-type {
		margin-bottom: 0;
	}

	.djq-img {
		flex-shrink: 0;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.djq-right {
		flex-grow: 1;

		.djq-tit {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
			line-height: 52rpx;

			.djq-name {
				max-width: 300rpx;
			}

			.djq-dis {
				flex-shrink: 0;

				image {
					width: 20rpx;
					height: 28rpx;
					margin-right: 10rpx;
				}

				font-size: 22rpx;
				font-weight: 500;
				color: #666666;
			}
		}

		.djq-dz {
			width: 100%;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}

		.djq-hd {
			width: 100%;
			// border-bottom: 1rpx solid #EAECED;

			.buy-info {
				display: inline-block;
				height: 32rpx;
				border-radius: 16rpx 16rpx 16rpx 0px;
				line-height: 32rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #ff440d;
				padding: 0 15rpx;
				background-color: #fff;
			}

			.hd-btn {
				image {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}
	}
}
</style>