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.

693 lines
16 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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">
<block v-if="info.config && info.config.length>0">
</block>
<view v-for="item in info.config">
<block>
<u-icon v-if="item.key==='address'" name="map" size="32"></u-icon>
<u-icon v-else-if="item.key==='time'" name="clock" size="32"></u-icon>
<u-icon v-else-if="item.key==='phone'" name="phone" size="32"></u-icon>
<u-icon v-else name="info-circle" size="32"></u-icon>
<view>
<span>{{item.name}}</span>
<span>{{item.value?item.value:'-'}}</span>
</view>
</block>
</view>
<!-- <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>
<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" v-if="hasQuestion" @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,
hasQuestion:false
}
},
onShareAppMessage() {
return shareInfo
},
onShareTimeline() {
return shareInfo
},
onReady() {
},
onLoad(option) {
const MenuButton = uni.getMenuButtonBoundingClientRect()
this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
this.getDetail(option.id)
this.getQuestions(option.id)
},
methods: {
playFullScreen() {
let videoContext = uni.createVideoContext('videos', this)
videoContext.requestFullScreen()
},
async getQuestions(id) {
const res = await this.$u.api.getQuestions({
point_id: id
})
this.hasQuestion = res.questions.length>0?true:false
},
async getDetail(id) {
const res = await this.$u.api.pointDetail({
id: id
})
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.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>