2022年11月11日17:02:49

src/views/system/login/Login.vue

@@ -1,32 +1,74 @@
 <template>
   <video-bg :sources="[bgVideo]">
-    <div v-if="verify" class="as-gravity-center" style="
+    <div
+      v-if="verify"
+      class="as-gravity-center"
+      style="
         z-index: 10;
         position: absolute;
         left: 0;
         top: 0;
         right: 0px;
         bottom: 0px;
-        margin: auto;">
+        margin: auto;
+      "
+    >
       <!-- 滑动图块功能 -->
-      <sliding-block-verify-two :marginTop="slidingBlock.marginTop" :marginLeft="slidingBlock.marginLeft"
-        :bgImg="slidingBlock.bgImg" @succeed="succeed" @fail="fail" @close="close">
+      <sliding-block-verify-two
+        :marginTop="slidingBlock.marginTop"
+        :marginLeft="slidingBlock.marginLeft"
+        :bgImg="slidingBlock.bgImg"
+        @succeed="succeed"
+        @fail="fail"
+        @close="close"
+      >
       </sliding-block-verify-two>
     </div>
     <div class="login">
-      <el-form class="login-form" :validateOnRuleChange="false" ref="form" :model="item" :rules="rules"
-        label-position="left" label-width="0px">
-        <h3 class="title" style="margin-bottom: 20px; color: #707070; font-size: 18px">登录</h3>
+      <el-form
+        class="login-form"
+        :validateOnRuleChange="false"
+        ref="form"
+        :model="item"
+        :rules="rules"
+        label-position="left"
+        label-width="0px"
+      >
+        <h3
+          class="title"
+          style="margin-bottom: 20px; color: #707070; font-size: 18px"
+        >
+          登录
+        </h3>
         <el-form-item prop="account">
-          <el-input size="large" :prefix-icon="User" v-model="item.account" placeholder="账号">
+          <el-input
+            size="large"
+            :prefix-icon="User"
+            v-model="item.account"
+            placeholder="账号"
+          >
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
-          <el-input size="large" :prefix-icon="Lock" v-model="item.password" type="password" placeholder="密码">
+          <el-input
+            size="large"
+            :prefix-icon="Lock"
+            v-model="item.password"
+            type="password"
+            placeholder="密码"
+          >
           </el-input>
         </el-form-item>
-        <el-checkbox v-model="item.rememberPSWD" label="记住密码" size="large" />
-        <el-button style="width: 100%; margin: 20px auto 30px auto" type="primary" @click="submitForm(form)">提交
+        <el-checkbox
+          v-model="item.rememberPSWD"
+          label="记住密码"
+          size="large"
+        />
+        <el-button
+          style="width: 100%; margin: 20px auto 30px auto"
+          type="primary"
+          @click="submitForm(form)"
+          >提交
         </el-button>
       </el-form>
     </div>
@@ -34,162 +76,173 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, getCurrentInstance, nextTick } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import { ElNotification } from 'element-plus'
-import bgTwo from '@/assets/video/homeBg.mp4'
-import VideoBg from '@/components/VideoBackround/VideoBackground.vue'
-import { User, Lock } from '@element-plus/icons-vue'
-import Cookies from 'js-cookie'
-import SlideImgThreePng from '@/assets/image/two.jpg'
-import { hex_sha512 } from '@/utils/sha-512.js'
+import { reactive, ref, getCurrentInstance, nextTick } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { ElNotification } from "element-plus";
+import bgTwo from "@/assets/video/homeBg.mp4";
+import VideoBg from "@/components/VideoBackround/VideoBackground.vue";
+import { User, Lock } from "@element-plus/icons-vue";
+import Cookies from "js-cookie";
+import SlideImgThreePng from "@/assets/image/two.jpg";
+import { hex_sha512 } from "@/utils/sha-512.js";
 //@ts-ignore 引入滑块组件
-import SlidingBlockVerifyTwo from '@/components/SlidingBlockVerifyTwo/SlidingBlockVerifyTwo.vue'
+import SlidingBlockVerifyTwo from "@/components/SlidingBlockVerifyTwo/SlidingBlockVerifyTwo.vue";
 
-const form = ref()
-const router = useRouter()
-const bgVideo = bgTwo
-const verify = ref(false)
-const { proxy }: any = getCurrentInstance()
+const form = ref();
+const router = useRouter();
+const bgVideo = bgTwo;
+const verify = ref(false);
+const { proxy }: any = getCurrentInstance();
 const slidingBlock = reactive({
   marginTop: 100, //10-150
   marginLeft: 100, //80-220
   bgImg: SlideImgThreePng,
-})
+});
 
 const item = reactive<any>({
-  account: '', //test111
-  password: '', //123123
-  rememberPSWD: '',
-})
+  account: "", //test111
+  password: "", //123123
+  rememberPSWD: "",
+});
 
 //记住密码处理(自动登录)
