|
|
|
@ -1,30 +1,43 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="box"> |
|
|
|
|
<view class="top"> |
|
|
|
|
<view class=""> |
|
|
|
|
<view class="top box"> |
|
|
|
|
<view class="img-play"> |
|
|
|
|
<image style="width: 100%; height: 100%; background-color: #eeeeee" :mode="item.mode" :src="baseUrl + datas.imgsl"></image> |
|
|
|
|
<view class="play-stop" v-if="plays&&datas.voiceurl" @click="play(datas.voiceurl)"><image style="width: 50rpx; height: 50rpx;padding:10rpx" src="../../static/img/icon_play.png"></image></view> |
|
|
|
|
<view class="play-stop" v-if="!plays" @click="pause()"><image style="width: 50rpx; height: 50rpx;padding:10rpx" src="../../static/img/icon_stop.png"></image></view> |
|
|
|
|
<view class="play-stop" v-if="plays && datas.voiceurl" @click="play(datas.voiceurl)"> |
|
|
|
|
<image style="width: 50rpx; height: 50rpx; padding: 10rpx" src="../../static/img/icon_play.png"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="play-stop" v-if="!plays" @click="pause()"><image style="width: 50rpx; height: 50rpx; padding: 10rpx" src="../../static/img/icon_stop.png"></image></view> |
|
|
|
|
</view> |
|
|
|
|
<view class="top-right"> |
|
|
|
|
<view class="sencien-name">{{datas.cname}}</view> |
|
|
|
|
<view class="sencien-type">{{datas.typename}}</view> |
|
|
|
|
<view class="sencien-price">门票:{{datas.ticketprice}}</view> |
|
|
|
|
<view class="sencien-name">{{ datas.cname }}</view> |
|
|
|
|
<view class="sencien-type">{{ datas.typename }}</view> |
|
|
|
|
<view class="sencien-price">门票:{{ datas.ticketprice }}</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="content"> |
|
|
|
|
<view>景区简介</view> |
|
|
|
|
<view class="content box"> |
|
|
|
|
<view class="box-title">景区简介</view> |
|
|
|
|
<mp-html :content="datas.content"></mp-html> |
|
|
|
|
</view> |
|
|
|
|
<view class="picture"> |
|
|
|
|
<view class="img-box" v-for="(item,index) in imgs"> |
|
|
|
|
<image class="img" :src="baseUrl+item"></image> |
|
|
|
|
<view class="picture box"> |
|
|
|
|
<view class="box-title">景点图集</view> |
|
|
|
|
<view class="img-box" v-for="(item, index) in imgs"> |
|
|
|
|
<image class="img" :src="baseUrl + item"></image> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="bottom"> |
|
|
|
|
<view><uni-icons class="icn" type="location" size="20" color="#989898"></uni-icons>{{datas.addr}}</view> |
|
|
|
|
<view><uni-icons class="icn" type="eye" size="20" color="#989898"></uni-icons>{{datas.opentime}}</view> |
|
|
|
|
<view @click="callPhone('tel')"><uni-icons class="icn" type="phone" size="20" color="#989898"></uni-icons>{{datas.tel}}</view> |
|
|
|
|
<view class="bottom box"> |
|
|
|
|
<view> |
|
|
|
|
<uni-icons class="icn" type="location" size="20" color="#989898"></uni-icons> |
|
|
|
|
{{ datas.addr }} |
|
|
|
|
</view> |
|
|
|
|
<view> |
|
|
|
|
<!-- <uni-icons class="icn" type="eye" size="20" color="#989898"></uni-icons> --> |
|
|
|
|
<span class="iconfont"></span> |
|
|
|
|
{{ datas.opentime }} |
|
|
|
|
</view> |
|
|
|
|
<view @click="callPhone('tel')"> |
|
|
|
|
<uni-icons class="icn" type="phone" size="20" color="#989898"></uni-icons> |
|
|
|
|
{{ datas.tel }} |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</template> |
|
|
|
@ -36,7 +49,7 @@ export default { |
|
|
|
|
datas: null, |
|
|
|
|
imgs: null, |
|
|
|
|
baseUrl: this.$config.ROOTPATH, |
|
|
|
|
plays: true, |
|
|
|
|
plays: true |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
onLoad(options) { |
|
|
|
@ -45,7 +58,7 @@ export default { |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getDetail(val) { |
|
|
|
|
let this_ = this |
|
|
|
|
let this_ = this; |
|
|
|
|
uni.request({ |
|
|
|
|
url: this.$config.ROOTPATH + '/mobile/mapScenic/qylyScenicinfoById?userkey=' + this.$param.userkey + '&id=' + val, |
|
|
|
|
method: 'get', |
|
|
|
@ -71,7 +84,7 @@ export default { |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
pause() { |
|
|
|
|
let this_ = this |
|
|
|
|
let this_ = this; |
|
|
|
|
uni.stopBackgroundAudio({ |
|
|
|
|
success: function () { |
|
|
|
|
this_.showMp3Title = false; |
|
|
|
@ -79,70 +92,78 @@ export default { |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
callPhone(){ |
|
|
|
|
callPhone() { |
|
|
|
|
uni.makePhoneCall({ |
|
|
|
|
phoneNumber: '03193928888' //仅为示例,并非真实的电话号码 |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped> |
|
|
|
|
.box{ |
|
|
|
|
padding: 20rpx 25rpx 100rpx 25rpx; |
|
|
|
|
} |
|
|
|
|
.top{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 40rpx; |
|
|
|
|
} |
|
|
|
|
.img-play{ |
|
|
|
|
width: 140rpx; |
|
|
|
|
height: 140rpx; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.play-stop{ |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 9999; |
|
|
|
|
left: 30%; |
|
|
|
|
top: 27%; |
|
|
|
|
} |
|
|
|
|
.top-right{ |
|
|
|
|
margin-left: 40rpx; |
|
|
|
|
} |
|
|
|
|
.sencien-name{ |
|
|
|
|
font-size: 40rpx; |
|
|
|
|
display: inline-flex; |
|
|
|
|
} |
|
|
|
|
.sencien-type{ |
|
|
|
|
text-align: center; |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
color: #5d5d5d; |
|
|
|
|
padding: 5rpx 10rpx; |
|
|
|
|
box-shadow: 0 0 2px 2px #b9b9b9; |
|
|
|
|
display: inline-flex; |
|
|
|
|
margin-left: 25rpx; |
|
|
|
|
} |
|
|
|
|
.sencien-price{ |
|
|
|
|
color: #b31414; |
|
|
|
|
margin-top: 10rpx; |
|
|
|
|
} |
|
|
|
|
.content,.picture{ |
|
|
|
|
margin-bottom: 40rpx; |
|
|
|
|
} |
|
|
|
|
.img-box{ |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
} |
|
|
|
|
.img{ |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.bottom{ |
|
|
|
|
color: #444; |
|
|
|
|
} |
|
|
|
|
.icn{ |
|
|
|
|
margin-right: 15rpx; |
|
|
|
|
} |
|
|
|
|
.box { |
|
|
|
|
padding: 20rpx 25rpx 60rpx 25rpx; |
|
|
|
|
border-bottom: solid 10rpx #d8d8d8; |
|
|
|
|
} |
|
|
|
|
.box:last-child { |
|
|
|
|
border: none; |
|
|
|
|
} |
|
|
|
|
.top { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
.img-play { |
|
|
|
|
width: 140rpx; |
|
|
|
|
height: 140rpx; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
position: relative; |
|
|
|
|
overflow: hidden; |
|
|
|
|
} |
|
|
|
|
.play-stop { |
|
|
|
|
position: absolute; |
|
|
|
|
z-index: 9999; |
|
|
|
|
left: 30%; |
|
|
|
|
top: 27%; |
|
|
|
|
} |
|
|
|
|
.top-right { |
|
|
|
|
margin-left: 40rpx; |
|
|
|
|
} |
|
|
|
|
.sencien-name { |
|
|
|
|
font-size: 40rpx; |
|
|
|
|
display: inline-flex; |
|
|
|
|
} |
|
|
|
|
.sencien-type { |
|
|
|
|
text-align: center; |
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
color: #5d5d5d; |
|
|
|
|
padding: 5rpx 10rpx; |
|
|
|
|
box-shadow: 0 0 2px 2px #b9b9b9; |
|
|
|
|
display: inline-flex; |
|
|
|
|
margin-left: 25rpx; |
|
|
|
|
} |
|
|
|
|
.sencien-price { |
|
|
|
|
color: #b31414; |
|
|
|
|
margin-top: 10rpx; |
|
|
|
|
} |
|
|
|
|
.content, |
|
|
|
|
.picture { |
|
|
|
|
margin-bottom: 40rpx; |
|
|
|
|
} |
|
|
|
|
.img-box { |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
} |
|
|
|
|
.img { |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.bottom { |
|
|
|
|
color: #444; |
|
|
|
|
} |
|
|
|
|
.icn { |
|
|
|
|
margin-right: 15rpx; |
|
|
|
|
} |
|
|
|
|
.box-title { |
|
|
|
|
font-size: 38rpx; |
|
|
|
|
margin-bottom: 25rpx; |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|