YXGJ/packageA/exam/index.vue

<template>
    <view>
        <view class="head" catchtouchmove="true" @touchmove.stop.prevent="() => { }">
            <My_search :value="content.where.condition" @onSearch="onSearch">
                <view class="filtrate" v-if="filtrateList.length" hover-class="navigator-hover" @click="openFiltrate">
                    筛选
                    <text class="iconfont icon-shaixuan" />
                </view>
            </My_search>
            <view class="crumbs">
                <view class="crumb" v-for="item in crumbs" :key="item.classname">{{ item.classname }}</view>
            </view>
            <u-tabs :list="status" :activeStyle="{ fontWeight: 'bold', color: '#C30D23' }" lineColor="#C30D23"
                keyName="name" @change="statusChange" />
        </view>
        <view style="height: 1px;" />
        <filtrate ref="Filtrate" :filtrateList="filtrateList" @onFiltration="onFiltration" @onInterrupt="onInterrupt" />

        <My_listbox ref="List" @getlist="getList">
            <view class="list-box">
                <navigator class="item" v-for="item in list" :key="item.sat_courseware_testheadid"
                    :url="'/packageA/exam/detail?id=' + item.sat_courseware_testheadid">
                    <view class="title u-line-2">{{ item.title || '--' }}</view>
                    <view class="hr" />
                    <view class="bottom">
                        <view>
                            分数：<text class="score">{{ item.score }}</text>
                        </view>
                        <view>
                            答题数：{{ item.answerinfo }}
                        </view>
                    </view>

                    <view class="status" v-if="item.status == '未开始'" style="background:#E3041F;color: #FFFFFF;">
                        未开始
                    </view>
                    <view class="status" v-else-if="item.status == '进行中'" style="background: #FFF0F2;color: #E3041F;">
                        进行中
                    </view>
                    <view class="status" v-else-if="item.status == '已完成'" style="background: #EEEEEE;color: #999999;">
                        已完成
                    </view>

                </navigator>
            </view>
        </My_listbox>
    </view>
</template>