-if (Cookies.get('rememberPSWD')) {
-  item.account = Cookies.get('account')
-  item.password = Cookies.get('password')
-  router.replace({
-    name: 'Layout',
-  })
-}
+// if (Cookies.get("rememberPSWD")) {
+//   item.account = Cookies.get("account");
+//   item.password = Cookies.get("password");
+//   router.replace({
+//     name: "Layout",
+//   });
+// }
+
+router.replace({
+  name: "Layout",
+});
 
 const rules = reactive({
   account: [
     {
       required: true,
-      message: '账号不能为空',
-      trigger: 'blur',
+      message: "账号不能为空",
+      trigger: "blur",
     },
   ],
   password: [
     {
       required: true,
-      message: '密码不能为空',
-      trigger: 'blur',
+      message: "密码不能为空",
+      trigger: "blur",
     },
   ],
   rememberPSWD: [
     {
-      trigger: 'blur',
+      trigger: "blur",
     },
   ],
-})
+});
 
 //请求成功
 const succeed = () => {
-  verify.value = false
-
-  proxy.$request
-    .post(
-      'req',
-      {},
-      {
-        params: {
-          "appId": "431daa74e7914d47a1a8190415c6f0ac",
-          "code": "IF01001202207210765", //公司名称(树)列表接口
-          "zip": "0",
-          "key": "0",
-          "data": {
-            "loginName": item.account,
-            "password": hex_sha512(item.password)
-          }
-        },
-        baseURL: 'common/',
-      }
-    )
-    .then((res: any) => {
-      if (res.data.rcode === 0) {
-        if (item.rememberPSWD) {
-          Cookies.set('password', item.password)
-          Cookies.set('rememberPSWD', item.rememberPSWD)
-        } else {
-          // 清楚Cookies
-          // Cookies.remove('account')
-          Cookies.remove('password')
-          Cookies.remove('rememberPSWD')
-        }
-        Cookies.set('account', item.account)
-        Cookies.set('departmentId', res.data.data.departmentId)
-        Cookies.set('departmentName', res.data.data.departmentName)
-        Cookies.set('token', 'demo')
-        ElNotification({
-          title: '提示',
-          message: '登录成功！',
-          type: 'success',
-        })
-        //replace 取消历史记录跳转
-        router.replace({
-          name: 'Layout',
-        })
-      } else {
-        ElNotification({
-          title: '提示',
-          message: res.data.rmsg,
-          type: 'error',
-        })
-      }
-    })
-    .catch((err: any) => {
-      ElNotification({
-        title: '提示',
-        message: err,
-        type: 'error',
-      })
-    })
+  verify.value = false;
+  Cookies.set("account", "admin");
+  Cookies.set("departmentId", "123");
 
-}
+  Cookies.set("departmentName", "管理员");
+  Cookies.set("token", "demo");
+  router.replace({
+    name: "Layout",
+  });
+
+  // proxy.$request
+  //   .post(
+  //     'req',
+  //     {},
+  //     {
+  //       params: {
+  //         "appId": "431daa74e7914d47a1a8190415c6f0ac",
+  //         "code": "IF01001202207210765", //公司名称(树)列表接口
+  //         "zip": "0",
+  //         "key": "0",
+  //         "data": {
+  //           "loginName": item.account,
+  //           "password": hex_sha512(item.password)
+  //         }
+  //       },
+  //       baseURL: 'common/',
+  //     }
+  //   )
+  //   .then((res: any) => {
+  //     if (res.data.rcode === 0) {
+  //       if (item.rememberPSWD) {
+  //         Cookies.set('password', item.password)
+  //         Cookies.set('rememberPSWD', item.rememberPSWD)
+  //       } else {
+  //         // 清楚Cookies
+  //         // Cookies.remove('account')
+  //         Cookies.remove('password')
+  //         Cookies.remove('rememberPSWD')
+  //       }
+  //       Cookies.set('account', item.account)
+  //       Cookies.set('departmentId', res.data.data.departmentId)
+  //       Cookies.set('departmentName', res.data.data.departmentName)
+  //       Cookies.set('token', 'demo')
+  //       ElNotification({
+  //         title: '提示',
+  //         message: '登录成功！',
+  //         type: 'success',
+  //       })
+  //       //replace 取消历史记录跳转
+  //       router.replace({
+  //         name: 'Layout',
+  //       })
+  //     } else {
+  //       ElNotification({
+  //         title: '提示',
+  //         message: res.data.rmsg,
+  //         type: 'error',
+  //       })
+  //     }
+  //   })
+  //   .catch((err: any) => {
+  //     ElNotification({
+  //       title: '提示',
+  //       message: err,
+  //       type: 'error',
+  //     })
+  //   })
+};
 
 //验证失败
-const fail = () => { }
+const fail = () => {};
 
 //关闭
 const close = () => {
-  verify.value = false
-}
+  verify.value = false;
+};
 
 const submitForm = (formEl: any) => {
   if (!formEl) {
-    return
+    return;
   }
   formEl.validate((valid: any) => {
     if (valid) {
       //是否通过表单验证
       if (item.rememberPSWD) {
-        Cookies.set('account', item.account)
-        Cookies.set('password', item.password)
-        Cookies.set('rememberPSWD', item.rememberPSWD)
+        Cookies.set("account", item.account);
+        Cookies.set("password", item.password);
+        Cookies.set("rememberPSWD", item.rememberPSWD);
       } else {
         // 清楚Cookies
-        Cookies.remove('account')
-        Cookies.remove('password')
-        Cookies.remove('rememberPSWD')
+        Cookies.remove("account");
+        Cookies.remove("password");
+        Cookies.remove("rememberPSWD");
       }
       //获取验证码参数
-      verify.value = true
+      verify.value = true;
     } else {
-      return false
+      return false;
     }
-  })
-}
+  });
+};
 </script>
 
 <style lang="scss" scoped>