Browse Source

fix: 1

master
zhangli 1 year ago
parent
commit
c2812d15a2
  1. 31
      .env.development
  2. 31
      .env.production
  3. 31
      .env.test
  4. 5468
      package-lock.json
  5. 15
      src/api/path/system.api.ts
  6. 130
      src/views/login/index.vue

31
.env.development

@ -0,0 +1,31 @@
# 开发环境
NODE_ENV=development
VITE_DEV=false
# 请求路径
VITE_BASE_URL='http://localhost:12080'
# 上传路径
VITE_UPLOAD_URL='http://localhost:12080/admin-api/infra/file/upload'
# 接口前缀
VITE_API_BASEPATH=/dev-api
# 接口地址
VITE_API_URL=/admin-api
# 打包路径
VITE_BASE_PATH=/
# 是否删除debugger
VITE_DROP_DEBUGGER=true
# 是否删除console.log
VITE_DROP_CONSOLE=false
# 是否sourcemap
VITE_SOURCEMAP=false
# 输出路径
VITE_OUT_DIR=dist

31
.env.production

@ -0,0 +1,31 @@
# 生产环境
NODE_ENV=production
VITE_DEV=false
# 请求路径
VITE_BASE_URL='http://localhost:12080'
# 上传路径
VITE_UPLOAD_URL='http://localhost:12080/admin-api/infra/file/upload'
# 接口前缀
VITE_API_BASEPATH=
# 接口地址
VITE_API_URL=/admin-api
# 是否删除debugger
VITE_DROP_DEBUGGER=true
# 是否删除console.log
VITE_DROP_CONSOLE=true
# 是否sourcemap
VITE_SOURCEMAP=false
# 打包路径
VITE_BASE_PATH=/
# 输出路径
VITE_OUT_DIR=dist-pro

31
.env.test

@ -0,0 +1,31 @@
# 生产环境
NODE_ENV=test
VITE_DEV=false
# 请求路径
VITE_BASE_URL='http://dev.ccwin-in.com:25100/api'
# 上传路径
VITE_UPLOAD_URL='http://dev.ccwin-in.com:25100/api/admin-api/infra/file/upload'
# 接口前缀
VITE_API_BASEPATH=
# 接口地址
VITE_API_URL=/admin-api
# 是否删除debugger
VITE_DROP_DEBUGGER=true
# 是否删除console.log
VITE_DROP_CONSOLE=true
# 是否sourcemap
VITE_SOURCEMAP=false
# 打包路径
VITE_BASE_PATH=/
# 输出路径
VITE_OUT_DIR=dist-test

5468
package-lock.json

File diff suppressed because it is too large

15
src/api/path/system.api.ts

