shortPlay-mini/pages/home/mini/info/info.vue

76 lines
1.7 KiB
Vue

<template>
<view class="p-30">
<view style="padding: 10upx 0;position: relative;" v-if="info" @click="videoFullScreenShow = true">
<image style="width: 100%;" :src="info.imgUrl" mode="widthFix"></image>
</view>
<view class="bg-white p-20 rounded" v-if="info && info.detailContent">
<rich-text :nodes="info.detailContent"></rich-text>
</view>
<view class="bg-white bottom p-30">
<u-button shape="circle" type="primary">我要加入</u-button>
</view>
<!-- 全屏播放视频 -->
<video-full-screen v-model="videoFullScreenShow" :src="info.detailVideoUrl" @exit="exit()">
</video-full-screen>
</view>
</template>
<script>
import videoFullScreen from '@/components/video-full-screen/index.vue'
export default {
components: {
videoFullScreen
},
data() {
return {
info: null,
videoFullScreenShow: false, // 是否全屏显示视频
videoplayObj: {}, //video对象
}
},
onLoad(option) {
this.info = JSON.parse(option.item)
this.info.detailContent = this.escape2Html(uni.getStorageSync('detailContent'))
uni.setNavigationBarTitle({
title: this.info.name
})
},
mounted() {
this.videoplayObj = wx.createVideoContext('myVideo')
},
methods: {
exit() {
this.videoFullScreenShow = false;
this.videoplayObj.pause()
},
escape2Html(str) {
var arrEntities = {
'lt': '<',
'gt': '>',
'nbsp': ' ',
'amp': '&',
'quot': '"'
};
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
return arrEntities[t];
});
}
}
}
</script>
<style lang="scss">
.bottom {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
box-sizing: border-box;
}
</style>