wt_project_web_bak/src/page/login.vue

<template>
  <div class='full-screen flex flex-center bg'>
    <div class='login white-bg radius '>
      <div class='flex flex-center flex-child-average'>
        <div class='flex left '>
          <img
              src="https://wutong-1302848345.cos.ap-chengdu.myqcloud.com/wtzx/373e3ccd35be4ba2a72376050027612e.png"
              style="height: 560px;object-fit: contain;border-bottom-left-radius: 10px;border-top-left-radius: 10px"/>

        </div>

        <div class='right white-bg flex flex-col flex-child-average'>

          <div class='flex flex-justify-end full-height'
               style="margin-top: -20px;margin-right: 4px">
            <div>
              <img v-if="qrCodeLogin" src='../assets/img/com.png' style='width: 80px'
                   @click='qrCodeLogin = !qrCodeLogin'/>
              <img v-else src='../assets/img/code.png' style='width: 80px'
                   @click='qrCodeLogin = !qrCodeLogin'/>
            </div>
          </div>

          <div v-if='qrCodeLogin' class='flex flex-center flex-col mt-20'>
            <span class='font-24 black bold '>欢迎来到梧桐树云平台👏</span>
            <div class='flex flex-col flex-center mt-10' style='height: 360px;width: 360px'>
              <vue-qr :currentLevel='3' :logoCornerRadius='4' :logoScale='0.25' :logoSrc='logoSrc' :text='qrCodeText'
                      size='340'/>
            </div>
            <span class='mt-10 bold main-color font-16'>打开微信扫描二维码登陆梧桐树云平台</span>
          </div>

          <div v-else class='padding-20 flex flex-col flex-center mt-20'>
            <span class='font-24 black bold '>欢迎来到梧桐树云平台👏</span>
            <div class="flex flex-col flex-center" style="width: 450px;height: 360px">
              <el-form ref='loginForm' :model="form" :rules="rules">
                <el-form-item prop='name'>
                  <el-input
                      v-model='form.name'
                      placeholder="手机号码"
                      prefix-icon="Avatar"
                      size='large'
                  />
                </el-form-item>
                <el-form-item prop='pass'>
                  <el-input
                      v-model='form.pass'
                      :type='flag ? "text" : "password"'
                      placeholder="密码"
                      prefix-icon="WalletFilled"
                      size='large'>
                    <template v-slot:suffix>
                      <div class='pointer' @click='flag=!flag'>
                        <el-icon v-if='!flag'>
                          <Hide/>
                        </el-icon>
                        <el-icon v-else>
                          <View/>
                        </el-icon>
                      </div>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item prop='code'>
                  <el-input
                      v-model='form.code'
                      class='append'
                      placeholder="验证码"
                      prefix-icon="Refresh"
                      size='large'
                  >
                    <template v-slot:append>
                      <img :src='code' class='pic'
                           style='height: 40px;background-color: red;background-blend-mode: lighten;'/>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <div class='flex flex-align-center flex-justify-between full-width'>
                    <div></div>
                    <el-link :underline='false' class='font-12' type='primary'>忘记密码?</el-link>
                  </div>
                </el-form-item>
              </el-form>
              <el-button size='large' style="width: 78%" type='primary' @click='submint'>登录</el-button>
              <div class='flex flex-col mt-10'>
                <span class='grey-6'>由梧桐经济院提供技术支持</span>
                <div>
                  <el-button class='mt-10' plain size='small' type='primary' @click='loginAdmin'>admin</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<route>
{
meta: {
layout: 'empty',
},
}
</route>

<script>
import md5 from 'js-md5'
import {useStore} from '@/store/user.js'
import {removeToken, setToken} from '../utils/auth.js'
import permissionStore from '@/store/permission.js'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'

