You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
515 lines
13 KiB
515 lines
13 KiB
<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>
|
|
|