You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
661 lines
16 KiB
661 lines
16 KiB
<template>
|
|
<view class="cotainer">
|
|
<!-- 全屏播放 -->
|
|
<view class="playvideo" v-if="playvideo" @click="playvideo=false,isfull=false">
|
|
<view class="playvideowrap">
|
|
<video ref="videos" id="videos" :autoplay="true" @play="playFullScreen"
|
|
:src="info.video?info.video.url:''" play-btn-position="center"></video>
|
|
<view class="closevideo" @click="playvideo=false,isfull=false">X</view>
|
|
</view>
|
|
</view>
|
|
<view class="playvideo" v-if="playimg" @click="playimg=false">
|
|
<view class="playvideowrap">
|
|
<view v-if="imgInfo.length>0 && !showVorImage" class="imgwrap">
|
|
<movable-area scale-area class="movable-area" style="height: 380rpx;width:100%">
|
|
<movable-view style="height: 380rpx;width:100%" class="movable-view" direction="all" scale="true" scale-min="1" scale-max="4"
|
|
:scale-value="1">
|
|
<u-swiper :height='380' bgColor="transparent" :border-radius="0" :list="imgInfo" :autoplay="false"></u-swiper>
|
|
|
|
</movable-view>
|
|
</movable-area>
|
|
<view class="closevideo" @click="playimg=false">X</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 跳转二维码 -->
|
|
<view class="playvideo" v-if="showQrCode">
|
|
<view class="playvideowrap">
|
|
<view class="qrcode">
|
|
<image :show-menu-by-longpress="true" :src="qrCode" mode=""></image>
|
|
<view>长按保存二维码</view>
|
|
<view class="closevideo" @click="showQrCode=false">X</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="navBarBox">
|
|
<image class="navBarBox-top" :src="require('@/static/home-top.png')" mode=""></image>
|
|
<!-- 状态栏占位 -->
|
|
<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
|
|
<!-- 真正的导航栏内容 -->
|
|
<view class="navBar">
|
|
<!-- 轮播切换 -->
|
|
<view style="display: flex;" class="video-content">
|
|
<view class="video-content-left">
|
|
<view v-if="info.video&&showVorImage" class="videowrap" @click="playvideo=true,isfull=true">
|
|
<view class="videowrap-mask"></view>
|
|
<view class="videowrap-play"></view>
|
|
<image :src="info.video_image.url"></image>
|
|
</view>
|
|
|
|
<view v-if="imgInfo.length>0 && !showVorImage" class="imgwrap">
|
|
<u-swiper @click="playimg=true" :height="340" bgColor="transparent" :border-radius="0"
|
|
:list="imgInfo" :autoplay="false"></u-swiper>
|
|
</view>
|
|
|
|
<view class="video-content-left-change" v-if="info.video && imgInfo.length>0">
|
|
<view @click="showVorImage=true">
|
|
<image :src="require('@/packages/static/detail-camera.png')"></image>1
|
|
</view>
|
|
<view @click="showVorImage=false">
|
|
<image :src="require('@/packages/static/detail-photo.png')"></image>
|
|
{{imgInfo.length}}
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="detail">
|
|
<view class="detail-info">
|
|
<view class="detail-info-title">{{info.name}}</view>
|
|
<view class="detail-info-map">
|
|
<view>
|
|
<u-icon name="map" size="32"></u-icon>
|
|
<view>
|
|
<span>详细地址：</span>
|
|
<span>{{info.address?info.address:'-'}}</span>
|
|
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<u-icon name="clock" size="32"></u-icon>
|
|
<view>
|
|
<span>开放时间：</span>
|
|
<span>{{info.time?info.time:'-'}}</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="detail-info-go">
|
|
<view class="detail-info-go-left" @click="toMap">
|
|
<image :src="require('@/packages/static/detail-go.png')" mode=""></image>
|
|
<text>开始前往</text>
|
|
</view>
|
|
<view class="detail-info-go-right" @click="toWx(info)" v-if="info.iswx===1">
|
|
<image :src="require('@/packages/static/detail-book.png')" mode=""></image>
|
|
<text>去预约</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- vr -->
|
|
<view class="detail-vr" v-if="vrInfo.length>0">
|
|
<view class="detail-vr-title">
|
|
<image :src="require('@/packages/static/detail-vr.png')" mode=""></image>
|
|
</view>
|
|
|
|
<view class="detail-vr-swiper" v-if="vrInfo.length==1" style="margin-left: -25rpx;">
|
|
<view @click="toVr(vrInfo[0].url)" class="detail-vr-swiper-item" style="width:490rpx;margin: 0 auto;position: relative;margin-top:20rpx">
|
|
<view class="detail-vr-swiper-item-img">
|
|
<image :src="vrInfo[0].image.url" mode=""></image>
|
|
</view>
|
|
<view class="detail-vr-swiper-item-title">
|
|
<image :src="require('@/packages/static/detail-icon.png')" mode=""></image>
|
|
<text>{{vrInfo[0].name}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<swiper v-else class="detail-vr-swiper" :current="currentIndex" next-margin="140rpx" @change="swierChange"
|
|
circular :autoplay="false">
|
|
<swiper-item v-for="(item,index) in vrInfo" :key="index">
|
|
<view @click="toVr(item.url)" class="detail-vr-swiper-item"
|
|
:class="currentIndex===index?'detail-vr-swiper-active':''">
|
|
<view class="detail-vr-swiper-item-img">
|
|
<image :src="item.image.url" mode=""></image>
|
|
</view>
|
|
<view class="detail-vr-swiper-item-title">
|
|
<image :src="require('@/packages/static/detail-icon.png')" mode=""></image>
|
|
<text>{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="detail-content">
|
|
<image class="detail-content-top" src="../static/detail-top.png" mode=""></image>
|
|
<image class="detail-content-bottom" src="../static/detail-bottom.png" mode=""></image>
|
|
<view class="detail-content-title">
|
|
场馆基础信息
|
|
</view>
|
|
<view class="detail-content-content">
|
|
<rich-text v-if='showContent' :nodes="info.content?info.content:' '"></rich-text>
|
|
</view>
|
|
</view>
|
|
<view class="detail-btn" @click="toQus(info.id)">
|
|
<image src="../static/detail-btn.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
|
|
<tabbar :currentPage="4"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tabbar from '@/components/tabbar/tabbar.vue'
|
|
import {
|
|
toMapAPP,
|
|
shareInfo
|
|
} from "@/common/util.js"
|
|
export default {
|
|
components: {
|
|
tabbar,
|
|
},
|
|
data() {
|
|
return {
|
|
navBarTop: 0,
|
|
currentIndex: 0,
|
|
info: {},
|
|
vrInfo: [],
|
|
imgInfo: [],
|
|
showContent: false,
|
|
showVorImage: true,
|
|
isfull: false,
|
|
playvideo: false,
|
|
playimg: false,
|
|
qrCode:'',
|
|
showQrCode:false,
|
|
}
|
|
},
|
|
onShareAppMessage() {
|
|
return shareInfo
|
|
},
|
|
onShareTimeline(){
|
|
return shareInfo
|
|
},
|
|
onReady() {
|
|
|
|
},
|
|
onLoad(option) {
|
|
const MenuButton = uni.getMenuButtonBoundingClientRect()
|
|
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
|
|
this.getDetail(option.id)
|
|
},
|
|
methods: {
|
|
playFullScreen() {
|
|
let videoContext = uni.createVideoContext('videos', this)
|
|
videoContext.requestFullScreen()
|
|
},
|
|
async getDetail(id) {
|
|
const res = await this.$u.api.pointDetail({
|
|
id: id
|
|
})
|
|
if(res.points.config && res.points.config.length>0){
|
|
res.points.config.map(item=>{
|
|
if(item.key==='address'){
|
|
res.points.address = item.value
|
|
}
|
|
if(item.key==='time'){
|
|
res.points.time = item.value
|
|
}
|
|
})
|
|
}
|
|
this.info = res.points
|
|
this.showVorImage = this.info.video?true:false
|
|
this.vrInfo = res.points.point_content.length > 0 ? res.points.point_content : []
|
|
if (res.points.point_image.length > 0) {
|
|
res.points.point_image.map(item => {
|
|
this.imgInfo.push(item.image.url)
|
|
})
|
|
}
|
|
// this.imgInfo = res.points.point_image.length > 0 ? res.points.point_image : []
|
|
this.showContent = true
|
|
},
|
|
swierChange(e) {
|
|
this.currentIndex = e.detail.current
|
|
},
|
|
toWx(info) {
|
|
if (!info.iswx) {
|
|
return
|
|
}
|
|
let path = info.path ? info.path : ''
|
|
// 跳转到其他小程序
|
|
if(info.appid){
|
|
uni.navigateToMiniProgram({
|
|
appId: info.appid, // 目标小程序的 AppID
|
|
path: path, // 目标小程序的页面路径
|
|
extraData: { // 需要传递的参数
|
|
|
|
},
|
|
success(res) {
|
|
// 成功跳转到其他小程序的回调函数
|
|
console.log('成功跳转到其他小程序');
|
|
},
|
|
fail(err) {
|
|
// 跳转失败的回调函数
|
|
console.log('跳转失败', err);
|
|
}
|
|
});
|
|
}else{
|
|
if(!info.qrcode){
|
|
return
|
|
}
|
|
this.qrCode = info.qrcode.url
|
|
this.showQrCode = true
|
|
// uni.navigateTo({
|
|
// url: '/packages/vr/vr?link=' + path
|
|
// })
|
|
|
|
}
|
|
|
|
},
|
|
toVr(link) {
|
|
uni.navigateTo({
|
|
url: '/packages/vr/vr?link=' + link
|
|
})
|
|
},
|
|
toMap() {
|
|
toMapAPP(this.info.lat, this.info.lng, this.info.name)
|
|
},
|
|
toQus(id){
|
|
uni.navigateTo({
|
|
url:'/packages/question/question?id='+id
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.cotainer {
|
|
background: #f3efea;
|
|
width: 100vw;
|
|
padding-bottom: 135rpx;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
overflow: scroll;
|
|
|
|
.playvideo {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 11;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
|
|
&>.playvideowrap {
|
|
width: 95%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
video {
|
|
width: 100%
|
|
}
|
|
|
|
::v-deep .u-indicator-item-round.u-indicator-item-round-active {
|
|
background-color: #bf3022;
|
|
}
|
|
|
|
.closevideo {
|
|
color: #fff;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border: 1px solid #fff;
|
|
border-radius: 50rpx;
|
|
position: absolute;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
/* display: inline-block; */
|
|
right: 0rpx;
|
|
top: -25rpx // transform: translate(0,-50%);
|
|
}
|
|
.qrcode{
|
|
width: 450rpx;
|
|
position: relative;
|
|
margin: 0 auto;
|
|
>image{
|
|
width:400rpx;height:400rpx;margin: 0 auto;display: block;
|
|
}
|
|
>view{
|
|
color:#fff;
|
|
text-align: center;
|
|
margin:10rpx;
|
|
font-size:32rpx;
|
|
}
|
|
.closevideo{
|
|
z-index: 999;
|
|
color: #bc9766;
|
|
border: 1px solid #bc9766;
|
|
top: -35rpx;
|
|
right: -9rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.navBarBox {
|
|
// height: 299rpx;
|
|
padding-bottom: 30rpx;
|
|
width: 100%;
|
|
position: relative;
|
|
border-bottom: 10rpx solid #dbd0ba;
|
|
|
|
&-top {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0
|
|
}
|
|
|
|
.navBar {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 30rpx;
|
|
|
|
.video-content {
|
|
width: 668rpx;
|
|
height: 380rpx;
|
|
margin: 0 auto;
|
|
// border:1px solid red;
|
|
font-size: 0;
|
|
|
|
&-left {
|
|
width: 668rpx;
|
|
height: 380rpx;
|
|
position: relative;
|
|
|
|
& .videowrap {
|
|
image {
|
|
width: 668rpx;
|
|
height: 380rpx;
|
|
padding-top: 0;
|
|
}
|
|
|
|
&-mask {
|
|
width: 668rpx;
|
|
height: 380rpx;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
position: absolute;
|
|
z-index: 9;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&-play {
|
|
background: url(../static/detail-videoplay.png) no-repeat top left;
|
|
width: 67rpx;
|
|
height: 68rpx;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
& .imgwrap {
|
|
::v-deep swiper {
|
|
width: 668rpx !important;
|
|
height: 380rpx !important;
|
|
}
|
|
}
|
|
|
|
// ::v-deep .u-swiper-indicator{
|
|
// display: none;
|
|
// }
|
|
::v-deep .u-indicator-item-round.u-indicator-item-round-active {
|
|
background-color: #bf3022;
|
|
}
|
|
|
|
&-change {
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 20rpx;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
left: 20rpx;
|
|
z-index: 10;
|
|
|
|
&>view {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
|
|
&:first-child {
|
|
margin-right: 10rpx;
|
|
border-right: 1px solid #fff;
|
|
padding-right: 10rpx
|
|
}
|
|
|
|
image {
|
|
width: 23rpx;
|
|
height: 21rpx;
|
|
padding-right: 10rpx
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.detail {
|
|
margin: 30rpx;
|
|
margin-top: 40rpx;
|
|
|
|
&-info {
|
|
background-color: #fff;
|
|
padding: 45rpx 25rpx;
|
|
border-radius: 10rpx;
|
|
|
|
&-title {
|
|
color: #000;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
&-map {
|
|
color: #73685c;
|
|
font-size: 24rpx;
|
|
padding-bottom: 10rpx;
|
|
|
|
>view {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-bottom: 20rpx;
|
|
>view{
|
|
display: flex;
|
|
span:first-child{
|
|
min-width: 120rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-go {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 0 20rpx;
|
|
padding-top: 30rpx;
|
|
border-top: 1px solid #ddd;
|
|
|
|
>view {
|
|
color: #bc9766;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&-left {
|
|
image {
|
|
width: 33rpx;
|
|
height: 32rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
|
|
&-right {
|
|
background-color: #bc9766;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 30rpx;
|
|
color: #fff !important;
|
|
|
|
image {
|
|
width: 27rpx;
|
|
height: 33rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-vr {
|
|
background-color: #fff;
|
|
padding: 45rpx 25rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 30rpx;
|
|
padding-right: 0;
|
|
padding-bottom: 25rpx;
|
|
&-title {
|
|
image {
|
|
width: 122rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
|
|
&-swiper {
|
|
// display: flex;
|
|
// overflow: auto;
|
|
min-height: 530rpx;
|
|
position: relative;
|
|
&-item {
|
|
padding: 25rpx;
|
|
margin: 20rpx;
|
|
background-color: #fef8e9;
|
|
// border-radius: 20rpx;
|
|
// margin-bottom:0;
|
|
position: absolute;
|
|
// height: 200rpx;
|
|
// width: 570rpx;
|
|
border-radius: 20rpx;
|
|
z-index: 5;
|
|
top: 0;
|
|
|
|
// transform: rotateY(40deg) scale(.9);
|
|
// transform: ;
|
|
&-img {
|
|
font-size: 0;
|
|
|
|
image {
|
|
width: 440rpx;
|
|
height: 350rpx;
|
|
}
|
|
}
|
|
|
|
&-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 80rpx;
|
|
margin-top: 15rpx;
|
|
margin-bottom: 0;
|
|
|
|
image {
|
|
width: 43rpx;
|
|
height: 43rpx;
|
|
margin-right: 10rpx
|
|
}
|
|
|
|
text {
|
|
max-width: 350rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-active {
|
|
z-index: 10;
|
|
top: 0;
|
|
transition: all 0.2s ease-in 0s;
|
|
// transform: rotateY(0deg) scale(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
background-color: #fff;
|
|
padding: 45rpx 25rpx;
|
|
padding-bottom: 50rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: 30rpx;
|
|
position: relative;
|
|
|
|
&-top {
|
|
width: 208rpx;
|
|
height: 102rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 34rpx;
|
|
}
|
|
|
|
&-bottom {
|
|
width: 226rpx;
|
|
height: 46rpx;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&-title {
|
|
color: #000;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 30rpx;
|
|
position: relative;
|
|
}
|
|
|
|
&-content {
|
|
margin-top: 40rpx;
|
|
line-height: 2;
|
|
}
|
|
}
|
|
|
|
&-btn {
|
|
image {
|
|
width: 322rpx;
|
|
height: 89rpx;
|
|
margin: 45rpx auto;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
</style> |