parking/src/views/backend/login.vue

<template>
  <div class="flex column center align-center wrapper" v-if="config.$state.layout.screenWidth>=768">
    <div class="box">
      <div class="wrapper_login">
        <div class="flex grid12 gaps custom-gaps">
          <div class="col-6 sidebox">
            <div style="z-index:1;position: relative;">
              <img class="mt-10 mb-30" src="~assets/logo.svg" style="width:80%" />
              <div class="mb-20" style="color:#fff">品牌介绍</div>
              <div class="mb-30">
                平台采用Vue.js3.0技术，结合Typescript.js、pania缓存技术、Element-Plus、vite打包技术架构前端技术栈，后端采用SpringBoot,结合Mybatis-Plus技术、Mysql8.0、Redis等架构接口服务端，技术新效率高交互好。
              </div>
              <el-divider class="mt-30" style="background-color:#909399"></el-divider>
              <div class="mt-30">坚持自主、高效，追求卓越、超越梦想。</div>

            </div>
          </div>
          <div class="col-6">
            <div style="height: 100%; padding: 64px 70px 48px; position: relative" v-show="loginMode==1">
              <div style="color:#404856;margin-bottom: 40px;" class="flex justify-space-between align-center">
                <div>
                  <h2>账号登录</h2>
                </div>
                <div class="flex align-center">
                  <el-tooltip content="切换扫码登录" placement="top">
                    <div class="box"><img src="~assets/login/qrecode.png" style="width:34px"
                        @click="onLoginModeChange(2)" /></div>
                  </el-tooltip>
                </div>
              </div>
              <div>
                <el-form @keyup.enter="onSubmit(formRef)" ref="formRef" :rules="rules" size="large" :model="form">
                  <el-form-item prop="accountName">
                    <el-input ref="accountName" type="text" clearable v-model="form.accountName" placeholder="请输入账号">
                      <template #prefix>
                        <Icon name="fa fa-user" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input ref="password" v-model="form.password" type="password" placeholder="请输入密码" show-password>
                      <template #prefix>
                        <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16"
                          color="var(--el-input-icon-color)" />
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item v-if="state.showCaptcha" prop="captcha">
                    <el-row class="w100" :gutter="15">
                      <el-col :span="16">
                        <el-input ref="captcha" type="text" placeholder="请输入验证码" v-model="form.captcha" clearable
                          autocomplete="off">
                          <template #prefix>
                            <Icon name="fa fa-ellipsis-h" class="form-item-icon" size="16"
                              color="var(--el-input-icon-color)" />
                          </template>
                        </el-input>
                      </el-col>
                      <el-col :span="8">
                        <img @click="onChangeCaptcha" class="captcha-img"
                          :src="buildCaptchaUrl() + '?id=' + state.captchaId" alt="" />
                      </el-col>
                    </el-row>
                  </el-form-item>
                  <el-checkbox v-model="form.keep" label="保持会话" size="default"></el-checkbox>
                  <el-form-item>
                    <el-button :loading="form.loading"
                      style="width: 100%; letter-spacing: 2px; font-weight: 300; margin-top: 15px" round type="primary"
                      size="large" @click="onSubmit(formRef)">
                      登录
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="mt-50" style="text-align:center;color:#909399">
                @CopyRight 2021-2022 保晓家科技有限公司
              </div>

            </div>
            <div style="height: 100%; padding: 64px 70px 48px; position: relative" v-show="loginMode==2">
              <div style="color:#404856;margin-bottom: 40px;" class="flex justify-space-between align-center">
                <div>
                  <h2>扫码登录</h2>
                </div>
                <div class="flex align-center">
                  <el-tooltip content="切换账号登录" placement="top">
                    <div class="box"><img src="~assets/login/pc.png" style="width:34px" @click="onLoginModeChange(1)" />
                    </div>
                  </el-tooltip>
                </div>
              </div>
              <div class="flex column center">
                <div class="box">
                  <!-- <img src="~assets/login/qrcord_test.svg" style="width:196px" /> -->
                  <div id="QRcode_Area" style=" width: 300px; height: 340px;  "></div>
                </div>
                <!-- <div style="color:#515a6e">请使用微信二维码扫描登录</div> -->
              </div>
              <div class="mt-50" style="text-align:center;color:#909399">
                @CopyRight 2021-2022 保晓家科技有限公司
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="box mt-50 flex justify-center align-center" style="text-align:center;color:#515a6e">
        <div class="box ml-10">
          © Ouicai.com
        </div>
        <div class="box ml-10">
          联系我们
        </div>
        <div class="box ml-10">
          帮助文档
        </div>
        <div class="box ml-10">
          备案号: 京ICP备20029021号-1
        </div>
      </div>
    </div>

  </div>
  <div class="login" v-if="config.$state.layout.screenWidth<768">
    <div class="login-box">
      <div class="head">
        <img src="~assets/logo.svg" alt="" />
      </div>
      <div class="form">
        <div style="margin-top:30px;text-align: center;color:#3a485a">
          <h3>车位销售运营管理平台</h3>
        </div>
        <div class="content">
          <el-form @keyup.enter="onSubmit(formRef)" ref="formRef" :rules="rules" size="large" :model="form">
            <el-form-item prop="accountName">
              <el-input ref="accountName" type="text" clearable v-model="form.accountName" placeholder="请输入账号">
                <template #prefix>
                  <Icon name="fa fa-user" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input ref="password" v-model="form.password" type="password" placeholder="请输入密码" show-password>
                <template #prefix>
                  <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16" color="var(--el-input-icon-color)" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item v-if="state.showCaptcha" prop="captcha">
              <el-row class="w100" :gutter="15">
                <el-col :span="16">
                  <el-input ref="captcha" type="text" placeholder="请输入验证码" v-model="form.captcha" clearable
                    autocomplete="off">
                    <template #prefix>
                      <Icon name="fa fa-ellipsis-h" class="form-item-icon" size="16"
                        color="var(--el-input-icon-color)" />
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="8">
                  <el-image @click="onChangeCaptcha" class="captcha-img"
                    :src="buildCaptchaUrl() + '?id=' + state.captchaId" alt="" fit="cover" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-checkbox v-model="form.keep" label=保持会话 size="default"></el-checkbox>
            <el-form-item>
              <el-button :loading="form.loading" class="submit-button" round type="primary" size="large"
                @click="onSubmit(formRef)">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-bottom:30px;text-align: center;color:#3a485a"> @CopyRight 2021-2022 保晓家科技有限公司</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch, getCurrentInstance, onMounted, onBeforeUnmount, reactive, ref, onUnmounted } from 'vue'
