qn-ai-pc/src/views/task/components/InviteForm/index.vue

<script lang="ts" setup>
import {
  CloseOutlined,
} from '@ant-design/icons-vue'
import { Button, Divider, QRCode } from 'ant-design-vue'
import { ref } from 'vue'
import { copyText } from '@/utils/copyTextToClipboard'

defineProps({
  show: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:show'])

// 关闭弹窗
function handleClose() {
  emits('update:show', false)
}
// 下载二维码
const qrcodeCanvasRef = ref()
async function dowloadChange() {
  const url = await qrcodeCanvasRef.value.toDataURL()
  const a = document.createElement('a')
  a.download = 'QRCode.png'
  a.href = url
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

const code = ref('你好啊')
</script>

<template>
  <transition name="modal">
    <div v-if="show" class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-body">
            <div class="closeIcon" @click="handleClose">
              <CloseOutlined style="color: #fff;" />
            </div>

            <div class="close" @click="handleClose">
            </div>
            <div class="qr">
              <QRCode ref="qrcodeCanvasRef" :size="145" :value="`http://192.168.1.121:5173/Login?inviteCode=${code}`" />
            </div>
            <Button type="primary" class="save-qr" @click="dowloadChange">
              保存二维码
            </Button>
          </div>
          <Divider style="border-color: #7cb305;margin: 0;" dashed />
          <div class="invitationCode">
            <div class="i-name">
              邀请码邀请
            </div>
            <div class="i-code">
              {{ code }}
            </div>
            <div class="i-copy">
              <Button class="copy-btn" @click="copyText(code)">
                复制邀请码
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

  <style scoped lang="scss">
.message-class {
  position: relative;
  z-index: 9999;
}
.modal-mask {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  .modal-wrapper {
    background-color: #fff;
  }

  .modal-body {
    width: 530px;
    height: 300px;
    background-image: url('@/assets/images/task/invite.png');
    background-size: 100% 100%;
    position: relative;
    .closeIcon {
      position: absolute;
      top: 0;
      right: 5px;
      z-index: 2;
      cursor: pointer;
    }
    .close {
      position: absolute;
      cursor: pointer;
      top: 0;
      right: 0;
      width: 35px;
      height: 35px;
      background-image: linear-gradient(180deg, #5c94f7 0%, #4060e0 100%);
      clip-path: polygon(100% 100%, 100% 0, 0 0);
      z-index: 1;
    }
    .qr {
      position: absolute;
      top: 93px;
      left: 50%;
      transform: translate(-50%);
    }
    .save-qr {
      cursor: pointer;
      width: 130px;
      height: 32px;
      background: #4670e3;
      border-radius: 20px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);

      text-align: center;
      font-size: 13px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      color: #ffffff;

      letter-spacing: 1px;
    }
  }
  .invitationCode {
    width: 530px;
    height: 60px;
    background: #e4edff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .i-name {
      font-size: 14px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      color: #000000;
      letter-spacing: 1px;
    }
    .i-code {
      width: 170px;
      height: 30px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #dddddd;
      font-size: 13px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      color: #888c90;
      letter-spacing: 1px;
      line-height: 30px;
      padding-left: 20px;
    }
    .copy-btn {
      width: 128px;
      height: 30px;
      background: #4670e3;
      border-radius: 4px;
      font-size: 13px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 400;
      color: #ffffff;
      letter-spacing: 1px;
    }
  }
}
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-to,
.modal-leave-from {
  opacity: 1;
}
</style>