changshu_other/pages/dydl.vue

<template>
	<view class="page" :style="{ height: 'calc('+ wheight + 'px - 65px)' }">
	    <scroll-view class="scroll-hview" scroll-x="true">
	        <view class="scroll-hview-item" @click="typeCheck(1)" >
	            <view :class="['scroll-hview-content',jqCheck?'hover':'']">
	                <image :src="jqCheck?'https://ys.tour-ma.com/r/cms/www/m/yushan/bar_1.png':'https://ys.tour-ma.com/r/cms/www/m/yushan/bar2_1.png'" ></image>
	                <view class="textcenter">景区</view>
	            </view>
	        </view>
	        <view class="scroll-hview-item" @click="typeCheck(2)"  >
	            <view :class="['scroll-hview-content',zsCheck?'hover':'']" >
	                <image :src="zsCheck?'https://ys.tour-ma.com/r/cms/www/m/yushan/bar_2.png':'https://ys.tour-ma.com/r/cms/www/m/yushan/bar2_2.png'" ></image>
	                <view class="textcenter">酒店</view>
	            </view>
	        </view>
	        <view class="scroll-hview-item" @click="typeCheck(3)"  >
	            <view :class="['scroll-hview-content',cyCheck?'hover':'']" >
	                <image :src="cyCheck?'https://ys.tour-ma.com/r/cms/www/m/yushan/bar_3.png':'https://ys.tour-ma.com/r/cms/www/m/yushan/bar2_3.png'" ></image>
	                <view class="textcenter">餐饮</view>
	            </view>
	        </view>
			<view class="scroll-hview-item" @click="typeCheck(173)"  >
			    <view :class="['scroll-hview-content',njlCheck?'hover':'']" >
			        <image :src="njlCheck?'https://ys.tour-ma.com/r/cms/www/m/yushan/bar_173.png':'https://ys.tour-ma.com/r/cms/www/m/yushan/bar2_173.png'" ></image>
			        <view class="textcenter">农家乐</view>
			    </view>
			</view>
	        <!-- <view class="scroll-hview-item" @click="typeCheck(55)"  >
	            <view :class="['scroll-hview-content',gwCheck?'hover':'']" >
	                <image :src="gwCheck?'https://ys.tour-ma.com/r/cms/www/m/yushan/bar_55.png':'https://ys.tour-ma.com/r/cms/www/m/yushan/bar2_55.png'" ></image>
	                <view class="textcenter">购物</view>
	            </view>
	        </view> -->
			<view class="scroll-hview-item" @click="typeCheck(56)">
			    <view :class="['scroll-hview-content',ylCheck?'hover':'']" >
			        <image :src="ylCheck?'https://ys.tour-ma.com/r/cms/www/m/yushan/bar_56.png':'https://ys.tour-ma.com/r/cms/www/m/yushan/bar2_56.png'" ></image>
			        <view class="textcenter">娱乐</view>
			    </view>
			</view>
			<view class="scroll-hview-item" @click="typeCheck(164)"  >
			    <view :class="['scroll-hview-content',msCheck?'hover':'']" >
			        <image :src="msCheck?'https://ys.tour-ma.com/r/cms/www/m/yushan/bar_164.png':'https://ys.tour-ma.com/r/cms/www/m/yushan/bar2_164.png'" ></image>
			        <view class="textcenter">民宿</view>
			    </view>
			</view>
	    </scroll-view>
	    <view class="map_container" :style="{ height: wheight + 'px' }">
	        <map class="map" id="map"  :longitude="longitude" :latitude="latitude" scale="13" :markers="markers"  @markertap="makertap"></map>
	    </view>
	
	    <view class="map-pop" v-if="nowPoi.pic != ''" @click="gotodetail(nowPoi.typeId,nowPoi.uuid,nowPoi.id)">
	        <view class="map-pop-icon">
	            <image v-if="nowPoi.pic != ''&&nowPoi.pic !=null" mode="aspectFill" :src="'https://cs.tour-ma.com/wc200'+nowPoi.pic" ></image>
	            <image v-if="nowPoi.pic == ''||nowPoi.pic ==null" mode="aspectFill" src="https://cs.tour-ma.com/r/cms/www/m/yushan/noimg.jpg" ></image>
	        </view>
	        <view class="map-pop-content">
	            <view>
	                <text class="map-pop-name">{{nowPoi.name}}</text>
	            </view>
	            <view class="map-pop-level" >
	                <view v-for="(lv,ind) in stars" v-if="nowPoi.level!=0">
	                    <image class="star-image" :src="nowPoi.level > lv ?(nowPoi.level-lv == 0.5?halfSrc:selectedSrc) : normalSrc"></image>
	                </view>
	            </view>
	            <view>
	                <text class="map-pop-cont">{{nowPoi.address}}</text>
	                <text class="map-pop-cont">{{nowPoi.content}}</text>
	            </view>
	        </view>
			<view class="map-pop-price1"  @click.stop="openDt(nowPoi.lng,nowPoi.lat)">
				<image src="https://cs.tour-ma.com/r/cms/www/m/yushan/bh-ms-ditu.png"></image>
			    导航
			</view>
	        <view class="map-pop-price" >
	            查看详情
	        </view>
	    </view>
	
		<tabBar :info="info"></tabBar>
	</view>
