Главная Обзор Помощь
Регистрация Вход
wzh
/
JiangYunPhotosManage_WebApp
1
0
Ответвить 0
Файлы Задачи 0 Запросы на слияние 0 Вики
Просмотр исходного кода

新增 登录页

wangzhihui 4 лет назад
Родитель
c08f19ea84
Сommit
6a8da495c2
10 измененных файлов с 336 добавлено и 106 удалено
Единый вид Показать статистику Diff
  1. 18 1
      index.html
  2. 4 3
      package.json
  3. 46 2
      src/App.vue
  4. 21 0
      src/apis/config.js
  5. 7 0
      src/apis/fetch.js
  6. 29 1
      src/main.js
  7. 2 1
      src/router/index.js
  8. 22 0
      src/store/index.js
  9. 18 97
      src/views/index/Index.vue
  10. 169 1
      src/views/index/Login.vue

+ 18 - 1
index.html
Просмотреть файл 

@@ -4,7 +4,24 @@
 
     <meta charset="UTF-8" />
 
     <meta charset="UTF-8" />
 
     <link rel="icon" href="/favicon.ico" />
 
     <link rel="icon" href="/favicon.ico" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>Vite App</title>
 
+    <title>Huihenduo App</title>
 
+    <style>
 
+      * {
 
+        margin: 0;
 
+        padding: 0;
 
+        box-sizing: border-box;
 
+      }
 
+      html,
 
+      body {
 
+        height: 100%;
 
+        width: 100%;
 
+      }
 
+
 
+      #app {
 
+        height: 100%;
 
+        width: 100%;
 
+      }
 
+    </style>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>

+ 4 - 3
package.json
Просмотреть файл 

@@ -7,11 +7,12 @@
 
     "serve": "vite preview"
 
     "serve": "vite preview"
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
+    "axios": "^0.21.1",
 
     "element3": "^0.0.40",
 
     "element3": "^0.0.40",
 
+    "md5": "^2.3.0",
 
     "vue": "^3.2.16",
 
     "vue": "^3.2.16",
 
-    "axios": "^0.21.1",
 
-    "vue-router": "^4.0.4"
 
-
 
+    "vue-router": "^4.0.4",
 
+    "vuex": "^4.0.2"
 
   },
 
   },
 
   "devDependencies": {
 
   "devDependencies": {
 
     "@vitejs/plugin-vue": "^1.9.3",
 
     "@vitejs/plugin-vue": "^1.9.3",

+ 46 - 2
src/App.vue
Просмотреть файл 

@@ -1,5 +1,15 @@
 
 <template>
 
 <template>
 
-  <router-view></router-view>
 
+  <div v-if="this.$store.state.isLogin" class="main-container">
 
+    <div class="header">header</div>
 
+    <div class="main">
 
+      <div class="aside">aside</div>
 
+      <div class="section">
 
+        <router-view></router-view>
 
+      </div>
 
+    </div>
 
+    <div class="footer">footer</div>
 
+  </div>
 
+  <router-view v-else></router-view>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
@@ -9,5 +19,39 @@ export default {
 
   },
 
   },
 
 };
 
 };
 
 </script>
 
 </script>
 
+<style scoped>
 
+.main-container {
 
+  height: 100%;
 
+  width: 100%;
 
+  min-height: 800px;
 
+  min-width: 1200px;
 
+  overflow: scroll;
 
+}
 
 
 
-<style></style>
 
+.header,
 
+.footer {
 
+  widows: 100%;
 
+  height: 60px;
 
+  line-height: 60px;
 
+  background: #b3c0d1;
 
+}
 
+
 
+.footer {
 
+  text-align: center;
 
+}
 
+.main {
 
+  width: 100%;
 
+  height: calc(100% - 120px);
 
+  display: flex;
 
+}
 
+
 
+.aside {
 
+  width: 200px;
 
+  height: 100%;
 
+}
 
+
 
+.section {
 
+  border: 1px solid grey;
 
+  width: 100%;
 
+}
 
+</style>

+ 21 - 0
src/apis/config.js
Просмотреть файл 

@@ -0,0 +1,21 @@
 
+const baseurl = "http://49.234.214.168:8080/hhd-pat/";
 
+import axios from "axios";
 
+
 
