football/pages/live/index.vue

<template>
    <app-layout>
        <view class="box">
            <view v-if="list.length" class="list-box">
                <view class="item"
                      v-for="(item, index) in list"
                      :key="index"
                      @click="liveClick(item)">
                    <view class="anchor-img-box">
                        <image mode="aspectFill" class="anchor-img" :src="item.anchor_img"></image>
                        <image v-if="item.live_status === 103" class="play-icon"
                               src="/static/image/video-play.png"></image>
                        <!--<view @click.stop="subscribeClick" class="subscribe-box" v-if="item.live_status === 102">-->
                        <!--<subscribe :room-id="item.roomid"></subscribe>-->
                        <!--</view>-->
                    </view>
                    <view class="room-info-box">
                        <view class="name">{{item.name}}</view>
                        <view class="user-info-box">
                            <image mode="aspectFill" class="anchor-img" :src="item.anchor_img"></image>
                            <span class="anchor-name">{{item.anchor_name}}</span>
                        </view>
                    </view>

                    <view v-if="item.live_status === 101" class="tag-box tag-box-3">
                        <view class="text">
                            <image class="live-icon" src="/static/image/icon/liveing.png"></image>
                            <span>{{item.status_text}}</span>
                        </view>
                    </view>

                    <!--预告-->
                    <view v-else-if="item.live_status === 102" class="tag-box tag-box-1">
                        <view class="text">
                            <view class="round"></view>
                            <span>{{item.status_text}}</span>
                        </view>
                        <view class="text-time">{{item.text_time}}</view>
                    </view>

                    <view v-else-if="item.live_status === 103" class="tag-box tag-box-2">
                        <view class="text">
                            <view class="round"></view>
                            <span>{{item.status_text}}</span>
                        </view>
                    </view>

                    <view v-else class="tag-box tag-box-3">
                        <view class="text">
                            <view class="round"></view>
                            <span>{{item.status_text}}</span>
                        </view>
                    </view>
                </view>
            </view>
            <view v-else class="empty-box">
                <image src="/static/image/order-empty.png"></image>
                <span>暂无任何内容</span>
            </view>
            <app-load-text v-if="is_show_load"></app-load-text>
            <view v-if="is_show_hint" class="hint">没有更多内容了哦</view>
        </view>
    </app-layout>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        data() {
            return {
                list: [],
                page: 1,
                is_show_load: false,
                is_show_hint: false,
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.info,
            })
        },
        methods: {
            liveClick(live) {
                let self = this;
                if (live.live_status === 101 || live.live_status === 102) {
                    let userId = this.userInfo ? this.userInfo.options.user_id : 0;
                    let customParams = {user_id: userId}; // 开发者在直播间页面路径上携带自定义参数
                    uni.navigateTo({
                        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomid}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
                    })
                } else if (live.live_status === 103) {
                    uni.setStorage({
                        key: "live_playback",
                        data: {
                            room_info: live
                        }
                    });
                    uni.navigateTo({
                        url: `/pages/live/playback?room_id=${live.roomid}`
                    })
                }
            },
            getList() {
                let self = this;
                if (!self.is_show_load) {
                    self.$showLoading({
                        text: '加载中...'
                    });
                }
                self.$request({
                    url: self.$api.live.index,
                    data: {
                        page: self.page,
                    },
                }).then(response => {
                    self.$hideLoading();
                    self.is_show_load = false;
                    if (response.code === 0) {
                        let {list} = response.data;
                        if (self.page != 1) {
                            self.list = self.list.concat(list)
                        } else {
                            self.list = list;
                        }
                        self.page = list.length ? self.page + 1 : self.page;
                        if (list.length === 0) {
                            self.is_show_hint = true;
                        }
                    } else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000,
                        });
                    }
                }).catch(() => {
                    self.is_show_load = false;
                    self.$hideLoading();
                });
            },
            subscribeClick() {
                console.log(1)
            }
        },
        onLoad(options) {
            this.getList();
        },
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom() {
            this.is_show_load = true;
            this.is_show_hint = false;
            this.getList()
        },
        onShareAppMessage(object) {
            return this.$shareAppMessage({
                title: '直播列表',
                path: '/pages/live/index',
                params: {
                    user_id: this.userInfo ? this.userInfo.options.user_id : 0
                }
            });
        },
    }
</script>


<style scoped lang="scss">
    .list-box {
        padding: 20#{rpx};
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .item {
            width: 346#{rpx};
            border-radius: 16#{rpx};
            box-shadow: 0 0 10#{rpx} 1#{rpx} rgba(0, 0, 0, 0.1);
            margin-bottom: 20#{rpx};
            position: relative;
            background: #ffffff;

            .tag-box {
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
            }

            .tag-box-1 {
                .text {
                    background: #22ac38;
                }
                .text-time {
                    padding: 12#{rpx} 20#{rpx};
                    font-size: 24#{rpx};
                    color: #fff;
                    background: rgba(0, 0, 0, 0.5);
                    margin-left: -20rpx;
                    border-bottom-right-radius: 30#{rpx};
                    border-top-right-radius: 30#{rpx};
                    padding-left: 30#{rpx};
                }
            }

            .tag-box-2 {
                .text {
                    background: #777777;
                }
            }

            .tag-box-3 {
                .text {
                    background: #ff4544;
                }

                .live-icon {
                    width: 24#{rpx};
                    height: 24#{rpx};
                    margin-right: 12#{rpx};
                }
            }

            .round {
                width: 15#{rpx};
                height: 15#{rpx};
                background: #fff;
                border-radius: 50%;
                margin-right: 12#{rpx};

            }

            .text {
                padding: 12#{rpx} 20#{rpx};
                font-size: 26#{rpx};
                border-top-left-radius: 16#{rpx};
                border-top-right-radius: 30#{rpx};
                border-bottom-right-radius: 30#{rpx};
                z-index: 10;
                color: #fff;
                display: flex;
                align-items: center;

            }

            .anchor-img-box {
                width: 346#{rpx};
                height: 346#{rpx};
                border-radius: 16#{rpx};
                position: relative;
                overflow: hidden;

                .anchor-img {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }

                .play-icon {
                    width: 100#{rpx};
                    height: 100#{rpx};
                    position: absolute;
                    top: 123#{rpx};
                    left: 123#{rpx};

                }

                .subscribe-box {
                    position: absolute;
                    top: 153#{rpx};
                    left: 53#{rpx};
                }
            }

            .room-info-box {
                padding: 15#{rpx} 28#{rpx};

                .name {
                    font-size: 28#{rpx};
                    color: #353535;
                    white-space: nowrap;
                    -ms-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .user-info-box {
                    display: flex;
                    align-items: center;
                    margin-top: 12#{rpx};

                    .anchor-img {
                        width: 40#{rpx};
                        height: 40#{rpx};
                        -webkit-border-radius: 50%;
                        -moz-border-radius: 50%;
                        border-radius: 50%;
                    }
                    .anchor-name {
                        width: 200#{rpx};
                        font-size: 24#{rpx};
                        color: #999999;
                        margin-left: 12#{rpx};
                        white-space: nowrap;
                        -ms-text-overflow: ellipsis;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }
        }
    }

    .empty-box {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        image {
            width: 280#{rpx};
            height: 280#{rpx};
        }
        span {
            margin-top: 15#{rpx};
            color: #999;
            font-size: 28#{rpx};
        }
    }

    .hint {
        font-size: 24#{rpx};
        color: #999999;
        text-align: center;
        width: 100%;
        margin-bottom: 15#{rpx};

    }
</style>