zhishifufei_uniapp/pages/topic/question_category.vue

<template>
    
    <BaseContainer>
        <NavBar :title="type==1? '练习列表' : '考试列表'" />
        <view class="question-category-page">
            <view class="header">
                <view>
                    <view class="search">
                        <view>
                            <image v-if="homeLogo" :src="homeLogo" />
                                <image v-else :src="getImgPath('/wap/first/zsff/images/crmeb.png')" />
                        </view>
                        <input v-model="search" placeholder="输入试卷名称">
                        <span  class="search-btn" @click="onSearch">搜索</span>
                    </view>
                    <view id="sup" class="swiper-container">
                        <view class="swiper-wrapper">
                            <view v-for="(item, index) in navSup" :key="item.id"  @click="onSup(index)" :class="{ on: index === indexSup }"
                                class="swiper-slide">{{ item.title }}</view>
                        </view>
                    </view>
                </view>
                <view id="sub" class="swiper-container">
                    <view class="swiper-wrapper">
                        <view v-for="(item, index) in navSub" :key="item.id"  @click="onSub(index)" :class="{ on: index === indexSub }"
                            class="swiper-slide" style="overflow: hidden;">{{ item.title }}</view>
                    </view>
                </view>
            </view>
            <view>
                <ul v-if="type == 1" class="problem">
                    <li v-for="item in question" :key="item.id">
                        <view>{{ item.title }}</view>
                        <view>
                            <view>共{{ item.item_number }}题</view>
                            <view>{{ item.answer }}人已答题</view>
                            <navigator class="problems" :url="'/pages/topic/problem_index?id=' + item.id">练习</navigator>
                        </view>
                    </li>
                </ul>
                <ul v-else class="question">
                    <li v-for="item in question" :key="item.id">
                        <view>
                            <image mode="aspectFill" :src="item.image" />
                        </view>
                        <view>
                            <view>{{ item.title }}</view>
                            <view v-if="item.pay_type">￥<span>{{ item.money }}</span></view>
                            <view v-else class="free">免费</view>
                            <view>
                                {{ item.answer }}人已答题
                                <navigator :url="'/pages/special/question_index?id=' + item.id">答题</navigator>
                            </view>
                        </view>
                    </li>
                </ul>
            </view>
        </view>
    </BaseContainer>
</template>

<script>
    import { getTestPaperCate, getPracticeList } from "@/api/topic";
    import {  getLogoConfig } from "@/api/special";
    export default {
        data() {
            return {
                homeLogo: null,
                type: 1,
                swiperOptions: {
                    slidesPerView: 'auto',
                    freeMode: true,
                    observer: true
                },
                navSup: [],
                navSub: [],
                indexSup: 0,
                indexSub: 0,
                type: 1,
                page: 1,
                limit: 15,
                loading: false,
                finished: false,
                question: [],
                current: {},
                search: ''
            };
        },
        onLoad({ type }) {
            this.type = type
            this.getCategory();
            this.getLogoConfig()
        },
        methods: {
            async getLogoConfig() {
                try {
                    const { data } = await getLogoConfig();
                    this.homeLogo = data.homeLogo;
                } catch (err) {
                    console.log(err);
                }
            },
            onSup: function (index) {
                if (this.loading) {
                    return;
                }
            
                this.indexSup = index;
                this.navSub = this.navSup[this.indexSup].children;
                this.indexSub = 0;
                this.question = [];
                this.loading = false;
                this.finished = false;
                this.page = 1;
                this.search = '';
                this.current = this.navSub[0];
                this.getQuestion();
            },
            onSub: function (index) {
                if (this.loading) {
                    return;
                }
             

                this.indexSub = index;
                this.question = [];
                this.loading = false;
                this.finished = false;
                this.page = 1;
                this.search = '';
                this.current = this.navSub[this.indexSub];
                this.getQuestion();
            },
            getCategory: function () {
                getTestPaperCate({
                    type: this.type
                }).then(res => {
                    let navSup = res.data;
                    for (var i = navSup.length; i--;) {
                        navSup[i].children.unshift({
                            pid: navSup[i].id,
                            id: 0,
                            title: '全部'
                        });
                    }

                    this.navSup = navSup;
                    if (this.navSup.length) {
                        this.navSub = this.navSup[0].children;
                        this.current = this.navSub[0];
                        this.getQuestion();
                    }
                })
            },
            getQuestion: function () {
                if (this.loading || this.finished) {
                    return;
                }
                this.loading = true;
                uni.showLoading({ mask: true });
                getPracticeList({
                    type: this.type, page: this.page++,
                    limit: this.limit,
                    pid: this.current.pid,
                    tid: this.current.id,
                    search: this.search
                }).then(res => {
                    this.question =  this.question.concat(res.data);
                    this.loading = false;
                    this.finished =  this.limit > res.data.length;
                    uni.hideLoading();
                }).catch(err=>{
                    uni.hideLoading();
                })
                
            },
            onSearch: function () {
                if (!this.search) {
                    return this.$util.showMsg('请输入搜索内容');
                }
                this.indexSup = 0;
                this.indexSub = 0;
                this.current = this.navSub[0];
                this.question = [];
                this.loading = false;
                this.finished = false;
                this.page = 1;
                this.getQuestion();
            }
        },
    };
</script>

<style>
    page {
        background-color: #ffffff;
    }
    .swiper-slide{
        flex-shrink:0;
    }
    .swiper-wrapper{
        overflow: auto
    }
    ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
  .search-btn{
    color: #ffffff
  }
  .problems{
    height: 38rpx;
    padding-right: 17rpx;
    padding-left: 44rpx;
    border-radius: 19rpx;
    background: #2c8eff url(http://zhishifufei.crmeb.net/wap/first/zsff/images/question07.png) 17rpx center/18rpx 20rpx no-repeat;
    line-height: 38rpx;
    color: #ffffff;
  }
</style>

<style scoped lang="scss">
    @import "@/static/style/sheet.scss";
</style>