<template>
  <div class="login-container">
    <el-form ref="loginForm" class="login-form" autocomplete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">平台</h3>
      </div>
      <el-form-item prop="username">
        <el-input class="login-input" ref="username" placeholder="用户名" name="username" type="text" tabindex="1"
          autocomplete="on" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input class="login-input" ref="password" placeholder="密码" name="password" tabindex="2"
          autocomplete="on" />
      </el-form-item>
      <el-form-item>
        <el-row :gutter="10" style="width:100%">
          <el-col :span="14">
            <el-input v-model="captcha" style="height: 100%;" placeholder="请输入验证码" />
          </el-col>
          <el-col :span="10">
            <div @click="getCaptcha" style="background-color: aliceblue;" v-html="captchaCode"></div>
          </el-col>
        </el-row>
      </el-form-item>
      <el-button type="primary" style="width:100%;height:50px;margin-bottom:30px;"
        @click="valifyCaptcha">登录</el-button>
    </el-form>
  </div>
</template>
<script setup>
  import {
    ref
  } from "vue"
  import {
    onLoad
  } from "@dcloudio/uni-app"
  const captchaCloud = uniCloud.importObject("captcha") // uniapp 的 云对象 
  const captchaCode = ref("") // 展示验证码图片
  const captcha = ref("") // 记录用户输入的验证码
  let uuid = "" // 唯一id
  // 获取验证码的
  const getCaptcha = async () => {
    const res = await captchaCloud.getCaptcha()
    // console.log(res)
    captchaCode.value = res.svg
    uuid = res.uuid
  }
  // 单独校验验证码是否正确的 接口  用来测试使用  tips:本次没有校验用户名和密码
  const valifyCaptcha = async () => {
    const res = await captchaCloud.valifyCaptcha(captcha.value, uuid)
    console.log(res)
  }
  onLoad(() => {
    getCaptcha()
  })
</script>
<style lang="scss">
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  .login-container {
    width: 100%;
    background-color: $bg;
    overflow: hidden;
    height: 100vh;
    .login-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 160px 35px 0;
      margin: 0 auto;
      overflow: hidden;
      :deep(.el-input__wrapper) {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
    }
    .title-container {
      position: relative;
      .title {
        font-size: 26px;
        color: $light_gray;
        margin: 0px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }
  }
  $bg: #283443;
  $light_gray: #fff;
  $cursor: #fff;
  /* reset element-ui css */
  .login-container {
    .el-input {
      display: inline-block;
      height: 47px;
    }
    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
  }
</style>

'use strict';
const svgCaptcha = require('svg-captcha'); // 生成验证码的插件
const db = uniCloud.database()
module.exports = {
  _before: function() { // 通用预处理器
  },
    // 生成验证码
  async getCaptcha() {
    const captcha = svgCaptcha.create();
        // 成功插入数据库后，res会获得当前数据的id，将这个id 看成唯一id即可。 也可以使用第三方库  nanoid 独立生成
    const res = await db.collection("captcha").add({
      text: captcha.text,
      create_date: Date.now(),
    })
    // console.log(res)
    //返回数据给客户端
    return {
      svg: captcha.data,
      uuid: res.id
    }
  },
    
    // 校验验证码 
  async valifyCaptcha(text, uuid) {
    const dbJQL = uniCloud.databaseForJQL({ // 获取JQL database引用，此处需要传入云对象的clientInfo
      clientInfo: this.getClientInfo()
    })
    // 校验 唯一id和验证码和是否过期
    const res = await dbJQL.collection("captcha").where(
      `text=='${text}' && ${Date.now()} - create_date > ${1000*60}  && _id=='${uuid}'`).count()
    // console.dir(res) 
    return !!res.total
  }
}