zc_saas_h5/components/course/handoutsTree.vue

<template>
  <view style="padding-left: 20rpx">
    <view v-if="fileInfo.type == 2">
      <view
        @click="handelClick"
        class="fl u-border-bottom"
        style="height: 78rpx; padding-right: 30rpx"
      >
        <u-icon name="arrow-down" color="#999" size="24" v-if="!down"></u-icon>
        <u-icon name="arrow-right" color="#999" size="24" v-if="down"></u-icon>
        <view class="menu_name">
          <view class="u-line-1">{{ fileInfo.urlName }}</view>
          <view v-if="fileInfo.filePath" class="pathtips u-line-1">
            {{ fileInfo.filePath }}
          </view>
        </view>
      </view>
      <view v-show="!down">
        <view v-for="item in fileInfo.children" :key="item.fileId">
          <handouts-tree
            :isShowDownIcon="isShowDownIcon"
            :canDownload="canDownload"
            :fileInfo="item"
          ></handouts-tree>
        </view>
      </view>
    </view>
    <view v-if="fileInfo.type == 1">
      <view class="fl_c u-border-bottom level1">
        <view class="title">
          <view class="u-line-1">{{ fileInfo.urlName }}</view>
          <view v-if="fileInfo.filePath" class="pathtips u-line-1">
            {{ fileInfo.filePath }}
          </view>
        </view>

        <view @click="openDocument" v-if="isShowDownIcon">
          <image
            v-if="!downLoading"
            src="/pages3/static/imgs/downLoad.png"
          ></image>
          <image
            v-else
            src="/pages3/static/imgs/downLoading.png"
            class="loading_down"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import handoutsTree from "@/components/course/handoutsTree.vue";
export default {
  name: "handoutsTree",
  props: {
    fileInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    canDownload: {
      type: Number,
    },
    isShowDownIcon: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      down: true,
      downLoading: false,
    };
  },

  methods: {
    handelClick() {
      this.down = !this.down;
    },
    openDocument() {
      let url = this.$method.splitImgHost(this.fileInfo.url);
      // #ifdef H5
      uni.navigateTo({
        url: `/pages5/webview/sdlink?url=https://preview.xyyxt.net?src=${url}`,
      });
      // #endif
      // #ifdef MP-WEIXIN
      this.downLoading = true;
      uni.downloadFile({
        url: url,
        success: (res) => {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: this.canDownload == 1 ? true : false,
            success: (res) => {
              this.downLoading = false;
            },
            fail: (err) => {
              this.downLoading = false;
              uni.showToast({
                icon: "none",
                title: "文档地址错误",
              });
            },
          });
        },
        fail: (err) => {
          this.downLoading = false;
          uni.showModal({
            title: "提示",
            content: "文档错误," + err.errMsg,
            showCancel: false,
          });
        },
      });
      // #endif
    },
  },
  components: {
    handoutsTree,
  },
};
</script>

<style lang="scss" scoped>
.menu_name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-left: 14rpx;
  .pathtips {
    font-size: 24rpx;
    color: #999;
  }
}

.level1 {
  height: 78rpx;
  padding-right: 20rpx;
  .title {
    // flex: 1;
    width: 90%;
    font-size: 26rpx;
    color: #333;
    .pathtips {
      font-size: 22rpx;
      color: #999;
    }
  }
  .loading_down {
    transform: rotate(360deg);
    animation: rotation 3s linear infinite;
  }
  image {
    width: 40rpx;
    height: 40rpx;
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
</style>