</template>

<script>
	var web = require('@/components/utils/request.js');
	import tabBar from '@/components/html/tabBar.vue';
	var poiDatas = [];
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				info:{ind:1},
				markers: [], //图钉数据
				latitude: '', //定位数据lat
				longitude: '', //定位数据lon
				nowPoi: {
				  id: 0,
				  name: '',
				  typeId: 0,
				  address: '',
				  content: '',
				  level: 0,
				  pic: '',
				  uuid:'',
				  lat:'',lng:''
				}, //当前选中点
				wheight:0,
				jqCheck: true,
				zsCheck: false,
				cyCheck: false,
				gwCheck: false,
				ylCheck: false,
				msCheck: false,
				njlCheck: false,
				
				//星级部分
				stars: [0, 1, 2, 3, 4],
				normalSrc: 'https://cs.tour-ma.com/r/cms/www/m/yushan/start_normal.png',
				selectedSrc: 'https://cs.tour-ma.com/r/cms/www/m/yushan/start_selected.png',
				halfSrc: 'https://cs.tour-ma.com/r/cms/www/m/yushan/start_half.png',
			}
		},
		onLoad() {
			var that=this;
			uni.getSystemInfo({
			    success: function (res) {
					that.wheight=res.screenHeight;
			    }
			});
			that.getPois();
		},
		methods: {
			openDt(lng,lat){
				console.log(lng,lat)
				var that=this;
				uni.openLocation({
					latitude:Number(lat),
					longitude:Number(lng),
					complete(e) {
						console.log(e);
					}
				})
			},
			gotodetail(typeId,uuid,wid) {
				
				if(uuid!='' && uuid!=undefined){
					if(typeId==1){
						uni.navigateTo({
							url:'/pages/jqDet?uid='+wid
						});
					}else if(typeId==2){
						uni.navigateTo({
							url:'/pages/jqDet?uid='+wid
						});
					}else if(typeId==3){
						uni.navigateTo({
							url: '/pages/jqDet?uid='+wid
						});
					}else{
						uni.navigateTo({
							url: '/pages/jqDet?uid='+wid
						});
					}
				}
				
				
			},
			typeCheck(ind) {
			  switch (ind) {
			    case 1: //景区
			      this.jqCheck=!this.jqCheck;
			      break;
			    case 2: //住宿
			      this.zsCheck=!this.zsCheck;
			      break;
			    case 3: //餐饮
			      this.cyCheck=!this.cyCheck;
			      break;
			    case 56: //娱乐
			      this.ylCheck=!this.ylCheck;
			      break;
			    case 55: //购物
			      this.gwCheck=!this.gwCheck;
			      break;
			    case 173: //农家乐
			      this.njlCheck=!this.njlCheck;
			      break;
			    case 164: //民宿
			      this.msCheck=!this.msCheck;
			      break;
			    // case 54: //旅行社
			    //   this.lxsCheck=!this.lxsCheck;
			    //   break;
			  }
			  this.getPois();
			},
			//获取数据列表
			getPois() {
			  uni.showToast({
			    title: 'Loading...',
			    icon: 'loading',
			    mask: true
			  })
			  var that = this;
			  var para = {
			    "pageNo": 1,
			    "jqCheck": that.jqCheck,
			    "zsCheck": that.zsCheck,
			    "cyCheck": that.cyCheck,
			    "gwCheck": that.gwCheck,
			    "ylCheck": that.ylCheck,
			    "njlCheck": that.njlCheck,
			    "msCheck": that.msCheck,
			   // "lxsCheck": that.lxsCheck
			  };
			
			  web.httpPost(this, 'wareInfo/list.jspx', para, function(res) {
			    var pois = [];
			    if (res.data.results != undefined) {
			      for (var i = 0; i < res.data.results.length; i++) {
			        var tmp = res.data.results[i];
			        var p = {
			          id: i,
			          title: tmp.name,
			          latitude: tmp.lat,
			          longitude: tmp.lng,
			          iconPath: "https://ys.tour-ma.com/r/cms/www/m/yushan/poi.png",
			          width: 28,
			          height: 37,
			          callout: {
			            content: tmp.name + "-",
			            fontSize: 20,
			            bgColor: "#FFFFFF",
			            color: "#666666",
			            bordereRadius: 5,
			            padding: 10,
			            display: 'BYCLICK'
			          },
			          label: {
			            color: '#888888',
			            fontSize: 40,
			            content: tmp.name + "=",
			            x: 5,
			            y: 5
			          }
			        };
			        pois.push(p);
			      }
			    }
				that.markers= pois;
				
				poiDatas = res.data.results;
				if(poiDatas.length==0){
					that.latitude=0;
					that.longitude=0;
				}else{
					that.latitude= poiDatas[0].lat;
					that.longitude= poiDatas[0].lng;
				}
			    
			    that.showMarkerInfo(poiDatas, 0);
			    that.changeMarkerColor(poiDatas, 0);
			    uni.hideToast()
			  }, function(e) {
			    uni.hideToast()
			    uni.showModal({
			      title: app.globalData.mtitle,
			      content: '数据加载失败',
			      success: function(res) {
			        if (res.confirm) {
			          uni.navigateBack({
			            delta: 1
			          })
			        }
			      }
			    });
			  });
			},
			makertap(e) {
			  var index = e.detail.markerId;
			  var that = this;
			  that.showMarkerInfo(poiDatas, index);
			  that.changeMarkerColor(poiDatas, index);
			},
			showMarkerInfo(data, index) {
				
				var that = this;
				if(data.length==0){
					that.nowPoi={
					  id: 0,
					  name: '',
					  typeId: 0,
					  address: '',
					  content: '',
					  level: 0,
					  pic: '',
					  uuid:'',
					  lat:'',lng:''
					}
				}else{
					that.nowPoi.id=data[index].uid;
					that.nowPoi.uuid=data[index].uuid;
					that.nowPoi.name=data[index].name;
					that.nowPoi.typeId=data[index].typeId;
					that.nowPoi.address=data[index].address;
					that.nowPoi.content=data[index].phone;
					that.nowPoi.level=data[index].level;
					that.nowPoi.pic=data[index].logo;
					that.nowPoi.lat=data[index].lat;
					that.nowPoi.lng=data[index].lng;
				}
			},
			changeMarkerColor(data, index) {
			  var markers = [];
			  for (var j = 0; j < data.length; j++) {
			    var p = {
			      id: j,
			      title: data[j].name,
			      latitude: data[j].lat,
			      longitude: data[j].lng,
			      width: 28,
			      height: 37,
			    };
			    if (j == index) {
			      p.iconPath = "https://ys.tour-ma.com/r/cms/www/m/yushan/poi.png";
			    } else {
			      p.iconPath = "https://ys.tour-ma.com/r/cms/www/m/yushan/poi_" + data[j].typeId + ".png";
			    }
			    markers.push(p);
			  }
			  this.markers = markers;
			},
		}
	}
