initiate

src/views/common/login.vue

@@ -0,0 +1,182 @@
+<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>