xyl/pages/store/shopList.vue

<template>
	<view class="content">
		<!-- <view class="shop">
			<view class="shop-title">
				<view class="shop-item" @click="changePx(0)">
					<view class="sitem-font" :class="{ choose: PXType == 0 }">销量</view>
					<view class="p-box">
						<text :class="{ active: PXType == 0 && numberOrder === 1 }" class="iconfont iconfold"></text>
						<text :class="{ active: PXType == 0 && numberOrder === 2 }"
							class="iconfont iconfold xia"></text>
					</view>
				</view>
				<view class="shop-item" @click="changePx(1)">
					<view class="sitem-font" :class="{ choose: PXType == 1 }">位置距离</view>
					<view class="p-box">
						<text :class="{ active: PXType == 1 && distance === 1 }" class="iconfont iconfold"></text>
						<text :class="{ active: PXType == 1 && distance === 2 }" class="iconfont iconfold xia"></text>
					</view>
				</view>
				<view class="shop-item" @click="changePx(2)">
					<view class="sitem-font" :class="{ choose: PXType == 2 }">趣豆赠送</view>
					<view class="p-box">
						<text :class="{ active: PXType == 2 && qudou === 1 }" class="iconfont iconfold"></text>
						<text :class="{ active: PXType == 2 && qudou === 2 }" class="iconfont iconfold xia"></text>
					</view>
				</view>
			</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).toFixed(2) }}KM
						</view>
					</view>
					<view class="flex f-d-c f-j-sb f-ai-s fg1" style="height: 110rpx;">
						<view class="djq-dz-box">
							<view class="djq-dz clamp2">{{ item.detailed_address }}</view>
							<!-- <view class="djq-dz">每100元赠送趣豆{{ item.gift_integral * 1 }}</view> -->
						</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 -->
								<!-- #ifdef APP-PLUS -->
								<image src="../../static/icon/dh.png" mode=""
									@click.stop="gomapApp(item.latitude, item.longitude, item.name)"></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/user.js';
	export default {
		components: {
			empty
		},
		data() {
			return {
				page: 1,
				limit: 10,
				shopList: [],
				name: '',
				height: '',
				PXType: 0, //店铺排序规则 0-》销量排序 1-》距离排序 2-》趣豆多少排序
				numberOrder: 1, //销量排序1升2降
				distance: 1, //距离排序1升2降
				qudou: 1, //趣豆多少排序1升2降
				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: {
			changePx(index) {
				let obj = this;
				obj.PXType = index;
				if (index === 0) {
					this.order = this.numberOrder === 1 ? 'asc' : 'desc';
					this.numberOrder = this.numberOrder === 1 ? 2 : 1;
				}
				if (index === 1) {
					this.order = this.distance === 1 ? 'asc' : 'desc';
					this.distance = this.distance === 1 ? 2 : 1;
				}
				// 判断是否为价格优先
				if (index === 2) {
					this.order = this.qudou === 1 ? 'asc' : 'desc';
					this.qudou = this.qudou === 1 ? 2 : 1;
				}
				console.log('切换显示');
				this.page = 1;
				this.loadingType = 'more';
				this.getStoreList('reload');
			},
			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) {
				console.log(phone, '121345');
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			},
			// 导航
			dh(item) {
				wx.openLocation({
					latitude: item.latitude * 1,
					longitude: item.longitude * 1,
					name: item.name,
					address: item.detailed_address
				});
			},
			getStoreList(type) {
				let obj = this;
				if (obj.loadingType == 'noMore' || obj.loadingType == 'loading') {
					return;
				}
				obj.loadingType = 'loading';
				getStoreList({
					cid: obj.id,
					name: obj.name,
					latitude: obj.latitude,
					longitude: obj.longitude,
					page: obj.page,
					limit: obj.limit,
					// address: obj.$store.state.chooseDistrict,
					sort: obj.PXType == 0 ? 'achievement' : obj.PXType == 1 ? 'distance' : 'gift_integral',
					order: obj.order
				}).then(res => {
					console.log(res, type);
					if (type == 'reload') {
						obj.shopList = [];
					}
					console.log(obj.shopList, '12456');
					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;
				});
			},
			gomapApp(latitude, longitude, name) {
				let url = '';
				if (plus.os.name == 'Android') {
					//判断是安卓端
					plus.nativeUI.actionSheet({
							//选择菜单
							title: '选择地图应用',
							cancel: '取消',
							buttons: [{
								title: '腾讯地图'
							}, {
								title: '百度地图'
							}, {
								title: '高德地图'
							}]
						},
						function(e) {
							switch (e.index) {
								//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
								case 1:
									//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
									url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
									break;
								case 2:
									url =
										`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
									break;
								case 3:
									url =
										`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
									break;
								default:
									break;
							}
							if (url != '') {
								url = encodeURI(url);
								//plus.runtime.openURL(url,function(e){})调起手机APP应用
								plus.runtime.openURL(url, function(e) {
									plus.nativeUI.alert('本机未安装指定的地图应用');
								});
							}
						}
					);
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）
					plus.nativeUI.actionSheet({
							title: '选择地图应用',
							cancel: '取消',
							buttons: [{
								title: '腾讯地图'
							}, {
								title: '百度地图'
							}, {
								title: '高德地图'
							}]
						},
						function(e) {
							switch (e.index) {
								case 1:
									url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
									break;
								case 2:
									url =
										`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
									break;
								case 3:
									url =
										`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
									break;
								default:
									break;
							}
							if (url != '') {
								url = encodeURI(url);
								plus.runtime.openURL(url, function(e) {
									plus.nativeUI.alert('本机未安装指定的地图应用');
								});
							}
						}
					);
				}
			},
			// 调用高德
			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 {
			width: 500rpx;
			margin-left: 10rpx;

			.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-box {
				width: 60%;
			}

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

			.djq-hd {
				width: 30%;
				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%;
			}
		}
	}

	.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: 25%;
				display: flex;
				align-items: center;
				justify-content: center;

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

				.choose {
					color: #ff4c4c;
				}

				.p-box {
					display: flex;
					flex-direction: column;

					.iconfont {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30rpx;
						height: 14rpx;
						line-height: 1;
						margin-left: 4rpx;
						font-size: 26rpx;
						color: #888;

						&.active {
							color: $base-color;
						}
					}

					.xia {
						transform: scaleY(-1);
					}
				}
			}
		}
	}
</style>