high-mini/pages/goods/store-list/store-list.vue

<template>
	<view>
		<view v-if="storeList == '' " class="mart60 fotct font14 fcor666">
			<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
		</view>
		<view class="store-head width90" v-for="(goods,i) in storeList" :key="i">
			<image class="mart10 flleft" :src='imageUrl+goods.ext1'></image>
			<view class="storefig">
				<view class="store-cont-le flleft" @click="jumpdetails(goods)">
					<view class="text1 fcor333 font14 store-title paddtop10">{{goods.storeName}}</view>
					<view class="width100 mart5 height22">
						<!-- <view class="store-labl flleft fcor999 marglerig fotct font12">在线加油</view> -->
						<view class="store-labl flleft fcor999 marglerig fotct font12">{{goods.operatorName}}</view>
					</view>
					<view class="text1 font13 fcor666 width100">{{goods.address}}</view>
				</view>
				<view class="store-cont-rg flright fotrt mart20" @click.stop="seeloaction(goods)">
					<image
						src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAdUklEQVR4Xu1daZgcR3l+v56ZnpVkJxwGO9JOz8qWND1ay5bxLAYnEBsIYIeQcMSQBEJIgsxpTIAEc1oGHxhfwueKIwlHMEcICYkNJByBXBaWjGzvTs9KsjQ9K2FjYw5L1k7PTH95analRxar7W9mambnqH6e/dXv91bVW/VuTXdXfUUwl1HAKHBMBchoYxQwChxbAWMQMzqMAgsoYAxihodRwBjEjAGjQHMKmBmkOd1M1IAoYAwyIB1tmtmcAsYgzelmogZEAWOQAelo08zmFDAGaU43EzUgChiDDEhHm2Y2p4AxSHO6magBUcAYZEA62jSzOQWMQZrTzUQNiALGIAPS0aaZzSlgDNKcbiZqQBQwBhmQjjbNbE4BY5DmdDNRA6KAMciAdLRpZnMKGIM0p5uJGhAFjEEGpKNNM5tTwBikOd1M1IAoYAwyIB1tmtmcAsYgzelmogZEAWOQAelo08zmFDAGaU43E9UGBQrp5Hkhh+cBdB4Bq+pFMD8M4Msh6PtrS8EX21DsgpTGIJ1W3JT3KwpMpZO/GzJfCOD3FpSHcadbCs7vpITGIJ1U25T1BAUK6eT5PGuMlzYijesHHRu3HSuoEQEMtr8VUD+l5ozx+821lDe5fuXi5mIbizIGaUwvg25BAW84+WKK8QZmvKwFmtlQwmvcYvD5lnkiCIxB2q2w4Uc+lXyRBd7AhJdrlOPzrh+8RiPfvFTGIO1WeID586nkC4l4A4BXtEGGR10/eGobeJ9AaQzSboUHkH/SSf6OmjEAvLKdze/Ew7oxSDt7cMC4C87Q8xmheiv1h51oujFIJ1Q2ZbSsgJceeh64bowLWiYTE9Ajrl9+mhjeJNDMIE0KZ8IALz107pwxXtVpPQj0iYxfVj/j2noZg7RV3v4kz48MnWNxqF7X/pHmFm4FcKaEk4h+N1Ms3yHBtoIxBmlFvQGLzQ/Hf5vI2gDCH2tu+jYGjxNoXMj7ddcPGvr6LuT9FZgxSLPKDVDcZCr+XEsZA/gTnc1m4B6Ax7N+ZdxzbDV7PEPCbxG9ZE2x/G8SbKsYY5BWFezj+IlU/DmxWWPo/iD3IzCPZ0qVcQI47yQuJNBtQin/xfWDJpeoCEs4AmYM0rhmfR/hOfHfBCz1Vuq1OhtLwI+YefPtpcr4pUCouBkgNXsQcIakrE49exyqizGIpFcGBJNPx88GWxcS8Kdam8zYrn5K3VuqbL4AqB3J7aUSbwTRrcLy/tn1gz8QYrXAjEG0yNjbJPl0/Nlzxnid1pYQ7qWQx9fM/pR6gjFUOZcC1qtnnz3WS8olovMzxfKdEqwujDGILiV7kGdyJPEsCknNGH+mufr3EdH4mmJZGaN6LG4vlXgTiG6RlE2Ef8oUA52LHSXFwhhEJFN/gaaGE2eFMdoAxp9rbtn9TDR+4ITyeG4rKgtxfwmIne7Yd7Nw9kBI57nT5W9orm8knTFIpET9AygMJ57J9e8Y/Bc6W8XABEDj4XHl8dFJBBLuhmYPxlczpaAdK4Ijq2oMEilR7wMKqcRY3Rjgv9TZGgImGLQ5ZpfHV+9EWcrNQKyQsreCcLokhplenC2VvynB6sYYg+hWtIv4vFQip4xB4DforBYBefXdYq9V3nzuHsw0yl1IJd7MRDcL4/7R9YO2LptfqB7GIMJe6iXYjnTiGdX669r6ngydVwGgW5NWeXxlE8ZQFWEgXkjbW8E4TVIxZnpRtlT+lgTbDowxSDtUXSTOHenEGUcYQ2ff7gDolmVheTw1jYOtNK+QTr6FmW8ScnzF9YOO7C05Vn10iihss4HpVmBqJLE+DNWX7/qMYeniJ2AXmG4+vlYeX74Pj7fKe/eZSBz3cP27xzoJVwh64Vq//O8SbLswxiDtUrYDvIWVidMRWhvmUujENBa5m5luCoLy+OkP4YAu3nw6+VZivlHI92XXDzq4AWv+WhmDCHurm2DesH2aSoYQgi4kQlxj3YrMdGM4Ux4ffRj7NfJiYi3s2P767HGqhJdgvSDjz3xbgm0nxhiknepq5s4P2+ssZQyqf/1O6KInoASiTXygvNl9BI/p4j2SJ+8k30bgjwu5v+T6Qcd3Kc5XN2MQYY8tJmwyZZ8aI97AIPWMkdRYl70W0Q3hUHncLbTHGKquO1YhWQ3qK3ZHRXUn6/luceY7ImybQcYgbRa4Ffodjr22BpW7tm6MoVa4jor9MYiujyXqH/h+qZF3XirPSV4E8CZhOV90/eDVQmzbYcYgbZe48QKm0nZWZTsn0AYGljTOMH8EgR9i0HWJeDB+ygP4hS7ehXi+O4Kh5WF9zZV09nieW5z5bifqJinDGESiUocwhRHb5fDwjLFUW7FED4P52qQVqA98P9fGKyCacpIXhcLZgwhfyBQD3fvdBbU8NsQYpCX59AR7K5MZClWWEFK7+JbpYa2z/JSBayoIxk/z8TONvCKq3SMYCkJ7GwNZSQBb1rnZPTPfk2A7hTEG6ZTS85STX5FcY8UPG+M4jVX5GQMfC8NgfHQaj2rkbYjKc5JvB/gGURDjH9xSoDUphKjcCJAxiA4VG+SYHE6uVq9rQVAzxvENhi8E/wUBHw1rwebsXvxUI2/DVKVhLDlg2fcAyEiCOQzPyU5X/1OC7STGGKSDak8MJ1fFLN5AgHr4/nWNRT9GjKvUjLHYxjjUJs9JXgzw9cI2duQoA2FdngAzBmlGtQZjppyhk0OE6uOeMsaTGgxfCH4AjCupFoxn9uERjbwtUe1bjqW/jNs/ArBaQhRy+NtrS9XvS7CdxhiDtFFxLz20ci53rfqO8WSNRR0E4YpYORhf/SDUKbBddRVSyXcw8XXCSn3O9QOt6YWE5YpgxiAimRoD5UeGRhDOzhgAntJY9ILoMgiXx+P2+Kpd+3+ikVcb1fYTsWwoaW9n4BQJaY3D546Wqj+QYBcDYwyiUfXJlUPpWP11bf3hW+fpRxUGPlKNJcbX7T7wkMYqa6fKp5J/RcTXCok/6/qB3hxcwoKlMGMQqVIL4CZOHnJitXAD6t8x+AQNlIcoagRcVrUSm0f3HHhQI29bqCaehuNiS+x7AayUFRD+lutX/1uGXRyUMUgLut+3fEkqEaupZAgXgkjnYS5MwEbbSoyv7AFjHJIwn0q+k4ivkUjKwGeyfqA3UZ2k4AYxxiANCqbg21csGU5aNZU+Ry0kfHoTFMcMYeAypvhta4uP/1gnb7u5vBNwPJba9wFIS8piCn8zW6z+jwS7mBhjkAbU91JLlzNVDz18n9RAaDSU8REgfqtbenxfNLj7EIV08p3M4tnj77N+oDubY1tEMQYRyDqZXvobxIeN8RuCEDGECFegFrslM31wrzioy4BeBsfTQXuCgZSkakzh2dli9X8l2MXGGIMs0AMTI8tOssLKoRljuc7OYuCqeC128+q9B6d18i4G11Q6+a6Q+WOSshn4u6wfvF6C7QaMMcg8vfDAymUnlmuHjbFCc0ddXanGblq372BJM++i0O1YhV+rBfYkAJFOocXPXrun8n+LUtkmCjUGOUK0nacc9/RqNVBJndV3jOEm9Dx2COOaWs26cXTfjK+Vd5HJvHTy3WC+WlQNwqfdYqA1L7Co3BZAxiBqz/RJeFotYR9aXSv6HS3VXC25sGOxTac80F/GUO3fdTJ+vVK18wBEz2VWyM9aM125S6pdN+AG2iCF5TghjNlqOYhKn+Po7RC+IYzFbli7e6aol7d72DzH/msAHxXViOlTbqmsNXm2qNwWQQNpkNIwnrLfsg89fI+0qOFR4fxxtmLXZ/fM7NHL211su0fwpCBMeAw6UVIzCvmszHRliwTbTZiBMkjRwZMfx2FjCJdDyLpL5ZslK3adW5zZLYvobZTn2H8D4CpZK+iTrl/WmmFeVm7rqIEwiPpvVw5t9eCtfk6d3LpsRzAQ3WIxXbvGn3lAK28Xk93r4Mk2JQtgFi2vIeZnZkqVH3Zxk45Ztb42yNxD5CFjiJZfyzuRbqswrllXKu+Sx/QHMu/Y7yHgSklrGPSJrF/WfQyDpGgtmL
					</image>
					<view class="font12 fcor666">{{goods.distance}}km</view>
				</view>
			</view>
		</view>
		<view class="loading-text">{{ loadingText }}</view>
	</view>
