v3-h5-web/devTools/page/components/listItem/fileSysItem.vue

<template>
  <view
    class="fileItem"
    @click="fileClick"
    @longpress.stop="longpress"
  >
    <view class="icon">
      <image
        class="iconImg"
        :src="icon"
        mode="aspectFit"
      />
    </view>
    <view class="fileInfo">
      <text
        class="fileName"
        :style="{
          color: item.type == 'back' ? '#999' : '#333',
        }"
      >
        {{ item.name }}
      </text>
      <view
        v-if="item.type != 'back'"
        class="fileMeta"
      >
        <text class="textItem">{{ item.date }}</text>
        <text
          v-if="item.type == 'file'"
          class="textItem"
        >
          {{ item.sizeText }}
        </text>
      </view>
    </view>
  </view>
</template>
<script>
import appDelDir from "../libs/appDelDir";

export default {
  props: {
    /**
     * 当前文件路径类型
     */
    dirType: {
      type: String,
      default: "",
    },
    /**
     * 文件路径列表
     */
    dirList: {
      type: Array,
      default: () => [],
    },
    /**
     * 单个列表对象
     */
    item: {
      type: Object,
      default() {
        return {
          type: "", // 对象类型  dir back file
          name: "",
          fileType: "", // 文件后缀名称
          size: "", // 文件大小
          icon: "", //图标
          time: "", // 最后更改日期
          date: "",
          fileCount: 0, //文件夹下的文件数量
          directoryCount: 0, //文件夹下的目录数量
        };
      },
    },
  },
  computed: {
    icon() {
      // #ifdef APP-PLUS
      // IOS端直接访问本地图片会报跨域，所以仅支持安卓预览图片
      if (
        uni.getSystemInfoSync().platform == "android" &&
        this.item.type == "file" &&
        ["jpg", "jpeg", "png", "gif", "webp", "bmp"].indexOf(this.item.fileType) > -1
      ) {
        let path = this.getPath();
        return path;
      }
      // #endif
      return this.item.icon;
    },
  },
  data() {
    return {};
  },
  methods: {
    /**
     * 点击事件
     */
    fileClick() {
      let that = this;
      if (this.item.type == "dir") {
        this.$emit("goChildDir", this.item.name);
      } else if (this.item.type == "back") {
        this.$emit("goChildDir", "__back__");
      } else {
        if (
          //? 使用文本编辑器快捷打开文件
          ["txt", "sql", "js", "css", "html", "log", "json"].indexOf(this.item.fileType) != -1
        ) {
          this.openInEdit();
        } else if (["jpg", "jpeg", "png", "gif", "webp", "bmp"].indexOf(this.item.fileType) != -1) {
          let path = that.getPath();
          uni.previewImage({
            urls: [path],
          });
        } else {
          this.longpress();
        }
      }
    },
    /**
     * 使用文本编辑器打开
     */
    openInEdit() {
      let that = this;
      let path = that.getPath();
      that.$emit("openEditFileDialog", {
        title: that.item.name,
        canSave: that.dirType != "PRIVATE_WWW",
        path,
        size: that.item.size,
      });
    },
    /**
     * 获取当前文件绝对路径
     */
    getPath() {
      let that = this;
      let path = "";
      switch (that.dirType) {
        case "wx":
          path = wx.env.USER_DATA_PATH;
          break;
        case "PRIVATE_DOC":
          path = "_doc";
          break;
        case "PRIVATE_WWW":
          path = "_www";
          break;
        case "PUBLIC_DOCUMENTS":
          path = "_documents";
          break;
        case "PUBLIC_DOWNLOADS":
          path = "_downloads";
          break;
        default:
          break;
      }
      that.dirList.map((x) => {
        path += "/" + x;
      });
      path = path + "/" + that.item.name;
      return path;
    },
    /**
     * 长按事件
     */
    longpress() {
      let that = this;
      let path = that.getPath();

      let menu = [
        {
          text: `复制绝对路径`,
          click() {
            // #ifdef APP-PLUS
            path = plus.io.convertLocalFileSystemURL(path);
            // #endif
            uni.setClipboardData({
              data: path,
            });
          },
        },
        {
          text: `删除`,
          click() {
            uni.showModal({
              title: "警告",
              content: "是否确认删除" + (that.item.type == "dir" ? "文件夹:" : "文件:") + that.item.name + "?",
              success(res) {
                if (res.confirm) {
                  uni.showLoading({
                    title: "删除中",
                  });

                  function delSuccess() {
                    uni.hideLoading();
                    uni.showToast({
                      title: "删除成功！",
                      icon: "success",
                    });
                    that.$emit("getPage");
                  }
                  function delError() {
                    uni.hideLoading();
                    uni.showToast({
                      title: "删除失败",
                      icon: "none",
                    });
                  }

                  // #ifdef MP-WEIXIN
                  if (1) {
                    let fs = wx.getFileSystemManager();

                    if (that.item.type == "file") {
                      // ! 删除文件
                      fs.unlink({
                        filePath: path,
                        success: delSuccess,
                        fail: delError,
                      });
                    } else {
                      // ! 删除文件夹
                      fs.rmdir({
                        dirPath: path,
                        recursive: true,
                        success: delSuccess,
                        fail: delError,
                      });
                    }

                    return;
                  }
                  // #endif

                  if (that.item.type == "file") {
                    // ! 删除文件
                    plus.io.resolveLocalFileSystemURL(
                      path,
                      (entry) => {
                        // 可通过entry对象操作test.html文件
                        entry.remove(delSuccess, delError);
                      },
                      delError
                    );
                  } else {
                    // ! 删除文件夹
                    appDelDir(path + "/")
                      .then(delSuccess)
                      .catch(delError);
                  }
                }
              },
            });
          },
        },
      ];

      let isMp = false;
      // #ifdef MP-WEIXIN
      isMp = true;
      // #endif

      if (!isMp || that.item.type != "dir") {
        menu.push({
          text: "重命名",
          click() {
            that.$emit("editDirName", {
              isDir: that.item.type == "dir",
              isEdit: true,
              name: that.item.name,
            });
          },
        });
      }

      // #ifdef APP-PLUS
      if (that.item.type == "file") {
        menu.push({
          text: "调用外部程序打开此文件",
          click() {
            plus.runtime.openFile(path, null, (e) => {
              uni.showToast({
                title: "文档打开失败！" + e.message,
                icon: "none",
              });
            });
          },
        });
      }
      // #endif

      // #ifdef MP-WEIXIN
      if (["doc", "xls", "ppt", "pdf", "docx", "xlsx", "pptx"].indexOf(that.item.fileType) != -1) {
        menu.unshift({
          text: "打开该文档",
          click() {
            let path = that.getPath();
            uni.openDocument({
              filePath: path,
              fail() {
                uni.showToast({
                  title: "文档打开失败！",
                  icon: "none",
                });
              },
            });
          },
        });
      }
      // #endif

      if (that.item.type == "file") {
        menu.unshift({
          text: `用文本编辑器打开`,
          click() {
            that.openInEdit();
          },
        });
      }

      uni.showActionSheet({
        itemList: menu.map((x) => x.text),
        success({ tapIndex }) {
          menu[tapIndex].click();
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fileItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0rpx 20rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  width: 750rpx;
  /* #ifndef APP-PLUS */
  min-height: 70rpx;
  /* #endif */
  &:active {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .icon {
    width: 50rpx;
    height: 50rpx;
    border-radius: 10rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.05);
    .iconImg {
      width: 40rpx;
      height: 40rpx;
    }
  }
  .fileInfo {
    margin-left: 10rpx;
    width: 650rpx;
    display: flex;
    flex-direction: column;
    .fileName {
      width: 650rpx;
      lines: 1;
      overflow: hidden;
      font-size: 24rpx;
      color: #333;
      line-height: 28rpx;
    }
    .fileMeta {
      margin-top: 5rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 650rpx;
      .textItem {
        margin-right: 20rpx;
        font-size: 20rpx;
        line-height: 26rpx;
        color: #999;
      }
    }
  }
}
</style>