dl/pages/store/shopList.vue

<template>
	<view class="content">
		<view class="search flex">
			<view class="input-box flex" @click.stop="clickSearch">
				<view class=" input-content flex">
					<view class="iconfont iconsearch"></view>
					<view class="input"><input type="text" placeholder="请输入店铺名称" v-model="name" /></view>
				</view>
			</view>
			<view class="search-btn" @click="search()">搜索</view>
		</view>
		<scroll-view scroll-y="true" :style="{ height: height }" class="shop-list-wrap" @scrolltolower="getStoreList()">
			<!-- 空白页 -->
			<empty v-if="loaded === true && shopList.length === 0"></empty>
			<view class="djq-wrap flex f-ai-s" v-for="item in shopList" @click="navTo('/pages/store/shopDetail?id=' + item.id)">
				<image :src="item.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">{{ item.name }}</view>
						<view class="djq-dis">
							<image src="../../static/icon/dw.png" mode=""></image>
							距离{{ item.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 clamp2">{{ item.detailed_address }}</view>
						<view class="djq-hd flex f-j-sb">
							<view class="hd-btn">
								<image src="../../static/icon/call.png" mode="" style="margin-right: 15rpx;" @click.stop="makeCall(item.phone)"></image>
								<!-- #ifdef H5 -->
								<image src="../../static/icon/dh.png" mode="" @click.stop="toGaodeMap(item.latitude, item.longitude, item.name)"></image>
								<!-- #endif -->
								<!-- #ifdef MP -->
								<image src="../../static/icon/dh.png" mode="" @click.stop="dh(item)"></image>
								<!-- #endif -->
							</view>
						</view>
					</view>
					<view class="" style="padding: 10rpx 0 0 0;">
						<view class="left-btm flex f-j-s" v-for="itemt in item.cou">
							<view class="j-price">
								<text>￥</text>
								{{ itemt.coupon_price }}
							</view>
							<view class="j-name">{{ itemt.title }}</view>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="loadingType"></uni-load-more>
		</scroll-view>
	</view>
</template>

<script>
import empty from '@/components/empty';
// #ifdef H5
import { weixindata, shareLoad } from '@/utils/wxAuthorized';
// #endif
import { mapState, mapMutations } from 'vuex';
import { getStoreList } from '@/api/shop.js';
export default {
	components: {
		empty
	},
	data() {
		return {
			page: 1,
			limit: 10,
			shopList: [],
			name: '',
			height: '',
			loadingType: 'more',
			loaded: false
		};
	},
	computed: {
		...mapState(['loginInterceptor', 'baseURL', 'latitude', 'longitude'])
	},
	onLoad(opt) {
		if (opt.id) {
			this.id = opt.id;
		}
		console.log(opt.id, '分类id');
		this.getStoreList();
	},
	onShow() {},
	onReachBottom() {},
	onReady() {
		var obj = this;
		uni.getSystemInfo({
			success: resu => {
				const query = uni.createSelectorQuery();
				query.select('.shop-list-wrap').boundingClientRect();
				query.exec(function(res) {
					obj.height = resu.windowHeight - res[0].top + 'px';
				});
			},
			fail: res => {}
		});
	},
	methods: {
		navTo(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		},
		search() {
			let obj = this;
			obj.shopList = [];
			obj.loadingType = 'more';
			obj.page = 1;
			obj.getStoreList();
		},
		// 拨打电话
		makeCall(phone) {
			uni.makePhoneCall({
				phoneNumber: phone //仅为示例
			});
		},
		// 导航
		dh(item) {
			wx.openLocation({
				latitude: item.latitude * 1,
				longitude: item.longitude * 1,
				name: item.name,
				address: item.detailed_address
			});
		},
		getStoreList() {
			let obj = this;
			if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
				return;
			}
			obj.loadingType = 'loading';
			getStoreList({
				cate_id: obj.id,
				name: obj.name,
				latitude: obj.latitude,
				longitude: obj.longitude,
				page: obj.page,
				limit: obj.limit
				// address: obj.$store.state.chooseDistrict,
			}).then(res => {
				console.log(res);
				obj.shopList = obj.shopList.concat(res.data.list);
				obj.page++;
				if (obj.limit == res.data.list.length) {
					obj.loadingType = 'more';
				} else {
					obj.loadingType = 'noMore';
				}
				obj.loaded = true;
			});
		},
		// 调用高德
		toGaodeMap(latitude, longitude, address) {
			console.log('选择高德', latitude, longitude, address);
			window.location.href = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${address}`;
		}
	}
};
</script>

<style lang="scss">
.search-top {
	// position: fixed;
	// top: 0;
	// z-index: 99;
}

.shop {
	// margin-top: 20rpx;
	background: #ffffff;
	padding: 0 12rpx;

	.shop-title {
		padding: 30rpx 0 20rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e3e6e7;

		.shop-item {
			width: 33%;
			display: flex;
			align-items: center;
			justify-content: center;

			.sitem-font {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.jt-down {
				width: 10rpx;
				height: 8rpx;
				margin-left: 12rpx;
			}
		}
	}
}

.shop-list-wrap {
	// background-color: red;
	padding-top: 20rpx;
}

.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 {
		margin-left: 10rpx;
		flex-grow: 1;

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

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

			.djq-dis {
				display: flex;
				align-items: center;
				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%;
			display: flex;
			justify-content: end;

			.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;
				}
			}
		}
	}
}

.left-btm {
	height: 50rpx;

	.j-logo {
		width: 32rpx;
		line-height: 33rpx;
		background: linear-gradient(-48deg, #ffa30b, #ffd158);
		border-radius: 13rpx;
		font-size: 21rpx;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
	}

	.j-price {
		font-size: 27rpx;
		font-weight: bold;
		color: #ff4c4c;
		margin: 0 10rpx 0 5rpx;
	}

	.j-zk {
		height: 31rpx;
		border: 1rpx solid #ff4c4c;
		border-radius: 7rpx;
		line-height: 31rpx;
		padding: 0 8rpx;
		font-size: 20rpx;
		font-weight: bold;
		color: #ff4c4c;
		margin-right: 5rpx;
	}

	.j-name {
		font-size: 23rpx;
		font-weight: bold;
		color: #333333;
	}
}

.search {
	justify-content: flex-start;
	padding: 10rpx 32rpx 20rpx;
	align-items: center;
	background-color: #fff;

	.search-btn {
		display: inline-block;
		// flex-grow: ;
		flex-shrink: 0;
		padding: 0 0 0 20rpx;
		font-size: 32rpx;
		color: #ff4c4c;
		z-index: 99;
	}

	.address {
		width: 32rpx;
		height: 38rpx;
	}

	.shop-name {
		height: 38rpx;
		position: relative;
		top: -4rpx;
		z-index: 100;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		padding-left: 10rpx;
	}

	.shop-jt {
		margin-left: 8rpx;
		width: 16rpx;
		height: 10rpx;
	}

	.input-box {
		margin-left: 10rpx;
		position: relative;
		z-index: 99;
		width: 710rpx;
		height: 60rpx;
		background: #eeeeee;
		border-radius: 30rpx;

		.input-content {
			position: relative;
			z-index: 11;
			border-radius: 99rpx;
			flex-grow: 1;
			padding: 5rpx 30rpx;
			background: #eeeeee;

			.iconsearch {
				font-size: 50rpx;
				color: #cbcbcb;
			}

			.input {
				margin-left: 19rpx;
				flex-grow: 1;

				input {
					font-size: 28rpx;

					color: #000;
				}
			}
		}

		.input-button {
			padding-left: 20rpx;
			font-size: $font-base;
			height: 100%;
		}
	}
}
</style>