登录接口以及首页优化

src/api/login.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 登录方法
+export function login(data) {
+    return request({
+        url: '/auth/login',
+        headers: {
+            isToken: false,
+            repeatSubmit: false,
+        },
+        method: 'post',
+        data: data,
+    })
+}
+
+export function isAdmin(data) {
+    return request({
+        url: '/auth/isAdmin',
+        headers: {
+            isToken: false,
+            repeatSubmit: false,
+        },
+        method: 'post',
+        data: data,
+    })
+}
+
+// 退出方法
+export function logout() {
+    return request({
+        url: '/auth/logout',
+        method: 'post',
+    })
+}

src/router/index.js

@@ -4,14 +4,10 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-    // {
-    //     path: '/demo',
-    //     name: 'index',
-    //     component: () => import('../views/index.vue'),
-    // },
     {
         path: '/',
         name: 'index',
+        redirect: '/login',
         component: () => import('../views/index.vue'),
     },
     {

src/store/modules/user.js

@@ -1,5 +1,5 @@
-// import { login, logout } from '@/api/login'
+import { login, isAdmin, logout } from '@/api/login'
-import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
+import { getToken, setToken, removeToken } from '@/utils/auth'
 
 // import { encrypt } from '@/utils/jsencrypt'
 
@@ -16,50 +16,37 @@ const user = {
 
     actions: {
         // 登录
-        async Login({ commit }, userInfo) {
+        Login({ commit }, userInfo) {
-            // const username = userInfo.username.trim()
+            return login(userInfo)
-            // const password = encrypt(userInfo.password)
+                .then((res) => {
-            // // const password = userInfo.password
+                    const { access_token } = res.data
-            // const code = userInfo.code
+                    setToken(access_token)
-            // const uuid = userInfo.uuid
+                    commit('SET_TOKEN', access_token)
-            // const textCode = userInfo.textCode
+                    return res
-            // return new Promise((resolve, reject) => {
+                })
-            //     login(username, password, code, uuid, textCode)
+                .catch((error) => Promise.reject(error))
-            //         .then((res) => {
+        },
-            //             let data = res.data
+
-            //             localStorage.setItem(
+        IsAdmin({ commit }, userInfo) {
-            //                 'isCode',
+            console.log(commit)
-            //                 data.login_user.forceChangePwd || '',
+            return isAdmin(userInfo)
-            //             )
+                .then((res) => res)
-            //             setToken(data.access_token)
+                .catch((error) => Promise.reject(error))
-            //             commit('SET_TOKEN', data.access_token)
-            //             localStorage.setItem('token', data.access_token)
-            //             setExpiresIn(data.expires_in)
-            //             commit('SET_EXPIRES_IN', data.expires_in)
-            //             resolve()
-            //         })
-            //         .catch((error) => {
-            //             reject(error)
-            //         })
-            // })
         },
 
         // 退出系统
         LogOut({ commit, state }) {
-            // return new Promise((resolve, reject) => {
+            return new Promise((resolve, reject) => {
-            //     logout(state.token)
+                logout(state.token)
-            //         .then(() => {
+                    .then(() => {
-            //             commit('SET_TOKEN', '')
+                        commit('SET_TOKEN', '')
-            //             commit('SET_ROLES', [])
+                        removeToken()
-            //             commit('SET_PERMISSIONS', [])
+                        resolve()
-            //             removeToken()
+                    })
-            //             localStorage.removeItem('isCode')
+                    .catch((error) => {
-            //             resolve()
+                        reject(error)
-            //         })
+                    })
-            //         .catch((error) => {
+            })
-            //             reject(error)
-            //         })
-            // })
         },
     },
 }

src/views/home-video/components/left-one-model.vue

@@ -100,7 +100,7 @@ export default {
             background-size: 100% 100%;
             transform: scale(1.5);
             position: relative;
-            z-index: 9999;
+            z-index: 9;
 
             div {
                 width: 14px;
@@ -147,7 +147,7 @@ export default {
         align-items: center;
         justify-content: space-around;
         font-size: 16px;
-        z-index: 9999;
+        z-index: 9;
 
         div {
             display: flex;

src/views/home/index.vue

@@ -20,17 +20,19 @@
 
                 <div class="title-name"> 智慧工地 </div>
 
-                <div class="time-box">
+                <div class="weather-box">
-                    <img src="../../assets/image/home/time_icon.png" alt="" />
+                    <span>今天天气</span>
-                    <div>
+                    <img src="../../assets/image/home/sunny.png" alt="" />
-                        <span class="text">
+                    <span>晴 </span>
-                            <span>{{ dateYear }}</span>
+
-                            <span>{{ dateWeek }} </span>
+                    <img src="../../assets/image/home/temperature.png" alt="" />
-                            <span style="font-size: 20px; font-weight: bold">
+                    <span> 16 ~ 30℃</span>
-                                {{ dateDay }}
+
-                            </span>
+                    <img
-                        </span>
+                        src="../../assets/image/home/exit.png"
-                    </div>
+                        alt=""
+                        @click="onHandleLogout"
+                    />
                 </div>
             </div>
 
@@ -297,6 +299,21 @@ export default {
                 this.navShow = false
             }
         },
+
+        // 退出登录
+        async onHandleLogout() {
+            this.$confirm('确定退出系统吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(() => {
+                    this.$store.dispatch('LogOut').then(() => {
+                        location.href = '/'
+                    })
+                })
+                .catch(() => {})
+        },
     },
 }
 </script>
@@ -328,14 +345,18 @@ export default {
         height: 83px;
         background: url('../../assets/image/home/title_bg.png') no-repeat;
         background-size: 100% 100%;
-        display: flex;
+        position: relative;
-        justify-content: center;
+        // display: flex;
-        align-items: center;
+        // justify-content: center;
+        // align-items: center;
         background-color: #031837;
 
         .title-name {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             padding-bottom: 24px;
-            margin: 0 17%;
             font-size: 28px;
             color: #fff;
             letter-spacing: 4px;
@@ -343,6 +364,10 @@ export default {
         }
 
         & .time-box {
+            position: absolute;
+            top: 50%;
+            left: 12%;
+            transform: translateY(-50%);
             color: #fff;
             display: flex;
             align-items: center;
@@ -357,6 +382,35 @@ export default {
                 display: inline-block;
             }
         }
+
+        .weather-box {
+            position: absolute;
+            top: 50%;
+            right: 12%;
+            transform: translateY(-50%);
+            color: #fff;
+            display: flex;
+            align-items: center;
+
+            img {
+                width: 20px;
+                height: 20px;
+            }
+
+            & span:first-child {
+                margin-right: 18px;
+            }
+            & span:nth-child(3) {
+                margin: 0 18px;
+            }
+            & span:nth-child(5) {
+                margin: 0 18px;
+            }
+            & img:nth-child(6) {
+                transform: translateX(160px);
+                cursor: pointer;
+            }
+        }
     }
 
     .content {

src/views/index.vue

@@ -3,7 +3,7 @@ export default {
     created() {
         // const { params, query } = this.$route
         // const { path } = params
-        this.$router.replace({ path: '/login' })
+        this.$router.replace({ path: `${this.$router.options.base}/login` })
     },
     render: function (h) {
         return h() // avoid warning message

src/views/login/index.vue

@@ -3,17 +3,16 @@
     <div class="login-container" ref="appRef">
         <div class="login-form">
             <h3>智慧工地</h3>
-
             <div class="form-container">
-                <el-form>
+                <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
-                    <el-form-item>
+                    <el-form-item prop="username">
                         <el-input
                             placeholder="请输入用户名"
                             v-model="loginForm.username"
                             prefix-icon="el-icon-user-solid"
                         />
                     </el-form-item>
-                    <el-form-item>
+                    <el-form-item prop="password">
                         <el-input
                             prefix-icon="el-icon-lock"
                             placeholder="请输入密码"
@@ -27,7 +26,9 @@
                         />
                     </el-form-item>
                     <el-form-item>
-                        <el-checkbox> 记住密码 </el-checkbox>
+                        <el-checkbox v-model="rememberPassWord">
+                            记住密码
+                        </el-checkbox>
                     </el-form-item>
                     <el-form-item>
                         <el-button
@@ -46,22 +47,126 @@
 
 <script>
 import drawMixin from '../../utils/drawMixin'
+import Cookies from 'js-cookie'
 export default {
     mixins: [drawMixin],
     data() {
         return {
             loginForm: {
-                username: '',
+                code: '',
+                loginType: 'USERNAME_PASSWORD',
                 password: '',
+                phoneUuid: '',
+                username: '',
+                uuid: '',
+                verificationCode: '',
             },
+            rememberPassWord: false,
+            loginRules: {
+                username: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入您的账号',
+                    },
+                ],
+                password: [
+                    {
+                        required: true,
+                        trigger: 'blur',
+                        message: '请输入您的密码',
+                    },
+                ],
+            },
+            isAdmin: false, // 是否为超级管理员
         }
     },
     methods: {
+        // 登录
         onClickLogin() {
-            console.log('登录')
+            this.$refs.loginForm.validate((valid) => {
+                if (valid) {
+                    this.loading = true
 
-            this.$router.push('/home')
+                    this.$store
+                        .dispatch('IsAdmin', this.loginForm)
+                        .then((res) => {
+                            if (res.data) {
+                                this.isAdmin = res.data
+                                this.$message.success(
+                                    '检测到您是超级管理账号,需进行手机检验',
+                                )
+                            } else {
+                                if (this.rememberPassWord) {
+                                    Cookies.set(
+                                        'username',
+                                        this.loginForm.username,
+                                        {
+                                            expires: 30,
+                                        },
+                                    )
+                                    Cookies.set(
+                                        'password',
+                                        this.loginForm.password,
+                                        {
+                                            expires: 30,
+                                        },
+                                    )
+                                    Cookies.set(
+                                        'rememberMe',
+                                        this.rememberPassWord,
+                                        {
+                                            expires: 30,
+                                        },
+                                    )
+                                } else {
+                                    Cookies.remove('username')
+                                    Cookies.remove('password')
+                                    Cookies.remove('rememberMe')
+                                }
+                                this.$store
+                                    .dispatch('Login', this.loginForm)
+                                    .then((res) => {
+                                        if (res.code === 200) {
+                                            if (res.isLogin) {
+                                                this.$modal
+                                                    .confirm(
+                                                        '账号已在其他地方登录是否继续登录！！！！',
+                                                    )
+                                                    .then(function () {})
+                                                    .then(() => {
+                                                        this.loading = false
+                                                    })
+                                                    .catch(() => {
+                                                        this.loading = false
+                                                    })
+                                            } else {
+                                                this.$router.push({
+                                                    path: '/home',
+                                                })
+                                            }
+                                        }
+                                    })
+                                    .catch(() => {
+                                        this.loading = false
+                                    })
+                            }
+                        })
+                }
+            })
         },
+
+        getCookie() {
+            const username = Cookies.get('username')
+            const password = Cookies.get('password')
+            const rememberMe = Cookies.get('rememberMe')
+            this.loginForm.username = username || ''
+            this.loginForm.password = password || ''
+            this.rememberPassWord = rememberMe === 'true'
+        },
+    },
+    created() {
+        this.getCookie()
     },
 }
 </script>
@@ -70,7 +175,6 @@ export default {
 .login-container {
     width: 100%;
     height: 100%;
-
     background: url('../../assets/image/login/login_bg.png') no-repeat;
     background-size: cover;
 
@@ -82,7 +186,6 @@ export default {
     left: 50%;
     transform: translate(-50%, -50%);
     transform-origin: left top;
-    // overflow: hidden;
 
     .login-form {
         width: 604px;
@@ -91,11 +194,7 @@ export default {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        // position: absolute;
+
-        // top: 50%;
-        // left: 50%;
-        // transform: translate(-50%, -50%);
-        // transform-origin: left top;
         & h3 {
             text-align: center;
             letter-spacing: 2px;
@@ -114,12 +213,12 @@ export default {
         }
 
         .el-form {
-            width: 70%;
+            width: 80%;
             margin: 0 auto;
 
             ::v-deep .el-checkbox__label {
                 color: #f1e2e2;
-                font-size: 18px;
+                font-size: 16px;
             }
         }
     }
@@ -127,29 +226,28 @@ export default {
 
 ::v-deep .el-input__inner {
     background-color: transparent;
-    height: 46px;
+    height: 38px;
     color: #f1e2e2;
-    font-size: 18px;
+    font-size: 16px;
     border: 1px solid #0a76dd;
 }
 
 ::v-deep .el-checkbox__inner {
-    width: 20px;
+    width: 16px;
-    height: 20px;
+    height: 16px;
     background-color: transparent;
-
-    // border: 1px solid #f1e2e2;
 }
 ::v-deep .el-checkbox__inner::after {
-    height: 11px;
+    height: 8px;
-    left: 9px;
+    left: 6px;
+    top: 2px;
 }
 .el-button {
-    font-size: 18px;
+    font-size: 16px;
 }
 
 ::v-deep .el-input__icon {
-    line-height: 46px;
+    line-height: 38px;
-    font-size: 18px;
+    font-size: 16px;
 }
 </style>

vue.config.js

@@ -10,9 +10,8 @@ module.exports = {
     transpileDependencies: [],
     publicPath:
         process.env.VUE_APP_ENV === 'production' ? '/smartSiteScreen' : '/',
-    // 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
+
     outputDir: 'dist',
-    // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
     assetsDir: 'static',
     // 是否开启eslint保存检测，有效值：ture | false | 'error'
     lintOnSave: process.env.NODE_ENV === 'development',
@@ -25,7 +24,7 @@ module.exports = {
         open: true,
         proxy: {
             [process.env.VUE_APP_BASE_API]: {
-                target: 'http://example.com',
+                target: 'http://192.168.0.60:38080',
                 changeOrigin: true,
                 pathRewrite: {
                     ['^' + process.env.VUE_APP_BASE_API]: '',