|
|
@@ -1,42 +1,37 @@
|
|
|
<template>
|
|
|
- <div class="login">
|
|
|
- <a-row type="flex" justify="center" align="middle">
|
|
|
- <a-col>
|
|
|
- <div class="login-background" id="img">
|
|
|
- <!-- <div id="img"> -->
|
|
|
- <!-- <img src="./logo.png"
|
|
|
+ <div class="login">
|
|
|
+ <a-row type="flex" justify="center" align="middle">
|
|
|
+ <a-col>
|
|
|
+ <div class="login-background" id="img">
|
|
|
+ <!-- <div id="img"> -->
|
|
|
+ <!-- <img src="./logo.png"
|
|
|
alt="" />-->
|
|
|
- <!-- </div> -->
|
|
|
- </div>
|
|
|
- <div class="login-content">
|
|
|
- <p>账号登录</p>
|
|
|
- <a-form ref="formDom" :model="form" :rules="rules">
|
|
|
- <a-form-item name="account">
|
|
|
- <a-input placeholder="用户名/账号/手机号" v-model:value="form.account">
|
|
|
- <template #prefix>
|
|
|
- <img src="@/assets/images/user.png" />
|
|
|
- </template>
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item name="password" class="mb20">
|
|
|
- <a-input
|
|
|
- @keyup.enter="loginAction"
|
|
|
- placeholder="请输入您的登录密码"
|
|
|
- type="password"
|
|
|
- v-model:value="form.password"
|
|
|
- >
|
|
|
- <template #prefix>
|
|
|
- <img src="@/assets/images/password.png" />
|
|
|
- </template>
|
|
|
- </a-input>
|
|
|
- </a-form-item>
|
|
|
- <a-form-item>
|
|
|
- <div class="login-remember-password">
|
|
|
- <a-checkbox v-model:checked="form.isRemember">记住账号</a-checkbox>
|
|
|
- <!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
|
|
|
- </div>
|
|
|
- </a-form-item>
|
|
|
- <!-- <a-form-item>
|
|
|
+ <!-- </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="login-content">
|
|
|
+ <p>账号登录</p>
|
|
|
+ <a-form ref="formDom" :model="form" :rules="rules">
|
|
|
+ <a-form-item name="account">
|
|
|
+ <a-input placeholder="用户名/账号/手机号" v-model:value="form.account">
|
|
|
+ <template #prefix>
|
|
|
+ <img src="@/assets/images/user.png" />
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item name="password" class="mb20">
|
|
|
+ <a-input @keyup.enter="loginAction" placeholder="请输入您的登录密码" type="password" v-model:value="form.password">
|
|
|
+ <template #prefix>
|
|
|
+ <img src="@/assets/images/password.png" />
|
|
|
+ </template>
|
|
|
+ </a-input>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item>
|
|
|
+ <div class="login-remember-password">
|
|
|
+ <a-checkbox v-model:checked="form.isRemember">记住账号</a-checkbox>
|
|
|
+ <!-- <router-link to="/resetPassword">忘记密码?</router-link> -->
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ <!-- <a-form-item>
|
|
|
<div style="text-align:left">
|
|
|
<a-checkbox v-model:checked="form.isRead">
|
|
|
我已阅读并同意
|
|
|
@@ -44,44 +39,27 @@
|
|
|
<router-link to="/resetPassword">《用户协议》</router-link>
|
|
|
</div>
|
|
|
</a-form-item>-->
|
|
|
- <a-form-item class="mt20" name="isRead">
|
|
|
- <a-button
|
|
|
- @click="loginAction"
|
|
|
- :loading="loading"
|
|
|
- :disabled="goHomeloading"
|
|
|
- >登录</a-button>‚
|
|
|
- <div class="agreement agreement-header">
|
|
|
- <a-checkbox v-model:checked="isReadAgreement">已阅读并同意</a-checkbox>
|
|
|
- </div>
|
|
|
- <div class="agreement">
|
|
|
- <a
|
|
|
- v-for="item in agreementList"
|
|
|
- @click="showModal(item)"
|
|
|
- :key="item.agreementid"
|
|
|
- >《{{ item.agreementname }}》</a>
|
|
|
- </div>
|
|
|
- <div class="register" v-if="isOpenUrl">
|
|
|
- 还没有账号,
|
|
|
- <span @click="register">立即注册</span>
|
|
|
- </div>
|
|
|
- </a-form-item>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- <a-modal
|
|
|
- class="commonModal"
|
|
|
- v-if="visible"
|
|
|
- :title="selectedAgreement?.agreementname"
|
|
|
- v-model:visible="visible"
|
|
|
- centered
|
|
|
- @cancel="closeModel"
|
|
|
- :footer="null"
|
|
|
- width="890px"
|
|
|
- >
|
|
|
- <div class="agreement-content" v-html="formateWord(selectedAgreement.agreementcontent)"></div>
|
|
|
- </a-modal>
|
|
|
- </div>
|
|
|
+ <a-form-item class="mt20" name="isRead">
|
|
|
+ <a-button @click="loginAction" :loading="loading" :disabled="goHomeloading">登录</a-button>‚
|
|
|
+ <div class="agreement agreement-header">
|
|
|
+ <a-checkbox v-model:checked="isReadAgreement">已阅读并同意</a-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="agreement">
|
|
|
+ <a v-for="item in agreementList" @click="showModal(item)" :key="item.agreementid">《{{ item.agreementname }}》</a>
|
|
|
+ </div>
|
|
|
+ <div class="register" v-if="isOpenUrl">
|
|
|
+ 还没有账号,
|
|
|
+ <span @click="register">立即注册</span>
|
|
|
+ </div>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-modal class="commonModal" v-if="visible" :title="selectedAgreement?.agreementname" v-model:visible="visible" centered @cancel="closeModel" :footer="null" width="890px">
|
|
|
+ <div class="agreement-content" v-html="formateWord(selectedAgreement.agreementcontent)"></div>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -99,134 +77,133 @@ import { useRouter } from 'vue-router';
|
|
|
import { qtAction } from './qt';
|
|
|
|
|
|
interface Form {
|
|
|
- account: string;
|
|
|
- password: string;
|
|
|
- isRemember: boolean;
|
|
|
- isRead: boolean;
|
|
|
+ account: string;
|
|
|
+ password: string;
|
|
|
+ isRemember: boolean;
|
|
|
+ isRead: boolean;
|
|
|
}
|
|
|
|
|
|
const initForm: Form = {
|
|
|
- account: '',
|
|
|
- password: '',
|
|
|
- isRemember: false,
|
|
|
- isRead: false,
|
|
|
+ account: '',
|
|
|
+ password: '',
|
|
|
+ isRemember: false,
|
|
|
+ isRead: false,
|
|
|
};
|
|
|
|
|
|
function setRememberAccount(): void {
|
|
|
- const account: string = localStorageUtil.getItem('loginAccount');
|
|
|
- if (account) {
|
|
|
- Object.assign(initForm, { account, isRemember: true });
|
|
|
- }
|
|
|
+ const account: string = localStorageUtil.getItem('loginAccount');
|
|
|
+ if (account) {
|
|
|
+ Object.assign(initForm, { account, isRemember: true });
|
|
|
+ }
|
|
|
}
|
|
|
function setLogo() {
|
|
|
- const img = document.querySelector('#logo_img') || document.createElement('img');
|
|
|
- const obj = {
|
|
|
- id: 'logo_img',
|
|
|
- src: './logo.png',
|
|
|
- style: 'margin-bottom: 180px',
|
|
|
- };
|
|
|
- Object.assign(img, obj);
|
|
|
- document.querySelector('#img')?.appendChild(img);
|
|
|
+ const img = document.querySelector('#logo_img') || document.createElement('img');
|
|
|
+ const obj = {
|
|
|
+ id: 'logo_img',
|
|
|
+ src: './logo.png',
|
|
|
+ style: 'margin-bottom: 180px',
|
|
|
+ };
|
|
|
+ Object.assign(img, obj);
|
|
|
+ document.querySelector('#img')?.appendChild(img);
|
|
|
}
|
|
|
|
|
|
// 协议
|
|
|
function useAgreement() {
|
|
|
- // 协议
|
|
|
- const agreementList = ref<QueryUserNodeCfgAndStatusRsp[]>([])
|
|
|
- const selectedAgreement = ref<QueryUserNodeCfgAndStatusRsp | null>(null)
|
|
|
- const visible = ref<boolean>(false);
|
|
|
- const showModal = (item: QueryUserNodeCfgAndStatusRsp) => {
|
|
|
- selectedAgreement.value = item
|
|
|
- visible.value = true;
|
|
|
- };
|
|
|
- const closeModel = () => {
|
|
|
- visible.value = false
|
|
|
- }
|
|
|
- const formateWord = (val: string) => {
|
|
|
- return val.replace(/\n/g, '<br>')
|
|
|
- }
|
|
|
- initData(() => {
|
|
|
- queryUserNodeCfgAndStatus({ nodetype: '2', agreementtype: 2 }).then(res => {
|
|
|
- if (Array.isArray(res)) {
|
|
|
- console.log('dddddddddssda', res)
|
|
|
- agreementList.value = res
|
|
|
- }
|
|
|
- })
|
|
|
+ // 协议
|
|
|
+ const agreementList = ref<QueryUserNodeCfgAndStatusRsp[]>([])
|
|
|
+ const selectedAgreement = ref<QueryUserNodeCfgAndStatusRsp | null>(null)
|
|
|
+ const visible = ref<boolean>(false);
|
|
|
+ const showModal = (item: QueryUserNodeCfgAndStatusRsp) => {
|
|
|
+ selectedAgreement.value = item
|
|
|
+ visible.value = true;
|
|
|
+ };
|
|
|
+ const closeModel = () => {
|
|
|
+ visible.value = false
|
|
|
+ }
|
|
|
+ const formateWord = (val: string) => {
|
|
|
+ return val.replace(/\n/g, '<br>')
|
|
|
+ }
|
|
|
+ initData(() => {
|
|
|
+ queryUserNodeCfgAndStatus({ nodetype: '2', agreementtype: 2 }).then(res => {
|
|
|
+ if (Array.isArray(res)) {
|
|
|
+ agreementList.value = res
|
|
|
+ }
|
|
|
})
|
|
|
- return { agreementList, showModal, selectedAgreement, visible, closeModel, formateWord }
|
|
|
+ })
|
|
|
+ return { agreementList, showModal, selectedAgreement, visible, closeModel, formateWord }
|
|
|
}
|
|
|
export default defineComponent({
|
|
|
- name: 'login',
|
|
|
- components: {},
|
|
|
- setup() {
|
|
|
- const isReaad = localStorageUtil.getItem('readAgreement') ? true : false
|
|
|
- const isReadAgreement = ref<boolean>(isReaad)
|
|
|
- onMounted(() => {
|
|
|
- setLogo();
|
|
|
- });
|
|
|
+ name: 'login',
|
|
|
+ components: {},
|
|
|
+ setup() {
|
|
|
+ const isReaad = localStorageUtil.getItem('readAgreement') ? true : false
|
|
|
+ const isReadAgreement = ref<boolean>(isReaad)
|
|
|
+ onMounted(() => {
|
|
|
+ setLogo();
|
|
|
+ });
|
|
|
|
|
|
- const loading = ref<boolean>(false);
|
|
|
- const form = reactive(initForm);
|
|
|
- const rules = {
|
|
|
- account: [{ required: true, message: '请输入手机号!', trigger: 'change', type: 'string' }],
|
|
|
- password: [{ required: true, message: '请输入密码!', trigger: 'change', type: 'string' }],
|
|
|
- };
|
|
|
- const formDom: any = ref(null);
|
|
|
- const router = useRouter();
|
|
|
- form.password = '';
|
|
|
- // setRememberAccount();
|
|
|
- // qt
|
|
|
- const { getQtInfo } = qtAction();
|
|
|
- function loginAction() {
|
|
|
- formDom.value.validate().then(() => {
|
|
|
- if (!isReadAgreement.value) {
|
|
|
- message.error('请阅读并同意协议')
|
|
|
- return
|
|
|
- }
|
|
|
- localStorageUtil.setItem('readAgreement', true)
|
|
|
- loading.value = true;
|
|
|
- const { account, password } = toRaw(form);
|
|
|
- setLoadComplete(false);
|
|
|
- getQtInfo().then((arr) => {
|
|
|
- login(account, password, arr)
|
|
|
- .then((value: any) => {
|
|
|
- setLoadComplete(true);
|
|
|
- const { account, isRemember } = toRaw(form);
|
|
|
- if (isRemember) {
|
|
|
- localStorageUtil.setItem('loginAccount', account); // 缓存登录账号
|
|
|
- }
|
|
|
- eventBus.$emit('loginSuccess', true);
|
|
|
- router.push({ name: 'home' });
|
|
|
- loading.value = false;
|
|
|
- })
|
|
|
- .catch((err: any) => {
|
|
|
- loading.value = false;
|
|
|
- err && message.error(err);
|
|
|
- });
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- // 直接前往首页
|
|
|
- const goHomeloading = ref<boolean>(false);
|
|
|
- const goHome = () => {
|
|
|
- goHomeloading.value = true;
|
|
|
- setLoadComplete(false);
|
|
|
- globalDataRefresh()
|
|
|
- .then((res) => {
|
|
|
- setLoadComplete(true);
|
|
|
- goHomeloading.value = false;
|
|
|
- router.push({ name: 'home' });
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.error(err);
|
|
|
- goHomeloading.value = false;
|
|
|
- });
|
|
|
- };
|
|
|
- function register() {
|
|
|
- window.open(serviceURL.openApiUrl, '_blank');
|
|
|
+ const loading = ref<boolean>(false);
|
|
|
+ const form = reactive(initForm);
|
|
|
+ const rules = {
|
|
|
+ account: [{ required: true, message: '请输入手机号!', trigger: 'change', type: 'string' }],
|
|
|
+ password: [{ required: true, message: '请输入密码!', trigger: 'change', type: 'string' }],
|
|
|
+ };
|
|
|
+ const formDom: any = ref(null);
|
|
|
+ const router = useRouter();
|
|
|
+ form.password = '';
|
|
|
+ // setRememberAccount();
|
|
|
+ // qt
|
|
|
+ const { getQtInfo } = qtAction();
|
|
|
+ function loginAction() {
|
|
|
+ formDom.value.validate().then(() => {
|
|
|
+ if (!isReadAgreement.value) {
|
|
|
+ message.error('请阅读并同意协议')
|
|
|
+ return
|
|
|
}
|
|
|
- return { form, loginAction, isReadAgreement, rules, formDom, loading, goHomeloading, goHome, register, isOpenUrl, ...useAgreement() };
|
|
|
- },
|
|
|
+ localStorageUtil.setItem('readAgreement', true)
|
|
|
+ loading.value = true;
|
|
|
+ const { account, password } = toRaw(form);
|
|
|
+ setLoadComplete(false);
|
|
|
+ getQtInfo().then((arr) => {
|
|
|
+ login(account, password, arr)
|
|
|
+ .then((value: any) => {
|
|
|
+ setLoadComplete(true);
|
|
|
+ const { account, isRemember } = toRaw(form);
|
|
|
+ if (isRemember) {
|
|
|
+ localStorageUtil.setItem('loginAccount', account); // 缓存登录账号
|
|
|
+ }
|
|
|
+ eventBus.$emit('loginSuccess', true);
|
|
|
+ router.push({ name: 'home' });
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .catch((err: any) => {
|
|
|
+ loading.value = false;
|
|
|
+ err && message.error(err);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // 直接前往首页
|
|
|
+ const goHomeloading = ref<boolean>(false);
|
|
|
+ const goHome = () => {
|
|
|
+ goHomeloading.value = true;
|
|
|
+ setLoadComplete(false);
|
|
|
+ globalDataRefresh()
|
|
|
+ .then((res) => {
|
|
|
+ setLoadComplete(true);
|
|
|
+ goHomeloading.value = false;
|
|
|
+ router.push({ name: 'home' });
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ goHomeloading.value = false;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ function register() {
|
|
|
+ window.open(serviceURL.openApiUrl, '_blank');
|
|
|
+ }
|
|
|
+ return { form, loginAction, isReadAgreement, rules, formDom, loading, goHomeloading, goHome, register, isOpenUrl, ...useAgreement() };
|
|
|
+ },
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -244,8 +221,7 @@ export default defineComponent({
|
|
|
.login {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- background: url(../../assets/images/loginBackground.png) no-repeat scroll 0
|
|
|
- 0;
|
|
|
+ background: url(../../assets/images/loginBackground.png) no-repeat scroll 0 0;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.ant-row {
|
|
|
@@ -266,8 +242,7 @@ export default defineComponent({
|
|
|
}
|
|
|
.login-background {
|
|
|
width: 275px;
|
|
|
- background: url("../../assets/images/logoBackground.png") no-repeat scroll 0
|
|
|
- 0;
|
|
|
+ background: url('../../assets/images/logoBackground.png') no-repeat scroll 0 0;
|
|
|
background-size: cover;
|
|
|
display: flex;
|
|
|
align-items: center;
|