high-mini/pages/tabBar/category/category.vue

<template>
	<view class="map-container">
		<map style="width: 100%; height: 10vh;" :style="{height:mapheight}" :latitude="latitude" :longitude="longitude"
			:markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>
			<!-- 	<cover-view class="cover-view-loca" :style='{bottom:coverbottom}' @click="onControltap">
				<cover-image class="cover-image" @click="play" src="../../../static/img/adresw.png"></cover-image>
				<cover-view>
					定位
				</cover-view>
			</cover-view> -->
			<!-- 一级分类 -->
			<view class="width100 cover-views  mart15">
				<scroll-view class="width90 cover-view-cont" scroll-x="true">
					<view class="cover-view-head font14" :class="[typeid == item.id ? 'onclick' : '']"
						v-for="(item,index) in goodsFirstClassList" :key="index" @click="changeType(item)">{{item.name}}
					</view>
				</scroll-view>
				<!-- 二级分类 -->
				<view class="width100 mart15 backcorfff cover-viewchage alijus fotct" style="border-radius: 22px;">
					<!-- :class="[selectFirst == 1? 'onchange' : '']" -->
					<view class="font14 width30w onchange text1" @click="changeChilerType()">{{selectFirstName}}
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
					</view>
					<view class="font14 width30w onchange" @click="changeChilerdistance()">{{distanceName}}
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image>
					</view>
					<view class="font14 width30w">
						<!-- 全部
						<image mode="widthFix" class="margle" style="width: 8px;" :src="imagewxUrl+imgadres2"></image> -->
					</view>
				</view>
			</view>
			<!-- //模态框 -->
			<view class="change-cont" v-if="selectChiler == 1">
				<view class="width100 backcorfff"></view>
			</view>
			<!-- //显示内容 -->
			<view class="change-optiac paddbotm20" v-if="selectChiler == 1">
				<scroll-view scroll-y="true" class="width100 height260">
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
						v-for="(item,index) in goodsSendotClassList" :key="item.id" @click="changeFirstcont(item)">
						<view class="width90w" :class="[selectFirst == item.id? 'onchange' : '']">{{item.name}}</view>
						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
							v-if="selectFirst == item.id"></image>
					</view>
				</scroll-view>
			</view>
			<!-- 二级距离 -->
			<view class="change-optiac paddbotm20" v-if="selectChilerdistance == 1">
				<scroll-view scroll-y="true" class="width100 height260">
					<view class="width90 bor-botm1 paddtop15 paddbotm15 alijusstart"
						v-for="(item,index) in distanceList" :key="index" @click="changeDistance(item)">
						<view class="width90w" :class="[ distance== item.id? 'onchange' : '']">{{item.title}}</view>
						<image class="icon20" src="../../../static/img/changed.png" mode="widthFix"
							v-if="distance == item"></image>
					</view>
				</scroll-view>
			</view>

			<!-- 未打开筛选前 -->
			<view class="cover-view-foot" v-if="isSelected == 1">
				<view class="line-view" @click="updateSelected(2)"></view>
				<view class="mart10 fcor666 font13 width100" @click="updateSelected(2)">发现更多商户</view>
				<view class="input-box">
					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
						@click="updateSelected(2)" />
				</view>
			</view>

			<!-- 打开筛选后 -->
			<view class="cover-view-foot-behind" v-if="isSelected == 2">
				<view class="line-view" @click="updateSelected(1)"></view>
				<view class="mart10 fcor666 font13 width100" @click="updateSelected(1)">发现更多商户</view>
				<view class="input-box">
					<input placeholder="搜索商品" v-model="searchName" placeholder-style="color:#c0c0c0;"
						@input="getMapStore()" />
				</view>
				<scroll-view class="scoroll-cont width94 mart10" scroll-y="true">
					<view v-if="marker == '' " class="mart30 fotct font14 fcor666 fotct width100">
						<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres3"></image>
					</view>
					<view class="width96 height80 bor-botm1 alijusstart" v-for="(box,i) in marker" :key="i"
						@click="seeloaction(box)">
						<image mode="widthFix" :src="box.logo" class="recontleft flleft border-r"
							style="max-height: 60px;">
						</image>
						<view class="fotlt paddleft5">
							<view class="text2 width100 font18 fontwig6">
								{{box.callout.content}}
							</view>
							<view class="height22">
								<view class="width70 flleft text1 font13 fcor999">
									{{box.callout.address}}
								</view>
								<view class="width30 flright font13 fcor666 fotct">
									<image mode="widthFix" :src="imagewxUrl+imgadres4" style="width: 10px;"></image>
									{{box.distance}}km
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</map>
	</view>
