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 = ori.data || [];
    //执行渲染.
    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 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(tdTool);
        tb.append(tr);
      }
    }

    $(".delete").click(function () {
      let obj = data.Administration[$(this).attr("data-index")];
      let remove = $(this).parent().parent();
      //删除
      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;
          selectFiles.push(file);
          $(".upImg").append($("<img src='" + this.result + "' />"));
        };
        // 设置以什么方式读取文件，这里以base64方式
      }
      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 = list.data || [];
      render_table()
    });
    $(".close").click(function () {
      $(".m").hide();
      $(".upImg").html("");
      document.getElementById("up").value = "";
    });
  });

  return Promise.resolve();
};

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