cnlive_project / cnlive-community-web-vue · Commits

Commit fcd34044e9f84f9a729c388d5a7bda7c628b2ddc

Authored by 杨泽宇
1 parent cb8e8ac6

中国网传播登录页

Inline Side-by-side
Showing 6 changed files with 395 additions and 5 deletions
src/api/request.ts
  View file @fcd3404
@@ -38,8 +38,10 @@ instance.interceptors.response.use( @@ -38,8 +38,10 @@ instance.interceptors.response.use(
38 ElMessage.error(response?.data?.errorMessage || '登录失效'); 38 ElMessage.error(response?.data?.errorMessage || '登录失效');
39 // store.family.loginStore().removeToken() 39 // store.family.loginStore().removeToken()
40 useLoginStore()?.removeToken() 40 useLoginStore()?.removeToken()
  41 + // TODOS 这里需要区分中国网环境和社区环境
  42 + let loginPath: string = window.localStorage.getItem('isCnlive') === 'true'? '/enter': '/login'
41 router.replace({ 43 router.replace({
42 - path: '/login' 44 + path: loginPath
43 }) 45 })
44 break; 46 break;
45 case 500: 47 case 500:
src/pinia/login.ts
  View file @fcd3404
@@ -48,9 +48,12 @@ export const useLoginStore = defineStore({ @@ -48,9 +48,12 @@ export const useLoginStore = defineStore({
48 removeToken() { 48 removeToken() {
49 logout() 49 logout()
50 this.token = '' 50 this.token = ''
  51 + let loginPath: string = window.localStorage.getItem('isCnlive') === 'true'? '/enter': '/login'
  52 + console.log(loginPath)
51 window.localStorage.clear() 53 window.localStorage.clear()
  54 + window.localStorage.removeItem('pinia')
52 setTimeout(() => { 55 setTimeout(() => {
53 - router.replace('/login') 56 + router.replace(loginPath)
54 }, 500) 57 }, 500)
55 } 58 }
56 }, 59 },
src/router/index.ts
  View file @fcd3404
@@ -20,6 +20,11 @@ const routes: Array<any> = [ @@ -20,6 +20,11 @@ const routes: Array<any> = [
20 name: 'Login', 20 name: 'Login',
21 component: () => import(/* webpackChunkName: "About" */ '@/views/user/login.vue') 21 component: () => import(/* webpackChunkName: "About" */ '@/views/user/login.vue')
22 }, 22 },
  23 + {
  24 + path: '/enter',
  25 + name: 'Enter',
  26 + component: () => import(/* webpackChunkName: "About" */ '@/views/user/cnlive_login.vue')
  27 + },
23 { path: '/', redirect: { path: '/dashboard' } }, 28 { path: '/', redirect: { path: '/dashboard' } },
24 { 29 {
25 path: '/', 30 path: '/',
src/utils/progress.ts
  View file @fcd3404
@@ -7,10 +7,12 @@ import { useLoginStore } from '@/pinia/login'; @@ -7,10 +7,12 @@ import { useLoginStore } from '@/pinia/login';
7 NProgress.configure({ showSpinner: false }); 7 NProgress.configure({ showSpinner: false });
8 8
9 router.beforeEach((to: any, from: any, next: any) => { 9 router.beforeEach((to: any, from: any, next: any) => {
  10 + console.log(window.localStorage.getItem('isCnlive'))
10 NProgress.start(); 11 NProgress.start();
11 // const hasToken = store.family.loginStore().token; 12 // const hasToken = store.family.loginStore().token;
12 const hasToken = useLoginStore()?.$state?.token 13 const hasToken = useLoginStore()?.$state?.token
13 - const whiteList = ['/login']; 14 + const whiteList = ['/login', '/enter'];
  15 + // TODOS 这里需要把中国网的登录页也加到白名单里
14 16
15 // 页面标题设置 17 // 页面标题设置
16 globalThis.document.title = to.meta.title? to.meta.title: import.meta.env.VITE_APP_TITLE; 18 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) => { @@ -30,7 +32,9 @@ router.beforeEach((to: any, from: any, next: any) => {
30 if (from.path !== '/') { 32 if (from.path !== '/') {
31 console.log('请重新登录') 33 console.log('请重新登录')
32 } 34 }
33 - next({ path: '/login' }) 35 + // TODOS 这里需要区分社区环境还是中国网环境
  36 + let loginPath: string = window.localStorage.getItem('isCnlive') === 'true'? '/enter': '/login'
  37 + next({ path: loginPath })
34 NProgress.done() 38 NProgress.done()
35 } 39 }
36 } 40 }
src/views/user/cnlive_login.vue 0 → 100644
  View file @fcd3404
  1 +<script setup lang="ts">
  2 +import { login, menuData } from "@/api/user/login";
  3 +import router from "@/router/index";
  4 +import { useLoginStore } from "@/pinia/login";
  5 +import { reactive, ref, getCurrentInstance, onMounted } from "vue";
  6 +import axios from "axios";
  7 +import load from "@/components/Tinymce/settings/load";
  8 +import { WarningFilled } from "@element-plus/icons-vue";
  9 +import type { ElForm } from "element-plus";
  10 +const {
  11 + appContext: {
  12 + config: { globalProperties },
  13 + },
  14 +} = getCurrentInstance();
  15 +interface Login {
  16 + userName: string;
  17 + password: string;
  18 +}
  19 +/**
  20 + * 登录表单数据
  21 + */
  22 +const loginForm: Login = reactive({
  23 + userName: "",
  24 + password: "",
  25 +});
  26 +
  27 +let loading = ref(false);
  28 +let errorMsg = reactive({
  29 + text: "手机号或密码错误",
  30 + show: false,
  31 +});
  32 +let menu = reactive({
  33 + data: [],
  34 +});
  35 +/**
  36 + * 登录框上面标题
  37 + */
  38 +const title = ref(import.meta.env.VITE_APP_TITLE).value;
  39 +const ruleFormRef = ref<InstanceType<typeof ElForm>>();
  40 +/**
  41 + * 表单提交
  42 + */
  43 +const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  44 + loading.value = true;
  45 + if (!formEl) return;
  46 + formEl.validate((valid) => {
  47 + if (valid) {
  48 + login(loginForm)
  49 + .then((res) => {
  50 + if (res?.data) {
  51 + globalProperties.$message.success("登录成功");
  52 + // 登录成功返回的参数含义，到pinia/modules/login.ts中查看
  53 + // store.family.loginStore().setUserInfo(res?.data?.data);
  54 + useLoginStore()?.setUserInfo(res?.data?.data);
  55 + errorMsg.show = false;
  56 + getMenu().then((res) => {
  57 + setTimeout(() => {
  58 + router.push({ path: "/" });
  59 + }, 1000);
  60 + });
  61 + }
  62 + })
  63 + .catch((error) => {
  64 + console.log(error);
  65 + errorMsg.show = true;
  66 + })
  67 + .finally(() => {
  68 + loading.value = false;
  69 + });
  70 + } else {
  71 + loading.value = false;
  72 + console.log("error");
  73 + }
  74 + });
  75 +};
  76 +/**
  77 + * 获取权限菜单
  78 + */
  79 +const getMenu = async () => {
  80 + try {
  81 + let res = await menuData();
  82 + useLoginStore()?.setMenuList(res?.data?.data);
  83 + } catch (e) {
  84 + console.log(e);
  85 + }
  86 +};
  87 +/**
  88 + * 下拉菜单点击响应
  89 + */
  90 +const handleCommand = (data: any) => {
  91 + if (data) {
  92 + location.href = data;
  93 + } else {
  94 + router.push({ path: "/" });
  95 + }
  96 +};
  97 +onMounted(() => {
  98 + window.localStorage.setItem("isCnlive", true);
  99 + fetch("http://systk.cnlive.com/ocms/.content/function_provider/menu.json", {
  100 + method: "get",
  101 + })
  102 + .then((data) => data.json())
  103 + .then((res) => {
  104 + menu.data = res?.menu;
  105 + });
  106 +});
  107 +</script>
  108 +
  109 +<template>
  110 + <div class="cnlive">
  111 + <div class="cnlive-nav">
  112 + <nav class="gtco-nav clearfix" role="navigation">
  113 + <div class="wrap">
  114 + <div id="gtco-logo">
  115 + <a href="http://cnlive.com/">
  116 + <img
  117 + src="https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/logo.png"
  118 + alt=""
  119 + />
  120 + </a>
  121 + </div>
  122 +
  123 + <div class="cnlive-list">
  124 + <el-dropdown
  125 + v-for="(item, index) in menu.data"
  126 + :key="index"
  127 + @command="handleCommand"
  128 + >
  129 + <span>
  130 + {{ item.title }}
  131 + <el-icon class="el-icon--right"> </el-icon>
  132 + </span>
  133 + <template #dropdown v-if="item.children.length">
  134 + <el-dropdown-menu v-if="item.children.length">
  135 + <el-dropdown-item
  136 + v-for="(ele, i) in item.children"
  137 + :key="i"
  138 + :command="ele.url"
  139 + >{{ ele.title }}</el-dropdown-item
  140 + >
  141 + </el-dropdown-menu>
  142 + </template>
  143 + </el-dropdown>
  144 + </div>
  145 +
  146 + <div class="cnlive-download">
  147 + <router-link :to="{ path: '#' }">下载网家家APP</router-link>
  148 + </div>
  149 + </div>
  150 + </nav>
  151 + </div>
  152 +
  153 + <div class="cnlive-main">
  154 + <div class="cnlive-main-board">
  155 + <div class="cnlive-main-board-form">
  156 + <div class="cnlive-main-board-form-title">
  157 + <h3>智慧社区平台</h3>
  158 + </div>
  159 + <div class="cnlive-main-board-form-input">
  160 + <el-form
  161 + :inline="true"
  162 + :model="loginForm"
  163 + ref="ruleFormRef"
  164 + auto-complete="on"
  165 + label-position="left"
  166 + label-width="120px"
  167 + >
  168 + <el-row>
  169 + <el-form-item prop="userName" style="width: 358px">
  170 + <el-input
  171 + v-model.trim="loginForm.userName"
  172 + placeholder="请输入手机号"
  173 + maxlength="11"
  174 + :validate-event="false"
  175 + tabindex="1"
  176 + type="text"
  177 + auto-complete="off"
  178 + clearable
  179 + class="cnlive-main-board-form-input-item cnlive-phone"
  180 + />
  181 + </el-form-item>
  182 + </el-row>
  183 + <el-form-item prop="password" style="width: 358px">
  184 + <el-input
  185 + v-model.trim="loginForm.password"
  186 + placeholder="请输入密码"
  187 + :validate-event="false"
  188 + maxlength="15"
  189 + tabindex="2"
  190 + :show-password="true"
  191 + clearable
  192 + type="password"
  193 + auto-complete="off"
  194 + @keyup.enter.native="submitForm(ruleFormRef)"
  195 + class="cnlive-main-board-form-input-item cnlive-password"
  196 + >
  197 + </el-input>
  198 + <div class="cnlive-error">
  199 + <WarningFilled v-show="errorMsg.show" />
  200 + <span class="cnlive-error-text" v-show="errorMsg.show">
  201 + {{ errorMsg.text }}</span
  202 + >
  203 + </div>
  204 + </el-form-item>
  205 + <el-form-item style="width: 358px">
  206 + <el-button
  207 + type="primary"
  208 + @click.prevent="submitForm(ruleFormRef)"
  209 + style="width: 100%"
  210 + :loading="loading"
  211 + :disabled="!loginForm.password || !loginForm.userName"
  212 + class="cnlive-main-board-form-input-item cnlive-submit"
  213 + >登录</el-button
  214 + >
  215 + </el-form-item>
  216 + </el-form>
  217 + </div>
  218 + </div>
  219 + <div class="cnlive-main-board-img">
  220 + <img
  221 + src="https://wjjtest.ys2.cnliveimg.com/802/img_new/1650874065176.png"
  222 + />
  223 + </div>
  224 + </div>
  225 + </div>
  226 +
  227 + <div class="cnlive-footer">
  228 + <p>
  229 + 网家家APP、Cnlive.com 《信息网络传播视听节目许可证》，许可证号：0105123
  230 + </p>
  231 + <p>京ICP证090477号、京ICP备11041453号-1、京公网安备11010802024488号</p>
  232 + <p>
  233 + 京网文[2018]6278-488号、社会信用代码91110000667507432R、食品经营许可证号JY11105010738621
  234 + </p>
  235 + </div>
  236 + </div>
  237 +</template>
  238 +
  239 +<style lang="scss">
  240 +.cnlive {
  241 + background-color: #f6f7f9;
  242 + &-nav {
  243 + .gtco-nav {
  244 + top: 0;
  245 + margin: 0;
  246 + width: 100%;
  247 + padding: 20px 0;
  248 + z-index: 1001;
  249 + position: initial;
  250 + height: 106px;
  251 + background-color: #feffff;
  252 + .wrap {
  253 + width: 1346px;
  254 + margin: 0 auto;
  255 + #gtco-logo {
  256 + width: 200px;
  257 + display: flex;
  258 + flex-direction: row;
  259 + align-items: center;
  260 + float: left;
  261 + font-size: 20px;
  262 + margin: 0;
  263 + // margin-right: 88px;
  264 + padding: 0;
  265 + text-transform: uppercase;
  266 + }
  267 + .cnlive-list {
  268 + float: left;
  269 + margin-top: 20px;
  270 + .el-dropdown {
  271 + margin-left: 60px;
  272 + font-size: 20px;
  273 + color: #333333;
  274 + line-height: 33px;
  275 + }
  276 + }
  277 + .cnlive-download {
  278 + width: 170px;
  279 + height: 46px;
  280 + margin-top: 10px;
  281 + text-align: center;
  282 + font-size: 18px;
  283 + padding: 0;
  284 + color: white;
  285 + line-height: 46px;
  286 + background-color: #f5a623;
  287 + border-radius: 24px;
  288 + float: right;
  289 + }
  290 + }
  291 + }
  292 + }
  293 + &-main {
  294 + margin-top: 100px;
  295 + &-board {
  296 + margin: 0 auto;
  297 + height: 688px;
  298 + width: 1346px;
  299 + display: flex;
  300 + background-color: white;
  301 + box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
  302 + &-form {
  303 + width: 658px;
  304 + padding-left: 151px;
  305 + &-title {
  306 + color: cyan;
  307 + h3 {
  308 + padding-bottom: 45px;
  309 + margin-top: 190px;
  310 + line-height: 42px;
  311 + font-weight: 600;
  312 + color: #171717;
  313 + font-size: 30px;
  314 + text-align: left;
  315 + background: url(https://cnlive-resweb.ks3-cn-beijing.ksyuncs.com/sites/cnlive_web/new-images/huang-icon.png)
  316 + 0 50px no-repeat;
  317 + background-size: 27px 5px;
  318 + }
  319 + }
  320 + &-input {
  321 + &-item {
  322 + border-radius: 24px;
  323 + .el-input__inner {
  324 + border-radius: 24px;
  325 + border-color: #d8d8d8;
  326 + &:focus {
  327 + border-color: #17b794;
  328 + }
  329 + }
  330 + }
  331 + }
  332 + }
  333 + &-img {
  334 + width: 688px;
  335 + }
  336 + }
  337 + }
  338 + &-footer {
  339 + padding-bottom: 50px;
  340 + padding-top: 50px;
  341 + margin: 0 auto;
  342 + text-align: center;
  343 + font-size: 16px;
  344 + color: #666666;
  345 + font-weight: 400;
  346 + }
  347 +}
  348 +.cnlive-submit {
  349 + background-color: #1352d3;
  350 +}
  351 +.cnlive-error {
  352 + color: #ff3834;
  353 + font-size: 16px;
  354 + margin-top: 10px;
  355 + line-height: 22px;
  356 + padding-left: 8px;
  357 + position: relative;
  358 + &-text {
  359 + margin-left: 28px;
  360 + }
  361 + svg {
  362 + width: 20px;
  363 + height: 20px;
  364 + position: absolute;
  365 + }
  366 +}
  367 +.clearfix {
  368 + zoom: 1;
  369 +}
  370 +.text-left {
  371 + text-align: left;
  372 +}
  373 +</style>
src/views/user/login.vue
  View file @fcd3404
@@ -3,7 +3,7 @@ import { login, menuData } from &quot;@/api/user/login&quot;; @@ -3,7 +3,7 @@ import { login, menuData } from &quot;@/api/user/login&quot;;
3 // import * as store from "@/pinia/index"; 3 // import * as store from "@/pinia/index";
4 import router from "@/router/index"; 4 import router from "@/router/index";
5 import { useLoginStore } from "@/pinia/login"; 5 import { useLoginStore } from "@/pinia/login";
6 -import { reactive, ref, getCurrentInstance } from "vue"; 6 +import { reactive, ref, getCurrentInstance, onMounted } from "vue";
7 import type { ElForm } from "element-plus"; 7 import type { ElForm } from "element-plus";
8 import { UserFilled, Lock } from "@element-plus/icons-vue"; 8 import { UserFilled, Lock } from "@element-plus/icons-vue";
9 const { 9 const {
@@ -75,6 +75,9 @@ const getMenu = async () =&gt; { @@ -75,6 +75,9 @@ const getMenu = async () =&gt; {
75 console.log(e); 75 console.log(e);
76 } 76 }
77 }; 77 };
  78 +onMounted(() => {
  79 + window.localStorage.setItem('isCnlive', false)
  80 +})
78 </script> 81 </script>
79 82
80 <template> 83 <template>