登录完成

web/src/components/KuIcon.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="KuIcon">
+    <div class="iconfont" :class="icon" v-text="text" :style="{color}"/>
+  </div>
+</template>
+
+<script>
+import "../assets/iconfont.css";
+
+export default {
+  name: "KuIcon",
+  props: {
+    icon: {type: String, required: true},
+    color: String,
+    text: String
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.KuIcon {
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  font-size: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+
+  .iconfont {
+    font-size: inherit;
+    width: inherit;
+    height: inherit;
+  }
+}
+</style>

web/src/components/KuLogin/KuLogin.vue

@@ -2,16 +2,10 @@
   <section class="KuLogin">
     <div class="panel" :class="{border,changePwd}">
       <h2 v-text="title"/>
-      <div class="color-a2v1c5 subTitle" v-text="`请输入您的用户名及密码`"/>
-      <el-form :model="form" :rules="rules" ref="LoginForm" size="large">
-        <el-form-item prop="name">
-          <el-input placeholder="用户名或手机号" v-model="form.name" clearable>
-            <template slot="prefix">
-              <el-icon :size="20" color="var(--el-color-primary)" class="inputIcon">
-                <user-filled/>
-              </el-icon>
-            </template>
-          </el-input>
+      <div class="sub subTitle" v-text="`管理端使用`"/>
+      <el-form :model="form" :rules="rules" ref="LoginForm">
+        <el-form-item prop="phone">
+          <el-input placeholder="用户名或手机号" v-model="form.phone" clearable/>
         </el-form-item>
         <el-form-item prop="password">
           <el-input placeholder="请输入密码" type="password" v-model="form.password" clearable show-password>
@@ -23,12 +17,18 @@
           </el-input>
         </el-form-item>
         <el-form-item>
-          <div class="btn">登录</div>
+          <div class="btn" @click="handleLogin">登录</div>
           <el-row justify="end">
-            <el-button class="rightBtn" type="text" @click="changePwd=true">修改密码</el-button>
+            <el-link class="rightBtn" @click="changePwd=true" :underline="false">修改密码</el-link>
           </el-row>
         </el-form-item>
       </el-form>
+      <div class="divider" v-text="`第三方账号登录`"/>
+      <el-row class="tpLogin" align="middle">
+        <el-tooltip v-for="(tp,i) in tpLoginList" :key="i" :content="tp.label" placement="top">
+          <ku-icon class="item" v-bind="tp" @click.native.stop="tp.click"/>
+        </el-tooltip>
+      </el-row>
     </div>
     <change-pwd v-bind="$props" @back="changePwd=false"/>
   </section>
@@ -36,12 +36,17 @@
 
 <script>
 
-import {Lock, UserFilled} from "@element-plus/icons-vue";
+import {Lock} from "@element-plus/icons-vue";
 import ChangePwd from "./changePwd";
+import KuIcon from "../KuIcon";
+import qs from "query-string"
+import md5 from "md5"
+import {mapActions} from "pinia/dist/pinia";
+import {mainStore} from "../../utils/store";
 
 export default {
   name: "KuLogin",
-  components: {ChangePwd, UserFilled, Lock},
+  components: {KuIcon, ChangePwd, Lock},
   props: {
     title: {default: "登录组件"},
     border: Boolean
@@ -49,8 +54,38 @@ export default {
   data() {
     return {
       form: {},
-      rules: {},
-      changePwd: false
+      rules: {
+        password: {required: true, message: "请输入密码"},
+        phone: {required: true, message: "请输入手机号"},
+      },
+      changePwd: false,
+      tpLoginList: [
+        {
+          label: "微信登录", icon: "icon-WeChat", color: "#2BA245", click: () => {
+            location.href = qs.stringifyUrl({
+              url: "https://open.weixin.qq.com/connect/qrconnect",
+              query: {
+                appid: "wx68ef6cfaa104652a",
+                redirect_uri: encodeURIComponent(location.href),
+                response_type: "code",
+                scope: "snsapi_login"
+              },
+              fragmentIdentifier: "wechat_redirect"
+            })
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    ...mapActions(mainStore, ['getToken']),
+    handleLogin() {
+      this.$refs.LoginForm.validate(v => {
+        if (v) {
+          const password = md5(this.form.password)
+          this.getToken({...this.form, password}).then(() => this.$emit("login"))
+        }
+      })
     }
   }
 }
@@ -58,7 +93,7 @@ export default {
 
 <style lang="scss" scoped>
 .KuLogin {
-  width: 630px;
+  width: 400px;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -89,6 +124,7 @@ export default {
       font-size: 32px;
       font-family: PingFang SC-Bold, PingFang SC;
       line-height: 38px;
+      margin-bottom: 20px;
     }
 
     .subTitle {
@@ -97,8 +133,8 @@ export default {
 
     .btn {
       text-align: center;
-      height: 60px;
-      line-height: 60px;
+      height: 40px;
+      line-height: 40px;
       width: 100%;
       color: #fff;
       background: var(--el-color-primary);
@@ -112,9 +148,8 @@ export default {
 
     .el-input {
       .el-input__inner {
-        line-height: 60px;
-        height: 60px;
-        padding-left: 44px !important;
+        line-height: 32px;
+        height: 32px;
       }
 
       .el-input__prefix-inner {
@@ -130,6 +165,36 @@ export default {
     .el-row {
       width: 100%;
     }
+
+    .divider {
+      font-size: 14px;
+      color: #999;
+      text-align: center;
+      margin: 12px 0;
+
+      &:before, &:after {
+        content: "——";
+        margin: 0 11px;
+        color: #ddd;
+      }
+    }
+
+    .tpLogin {
+      width: 100%;
+      justify-content: center;
+      flex-wrap: wrap;
+
+      .item {
+        cursor: pointer;
+        margin: 8px;
+        height: 48px;
+        width: 48px;
+        font-size: 28px;
+        border-radius: 50%;
+        line-height: 48px;
+        text-align: center;
+      }
+    }
   }
 }
 </style>