contentTab.vue

<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' "
                    :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 {
      searchVal: "",
      pageNum: 1,
      pageSize: 8,
      tableData: [],
      loading: false,
      finished: false,
      refreshing: false,
      flag: true,
    };
  },
  watch: {
    active() {
      this.onRefresh();
    },
  },
  mounted() {
    this.getList();
  },
  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") {
            this.$toast(res.data.message);
            this.onRefresh();
          } else {
            this.$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>