200 lines
8.5 KiB
Vue
200 lines
8.5 KiB
Vue
<template>
|
|
<view class="waper">
|
|
<u-navbar @leftClick="leftClick" :bgColor="scrollTop > 20 ? '#fff' : 'transparent'" :leftIconColor="scrollTop > 20 ? '#303133' : '#fff'">
|
|
<view slot='center' class="navbar_title">{{scrollTop > 20 ? '景区介绍' : ''}}</view>
|
|
</u-navbar>
|
|
<view class="banner" v-if="detail">
|
|
<swiper :autoplay="true" :interval="5000" circular :duration="1000">
|
|
<swiper-item v-for="(i, index) in detail.image.split(',')" :key="index">
|
|
<image :src="$utils.setImgUrl(i)" mode=""></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;" v-if="detail.image.split(',').length == 1"></view>
|
|
<button open-type="share" class="icon">
|
|
<u-icon size="44rpx" color="#fff" name="share-square"></u-icon>
|
|
</button>
|
|
</view>
|
|
<view class="info_waper" v-if="detail">
|
|
<view class="info" :style="detail.audioGuideUrl ? '' : 'padding-right: 0;'">
|
|
<view class="name">
|
|
<view>{{detail.scenicName}}</view>
|
|
<view>
|
|
<text>{{detail.scenicLevelName}}</text>
|
|
<text v-for="(i, index) in detail.tagList" :key="index">{{i.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="btn" v-if="detail.audioGuideUrl" @click="playAudio">
|
|
<view class="icon">
|
|
<image src="https://common/play.png" mode="" v-if="!play"></image>
|
|
<image src="https://common/stop.png" mode="" v-else></image>
|
|
</view>
|
|
<text class="text">语音讲解</text>
|
|
</view>
|
|
</view>
|
|
<view class="list_waper">
|
|
<view class="list">
|
|
<view>开园时间：{{detail.adjust}}</view>
|
|
</view>
|
|
<view class="list" @click="openLocation">
|
|
<view>{{detail.address}}</view>
|
|
<view>
|
|
<image src="https://common/addresss.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="list" @click="callTel">
|
|
<view>{{detail.officialPhone}}</view>
|
|
<view>
|
|
<image src="https://common/tels.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="notice" v-if="detail.textType">
|
|
<view class="list" v-if="detail.textType.indexOf('0') > -1">
|
|
<view class="title">景区介绍</view>
|
|
<view class="cont">
|
|
<u-parse :content="detail.blurb"></u-parse>
|
|
</view>
|
|
</view>
|
|
<view class="list" v-if="detail.textType.indexOf('1') > -1">
|
|
<view class="title">交通指南</view>
|
|
<view class="cont">{{detail.reachinfo}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data () {
|
|
return {
|
|
scrollTop: 0,
|
|
detail: null,
|
|
play: false,
|
|
innerAudioContext: null,
|
|
playError: null
|
|
}
|
|
},
|
|
async onLoad () {
|
|
let info = await this.$http.scenicDetail({ id: this.$scenicId });
|
|
if (info.data.blurb) info.data.blurb = this.$utils.replaceImg(info.data.blurb);
|
|
console.log(info.data.blurb)
|
|
this.detail = info.data;
|
|
if (this.detail.audioGuideUrl) {
|
|
this.innerAudioContext = uni.createInnerAudioContext();
|
|
this.innerAudioContext.autoplay = false;
|
|
this.innerAudioContext.src = this.$utils.setImgUrl(this.detail.audioGuideUrl);
|
|
this.innerAudioContext.onStop(() => {
|
|
this.play = false;
|
|
console.log('停止播放');
|
|
});
|
|
this.innerAudioContext.onError((res) => {
|
|
this.playError = '音频出错：' + res.errMsg;
|
|
});
|
|
}
|
|
},
|
|
onShareAppMessage (e) {
|
|
return {
|
|
title: '巴松措风景区',
|
|
path: '/pages/login/index'
|
|
}
|
|
},
|
|
methods: {
|
|
leftClick () {
|
|
let pages = getCurrentPages();
|
|
let prevPage = pages[pages.length - 2];
|
|
if (prevPage) {
|
|
uni.navigateBack({ delta: 1 })
|
|
prevPage.onLoad(prevPage.options);
|
|
} else uni.reLaunch({ url: '/pages/tabbar/home' })
|
|
},
|
|
callTel () {
|
|
uni.makePhoneCall({ phoneNumber: this.detail.officialPhone });
|
|
},
|
|
openLocation () {
|
|
if (this.detail && this.detail.coordinate) {
|
|
let latitude = this.detail.coordinate.split(',')[1];
|
|
let longitude = this.detail.coordinate.split(',')[0];
|
|
console.log(this.detail.scenicName, '-', this.detail.address)
|
|
uni.openLocation({
|
|
latitude: Number(latitude),
|
|
longitude: Number(longitude),
|
|
name: this.detail.scenicName,
|
|
address: this.detail.address,
|
|
})
|
|
}
|
|
},
|
|
playAudio () {
|
|
if (this.innerAudioContext && this.play) {
|
|
this.play = false;
|
|
this.innerAudioContext.pause();
|
|
} else {
|
|
if (this.playError !== null) {
|
|
uni.showToast({ mask: true, title: this.playError, icon: 'none' })
|
|
return false;
|
|
}
|
|
this.play = true;
|
|
this.innerAudioContext.play();
|
|
}
|
|
}
|
|
},
|
|
onPageScroll (e) {
|
|
this.scrollTop = e.scrollTop;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.banner{
|
|
width: 100%; height: 562rpx; position: relative;
|
|
swiper{ width: 100%; height: 100%; }
|
|
.icon{
|
|
width: 80rpx; height: 80rpx; background: rgba(0, 0, 0, 0.5); border-radius: 50%; display: flex; justify-content: center; align-items: center; border: none; padding: 0; position: absolute; bottom: 128rpx; right: 32rpx; z-index: 3;
|
|
&::after{ border: none; }
|
|
}
|
|
}
|
|
.info_waper{
|
|
width: 100%; background: #fff; margin-top: -80rpx; border-radius: 32rpx 32rpx 0 0; box-sizing: border-box; padding: 32rpx 32rpx 0; position: relative; z-index: 3;
|
|
.info{
|
|
width: 100%; box-sizing: border-box; padding-right: 210rpx; position: relative;
|
|
.name{
|
|
width: 100%;
|
|
view{
|
|
&:nth-child(1){ line-height: 52rpx; color: #333; font-size: 36rpx; font-weight: 500; }
|
|
&:nth-child(2){
|
|
display: flex; align-items: center; flex-wrap: wrap;
|
|
text{
|
|
height: 42rpx; line-height: 42rpx; border-radius: 12rpx 2rpx 12rpx 2rpx; background: rgba(255, 169, 68, 0.1); padding: 0 20rpx; color: #FFA944; font-size: 28rpx; margin-right: 12rpx; margin-top: 10rpx;
|
|
&:last-child{ margin-right: 0; }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.btn{
|
|
width: 198rpx; height: 70rpx; position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center; background: linear-gradient( 141deg, #54C76E 0%, #03AE80 100%); border-radius: 100rpx;
|
|
.icon{ width: 30rpx; height: 30rpx; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
|
|
.text{ color :#fff; font-size: 24rpx; margin-left: 8rpx; }
|
|
}
|
|
}
|
|
.list_waper{
|
|
width: 100%; margin-top: 8rpx;
|
|
.list{
|
|
width: 100%; border-top: 2rpx solid rgba(0, 0, 0, 0.1); padding: 32rpx 0; padding-right: 74rpx; position: relative; box-sizing: border-box;
|
|
&:first-child{ border-top: 0; padding-right: 0; }
|
|
view{
|
|
&:nth-child(1){ line-height: 40rpx; color: #333; font-size: 28rpx; font-weight: 500; }
|
|
&:nth-child(2){ width: 50rpx; height: 50rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.notice{
|
|
width: 100%; background: #fff; margin-top: 20rpx; box-sizing: border-box; padding: 32rpx;
|
|
.list{
|
|
width: 100%; margin-bottom: 40rpx;
|
|
&:last-child{ margin-bottom: 0; }
|
|
.title{ line-height: 46rpx; color: #333; font-size: 32rpx; font-weight: 500; }
|
|
.cont{ line-height: 50rpx; color: #666; font-size: 28rpx; margin-top: 20rpx; }
|
|
}
|
|
}
|
|
</style> |