<template> <div class="learn-detail-content"> <div class="page-wrapper"> <form action="javascript:return true"> <van-search type="search" v-model="searchVal" shape="round" placeholder="请输入学习内容名称" @search="onRefresh" /> </form> <div class="detail-body"> <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="50" > <van-cell v-for="(item, index) in tableData" :key="index"> <van-swipe-cell :stop-propagation="true"> <van-card :title="item.name" :thumb="item.cover" @click="goDetail(item)" /> <template #right> <van-button @click="optFn(item)" square :disabled="(item.auditStatus!=='APPROVED_FINAL')||((item.createType === '1')&&(userType !== '1')) " :text="active ? '启用' : '禁用'" type="danger" :class="{ 'delete-button': active === 0, 'enable-button': active === 1, }" /> </template> </van-swipe-cell> </van-cell> </van-list> </van-pull-refresh> </div> </div> </div> </template> <script> export default { props: ["active", "proId"], data() { return { userType:'', searchVal: "", pageNum: 1, pageSize: 8, tableData: [], loading: false, finished: false, refreshing: false, flag: true, }; }, watch: { active() { this.onRefresh(); }, }, mounted() { this.getList(); this.userType = JSON.parse(sessionStorage.getItem("userInfo")).type; console.log(this.userType) }, methods: { // 获得数据接口 getList() { let vm = this; let param = { _index: this.pageNum, _size: this.pageSize, isPublished: this.active !== 1, learningProjectId: this.proId, nameOrCode: this.searchVal, }; vm.$https( { url: "learningContent/getPageList", method: "post", authType: this.backToken, }, vm.$qs.stringify(param) ) .then((res) => { if (res.data.resultCode === "200") { vm.loading = false; let data = res.data.data; vm.tableData = vm.flag ? data.records : vm.tableData.concat(data.records); vm.flag = false; vm.refreshing = false; vm.pageNum = vm.pageNum + 1; vm.finished = data.records.length < vm.pageSize; vm.tableData = [...vm.tableData]; } else { vm.$toast( res.data.message ); } }) .catch(function (err) { console.log(err); }); }, // 列表的load上拉加载事件 onLoad() { if (!this.flag) { console.log("加载数据"); this.loading = true; this.flag = false; this.getList(); } }, onRefresh() { // 清空列表数据 this.finished = false; this.flag = true; this.loading = true; this.pageNum = 1; this.getList(); }, optFn(item) { if (this.active === 1) { this.changeStatus(true, item.id); } else { this.changeStatus(false, item.id); } }, // 启用 禁用 changeStatus(flag, id) { let vm = this; let param = { id: id, isPublish: flag, }; vm.$https( { url: `learningContent/enable/${id}`, method: "put", authType: this.backToken, }, vm.$qs.stringify(param) ) .then((res) => { if (res.data.resultCode === "200") { vm.$toast(res.data.message); vm.onRefresh(); } else { vm.$toast(res.data.message); } }) .catch(function (err) { console.log(err); }); }, goDetail(item) { this.$router.push({ path: "/learnDetail", query: { id: item.id } }); }, }, }; </script> <style lang="scss" scoped> .learn-detail-content { height: calc(100vh - 100px); .page-wrapper { height: 100%; } .van-search { padding: 20px 0; .van-cell { line-height: 30px; } } ::v-deep .van-field__left-icon { color: #ac9374; .van-icon { font-size: 20px; } } .detail-body { height: calc(100% - 80px); overflow-y: auto; .van-pull-refresh { height: 100%; } .van-cell { padding: 0; } .van-cell::after { border-bottom: none; } } .delete-button { height: 100%; background: #a4151d; font-size: 16px; } .enable-button { height: 100%; background: #6bc20b; font-size: 16px; } .van-button--danger { border: none; } .van-card { padding: 16px; background-color: transparent; border-bottom: 1px solid #eee; .van-card__thumb { width: 64px; height: 40px; } .van-card__content { min-height: 40px; .van-card__title { line-height: 40px; font-size: 16px; color: #333; } } } } </style>