<script>
export default {
    data() {
        return {
            crumbs: [],
            list: [],
            "content": {
                "where": {
                    "condition": "",
                    "status": "",
                    "sat_courseware_classids": [[]]
                }
            },
            filtrateList: [],
            status: [{
                name: "全部"
            }, {
                name: "未开始"
            }, {
                name: "进行中"
            }, {
                name: "已完成"
            }]
        }
    },
    onLoad(options) {
        this.crumbs = [{
            classname: "考试",
            parentid: ""
        }, {
            classname: "全部",
            parentid: ''
        }]
        this.getType()
        this.getList(true)
        uni.setNavigationBarTitle({
            title: '考试',
        })
    },
    onShow() {
        this.updateList()
    },
    methods: {
        getType() {
            this.$Http.basic({
                "id": "20221102143302",
                content: {
                    pageSize: 9999,
                    parentid: "",
                    "where": {
                        "isenable": 1
                    }
                }
            }).then(res => {
                console.log("获取分类列表", res)
                if (this.cutoff(res.msg)) return;
                this.filtrateList = [{
                    title: "一级分类",
                    key: '一级分类',//提交时返回的Key
                    showKey: "classname",//显示的key
                    selected: "sat_courseware_classid",//选择时选择的字段
                    value: "",//提交时选中的value
                    defaultVal: "",//返回的默认值
                    isAll: true,
                    interrupt: true,
                    rang: [{ classname: "全部", sat_courseware_classid: "", children: [] }].concat(res.data),//选择的范围
                }]
            })
        },
        getList(init = false) {
            if (this.paging(this.content, init)) return;
            let ids = this.crumbs.map(v => v.parentid).filter(v => v);
            this.content.where.sat_courseware_classids = ids.length ? [[ids[ids.length - 1]]] : []
            this.$Http.basic({
                "id": 20240326133302,
                content: this.content
            }).then(res => {
                this.$refs.List.RefreshToComplete()
                console.log("获取试卷列表", res)
                if (this.cutoff(res.msg)) return;
                this.list = res.pageNumber == 1 ? res.data : this.list.concat(res.data);
                this.content = this.$refs.List.paging(this.content, res)
            })
        },
        updateList() {
            if (this.content.pageNumber && this.content.pageNumber >= 2) {
                let content = this.paging(this.content, true, true)
                this.$Http.basic({
                    "id": "20240326133302",
                    content
                }).then(res => {
                    console.log("更新试卷列表", res)
                    if (this.cutoff(res.msg)) return;
                    this.list = res.data;
                    this.$refs.List.paging(content, res, true)
                })
            }
        },
        openFiltrate() {
            this.$refs.Filtrate.changeShow();
        },
        onSearch(condition) {
            this.content.where.condition = condition;
            this.getList(true)
        },
        onInterrupt({ item, index, option }) {
            let filtrateList = this.$refs.Filtrate.list;
            const i = filtrateList.findIndex(v => v.title == '二级分类');
            if (option.children.length) {
                const obj = {
                    title: "二级分类",
                    key: '二级分类',
                    showKey: "classname",
                    selected: "sat_courseware_classid",
                    value: "",
                    defaultVal: "",
                    isAll: true,
                    rang: [{ classname: "全部", sat_courseware_classid: "" }].concat(option.children),
                };
                i == -1 ? filtrateList.push(obj) : filtrateList[i] = obj;
            } else {
                i == -1 ? '' : filtrateList.pop();
            }
            this.$refs.Filtrate.list = filtrateList || JSON.parse(JSON.stringify());
        },
        onFiltration(e) {
            let crumbs = [{
                classname: "考试",
                parentid: ""
            }]
            crumbs.push({
                classname: e.一级分类.classname,
                parentid: e.一级分类.sat_courseware_classid
            })
            if (e.二级分类) crumbs.push({
                classname: e.二级分类.classname,
                parentid: e.二级分类.sat_courseware_classid
            })

            this.crumbs = crumbs;
            this.getList(true)
        },
        statusChange({ name }) {
            this.content.where.status = name == '全部' ? '' : name;
            this.getList(true)
        }
    }
}
</script>

<style lang="scss">
.head {
    padding: 10px;
    width: 100%;
    background: #fff;
    box-sizing: border-box;

    .filtrate {
        line-height: 30px;
        padding: 0 10px;
        font-family: PingFang SC, PingFang SC;
        font-size: 14px;
        color: #333333;
        border-radius: 3px;
        margin-left: 10px;

        .iconfont {
            margin-left: 3px;
            color: #BBBBBB;
        }
    }
}

.crumbs {
    display: flex;
    line-height: 17px;
    font-family: PingFang SC, PingFang SC;
    font-size: 12px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;

    .crumb {
        flex-shrink: 0;

    }

    .crumb::after {
        content: ">";
        padding: 0 2px;
    }

    .crumb:last-child {
        font-weight: bold;
    }

    .crumb:last-child::after {
        content: "";
    }
}

.list-box {
    width: 100vw;
    padding: 10px;
    padding-top: 0;
    box-sizing: border-box;

    .item {
        position: relative;
        background: #FFFFFF;
        border-radius: 8px;
        margin-top: 10px;
        padding: 10px;
        padding-top: 15px;

        .title {
            width: 280px;
            line-height: 20px;
            height: 40px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
        }

        .hr {
            width: 100%;
            height: 1px;
            background: #DDDDDD;
            margin-top: 15px;
        }

        .status {
            position: absolute;
            top: 10px;
            right: 0;
            width: 44px;
            height: 24px;
            line-height: 24px;
            border-radius: 12px 0px 0px 12px;
            text-align: center;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 12px;
            color: #FFFFFF;
        }

        .bottom {
            display: flex;
            justify-content: space-between;
            line-height: 20px;
            font-family: Source Han Sans SC, Source Han Sans SC;
            font-size: 14px;
            color: #666666;
            margin-top: 10px;

            .score {
                color: #E3041F;
                font-weight: bold;
            }
        }
    }
}
</style>