</template>

<script>
	import {
		getStoreListByCoupon
	} from "../../../Utils/Api.js";
	let app = getApp()
	export default {
		data() {
			return {
				storeList: [],
				storeId: '',
				imageUrl: app.globalData.imgUrl,
				pageNum: 1,
				pageSize: 10,
				isNoMoreData: false,
				loadingText: ''
			}
		},
		onLoad(options) {
			this.storeId = options.id;
			this.getStoreListByCoupon();
		},
		onReachBottom() {
			this.getStoreListByCoupon();
		},
		methods: {
			/**
			 * 查询门店列表
			 */
			getStoreListByCoupon() {
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					this.loadingText = '到底了';
					return false;
				}
				let pagenum = this.pageNum;
				let params = {
					couponId: this.storeId,
					longitude: app.globalData.longitude,
					latitude: app.globalData.latitude,
					pageNum: pagenum,
					pageSize: this.pageSize,
				}
				getStoreListByCoupon(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						this.storeList = this.storeList.concat(res.return_data.list);
						if (res.return_data.total == (this.pageNum * this.pageSize)) {
							this.isNoMoreData = true;
						}
						this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum;
					} else {
						this.storeList = [];
					}
				})
			},
			/**
			 * 定位
			 */
			seeloaction(e) {
				uni.openLocation({
					latitude: Number(e.latitude), //目的地的定位
					longitude: Number(e.longitude), //目的地的定位
					name: e.storeName,
					address: e.address
				})
			},
			/**
			 * 跳转门店详情
			 */
			jumpdetails(e) {
				// uni.navigateTo({
				// 	url: './store-details?id=' + e
				// })
				app.globalData.storeid = e.id;
				app.globalData.storename = e.storeName;
				uni.navigateBack({
				})
			}
		}
	}
</script>

<style lang="scss">
	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}

	.store-head {
		height: 80px;
		border-bottom: 1px solid #f4f4f4;

		image {
			width: 60px;
			height: 60px;
		}
	}

	.storefig {
		margin-left: 70px;
	}

	.store-cont-le {
		width: 80%;
	}

	.store-cont-rg {
		width: 20%;

		image {
			width: 30px;
			height: 30px;
		}
	}

	.store-title {
		font-weight: 600;
	}

	.store-labl {
		border: 1px solid #f5f5f5;
		box-shadow: 0px 0px 2px 0px;
	}
</style>