stock-h5/src/views/common/login.vue

<template>
  <div class="page-div">
    <div class="form-container d-flex align-center">
      <div class="form">
        <div class="text-center pt-20">
          <van-image height="100" width="100" src="/img/smallLogo.jpg" round />
        </div>
        <div class="text-center">
          <h2 class="big-title f-b mt-16">第一上海</h2>
          <div class="sub-title mt-16">欢迎登录数据管理系统</div>
        </div>
        <van-form class="control-area" @submit="onSubmit" validate-trigger="onSubmit">
          <van-field v-model="username" name="username" placeholder="请输入您的账户" label="账户"
            :rules="[{ required: true, message: '请输入您的账户' }]" autocomplete="new-password" />
          <van-field v-model="password" name="password" placeholder="请输入您的密码" label="密码"
            :rules="[{ required: true, message: '请输入您的密码' }]" type="password" autocomplete="new-password" />
          <div class="opr-area">
            <van-button round block type="primary" :disabled="submitFlag" native-type="submit">
              确定
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    <div class="company-info">
      <div class="text-center mt-16 mb-16">
        <div class="mb-16 normal-title">第一上海证券有限公司</div>
        <div class="mb-8 sub-title">FIRST SHANGHAI SECURITIES LIMITED</div>
        <div class="mb-5 tip">香港中環德輔道中 71 號永安集團大廈 19 樓D</div>
        <div class="mb-5 tip">19/F, Wing On House, 71 Des Voeux Road Central, Hong Kong</div>
        <div class="mb-5 tip">电话 Tel:（852）2532 1580 传真 Fax:（852）2537 6911</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import userInfoStore from '@/stores/userInfo'
const userInfo = userInfoStore()
const router = useRouter()
const route = useRoute()
let username = ref(userInfo.username || '')
let password = ref(userInfo.password || '')
let submitFlag = ref(false)
import { encrypt } from '@/utils/index'
import { sysLogin, sysUserInfo, sysMenuNav } from '@/utils/api'
const onSubmit = async () => {
  submitFlag.value = true
  const data: any = await sysLogin(
    {
      username: username.value,
      password: encrypt(password.value),
    }
  )
  if (data && data.code === 0) {
    userInfo.username = username.value
    userInfo.password = password.value
    userInfo.token = data.token
    getUserInfo()
  } else {
    submitFlag.value = false
    showToast('账号密码错误')
  }
}

const getUserInfo = async () => {
  const data: any = await sysUserInfo()
  userInfo.id = data.user.userId
  userInfo.realname = data.user.realname
  userInfo.headPic = data.user.headPic
  userInfo.roleId = data.user.roleId + ''
  getsysMenuNav()
}

const getsysMenuNav = async () => {
  const data: any = await sysMenuNav()
  userInfo.permissions = data.permissions
  let redirect = route.query.redirect || '/'
  if (typeof redirect !== 'string') {
    redirect = '/'
  }
  router.replace(redirect)
}
</script>
<style lang='scss' scoped>
.form-container {
  flex: 1;
  height: 100%;

  .form {
    width: 100%;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin: 16px;

    @media screen and (min-width: 768px) {
      padding: 40px;
      margin: 40px;
    }

    .pt-20 {
      padding-top: 20px;

      @media screen and (min-width: 768px) {
        padding-top: 30px;
      }
    }

    .control-area {
      margin: 32px auto;
      padding: 0 16px;
      width: 100%;
      @media screen and (min-width: 768px) {
        width: 100%;
        margin: 40px auto;
      }

      .van-cell {
        padding: 16px;
        font-size: 16px;
        margin: 0 0 16px;
        width: 100%;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);

        @media screen and (min-width: 768px) {
          padding: 20px;
          font-size: 18px;
          margin-bottom: 20px;
        }

        &:last-child {
          margin-bottom: 0;
        }

        :deep(.van-field__label) {
          padding-right: 16px;

          label {
            max-width: 5em;
            margin-right: 8px;
          }
        }
      }

      .opr-area {
        padding: 16px 0;

        .van-button {
          height: 32px;
          line-height: 32px;

          @media screen and (min-width: 768px) {
            height: 40px;
            line-height: 40px;
            font-size: 16px;
          }
        }

        .van-button--disabled {
          color: rgba(0, 0, 0, 0.15);
          background-color: rgba(0, 0, 0, 0.05);
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
}

.company-info {
  margin-top: 30px;
  width: 100%;
  padding: 20px;

  @media screen and (min-width: 768px) {
    padding: 30px;
  }
}
</style>