import type { ElForm } from 'element-plus'
import { ElNotification } from 'element-plus'
import { useConfig } from '/@/stores/config'
import { useAdminInfo } from '/@/stores/adminInfo'
import { login, qrcodeLogin } from '/@/api/backend'
import { buildCaptchaUrl } from '/@/api/common'
import { uuid } from '../../utils/random'
import { validatorPassword, validatorAccount } from '/@/utils/validate'
import { useSiteConfig } from '/@/stores/siteConfig'
import { useRouter } from 'vue-router'

var timer: NodeJS.Timer

const router = useRouter()

const querys = router.currentRoute.value.query

const config = useConfig()
const adminInfo = useAdminInfo()
const siteConfig = useSiteConfig()

const state = reactive({
    showCaptcha: true,
    captchaId: uuid(),
    appid: 'wwb5feafad13ca46b7',
    agentid: '1000002',
    backUrl:'http://web.baoxiaojia.dingsenhulian.com/back'
})
const isSzkj = ref<Boolean>(true)
const checkQrCode = () => {
    new WwLogin({
        id: 'QRcode_Area',
        appid: state.appid,
        agentid: state.agentid,
        redirect_uri: state.backUrl,
        state: '',
        href: '',
        lang: 'zh',
    })
}

const loginMode = ref(1)

const onLoginModeChange = (val: number) => {
    loginMode.value = val
}

const onChangeCaptcha = () => {
    form.captcha = ''
    state.captchaId = uuid()
}

const formRef = ref<InstanceType<typeof ElForm>>()
const form = reactive({
    accountName: '',
    password: '',
    captcha: '',
    keep: false,
    loading: false,
    captchaId: '',
})

// 表单验证规则
const rules = reactive({
    accountName: [
        {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
        },
        {
            validator: validatorAccount,
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
        {
            validator: validatorPassword,
            trigger: 'blur',
        },
    ],
    captcha: [
        {
            required: true,
            message: '请输入验证码',
            trigger: 'blur',
        },
        {
            min: 4,
            max: 6,
            message: '验证码长度必须在4到6位之间',
            trigger: 'blur',
        },
    ],
})

onMounted(() => {
    checkQrCode()
    config.$state.layout.screenWidth
    const vm: any = getCurrentInstance()
    if (form.accountName === '') {
        vm.ctx.$refs.accountName.focus()
    } else if (form.password === '') {
        vm.ctx.$refs.password.focus()
    } else if (form.captcha === '') {
        vm.ctx.$refs.captcha.focus()
    }

    timer = setInterval(() => {
        onChangeCaptcha()
    }, 60000)

    state.showCaptcha = true
})

onUnmounted(() => {
    clearInterval(timer)
})

const onSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            form.loading = true
            form.captchaId = state.captchaId
            login('post', form)
                .then((res) => {
                    form.loading = false
                    adminInfo.$state = res.data.userinfo
                    ElNotification({
                        message: res.msg,
                        type: 'success',
                    })
                    router.push({ name: res.data.routeName })
                })
                .catch((err) => {
                    onChangeCaptcha()
                    form.loading = false
                })
        } else {
            onChangeCaptcha()
            return false
        }
    })
}
</script>

<style scoped lang="scss">
.switch-language {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.bubble {
    overflow: hidden;
    background: url(/@/assets/bg.jpg) repeat;
}
.form-item-icon {
    height: auto;
}
.login {
    position: absolute;
    display: flex;
    width: 1000px;
    padding: 0;
    z-index: 1;
    top: 0;
    left: 50%;
    align-items: flex-start;
    justify-content: center;
    transform: translate(-50%, 0);
    background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
    height: 100%;
    .login-box {
        overflow: hidden;
        width: 430px;
        padding: 0;
        background: #fff;
        margin-top: 0px;
    }
    .head {
        background: #1c1f3a;
        height: 100px;
        padding: 30px;
        img {
            display: block;
            width: 230px;
            margin: 0 auto;
            user-select: none;
        }
    }
    .form {
        position: relative;
        .profile-avatar {
            display: block;
            position: absolute;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 4px solid #fff;
            top: -50px;
            right: 175px;
            z-index: 2;
            user-select: none;
        }
        .content {
            padding: 30px 40px 10px 40px;
        }
        .submit-button {
            width: 100%;
            letter-spacing: 2px;
            font-weight: 300;
            margin-top: 15px;
        }
    }
}

.chang-lang :deep(.el-dropdown-menu__item) {
    justify-content: center;
}
.content :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
}
.captcha-img {
    width: 100%;
    transform: scale(1.2);
    margin-left: 5px;
    margin-top: 4px;
}

.wrapper {
    height: calc(100vh);
}

.wrapper_login {
    z-index: 3;
    box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);
    position: relative;
    min-height: 564px;
    background-color: white;
    width: 1000px;
}

.sidebox {
    //background: linear-gradient(0deg, #3a485a 0%, #607089 100%);
    background-image: url(/@/assets/load_back_image.svg);
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    position: relative;
    padding: 80px 80px 48px;
    min-height: 564px;
}
.sidebox::before,
.sidebox::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(/@/assets/login/left-1.png) no-repeat 0 0;
}
.sidebox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(/@/assets/login/left-2.png) no-repeat right bottom;
}

.wrapper:before {
    content: '';
    position: fixed;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    width: 394px;
    height: 468px;
    background-image: url(/@/assets/login/bg-left.png);
    left: 0;
}

.wrapper::after {
    content: '';
    position: fixed;
    bottom: 0;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    width: 487px;
    height: 412px;
    background-image: url(/@/assets/login/bg-right.png);
    right: 0;
}

// 根据需求自定义二维码样式
.impowerBox .title {
    display: none;
}
.impowerBox .status.status_browser {
    display: none;
}
.impowerBox .qrcode {
    border: none;
    width: 225px;
    height: 225px;
}
.impowerBox .status {
    display: none;
}

@media screen and (max-width: 720px) {
    .login {
        display: flex;
        align-items: center;
        justify-content: center;
        .login-box {
            width: 340px;
            margin-top: 0;
        }
    }
}

@media screen and (max-width: 1230px) {
    .wrapper_login {
        width: 1040px;
    }
}

@media screen and (max-width: 1040px) {
    .wrapper_login {
        width: 768px;
    }
}

@media screen and (max-width: 768px) {
    .wrapper_login {
        width: 668px;
    }
}
</style>