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

import { IconWechat } from "@/assets/icons";
import { PromotionController } from "@/modules/resource/controllers/PromotionController";
import { clipboard } from "@/utils";
import { useAuth } from "@queenjs-modules/auth";
import { Image } from "@queenjs/ui";
import { useQRCode } from "@vueuse/integrations/useQRCode";
import { Button, Divider, Input } from "ant-design-vue";
import { defineComponent, reactive } from "vue";
import { any } from "vue-types";

export default defineComponent({
  props: {
    record: any().isRequired,
    controller: any<PromotionController>().isRequired,
  },
  setup(props, { slots }) {
    const auth = useAuth();
    const userInfo: any = auth.store.userInfo;
    const isSys = userInfo.roles?.includes("system") ? true : false;
    let shareLink =
      location.origin +
      "/share.html?id=" +
      props.record._id +
      "&isSys=" +
      isSys;
    // if (location.host == "www.infish.cn") {
    //   shareLink =
    //     location.origin +
    //     "/projects/queenshowv1/share.html?id=" +
    //     props.record._id;
    // }

    const qrUrl = useQRCode(shareLink, { margin: 2 });

    const state = reactive({
      ...props.record,
    });

    return () => {
      const { controller, record } = props;
      const { desc, thumbnail, title } = state;

      return (
        <div class="flex items-start">
          <div>
            <div class="scrollbar h-600px relative overflow-y-auto border-1px border-solid border-dark-50">
              {slots.preview?.()}
            </div>
            <div class="mt-20px text-center">
              <Button
                ghost
                type="primary"
                onClick={() => controller.onEdit(record)}
              >
                编辑作品
              </Button>
            </div>
          </div>
          <div class="flex-1 ml-40px">
            <h3 class="mb-20px text-16px">分享设置</h3>
            <div class="flex items-start">
              <div class="relative">
                <Image
                  class="w-80px h-80px object-contain rounded-4px border-1px border-solid border-[#434343]"
                  src={thumbnail}
                />
                <div
                  class="absolute left-0 bottom-0 w-1/1 text-center py-5px text-14px bg-dark-200 bg-opacity-80 cursor-pointer"
                  onClick={async () => {
                    const res: any = await controller.changeThumbnail();
                    state.thumbnail = res[0]?.file?.url;
                  }}
                >
                  更换封面
                </div>
              </div>
              <div class="flex-1 ml-20px">
                <Input
                  class="w-1/1"
                  placeholder="请输入标题"
                  defaultValue={title}
                  onChange={(e: any) => {
                    const title = e.target.value;
                    // if (!title) return;
                    state.title = title;
                  }}
                />
                <Input
                  class="mt-10px w-1/1"
                  placeholder="请输入描述"
                  defaultValue={desc}
                  onChange={(e: any) => {
                    const desc = e.target.value;
                    // if (!desc) return;
                    state.desc = desc;
                  }}
                />
              </div>
            </div>
            <div class="mt-30px text-center">
              <Button
                type="primary"
                class="w-150px"
                onClick={() => controller.updateDesign(record, state)}
              >
                保存
              </Button>
            </div>
            <Divider />
            <div class="mt-40px flex">
              <div>
                <h3 class="text-16px">二维码</h3>
                <div class="mt-20px">
                  <img class="w-120px" src={qrUrl.value} />
                </div>
                <div class="flex items-center justify-center mt-6px">
                  <IconWechat class="mr-5px text-20px !text-[#69bb64] leading-0" />
                  <span class="opacity-80 text-12px">微信扫一扫分享</span>
                </div>
              </div>
              <div class="flex-1 w-0 ml-50px">
                <h3 class=" text-16px">链接分享</h3>
                <div class="mt-20px">
                  <div class="w-1/1 py-4px px-10px rounded-2px truncate opacity-80 bg-light-50 bg-opacity-8">
                    {shareLink}
                  </div>
                  <Button
                    class="mt-10px"
                    type="primary"
                    ghost
                    onClick={() => clipboard.copy(shareLink)}
                  >
                    复制链接
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
  },
});