用户登录/退出操作

src/components/AppVue/Header.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="header">
     <div class="logo">青浦一张图</div>
+    <div class="userdropdown">
+        <User />
+    </div>
     <div class="menu">
       <ul class="menu_ul">
         <li
@@ -13,16 +16,27 @@
         </li>
       </ul>
     </div>
+    
+    <el-dialog v-model="dialogLoginVisible" width="500">
+      <Login :close="closeLoginDialog" />
+    </el-dialog>
+
   </div>
 </template>
 
 <script>
+import User from "@/components/user/user.vue";
 export default {
+  components: {
+    User,
+  },
   data() {
-    return {};
+    return {
+    };
   },
   mounted() {},
-  methods: {},
+  methods: {
+  },
 };
 </script>
 
@@ -45,7 +59,6 @@ export default {
   .menu {
     display: inline-block;
     float: right;
-
     .menu_ul {
       li {
         display: inline-block;
@@ -69,4 +82,14 @@ export default {
     }
   }
 }
+.userdropdown {
+    float: right;
+    width: 150px;
+    display: flex;
+    align-items: center;
+    height: 70px;
+    justify-content: center;
+    cursor: pointer;
+    border: 0;
+}
 </style>

src/components/login/login.vue

@@ -0,0 +1,90 @@
+<template>
+    <div style="text-align: center;font-size: 30px;margin-top: 40px;">登&nbsp;&nbsp;录</div>
+    <div style="margin: 80px;">
+        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
+            <el-form-item label="账号" prop="username">
+                <el-input type="text" v-model="ruleForm.username" autocomplete="off" placeholder="请输入账号"></el-input>
+            </el-form-item>
+            <el-form-item label="密码" prop="password">
+                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
+            </el-form-item>
+            <div style="width: 100%;text-align: center;margin-top: 50px;">
+                <el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')">登&nbsp;&nbsp;&nbsp;&nbsp;录</el-button>
+            </div>
+            <!-- <el-form-item style="padding-top: 20px;">
+                <el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')">登录</el-button>
+                <el-button @click="resetForm('ruleForm')">重置</el-button>
+            </el-form-item> -->
+        </el-form>
+    </div>
+</template>
+
+<script>
+import encrypt‌ from "@/utils/encrypt‌";
+export default {
+  data() {
+    return {
+        ruleForm: {
+          username: '',
+          password: '',
+        },
+        rules: {
+          username: [
+            { required: true, message: '请输入账号', trigger: 'blur' },
+          ],
+          password: [
+            { required: true, message: '请输入密码', trigger: 'blur' },
+          ]
+        }
+    };
+  },
+  props: {
+    close: Function,
+  },
+  mounted() {},
+  methods: {
+    submitForm(formName) {
+        let that = this;
+        that.$refs[formName].validate((valid) => {
+            if (valid) {
+                // console.log('submit!');
+                encrypt‌(that.ruleForm).then((res) => {
+                    // console.log(res);
+                    that.$message({
+                        type: "success",
+                        message: "登录成功",
+                    });
+                    that.close();
+                 }).catch((err) => {
+                    that.$message({
+                        type: "error",
+                        message: err,
+                    });
+                });
+                
+            } else {
+                return false;
+            }
+        });
+    },
+    resetForm(formName) {
+        let that = this;
+        that.$refs[formName].resetFields();
+    },
+    handleCommand(command) {
+        let that = this;
+        that.$message({   
+            type: "info",
+            message: `Click on item ${command}`,
+        });
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+    :deep(.el-form-item--label-right .el-form-item__label) {
+        justify-content: flex-end;
+        text-align: right;
+        width: auto !important;
+    }
+</style>

src/components/user/user.vue

@@ -0,0 +1,89 @@
+<template>
+  <div id="container">
+    <div>
+        <el-dropdown @command="handleCommand">
+          <span class="el-dropdown-link">
+            <el-icon :size="20" color="#fff">
+            <UserFilled />
+            </el-icon>
+            <span style="padding: 0 6px;">
+              {{ $store.state.userInfo.id == touristUserId ? "游客" : $store.state.userInfo.username}}
+            </span>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="login">登录</el-dropdown-item>
+              <el-dropdown-item command="register">注册用户</el-dropdown-item>
+              <el-dropdown-item command="upPassword">修改密码</el-dropdown-item>
+              <el-dropdown-item command="logout">退出</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+    </div>
+    <el-dialog v-model="dialogLoginVisible" width="500">
+      <Login :close="closeLoginDialog" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Login from "@/components/login/login.vue";
+import encrypt‌ from "@/utils/encrypt‌";
+export default {
+  components: {
+    Login,
+  },
+  data() {
+    return {
+      touristUserId:systemConfig.touristUserId,
+      dialogLoginVisible: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    closeLoginDialog() {
+      console.log("closeLoginDialog");
+      this.dialogLoginVisible = false;
+    },
+    handleCommand(command) {
+      if (command == "login") {
+        this.dialogLoginVisible = true;
+      } else if(command == "register"){
+        
+      } else if(command == "upPassword"){
+        
+      } else {
+        encrypt‌().then(() => {
+          this.$message({
+            type: "success",
+            message: "退出成功",
+          });
+        }).catch((err) => {
+          this.$message({
+            type: "error",
+            message: err,
+          });
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+    .container{
+        padding: 0;
+        margin: 0;
+    }
+    .el-dropdown-link {
+        cursor: pointer;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        border: 0;
+    }
+    .el-dropdown,.el-dropdown * {
+    outline: none !important; /* 确保下拉触发器没有轮廓 */
+    }
+
+</style>

src/utils/encrypt‌.js

@@ -30,10 +30,10 @@ export default function encrypt(loginObj) {
                 reject(err);
             });
         } else {
-            if (loginObj.username != undefined || loginObj.username != "" || loginObj.username != null) {
+            if (loginObj.username == undefined || loginObj.username == "" || loginObj.username == null) {
                 reject("用户名为空")
             }
-            if (loginObj.password != undefined || loginObj.password != "" || loginObj.password != null) {
+            if (loginObj.password == undefined || loginObj.password == "" || loginObj.password == null) {
                 reject("密码为空")
             }
             return login(loginObj.username, AesEncryptUtil.getPassword(loginObj.password)).then(function (result) {