演示用登录页创建

shuishen

2024-03-16 959327f0195e46a763cb771116ce93291b386376

演示用登录页创建

 src/page/index/top/index.vue

@@ -246,9 +246,10 @@
                this.$store.dispatch("LogOut").then(() => {
                    resetRouter()


                    if (this.webType == 'default') {
                        this.$router.push({ path: "/login" })
                    } else if (this.webType == 'govern') {
                        this.$router.push({ path: "/governLogin" })
                    } else {
                        this.$router.push({ path: "/tenementLogin" })
                    }

 src/page/login/govern.vue

New file
@@ -0,0 +1,154 @@
<template>
    <div class="login-container" ref="login" @keyup.enter.native="handleLogin">
        <top-color v-show="false"></top-color>

        <div class="login-weaper animated bounceInDown">
            <div class="login-left">
                <div class="login-time">
                    {{ time }}
                </div>
                <!-- <img class="img" src="/img/logo.png" alt=""> -->
                <!-- <p class="title">{{ $t('login.info') }}</p> -->
                <p class="title">社区网格治理平台</p>
            </div>
            <div class="login-border">
                <div class="login-main">

                    <h4 class="login-title">
                        {{ $t('login.title') }}
                        <!-- <top-lang></top-lang> -->
                    </h4>
                    <userLogin v-if="activeName === 'user'"></userLogin>
                    <!-- <codeLogin v-else-if="activeName==='code'"></codeLogin> -->
                    <!-- <thirdLogin v-else-if="activeName==='third'"></thirdLogin> -->
                    <div class="login-menu">
                        <!-- <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a> -->
                        <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
                        <!-- <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a> -->
                        <!-- <a :href="website.ssoUrl + website.redirectUri">{{ $t('login.ssoLogin') }}</a> -->
                    </div>
                </div>

            </div>
        </div>

        <div class="copyright-box">
            <span>版权所有：上饶市住房和城乡建设局</span> <span>技术支持：上饶国控数字科技有限公司</span>
        </div>
    </div>
</template>
<script>
import { setStore, getStore } from "@/util/store"
import Watermark from "@/warterMarkVUE"
import userLogin from "./userlogin"
import codeLogin from "./codelogin"
import thirdLogin from "./thirdlogin"
import { mapGetters } from "vuex"
import { dateFormat } from "@/util/date"
import { validatenull } from "@/util/validate"
import topLang from "@/page/index/top/top-lang"
import topColor from "@/page/index/top/top-color"
import { getQueryString, getTopUrl } from "@/util/util"

export default {
    name: "login",
    components: {
        userLogin,
        codeLogin,
        thirdLogin,
        topLang,
        topColor
    },
    data () {
        return {
            time: "",
            activeName: "user",
            socialForm: {
                tenantId: "000000",
                source: "",
                code: "",
                state: "",
            }
        }
    },
    watch: {
        $route () {
            this.handleLogin()
        }
    },
    created () {
        document.title = "社区网格治理平台"
        setStore({
            name: "webTitle",
            content: '社区网格治理平台',
        })

        setStore({
            name: "webType",
            content: 'govern',
        })

        Watermark.remove()

        this.handleLogin()
        this.getTime()
    },
    mounted () {
    },
    computed: {
        ...mapGetters(["website", "tagWel"])
    },
    props: [],
    methods: {
        getTime () {
            setInterval(() => {
                this.time = dateFormat(new Date())
            }, 1000)
        },
        handleLogin () {
            const topUrl = getTopUrl()
            const redirectUrl = "/oauth/redirect/"
            const ssoCode = "?code="
            this.socialForm.source = getQueryString("source")
            this.socialForm.code = getQueryString("code")
            this.socialForm.state = getQueryString("state")
            if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
                let source = topUrl.split("?")[0]
                source = source.split(redirectUrl)[1]
                this.socialForm.source = source
            }
            if (topUrl.includes(redirectUrl) && !validatenull(this.socialForm.source) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
                const loading = this.$loading({
                    lock: true,
                    text: '第三方系统登录中,请稍后。。。',
                    spinner: "el-icon-loading"
                })
                this.$store.dispatch("LoginBySocial", this.socialForm).then(() => {
                    window.location.href = topUrl.split(redirectUrl)[0]
                    this.$router.push({ path: this.tagWel.value })
                    loading.close()
                }).catch(() => {
                    loading.close()
                })
            } else if (!topUrl.includes(redirectUrl) && !validatenull(this.socialForm.code) && !validatenull(this.socialForm.state)) {
                const loading = this.$loading({
                    lock: true,
                    text: '单点系统登录中,请稍后。。。',
                    spinner: "el-icon-loading"
                })
                this.$store.dispatch("LoginBySso", this.socialForm).then(() => {
                    window.location.href = topUrl.split(ssoCode)[0]
                    this.$router.push({ path: this.tagWel.value })
                    loading.close()
                }).catch(() => {
                    loading.close()
                })
            }
        }
    }
}
</script>

<style lang="scss">
@import "@/styles/login.scss";
</style>

 src/router/page/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-12-14 17:10:00
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-01-22 12:40:01
 * @LastEditTime: 2024-03-16 15:32:17
 * @FilePath: \jczz_web\src\router\page\index.js
 * @Description:
 *
@@ -33,6 +33,19 @@
      isAuth: false,
    },
  },

  {
    path: "/governLogin",
    name: "登录页",
    component: () =>
      import(/* webpackChunkName: "page" */ "@/page/login/govern.vue"),
    meta: {
      keepAlive: true,
      isTab: false,
      isAuth: false,
    },
  },
  
  {
    path: "/lock",
    name: "锁屏页",