对接口

MrShi

2 天以前 eb82684152ffb0acddf67da92e4533a0190eb258

 admin/src/views/login.vue

@@ -3,45 +3,64 @@
    <img src="@/assets/images/bg@2x.png" class="main_bg" alt="">
    <div class="login_wrap">
      <div class="login_img">
        <div class="h2">芜湖烟草智慧安消安全防范系统</div>
        <div class="h3">智慧物流园区安消一体化系统</div>
      </div>
      <div class="form_wrap">
        <!-- <div class="tabs">
          <div class="tab active">
        <div class="tabs">
          <div class="tab" @click="tabClick('0')" :class="{ active: activeTab == '0' }">
            <div class="name">帐号登录</div>
            <div class="icon"></div>
          </div>
          <div class="tab">
          <div class="tab" @click="tabClick('1')" :class="{ active: activeTab == '1' }">
            <div class="name">手机登录</div>
            <div class="icon"></div>
          </div>
        </div> -->
        <div class="df_ac">
          <div class="label">帐号</div>
          <div class="line">
            <el-input v-model="username" placeholder="请输入帐号" maxlength="50" v-trim />
          </div>
        </div>
        <div class="df_ac">
          <div class="label">密码</div>
          <div class="line">
            <el-input v-model="password" placeholder="请输入密码" type="password" maxlength="30" show-password />
        <template v-if="activeTab == '0'">
          <div class="df_ac">
            <div class="label">帐号</div>
            <div class="line">
              <el-input v-model="username" placeholder="请输入帐号" maxlength="50" v-trim />
            </div>
          </div>
        </div>
          <div class="df_ac">
            <div class="label">密码</div>
            <div class="line">
              <el-input v-model="password" placeholder="请输入密码" type="password" maxlength="30" show-password />
            </div>
          </div>
          <div class="df_ac">
            <div class="label">验证码</div>
            <div class="line">
              <el-input v-model="captcha.value" placeholder="请输入验证码" maxlength="4" @keypress.enter.native="login" />
              <img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
              <span v-else><i class="el-icon-loading"></i></span>
            </div>
          </div>
        </template>
        <template v-if="activeTab == '1'">
          <div class="df_ac">
            <div class="label">手机号</div>
            <div class="line">
              <el-input v-model="phone" placeholder="请输入手机号" type="text" maxlength="16" />
            </div>
          </div>
          <div class="df_ac">
            <div class="label">验证码</div>
            <div class="line">
              <el-input v-model="smsCode" placeholder="请输入验证码" maxlength="6" @keypress.enter.native="login" />
              <span v-if="downTime == 0" class="code_get" @click="getCode">获取验证码</span>
              <span v-else class="code_get downtime">{{ downTime }}</span>
            </div>
          </div>
        </template>

        <div class="df_ac">
          <div class="label">验证码</div>
          <div class="line">
            <el-input v-model="captcha.value" placeholder="请输入验证码" maxlength="4" @keypress.enter.native="login" />
            <img v-if="!captcha.loading" class="code_image" :src="captcha.uri" @click="refreshCaptcha">
            <span v-else><i class="el-icon-loading"></i></span>
          </div>
        </div>
        <el-button :loading="loading" type="primary" class="login_btn"
          @click.native.prevent="login">立即登录</el-button>
        <el-button :loading="loading" type="primary" class="login_btn" @click.native.prevent="login">立即登录</el-button>
        <div class="btn_wrap">
          <el-checkbox v-model="isRemPsd">
            <span style="font-size: 13px; font-weight: 400" class="placeholder9">记住密码</span>
            <span style="font-size: 13px; font-weight: 400" class="placeholder9">{{ activeTab == 0 ? '记住密码' : '记住手机号'
              }}</span>
          </el-checkbox>
        </div>
        <div class="google">
@@ -55,8 +74,9 @@

<script>
import { mapMutations } from 'vuex'
import { getCaptcha, loginByPassword } from '@/api/system/common'
import { getCaptcha, loginByPassword, sendSmsPost, loginByPhone } from '@/api/system/common'
import Cookies from "js-cookie"
import { Message } from 'element-ui'