</template>
<script>
	import {
		getIndustry,
		getMapStore
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				latitude: '', //纬度
				longitude: '', //经度
				scale: 13, //缩放级别
				bottomData: false,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres2: 'xiala.png',
				imgadres3: 'noorder.png',
				imgadres4: 'dh.png',
				marker: '', //商户
				typeid: 0, //选择分类
				isSelected: 1, //是否选择下拉
				selectFirst: '', //筛选是否有值
				selectFirstName: '', //筛选值名字
				selectChiler: 2, // 一级子菜单筛选
				selectChilerdistance: 2, // 二级子菜单筛选
				goodsFirstClassList: '', //商品一级分类
				goodsSendotClassList: '', //商品一级分类
				distanceList: [{
						id: 1,
						title: '1km'
					},
					{
						id: 3,
						title: '3km'
					},
					{
						id: 5,
						title: '5km'
					},
				], //距离
				distance: '1',
				distanceName: '1km',
				searchName: '' //搜索名称
			}
		},
		onLoad() {
			this.getIndustry();
			this.latitude = app.globalData.latitude;
			this.longitude = app.globalData.longitude;
		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '100vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '200rpx'
				}
				return data
			}
		},

		methods: {
			//查询商户列表
			getIndustry() {
				getIndustry().then(res => {
					if (res.return_code == '000000') {
						this.goodsFirstClassList = res.return_data;
						this.typeid = res.return_data[0].id;
						this.goodsSendotClassList = res.return_data[0].childIndustry;
						this.selectFirst = res.return_data[0].childIndustry[0].id;
						this.selectFirstName = res.return_data[0].childIndustry[0].name;
						this.getMapStore();
					}
				})
			},
			//查询商户
			getMapStore() {
				let datas = {
					distance: this.distance,
					name: this.searchName,
					childId: this.selectFirst,
					longitude: app.globalData.longitude,
					latitude: app.globalData.latitude
				}
				getMapStore(datas).then(res => {
					if (res.return_code == '000000') {
						this.marker = res.return_data
					} else {
						this.marker = [];
					}
				})
			},
			//选择二级分类数据
			changeFirstcont(item) {
				this.selectFirst = item.id;
				this.selectFirstName = item.name;
				this.selectChiler = 2;
				this.getMapStore();
			},
			//选择距离
			changeDistance(item) {
				this.distance = item.id;
				this.distanceName = item.title;
				this.selectChilerdistance = 2;
				this.getMapStore();
			},
			//地图点击事件
			markertap(e) {},
			//地图点击事件
			callouttap(e) {
				console.log('地图点击事件', e)
			},

			postionIng() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						app.globalData.latitude = res.latitude;
						app.globalData.longitude = res.longitude;
						that.findByLatAndLng(res.longitude, res.latitude);
						// uni.request({
						// 	url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude +
						// 		',' + res.longitude + '&key=7UMBZ-HFEHX-HSD4Q-Z3QY6-OQKN7-2QBDB',
						// 	data: {},
						// 	success: function(res) {
						// 		that.city = res.data.result.address_component.city.replace(/市/g,
						// 			'');
						// 		app.globalData.cityId = res.data.result.ad_info.adcode;
						// 		// app.globalData.cityId =  '500100';
						// 		that.getMerchantList();
						// 	}
						// })
					}
				})
			},
			//金纬度转
			findByLatAndLng(item, item1) {
				let datas = {
					lng: item,
					lat: item1
				}
				findByLatAndLng(datas).then(res => {
					if (res.return_code == '000000') {
						this.city = res.return_data.provinceName;
						app.globalData.cityName = res.return_data.provinceName;
						app.globalData.qianzhuCityName = res.return_data.cityName;
						app.globalData.cityId = res.return_data.regionId;
						// app.globalData.cityId = '500100';
						if (res.return_data.result.addressComponent.adcode) {
							this.getMerchantList();
						}
					}
				});
			},
			// 商户列表
			getMerchantList() {
				let params = {
					regionId: app.globalData.cityId
				}
				getMerchantList(params).then(res => {
					if (res.return_code == '000000' && res.return_data != '') {
						this.MerchantList = res.return_data;
						this.showCategoryIndex = res.return_data[0].merchantName;
						this.showCategoryIndexId = res.return_data[0].id;
						this.pageNum = 1;
						this.pageSize = 10;
						this.isNoMoreData = false;
						this.categoryList = [];
						this.getStoreListByMerchant();

					} else {
						this.MerchantList = [];
						uni.showToast({
							title: '暂无数据',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//跳转位置
			goPostion() {
				uni.navigateTo({
					url: '/pages/user/positioning/positioning'
				})
			},
			//门店列表
			getStoreListByMerchant() {
				console.log(222);
				uni.showLoading({
					title: '加载中...'
				})
				if (this.isNoMoreData) {
					uni.hideLoading()
					return false;
				}
				let pagenum = this.pageNum;
				let params = {
					merchantId: this.showCategoryIndexId,
					longitude: app.globalData.longitude,
					latitude: app.globalData.latitude,
					pageNum: pagenum,
					pageSize: this.pageSize

				}
				getStoreListByMerchant(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						uni.hideLoading();
						this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true;
						this.categoryList = this.categoryList.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.categoryList = [];
					}
				})
			},
			// 定位点击事件
			onControltap() {


			},
			//选择类型
			changeType(item) {
				this.typeid = item.id;
				this.goodsSendotClassList = item.childIndustry;
				this.selectFirst = item.childIndustry[0].id;
				this.selectFirstName = item.childIndustry[0].name;
				this.getMapStore();
			},
			//子菜单显示
			changeChilerType() {
				if (this.selectChiler == 1) {
					this.selectChiler = 2;
				} else {
					this.selectChiler = 1;
				}
			},
			//距离显示
			changeChilerdistance() {
				if (this.selectChilerdistance == 1) {
					this.selectChilerdistance = 2;
				} else {
					this.selectChilerdistance = 1;
				}

			},
			// 是否选择下拉
			updateSelected(item) {
				this.isSelected = item;
			},
			seeloaction(item) {
				// #ifdef H5
				window.location.href =
					`http://apis.map.qq.com/uri/v1/marker?marker=coord:(${item.latitude},${item.longitude})&addr:${item.address}`;
				// #endif
				// #ifdef MP
				uni.openLocation({
					latitude: Number(item.latitude), //目的地的定位
					longitude: Number(item.longitude), //目的地的定位
					name: item.store_name,
					address: item.address
				})
				// #endif
			},
		}
	}
</script>
<style lang='less' scoped>
	.map-container {
		position: relative;
		overflow: hidden;

		.cover-views {
			position: absolute;
			z-index: 99999;
		}

		.cover-view-cont {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			white-space: nowrap;
		}

		.cover-view-head {
			height: 35px;
			line-height: 35px;
			background-color: #fff;
			display: inline-table;
			flex-direction: column;
			text-align: center;
			position: relative;
			margin-right: 15px;
			border-radius: 22px;
			padding: 0 10px;
		}

		.cover-viewchage {
			height: 35px;
		}

		.onchange {
			color: #089bf5;
		}

		.onclick {
			background-color: #089bf5;
			color: #fff;
		}

		.cover-view-loca {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 40px;
			height: 40px;
			color: #484848;
			background-color: #fff;
			background-size: 60px 60px;
			background-position: center center;
			position: absolute;
			bottom: 100px;
			right: 16px;
		}

		.cover-image {
			display: inline-block;
			width: 15px;
			height: 15px;
		}

		.cover-view-foot {
			text-align: center;
			height: 200rpx;
			background-color: #fff;
			position: absolute;
			bottom: 0px;
			width: 100%;
			border-radius: 18px 18px 0 0;
		}

		.change-cont {
			position: absolute;
			z-index: 99999999;
			top: 100px;
			background-color: #333;
			width: 100%;
			opacity: 0.8;
			height: calc(100% - 100px);
		}

		.change-optiac {
			position: absolute;
			z-index: 99999999;
			top: 100px;
			width: 100%;
			background-color: #fff;
			height: 260px;
		}

		.cover-view-foot-behind {
			text-align: center;
			height: calc(100% - 110px);
			background-color: #fff;
			position: absolute;
			z-index: 999999;
			bottom: 0px;
			width: 100%;
			border-radius: 18px 18px 0 0;
		}
	}

	.scoroll-cont {
		height: calc(100% - 80px);
	}

	.line-view {
		width: 10%;
		margin-left: 45%;
		height: 5px;
		border-radius: 12px;
		margin-top: 10px;
		background-color: #f0f0f0;
	}

	.input-box {
		width: 90%;
		margin-left: 5%;
		margin-top: 5px;
		text-align: left;
		height: 70rpx;
		background-color: #f0f0f0;
		border-radius: 22px;
		position: relative;
		align-items: center;
		display: flex;

		input {
			padding-left: 12px;
			padding-right: 12px;
			height: 30px;
			color: #666;
			font-size: 14px;
			width: 100%;
		}
	}

	.onclick {
		background-color: #089bf5;
		color: #fff;
	}

	.recontleft {
		width: 60px;
		margin-left: 10px;
	}
</style>