</script>

<style>
.page{
	position: relative;
	overflow: hidden;
}
.scroll-hview {
	width: 100%;
	height: 120rpx;
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}
.scroll-hview-item{
	display: inline-block;
	width: 127rpx;
	height: 120rpx;
	background-color: #fbf9fe;

}
.scroll-hview-content {
    width: 100%;
    height: 118rpx;
    background-color: #fbf9fe;
    border-bottom: 2rpx solid #C9C9C9;
}

.scroll-hview-content image {
    margin: 10rpx 31rpx 0rpx 31rpx;
    width: 60rpx;
    height: 60rpx;
}

.scroll-hview-content .textcenter {
    width: 100%;
    color: rgba(141, 146, 153, 1);
    font-size: 26rpx;
    text-align: center;
    line-height: 30rpx;
    position: relative;
    top: -4rpx;
}
.scroll-hview-content.hover{
    width: 100%;
    height: 116rpx;
	border-bottom: 4rpx solid #18AAF3;
}

.scroll-hview-content.hover image {
    margin: 10rpx 31rpx 0rpx 31rpx;
    width: 60rpx;
    height: 60rpx;
}

.scroll-hview-content.hover .textcenter {
    width: 100%;
    color: #333333;
    font-size: 26rpx;
    text-align: center;
    line-height: 30rpx;
    position: relative;
    top: -4rpx;
}

