MTP2.0_WEB/src/views/account/login.vue

<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"
                    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 style="text-align:left">
                <a-checkbox v-model:checked="form.isRead">
                  我已阅读并同意
                </a-checkbox>
                <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>
</template>

<script lang="ts">
import { initData, setLoadComplete } from '@/common/methods';
import { globalDataRefresh } from '@/services/bus/index';
import { login } from '@/services/bus/login';
import { queryUserNodeCfgAndStatus } from '@/services/go/QhjSys';
import { QueryUserNodeCfgAndStatusRsp } from '@/services/go/QhjSys/interface';
import { isOpenUrl, serviceURL } from '@/services/request/serviceURL';
import eventBus from '@/utils/eventBus/index';
import { localStorageUtil } from '@/utils/storage/index';
import { message } from 'ant-design-vue';
import { defineComponent, onMounted, reactive, ref, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { qtAction } from './qt';

interface Form {
  account: string;
  password: string;
  isRemember: boolean;
  isRead: boolean;
}

const initForm: Form = {
  account: '',
  password: '',
  isRemember: false,
  isRead: false,
};

function setRememberAccount(): void {
  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);
}

// 协议
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)) {
        agreementList.value = res
      }
    })
  })
  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();
    });

    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');
    }
    return { form, loginAction, isReadAgreement, rules, formDom, loading, goHomeloading, goHome, register, isOpenUrl, ...useAgreement() };
  },
});
</script>

<style lang="less" scoped>
.agreement-header {
    margin-top: -30px;
}
.agreement {
    height: 30px;
    line-height: 30px;
}
.register {
    cursor: pointer;
}
.login {
    width: 100%;
    height: 100%;
    background: url(../../assets/images/loginBackground.png) no-repeat scroll 0 0;
    background-size: 100% 100%;
}
.ant-row {
    height: 100%;
}
.ant-col {
    width: 800px;
    height: 450px;
    background: @m-white0;
    border-radius: 5px;
    box-shadow: 0px 5px 10px 0px rgba(18, 22, 24, 0.18);
    .flex();
}

.agreement-content {
    font-size: 14px;
    color: @m-grey25;
}
.login-background {
    width: 275px;
    background: url('../../assets/images/logoBackground.png') no-repeat scroll 0 0;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    div {
        // margin-top: 120px;
        // margin-left: 69.5px; // 企业风管logo
        // margin-left: 33px; // 云融
        width: 136px;
        height: 136px;
        min-width: 136px;
        min-height: 136px;
        position: relative;

        // img {
        //     max-width: 100%;
        //     max-height: 100%;
        //     .position(absolute, 0%, auto, auto, 50%);
        //     z-index: 10;
        //     transform: translate(-50%, -50%);
        // }
    }

    // .ant-btn {
    //     background: @cyan-color2;
    //     border-color: @cyan-color2;
    //     border-radius: 10px;
    //     font-size: 14px;
    //     color: @white;
    //     margin-top: 90px;
    //     margin-left: -60px;
    // }
}
.login-content {
    flex: 1;
    padding-left: 53px;
    padding-right: 53px;
    min-width: 405px;
    ::v-deep(.ant-form) {
        margin-top: 20px;
        .ant-form-item-control-wrapper {
            width: 100%;
        }
        .ant-form-item-control.has-error {
            .ant-form-item-children {
                .ant-input-affix-wrapper {
                    .ant-input {
                        background: transparent !important;
                    }
                }
            }
            .ant-form-explain {
                text-align: left;
                padding-left: 24px;
            }
        }
        .ant-input {
            border: 0;
            border-radius: 0;
            width: 154px;
            height: 40px;
            font-size: 16px;
            font-family: Adobe Heiti Std;
        }
        .ant-input-affix-wrapper {
            box-shadow: none;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid @m-grey3;
            padding: 0;
        }
        .ant-input-affix-wrapper:hover {
            border-bottom: 1px solid @m-blue1;
        }
    }
    .mt20 {
        margin-top: 20px;
    }
    .mb20 {
        margin-bottom: 20px;
    }
    .ant-form-item,
    .ant-form label {
        font-size: 16px;
    }
    .ant-form-item {
        margin-bottom: 10px;
    }
    p {
        font-size: 26px;
        text-align: left;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: @m-grey4;
        margin-top: 40px;
        margin-bottom: 10px;
    }
    img {
        width: 19px;
        height: 21px;
    }
    .login-remember-password {
        .flex();
        justify-content: space-between;
        a {
            color: @m-grey4;
        }
    }

    .ant-btn {
        width: 100%;
        font-size: 16px;
        background: @m-blue1;
        border-radius: 3px;
        color: @m-white0;
        height: 50px;
        font-weight: 500;
        line-height: 43px;
    }
}
</style>