queenshow/src/pages/website/Promotion2/components/CollectionModal.tsx

import { css } from "@linaria/core";

import { Button, Input, Select } from "ant-design-vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import { any } from "vue-types";
import { Image } from "@queenjs/ui";
import { useResource } from "@/modules/resource";

import dayjs from "dayjs";
import { queenApi, useModal } from "queenjs";
import { useEditor } from "@/modules/editor";
export default defineComponent({
  props: {
    record: any().isRequired,
  },
  setup(props, { slots }) {
    const resource = useResource();
    const state = reactive({
      currCollection: {} as any,
      searchVal: "",
    });
    const editor = useEditor();
    const modal = useModal();
    const EmptyHistory = () => {
      return (
        <div
          class={
            "inline-flex flex-col items-center justify-center w-full h-full  rounded-6px"
          }
          style={{ background: "#F1F2F4" }}
        >
          <div>
            <img
              width={86}
              height={66}
              src={require("@/assets/imgs/empty_history.png")}
            />
          </div>
          <div class={"text-12px mt-16px text-gray"}>暂无历史发送信息</div>
        </div>
      );
    };
    const EmptyCollection = () => {
      return (
        <div class={"text-center"}>
          <div
            class={
              "w-full h-290px inline-flex flex-col items-center justify-center rounded-6px"
            }
            style={{ background: "#F1F2F4" }}
          >
            <img
              class={"object-contain"}
              width={200}
              height={142}
              src={require("@/assets/imgs/404.png")}
            />
          </div>
          <div class={"text-12px mt-18px text-gray"}>
            请输入正确的接收地址以获取信息
          </div>
        </div>
      );
    };
    const workPreview = async (currId: string) => {
      await editor.actions.initDesign(currId, false);
      previewInModal("当前提交");
    };
    const historyPreview = async (hisId: string) => {
      await editor.actions.initWkDesign(hisId);
      previewInModal("历史提交");
    };
    const collectionPreview = async (collection: any) => {
      if (collection.introLink) {
        window.open(collection.introLink);
        return;
      }
      if (collection.introH5Id) {
        await editor.actions.initDesign(collection.introH5Id, false);
        previewInModal("详情介绍");
      }
    };
    const previewInModal = (title: string) => {
      editor.actions.switchMode("preview");
      resource.showModal(
        <div class={"!p-0"}>
          <div class={"h-600px scrollbar"}>
            <editor.components.Preview class="pointer-events-none" />
          </div>
        </div>,
        {
          title: title,
          destroyOnClose: true,
        }
      );
    };
    const itemRender = (data: any) => {
      return (
        <div class={"flex h-full overflow-hidden"}>
          <div class={[itemPreview, "relative"]}>
            <Image class="w-160px h-160px rounded-6px" src={data?.thumbnail} />
            <div
              class={"icon_preview absolute top-8px right-8px"}
              onClick={() => workPreview(data._id)}
            >
              <img
                class={"w-20px h-20px"}
                src={require("@/assets/imgs/icon_preview.png")}
              />
            </div>
          </div>

          <div class={"flex-1 pl-20px  flex flex-col"}>
            <div class={"text-18px"}>{data.title}</div>
            <div class={"my-12px text-gray break-all flex-1 overflow-hidden"}>
              {data.desc}
            </div>
          </div>
        </div>
      );
    };
    const itemHistory = () => {
      if (!state.currCollection.h5) {
        return null;
      }
      const h5 = state.currCollection.h5[0];
      const wks = state.currCollection.wks;
      return (
        <div class={"flex h-full overflow-hidden"}>
          <div class={[itemPreview, "relative"]}>
            <Image class="w-160px h-160px rounded-6px" src={h5.thumbnail} />
            <div
              class={"icon_preview absolute top-8px right-8px"}
              onClick={() => historyPreview(wks.id)}
            >
              <img
                class={"w-20px h-20px"}
                src={require("@/assets/imgs/icon_preview.png")}
              />
            </div>
          </div>
          <div class={"flex-1 pl-20px flex flex-col"}>
            <div class={"text-18px"}>{h5.title}</div>
            <div class={"my-12px text-gray break-all flex-1 overflow-hidden"}>
              {h5.desc}
            </div>
            <div class={"text-12px text-gray"}>
              提交日期：{dayjs(wks.endTime).format("YYYY-MM-DD")}
            </div>
          </div>
        </div>
      );
    };
    const CollectionRender = () => {
      const data = state.currCollection;
      return (
        <div>
          <div class={"text-18px mb-20px"}>{data.title}</div>
          <div class={[itemPreview, "w-full h-290px rounded-6px relative"]}>
            <Image class={"w-full h-full rounded-6px"} src={data.cover} />
            {(data.introLink || data.introH5Id) && (
              <div
                class={"icon_preview absolute top-10px right-10px"}
                onClick={() => {
                  collectionPreview(data);
                }}
              >
                <img
                  class={"w-30px h-30px"}
                  src={require("@/assets/imgs/icon_preview.png")}
                />
              </div>
            )}
          </div>
          <div class={"flex justify-between items-center mt-15px"}>
            <div>
              {data.logo && (
                <Image
                  class={"w-42px h-42px object-cover rounded-2px"}
                  src={data.logo}
                />
              )}
              {data.endTime && (
                <span class={"pl-20px text-gray"}>
                  截止日期：{dayjs(data.endTime).format("YYYY-MM-DD")}
                </span>
              )}
            </div>
            {data.status && (
              <div
                class={
                  "text-16px text-white bg-blue-500 px-20px py-10px rounded-4px"
                }
              >
                {data.status}
              </div>
            )}
          </div>
        </div>
      );
    };
    const search = async () => {
      if (!state.searchVal) {
        return false;
      }
      const collection = await resource.actions.searchCollection(
        state.searchVal,
        props.record._id
      );
      if (!collection) {
        return;
      }
      state.currCollection = collection[0];
    };
    const commit = async () => {
      const res = await resource.actions.commitCollection({
        id: state.currCollection._id,
        h5Id: props.record._id,
      });
      if (!res) {
        return;
      }
      modal.submit();
      queenApi.messageSuccess("发送成功");
    };
    return () => {
      return (
        <div class={ModalStyle}>
          <div class={"space-y-14px"}>
            <div
              class={"flex items-center bg-white px-30px py-18px rounded-6px"}
            >
              <div class={"text-16px"}>接收地址</div>
              <div class={"flex-1 px-30px"}>
                <Input
                  class={"w-full text-center"}
                  placeholder={"请输入接收地址"}
                  value={state.searchVal}
                  onChange={(e) => {
                    state.searchVal = e.target.value || "";
                  }}
                ></Input>
              </div>
              <div>
                <Button
                  type="primary"
                  ghost
                  icon={<SearchOutlined />}
                  onClick={search}
                >
                  查询
                </Button>
              </div>
            </div>
            <div class={"bg-white px-30px py-20px"}>
              {state.currCollection._id
                ? CollectionRender()
                : EmptyCollection()}
            </div>
            <div class={"flex items-center space-x-16px"}>
              <div class={"flex-1 bg-white px-30px py-18px rounded-6px"}>
                <div class={"text-16px"}>当前发送</div>
                <div class={"mt-20px h-160px"}>{itemRender(props.record)}</div>
              </div>
              <div class={"flex-1 bg-white px-30px py-18px rounded-6px"}>
                <div class={"text-16px"}>历史发送</div>
                <div class={"mt-20px h-160px"}>
                  {state.currCollection.h5 ? itemHistory() : EmptyHistory()}
                </div>
              </div>
            </div>
          </div>
          <div class={"text-center mt-24px"}>
            <Button
              type="primary"
              ghost
              size={"large"}
              class={"w-240px"}
              disabled={state.currCollection._id ? false : true}
              onClick={commit}
            >
              确认发送
            </Button>
          </div>
        </div>
      );
    };
  },
});
const itemPreview = css`
  &:hover {
    .icon_preview {
      opacity: 1;
    }
  }
  .icon_preview {
    opacity: 0;
    cursor: pointer;
  }
`;
const ModalStyle = css`
  color: #111;
  .ant-input {
    border-radius: 4px;
    border-color: rgba(51, 51, 51, 0.3);
    color: #111;
    &::placeholder {
      color: #999;
    }
  }
  .ant-select:not(.ant-select-customize-input) {
    .ant-select-selector {
      border-radius: 4px;
      border-color: rgba(51, 51, 51, 0.3);
      color: #111;
      .ant-select-selection-search {
        input {
          text-align: center;
        }
      }
    }
  }
  .ant-select-selection-placeholder {
    color: #999;
  }
  .ant-btn-background-ghost.ant-btn-primary {
    border-radius: 4px;
    background-color: rgba(255, 227, 178, 0.3);
  }
  .ant-btn-background-ghost.ant-btn-primary[disabled] {
    color: #fff;
    border-color: transparent;
    background: #ccc;
    text-shadow: none;
    box-shadow: none;
    &:hover {
      color: #fff;
      border-color: transparent;
      background: #ccc;
      text-shadow: none;
      box-shadow: none;
    }
  }
`;