export default {
  name: 'Login',
@@ -66,6 +86,11 @@
      isRemPsd: false,
      username: '',
      password: '',
      phone: '',
      downTime: 0,

      smsCode: '',
      activeTab: '0',
      // 验证码
      captcha: {
        loading: false,
@@ -78,6 +103,7 @@
  mounted() {
    this.username = localStorage.getItem('username') || ''
    this.password = localStorage.getItem('password') || ''
    this.phone = localStorage.getItem('phone') || ''
    const isRemPsd = localStorage.getItem('isRemPsd') || false
    this.isRemPsd = JSON.parse(isRemPsd)
    this.refreshCaptcha()
@@ -89,37 +115,79 @@
      if (this.loading) {
        return
      }
      if (!this.__check()) {
        return
      }
      this.loading = true
      loginByPassword({
        username: this.username.trim(),
        password: this.password,
        code: this.captcha.value.trim(),
        uuid: this.captcha.uuid
      })
        .then((res) => {
          // window.location.href = process.env.VUE_APP_CONTEXT_PATH
      if (this.activeTab == 0) {
        if (!this.__check()) {
          return
        }
        this.loading = true
        loginByPassword({
          username: this.username.trim(),
          password: this.password,
          code: this.captcha.value.trim(),
          uuid: this.captcha.uuid
        })
          .then((res) => {
            // window.location.href = process.env.VUE_APP_CONTEXT_PATH
            if (this.isRemPsd) {
              localStorage.setItem('username', this.username.trim())
              localStorage.setItem('password', this.password.trim())
              localStorage.setItem('isRemPsd', this.isRemPsd)
            } else {
              localStorage.removeItem('username')
              localStorage.removeItem('password')
              localStorage.removeItem('isRemPsd')
            }
            Cookies.set('dm_user_token', res)
            this.$router.push('index')
          })
          .catch(e => {
            this.refreshCaptcha()
          })
          .finally(() => {
            this.loading = false
          })
      } else {
        const { smsCode, phone } = this
        if (!phone || phone.length != 11) {
          return Message.error('请输入正确的手机号')
        }
        if (!smsCode) {
          return Message.error('请输入验证码')
        }
        this.loading = true
        loginByPhone({ phone, code: smsCode }).then(res => {
          if (this.isRemPsd) {
            localStorage.setItem('username', this.username.trim())
            localStorage.setItem('password', this.password.trim())
            localStorage.setItem('isRemPsd', this.isRemPsd)
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
            localStorage.removeItem('isRemPsd')
            localStorage.setItem('phone', this.username.trim())
          }
          Cookies.set('dm_user_token', res)
          this.$router.push('index')
        })
        .catch(e => {
        }).catch(e => {
          this.refreshCaptcha()
          // this.$tip.apiFailed(e)
        })
        .finally(() => {
        }).finally(() => {
          this.loading = false
        })
      }

    },
    getCode() {
      console.log('getCode')
      const { phone } = this
      if (!phone || phone.length != 11) {
        return Message.error('请输入正确的手机号')
      }
      sendSmsPost({ phone, type: 0 }).then(res => {
        Message.success('短信发送成功')
        this.downTime = 60
        let timer = setInterval(() => {
          if (this.downTime == 0) {
            return clearInterval(timer)
          }
          this.downTime--
        }, 1000)
      })
    },
    tabClick(val) {
      this.activeTab = val
    },
    // 刷新验证码
    refreshCaptcha() {
@@ -200,7 +268,20 @@
      background: url("../assets/images/login_img@2x.png");
      background-size: 100% 100%;
      padding-left: 40px;
      padding-top: 80px;
      padding-top: 60px;

      .h2 {
        color: $primary-color;
        background-color: #fff;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        width: 208px;
        display: flex;
        margin-bottom: 12px;
      }

      .h3 {
        font-size: 28px;
@@ -221,7 +302,7 @@
      background-color: #fff;
      box-sizing: border-box;
      /* padding: 50px 80px 20px; */
      padding: 80px 80px 20px;
      padding: 50px 80px 20px;
      position: relative;

      .tabs {
@@ -236,6 +317,7 @@
          flex-direction: column;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .icon {
            width: 36px;
@@ -287,9 +369,12 @@
        margin-bottom: 17px;
        display: flex;
        width: 100%;
        align-items: center;
        position: relative;

        .el-input {
          height: 40px;
          flex: 1;

          // font-size: 14px;
          ::v-deep .el-input__inner {
@@ -301,6 +386,23 @@
          width: 100px;
          margin-left: 10px;
        }

        .code_get {
          position: absolute;
          top: 10px;
          right: 10px;
          font-size: 14px;
          width: 72px;
          z-index: 11;
          margin-left: 10px;
          cursor: pointer;
          color: $primary-color;
          text-align: right;
        }

        .downtime {
          color: #999999;
        }
      }

      .forget {