63 lines
2.9 KiB
Plaintext
63 lines
2.9 KiB
Plaintext
<template>
|
||
<view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
|
||
<view class="flex-1 pr">
|
||
<live-video ref="live-video" :src="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>
|
||
</view>
|
||
<view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
|
||
<template v-if="!is_live_ended">
|
||
<live-content ref="liveContent" :live-config="live_config" :live-show-imgs="like_show_imgs" @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end"></live-content>
|
||
<!-- 简化版点赞效果组件 -->
|
||
<full-screen-like-effect ref="fullScreenLikeEffect" :custom-images="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
|
||
</template>
|
||
<template v-else>
|
||
<view class="live-ended flex-row align-c jc-c" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="true">
|
||
<view class="flex-col align-c">
|
||
<text style="color:#fff;font-size:16px;">直播已结束</text>
|
||
<button plain size="mini" class="mt-10 live-ended-button" @click="back"><text class="cr-f pa-5" @tap="live_back">退出直播间</text></button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import liveVideo from './components/video/video.vue';
|
||
import liveContent from './components/live-content/live-content.vue';
|
||
// 引入点赞效果组件
|
||
import fullScreenLikeEffect from './components/full-screen-like-effect/full-screen-like-effect.vue';
|
||
// 引入混入公共逻辑，避免nvue和vue使用同一套逻辑出现问题
|
||
import mixins from './mixins/mixins.js';
|
||
const app = getApp();
|
||
export default {
|
||
components: {
|
||
liveVideo,
|
||
liveContent,
|
||
fullScreenLikeEffect
|
||
},
|
||
mixins: [mixins],
|
||
data() {
|
||
return {
|
||
theme_view: app.globalData.get_theme_value_view(),
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.live-content {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 9;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: transparent;
|
||
}
|
||
.live-ended {
|
||
// 添加渐变背景色
|
||
background-image: linear-gradient(to bottom,#AD18F9,#05DFC7);
|
||
}
|
||
.live-ended-button {
|
||
border-radius: 6px;
|
||
border-color: #fff;
|
||
}
|
||
</style> |