chenkainan
6 months ago
28 changed files with 10044 additions and 320 deletions
@ -0,0 +1,162 @@ |
|||||
|
<template> |
||||
|
<view :class="[scrolltop?'backs1':'backs']" :style="{'padding-top':statusBarHeight+'px'}"> |
||||
|
<view :class="['header_left_back',backgroundColor==true?'bgcolor':'']" @click="toback"> |
||||
|
<image class="header_icon" v-if="!scrolltop" src="/static/images/zhouWei-navBar/icon_back_white.png" mode="aspectFit"></image> |
||||
|
<image class="header_icon" v-else src="/static/images/zhouWei-navBar/icon_back_black.png" mode="aspectFit"></image> |
||||
|
</view> |
||||
|
<view class="ctitle" v-if="scrolltop">{{title}}</view> |
||||
|
<view class="sskuang" v-if="info.shou" :style="{height:scrolltop?'80rpx':'100%'}"> |
||||
|
<input :class="[scrolltop?'hinput':'winput']" type="text" value="" v-model="name" v-if="ssshow" @input="come"/> |
||||
|
<image :src="$getimg(scrolltop?'wfqy-icon-xss.png':'wfqy-icon-xss1.png')" @click="ss" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
props: ['info'], |
||||
|
data() { |
||||
|
return { |
||||
|
//true--白色;false--黑色 |
||||
|
navFontColor: false, |
||||
|
backgroundColor: false, |
||||
|
name:'', |
||||
|
statusBarHeight:0, |
||||
|
ssshow:false, |
||||
|
scrolltop:false, |
||||
|
title:'' |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
//获取手机状态栏高度 |
||||
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.navFontColor = this.info.color; |
||||
|
if (this.info.bg) { |
||||
|
this.backgroundColor = this.info.bg; |
||||
|
} |
||||
|
}, |
||||
|
watch:{ |
||||
|
info(){ |
||||
|
this.scrolltop=this.info.num; |
||||
|
this.title=this.info.name; |
||||
|
this.$forceUpdate(); |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
toback() { |
||||
|
uni.navigateBack(); |
||||
|
}, |
||||
|
ss(){ |
||||
|
var that=this; |
||||
|
this.ssshow=!this.ssshow; |
||||
|
if(!this.ssshow){ |
||||
|
this.name=''; |
||||
|
this.$emit('getSsname',{ |
||||
|
name:'' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
come(){ |
||||
|
var that=this; |
||||
|
this.$emit('getSsname',{ |
||||
|
name:that.name |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
@function unit($num) { |
||||
|
@return $num+0upx; |
||||
|
} |
||||
|
.ctitle{ |
||||
|
font-size: 36rpx; |
||||
|
color: #505050; |
||||
|
font-weight: 500; |
||||
|
width: 560rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.sskuang{ |
||||
|
width: 465rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
height: 100%; |
||||
|
.hinput{ |
||||
|
margin-right: 20rpx; |
||||
|
border: 1rpx solid rgba(0,0,0,0.1); |
||||
|
border-radius: 35rpx; |
||||
|
height: 70%; |
||||
|
color: #333; |
||||
|
padding: 0 20rpx; |
||||
|
background: rgba(0,0,0,0.1); |
||||
|
font-size: 24rpx; |
||||
|
width: 170rpx; |
||||
|
} |
||||
|
.winput{ |
||||
|
margin-right: 20rpx; |
||||
|
border: 1rpx solid #fff; |
||||
|
border-radius: 35rpx; |
||||
|
height: 70%; |
||||
|
color: #fff; |
||||
|
padding: 0 20rpx; |
||||
|
background: rgba(255,255,255,0.2); |
||||
|
font-size: 24rpx; |
||||
|
width: 170rpx; |
||||
|
} |
||||
|
image{ |
||||
|
width: 37rpx; |
||||
|
height: 36rpx; |
||||
|
} |
||||
|
} |
||||
|
.backs { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
// width: unit(70); |
||||
|
height: 88rpx; |
||||
|
z-index: 100; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
.backs1{ |
||||
|
position: fixed; |
||||
|
background: rgba(255,255,255,1); |
||||
|
/* top: 40rpx; */ |
||||
|
left: 0; |
||||
|
height: 88rpx; |
||||
|
z-index: 100; |
||||
|
display: -webkit-box; |
||||
|
display: -webkit-flex; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: left; |
||||
|
width: 100%; |
||||
|
} |
||||
|
.header_left_back { |
||||
|
width: 70rpx; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.bgcolor { |
||||
|
border-radius: 50%; |
||||
|
background-color: #446A86; |
||||
|
} |
||||
|
|
||||
|
.header_icon { |
||||
|
width: unit(18); |
||||
|
height: unit(34); |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,166 @@ |
|||||
|
<template> |
||||
|
<canvas v-if="canvasId" :id="canvasId" :canvasId="canvasId" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}" |
||||
|
@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @error="error"> |
||||
|
</canvas> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import uCharts from './u-charts.js'; |
||||
|
var canvases = {}; |
||||
|
|
||||
|
export default { |
||||
|
props: { |
||||
|
chartType: { |
||||
|
required: true, |
||||
|
type: String, |
||||
|
default: 'column' |
||||
|
}, |
||||
|
opts: { |
||||
|
required: true, |
||||
|
type: Object, |
||||
|
default () { |
||||
|
return null; |
||||
|
}, |
||||
|
}, |
||||
|
canvasId: { |
||||
|
type: String, |
||||
|
default: 'u-canvas', |
||||
|
}, |
||||
|
cWidth: { |
||||
|
default: 375, |
||||
|
}, |
||||
|
cHeight: { |
||||
|
default: 250, |
||||
|
}, |
||||
|
pixelRatio: { |
||||
|
type: Number, |
||||
|
default: 1, |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.init(); |
||||
|
}, |
||||
|
methods: { |
||||
|
init() { |
||||
|
switch (this.chartType) { |
||||
|
case 'column': |
||||
|
this.initColumnChart(); |
||||
|
break; |
||||
|
case 'line': |
||||
|
this.initLineChart(); |
||||
|
break; |
||||
|
default: |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
initColumnChart() { |
||||
|
canvases[this.canvasId] = new uCharts({ |
||||
|
$this: this, |
||||
|
canvasId: this.canvasId, |
||||
|
type: 'column', |
||||
|
legend: true, |
||||
|
fontSize: 11, |
||||
|
background: '#FFFFFF', |
||||
|
pixelRatio: this.pixelRatio, |
||||
|
animation: true, |
||||
|
categories: this.opts.categories, |
||||
|
series: this.opts.series, |
||||
|
enableScroll: true, |
||||
|
xAxis: { |
||||
|
disableGrid: true, |
||||
|
itemCount: 4, |
||||
|
scrollShow: true |
||||
|
}, |
||||
|
yAxis: { |
||||
|
//disabled:true |
||||
|
}, |
||||
|
dataLabel: true, |
||||
|
width: this.cWidth * this.pixelRatio, |
||||
|
height: this.cHeight * this.pixelRatio, |
||||
|
extra: { |
||||
|
column: { |
||||
|
type: 'group', |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
initLineChart() { |
||||
|
canvases[this.canvasId] = new uCharts({ |
||||
|
$this: this, |
||||
|
canvasId: this.canvasId, |
||||
|
type: 'line', |
||||
|
fontSize: 11, |
||||
|
legend: true, |
||||
|
dataLabel: false, |
||||
|
dataPointShape: true, |
||||
|
background: '#FFFFFF', |
||||
|
pixelRatio: this.pixelRatio, |
||||
|
categories: this.opts.categories, |
||||
|
series: this.opts.series, |
||||
|
animation: true, |
||||
|
enableScroll: true, |
||||
|
xAxis: { |
||||
|
type: 'grid', |
||||
|
gridColor: '#CCCCCC', |
||||
|
gridType: 'dash', |
||||
|
dashLength: 8, |
||||
|
itemCount: 4, |
||||
|
scrollShow: true |
||||
|
}, |
||||
|
yAxis: { |
||||
|
gridType: 'dash', |
||||
|
gridColor: '#CCCCCC', |
||||
|
dashLength: 8, |
||||
|
splitNumber: 5, |
||||
|
min: 10, |
||||
|
max: 180, |
||||
|
format: (val) => { |
||||
|
return val.toFixed(0) + '元' |
||||
|
} |
||||
|
}, |
||||
|
width: this.cWidth * this.pixelRatio, |
||||
|
height: this.cHeight * this.pixelRatio, |
||||
|
extra: { |
||||
|
line: { |
||||
|
type: 'straight' |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改 |
||||
|
changeData(cid,newdata) { |
||||
|
canvases[cid].updateData({ |
||||
|
series: newdata.series, |
||||
|
categories: newdata.categories |
||||
|
}); |
||||
|
}, |
||||
|
touchStart(e) { |
||||
|
canvases[this.canvasId].showToolTip(e, { |
||||
|
format: function(item, category) { |
||||
|
return category + ' ' + item.name + ':' + item.data |
||||
|
} |
||||
|
}); |
||||
|
canvases[this.canvasId].scrollStart(e); |
||||
|
}, |
||||
|
touchMove(e) { |
||||
|
canvases[this.canvasId].scroll(e); |
||||
|
}, |
||||
|
touchEnd(e) { |
||||
|
canvases[this.canvasId].scrollEnd(e); |
||||
|
}, |
||||
|
error(e) { |
||||
|
console.log(e) |
||||
|
} |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.charts { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
flex: 1; |
||||
|
background-color: #FFFFFF; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
</style> |
||||
File diff suppressed because it is too large
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<web-view :src="url"></web-view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
url: '' |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.url = decodeURIComponent(options.url) |
||||
|
}, |
||||
|
onShareAppMessage(res) { |
||||
|
const { |
||||
|
webViewUrl |
||||
|
} = res; |
||||
|
return { |
||||
|
path: '/pages/webview/webview?url=' + encodeURIComponent(webViewUrl.replace(/[?&]memberId=[^&]*&?/g, "&")) |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
|
||||
|
</style> |
||||
|
After Width: | Height: | Size: 762 B |
|
After Width: | Height: | Size: 678 B |
|
After Width: | Height: | Size: 762 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
File diff suppressed because one or more lines are too long
@ -0,0 +1,334 @@ |
|||||
|
<template> |
||||
|
<view class="centent"> |
||||
|
<back :info="info"></back> |
||||
|
<view :style="{top:statusBarHeight+'px'}" class="cityicon" ></view> |
||||
|
<view class="topbg"> |
||||
|
<view class="bgjb"> |
||||
|
<image :src="$getimg('lx-jq.png')"></image> |
||||
|
</view> |
||||
|
<view class="bgjb-jb"> |
||||
|
<image :src="$getimg('djcp-bg-jb.png')"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="tbb"> |
||||
|
<view class="tbboxs" v-for="(el,ind) in allData" :key="el.id" @click="go(el.tel)"> |
||||
|
<view class="tboxbot"> |
||||
|
<view class="tbtitle"> |
||||
|
<view class="tbtitle-il"> |
||||
|
<image :src="$getimg('img-iphone.png')" mode="" class="il-img"></image> |
||||
|
</view> |
||||
|
<view class="tbname"> |
||||
|
<view class="tbname-l">{{el.name}}</view> |
||||
|
<view class="tbname-k">{{el.tel}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="szra1"> |
||||
|
<view class="list" v-for="(el,ind) in alldata[xwwfind].list" :style="{'margin-right':ind%2==0?'0':'20rpx'}" |
||||
|
v-if="ind>0" @click="$getpage('/pagesys/index/foodCard?uid='+el.uid)"> |
||||
|
<view class="liimg"> |
||||
|
<image class="szra_img" :src="$geturl(el.logo)" lazy-load="true" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<view class="sztitle text_overflow">{{el.name}}</view> |
||||
|
<view class="sztitle text_overflow dsadk">{{el.address}}</view> |
||||
|
</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import back from '@/components/back.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
back |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
// city:'720虚拟游', |
||||
|
statusBarHeight: 0, |
||||
|
info: { |
||||
|
color: true, |
||||
|
num: false |
||||
|
}, |
||||
|
id: 97, |
||||
|
first: 0, |
||||
|
count: 50, |
||||
|
lmdata: [], |
||||
|
xwwfind: 0, |
||||
|
allData:[] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.getTitles(); |
||||
|
}, |
||||
|
onReady() { |
||||
|
//获取手机状态栏高度 |
||||
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; |
||||
|
}, |
||||
|
|
||||
|
onPageScroll(e) { |
||||
|
if (e.scrollTop > 50 && !this.info.num) { |
||||
|
this.info.num = true; |
||||
|
} |
||||
|
if (e.scrollTop < 50 && this.info.num) { |
||||
|
this.info.num = false; |
||||
|
} |
||||
|
}, |
||||
|
// onShow(object) { //获取页面返回传递参数 |
||||
|
// this.getdata2(); |
||||
|
// }, |
||||
|
methods: { |
||||
|
geturl(url) { |
||||
|
return 'http://cscmp.tour-ma.com' + url; |
||||
|
}, |
||||
|
ckxwwfind(ind, id) { |
||||
|
this.xwwfind = ind; |
||||
|
}, |
||||
|
getTitles() { |
||||
|
var url = 'https://qyly1.csly-travel.com/addressBook.jspx'; |
||||
|
var para = { |
||||
|
unityTypeId: 5, |
||||
|
method: 'POST' |
||||
|
}; |
||||
|
var that = this; |
||||
|
that.httpGetxin(that, url, para, function(res) { |
||||
|
let json = res.data.data[0].link; |
||||
|
that.allData = json; |
||||
|
console.log(that.allData) |
||||
|
}); |
||||
|
}, |
||||
|
go(phone) { |
||||
|
uni.makePhoneCall({ |
||||
|
// 手机号 |
||||
|
phoneNumber: phone, |
||||
|
// 成功回调 |
||||
|
success: (res) => { |
||||
|
console.log('调用成功!') |
||||
|
}, |
||||
|
// 失败回调 |
||||
|
fail: (res) => { |
||||
|
console.log('调用失败!') |
||||
|
} |
||||
|
|
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
$url:'https://qyly1.csly-travel.com/r/cms/www/m/changshu/'; |
||||
|
view { |
||||
|
box-sizing: content-box; |
||||
|
} |
||||
|
.cityicon{ |
||||
|
width: calc(100% - 167rpx); |
||||
|
font-size: 48upx; |
||||
|
color: #FFFFFF; |
||||
|
left: 80upx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
z-index: 9999; |
||||
|
height: 80rpx; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.centent { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 750upx; |
||||
|
height: 100vh; |
||||
|
background-color: #fff; |
||||
|
overflow-y: scroll; |
||||
|
|
||||
|
.topbg { |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
.bgjb { |
||||
|
width: 100%; |
||||
|
height: 500rpx; |
||||
|
position: absolute; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 500rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bgjb-jb { |
||||
|
position: absolute; |
||||
|
top: 300rpx; |
||||
|
width: 100%; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 400rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tbb{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.tbboxs:nth-child(1) { |
||||
|
margin-top: 400rpx; |
||||
|
} |
||||
|
} |
||||
|
.tbboxs { |
||||
|
max-width: 690upx; |
||||
|
height: 160upx; |
||||
|
margin: auto; |
||||
|
margin: 20upx auto 5%; |
||||
|
width: 90%; |
||||
|
position: relative; |
||||
|
background-color: #fff; |
||||
|
border-radius: 14rpx; |
||||
|
.tboxbot { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
background-size: 100% 100% !important; |
||||
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(121, 104, 77, 0.2); |
||||
|
/* position: absolute; */ |
||||
|
/* top: 72rpx; */ |
||||
|
/* left: 50%; */ |
||||
|
/* margin-left: -47%; */ |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.bot-img{ |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
position: absolute; |
||||
|
top: 20rpx; |
||||
|
right: 20rpx; |
||||
|
} |
||||
|
.tbtitle { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: absolute; |
||||
|
left: 0upx; |
||||
|
bottom: 0upx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.tbtitle-il{ |
||||
|
background: rgba(98, 212, 166, 1); |
||||
|
border-radius: 50%; |
||||
|
width: 50rpx; |
||||
|
height: 50rpx; |
||||
|
padding: 30rpx; |
||||
|
margin: 0 30rpx 0 50rpx; |
||||
|
.il-img{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tbname { |
||||
|
// font-size: 36upx; |
||||
|
// font-weight: bold; |
||||
|
.tbname-l{ |
||||
|
font-size: 36upx; |
||||
|
font-weight: 400; |
||||
|
color: #444; |
||||
|
margin-bottom: 10rpx; |
||||
|
} |
||||
|
.tbname-k{ |
||||
|
font-size: 36upx; |
||||
|
font-weight: bold; |
||||
|
// color: #CCCCCC; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tbinfo { |
||||
|
width: 90%; |
||||
|
font-size: 24upx; |
||||
|
font-weight: 500; |
||||
|
line-height: 1.4; |
||||
|
position: absolute; |
||||
|
top: 120rpx; |
||||
|
left: 30rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
display: flex; |
||||
|
|
||||
|
// align-items: center; |
||||
|
&::before { |
||||
|
content: ''; |
||||
|
display: inline-block; |
||||
|
width: 24rpx; |
||||
|
height: 28rpx; |
||||
|
margin-right: 10rpx; |
||||
|
background: url($url+'icon-add-da.png') no-repeat; |
||||
|
background-size: 100% 100% !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// .szra1 { |
||||
|
// width: 90%; |
||||
|
// margin: 40upx auto; |
||||
|
// display: flex; |
||||
|
// flex-direction: row; |
||||
|
// flex-wrap: wrap; |
||||
|
|
||||
|
// .list { |
||||
|
// width: 48%; |
||||
|
// margin-bottom: 40upx; |
||||
|
// margin-right: 15rpx; |
||||
|
|
||||
|
// .liimg { |
||||
|
// margin-bottom: 20upx; |
||||
|
|
||||
|
// .szra_img { |
||||
|
// max-width: 360upx; |
||||
|
// width: 100%; |
||||
|
// height: 210upx; |
||||
|
// border-radius: 8upx; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .sztitle { |
||||
|
// font-size: 32upx; |
||||
|
// font-weight: 600; |
||||
|
// color: #333333; |
||||
|
// margin-bottom: 20upx; |
||||
|
// overflow: hidden; |
||||
|
// text-overflow: ellipsis; |
||||
|
// white-space: nowrap; |
||||
|
// } |
||||
|
|
||||
|
// .dsadk { |
||||
|
// font-size: 24rpx; |
||||
|
// font-weight: 500 !important; |
||||
|
// line-height: 1.6; |
||||
|
|
||||
|
// &::before { |
||||
|
// content: ''; |
||||
|
// display: inline-block; |
||||
|
// width: 24rpx; |
||||
|
// height: 26rpx; |
||||
|
// margin-right: 10rpx; |
||||
|
// background: url($url+'icon-add-xiao.png') no-repeat; |
||||
|
// background-size: 100% 100% !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// } |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,492 @@ |
|||||
|
<template> |
||||
|
<view class="centent"> |
||||
|
<view class="centent-name"> |
||||
|
<view :class="['name-name1',titleInd == 1?'active':'']" @click="TitleClick(1)"> |
||||
|
<image :src="'https://static.ticket.sz-trip.com/changshu/images/feiyi/' + (titleInd == 1 ? 'icon1' : 'icon1s') + '.png'" mode=""></image> |
||||
|
非遗推荐 |
||||
|
</view> |
||||
|
<view :class="['name-name2',titleInd == 2?'active':'']" @click="TitleClick(2)"> |
||||
|
<image :src="'https://static.ticket.sz-trip.com/changshu/images/feiyi/' + (titleInd == 1 ? 'icon2s' : 'icon2') + '.png'" mode=""></image> |
||||
|
传承有人 |
||||
|
</view> |
||||
|
<!-- <view class="name-title">非遗精选</view> --> |
||||
|
</view> |
||||
|
<view class="fkiml"> |
||||
|
<view :class="['xwwfbox',istop?'toplm':'follm']" id="lmid"> |
||||
|
<view :class="['xwwfinds',xwwfind==index?'act':'']" v-for="(item,index) in djlist" @click="ckxwwfind(index,item)" :key="index"> |
||||
|
{{item.name}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="main"> |
||||
|
<view class="mainlist"> |
||||
|
<view class="libox" v-for="(el, ind) in djlist[xwwfind].list" @click="gotoPath('/subPackages/other/foodDetail?id='+el.id)" v-if="titleInd == 1" :key="ind"> |
||||
|
<image class="liboxtop" :src="el.typeImg == '' || el.typeImg == null? 'https://qyly1.csly-travel.com/r/cms/www/m/changshu/noimg.png':$geturl480(el.typeImg)" mode=""></image> |
||||
|
<view class="name">{{ el.title}}</view> |
||||
|
<view class="liboxbot"> |
||||
|
<view class="lbrli"> |
||||
|
<view class="lbrliind">{{el.cateType}}</view> |
||||
|
</view> |
||||
|
<view class="title1 text-overflowRows" v-html="el.txt"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="libox" v-for="(el, ind) in tjyrDatas" @click="gotoPath('/subPackages/other/foodCardtjyr?id='+el._id)" v-if="titleInd == 2" :key="ind"> |
||||
|
<image class="liboxtop" :src="el.photo.length == 0? 'https://qyly1.csly-travel.com/r/cms/www/m/changshu/noimg.png':'https://qyly1.csly-travel.com/api/mc-config/model/device/file/t_1684805150186614785?deviceId='+ el._id +'&fileId='+ el.photo[0].fileId +'&useCode=false'" mode=""></image> |
||||
|
<view class="liboxbot"> |
||||
|
<view class="name">{{ el.name}}</view> |
||||
|
<view class="lbrli"> |
||||
|
<view class="lbrliind">{{el.level}}</view> |
||||
|
</view> |
||||
|
<view class="title1 text-overflowRows" v-html="el.introduce"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import back from '@/components/back.vue'; |
||||
|
export default { |
||||
|
components: { |
||||
|
back |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
id: 76, //非遗 |
||||
|
token: '', |
||||
|
titleInd: 1, |
||||
|
info: { |
||||
|
color: true |
||||
|
}, |
||||
|
istop: false, |
||||
|
zslist: [{ |
||||
|
list: [] |
||||
|
}], |
||||
|
first: 0, |
||||
|
count: 10, |
||||
|
xwwfind: 0, |
||||
|
djlist: [{ |
||||
|
name: '全部', |
||||
|
ind: 0, |
||||
|
list: [] |
||||
|
}, |
||||
|
{ |
||||
|
name: '国家级', |
||||
|
ind: 1, |
||||
|
list: [] |
||||
|
}, |
||||
|
{ |
||||
|
name: '江苏省级', |
||||
|
ind: 2, |
||||
|
list: [] |
||||
|
}, |
||||
|
{ |
||||
|
name: '苏州市级', |
||||
|
ind: 3, |
||||
|
list: [] |
||||
|
}, |
||||
|
{ |
||||
|
name: '常熟市级', |
||||
|
ind: 4, |
||||
|
list: [] |
||||
|
} |
||||
|
], |
||||
|
djName: '', |
||||
|
tjyrDatas: [] |
||||
|
} |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
this.first += 10; |
||||
|
this.getDatalist(); |
||||
|
}, |
||||
|
onPageScroll(e) { |
||||
|
if (e.scrollTop > this.lmtop) { |
||||
|
this.istop = true; |
||||
|
} |
||||
|
if (e.scrollTop < this.lmtop) { |
||||
|
this.istop = false; |
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
var that = this; |
||||
|
const query = uni.createSelectorQuery().in(this); |
||||
|
query.select('#lmid').boundingClientRect(data => { |
||||
|
that.lmtop = data.top; |
||||
|
}).exec(); |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.TitleClick(1); |
||||
|
}, |
||||
|
methods: { |
||||
|
ckxwwfind(ind,el) { |
||||
|
this.xwwfind = ind; |
||||
|
if(this.titleInd == 1) { |
||||
|
this.getDatalist(); |
||||
|
}else if(this.titleInd == 2) { |
||||
|
this.djName = el.name; |
||||
|
this.getfyyrDaya(); |
||||
|
} |
||||
|
}, |
||||
|
navto(id) { |
||||
|
uni.navigateTo({url: url}) |
||||
|
}, |
||||
|
TitleClick(type) { |
||||
|
this.titleInd = type; |
||||
|
if(this.titleInd == 1) { |
||||
|
this.getDatalist();//非遗推荐列表 |
||||
|
}else{ |
||||
|
this.getToken(); |
||||
|
} |
||||
|
}, |
||||
|
getDatalist() { |
||||
|
uni.showLoading({title: '加载中...'}); |
||||
|
var url = '/json/content_list.jspx'; |
||||
|
var para = {}; |
||||
|
var that = this; |
||||
|
that.Post({ |
||||
|
apiType: 'old', |
||||
|
channelIds: that.id, |
||||
|
first: that.first, |
||||
|
count: that.count |
||||
|
}, url).then(res => { |
||||
|
if(res) { |
||||
|
var json = []; |
||||
|
json = res; |
||||
|
var tmp = that.djlist; |
||||
|
if (that.xwwfind == 0) { |
||||
|
for (var i = 0; i < json.length; i++) { |
||||
|
tmp[0].list.push(json[i]); |
||||
|
} |
||||
|
that.djlist = tmp; |
||||
|
} |
||||
|
if (that.xwwfind != 0) { |
||||
|
for (var i = 0; i < json.length; i++) { |
||||
|
for(var j=0;j<tmp.length;j++){ |
||||
|
if(json[i].cateLevel == tmp[j].name){ |
||||
|
tmp[j].list.push(json[i]); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
that.djlist = tmp; |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
toOther() { |
||||
|
uni.navigateToMiniProgram({ |
||||
|
appId: 'wx8ece732cc3a87e0f', |
||||
|
path: 'pages/index/index', |
||||
|
envVersion: 'release', |
||||
|
extraData: {}, |
||||
|
success(res) { |
||||
|
console.log("chenggong"); |
||||
|
}, |
||||
|
fail(e) { |
||||
|
console.log(e); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getToken() { |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx' |
||||
|
var para = { |
||||
|
type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken',param:'username=user_xcx&password=Supcon' |
||||
|
}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
that.token = res.data.obj; |
||||
|
if(res.data.success==false){ |
||||
|
that.sxToken(); |
||||
|
}else{ |
||||
|
that.getfyyrDaya(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
sxToken(){ |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx' |
||||
|
var para = {type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken',param:'accessToken='+this.token}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
that.token=res.data.obj; |
||||
|
that.getfyyrDaya(); |
||||
|
}); |
||||
|
}, |
||||
|
getfyyrDaya() { |
||||
|
uni.showLoading({title: '加载中...'}); |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'; |
||||
|
var para = {type:2,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token,param:{ |
||||
|
"code": "0001_fy", |
||||
|
"params": {}, |
||||
|
"page": 0, |
||||
|
"size": 0, |
||||
|
"result": {}, |
||||
|
"orders": [] |
||||
|
}}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
if (res.data.success) { |
||||
|
let json = res.data.obj.data; |
||||
|
that.tjyrDatas = []; |
||||
|
if(that.djName == '') { |
||||
|
that.tjyrDatas = json; |
||||
|
}else{ |
||||
|
for (let i = 0; i < json.length; i++) { |
||||
|
if(json[i].level == that.djName) { |
||||
|
that.tjyrDatas.push(json[i]) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
uni.hideLoading(); |
||||
|
}else { |
||||
|
uni.hideLoading(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
view { |
||||
|
box-sizing: content-box; |
||||
|
} |
||||
|
.centent { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 750upx; |
||||
|
overflow-y: scroll; |
||||
|
position: relative; |
||||
|
background: #A2E0DB; |
||||
|
|
||||
|
.centent-name { |
||||
|
width: 100%; |
||||
|
// margin: 0 auto 30rpx auto; |
||||
|
// display: flex; |
||||
|
// align-items: center; |
||||
|
position: relative; |
||||
|
height: 93rpx; |
||||
|
background: #fff; |
||||
|
font-weight: 500; |
||||
|
font-size: 31rpx; |
||||
|
color: #0BB0A3; |
||||
|
|
||||
|
image { |
||||
|
width: 33.33rpx; |
||||
|
height: 33.33rpx; |
||||
|
margin-right: 3rpx; |
||||
|
} |
||||
|
|
||||
|
&>view { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.name-name { |
||||
|
font-size: 30rpx; |
||||
|
font-family: Source Han Sans CN; |
||||
|
font-weight: 500; |
||||
|
color: #5a5a5a; |
||||
|
padding: 30rpx 0rpx; |
||||
|
width: 50%;text-align: center;cursor: pointer; |
||||
|
border-bottom: 1rpx solid #4A9AF9; |
||||
|
} |
||||
|
.name-name.active { |
||||
|
// background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 100%); |
||||
|
// color: #FFFFFF; |
||||
|
} |
||||
|
.name-name1 { |
||||
|
width: 375rpx; |
||||
|
height: 93rpx; |
||||
|
background: #E6F8F7; |
||||
|
border-radius: 33rpx 33rpx 0rpx 0rpx; |
||||
|
} |
||||
|
.name-name1.active { |
||||
|
width: 410rpx; |
||||
|
background: url("https://static.ticket.sz-trip.com/changshu/images/feiyi/leftBg.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
.name-name2 { |
||||
|
width: 375rpx; |
||||
|
height: 93rpx; |
||||
|
background: #E6F8F7; |
||||
|
border-radius: 33rpx 33rpx 0rpx 0rpx; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
} |
||||
|
.name-name2.active { |
||||
|
width: 410rpx; |
||||
|
background: url("https://static.ticket.sz-trip.com/changshu/images/feiyi/rightBg.png") no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
z-index: 2; |
||||
|
} |
||||
|
.active { |
||||
|
font-weight: bold; |
||||
|
font-size: 31rpx; |
||||
|
color: #111111; |
||||
|
} |
||||
|
.name-title { |
||||
|
font-size: 32rpx; |
||||
|
font-family: Source Han Sans CN; |
||||
|
font-weight: 500; |
||||
|
color: #8b8b8b; |
||||
|
line-height: 28rpx; |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.follm { |
||||
|
position: absolute; |
||||
|
left: 0rpx; |
||||
|
top: 14rpx; |
||||
|
} |
||||
|
|
||||
|
.toplm { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
background: #F2F2F2; |
||||
|
height: 80rpx; |
||||
|
z-index: 9; |
||||
|
} |
||||
|
|
||||
|
.fkiml { |
||||
|
width: 93%; |
||||
|
position: relative; |
||||
|
height: 80rpx; |
||||
|
margin: 20rpx auto 0rpx auto; |
||||
|
} |
||||
|
|
||||
|
.xwwfbox { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
white-space: nowrap; |
||||
|
align-items: center; |
||||
|
overflow-x: scroll; |
||||
|
overflow-y: hidden; |
||||
|
justify-content: center; |
||||
|
// margin-bottom: 16upx; |
||||
|
// padding-bottom: 20upx; |
||||
|
|
||||
|
.xwwfinds { |
||||
|
background: linear-gradient(0deg, #E6F8F7, #FFFFFF); |
||||
|
border-radius: 30upx; |
||||
|
font-weight: 500; |
||||
|
font-size: 29rpx; |
||||
|
color: #00AEA0; |
||||
|
padding: 0 15upx; |
||||
|
height: 60rpx; |
||||
|
line-height: 60rpx; |
||||
|
margin-right: 20upx; |
||||
|
|
||||
|
&:first-child { |
||||
|
margin-left: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.act { |
||||
|
background: linear-gradient(0deg, #009E91, #5FF4E8); |
||||
|
border: 2rpx solid rgba(255,255,255,0.8); |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
.xwwfbox::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.main { |
||||
|
padding: 20rpx 4%; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.mainlist .libox { |
||||
|
width: 697rpx; |
||||
|
height: 620rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(89,166,160,0.32); |
||||
|
border-radius: 20rpx; |
||||
|
margin-bottom: 27rpx; |
||||
|
padding: 13.3rpx; |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.libox .name { |
||||
|
font-weight: 500; |
||||
|
font-size: 35rpx; |
||||
|
color: #000000; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 15rpx 10rpx; |
||||
|
|
||||
|
&::after { |
||||
|
content: ''; |
||||
|
display: inline-block; |
||||
|
width: 33.33rpx; |
||||
|
height: 33.33rpx; |
||||
|
background: url(https://static.ticket.sz-trip.com/changshu/images/feiyi/rightIcon.png) no-repeat; |
||||
|
background-size: 100% 100%; |
||||
|
position: absolute; |
||||
|
right: 55rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.libox .liboxtop { |
||||
|
width: 670rpx; |
||||
|
height: 367rpx; |
||||
|
border-radius: 13rpx; |
||||
|
position: relative; |
||||
|
object-fit: cover; |
||||
|
margin: 0 auto; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.liboxtop .xing { |
||||
|
position: absolute; |
||||
|
top: 15upx; |
||||
|
left: 35upx; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.liboxtop .xing .img { |
||||
|
width: 148upx; |
||||
|
height: 26upx; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.liboxbot .title1 { |
||||
|
font-weight: 500; |
||||
|
font-size: 25rpx; |
||||
|
color: #000000; |
||||
|
margin-top: 20rpx; |
||||
|
padding: 0 10rpx; |
||||
|
} |
||||
|
|
||||
|
.lbrli { |
||||
|
display: flex; |
||||
|
white-space: nowrap; |
||||
|
overflow-x: scroll; |
||||
|
overflow-y: hidden; |
||||
|
padding: 0 10rpx; |
||||
|
|
||||
|
.lbrliind { |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 500; |
||||
|
color: #00AEA0; |
||||
|
border: 1rpx solid #82DFD8; |
||||
|
padding: 5upx 10upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,241 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<cover-view class="fjdd" v-if="ismap"> |
||||
|
<cover-view :class="['fjdd-lm',isyy==1?'fjdd-active':'']" @click="setLm(1)">停车场</cover-view> |
||||
|
<cover-view :class="['fjdd-lm',isyy==1?'':'fjdd-active']" @click="setLm(2)">厕所</cover-view> |
||||
|
</cover-view> |
||||
|
<view class="mparq"> |
||||
|
<map v-if="ismap" @markertap="getMarker" :latitude="lat" :longitude="lon" :markers="covers" show-location></map> |
||||
|
</view> |
||||
|
<view class="des"> |
||||
|
<view class="des-left"> |
||||
|
<view class="name">{{nowData.name}}</view> |
||||
|
<view class="address">{{nowData.address}}</view> |
||||
|
</view> |
||||
|
<view class="des-right" @click="daohan">导航</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
var amapFile = require('@/static/js/amap-wx.js'); //如：../../libs/amap-wx.js |
||||
|
var myAmapFun; |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return{ |
||||
|
lon:'', |
||||
|
lat:'', |
||||
|
covers:[], |
||||
|
nowData:{}, |
||||
|
isyy:2, |
||||
|
ismap:true |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.isyy=option.isyy; |
||||
|
var pages = getCurrentPages(); |
||||
|
var page = pages[pages.length - 1].route; |
||||
|
// this.share.path='/'+page+'?isyy='+this.isyy; |
||||
|
// console.log(this.share.path); |
||||
|
// this.shareline.query={isyy:this.isyy} |
||||
|
myAmapFun = new amapFile.AMapWX({ |
||||
|
key: 'e40bb317c48b66d558aa77ab126ef8c1' |
||||
|
}); |
||||
|
}, |
||||
|
onReady() { |
||||
|
let self = this; |
||||
|
uni.getLocation({ |
||||
|
type: 'gcj02', |
||||
|
success: function(res) { |
||||
|
self.lon = res.longitude; |
||||
|
self.lat = res.latitude; |
||||
|
self.setLm(self.isyy); |
||||
|
// console.log(res.longitude,5555555) |
||||
|
// console.log(res.latitude,5555555) |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
methods:{ |
||||
|
daohan(){ |
||||
|
if(this.nowData.location != ''&&this.nowData.location != null&&this.nowData.location != undefined) { |
||||
|
var datas = this.nowData.location.split(","); |
||||
|
uni.openLocation({ |
||||
|
latitude: Number(datas[1]), |
||||
|
longitude:Number(datas[0]) |
||||
|
}) |
||||
|
}else{ |
||||
|
uni.openLocation({ |
||||
|
latitude:this.nowData.latitude, |
||||
|
longitude:this.nowData.longitude |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
getMarker(e){ |
||||
|
this.ismap=false; |
||||
|
var id=e.detail.markerId; |
||||
|
for(var i=0;i<this.covers.length;i++){ |
||||
|
if(this.covers[i].id==id){ |
||||
|
this.nowData=this.covers[i]; |
||||
|
this.covers[i].width=38; |
||||
|
this.covers[i].height=38; |
||||
|
}else{ |
||||
|
this.covers[i].width=28; |
||||
|
this.covers[i].height=28; |
||||
|
} |
||||
|
} |
||||
|
this.ismap=true; |
||||
|
}, |
||||
|
setLm(type){ |
||||
|
this.ismap=false; |
||||
|
this.isyy=type; |
||||
|
if(this.isyy==1){ |
||||
|
this.getfjyy(); |
||||
|
}else{ |
||||
|
this.getfjjc(); |
||||
|
} |
||||
|
}, |
||||
|
getfjyy(){ |
||||
|
let self = this; |
||||
|
myAmapFun.getPoiAround({//获取附近停车场 |
||||
|
querytypes:'停车场', |
||||
|
success: function(data){ |
||||
|
console.log(data) |
||||
|
var tmp=[]; |
||||
|
for(var i=0;i<data.markers.length;i++){ |
||||
|
tmp.push({ |
||||
|
id:i, |
||||
|
width:28, |
||||
|
height:28, |
||||
|
latitude: data.markers[i].latitude, |
||||
|
longitude: data.markers[i].longitude, |
||||
|
iconPath: 'https://tumaoss.oss-cn-hangzhou.aliyuncs.com/wencheng_xcx/m-ys-yiyuan.png', |
||||
|
name:data.markers[i].name, |
||||
|
address:data.markers[i].address |
||||
|
}) |
||||
|
} |
||||
|
tmp[0].width=38; |
||||
|
tmp[0].height=38; |
||||
|
self.covers= tmp; |
||||
|
self.nowData=data.poisData[0]; |
||||
|
self.ismap = true; |
||||
|
}, |
||||
|
// fail:function(){ |
||||
|
// self.ismap = true; |
||||
|
// uni.showToast({ |
||||
|
// title: '获取失败' |
||||
|
// }); |
||||
|
// } |
||||
|
}) |
||||
|
}, |
||||
|
getfjjc(){ |
||||
|
let self = this; |
||||
|
myAmapFun.getPoiAround({//获取附近厕所 |
||||
|
querytypes:'厕所', |
||||
|
success: function(data){ |
||||
|
var tmp=[]; |
||||
|
for(var i=0;i<data.markers.length;i++){ |
||||
|
tmp.push({ |
||||
|
id:i, |
||||
|
width:28, |
||||
|
height:28, |
||||
|
latitude: data.markers[i].latitude, |
||||
|
longitude: data.markers[i].longitude, |
||||
|
iconPath: 'https://tumaoss.oss-cn-hangzhou.aliyuncs.com/wencheng_xcx/m-ys-gonganju.png', |
||||
|
name:data.markers[i].name, |
||||
|
address:data.markers[i].address |
||||
|
}) |
||||
|
} |
||||
|
tmp[0].width=38; |
||||
|
tmp[0].height=38; |
||||
|
self.covers= tmp; |
||||
|
self.nowData=data.poisData[0]; |
||||
|
self.ismap = true; |
||||
|
}, |
||||
|
fail:function(e){ |
||||
|
console.log('e',e) |
||||
|
self.ismap = true; |
||||
|
uni.showToast({ |
||||
|
title: '获取失败' |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.fjdd{ |
||||
|
position: absolute; |
||||
|
top: 20rpx; |
||||
|
left: 225rpx; |
||||
|
width: 300rpx; |
||||
|
height: 70rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 999; |
||||
|
border-radius: 10rpx; |
||||
|
font-size: 26rpx; |
||||
|
border: 1rpx solid #227BFB; |
||||
|
&-lm{ |
||||
|
flex: 1; |
||||
|
line-height: 70rpx; |
||||
|
text-align: center; |
||||
|
color: #227BFB; |
||||
|
background: #EEF6FF; |
||||
|
} |
||||
|
&-active{ |
||||
|
background: #227BFB; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
.content{ |
||||
|
width: 750rpx; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
.mparq{ |
||||
|
width: 750rpx; |
||||
|
height: 85vh; |
||||
|
background: #eaeaea; |
||||
|
map{ |
||||
|
width: 750rpx; |
||||
|
height: 85vh; |
||||
|
} |
||||
|
} |
||||
|
.des{ |
||||
|
width: 750rpx; |
||||
|
height: 15vh; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
&-left{ |
||||
|
margin-left: 15rpx; |
||||
|
width: 600rpx; |
||||
|
.name{ |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
.address{ |
||||
|
font-size: 24rpx; |
||||
|
color: #ccc; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
&-right{ |
||||
|
width: 100rpx; |
||||
|
height: 60rpx; |
||||
|
background: #438BF8; |
||||
|
border-radius: 20rpx; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,231 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="bgtop" v-if="xllist.photo.length!=0" :style="{background: 'url(https://qyly1.csly-travel.com/api/mc-config/model/device/file/t_1684805150186614785?deviceId='+ xllist._id +'&fileId='+ xllist.photo[0].fileId +'&useCode=false) no-repeat'}"></view> |
||||
|
<view class="bgboxs"> |
||||
|
<view class="xwtitle"> |
||||
|
<view class="tit"> |
||||
|
<view class="icon"> |
||||
|
<image :src="$getimg('icon-yyyc.png')" mode=""></image> <!-- 非遗 --> |
||||
|
</view> |
||||
|
<view class="titwz">{{xllist.name }}</view> |
||||
|
</view> |
||||
|
<view class="xqtimeright"> |
||||
|
<text class="sjsj1">{{xllist.level}}</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="xwnr"> |
||||
|
<view class="xwnrdiv" v-html="xllist.introduce"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
components:{}, |
||||
|
data() { |
||||
|
return { |
||||
|
id: 0, |
||||
|
xllist: { |
||||
|
photo: [] |
||||
|
}, |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.id = option.id; |
||||
|
this.getToken();//传承有人 |
||||
|
}, |
||||
|
onReady() {}, |
||||
|
onShareAppMessage() {}, |
||||
|
methods: { |
||||
|
getToken() { |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx' |
||||
|
var para = { |
||||
|
type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken',param:'username=user_xcx&password=Supcon' |
||||
|
}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
that.token = res.data.obj; |
||||
|
if(res.data.success==false){ |
||||
|
that.sxToken(); |
||||
|
}else{ |
||||
|
that.getfyyrDaya(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
sxToken(){ |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx' |
||||
|
var para = {type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken',param:'accessToken='+this.token}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
that.token=res.data.obj; |
||||
|
that.getfyyrDaya(); |
||||
|
}); |
||||
|
}, |
||||
|
getfyyrDaya() { |
||||
|
uni.showLoading({title: '加载中...'}); |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'; |
||||
|
var para = {type:2,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token,param:{ |
||||
|
"code": "0001_fy", |
||||
|
"params": {}, |
||||
|
"page": 0, |
||||
|
"size": 0, |
||||
|
"result": {}, |
||||
|
"orders": [] |
||||
|
}}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
if (res.data.success) { |
||||
|
let json = res.data.obj.data; |
||||
|
for (let i = 0; i < json.length; i++) { |
||||
|
if(that.id == json[i]._id) { |
||||
|
that.xllist = json[i] |
||||
|
} |
||||
|
} |
||||
|
console.log(that.xllist) |
||||
|
uni.hideLoading(); |
||||
|
}else { |
||||
|
uni.hideLoading(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
$url:'https://qyly1.csly-travel.com/r/cms/www/m/changshu/'; |
||||
|
page { |
||||
|
background: #ffffff; |
||||
|
} |
||||
|
.content { |
||||
|
width: 750rpx; |
||||
|
// padding-top: 30upx; |
||||
|
overflow-x: hidden; |
||||
|
.bgtoptxt{ |
||||
|
font-size: 26upx; |
||||
|
font-weight: 500; |
||||
|
color: #FFFFFF; |
||||
|
background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 100%); |
||||
|
border-radius: 26upx; |
||||
|
width: 160upx; |
||||
|
height: 56upx; |
||||
|
line-height: 56upx; |
||||
|
text-align: center; |
||||
|
margin: 0upx 0 30upx 30upx; |
||||
|
} |
||||
|
.bgtop{ |
||||
|
width: 100%; |
||||
|
height: 460upx; |
||||
|
background-size: 100% 100% !important; |
||||
|
} |
||||
|
.bgboxs{ |
||||
|
width: 100%; |
||||
|
margin: -40rpx auto 0; |
||||
|
background: #fff; |
||||
|
border-radius: 30rpx 30rpx 0rpx 0rpx; |
||||
|
.xwtitle { |
||||
|
font-size: 40upx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 50rpx 20rpx 0; |
||||
|
position: relative; |
||||
|
.tit{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.icon{ |
||||
|
width: 62upx; |
||||
|
height: 56upx; |
||||
|
margin-right: 10rpx; |
||||
|
image{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.xqtimeright { |
||||
|
font-size: 24rpx; |
||||
|
position: absolute; |
||||
|
right: 50rpx; |
||||
|
image{ |
||||
|
width: 28rpx; |
||||
|
height: 28rpx; |
||||
|
} |
||||
|
} |
||||
|
.xqtimeright .sjsj::before { |
||||
|
content: ''; |
||||
|
display: inline-block; |
||||
|
width: 28rpx; |
||||
|
height: 28rpx; |
||||
|
background: url( $url+"icon-dianzhan.png") no-repeat; |
||||
|
background-size: 100% auto; |
||||
|
margin-right: 10rpx; |
||||
|
margin-top: -9rpx; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.xwnr { |
||||
|
font-size: 24upx; |
||||
|
font-weight: 500; |
||||
|
color: #666; |
||||
|
width: 90%; |
||||
|
margin: 30upx auto 0 auto; |
||||
|
line-height: 1.6; |
||||
|
.xwnrdiv { |
||||
|
margin: 0rpx 0rpx 55rpx 0rpx; |
||||
|
line-height: 2; |
||||
|
} |
||||
|
} |
||||
|
.xwdzAllfotter { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-bottom: 40rpx; |
||||
|
.xwdzAll { |
||||
|
overflow: hidden; |
||||
|
border: 1rpx solid #d6d6d6; |
||||
|
border-radius: 35rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
width: 155rpx; |
||||
|
justify-content: center; |
||||
|
height: 70rpx; |
||||
|
.xwdzimg { |
||||
|
width: 32rpx; |
||||
|
height: 32rpx; |
||||
|
float: left; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
.xwdzsl { |
||||
|
font-size: 28rpx; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: bold; |
||||
|
color: #111111; |
||||
|
margin: 0rpx 0rpx 0rpx 18rpx; |
||||
|
float: left; |
||||
|
&.active { |
||||
|
color: #ff3335; |
||||
|
} |
||||
|
} |
||||
|
&.active{ |
||||
|
border: 1rpx solid #ff3334; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.yudingimg{ |
||||
|
width: 110rpx; |
||||
|
height: 110rpx; |
||||
|
position: fixed; |
||||
|
top: 278rpx; |
||||
|
right: 50rpx; |
||||
|
z-index: 999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,116 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="bgtop" v-if="xllist.midPic!=''" :style="{background: 'url('+$geturl(xllist.midPic)+') no-repeat'}"></view> |
||||
|
|
||||
|
<view class="bgboxs"> |
||||
|
<view class="xwtitle"> |
||||
|
<view class="tit"> |
||||
|
<view class="icon"> |
||||
|
<image v-if="xllist.channel_id==92" :src="$getimg('wf-x-ms-icon.png')" mode=""></image> <!-- 美食 --> |
||||
|
<image v-if="xllist.channel_id==121" :src="$getimg('wf-x-tc-icon.png')" mode=""></image> <!-- 特产 --> |
||||
|
<image v-if="xllist.channel_id==76" :src="$getimg('icon-yyyc.png')" mode=""></image> <!-- 非遗 --> |
||||
|
<image v-if="xllist.channel_id==116" :src="$getimg('wf-x-wc-icon.png')" mode=""></image> <!-- 文创 --> |
||||
|
</view> |
||||
|
<view class="titwz">{{xllist.title }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="xwnr"> |
||||
|
<view class="xwnrdiv" v-html="xllist.content"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
xllist: {} |
||||
|
} |
||||
|
}, |
||||
|
onLoad(option) { |
||||
|
this.getDetail(option.id) |
||||
|
}, |
||||
|
methods: { |
||||
|
getDetail(id) { |
||||
|
var para = { |
||||
|
id: id |
||||
|
}; |
||||
|
var url = '/newsdetail.jspx'; |
||||
|
var that = this; |
||||
|
this.httpPost(that, url, para, function(res) { |
||||
|
if (res.data.status == 200) { |
||||
|
var tmp = res.data; |
||||
|
if(tmp.content!=undefined){ |
||||
|
tmp.content = tmp.content.replace(/src="/gi, 'src="https://qyly1.csly-travel.com'); |
||||
|
|
||||
|
tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) { |
||||
|
return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/gi, 'style="max-width:100%;height:auto;width:100%;"'); // 替换style |
||||
|
}); |
||||
|
tmp.content = tmp.content.replace(/<img[^>]*>/gi, function(match, capture) { |
||||
|
return match.replace(/<img /gi, '<img style="max-width:100%;height:auto;width:100%;"'); // 替换style |
||||
|
}); |
||||
|
} |
||||
|
that.xllist = tmp; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
width: 750rpx; |
||||
|
background: #ffffff; |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
|
||||
|
.bgtop{ |
||||
|
width: 100%; |
||||
|
height: 460upx; |
||||
|
background-size: 100% 100% !important; |
||||
|
} |
||||
|
|
||||
|
.bgboxs{ |
||||
|
width: 100%; |
||||
|
margin: -40rpx auto 0; |
||||
|
background: #fff; |
||||
|
border-radius: 30rpx 30rpx 0rpx 0rpx; |
||||
|
.xwtitle { |
||||
|
font-size: 40upx; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 50rpx 20rpx 0; |
||||
|
position: relative; |
||||
|
.tit{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.icon{ |
||||
|
width: 62upx; |
||||
|
height: 56upx; |
||||
|
margin-right: 10rpx; |
||||
|
image{ |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.xwnr { |
||||
|
font-size: 24upx; |
||||
|
font-weight: 500; |
||||
|
color: #666; |
||||
|
width: 90%; |
||||
|
margin: 30upx auto 0 auto; |
||||
|
line-height: 1.6; |
||||
|
.xwnrdiv { |
||||
|
margin: 0rpx 0rpx 55rpx 0rpx; |
||||
|
line-height: 2; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,108 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="box"> |
||||
|
<navigator :url="'/subPackages/other/foodDetail?id='+item.id" v-for="(item,index) in list" :key="index" class="item"> |
||||
|
<image :src="$geturl4(item.typeImg)" lazy-load="true" mode="aspectFill" class="headimg"></image> |
||||
|
<view class="content"> |
||||
|
{{item.title}} |
||||
|
<view class="subtitle" v-html="item.txt"></view> |
||||
|
</view> |
||||
|
<image src="https://static.ticket.sz-trip.com/changshu/images/food/rightIcon.png" class="rightIcon"></image> |
||||
|
</navigator> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: [], |
||||
|
} |
||||
|
}, |
||||
|
onReady() { |
||||
|
this.getList() |
||||
|
}, |
||||
|
methods: { |
||||
|
getList() { |
||||
|
this.Post({ |
||||
|
apiType: 'old', |
||||
|
channelIds: 92, |
||||
|
orderBy: 2, |
||||
|
first: 0, |
||||
|
count: 50 |
||||
|
}, '/json/content_list.jspx?channelIds').then(res => { |
||||
|
if(res) { |
||||
|
this.list = res |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg { |
||||
|
height: 100vh; |
||||
|
background: #A2E0DB; |
||||
|
} |
||||
|
|
||||
|
.box { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
justify-content: space-around; |
||||
|
flex-direction: column; |
||||
|
height: 100vh; |
||||
|
overflow-x: auto; |
||||
|
} |
||||
|
|
||||
|
.item { |
||||
|
width: 533rpx; |
||||
|
height: 615rpx; |
||||
|
margin: 40rpx; |
||||
|
border-radius: 20rpx; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.headimg { |
||||
|
width: 533rpx; |
||||
|
height: 467rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
width: 467rpx; |
||||
|
height: 203rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
padding: 20rpx; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 33rpx; |
||||
|
|
||||
|
.subtitle { |
||||
|
width: 359rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
display: -webkit-box; |
||||
|
-webkit-line-clamp: 3; |
||||
|
-webkit-box-orient: vertical; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.rightIcon { |
||||
|
width: 93.33rpx; |
||||
|
height: 93.33rpx; |
||||
|
position: absolute; |
||||
|
bottom: 33rpx; |
||||
|
right: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,25 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<web-view src="https://qyly1.csly-travel.com/csxing-h5/pages/wentilv/index.html"></web-view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return{ |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,372 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="leixing"> |
||||
|
<view :class="['ggzxclist',ggzxcind===ind?'active':'']" v-for="(el,ind) in ggzxclist" :key="ind" @click="setLm(el.id)">{{el.name}}</view> |
||||
|
</view> |
||||
|
<view class="zxclist" v-show="ggzxcind==0"> |
||||
|
<view class="item" v-for="(el,ind) in datas" :key="ind"> |
||||
|
<view class="tit">{{el.name}}</view> |
||||
|
<view class="zxcsl"> |
||||
|
<view class="cwzs"> |
||||
|
<view class="wz">车位信息</view> |
||||
|
<view class="sz">{{el.capacity}}</view> |
||||
|
</view> |
||||
|
<view class="cwzs"> |
||||
|
<view class="wz">余位信息</view> |
||||
|
<view class="sz">{{el.availBike}}</view> |
||||
|
</view> |
||||
|
<!-- <view class="cwzs02"> |
||||
|
<view class="wz">更新时间</view> |
||||
|
<view class="sz">{{el.updateTime}}</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
<view class="dizhi"> |
||||
|
<view class="dz">地址：{{el.address}}</view> |
||||
|
<view class="dzimg" @click="daohang(el.jwd)">导航</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="zxclistditu" v-show="ggzxcind==1"> |
||||
|
<view class="mparq"> |
||||
|
<map class="map" v-if="isMap" @markertap="getMarker" :latitude="latitude" :longitude="longitude" :markers="markers" show-location></map> |
||||
|
</view> |
||||
|
<view class="des"> |
||||
|
<view class="des-left"> |
||||
|
<!-- <view class="des-left-item"> |
||||
|
<view class="name">{{nowData.title}}</view> |
||||
|
<view class="address">{{nowData.address}}</view> |
||||
|
</view> |
||||
|
<view class="des-left-item"> |
||||
|
<view class="name">车位信息</view> |
||||
|
<view class="address">{{nowData.capacity}}</view> |
||||
|
</view> |
||||
|
<view class="des-left-item"> |
||||
|
<view class="name">剩余车位</view> |
||||
|
<view class="address">{{nowData.availBike}}</view> |
||||
|
</view> --> |
||||
|
<view class="name">{{nowData.title}}</view> |
||||
|
<view class="parkNun"> |
||||
|
<view class="parkNun-item"> |
||||
|
<view class="parkNun-item-name">车位信息:</view> |
||||
|
<view class="parkNun-item-num">{{nowData.capacity}}</view> |
||||
|
</view> |
||||
|
<view class="parkNun-item"> |
||||
|
<view class="parkNun-item-name">余位信息:</view> |
||||
|
<view class="parkNun-item-num">{{nowData.availBike}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="address">{{nowData.address}}</view> |
||||
|
|
||||
|
</view> |
||||
|
<view class="des-right" @click="daohan()">导航</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
var amapFile = require('@/static/js/amap-wx.js'); //如：../../libs/amap-wx.js |
||||
|
var myAmapFun; |
||||
|
var poiDatas = []; |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return{ |
||||
|
ggzxcind:0, |
||||
|
ggzxclist:[ |
||||
|
{name:'列表',id:1}, |
||||
|
{name:'地图',id:2} |
||||
|
], |
||||
|
isMap: false, |
||||
|
latitude: '', |
||||
|
longitude: '', |
||||
|
markers:[],//列表和图钉数据 |
||||
|
nowData: {}, //当前选中点 |
||||
|
token:'', |
||||
|
datas: [], |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getToken(); |
||||
|
myAmapFun = new amapFile.AMapWX({ |
||||
|
key: 'e40bb317c48b66d558aa77ab126ef8c1' |
||||
|
}); |
||||
|
uni.getLocation({ |
||||
|
type: 'gcj02', |
||||
|
isHighAccuracy:true, |
||||
|
complete: (res)=> { |
||||
|
console.log(res) |
||||
|
this.latitude = res.latitude; |
||||
|
this.longitude = res.longitude; |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
methods: { |
||||
|
getToken(){ |
||||
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon'; |
||||
|
var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon'; |
||||
|
var para = {}; |
||||
|
var that = this; |
||||
|
that.httpGetxin(that, url, para, function(res) { |
||||
|
// console.log(res.data.obj); |
||||
|
that.token=res.data.obj; |
||||
|
if(res.data.success==false){ |
||||
|
that.sxToken(); |
||||
|
}else{ |
||||
|
that.getdata(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
sxToken(){ |
||||
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken?accessToken='+this.token; |
||||
|
var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/refreshToken?accessToken='+this.token; |
||||
|
var para = {}; |
||||
|
var that = this; |
||||
|
that.httpGetxin(that, url, para, function(res) { |
||||
|
that.token=res.data.obj; |
||||
|
that.getdata(); |
||||
|
}); |
||||
|
}, |
||||
|
getdata(){ |
||||
|
uni.showToast({ |
||||
|
title: '加载中...', |
||||
|
icon:'loading', |
||||
|
}); |
||||
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token; |
||||
|
var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token; |
||||
|
var para = { |
||||
|
"code": "0001_zxc", |
||||
|
"params": {}, |
||||
|
"page": 0, |
||||
|
"size": 0, |
||||
|
"result": {}, |
||||
|
"orders": [] |
||||
|
}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
if (res.data.success) { |
||||
|
uni.hideToast(); |
||||
|
that.datas =[]; |
||||
|
that.datas = res.data.obj.info; |
||||
|
that.getditu(); |
||||
|
}else { |
||||
|
uni.showToast({ |
||||
|
title: '加载中...', |
||||
|
icon:'loading', |
||||
|
duration:20000 |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
daohang(jwd){ |
||||
|
var lnglat =jwd.split(","); |
||||
|
this.lng = lnglat[0]; |
||||
|
this.lat = lnglat[1]; |
||||
|
var that=this; |
||||
|
uni.openLocation({ |
||||
|
latitude:Number(that.lat), |
||||
|
longitude:Number(that.lng), |
||||
|
complete(e) { |
||||
|
console.log(e); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
setLm(id){ |
||||
|
var that = this; |
||||
|
if(id==1){ |
||||
|
that.ggzxcind=0; |
||||
|
}else{ |
||||
|
that.ggzxcind=1; |
||||
|
} |
||||
|
}, |
||||
|
getditu(){ |
||||
|
this.isMap = false; |
||||
|
var that = this; |
||||
|
var pois = []; |
||||
|
for (var i = 0; i < that.datas.length; i++) { |
||||
|
var tmp = that.datas[i]; |
||||
|
var lnglat = that.datas[i].jwd.split(","); |
||||
|
var p = { |
||||
|
id: i, |
||||
|
title: tmp.name, |
||||
|
address: tmp.address, |
||||
|
availBike:tmp.availBike,//余位 |
||||
|
capacity:tmp.capacity,//总数 |
||||
|
latitude: Number(lnglat[1]), |
||||
|
longitude: Number(lnglat[0]), |
||||
|
iconPath: "https://qyly1.csly-travel.com/r/cms/www/m/changshu/icon-dituggzxc.png", |
||||
|
width: 38, |
||||
|
height: 38, |
||||
|
label: { |
||||
|
color: '#4A9AF9 ', |
||||
|
fontSize: 12, |
||||
|
content: tmp.name, |
||||
|
anchorX: -35, |
||||
|
anchorY: 0 |
||||
|
} |
||||
|
}; |
||||
|
pois.push(p); |
||||
|
} |
||||
|
that.markers = pois; |
||||
|
that.nowData=that.markers[0]; |
||||
|
that.isMap = true; |
||||
|
uni.hideToast() |
||||
|
}, |
||||
|
getMarker(e){ |
||||
|
this.ismap=false; |
||||
|
var id=e.detail.markerId; |
||||
|
for(var i=0;i<this.markers.length;i++){ |
||||
|
if(this.markers[i].id==id){ |
||||
|
this.nowData=this.markers[i]; |
||||
|
this.markers[i].width=38; |
||||
|
this.markers[i].height=38; |
||||
|
}else{ |
||||
|
this.markers[i].width=28; |
||||
|
this.markers[i].height=28; |
||||
|
} |
||||
|
} |
||||
|
this.ismap=true; |
||||
|
}, |
||||
|
daohan(){ |
||||
|
uni.openLocation({ |
||||
|
latitude:this.nowData.latitude, |
||||
|
longitude:this.nowData.longitude |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.leixing{ |
||||
|
display: flex; |
||||
|
width: 200px; |
||||
|
margin: 15px auto; |
||||
|
text-align: center; |
||||
|
border-radius: 30px; |
||||
|
.ggzxclist{ |
||||
|
width: 100px; |
||||
|
padding: 10px 0; |
||||
|
background-color: #f5f5f5; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
.active{ |
||||
|
color: #ffffff; |
||||
|
background:linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%); |
||||
|
} |
||||
|
} |
||||
|
.zxclistditu{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
.mparq{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.map { |
||||
|
width: 100%; |
||||
|
height: 85vh; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.zxclist{ |
||||
|
width: 90%; |
||||
|
margin: 30upx auto; |
||||
|
.item{ |
||||
|
margin-bottom: 7%; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0rpx 0rpx 15rpx 10rpx #eee; |
||||
|
background: #fff; |
||||
|
line-height: 2; |
||||
|
color: #666666; |
||||
|
.tit{ |
||||
|
font-size: 36rpx; |
||||
|
background:linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%); |
||||
|
padding: 10upx 30upx; |
||||
|
color: #ffffff; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.dizhi{ |
||||
|
padding:10rpx 30rpx 30rpx 30rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
.dzimg{ |
||||
|
padding: 0 30upx; |
||||
|
background:#2dc15c; |
||||
|
color: #ffffff; |
||||
|
border-radius: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
.zxcsl{ |
||||
|
padding:0rpx 30rpx; |
||||
|
display: flex; |
||||
|
justify-content:center; |
||||
|
text-align: center; |
||||
|
margin: 10rpx 0 0rpx 0; |
||||
|
.cwzs{ |
||||
|
width: 50%; |
||||
|
} |
||||
|
.sz{ |
||||
|
color: #333333; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.des{ |
||||
|
width: 750rpx; |
||||
|
height: 80px; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
bottom: 0px; |
||||
|
&-left{ |
||||
|
|
||||
|
margin-left: 15rpx; |
||||
|
width: 600rpx; |
||||
|
.name{ |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
.address{ |
||||
|
font-size: 24rpx; |
||||
|
color: #000; |
||||
|
font-weight: bold; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
&-right{ |
||||
|
width: 100rpx; |
||||
|
height: 60rpx; |
||||
|
background: #438BF8; |
||||
|
border-radius: 20rpx; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
.parkNun{ |
||||
|
display: flex; |
||||
|
padding: 10rpx 0; |
||||
|
&-item{ |
||||
|
display: flex; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: bold; |
||||
|
color: #000; |
||||
|
margin-right: 30rpx; |
||||
|
&-num{ |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,638 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="title">客流实时数据</view> |
||||
|
<view class="titledate">以下数据以景区现场发布为准</view> |
||||
|
<view class="kllist" v-for="(el,ind) in jqdatas" :key="ind"> |
||||
|
<view class="left"> |
||||
|
<view class="name">{{el.name}}</view> |
||||
|
<view class="cont"> |
||||
|
<view class="conlist"> |
||||
|
<view class="conname cleft">实时在园</view> |
||||
|
<view class="connum cleft">{{el.value}}</view> |
||||
|
</view> |
||||
|
<view class="conlist"> |
||||
|
<view class="conname cright">瞬时承载量</view> |
||||
|
<view class="connum cright">{{el.max1}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="ktime"> |
||||
|
<!-- <view class="kname">AAAAA</view> --> |
||||
|
<!-- <view class="kopen">开放时间：8:30-17:00</view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="right"> |
||||
|
<!-- <view class="bfbstyle"> |
||||
|
<span v-if="el.zb<=40" class="lscolor">{{el.zb}}%</span> |
||||
|
<span v-if="el.zb>=80" class="hscolor">{{el.zb}}%</span> |
||||
|
<span v-if="el.zb>40&&el.zb<80" class="yscolor">{{el.zb}}%</span> |
||||
|
</view> --> |
||||
|
<view class="bfbnamestyle"> |
||||
|
<span v-if="el.zb1<=20" class="lscolor">{{el.zbName}}</span> |
||||
|
<span v-if="el.zb1<=40&&el.zb1>20" class="lscolor">{{el.zbName}}</span> |
||||
|
<span v-if="el.zb1<=60&&el.zb1>40" class="yscolor">{{el.zbName}}</span> |
||||
|
<span v-if="el.zb1<=80&&el.zb1>60" class="yscolor">{{el.zbName}}</span> |
||||
|
<span v-if="el.zb1>80" class="hscolor">{{el.zbName}}</span> |
||||
|
</view> |
||||
|
<!-- <canvas :canvas-id="'canvasPie'+ind" :id="'canvasPie'+ind" @touchstart="touchPie"></canvas> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'; |
||||
|
|
||||
|
var _self; |
||||
|
var canvaPie = null; |
||||
|
var color = ['#00DB77', '#FF9024', '#FF4824']; |
||||
|
var zcolor = ['#22A86C', '#E68320', '#E64120']; |
||||
|
var canvaLineA = null; |
||||
|
var canvaLineA2 = null; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
info:{ |
||||
|
color: true, |
||||
|
num: false, |
||||
|
}, |
||||
|
// infos:{ |
||||
|
// ind:0, |
||||
|
// color:false |
||||
|
// }, |
||||
|
jqdatas:[], |
||||
|
token: '' |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
var date = new Date(); |
||||
|
this.nowDate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1)) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()); |
||||
|
// this.getData3(); |
||||
|
// this.getData4(); |
||||
|
_self = this; |
||||
|
// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化 |
||||
|
this.cWidth=uni.upx2px(750); |
||||
|
this.cHeight=uni.upx2px(250); |
||||
|
this.cWidth2=uni.upx2px(750); |
||||
|
this.cHeight2=uni.upx2px(170); |
||||
|
// this.getData1(); |
||||
|
// this.getyj(); |
||||
|
this.getToken(); |
||||
|
}, |
||||
|
onPageScroll(e) { |
||||
|
if(e.scrollTop>50&&!this.info.num){ |
||||
|
this.info.num=true; |
||||
|
} |
||||
|
if(e.scrollTop<50&&this.info.num){ |
||||
|
this.info.num=false; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
getToken(){ |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx' |
||||
|
var para = { |
||||
|
type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken',param:'username=user_xcx&password=Supcon' |
||||
|
}; |
||||
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon'; |
||||
|
// var para = {}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
// console.log(res.data.obj); |
||||
|
that.token=res.data.obj; |
||||
|
if(res.data.success==false){ |
||||
|
that.sxToken(); |
||||
|
}else{ |
||||
|
that.getdata(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
sxToken(){ |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx' |
||||
|
var para = {type:1,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken',param:'accessToken='+this.token}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
that.token=res.data.obj; |
||||
|
that.getdata(); |
||||
|
}); |
||||
|
}, |
||||
|
removeDuplicateObj(arr) { |
||||
|
let obj = {}; |
||||
|
arr = arr.reduce((newArr, next) => { |
||||
|
obj[next.key] ? "" : (obj[next.key] = true && newArr.push(next)); |
||||
|
return newArr; |
||||
|
}, []); |
||||
|
return arr; |
||||
|
}, |
||||
|
getdata(){ |
||||
|
uni.showToast({ |
||||
|
title: '加载中...', |
||||
|
icon:'loading', |
||||
|
}); |
||||
|
var url = 'https://qyly1.csly-travel.com/tours/commonMethod.jspx'; |
||||
|
var para = {type:2,url: 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token,param:{ |
||||
|
"code": "020201_all", |
||||
|
"params": {}, |
||||
|
"page": 0, |
||||
|
"size": 0, |
||||
|
"result": {}, |
||||
|
"orders": [] |
||||
|
}}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
if (res.data.success) { |
||||
|
uni.hideToast(); |
||||
|
var datasAll = res.data.obj.jq_list; |
||||
|
var dataspw = res.data.obj.jq_pw_ss; |
||||
|
var datas = []; |
||||
|
let newList = [ |
||||
|
{name:'虞山风景区',id:'1651860195535896577',zbName: ''}, |
||||
|
{name:'沙家浜风景区',id:'1443165277469569026',zbName: ''}, |
||||
|
{name:'尚湖风景区',id:'1443161860089081858',zbName: ''}, |
||||
|
{name:'蒋巷生态园',id:'1652546686057652226',zbName: ''}, |
||||
|
{name:'方塔古迹名胜区',id:'1443161860097470466',zbName: ''}, |
||||
|
{name:'古里红豆山庄',id:'1572847079126556674',zbName: ''}, |
||||
|
{name:'梅李聚沙园',id:'1443165794329456641',zbName: ''}, |
||||
|
// {name:'曾园•赵园',id:'1443161860101664769',zbName: ''}, |
||||
|
// {name:'燕园',id:'1443161860093276162',zbName: ''} |
||||
|
] |
||||
|
datasAll.map(item=>{ |
||||
|
dataspw.map(item1=>{ |
||||
|
if(item.glzd == item1.code) { |
||||
|
newList.map(v=>{ |
||||
|
if(item._id===v.id){ |
||||
|
that.$set(v,'value', item1.count<0?0:item1.count) |
||||
|
that.$set(v,'max',item.sumNum) |
||||
|
that.$set(v,'zb',((item1.count/item.sumNum)*100).toFixed(0)) |
||||
|
if(v.name == '虞山风景区') { |
||||
|
that.$set(v,'max1',21700) |
||||
|
that.$set(v,'zb1',((item1.count/21700)*100).toFixed(0)) |
||||
|
}else if(v.name == '沙家浜风景区') { |
||||
|
that.$set(v,'max1',46891) |
||||
|
that.$set(v,'zb1',((item1.count/46891)*100).toFixed(0)) |
||||
|
}else if(v.name == '尚湖风景区') { |
||||
|
that.$set(v,'max1',16000) |
||||
|
that.$set(v,'zb1',((item1.count/16000)*100).toFixed(0)) |
||||
|
}else if(v.name == '蒋巷生态园') { |
||||
|
that.$set(v,'max1',11357) |
||||
|
that.$set(v,'zb1',((item1.count/11357)*100).toFixed(0)) |
||||
|
console.log('蒋巷生态园'); |
||||
|
console.log(v); |
||||
|
}else if(v.name == '方塔古迹名胜区') { |
||||
|
that.$set(v,'max1',4000) |
||||
|
that.$set(v,'zb1',((item1.count/4000)*100).toFixed(0)) |
||||
|
}else if(v.name == '古里红豆山庄') { |
||||
|
that.$set(v,'max1',16100) |
||||
|
that.$set(v,'zb1',((item1.count/16100)*100).toFixed(0)) |
||||
|
}else if(v.name == '梅李聚沙园') { |
||||
|
that.$set(v,'max1',4000) |
||||
|
that.$set(v,'zb1',((item1.count/4000)*100).toFixed(0)) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
if(newList.length>0){ |
||||
|
that.jqdatas = newList ; |
||||
|
for(var i = 0;i<that.jqdatas.length;i++) { |
||||
|
if(that.jqdatas[i].zb1 <= 20){ |
||||
|
that.jqdatas[i].zbName = '舒适' |
||||
|
var data = { |
||||
|
series: [{ |
||||
|
name: '舒适', |
||||
|
data:that.jqdatas[i].zb1 |
||||
|
}] |
||||
|
} |
||||
|
}else if(that.jqdatas[i].zb1 > 20&&that.jqdatas[i].zb1 <= 40) { |
||||
|
that.jqdatas[i].zbName = '较为舒适' |
||||
|
var data = { |
||||
|
series: [{ |
||||
|
name: '较为舒适', |
||||
|
data:that.jqdatas[i].zb1 |
||||
|
}] |
||||
|
} |
||||
|
}else if(that.jqdatas[i].zb1 > 40&&that.jqdatas[i].zb1 <= 60) { |
||||
|
that.jqdatas[i].zbName = '一般' |
||||
|
var data = { |
||||
|
series: [{ |
||||
|
name: '一般', |
||||
|
data:that.jqdatas[i].zb1 |
||||
|
}] |
||||
|
} |
||||
|
}else if(that.jqdatas[i].zb1 > 60&&that.jqdatas[i].zb1 <= 80) { |
||||
|
that.jqdatas[i].zbName = '较拥挤' |
||||
|
var data = { |
||||
|
series: [{ |
||||
|
name: '较拥挤', |
||||
|
data:that.jqdatas[i].zb1 |
||||
|
}] |
||||
|
} |
||||
|
}else if(that.jqdatas[i].zb1 > 80){ |
||||
|
that.jqdatas[i].zbName = '拥挤' |
||||
|
var data = { |
||||
|
series: [{ |
||||
|
name: '拥挤', |
||||
|
data:that.jqdatas[i].zb1 |
||||
|
}] |
||||
|
} |
||||
|
} |
||||
|
// that.showPie('canvasPie'+i, data); |
||||
|
} |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '查询失败' |
||||
|
}); |
||||
|
} |
||||
|
}else { |
||||
|
uni.showToast({ |
||||
|
title: '加载中...', |
||||
|
icon:'loading', |
||||
|
duration:20000 |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
getyj(){ |
||||
|
var data = [ |
||||
|
{name:'尚湖风景区',value:'1550',max:10000,zb:1550/10000}, |
||||
|
{name:'虞山公园',value:'799',max:10000,zb:799/10000}, |
||||
|
{name:'虞山剑门景区',value:'512',max:10000,zb:512/10000}, |
||||
|
{name:'蒋巷生态园',value:'512',max:10000,zb:512/10000}, |
||||
|
{name:'方塔园',value:'283',max:10000,zb:283/10000}, |
||||
|
{name:'兴福寺',value:'57',max:10000,zb:57/10000}, |
||||
|
] |
||||
|
var that = this |
||||
|
if(data.length>0){ |
||||
|
that.jqdatas = data ; |
||||
|
for(var i = 0;i<that.jqdatas.length;i++) { |
||||
|
var data = { |
||||
|
series: [{ |
||||
|
name: '舒适', |
||||
|
data:that.jqdatas[i].zb |
||||
|
}] |
||||
|
} |
||||
|
that.showPie('canvasPie'+i, data); |
||||
|
} |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '查询失败' |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
getData1() { //获取景点动态 |
||||
|
var url = '/toursData/getToursAnalysis.jspx'; |
||||
|
var para = {}; |
||||
|
var that = this; |
||||
|
that.httpPost(that, url, para, function(res) { |
||||
|
if (res.data.status == 200) { |
||||
|
var tmp = []; |
||||
|
for (var i = 0; i < res.data.data.scenic.length; i++) { |
||||
|
tmp.push({ |
||||
|
name: res.data.data.scenic[i].name, |
||||
|
value: res.data.data.scenic[i].value, |
||||
|
max: 10000, |
||||
|
zb: res.data.data.scenic[i].value/10000 |
||||
|
}) |
||||
|
} |
||||
|
that.jqdatas = tmp; |
||||
|
for(var i = 0;i<that.jqdatas.length;i++) { |
||||
|
var data = { |
||||
|
series: [{ |
||||
|
name: '舒适', |
||||
|
data:that.jqdatas[i].zb |
||||
|
}] |
||||
|
} |
||||
|
that.showPie('canvasPie'+i, data); |
||||
|
} |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '查询失败' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 展示图标的函数 接收参数，一个块的id,一个数据 |
||||
|
showLineA(canvasId, chartData) { |
||||
|
canvaLineA = new uCharts({ |
||||
|
$this: _self, |
||||
|
canvasId: canvasId, |
||||
|
// 图标类型 |
||||
|
type: 'line', |
||||
|
fontSize: 11, |
||||
|
padding:[20,25,4,5], |
||||
|
legend: { show: false }, |
||||
|
dataLabel:true, |
||||
|
dataPointShape: true, |
||||
|
background: '#F6F6F6', |
||||
|
pixelRatio: _self.pixelRatio, |
||||
|
categories: chartData.categories, |
||||
|
series: chartData.series, |
||||
|
animation: true, |
||||
|
enableScroll: true,//开启图表拖拽功能 |
||||
|
// x轴显示的内容 |
||||
|
xAxis: { |
||||
|
type: 'grid', |
||||
|
disableGrid:true, |
||||
|
gridColor: '#CCCCCC', |
||||
|
gridType: 'dash', |
||||
|
dashLength: 8, |
||||
|
itemCount:6,//x轴单屏显示数据的数量，默认为5个 |
||||
|
scrollShow:true,//新增是否显示滚动条，默认false |
||||
|
scrollAlign:'left',//滚动条初始位置 |
||||
|
scrollBackgroundColor:'#F7F7FF',//默认为 #EFEBEF |
||||
|
scrollColor:'#DEE7F7',//默认为 #A6A6A6 |
||||
|
}, |
||||
|
// y轴显示的内容 |
||||
|
yAxis: { |
||||
|
gridType: 'dash', |
||||
|
disableGrid:true, |
||||
|
gridColor: '#CCCCCC', |
||||
|
dashLength: 8, |
||||
|
splitNumber: 5, |
||||
|
format: val => { |
||||
|
return val.toFixed(0) + '℃'; |
||||
|
} |
||||
|
}, |
||||
|
width: _self.cWidth * _self.pixelRatio, |
||||
|
height: _self.cHeight * _self.pixelRatio, |
||||
|
extra: { |
||||
|
line: { |
||||
|
type: 'straight' |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
showLineA2(canvasId, chartData) { |
||||
|
canvaLineA2 = new uCharts({ |
||||
|
$this: _self, |
||||
|
canvasId: canvasId, |
||||
|
// 图标类型 |
||||
|
type: 'line', |
||||
|
fontSize: 11, |
||||
|
padding:[20,35,0,0], |
||||
|
legend: { show: false }, |
||||
|
dataLabel:true, |
||||
|
dataPointShape: true, |
||||
|
background: '#F6F6F6', |
||||
|
pixelRatio: _self.pixelRatio2, |
||||
|
categories: chartData.categories, |
||||
|
series: chartData.series, |
||||
|
animation: true, |
||||
|
// x轴显示的内容 |
||||
|
xAxis: { |
||||
|
disabled:true, |
||||
|
disableGrid:true, |
||||
|
}, |
||||
|
// y轴显示的内容 |
||||
|
yAxis: { |
||||
|
disableGrid:true, |
||||
|
disabled:true, |
||||
|
}, |
||||
|
width: _self.cWidth2 * _self.pixelRatio2, |
||||
|
height: _self.cHeight2 * _self.pixelRatio2, |
||||
|
extra: { |
||||
|
line: { |
||||
|
type: 'straight' |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 点击图表显示的内容 |
||||
|
touchLineA(e) { |
||||
|
canvaLineA.scrollStart(e); |
||||
|
// 使用声明的变量canvaLineA |
||||
|
canvaLineA.showToolTip(e, { |
||||
|
format: function(item, category) { |
||||
|
return category + ' ' + item.name + ':' + item.data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
touchLineA2(e) { |
||||
|
// 使用声明的变量canvaLineA |
||||
|
canvaLineA2.showToolTip(e, { |
||||
|
format: function(item, category) { |
||||
|
return category + ' ' + item.name + ':' + item.data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
moveLineA(e) { |
||||
|
canvaLineA.scroll(e); |
||||
|
}, |
||||
|
touchEndLineA(e) { |
||||
|
canvaLineA.scrollEnd(e); |
||||
|
}, |
||||
|
showPie(canvasId, chartData) { |
||||
|
new uCharts({ |
||||
|
$this: _self, |
||||
|
canvasId: canvasId, |
||||
|
type: 'arcbar', |
||||
|
fontSize: 11, |
||||
|
legend: { |
||||
|
show: false |
||||
|
}, |
||||
|
background: '#FFFFFF', |
||||
|
pixelRatio: 1, |
||||
|
series: chartData.series, |
||||
|
colors: chartData.series[0].data < 40 ? [color[0]] : chartData.series[0].data < 70 ? [color[1]] : [color[2]], |
||||
|
animation: true, |
||||
|
width: 120, |
||||
|
height: 120, |
||||
|
dataLabel: true, |
||||
|
title: { |
||||
|
name: Math.round(chartData.series[0].data * 100) + '%', //这里我自动计算了，您可以直接给任意字符串 |
||||
|
color: chartData.series[0].data < 40 ? color[0] : chartData.series[0].data < 70 ? color[1] : color[2], |
||||
|
fontSize: 18, |
||||
|
offsetY: -2 |
||||
|
}, |
||||
|
subtitle: { |
||||
|
name: chartData.series[0].name, //这里您可以直接给任意字符串 |
||||
|
color: chartData.series[0].data < 40 ? zcolor[0] : chartData.series[0].data < 70 ? zcolor[1] : zcolor[2], |
||||
|
fontSize: 15, |
||||
|
offsetY: 2 |
||||
|
}, |
||||
|
extra: { |
||||
|
arcbar: { |
||||
|
type: 'circle', //整圆类型进度条图 |
||||
|
width: 10, //圆弧的宽度 |
||||
|
startAngle: 1.5, //整圆类型只需配置起始角度即可 |
||||
|
backgroundColor: '#EFF3F7' |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
touchPie(e) { |
||||
|
canvaPie.showToolTip(e, { |
||||
|
format: function(item) { |
||||
|
return item.name + ':' + item.data |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
$twidth:702upx; |
||||
|
$klwidth:622upx; |
||||
|
$klheight:220upx; |
||||
|
$right:200upx; |
||||
|
$rheight:210upx; |
||||
|
view { |
||||
|
box-sizing: content-box; |
||||
|
} |
||||
|
.content{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
background: #F6F6F6; |
||||
|
padding-bottom: 100upx; |
||||
|
overflow-x: hidden; |
||||
|
// margin-bottom: 60rpx; |
||||
|
} |
||||
|
.kllist { |
||||
|
width: $klwidth; |
||||
|
// height: $klheight; |
||||
|
height: 180upx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20upx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 40upx; |
||||
|
margin: 0upx 0upx 26upx 0upx; |
||||
|
|
||||
|
.left { |
||||
|
width: 400upx; |
||||
|
|
||||
|
.name { |
||||
|
font-size: 36upx; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 600; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.cont { |
||||
|
width: 350upx; |
||||
|
margin-top: 36upx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
height: 80upx; |
||||
|
|
||||
|
.conlist:first-child { |
||||
|
border-right: 1upx solid #E3E3E3; |
||||
|
} |
||||
|
|
||||
|
.conlist { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.conname { |
||||
|
width: 100%; |
||||
|
font-size: 24upx; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 400; |
||||
|
color: #999999; |
||||
|
} |
||||
|
|
||||
|
.cleft { |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.cright { |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.connum { |
||||
|
width: 100%; |
||||
|
font-size: 46upx; |
||||
|
font-family: DIN; |
||||
|
font-weight: bold; |
||||
|
color: #666666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.ktime { |
||||
|
margin-top: 34upx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
width: 100%; |
||||
|
height: 34upx; |
||||
|
align-items: center; |
||||
|
|
||||
|
.kname { |
||||
|
width: 106upx; |
||||
|
height: 34upx; |
||||
|
background: #FFFDFA; |
||||
|
border: 1upx solid #F5E6D0; |
||||
|
border-radius: 4upx; |
||||
|
color: #CCA37A; |
||||
|
font-size: 24upx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.kopen { |
||||
|
width: 320upx; |
||||
|
height: 34upx; |
||||
|
background: #FFFDFA; |
||||
|
border: 1upx solid #F5E6D0; |
||||
|
border-radius: 4upx; |
||||
|
color: #CCA37A; |
||||
|
font-size: 24upx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.right { |
||||
|
width: $right; |
||||
|
height: $rheight; |
||||
|
line-height: $rheight; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-size: 50upx; |
||||
|
font-family: Microsoft YaHei; |
||||
|
font-weight: 600; |
||||
|
color: #230F00; |
||||
|
line-height: 56upx; |
||||
|
width: $twidth; |
||||
|
margin-top: 60upx; |
||||
|
margin-bottom: 50upx; |
||||
|
} |
||||
|
.titledate { |
||||
|
text-align: left; |
||||
|
margin: 0upx 0upx 50upx 0upx; |
||||
|
font-size: 12px; |
||||
|
width: $twidth; |
||||
|
} |
||||
|
.bfbstyle { |
||||
|
text-align: center; |
||||
|
font-size: 18px; |
||||
|
margin: 38px 0px 0px 0px; |
||||
|
} |
||||
|
.bfbnamestyle { |
||||
|
text-align: center; |
||||
|
font-size: 18px; |
||||
|
// margin: 50px 0px 0px 0px; |
||||
|
} |
||||
|
// var zcolor = ['#22A86C', '#E68320', '#E64120']; |
||||
|
.lscolor { |
||||
|
color: #22A86C; |
||||
|
} |
||||
|
.hscolor { |
||||
|
color: #E64120; |
||||
|
} |
||||
|
.yscolor { |
||||
|
color: #E68320; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,412 @@ |
|||||
|
<template> |
||||
|
<view class="content"> |
||||
|
<view class="leixing"> |
||||
|
<view :class="['ggzxclist',ggzxcind===ind?'active':'']" v-for="(el,ind) in ggzxclist" :key="ind" |
||||
|
@click="setLm(el.id)">{{el.name}}</view> |
||||
|
</view> |
||||
|
<view class="zxclist" v-show="ggzxcind==0"> |
||||
|
<view class="item" v-for="(el,ind) in datas" :key="ind"> |
||||
|
<view class="tit">{{el.parkName}}</view> |
||||
|
<view class="zxcsl"> |
||||
|
<view class="cwzs"> |
||||
|
<view class="wz">车位信息</view> |
||||
|
<view class="sz">{{el.totalPlace}}</view> |
||||
|
</view> |
||||
|
<view class="cwzs"> |
||||
|
<view class="wz">余位信息</view> |
||||
|
<view class="sz">{{el.leftPlace}}</view> |
||||
|
</view> |
||||
|
<!-- <view class="cwzs02"> |
||||
|
<view class="wz">更新时间</view> |
||||
|
<view class="sz">{{el.updateTime}}</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
<view class="dizhi"> |
||||
|
<view class="dz">地址：{{el.parkName}}</view> |
||||
|
<view class="dzimg" @click="daohang(el.lngLat)">导航</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="zxclistditu" v-show="ggzxcind==1"> |
||||
|
<view class="mparq"> |
||||
|
<map class="map" v-if="isMap" @markertap="getMarker" :latitude="latitude" :longitude="longitude" |
||||
|
:markers="markers" show-location></map> |
||||
|
</view> |
||||
|
<view class="des"> |
||||
|
<view class="des-left"> |
||||
|
<!-- <view class="des-left-item"> |
||||
|
<view class="name">{{nowData.title}}</view> |
||||
|
<view class="address">{{nowData.address}}</view> |
||||
|
</view> |
||||
|
<view class="des-left-item"> |
||||
|
<view class="name">车位信息</view> |
||||
|
<view class="address">{{nowData.capacity}}</view> |
||||
|
</view> |
||||
|
<view class="des-left-item"> |
||||
|
<view class="name">剩余车位</view> |
||||
|
<view class="address">{{nowData.availBike}}</view> |
||||
|
</view> --> |
||||
|
<view class="name">{{nowData.title}}</view> |
||||
|
<view class="parkNun"> |
||||
|
<view class="parkNun-item"> |
||||
|
<view class="parkNun-item-name">车位信息:</view> |
||||
|
<view class="parkNun-item-num">{{nowData.totalPlace}}</view> |
||||
|
</view> |
||||
|
<view class="parkNun-item"> |
||||
|
<view class="parkNun-item-name">余位信息:</view> |
||||
|
<view class="parkNun-item-num">{{nowData.leftPlace}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="address">{{nowData.address}}</view> |
||||
|
|
||||
|
</view> |
||||
|
<view class="des-right" @click="daohan()">导航</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
var amapFile = require('@/static/js/amap-wx.js'); //如：../../libs/amap-wx.js |
||||
|
var myAmapFun; |
||||
|
var poiDatas = []; |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
token: '', |
||||
|
datas: [], |
||||
|
lng: '', |
||||
|
lat: '', |
||||
|
ggzxcind: 0, |
||||
|
latitude: '31.266909', |
||||
|
longitude: '120.633401', |
||||
|
markers: [], //列表和图钉数据 |
||||
|
nowData: {}, //当前选中点 |
||||
|
ggzxclist: [{ |
||||
|
name: '列表', |
||||
|
id: 1 |
||||
|
}, |
||||
|
{ |
||||
|
name: '地图', |
||||
|
id: 2 |
||||
|
} |
||||
|
], |
||||
|
isMap: false, |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
this.getToken(); |
||||
|
myAmapFun = new amapFile.AMapWX({ |
||||
|
key: 'e40bb317c48b66d558aa77ab126ef8c1' |
||||
|
}); |
||||
|
// 在小程序代码中获取个人定位信息并在地图上标注 |
||||
|
wx.getLocation({ |
||||
|
type: 'gcj02', |
||||
|
isHighAccuracy:true, |
||||
|
success: (res)=> { |
||||
|
console.log(res) |
||||
|
this.latitude = res.latitude; |
||||
|
this.longitude = res.longitude; |
||||
|
}, |
||||
|
}); |
||||
|
}, |
||||
|
methods: { |
||||
|
setLm(id) { |
||||
|
var that = this; |
||||
|
if (id == 1) { |
||||
|
that.ggzxcind = 0; |
||||
|
} else { |
||||
|
that.ggzxcind = 1; |
||||
|
} |
||||
|
}, |
||||
|
getToken() { |
||||
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon'; |
||||
|
var url = |
||||
|
'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/getToken?username=user_xcx&password=Supcon'; |
||||
|
var para = {}; |
||||
|
var that = this; |
||||
|
that.httpGetxin(that, url, para, function(res) { |
||||
|
that.token = res.data.obj; |
||||
|
if (res.data.success == false) { |
||||
|
that.sxToken(); |
||||
|
} else { |
||||
|
that.getdata(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
sxToken() { |
||||
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/refreshToken?accessToken='+this.token; |
||||
|
var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/refreshToken?accessToken=' + |
||||
|
this.token; |
||||
|
var para = {}; |
||||
|
var that = this; |
||||
|
that.httpGetxin(that, url, para, function(res) { |
||||
|
that.token = res.data.obj; |
||||
|
that.getdata(); |
||||
|
}); |
||||
|
}, |
||||
|
getdata() { |
||||
|
console.log('0000000000'); |
||||
|
uni.showToast({ |
||||
|
title: '加载中...', |
||||
|
icon: 'loading', |
||||
|
}); |
||||
|
// var url = 'http://36.153.213.27:8888/api/mc-config/model/aggregation-external/aggregation?accessToken='+this.token; |
||||
|
var url = 'https://qyly1.csly-travel.com/api/mc-config/model/aggregation-external/aggregation?accessToken=' + this |
||||
|
.token; |
||||
|
var para = { |
||||
|
"code": "0001_parking", |
||||
|
"params": {}, |
||||
|
"page": 0, |
||||
|
"size": 0, |
||||
|
"result": {}, |
||||
|
"orders": [] |
||||
|
}; |
||||
|
var that = this; |
||||
|
that.httpPostxin(that, url, para, function(res) { |
||||
|
if (res.data.success) { |
||||
|
uni.hideToast(); |
||||
|
that.datas = []; |
||||
|
that.datas = res.data.obj.data; |
||||
|
that.getditu(); |
||||
|
|
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '加载中...', |
||||
|
icon: 'loading', |
||||
|
duration: 20000 |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
daohang(jwd) { |
||||
|
var lnglat = jwd.split(","); |
||||
|
// console.log(lnglat[0]); |
||||
|
// console.log(lnglat[1]); |
||||
|
|
||||
|
this.lng = lnglat[0]; |
||||
|
this.lat = lnglat[1]; |
||||
|
|
||||
|
var that = this; |
||||
|
uni.openLocation({ |
||||
|
latitude: Number(that.lat), |
||||
|
longitude: Number(that.lng), |
||||
|
complete(e) { |
||||
|
console.log(e); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
getMarker(e) { |
||||
|
this.ismap = false; |
||||
|
var id = e.detail.markerId; |
||||
|
for (var i = 0; i < this.markers.length; i++) { |
||||
|
if (this.markers[i].id == id) { |
||||
|
this.nowData = this.markers[i]; |
||||
|
this.markers[i].width = 38; |
||||
|
this.markers[i].height = 38; |
||||
|
} else { |
||||
|
this.markers[i].width = 28; |
||||
|
this.markers[i].height = 28; |
||||
|
} |
||||
|
} |
||||
|
this.ismap = true; |
||||
|
}, |
||||
|
getditu() { |
||||
|
this.isMap = false; |
||||
|
var that = this; |
||||
|
var pois = []; |
||||
|
// "jwd":"120.744188,31.64254", |
||||
|
for (var i = 0; i < that.datas.length; i++) { |
||||
|
var tmp = that.datas[i]; |
||||
|
var lnglat = that.datas[i].lngLat.split(","); |
||||
|
var p = { |
||||
|
id: i, |
||||
|
title: tmp.parkName, |
||||
|
address: tmp.address, |
||||
|
leftPlace: tmp.leftPlace, //余位 |
||||
|
totalPlace: tmp.totalPlace, //总数 |
||||
|
latitude: Number(lnglat[1]), |
||||
|
longitude: Number(lnglat[0]), |
||||
|
iconPath: "http://tumaoss-backups.oss-cn-hangzhou.aliyuncs.com/fusheng-xcx/icon-tingchechang.png", |
||||
|
width: 38, |
||||
|
height: 38, |
||||
|
label: { |
||||
|
color: '#4A9AF9 ', |
||||
|
fontSize: 12, |
||||
|
content: tmp.name, |
||||
|
anchorX: -35, |
||||
|
anchorY: 0 |
||||
|
} |
||||
|
}; |
||||
|
pois.push(p); |
||||
|
} |
||||
|
that.markers = pois; |
||||
|
that.nowData = that.markers[0]; |
||||
|
that.isMap = true; |
||||
|
uni.hideToast() |
||||
|
}, |
||||
|
daohan() { |
||||
|
uni.openLocation({ |
||||
|
latitude: this.nowData.latitude, |
||||
|
longitude: this.nowData.longitude |
||||
|
}) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
view { |
||||
|
box-sizing: content-box; |
||||
|
} |
||||
|
.leixing { |
||||
|
display: flex; |
||||
|
width: 200px; |
||||
|
margin: 15px auto; |
||||
|
text-align: center; |
||||
|
border-radius: 30px; |
||||
|
|
||||
|
.ggzxclist { |
||||
|
width: 100px; |
||||
|
padding: 10px 0; |
||||
|
background-color: #f5f5f5; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
.active { |
||||
|
color: #ffffff; |
||||
|
background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.zxclistditu { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
.mparq { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
|
||||
|
.map { |
||||
|
width: 100%; |
||||
|
height: 85vh; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.zxclist { |
||||
|
width: 90%; |
||||
|
margin: 30upx auto; |
||||
|
|
||||
|
.item { |
||||
|
margin-bottom: 7%; |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
box-shadow: 0rpx 0rpx 15rpx 10rpx #eee; |
||||
|
background: #fff; |
||||
|
line-height: 2; |
||||
|
color: #666666; |
||||
|
|
||||
|
.tit { |
||||
|
font-size: 36rpx; |
||||
|
background: linear-gradient(0deg, #3269F7 0%, #4A9AF9 70%); |
||||
|
padding: 10upx 30upx; |
||||
|
color: #ffffff; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
|
||||
|
.dizhi { |
||||
|
padding: 10rpx 30rpx 30rpx 30rpx; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
.dzimg { |
||||
|
padding: 0 30upx; |
||||
|
background: #2dc15c; |
||||
|
color: #ffffff; |
||||
|
border-radius: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.zxcsl { |
||||
|
padding: 0rpx 30rpx; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
text-align: center; |
||||
|
margin: 10rpx 0 0rpx 0; |
||||
|
|
||||
|
.cwzs { |
||||
|
width: 50%; |
||||
|
} |
||||
|
|
||||
|
.sz { |
||||
|
color: #333333; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.des { |
||||
|
width: 750rpx; |
||||
|
height: 80px; |
||||
|
background: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
bottom: 0px; |
||||
|
|
||||
|
&-left { |
||||
|
|
||||
|
margin-left: 15rpx; |
||||
|
width: 600rpx; |
||||
|
|
||||
|
.name { |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.address { |
||||
|
font-size: 24rpx; |
||||
|
color: #000; |
||||
|
font-weight: bold; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-right { |
||||
|
width: 100rpx; |
||||
|
height: 60rpx; |
||||
|
background: #438BF8; |
||||
|
border-radius: 20rpx; |
||||
|
line-height: 60rpx; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-size: 26rpx; |
||||
|
} |
||||
|
|
||||
|
.parkNun { |
||||
|
display: flex; |
||||
|
padding: 10rpx 0; |
||||
|
|
||||
|
&-item { |
||||
|
display: flex; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: bold; |
||||
|
color: #000; |
||||
|
margin-right: 30rpx; |
||||
|
|
||||
|
&-num { |
||||
|
margin-left: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,308 @@ |
|||||
|
<template> |
||||
|
<view class="centent"> |
||||
|
<view class="topbg"> |
||||
|
<view class="bgjb"> |
||||
|
<image :src="$getimg('djcp-bg.png')"></image> |
||||
|
</view> |
||||
|
<view class="bgjb-jb"> |
||||
|
<image :src="$getimg('djcp-bg-jb.png')"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="tbb"> |
||||
|
<view class="tbboxs" v-for="(el,ind) in zslist" :key="ind"> |
||||
|
<view class="tboxbot" :style="{background: 'url('+el.siteUrl+el.typeImg+') no-repeat'}" |
||||
|
@click="goto(el.link)"> |
||||
|
<image :src="$getimg('720qj.png')" mode="" class="bot-img"></image> |
||||
|
<view class="tbtitle"> |
||||
|
<view class="tbname">{{el.title}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
city:'云游常熟', |
||||
|
statusBarHeight: 0, |
||||
|
info: { |
||||
|
color: true, |
||||
|
num: false, |
||||
|
name:'云游常熟' |
||||
|
}, |
||||
|
id: 97, |
||||
|
first: 0, |
||||
|
count: 50, |
||||
|
lmdata: [], |
||||
|
alldata: [], |
||||
|
xwwfind: 0, |
||||
|
zslist:[] |
||||
|
} |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
this.getData(); |
||||
|
this.getDatalist(); |
||||
|
}, |
||||
|
onReady() { |
||||
|
//获取手机状态栏高度 |
||||
|
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']; |
||||
|
}, |
||||
|
|
||||
|
onPageScroll(e) { |
||||
|
if (e.scrollTop > 50 && !this.info.num) { |
||||
|
this.info.num = true; |
||||
|
} |
||||
|
if (e.scrollTop < 50 && this.info.num) { |
||||
|
this.info.num = false; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
goto(link){ |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/webPage/webPage?url=' + link |
||||
|
}); |
||||
|
}, |
||||
|
geturl(url) { |
||||
|
return 'http://cscmp.tour-ma.com' + url; |
||||
|
}, |
||||
|
ckxwwfind(ind, id) { |
||||
|
this.xwwfind = ind; |
||||
|
}, |
||||
|
getData() { |
||||
|
this.Post({ |
||||
|
apiType: 'old', |
||||
|
id: this.id |
||||
|
},'/json/channel_get.jspx').then(res => { |
||||
|
if (res) { |
||||
|
this.nowdata = res; |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '查询失败' |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
getDatalist() { |
||||
|
this.Post({ |
||||
|
apiType: 'old', |
||||
|
channelIds: this.id, |
||||
|
first: this.first, |
||||
|
count: this.count |
||||
|
}, '/json/content_list.jspx').then(res => { |
||||
|
if (res) { |
||||
|
if (res.length == 0) { |
||||
|
return |
||||
|
} |
||||
|
for (var i = 0; i < res.length; i++) { |
||||
|
this.zslist.push(res[i]); |
||||
|
} |
||||
|
} else { |
||||
|
uni.showToast({ |
||||
|
title: '查询失败' |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
$url:'https://qyly1.csly-travel.com/r/cms/www/m/changshu/'; |
||||
|
.cityicon{ |
||||
|
width: calc(100% - 167rpx); |
||||
|
font-size: 32upx; |
||||
|
color: #FFFFFF; |
||||
|
left: 80upx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
position: absolute; |
||||
|
z-index: 9999; |
||||
|
height: 80rpx; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
.centent { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 750upx; |
||||
|
overflow-y: scroll; |
||||
|
|
||||
|
.topbg { |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
|
||||
|
.bgjb { |
||||
|
width: 100%; |
||||
|
height: 350rpx; |
||||
|
position: absolute; |
||||
|
z-index: -2; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 350rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bgjb-jb { |
||||
|
position: absolute; |
||||
|
top: 150rpx; |
||||
|
z-index: -1; |
||||
|
width: 100%; |
||||
|
|
||||
|
image { |
||||
|
width: 100%; |
||||
|
height: 250rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.tbb{ |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
.tbboxs:nth-child(1) { |
||||
|
margin-top: 50rpx; |
||||
|
} |
||||
|
} |
||||
|
.tbboxs { |
||||
|
max-width: 690upx; |
||||
|
height: 449upx; |
||||
|
margin: auto; |
||||
|
margin: 20upx auto 5%; |
||||
|
width: 90%; |
||||
|
position: relative; |
||||
|
|
||||
|
.tboxbot { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
background-size: 100% 100% !important; |
||||
|
box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(121, 104, 77, 0.2); |
||||
|
/* position: absolute; */ |
||||
|
/* top: 72rpx; */ |
||||
|
/* left: 50%; */ |
||||
|
/* margin-left: -47%; */ |
||||
|
border-radius: 20rpx; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
.bot-img{ |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
position: absolute; |
||||
|
top: 20rpx; |
||||
|
right: 20rpx; |
||||
|
} |
||||
|
.tbtitle { |
||||
|
width: 100%; |
||||
|
height: 130rpx; |
||||
|
position: absolute; |
||||
|
left: 0upx; |
||||
|
bottom: 0upx; |
||||
|
|
||||
|
&::before { |
||||
|
content: ''; |
||||
|
display: inline-block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: url($url+'mask.png') no-repeat; |
||||
|
background-size: 100% 100% !important; |
||||
|
padding-bottom: 2rpx; |
||||
|
} |
||||
|
|
||||
|
.tbname { |
||||
|
font-size: 36upx; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 16upx; |
||||
|
position: absolute; |
||||
|
top: 46rpx; |
||||
|
left: 30rpx; |
||||
|
} |
||||
|
|
||||
|
.tbinfo { |
||||
|
width: 90%; |
||||
|
font-size: 24upx; |
||||
|
font-weight: 500; |
||||
|
line-height: 1.4; |
||||
|
position: absolute; |
||||
|
top: 120rpx; |
||||
|
left: 30rpx; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
display: flex; |
||||
|
|
||||
|
// align-items: center; |
||||
|
&::before { |
||||
|
content: ''; |
||||
|
display: inline-block; |
||||
|
width: 24rpx; |
||||
|
height: 28rpx; |
||||
|
margin-right: 10rpx; |
||||
|
background: url($url+'icon-add-da.png') no-repeat; |
||||
|
background-size: 100% 100% !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
|
||||
|
// .szra1 { |
||||
|
// width: 90%; |
||||
|
// margin: 40upx auto; |
||||
|
// display: flex; |
||||
|
// flex-direction: row; |
||||
|
// flex-wrap: wrap; |
||||
|
|
||||
|
// .list { |
||||
|
// width: 48%; |
||||
|
// margin-bottom: 40upx; |
||||
|
// margin-right: 15rpx; |
||||
|
|
||||
|
// .liimg { |
||||
|
// margin-bottom: 20upx; |
||||
|
|
||||
|
// .szra_img { |
||||
|
// max-width: 360upx; |
||||
|
// width: 100%; |
||||
|
// height: 210upx; |
||||
|
// border-radius: 8upx; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// .sztitle { |
||||
|
// font-size: 32upx; |
||||
|
// font-weight: 600; |
||||
|
// color: #333333; |
||||
|
// margin-bottom: 20upx; |
||||
|
// overflow: hidden; |
||||
|
// text-overflow: ellipsis; |
||||
|
// white-space: nowrap; |
||||
|
// } |
||||
|
|
||||
|
// .dsadk { |
||||
|
// font-size: 24rpx; |
||||
|
// font-weight: 500 !important; |
||||
|
// line-height: 1.6; |
||||
|
|
||||
|
// &::before { |
||||
|
// content: ''; |
||||
|
// display: inline-block; |
||||
|
// width: 24rpx; |
||||
|
// height: 26rpx; |
||||
|
// margin-right: 10rpx; |
||||
|
// background: url($url+'icon-add-xiao.png') no-repeat; |
||||
|
// background-size: 100% 100% !important; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// } |
||||
|
|
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue