mrshi

MrShi

2024-02-22 8d7bb4ac830444afde480a588e99952105ea8ede

 platform/src/views/login.vue

@@ -1,11 +1,16 @@
<template>
  <div class="wrap">
    <div class="introduce">
      <h2>云易保客户服务系统</h2>
            <h2>预选清单查询系统</h2>
    </div>
    <div class="login">
      <h1>系统登录&nbsp;/&nbsp;LOGIN IN</h1>
            <div class="login_type">
                <div :class="active === 1 ? 'login_type_item active' : 'login_type_item'" @click="handleClick(1)">账号登录</div>
                <div :class="active === 2 ? 'login_type_item active' : 'login_type_item'" @click="handleClick(2)">手机登录</div>
            </div>
      <div class="info-input">
                <template v-if="active === 1">
        <el-input v-model="username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid" maxlength="50" v-trim/>
        <el-input v-model="password" placeholder="请输入密码" type="password" prefix-icon="eva-icon-password" maxlength="30" show-password/>
        <div class="captcha-input">
@@ -13,6 +18,15 @@
          <img v-if="!captcha.loading" :src="captcha.uri" @click="refreshCaptcha">
          <span v-else><i class="el-icon-loading"></i></span>
        </div>
                </template>
                <template v-else>
                    <el-input v-model="phone" placeholder="请输入手机号" prefix-icon="el-icon-phone" maxlength="11" v-trim/>
                    <div class="captcha-input">
                        <el-input v-model="code" placeholder="请输入验证码" prefix-icon="eva-icon-shield" maxlength="4" @keypress.enter.native="login" v-trim/>
                        <el-button type="primary" style="width: 120px; margin-left: 20px;" @click="send" v-if="num === 0">发送验证码</el-button>
                        <el-button type="primary" style="width: 120px; margin-left: 20px;" v-else>{{num}}</el-button>
                    </div>
                </template>
      </div>
      <el-button :loading="loading" @click="login">登&nbsp;&nbsp;录</el-button>
    </div>
@@ -21,7 +35,8 @@

<script>
import { mapMutations } from 'vuex'
import { getCaptcha, loginByPassword } from '@/api/system/common'
    import { getCaptcha, loginByPassword, loginByPhone } from '@/api/system/common'
    import { sendSms } from '@/api/business/smsEmail'

export default {
  name: 'Login',
@@ -30,6 +45,11 @@
      loading: false,
      username: '',
      password: '',
                phone: '',
                code: '',
                active: 1,
                num: 0,
                timer: null,
      // 验证码
      captcha: {
        loading: false,
@@ -41,11 +61,47 @@
  },
  methods: {
    ...mapMutations(['setUserInfo']),
            handleClick(e) {
                this.active = e
                this.username = ''
                this.password = ''
                this.phone = ''
                this.code = ''
            },
            send() {
                if (!this.phone) {
                    this.$message.warning('请先输入手机号')
                    return
                }
                var reg = /^1[3456789]\d{9}$/;
                if (!reg.test(this.phone)) {
                    this.$message.warning('手机号不合法')
                    return
                }
                sendSms({
                    phone: this.phone
                }).then(res => {
                    this.num = 60
                    this.setTimer()
                })
            },
            setTimer () {
                this.timer = setInterval(() => {
                    if (this.num === 0) {
                        this.num = 0
                        clearInterval(this.timer)
                        this.timer = null
                        return
                    }
                    this.num -= 1
                }, 1000)
            },
    // 登录
    login () {
      if (this.loading) {
        return
      }
                if (this.active === 1) {
      if (!this.__check()) {
        return
      }
@@ -66,6 +122,30 @@
        .finally(() => {
          this.loading = false
        })
                } else {
                    if (!this.phone) {
                        this.$tip.error('请输入手机号')
                        return
                    }
                    if (!this.code) {
                        this.$tip.error('请输入验证码')
                        return
                    }
                    this.loading = true
                    loginByPhone({
                        phone: this.phone,
                        code: this.code.trim()
                    })
                        .then(() => {
                            window.location.href = process.env.VUE_APP_CONTEXT_PATH
                        })
                        .catch(e => {
                            this.$tip.apiFailed(e)
                        })
                        .finally(() => {
                            this.loading = false
                        })
                }
    },
    // 刷新验证码
    refreshCaptcha () {
@@ -160,11 +240,35 @@
      font-size: 28px;
      font-weight: 500;
    }
            .login_type {
                width: 100%;
                height: 50px;
                display: flex;
                align-items: center;
                margin: 20px 0;
                .active {
                    box-sizing: border-box;
                    color: rgba(64, 106, 255, 0.996) !important;
                    border-bottom: 1px solid rgba(64, 106, 255, 0.996) !important;
                }
                .login_type_item {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: black;
                    font-size: 14px;
                    cursor: pointer;
                }
            }
    .info-input {
      margin-top: $input-gap;
      margin-bottom: 60px;
      /deep/ .el-input {
        margin-top: 30px;
                    &:first-child {
                        margin-top: 0 !important;
                    }
        .el-input__inner {
          height: 50px;
          background: #F9F9F9;