export default {
  name: 'login',
  components: {VueQr},
  watch: {
    qrCodeLogin: {
      handler(val) {
        if (val) {
          this.qrCode()
          this.checkLogin()
        }
      },
      immediate: true
    }
  },
  setup() {
    const user = useStore()
    const permission = permissionStore()
    return {user, permission}
  },
  data() {
    return {
      flag: false,
      form: {
        name: '',
        pass: ''
      },
      rules: {
        name: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur'}
        ],
        pass: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          {min: 5, max: 5, message: '验证码不正确', trigger: 'blur'}
        ]
      },
      code: '',
      header: '',
      qrCodeLogin: true,
      time: null,
      qrCodeText: '',
      sessionId: '',
      logoSrc: new URL('../assets/img/logo.png', import.meta.url).href
    }
  },
  created() {
    this.permission.cleanPermission()
    removeToken()
    this.init()
  },
  unmounted() {
    clearInterval(this.time)
  },
  methods: {
    init() {
      this.$api.login.captcha().then(res => {
        this.code = res.image
        this.header = res.key
      })
    },
    submint() {
      this.$refs.loginForm.validate((res) => {
        if (res) {
          const params = {
            tenantId: '000000',
            username: this.form.name,
            password: md5(this.form.pass),
            grant_type: 'captcha',
            scope: 'all',
            type: 'account'
          }
          const header = {captchaKey: this.header, captchaCode: this.form.code}
          this.$api.login.login(params, header).then(res => {
            if (res.error_description) {
              this.$message.error(res.error_description)
              this.init()
            } else {
              setToken(res.access_token)
              this.getInfo()
              this.$router.replace('/')
            }
          })
        } else {
          return false
        }
      })
    },
    loginAdmin() {
      this.form.name = 'admin'
      this.form.pass = 'admin'
    },
    getInfo() {
      this.getPermission()
      this.$api.login.getUserInfo().then(res => {
        if (res.code === 200) {
          // 保存信息
          if (res.data.type === 3) {
            res.data.typeName = '机构'
          } else {
            res.data.typeName = '服务商'
          }
          this.user.setUserInfo(res.data)
        }
      })
    },
    getPermission() {
      this.$api.login.getPermission().then(res => {
        if (res.code === 200) {
          this.permission.addPermission(res.data)
        }
      })
    },
    checkLogin() {
      let count = 0
      this.time = setInterval(() => {
        count = count + 1
        if (this.qrCodeLogin === false) {
          clearInterval(this.time)
        }
        if (count === 60) {
          this.qrCode()
          count = 0
        }
        if (this.sessionId) {
          this.codeLogin()
        } else {
          this.codeLogin()
        }
      }, 1000)
    },
    qrCode() {
      this.$api.login.qrCode().then(res => {
        if (res.code === 200) {
          this.sessionId = res.data
          this.qrCodeText = 'https://dev.wutongresearch.club/login?id=' + this.sessionId
        }
      })
    },
    codeLogin() {
      this.$api.login.qrCodeLogin({sessionId: this.sessionId}).then(res => {
        if (res.code === 200) {
          const tmp = res.data
          console.log(Object.prototype.hasOwnProperty.call(tmp, 'phone'))
          if (Object.prototype.hasOwnProperty.call(tmp, 'phone')) {
            const params = {
              tenantId: '000000',
              phone: res.data.phone,
              openId: res.data.openId,
              grant_type: 'qrcode',
              scope: 'all',
              type: 'account'
            }
            this.$api.login.loginByCode(params).then(res => {
              if (res.error_description) {
                this.$message.error(res.error_description)
              } else {
                setToken(res.access_token)
                this.getInfo()
                this.$router.replace('/')
              }
            })
          }
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.bg {
  background-image: url("https://wutong-1302848345.cos.ap-chengdu.myqcloud.com/wtzx/7667edec62f44063a50c66e8654eaa87.png");
}

.login {
  .left {
    height: auto;
    width: 560;

    .logo-main {
      width: 80%;
    }
  }

  .right {
    width: 560px;
    height: auto;

    .form {
    }
  }
}

.append {
  :deep(.el-input-group__append) {
    background-color: white;
  }

  .pic {
    border-top: #DDDFE5 1px solid;
    border-bottom: #DDDFE5 1px solid;
  }
}
</style>