增加个人中心gitlab板块

src/api/user.js

@@ -18,6 +18,10 @@ function resetAPI(data) {
   return axios.post(`${prefix}/resetPassword`, data);
 }
 
+function resetGitlabAPI(data) {
+  return axios.post(`${prefix}/resetGitlabPassword`, data);
+}
+
 function getUserAPI(data){
   return axios.get(`${prefix}/findUserById`, {
     params: {
@@ -59,6 +63,7 @@ const userAPIs = {
   registerAPI,
   sendMessageAPI,
   resetAPI,
+  resetGitlabAPI,
   getUserAPI,
   saveNameAPI,
   saveEmailAPI,

src/views/HomePage/HomePage.vue

@@ -21,25 +21,33 @@
             </el-icon>
             <span style="padding-left: 20px">身份认证</span>
           </el-menu-item>
+          <el-menu-item index="3">
+            <el-icon>
+              <Files/>
+            </el-icon>
+            <span style="padding-left: 20px">gitlab</span>
+          </el-menu-item>
         </el-menu>
       </el-card>
     </el-col>
     <el-col :span="2"/>
     <el-col :span="18">
       <InformationCard v-if="activeIndex==='1'"/>
-      <CertificationCard v-else/>
+      <CertificationCard v-else-if="activeIndex==='2'"/>
+      <GitlabCard v-else/>
     </el-col>
   </el-row>
 </template>
 
 <script>
-import { Back, Medal, User } from "@element-plus/icons-vue";
+import { Back, Medal, User , Files } from "@element-plus/icons-vue";
 import InformationCard from "@/views/HomePage/components/InformationCard";
 import CertificationCard from "@/views/HomePage/components/CertificationCard";
+import GitlabCard from "@/views/HomePage/components/GitlabCard";
 
 export default {
   name: "HomePage",
-  components: { Back, CertificationCard, InformationCard, Medal, User, },
+  components: { Back, CertificationCard, GitlabCard, InformationCard, Medal, User, Files},
   data() {
     return {
       activeIndex: "1",

src/views/HomePage/components/GitlabCard.vue

@@ -0,0 +1,331 @@
+<template>
+  <el-form id="auth-card-form" ref="cardFormRef" :model="cardForm" :rules="cardFormRule" >
+
+  <el-card id="gitlab-card-body" >
+    <template #header>
+      <span style="font-weight: bold; font-size: larger">
+        gitlab基本信息
+      </span>
+    </template>
+
+    <div>
+      <el-form-item class="item" prop="username">
+      <el-row class="row">
+        <el-col :span="3" class="title">
+          用户名
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="user.username" class="content" disabled/>
+        </el-col>
+      </el-row>
+      </el-form-item>
+    </div>
+
+    <div>
+      <el-form-item class="item" prop="email">
+      <el-row class="row">
+        <el-col :span="3" class="title">
+          邮箱
+        </el-col>
+        <el-col :span="10">
+          <el-input v-model="user.email" class="content" disabled/>
+        </el-col>
+      </el-row>
+      </el-form-item>
+    </div>
+
+    <div>
+      <el-form-item class="item" prop="phone">
+      <el-row class="row">
+        <el-col :span="3" class="title">
+          手机号
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="cardForm.phone" class="content" placeholder="请输入手机号"/>
+        </el-col>
+      </el-row>
+      </el-form-item>
+    </div>
+
+    <div>
+      <el-form-item class="item" prop="password">
+      <el-row class="row">
+        <el-col :span="3" class="title">
+          新密码
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="cardForm.password" class="content" show-password placeholder="请输入新密码"/>
+        </el-col>
+      </el-row>
+      </el-form-item>
+    </div>
+
+    <div>
+      <el-form-item class="item" prop="passwordConfirm">
+      <el-row class="row">
+        <el-col :span="3" class="title">
+          确认密码
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="cardForm.passwordConfirm" class="content" show-password placeholder="请确认新密码" />
+        </el-col>
+      </el-row>
+      </el-form-item>
+    </div>
+
+    <div>
+      <el-form-item class="item" prop="identifyCode">
+      <el-row class="row">
+        <el-col :span="3" class="title">
+          验证码
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="cardForm.identifyCode" class="content" show-password placeholder="请输入验证码" />
+        </el-col>
+        <el-button class="button" id="auth-card-code-verifier-button" :disabled="cardButtonDisabled" @click="handleSendMessage">
+          {{ cardButtonText }}
+        </el-button>
+      </el-row>
+      </el-form-item>
+    </div>
+
+    <div class="row">
+      <el-button @click="handleReset">重置gitlab密码</el-button>
+    </div>
+  </el-card>
+    </el-form>
+</template>
+
+<script>
+
+export default {
+  name: "GitlabCard",
+  data() {
+    const inputNumberValidator = (rule, value, callback) => {
+      if (!(/(^[1-9]\d*$)/.test(value))) {
+        callback(new Error("请勿输入非数字"));
+      } else {
+        callback();
+      }
+    };
+    const passwordConfirmValidator = (rule, value, callback) => {
+      if (value !== this.cardForm.password) {
+        callback(new Error("请输入相同的密码"));
+      } else {
+        callback();
+      }
+    };
+    const phoneValidator = (rule, value, callback) => {
+      if (/^(13\d|14\d|15\d|166|18\d|19[6,9]|17\d)\d{8}$/i.test(value) === false) {
+        callback(new Error("请输入正确格式的手机号"));
+      } else {
+        callback();
+      }
+    };
+    const identifyCodeValidator = (rule, value, callback) => {
+      if (value.length !== 6) {
+        this.shakeElem("auth-card-code-verifier");
+        callback(new Error("请正确输入短信验证码"));
+      } else {
+        this.cardVerified = true;
+        callback();
+      }
+    };
+    return {
+      cardForm: {
+        phone: "",
+        name: "",
+        username: "",
+        email: "",
+        password: "",
+        passwordConfirm: "",
+        identifyCode: "",
+      },
+      cardButtonText: "获取验证码",
+      cardButtonDisabled: false,
+      cardVerified: false,
+      cardFormRule: {
+        phone: [
+          {required: true, message: "请输入手机号", trigger: "blur"},
+          {
+            validator: phoneValidator,
+            trigger: "blur"
+          },
+          {
+            validator: inputNumberValidator,
+            trigger: "change"
+          }
+        ],
+        password: [
+          {
+            required: true,
+            message: "请输入密码",
+            trigger: "blur",
+          },
+          {
+            min: 8,
+            max: 20,
+            message: "密码长度应为8-20个字符",
+            trigger: "blur",
+          }
+        ],
+        passwordConfirm: [
+          {required: true, message: "请再次输入密码", trigger: "blur"},
+          {
+            validator: passwordConfirmValidator,
+            trigger: "blur"
+          }
+        ],
+        identifyCode: [
+          {
+            validator: identifyCodeValidator,
+            trigger: "blur",
+          },
+          {
+            validator: inputNumberValidator,
+            trigger: "change",
+          }
+        ]
+      },
+    };
+  },
+  computed: {
+    user() {
+      return this.$store.state.user;
+    },
+    name() {
+      return this.$store.state.user.name;
+    },
+    email() {
+      return this.$store.state.user.email;
+    },
+  },
+  methods: {
+    handleSendMessage() {
+      const thatForm = this.$refs.cardFormRef;
+      thatForm.validateField("phone", v1 => {
+        if (!v1) {
+          this.cardButtonDisabled = true;
+          let time = 60;
+          const myScroll = setInterval(() => {
+            time--;
+            if (time >= 0) {
+              this.cardButtonText = time + "s后可重发";
+            } else {
+              this.cardButtonText = "获取验证码";
+              this.cardButtonDisabled = false;
+              clearTimeout(myScroll);
+              time = 60;
+            }
+          }, 1000);
+          const params = {
+            phone: this.cardForm.phone
+          };
+          console.log(params);
+          this.$apis.sendMessageAPI(params)
+              .then((res) => {
+                if (res.data.code === 0) {
+                  this.$message({
+                    showClose: true,
+                    message: "发送成功，请注意查收验证码",
+                    type: "success"
+                  });
+                } else {
+                  this.$message({
+                    showClose: true,
+                    message: res.data.message,
+                    type: "warning"
+                  });
+                }
+              })
+              .catch((e) => {
+                this.$message({
+                  showClose: true,
+                  message: e,
+                  type: "error"
+                });
+              });
+        }
+      });
+    },
+    shakeElem(elemId) {
+      let elem = document.getElementById(elemId);
+      elem.classList.add("shake");
+      setTimeout(() => {
+        elem.classList.remove("shake");
+      }, 800);
+    },
+    handleReset() {
+      const thatForm = this.$refs.cardFormRef;
+      thatForm.validateField("password", v1 => {
+        thatForm.validateField("passwordConfirm", v2 => {
+          thatForm.validateField("phone", v3 => {
+            thatForm.validateField("identifyCode", v4 => {
+              if (!v1 && !v2 && !v3 && !v4) {
+                if (this.cardVerified) {
+                  const params = {
+                    password: this.cardForm.password,
+                    identifyCode: this.cardForm.identifyCode,
+                    phone: this.cardForm.phone,
+                  };
+                  this.$apis.resetGitlabAPI(params)
+                      .then((res) => {
+                        if (res.data.code === 0) {
+                          this.$message({
+                            showClose: true,
+                            message: "重置成功",
+                            type: "success"
+                          });
+                        } else {
+                          this.$message({
+                            showClose: true,
+                            message: res.data.message,
+                            type: "warning"
+                          });
+                        }
+                      })
+                      .catch((e) => {
+                        this.$message({
+                          showClose: true,
+                          message: e,
+                          type: "error"
+                        });
+                      });
+                } else {
+                  this.shakeElem("auth-card-code-verifier");
+                }
+              }
+            });
+          });
+        });
+      });
+    },
+  }
+};
+</script>
+
+<style scoped>
+:deep(.el-card__body) {
+  padding: 48px;
+  display: grid;
+  grid-gap: 24px;
+}
+
+.title {
+  font-size: medium;
+}
+
+.row {
+  display: flex;
+  align-items: baseline;
+}
+
+.button {
+  margin-left: 24px;
+}
+
+.item {
+  padding: 0px;
+}
+
+</style>