saas_miniprogram/components/course/handoutsBox.vue

<template>
  <view>
    <template v-if="courseHandoutsData.handoutsId">
      <u-search
        v-if="isShowSearch"
        placeholder="搜索讲义名称"
        bg-color="#ffffff"
        margin="0 0 20rpx"
        v-model="fileName"
        @custom="search"
        @search="search"
      ></u-search>

      <view
        class="handouts-box"
        v-for="item in courseHandoutsData.fileList"
        :key="item.fileId"
      >
        <handouts-tree
          :canDownload="courseHandoutsData.canDownload"
          :isShowDownIcon="isShowDownIcon"
          :fileInfo="item"
        ></handouts-tree>
      </view>
    </template>
    <view v-else style="text-align: center">暂无讲义</view>
  </view>
</template>

<script>
import handoutsTree from "@/components/course/handoutsTree.vue";
export default {
  name: "HandoutsBox",
  props: {
    handoutsId: {
      type: Number,
    },
    isShowSearch: {
      type: Boolean,
      default: true,
    },
    isShowDownIcon: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      fileName: "",
      courseHandoutsData: {},
    };
  },

  mounted() {
    this.courseHandouts();
  },
  methods: {
    search(val) {
      this.courseHandouts();
    },
    courseHandouts() {
      if (!this.handoutsId) {
        return;
      }
      this.$api
        .courseHandouts({
          handoutsId: this.handoutsId,
          fileName: this.fileName,
        })
        .then((res) => {
          this.courseHandoutsData = res.data.data;
        });
    },
  },

  components: {
    handoutsTree,
  },
};
</script>

<style lang="scss" scoped>
.handouts-box {
  border-radius: 20rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
}
</style>