+axios.interceptors.response.use(
 
+  function (response) {
 
+    return response;
 
+  },
 
+  function (error) {
 
+    return Promise.reject(error);
 
+  }
 
+);
 
+export const $http = function (method, url, data) {
 
+  return axios({
 
+    method,
 
+    url: baseurl + url,
 
+    data,
 
+    withCredentials: true,
 
+  });
 
+};
 
+
 
+export default { baseurl, $http };

+ 7 - 0
src/apis/fetch.js
Просмотреть файл 

@@ -0,0 +1,7 @@
 
+import { $http } from "./fetch";
 
+export default {
 
+  // 员工登录
 
+  login(data) {
 
+    return $http("post", "/staff/backstage/login", data);
 
+  },
 
+};

+ 29 - 1
src/main.js
Просмотреть файл 

@@ -3,5 +3,33 @@ import { createApp } from "vue";
 
 import Element3 from "element3";
 
 import Element3 from "element3";
 
 import App from "./App.vue";
 
 import App from "./App.vue";
 
 import router from "./router";
 
 import router from "./router";
 
+import store from "./store";
 
+import md5 from "md5";
 
+const app = createApp(App);
 
+app.config.globalProperties.$md5 = md5;
 
 
 
-createApp(App).use(router).use(Element3).mount("#app");
 
+router.beforeEach(async (to, from, next) => {
 
+  let userid = localStorage.userid;
 
+  if (userid) {
 
+    store.commit("changeLogin", true);
 
+  } else {
 
+    store.commit("changeLogin", false);
 
+  }
 
+  if (userid) {
 
+    if (0 === to.matched.length) {
 
+      next("/");
 
+    } else if (to.path == "/login") {
 
+      next("/");
 
+    } else {
 
+      next();
 
+    }
 
+  } else {
 
+    if (to.path == "/login") {
 
+      next();
 
+    } else {
 
+      next("/login");
 
+    }
 
+  }
 
+});
 
+
 
+app.use(router).use(Element3).use(store).mount("#app");

+ 2 - 1
src/router/index.js
Просмотреть файл 

