queenshow/src/modules/resource/components/PromotionItem.tsx

import { css, cx } from "@linaria/core";
import { IconMore } from "@queenjs/icons";
import { Image, View } from "@queenjs/ui";
import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
import dayjs from "dayjs";
import { defineComponent } from "vue";
import { any } from "vue-types";
import { useResource } from "..";
import { getPathname } from "@/dict";

export default defineComponent({
  props: {
    record: any(),
  },
  emits: [],
  setup(props) {
    const resource = useResource();

    const goEdit = () => {
      // if (location.host == "www.infish.cn") {
      //   const url = `${location.origin}${location.pathname}/projects/queenshowv1/editor.html#/?id=${props.record._id}`;
      //   location.href = url;
      //   return;
      // }
      const url = `${location.origin}${getPathname()}editor.html#/?id=${props.record._id}`;
      location.href = url;
    };

    return () => {
      const { record } = props;

      return (
        <div class={cx(itemStyles, "relative")}>
          <View ratio={1.4} class="overflow-hidden relative">
            <Image class="h-1/1 w-1/1" src={record?.thumbnail?.url} />
            <Tag
              color="#E88B00"
              // color="rgba(0, 0, 0, 0.4)"
              class="absolute top-0 left-0 z-1 !rounded-none"
            >
              未发布
            </Tag>
            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
              <div
                class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center"
                onClick={goEdit}
              >
                编辑
              </div>
              <div class="text-white icon_action w-60px leading-60px ml-10px cursor-pointer rounded-1/2 text-center">
                预览
              </div>
            </div>
          </View>
          <div class="item_footer rounded-b-4px flex items-center justify-between p-15px">
            <div>
              <div class="text-white text-bold">{record.title}</div>
              <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
                {dayjs(record.updateTime).format("YYYY.MM.DD")} 发布
                <Divider type="vertical"></Divider>
                23次浏览
              </div>
            </div>
            <Dropdown
              placement="bottom"
              overlay={
                <Menu class="w-90px">
                  <Menu.Item>复制</Menu.Item>
                  <Menu.Item>分享</Menu.Item>
                  <Menu.Item>
                    <div
                      onClick={() => resource.actions.renamePromotion(record)}
                    >
                      重命名
                    </div>
                  </Menu.Item>
                  <Menu.Item>
                    <div
                      onClick={() => resource.actions.deletePromotion(record)}
                    >
                      删除
                    </div>
                  </Menu.Item>
                </Menu>
              }
            >
              <IconMore class="text-22px cursor-pointer" />
            </Dropdown>
          </div>
        </div>
      );
    };
  },
});

const itemStyles = css`
  .item_footer {
    background: #414141;
  }
  .icon_action {
    background-color: rgba(0, 0, 0, 0.5);
    &.orange {
      background-color: rgba(232, 139, 0, 0.5);
    }
  }
`;