218 lines
8.5 KiB
Vue
218 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.image43.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.image43.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>
|
||
<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/yuyin.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 mt" v-if="detail.adjust">
|
||
<view>开园时间：{{detail.adjust}}</view>
|
||
</view>
|
||
<view class="address" @click="openLocation">
|
||
<view class="address-tit">{{detail.address}}</view>
|
||
<view class="line"></view>
|
||
<image class="img" src="../../static/image/rental/navigation.png" mode=""></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notice">
|
||
<view class="list">
|
||
<view class="title">景点介绍</view>
|
||
<view class="cont">
|
||
<u-parse :content="detail.blurb"></u-parse>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default{
|
||
data () {
|
||
return {
|
||
scrollTop: 0,
|
||
detail: null,
|
||
play: false,
|
||
innerAudioContext: null
|
||
}
|
||
},
|
||
async onLoad (options) {
|
||
let info = await this.$http.scenicSpotDetail(options.id);
|
||
if (info.data.blurb) info.data.blurb = this.$utils.replaceImg(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) => {
|
||
console.log('音频出错：' + res.errMsg)
|
||
});
|
||
}
|
||
|
||
},
|
||
onShareAppMessage (e) {
|
||
return {
|
||
title: '巴松措风景区',
|
||
path: '/pages/login/index'
|
||
}
|
||
},
|
||
onUnload () {
|
||
this.play = false;
|
||
this.innerAudioContext = null;
|
||
console.log('页面退出 停止播放')
|
||
},
|
||
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.location) {
|
||
let latitude = this.detail.location.split(',')[1];
|
||
let longitude = this.detail.location.split(',')[0];
|
||
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 {
|
||
this.play = true;
|
||
this.innerAudioContext.play();
|
||
}
|
||
}
|
||
},
|
||
onPageScroll (e) {
|
||
this.scrollTop = e.scrollTop;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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: 43rpx 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){
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: rgba(0,0,0,0.85);
|
||
height: 59rpx;
|
||
line-height: 47rpx;
|
||
}
|
||
&:nth-child(2){
|
||
margin-top: 10rpx; display: flex; align-items: center;
|
||
text{
|
||
height: 32rpx; line-height: 32rpx; border-radius: 12rpx 2rpx 12rpx 2rpx; background: rgba(255, 169, 68, 0.1); padding: 0 20rpx; color: #FFA944; font-size: 22rpx; margin-right: 12rpx;
|
||
&:last-child{ margin-right: 0; }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.btn{
|
||
width: 198rpx; height: 70rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; background: #03AE80; border-radius: 100rpx;
|
||
.icon{ width: 30rpx; height: 30rpx; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-right: 8rpx; }
|
||
.text{ color :#fff; font-size: 24rpx; margin-left: 8rpx; }
|
||
}
|
||
}
|
||
.list_waper{
|
||
width: 100%; margin-top: 8rpx;
|
||
.list{
|
||
width: 100%; padding: 32rpx 0; padding-right: 74rpx; position: relative; box-sizing: border-box;
|
||
&:first-child{ padding-right: 0; }
|
||
view{
|
||
&:nth-child(1){
|
||
font-size: 28rpx;
|
||
color: rgba(0,0,0,0.45);
|
||
line-height: 33rpx;
|
||
}
|
||
&:nth-child(2){ width: 50rpx; height: 50rpx; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
|
||
}
|
||
}
|
||
.address{
|
||
font-size: 26rpx;
|
||
color: rgba(0,0,0,0.65);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
.line{
|
||
width: 1rpx;
|
||
height: 40rpx;
|
||
background: rgba(0,0,0,0.1);
|
||
margin: 24rpx 32rpx 24rpx 20rpx;
|
||
}
|
||
.img{
|
||
width: 50rpx;
|
||
min-width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
.mt{
|
||
margin-top: 11rpx;
|
||
padding: 0;
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
.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{ font-weight: 500; font-size: 32rpx; color: rgba(0,0,0,0.85); line-height: 44rpx; }
|
||
.cont{ line-height: 50rpx; color: #666; font-size: 28rpx; margin-top: 20rpx; }
|
||
}
|
||
}
|
||
</style> |