li.shaoyi il y a 3 ans
Parent
commit
001d2bb128
1 fichiers modifiés avec 165 ajouts et 190 suppressions
  1. 165 190
      src/views/account/login.vue

+ 165 - 190
src/views/account/login.vue

@@ -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;