@@ -1,11 +1,12 @@
 
 import {
 
 import {
 
   createWebHistory,
 
   createWebHistory,
 
+  createWebHashHistory,
 
   createMemoryHistory,
 
   createMemoryHistory,
 
   createRouter,
 
   createRouter,
 
 } from "vue-router";
 
 } from "vue-router";
 
 
 
 const router = createRouter({
 
 const router = createRouter({
 
-  history: createWebHistory(),
 
+  history: createWebHashHistory(),
 
   routes: [
 
   routes: [
 
     {
 
     {
 
       path: "/",
 
       path: "/",

+ 22 - 0
src/store/index.js
Просмотреть файл 

@@ -0,0 +1,22 @@
 
+import { createStore } from "vuex";
 
+
 
+const store = createStore({
 
+  state: {
 
+    isLogin: false,
 
+    titleFirst: "",
 
+    titleSecond: "",
 
+  },
 
+  mutations: {
 
+    changeTitleFirst(state, text) {
 
+      state.titleFirst = text;
 
+    },
 
+    changeTitleSecond(state, text) {
 
+      state.titleSecond = text;
 
+    },
 
+    changeLogin(state, b) {
 
+      state.isLogin = b;
 
+    },
 
+  },
 
+});
 
+
 
+export default store;

+ 18 - 97
src/views/index/Index.vue
Просмотреть файл 

@@ -1,99 +1,20 @@
 
 <template>
 
 <template>
 
-  <div
 
-    class="block"
 
-    style="
 
-      width: 60vw;
 
-      margin: 0 auto;
 
-      height: 800px;
 
-      overflow: auto;
 
-      border: 1px solid grey;
 
-    "
 
-  >
 
-    <el-timeline>
 
-      <el-timeline-item timestamp="2018/4/2" placement="top">
 
-        <el-card>
 
-          <div style="display: flex; justify-content: space-around">
 
-            <div>
 
-              <h2>船名:顺发999</h2>
 
-              <h3>MMSI:410888292</h3>
 
-              <h3>拍摄时间:2021/04/02 09:46</h3>
 
-              <h3>经度:31.2323</h3>
 
-              <h3>纬度:132.998</h3>
 
-              <h3></h3>
 
-            </div>
 
-            <div>
 
-              <img
 
-                style="width: 300px; height: 200px; border: 1px solid red"
 
-                src="../../images/顺发999.png"
 
-                alt=""
 
-              />
 
-            </div>
 
-          </div>
 
-        </el-card>
 
-      </el-timeline-item>
 
-      <el-timeline-item timestamp="2018/4/2" placement="top">
 
-        <el-card>
 
-          <div style="display: flex; justify-content: space-around">
 
-            <div>
 
-              <h2>船名:顺发999</h2>
 
-              <h3>MMSI:410888292</h3>
 
-              <h3>拍摄时间:2021/04/02 09:46</h3>
 
-              <h3>经度:31.2323</h3>
 
-              <h3>纬度:132.998</h3>
 
-              <h3></h3>
 
-            </div>
 
-            <div>
 
-              <img
 
-                style="width: 300px; height: 200px; border: 1px solid grey"
 
-                src="../../images/顺发999.png"
 
-                alt=""
 
-              />
 
-            </div>
 
-          </div>
 
-        </el-card>
 
-      </el-timeline-item>
 
-      <el-timeline-item timestamp="2018/4/2" placement="top">
 
-        <el-card>
 
-          <div style="display: flex; justify-content: space-around">
 
-            <div>
 
-              <h2>船名:顺发999</h2>
 
-              <h3>MMSI:410888292</h3>
 
-              <h3>拍摄时间:2021/04/02 09:46</h3>
 
-              <h3>经度:31.2323</h3>
 
-              <h3>纬度:132.998</h3>
 
-              <h3></h3>
 
-            </div>
 
-            <div>
 
-              <img
 
-                style="width: 300px; height: 200px; border: 1px solid red"
 
-                src="../../images/顺发999.png"
 
-                alt=""
 
-              />
 
-            </div>
 
-          </div>
 
-        </el-card>
 
-      </el-timeline-item>
 
-      <el-timeline-item timestamp="2018/4/2" placement="top">
 
-        <el-card>
 
-          <div style="display: flex; justify-content: space-around">
 
-            <div>
 
-              <h2>船名:顺发999</h2>
 
-              <h3>MMSI:410888292</h3>
 
-              <h3>拍摄时间:2021/04/02 09:46</h3>
 
-              <h3>经度:31.2323</h3>
 
-              <h3>纬度:132.998</h3>
 
-              <h3></h3>
 
-            </div>
 
-            <div>
 
-              <img
 
-                style="width: 300px; height: 200px; border: 1px solid red"
 
-                src="../../images/顺发999.png"
 
-                alt=""
 
-              />
 
-            </div>
 
-          </div>
 
-        </el-card>
 
-      </el-timeline-item>
 
-    </el-timeline>
 
-  </div>
 
+  {{ this.$store.state.isLogin }}
 
+  <button @click="quit()">注销登录</button>
 
 </template>
 
 </template>
 
+<script>
 
+export default {
 
+  data() {
 
+    return {};
 
+  },
 
+  methods: {
 
+    quit() {
 
+      console.log("quit");
 
+      localStorage.clear();
 
+      this.$store.commit("changeLogin", false);
 
+      this.$router.push({ path: "/login" });
 
+    },
 
+  },
 
+  created() {},
 
+};
 
+</script>

+ 169 - 1
src/views/index/Login.vue
Просмотреть файл 

@@ -1 +1,169 @@
 
-<template>login</template>
 
+<template>
 
+  <div class="container">
 
+    <div class="login-box">
 
+      <div class="left">
 
+        <div class="left-up-icon"></div>
 
+      </div>
 
+      <div class="right">
 
+        <div class="title">
 
+          <div class="title-left"></div>
 
+          <div class="title-mid">丨</div>
 
+          <div class="title-right">智慧运力运维平台</div>
 
+        </div>
 
+        <div class="form-container">
 
+          <el-form :model="ruleForm" :rules="rules">
 
+            <el-form-item prop="phone">
 
+              <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
 
+                <template v-slot:prepend>
 
+                  <el-button icon="el-icon-mobile-phone"></el-button>
 
+                </template>
 
+              </el-input>
 
+            </el-form-item>
 
+            <el-form-item prop="password">
 
+              <el-input placeholder="请输入密码" v-model="ruleForm.password">
 
+                <template v-slot:prepend>
 
+                  <el-button icon="el-icon-lock"></el-button>
 
+                </template>
 
+              </el-input>
 
+            </el-form-item>
 
+            <el-form-item>
 
+              <el-button
 
+                style="width: 384px; height: 48px; border-radius: 2px"
 
+                type="primary"
 
+                @click="login('ruleForm')"
 
+              >
 
+                登录
 
+              </el-button>
 
+            </el-form-item>
 
+          </el-form>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <div @click="goBeian" class="copyright">
 
+      Copyright © 2021 河南省汇很多科技有限公司 豫ICP备 2021029101 号
 
+    </div>
 
+  </div>
 
+</template>
 
+<script>
 
+export default {
 
+  data() {
 
+    return {
 
+      ruleForm: {
 
+        phone: "",
 
+        password: "",
 
+      },
 
+      rules: {
 
+        phone: [
 
+          { required: true, message: "请输入手机号", trigger: "blur" },
 
+          { min: 11, max: 11, message: "请正确输入手机号", trigger: "blur" },
 
+        ],
 
+      },
 
+      password: [
 
+        { required: true, message: "请输入密码", trigger: "blur" },
 
+        { min: 6, max: 20, message: "请正确输入手机号", trigger: "blur" },
 
+      ],
 
+    };
 
+  },
 
+  methods: {
 
+    login() {
 
+      this.$store.commit("changeLogin", true);
 
+      localStorage.setItem("userid", 3);
 
+      this.$router.push({ path: "/" });
 
+    },
 
+    goBeian() {
 
+      window.open("https://beian.miit.gov.cn/");
 
+    },
 
+  },
 
+};
 
+</script>
 
+<style scoped>
 
+.container {
 
+  width: 100%;
 
+  height: 100%;
 
+  background: rgb(22, 149, 207);
 
+}
 
+
 
+.login-box {
 
+  position: relative;
 
+  display: flex;
 
+  top: calc(50% - 255px);
 
+  left: calc(50% - 478px);
 
+  width: 966px;
 
+  height: 508px;
 
+  border-radius: 10px;
 
+  overflow: hidden;
 
+}
 
+
 
+.left {
 
+  height: 100%;
 
+  width: 450px;
 
+  background: rgb(143, 158, 206);
 
+}
 
+
 
+.left-up-icon {
 
+  width: 40px;
 
+  height: 40px;
 
+  border-radius: 50%;
 
+  border: 1px solid grey;
 
+  margin: 24px;
 
+}
 
+
 
+.right {
 
+  height: 100%;
 
+  width: 516px;
 
+  background: #fff;
 
+}
 
+
 
+.title {
 
+  width: 384px;
 
+  height: 38px;
 
+  display: flex;
 
+  margin: 0 auto;
 
+  margin-top: 100px;
 
+}
 
+
 
+.title-left {
 
+  height: 38px;
 
+  width: 105px;
 
+  background: url(https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/miniapp-static/%E6%B1%87%E5%BE%88%E5%A4%9Alogo-%E5%B7%A6%E5%8F%B3.png?sign=22b9335300bbef8d04da1b9b75589f7e&t=1634706935);
 
+  background-size: contain;
 
+  background-repeat: no-repeat;
 
+}
 
+
 
+.title-mid {
 
+  font-size: 25px;
 
+  color: #e4e4e4;
 
+  margin: 0 12px;
 
+}
 
+
 
+.title-right {
 
+  font-size: 28px;
 
+  font-family: Adobe Heiti Std;
 
+  font-weight: normal;
 
+  color: #434343;
 
+  line-height: 38px;
 
+}
 
+
 
+.form-container {
 
+  margin: 0 auto;
 
+  margin-top: 60px;
 
+  width: 384px;
 
+}
 
+
 
+.el-input-group {
 
+  border: 1px solid #0094fe !important;
 
+  border-radius: 5px;
 
+}
 
+.copyright {
 
+  position: absolute;
 
+  width: 520px;
 
+  bottom: 70px;
 
+  left: calc(50% - 250px);
 
+  font-family: PingFang SC;
 
+  font-weight: 400;
 
+  color: #333333;
 
+  opacity: 0.8;
 
+  cursor: pointer;
 
+}
 
+</style>