LoginPage 登录 ​

<script setup lang="ts">
import { LoginPage } from 'uniboot-ui'

function svgDataUrl(svg: string) {
  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
}

function randomCaptchaText(len = 4) {
  const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'
  let s = ''
  for (let i = 0; i < len; i++)
    s += chars[Math.floor(Math.random() * chars.length)]
  return s
}

async function getCaptcha() {
  const text = randomCaptchaText()
  const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="112" height="42" viewBox="0 0 112 42">
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#f5f7ff"/>
      <stop offset="1" stop-color="#eef3ff"/>
    </linearGradient>
  </defs>
  <rect x="0.5" y="0.5" width="111" height="41" rx="6" fill="url(#bg)" stroke="#dcdfe6"/>
  <path d="M10 30 C 20 10, 35 38, 48 14 S 78 36, 102 16" stroke="#a3b7ff" stroke-width="2" fill="none" opacity="0.55"/>
  <text x="56" y="28" text-anchor="middle" font-family="ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
    font-size="18" letter-spacing="4" fill="#2f6bff">${text}</text>
</svg>`
  return { img: svgDataUrl(svg), key: text }
}

async function getLanguages() {
  await new Promise((r) => setTimeout(r, 120))
  return [
    { label: '简体中文', value: 'zh_CN' },
    { label: 'English', value: 'en_US' },
  ]
}

async function onLanguageChange(value: string) {
  // demo: do nothing besides logging
  console.log('language change', value)
}

async function onFinish() {
  await new Promise((r) => setTimeout(r, 400))
}
</script>

<template>
  <div class="login-form-doc-demo">
    <login-page
      title="欢迎登录！"
      sub-title="Klondpay机构平台"
      message=""
      :show-language-switch="true"
      :get-languages="getLanguages"
      default-language="zh_CN"
      :on-language-change="onLanguageChange"
      :show-captcha="true"
      :get-captcha="getCaptcha"
      :show-illustration="true"
      :on-finish="onFinish"
    />
  </div>
</template>

<style scoped>
.login-form-doc-demo {
  width: 100%;
}
</style>