yags-front/src/views/user/Records.vue

<template>
    <div class="record">
        <van-sticky :offset-top="barHeight">
            <van-tabs v-model:active="status" line-width="28px" line-height="2px" shrink swipeable swipe-threshold="3">
                <van-tab :title="item.label" :name="item.value" v-for="(item, index) in tabs" :key="index"> </van-tab>
            </van-tabs>
        </van-sticky>

        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <room-info v-for="(item, index) in showList" :key="index" :info="item"></room-info>
            <van-empty
                v-if="!loading && showList.length === 0"
                description="当前没有战绩哦～"
                :image="require('../../assets/kong-pimg-zhanji.png')"
            />
        </van-list>
    </div>
</template>

<script>
import list from '../../mixins/list.js';
import room from '../../mixins/room.js';
import RoomInfo from '../../components/RoomRecord.vue';
export default {
    name: 'records',
    inject: ['barHeight', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    data() {
        return {
            status: '',
            url: '/room/my',
            httpType: 'get',
            list: [],
            scrollTop: 0
        };
    },
    computed: {
        tabs() {
            return [{ label: '全部', value: '' }, ...this.statusOptions];
        },
        showList() {
            let list = [...this.list];
            if (this.status) {
                list = list.filter(item => {
                    return item.status === this.status;
                });
            }
            return list;
        }
    },
    components: { RoomInfo },
    mixins: [list, room],
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop || 0);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/room') {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['records']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['irecords'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
/deep/.van-tabs__nav {
    padding: 0 0 15px;
}
/deep/.van-tab {
    padding: 0 16px;
}
/deep/.van-tab + .van-tab {
    margin-left: 10px;
}

.record-info {
    .flex();
    align-items: flex-end;
    padding: 28px 12px 12px;
    background-color: @bg2;
    border-radius: 4px;

    .record-content {
        margin-left: 10px;
        .text1 {
            font-size: 14px;
            color: #ffffff;
            line-height: 24px;
        }

        .text2 {
            font-size: 12px;
            color: #ffffff;
            line-height: 17px;
            margin-top: 2;
        }

        .text3 {
            .flex();
            margin-top: 6px;
            img {
                width: 16px;
                height: 16px;
            }
            span {
                font-size: 12px;
                color: #6a6d83;
                line-height: 17px;
                margin-left: 6px;
            }
        }
    }
}

.van-list {
    padding: 16px;
    min-height: var(--app-height);

    .room + .room {
        margin-top: 16px;
    }
}
</style>