@cmstops/pro-compo/lib/thumbCard/component.js

[物料平台文档中心](https://arco.design/docs/material/guide)

"use strict";
var vue = require("vue");
var vueCmstopIcons = require("@arco-iconbox/vue-cmstop-icons");
var webVue = require("@arco-design/web-vue");
var magic = require("./assets/magic.js");
var config = require("../config.js");
var index$1 = require("../utils/index.js");
var index = require("./components/ThumbUploading/index.js");
const _hoisted_1 = {
  key: 2,
  class: "thumb-select-tag"
};
const _hoisted_2 = ["onClick"];
const _sfc_main = vue.defineComponent({
  ...{ name: "thumbCard" },
  __name: "component",
  props: {
    BASE_API: {},
    url: {},
    thumb: {},
    useMask: { type: Boolean },
    options: {},
    meta: {},
    catalog: {},
    handlersKey: {},
    handlersAlways: { type: Boolean }
  },
  emits: ["handle", "edit"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const BASE_API = props.BASE_API || config.DEFAULT_BASE_API;
    const WATER_BG_URL = magic;
    const isUploading = vue.computed(() => {
      var _a;
      return ((_a = props.meta) == null ? void 0 : _a.progress) != null;
    });
    const realThumb = vue.computed(() => {
      if (["image", "video"].includes(props.catalog || "")) {
        return props.thumb || props.url || "";
      }
      return `${BASE_API}/static/img/music.2ee269c.png`;
    });
    const styleObject = vue.computed(() => {
      const style = {};
      if (props.useMask) {
        style.backgroundImage = `url(${WATER_BG_URL})`;
      }
      return style;
    });
    const classList = vue.computed(() => {
      const list = [];
      if (!props.useMask) {
        list.push("thumb-no-mask");
      }
      return list;
    });
    const thumbHandlerClass = vue.computed(() => {
      const list = [];
      if (props.handlersAlways) {
        list.push("thumb-handler-always");
      }
      return list;
    });
    const aImageAttr = vue.computed(() => {
      return {
        fit: "contain",
        preview: false,
        width: "100%",
        height: "100%",
        ...props.options
      };
    });
    function handleOption(key) {
      emits("handle", { key, item: props.meta });
    }
    return (_ctx, _cache) => {
      var _a;
      return vue.openBlock(), vue.createElementBlock("div", {
        class: vue.normalizeClass(["thumb-select-wrapper", classList.value]),
        style: vue.normalizeStyle(styleObject.value)
      }, [
        isUploading.value ? (vue.openBlock(), vue.createBlock(index, {
          key: 0,
          meta: _ctx.meta
        }, null, 8, ["meta"])) : _ctx.catalog && _ctx.url ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
          vue.createCommentVNode(" \u6709\u7C7B\u578B\u7684\u5C01\u9762 "),
          vue.createCommentVNode(" \u56FE\u7247 "),
          _ctx.catalog ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Image), vue.mergeProps({
            key: 0,
            class: "thumb-image",
            src: realThumb.value
          }, aImageAttr.value), null, 16, ["src"])) : vue.createCommentVNode("v-if", true)
        ], 64)) : vue.createCommentVNode("v-if", true),
        vue.createCommentVNode(" \u4E00\u4E9B\u6807\u7B7E\uFF08\u56DB\u4E2A\u89D2\uFF09 "),
        ["video", "audio"].includes(_ctx.catalog) && _ctx.meta ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
          _ctx.catalog === "video" ? (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconVideoTag), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(vueCmstopIcons.IconAudioTag), { key: 1 })),
          vue.createTextVNode(" " + vue.toDisplayString(vue.unref(index$1.mediaTime)((_a = _ctx.meta) == null ? void 0 : _a.length)), 1)
        ])) : vue.createCommentVNode("v-if", true),
        vue.createCommentVNode(" \u5916\u6302\u9009\u9879 "),
        vue.createElementVNode("div", {
          class: vue.normalizeClass(["thumb-handler-list", thumbHandlerClass.value])
        }, [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.handlersKey, (item) => {
            return vue.openBlock(), vue.createElementBlock("div", {
              key: item.key,
              class: "handler-item",
              onClick: vue.withModifiers(() => handleOption(item.key), ["stop"])
            }, vue.toDisplayString(item.label), 9, _hoisted_2);
          }), 128)),
          vue.renderSlot(_ctx.$slots, "handlers")
        ], 2)
      ], 6);
    };
  }
});
module.exports = _sfc_main;