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