trafficBroadcast/js/entry.js

const render = global => {
  async function getCloudBaseApp() {
    const app = cloudbase.init({
      env: "cloud1-6gbxfp9x33ff3b7c",
    });

    // 登录
    const auth = app.auth({ persistence: "local" });
    const loginState = await auth.getLoginState();

    // 匿名登录
    if (!loginState) {
      await auth.anonymousAuthProvider().signIn();
    }

    return app;
  }
  global.layui.use(["jquery", "laypage"], async function () {
    var laypage = layui.laypage;
    var $ = layui.jquery;

    var selectFiles = [];
    var data = {
      Administration: [],
      page: 1,
      pageSize: 20,
    };
    // 配置环境
    const app = await getCloudBaseApp();
    const db = app.database();
    const _ = db.command;
    let database = db.collection("data_asset");
    let ori = await database.get();
    data.Administration = sort(ori.data || []);
    let urlList = (data.Administration || []).map(v => v.url);
    app.getTempFileURL({ fileList: urlList }).then(res => {
      console.log(res.fileList);
      let list = res.fileList || [];
      for (let i = 0; i < list.length; i++) {
        const v = list[i];
        data.Administration[i].downUrl = v.download_url;
      }
      //执行渲染.
      laypage.render({
        elem: "page",
        limit: data.pageSize,
        count: data.Administration.length, //数据总数，从服务端得到
        jump: function (obj, first) {
          //obj包含了当前分页的所有参数，比如：
          console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
          console.log(obj.limit); //得到每页显示的条数
          data.page = obj.curr;
          render_table();
        },
      });
    });
    // 渲染table
    function render_table() {
      let tb = $(".tb");
      tb.html("");
      let act = (data.page - 1) * data.pageSize;
      let end = data.page * data.pageSize;
      if (end > data.Administration.length) end = data.Administration.length;
      for (let i = act; i < end; i++) {
        const v = data.Administration[i];
        let type = "";
        if (v.type == "video") type = "视频";
        else type = "图片";
        let tr = $("<tr></tr>");
        let tdType = $("<td>" + type + "</td>");
        let tdImg = v.type == "img" ? $("<td><img style='width:80px;' src='" + v.downUrl + "'></td>") : $("<td>-</td>");
        let tdUrl = $("<td>" + v.url + "</td>");
        let tdTool = $(
          '<td><a class="layui-btn layui-btn-danger layui-btn-xs delete" data-index="' +
            i +
            '">删除</a></td>'
        );
        tr.append(tdType);
        tr.append(tdUrl);
        tr.append(tdImg);
        tr.append(tdTool);
        tb.append(tr);
      }
    }

    $(".tb").on('click','.delete',function () {
      let obj = data.Administration[$(this).attr("data-index")];
      let remove = $(this).parent().parent();
      console.log("---")
      //删除
      layer.confirm("确定要删除该文件么", async function (index) {
        layer.close(index);
        //向服务端发送删除指令
        try {
          //   数据库删除
          await database
            .where({
              _id: _.eq(obj._id),
            })
            .remove();
          //   云存储删除
          await app.deleteFile({
            fileList: [obj.url],
          });
          remove.remove();
          layer.msg("删除成功");
        } catch (err) {
          layer.msg("删除失败");
        }
      });
    });

    $("#up").change(function () {
      let filesList = document.getElementById("up").files || [];
      let pathlist = document.getElementById("up").value.split("\\");
      pathlist.pop();
      data.filePath = pathlist.join("\\") + "\\";
      selectFiles = [];
      let err = "";

      for (let i = 0; i < filesList.length; i++) {
        const f = filesList[i];
        let file = {
          name: f.name,
          type: /image\/\w+/.test(f.type)
            ? "img"
            : /^video/.test(f.type)
            ? "video"
            : "orther",
          file: f,
        };
        if (file.type == "orther") {
          err = "已过滤非音视频文件";
          continue;
        }
        if (file.type != "img") {
          var url = null;
          if (window.createObjectURL != undefined) {
            // basic
            url = window.createObjectURL(f);
          } else if (window.URL != undefined) {
            // mozilla(firefox)
            url = window.URL.createObjectURL(f);
          } else if (window.webkitURL != undefined) {
            // webkit or chrome
            url = window.webkitURL.createObjectURL(f);
          }
          $(".upImg").append($("<video src='" + url + "' />"));
          selectFiles.push(file);
          continue;
        }
        let reader = new FileReader();
        reader.readAsDataURL(f);
        reader.onload = function () {
          // 当 FileReader 读取文件时候，读取的结果会放在 FileReader.result 属性中
          // document.querySelector("#img").src = this.result;
          file.base64 = this.result;
          compressImg(file.file, file.base64, 2000).then(minifile => {
            file.file = minifile;
          });
          selectFiles.push(file);
          $(".upImg").append($("<img src='" + this.result + "' />"));
        };
      }
      err && layer.msg(err);
    });
    $(".addE").click(function () {
      $(".m").show();
    });
    $(".upfile").click(async function () {
      if (!selectFiles.length) return layer.msg("未选择文件");
      for (let i = 0; i < selectFiles.length; i++) {
        const v = selectFiles[i];
        console.log("---------->", v);
        let f = await app.uploadFile({
          cloudPath: v.name,
          filePath: v.file,
        });
        let d = {
          // 新增数据
          create_time: new Date().getTime(),
          type: v.type,
          url: f.fileID,
        };
        await database.add(d);
      }
      $(".close").click();
      let list = await database.get();
      data.Administration = sort(list.data || []);
      render_table();
    });
    $(".close").click(function () {
      $(".m").hide();
      $(".upImg").html("");
      document.getElementById("up").value = "";
    });

    /**
     *
     * @param {*} file 原始文件
     * @param {*} width 压缩宽度
     */
    function compressImg(file, result, width) {
      return new Promise((resolve, reject) => {
        let img = new Image();
        img.src = result;
        img.onload = () => {
          let oriWidth = img.width;
          let resultNum = width / oriWidth;
          let resultHeight = resultNum * img.height;
          if (oriWidth <= width) return resolve(file);
          // 需要压缩的图片：resultHeight是压缩后的高度
          let canvas = document.createElement("canvas");
          if (!canvas || !canvas.getContext)
            return reject({
              msg: "浏览器不支持canvas",
            });
          canvas.width = width;
          canvas.height = resultHeight;
          let context = canvas.getContext("2d");
          context.drawImage(img, 0, 0, width, resultHeight);
          canvas.toBlob(
            function (blob) {
              resolve(blob);
            },
            file.type,
            0.8
          );
        };
      });
    }

    function sort(list) {
      return list.sort((a, b) => {
        return b.create_time - a.create_time;
      });
    }
  });

  return Promise.resolve();
};

(global => {
  global["purehtml"] = {
    bootstrap: () => {
      return Promise.resolve();
    },
    mount: () => {
      return render(global);
    },
    unmount: () => {
      return Promise.resolve();
    },
  };
})(window);