@ -45,6 +45,21 @@ export const getCodeApi = async (data: any) => {
}
}
// 获取验证码
export const getCodeImg = async () => {
// return request.get({
// url: 'system/captcha/captchaImage', headers: {
// isToken: false
// }
// })
try {
const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/captcha/captchaImage`)
return res
} catch (err) {
httpErrorHandle()
}
}
// 滑动或者点选验证
export const reqCheckApi = async (data: any) => {
try {

130
src/views/login/index.vue

@ -24,18 +24,9 @@
</layout-header>
<div class="go-login">
<div class="go-login-carousel">
<n-carousel
autoplay
dot-type="line"
:interval="Number(carouselInterval)"
>
<img
v-for="(item, i) in carouselImgList"
:key="i"
class="go-login-carousel-img"
:src="getImageUrl(item, 'login')"
alt="image"
/>
<n-carousel autoplay dot-type="line" :interval="Number(carouselInterval)">
<img v-for="(item, i) in carouselImgList" :key="i" class="go-login-carousel-img"
:src="getImageUrl(item, 'login')" alt="image" />
</n-carousel>
</div>
<div class="login-account">
@ -43,24 +34,11 @@
<n-collapse-transition :appear="true" :show="show">
<n-card class="login-account-card" :title="$t('login.desc')">
<div class="login-account-top">
<img
class="login-account-top-logo"
src="~@/assets/images/login/input.png"
alt="展示图片"
/>
<img class="login-account-top-logo" src="~@/assets/images/login/input.png" alt="展示图片" />
</div>
<n-form
ref="formRef"
label-placement="left"
size="large"
:model="formInline"
:rules="rules"
>
<n-form ref="formRef" label-placement="left" size="large" :model="formInline" :rules="rules">
<n-form-item path="tenantId" v-if="tenantEnable === 'true'">
<n-input
v-model:value="formInline.tenantName"
:placeholder="$t('global.form_tenant')"
>
<n-input v-model:value="formInline.tenantName" :placeholder="$t('global.form_tenant')">
<template #prefix>
<n-icon size="18">
<TvOutlineIcon></TvOutlineIcon>
@ -69,10 +47,7 @@
</n-input>
</n-form-item>
<n-form-item path="username">
<n-input
v-model:value="formInline.username"
:placeholder="$t('global.form_account')"
>
<n-input v-model:value="formInline.username" :placeholder="$t('global.form_account')">
<template #prefix>
<n-icon size="18">
<PersonOutlineIcon></PersonOutlineIcon>
@ -81,12 +56,8 @@
</n-input>
</n-form-item>
<n-form-item path="password">
<n-input
v-model:value="formInline.password"
type="password"
show-password-on="click"
:placeholder="$t('global.form_password')"
>
<n-input v-model:value="formInline.password" type="password" show-password-on="click"
:placeholder="$t('global.form_password')">
<template #prefix>
<n-icon size="18">
<LockClosedOutlineIcon></LockClosedOutlineIcon>
@ -94,6 +65,24 @@
</template>
</n-input>
</n-form-item>
<n-form-item prop="code">
<div class="flex w-[100%]">
<n-input v-model="formInline.code" placeholder="请输入验证码"
style="width: 76%;margin-right: 10px;height: 42px;" :prefix-icon="iconLock"
@keyup.enter="getCode()" >
<template #prefix>
<n-icon size="18">
<LockClosedOutlineIcon></LockClosedOutlineIcon>
</n-icon>
</template>
</n-input>
<div class="login-code flex-1">
<img :src="codeUrl" @click="getCode" class="login-code-img" />
</div>
</div>
</n-form-item>
<n-form-item>
<div class="flex justify-between">
<div class="flex-initial">
@ -104,22 +93,11 @@
</div>
</n-form-item>
<n-form-item>
<n-button
type="primary"
@click="getCode"
size="large"
:loading="loading"
block
>{{ $t('login.form_button') }}</n-button
>
<n-button type="primary" @click="getCode" size="large" :loading="loading" block>{{
$t('login.form_button') }}</n-button>
</n-form-item>
<Verify
ref="verify"
mode="pop"
:captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }"
@success="handleSubmit"
/>
<Verify ref="verify" mode="pop" :captchaType="captchaType" :imgSize="{ width: '400px', height: '200px' }"
@success="handleSubmit" />
</n-form>
</n-card>
</n-collapse-transition>
@ -147,7 +125,7 @@ import { PageEnum } from '@/enums/pageEnum'
import { StorageEnum } from '@/enums/storageEnum'
import { icon } from '@/plugins'
import { routerTurnByName } from '@/utils'
import {getTenantIdByNameApi, getUserProfileApi, loginApi} from '@/api/path'
import { getTenantIdByNameApi, getUserProfileApi, loginApi, getCodeImg } from '@/api/path'
import { Verify } from '@/components/Verifition'
interface FormState {
@ -171,7 +149,10 @@ const formInline = reactive({
tenantName: '闻荫源码',
username: 'admin',
password: 'admin123',
code:'',
uuid:''
})
const codeUrl = ref("");
const rules = {
username: {
@ -227,15 +208,22 @@ const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle clickWord
const captchaEnable = import.meta.env.VITE_APP_CAPTCHA_ENABLE
//
const getCode = async () => {
//
if (captchaEnable === 'false') {
await handleSubmit({})
} else {
//
//
verify.value.show()
}
// const getCode = async () => {
// //
// if (captchaEnable === 'false') {
// await handleSubmit({})
// } else {
// //
// //
// verify.value.show()
// }
// }
function getCode() {
getCodeImg().then(res => {
codeUrl.value = "data:image/gif;base64," + res.img;
formInline.uuid = res.uuid;
});
}
//
@ -253,6 +241,7 @@ const getTenantId = async () => {
}
}
//
const handleSubmit = async (params: any) => {
formRef.value.validate(async (errors: any) => {
@ -309,7 +298,7 @@ onMounted(() => {
setTimeout(() => {
showBg.value = true
}, 100)
getCode()
shuffleHandle()
})
</script>
@ -325,10 +314,12 @@ $carousel-image-height: 60vh;
* {
box-sizing: border-box;
}
@include go(login-box) {
height: $go-login-height;
overflow: hidden;
@include background-image('background-image');
&-header {
display: flex;
justify-content: space-between;
@ -336,6 +327,7 @@ $carousel-image-height: 60vh;
padding: 0 40px;
height: $--header-height;
}
&-divider {
margin: 0;
padding-top: 0;
@ -349,20 +341,24 @@ $carousel-image-height: 60vh;
margin-top: -$--header-height;
height: $go-login-height;
width: 100vw;
&-carousel {
width: $carousel-width;
margin-top: 100px;
min-width: 500px;
&-img {
display: block;
margin: 0 auto;
height: $carousel-image-height;
}
}
.login-account {
display: flex;
flex-direction: column;
margin: 0 160px;
&-container {
width: $width;
}
@ -398,15 +394,18 @@ $carousel-image-height: 60vh;
width: 100vw;
height: 100vh;
background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px;
.bg-slot {
width: $carousel-width;
}
.bg-img-box {
position: relative;
display: flex;
flex-wrap: wrap;
width: 770px;
margin-right: -20px;
&-li {
img {
margin-right: 20px;
@ -419,12 +418,15 @@ $carousel-image-height: 60vh;
}
}
}
@media only screen and (max-width: 1200px) {
.bg-img-box,
.bg-slot,
.go-login-carousel {
display: none !important;
}
.go-login-box-footer {
position: relative;
}

Loading…
Cancel
Save