smart-mall
/
login.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./css/login.css">
</head>

<body>


  <header>
    <span class="iconfont icon-xiangzuojiantou"></span>
    <p>会员登录</p>
  </header>

  <div class="box">
    <h1>手机号登录</h1>
    <p>未注册的手机号登录后将自动注册</p>
    <form action="" class="loginForm">
      <ul>
        <li><input type="text" placeholder="请输入手机号码" name="mobile"></li>
        <li>
          <input type="text" placeholder="请输入图形验证码" class="pic" name="isParty">
          <img src="" alt="">
        </li>
        <li>
          <input type="text" placeholder="请输入手机验证码" class="phone" name="smsCode">
          <span>获取验证码</span>
        </li>
      </ul>
    </form>
    <a href="javascript:;" class="btn">登录</a>
  </div>

  <script src="./lib/form-serialize.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="./js/common.js"></script>

  <script>

    // 获取元素
    const form = document.querySelector('.loginForm')
    const img = document.querySelector('.loginForm img')
    const span = document.querySelector('.loginForm span')
    // 验证码渲染
    async function render() {
      try {
        const { data: res } = await axios.get('/captcha/image')
        console.log(res)
        localStorage.setItem('captchaKey', res.data.key)
        img.src = res.data.base64
      } catch {
        alert('请检查您的网络')
      }
    }
    render()
    img.addEventListener('click', function () {
      render()
    })

    let flag = true
    span.addEventListener('click', async function () {
      if (flag) {
        const fd = serialize(form, { hash: true })
        console.log(fd)
        const phone = /^(?:(?:\+|00)86)?1\d{10}$/
        if (!phone.test(fd.mobile)) return alert('请输入正确的手机号')
      }
    })


    // 提交表单事件
    document.querySelector('.btn').addEventListener('click', async function (e) {
      e.preventDefault()
      const fd = serialize(form, { hash: true })
      fd.isParty = false
      fd.partyData = {}
      console.log(fd,55)
      const phone = /^(?:(?:\+|00)86)?1\d{10}$/
      if (!phone.test(fd.mobile)) return alert('请输入正确的手机号')
      const { data: res } = await axios.post('/passport/login', { form: fd })
      console.log(res,99)
      alert(res.message)
      localStorage.setItem('userToken', res.data.token)
      if (res.status === 200) {
        localStorage.setItem('userToken', res.data.token)
        localStorage.setItem('userId', res.data.userId)
        setTimeout(function () {
          location.href = './mine.html'
        }, 500)
      }

    })

    document.querySelector('.icon-xiangzuojiantou').addEventListener('click', function () {
      location.href = './mine.html'
    })

  </script>
</body>

</html>