.map_container {
	width: 100%;
    position: absolute;
    top: 0rpx;
    left: 0;
	z-index: 0;
}

.map {
    width: 100%;
    height: 100%;
}


.map-pop {
    position: absolute;
	z-index: 10;
	left: 20rpx;
	bottom: 220rpx;
    width: 670rpx;
    height: 190rpx;
    padding: 20rpx;
    display: flex;
	flex-direction: row;
	justify-content: space-between;
    color: #BCBCBC;
    background-color: #FFFFFF;
}

.map-pop-icon {
    width: 150rpx;
    height: 150rpx;
}

.map-pop-icon image {
    width: 100%;
    height: 100%;
    border-radius: 5%;
}

.map-pop-content {
    width: 500rpx;
    padding-left: 30rpx;
}

.map-pop-name {
    width: 100%;
    height: 34rpx;
    color: #000000;
    font-size: 30rpx;
    line-height: 30rpx;
}

.map-pop-level {
    width: 100%;
    margin: 10rpx 0 10rpx 0;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

.star-image {
    width: 36rpx;
    height: 36rpx;
}

.map-pop-cont {
    width: 100%;
    height: 32rpx;
    color: #888888;
    font-size: 26rpx;
    line-height: 28rpx;
    display: block;
}
.map-pop-price1 image{
	width: 31rpx;
	height: 38rpx;
}
.map-pop-price1 {
	text-align: center;
	line-height: 60rpx;
	border-radius: 30rpx;
	color: #000;
    position: absolute;
    right: 30rpx;
    bottom: 50%;
	margin-bottom: -55rpx;
	font-size: 28rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.map-pop-price {
    width: 210rpx;
    height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 30rpx;
	background-color: rgb(15,110,252);
	color: #FFFFFF;
    position: absolute;
    left: 50%;
    bottom: -30rpx;
	margin-left: -105rpx;
	font-size: 28rpx;
}

.map-pop-price image {
    width: 100%;
    height: 100%;
}
</style>