中国网传播登录页

杨泽宇
1 parent cb8e8ac6
Showing 6 changed files with 395 additions and 5 deletions
src/api/request.ts
src/pinia/login.ts
src/router/index.ts
src/utils/progress.ts
src/views/user/cnlive_login.vue
src/views/user/login.vue
@@ -38,8 +38,10 @@ instance.interceptors.response.use(
             ElMessage.error(response?.data?.errorMessage || '登录失效');
             // store.family.loginStore().removeToken()
             useLoginStore()?.removeToken()
+            // TODOS 这里需要区分中国网环境和社区环境
+            let loginPath: string = window.localStorage.getItem('isCnlive') === 'true'? '/enter': '/login'
             router.replace({
-              path: '/login'
+              path: loginPath
             })
             break;
           case 500:
@@ -48,9 +48,12 @@ export const useLoginStore = defineStore({
     removeToken() {
       logout()
       this.token = ''
+      let loginPath: string = window.localStorage.getItem('isCnlive') === 'true'? '/enter': '/login'
+      console.log(loginPath)
       window.localStorage.clear()
+      window.localStorage.removeItem('pinia')
       setTimeout(() => {
-        router.replace('/login')
+        router.replace(loginPath)
       }, 500)
     }
   },
@@ -20,6 +20,11 @@ const routes: Array&lt;any&gt; = [
     name: 'Login',
     component: () => import(/* webpackChunkName: "About" */ '@/views/user/login.vue')
   },
+  {
+    path: '/enter',
+    name: 'Enter',
+    component: () => import(/* webpackChunkName: "About" */ '@/views/user/cnlive_login.vue')
+  },
   { path: '/', redirect: { path: '/dashboard' } },
   {
     path: '/',
@@ -7,10 +7,12 @@ import { useLoginStore } from &#39;@/pinia/login&#39;;
 NProgress.configure({ showSpinner: false });
  
 router.beforeEach((to: any, from: any, next: any) => {
+  console.log(window.localStorage.getItem('isCnlive'))
   NProgress.start();
   // const hasToken = store.family.loginStore().token;
   const hasToken = useLoginStore()?.$state?.token
-  const whiteList = ['/login'];
+  const whiteList = ['/login', '/enter'];
+  // TODOS 这里需要把中国网的登录页也加到白名单里
  
   // 页面标题设置
   globalThis.document.title = to.meta.title? to.meta.title: import.meta.env.VITE_APP_TITLE;
@@ -30,7 +32,9 @@ router.beforeEach((to: any, from: any, next: any) =&gt; {
       if (from.path !== '/') {
         console.log('请重新登录')
       }
-      next({ path: '/login' })
+      // TODOS 这里需要区分社区环境还是中国网环境
+      let loginPath: string = window.localStorage.getItem('isCnlive') === 'true'? '/enter': '/login'
+      next({ path: loginPath })
       NProgress.done()
     }
   }
+<script setup lang="ts">
+import { login, menuData } from "@/api/user/login";
+import router from "@/router/index";
+import { useLoginStore } from "@/pinia/login";
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import axios from "axios";
+import load from "@/components/Tinymce/settings/load";
+import { WarningFilled } from "@element-plus/icons-vue";
+import type { ElForm } from "element-plus";
+const {
+  appContext: {
+    config: { globalProperties },
+  },
+} = getCurrentInstance();
+interface Login {
+  userName: string;
+  password: string;
+}
+/**
+ * 登录表单数据
+ */
+const loginForm: Login = reactive({
+  userName: "",
+  password: "",
+});
+
+let loading = ref(false);
+let errorMsg = reactive({
+  text: "手机号或密码错误",
+  show: false,
+});
+let menu = reactive({
+  data: [],
+});
+/**
+ * 登录框上面标题
+ */
+const title = ref(import.meta.env.VITE_APP_TITLE).value;
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+/**
+ * 表单提交
+ */
+const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  formEl.validate((valid) => {
+    if (valid) {
+      login(loginForm)
+        .then((res) => {
+          if (res?.data) {
+            globalProperties.$message.success("登录成功");
+            // 登录成功返回的参数含义，到pinia/modules/login.ts中查看
+            // store.family.loginStore().setUserInfo(res?.data?.data);
+            useLoginStore()?.setUserInfo(res?.data?.data);
+            errorMsg.show = false;
+            getMenu().then((res) => {
+              setTimeout(() => {
+                router.push({ path: "/" });
+              }, 1000);
+            });
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+          errorMsg.show = true;
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    } else {
+      loading.value = false;
+      console.log("error");
+    }
+  });
+};
+/**
+ * 获取权限菜单
+ */
+const getMenu = async () => {
+  try {
+    let res = await menuData();
+    useLoginStore()?.setMenuList(res?.data?.data);
+  } catch (e) {
+    console.log(e);
+  }
+};
+/**
+ * 下拉菜单点击响应
+ */
+const handleCommand = (data: any) => {
+  if (data) {
+    location.href = data;
+  } else {
+    router.push({ path: "/" });
+  }
+};
+onMounted(() => {
+  window.localStorage.setItem("isCnlive", true);
+  fetch("http://systk.cnlive.com/ocms/.content/function_provider/menu.json", {
+    method: "get",
+  })
+    .then((data) => data.json())
+    .then((res) => {
+      menu.data = res?.menu;
+    });
+});
+</script>
+
+<template>
+  <div class="cnlive">
+    <div class="cnlive-nav">
+      <nav class="gtco-nav clearfix" role="navigation">
+        <div class="wrap">
+          <div id="gtco-logo">
+            <a href="http://cnlive.com/">
+              <img
+                src="https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/logo.png"
+                alt=""
+              />
+            </a>
+          </div>
+
+          <div class="cnlive-list">
+            <el-dropdown
+              v-for="(item, index) in menu.data"
+              :key="index"
+              @command="handleCommand"
+            >
+              <span>
+                {{ item.title }}
+                <el-icon class="el-icon--right"> </el-icon>
+              </span>
+              <template #dropdown v-if="item.children.length">
+                <el-dropdown-menu v-if="item.children.length">
+                  <el-dropdown-item
+                    v-for="(ele, i) in item.children"
+                    :key="i"
+                    :command="ele.url"
+                    >{{ ele.title }}</el-dropdown-item
+                  >
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+
+          <div class="cnlive-download">
+            <router-link :to="{ path: '#' }">下载网家家APP</router-link>
+          </div>
+        </div>
+      </nav>
+    </div>
+
+    <div class="cnlive-main">
+      <div class="cnlive-main-board">
+        <div class="cnlive-main-board-form">
+          <div class="cnlive-main-board-form-title">
+            <h3>智慧社区平台</h3>
+          </div>
+          <div class="cnlive-main-board-form-input">
+            <el-form
+              :inline="true"
+              :model="loginForm"
+              ref="ruleFormRef"
+              auto-complete="on"
+              label-position="left"
+              label-width="120px"
+            >
+              <el-row>
+                <el-form-item prop="userName" style="width: 358px">
+                  <el-input
+                    v-model.trim="loginForm.userName"
+                    placeholder="请输入手机号"
+                    maxlength="11"
+                    :validate-event="false"
+                    tabindex="1"
+                    type="text"
+                    auto-complete="off"
+                    clearable
+                    class="cnlive-main-board-form-input-item cnlive-phone"
+                  />
+                </el-form-item>
+              </el-row>
+              <el-form-item prop="password" style="width: 358px">
+                <el-input
+                  v-model.trim="loginForm.password"
+                  placeholder="请输入密码"
+                  :validate-event="false"
+                  maxlength="15"
+                  tabindex="2"
+                  :show-password="true"
+                  clearable
+                  type="password"
+                  auto-complete="off"
+                  @keyup.enter.native="submitForm(ruleFormRef)"
+                  class="cnlive-main-board-form-input-item cnlive-password"
+                >
+                </el-input>
+                <div class="cnlive-error">
+                  <WarningFilled v-show="errorMsg.show" />
+                  <span class="cnlive-error-text" v-show="errorMsg.show">
+                    {{ errorMsg.text }}</span
+                  >
+                </div>
+              </el-form-item>
+              <el-form-item style="width: 358px">
+                <el-button
+                  type="primary"
+                  @click.prevent="submitForm(ruleFormRef)"
+                  style="width: 100%"
+                  :loading="loading"
+                  :disabled="!loginForm.password || !loginForm.userName"
+                  class="cnlive-main-board-form-input-item cnlive-submit"
+                  >登录</el-button
+                >
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+        <div class="cnlive-main-board-img">
+          <img
+            src="https://wjjtest.ys2.cnliveimg.com/802/img_new/1650874065176.png"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="cnlive-footer">
+      <p>
+        网家家APP、Cnlive.com 《信息网络传播视听节目许可证》，许可证号：0105123
+      </p>
+      <p>京ICP证090477号、京ICP备11041453号-1、京公网安备11010802024488号</p>
+      <p>
+        京网文[2018]6278-488号、社会信用代码91110000667507432R、食品经营许可证号JY11105010738621
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.cnlive {
+  background-color: #f6f7f9;
+  &-nav {
+    .gtco-nav {
+      top: 0;
+      margin: 0;
+      width: 100%;
+      padding: 20px 0;
+      z-index: 1001;
+      position: initial;
+      height: 106px;
+      background-color: #feffff;
+      .wrap {
+        width: 1346px;
+        margin: 0 auto;
+        #gtco-logo {
+          width: 200px;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          float: left;
+          font-size: 20px;
+          margin: 0;
+          // margin-right: 88px;
+          padding: 0;
+          text-transform: uppercase;
+        }
+        .cnlive-list {
+          float: left;
+          margin-top: 20px;
+          .el-dropdown {
+            margin-left: 60px;
+            font-size: 20px;
+            color: #333333;
+            line-height: 33px;
+          }
+        }
+        .cnlive-download {
+          width: 170px;
+          height: 46px;
+          margin-top: 10px;
+          text-align: center;
+          font-size: 18px;
+          padding: 0;
+          color: white;
+          line-height: 46px;
+          background-color: #f5a623;
+          border-radius: 24px;
+          float: right;
+        }
+      }
+    }
+  }
+  &-main {
+    margin-top: 100px;
+    &-board {
+      margin: 0 auto;
+      height: 688px;
+      width: 1346px;
+      display: flex;
+      background-color: white;
+      box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
+      &-form {
+        width: 658px;
+        padding-left: 151px;
+        &-title {
+          color: cyan;
+          h3 {
+            padding-bottom: 45px;
+            margin-top: 190px;
+            line-height: 42px;
+            font-weight: 600;
+            color: #171717;
+            font-size: 30px;
+            text-align: left;
+            background: url(https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/huang-icon.png)
+              0 50px no-repeat;
+            background-size: 27px 5px;
+          }
+        }
+        &-input {
+          &-item {
+            border-radius: 24px;
+            .el-input__inner {
+              border-radius: 24px;
+              border-color: #d8d8d8;
+              &:focus {
+                border-color: #17b794;
+              }
+            }
+          }
+        }
+      }
+      &-img {
+        width: 688px;
+      }
+    }
+  }
+  &-footer {
+    padding-bottom: 50px;
+    padding-top: 50px;
+    margin: 0 auto;
+    text-align: center;
+    font-size: 16px;
+    color: #666666;
+    font-weight: 400;
+  }
+}
+.cnlive-submit {
+  background-color: #1352d3;
+}
+.cnlive-error {
+  color: #ff3834;
+  font-size: 16px;
+  margin-top: 10px;
+  line-height: 22px;
+  padding-left: 8px;
+  position: relative;
+  &-text {
+    margin-left: 28px;
+  }
+  svg {
+    width: 20px;
+    height: 20px;
+    position: absolute;
+  }
+}
+.clearfix {
+  zoom: 1;
+}
+.text-left {
+  text-align: left;
+}
+</style>
@@ -3,7 +3,7 @@ import { login, menuData } from &quot;@/api/user/login&quot;;
 // import * as store from "@/pinia/index";
 import router from "@/router/index";
 import { useLoginStore } from "@/pinia/login";
-import { reactive, ref, getCurrentInstance } from "vue";
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import type { ElForm } from "element-plus";
 import { UserFilled, Lock } from "@element-plus/icons-vue";
 const {
@@ -75,6 +75,9 @@ const getMenu = async () =&gt; {
     console.log(e);
   }
 };
+onMounted(() => {
+  window.localStorage.setItem('isCnlive', false)
+})
 </script>
  
 <template>