shopxo-uniapp/pages/plugins/live/pull/pull.nvue

<template>
    <view :class="theme_view + ' flex-row pr'" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
        <view class="flex-1 pr" @dblclick="handle_double_click" @touchend="handle_touch_end" :data-ignore="false">
            <live-video ref="live-video" :propSrc="live_config.pull_flv_url || 'http://live-pull-all.shopxo.vip/68f764013572f9240ca7ce6c/shopxo122.m3u8'" @ended="ended"></live-video>

            <!-- 简化版点赞效果组件 -->
            <full-screen-like-effect ref="fullScreenLikeEffect" :propCustomImages="like_show_imgs" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'"></full-screen-like-effect>
        </view>
        <view v-if="!is_loading" class="live-content" :style="'width:' + windowWidth + 'px;height:' + windowHeight + 'px;'">
            <template v-if="!is_live_ended"> 
                <live-content ref="liveContent" :propLiveConfig="live_config" :propLiveShowImgs="like_show_imgs"  @live-back="live_back" @handleDoubleClick="handle_double_click" @handleTouchEnd="handle_touch_end"></live-content>
            </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>