注册登录相关逻辑开发

components/RegisterBar.vue

@@ -0,0 +1,189 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-20 17:51:51
+ * @LastEditTime: 2022-10-26 10:26:29
+-->
+<!-- <script lang="ts" setup>
+import { ref,reactive, computed } from 'vue'
+import { userApi } from '@/api/user'
+
+const { registerUser } = userApi()
+
+const emit = defineEmits(['login'])
+const showVcode = ref(false)    // 展示验证码
+const errMsg = ref('')    // 点击注册反馈错误信息
+const form = reactive({
+  username: '',
+  password: '',
+  password_confirm:'',
+  code: ''
+  // phone_zone: '86'
+})
+
+const regPhone = /^1[3456789]\d{9}$/;
+const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
+
+// 输入账号和密码后才能登录
+const loginBtnDisabled = computed<boolean>(()=> !(form.username && form.password))
+
+// 输入为手机号格式失焦显示验证码校验
+const handlerUsernameBlur = (e:any)=> {
+  showVcode.value = regPhone.test(e.target.value)
+}
+
+// 点击注册前置校验
+const vailidate = ()=> {
+  if(!regPhone.test(form.username) && !regEmail.test(form.username)) {
+    errMsg.value = '手机号/邮箱格式不对'
+  }else if(form.password !== form.password_confirm) {
+    errMsg.value = '两次输入的密码不一致'
+  }else if(form.password.length < 6) {
+    errMsg.value = '密码位数不能少于6位'
+  }else if(form.password.length> 16){
+    errMsg.value = '密码位数不能大于16位'
+  }else {
+    errMsg.value = ''
+    handlerRegisterUser()
+  }
+}
+// 弹窗关闭，初始化注册面板
+const resetInterfaceStatus = () => {
+  errMsg.value = '';
+  form.username = ''
+  form.password = ''
+  form.password_confirm = ''
+  form.code = ''
+  showVcode.value = false
+}
+const handlerRegisterUser = async () => {
+  const res = await registerUser(form)
+}
+const handlerLogin = ()=> {
+  emit('login','login')
+}
+
+defineExpose({
+  resetInterfaceStatus
+});
+</script> -->
+
+<script>
+import qs from 'qs'
+export default {
+  data() {
+    const regPhone = /^1[3456789]\d{9}$/
+    const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
+    return {
+      form: {
+        username: '',
+        password: '',
+        password_confirm:'',
+        code: ''
+        // phone_zone: '86'
+      },
+      errMsg: '',
+      showVcode: false,
+      regEmail,
+      regPhone,
+    }
+  },
+  computed: {
+    loginBtnDisabled() {
+      return !(this.form.username && this.form.password && this.form.password_confirm)
+    }
+  },
+  methods: {
+// 点击注册前置校验
+    vailidate() {
+      if(!this.regPhone.test(this.form.username) && !this.regEmail.test(this.form.username)) {
+        this.errMsg = '手机号/邮箱格式不对'
+      }else if(this.form.password !== this.form.password_confirm) {
+        this.errMsg = '两次输入的密码不一致'
+      }else if(this.form.password.length < 6) {
+        this.errMsg = '密码位数不能少于6位'
+      }else if(this.form.password.length> 16){
+        this.errMsg = '密码位数不能大于16位'
+      }else {
+        this.errMsg = ''
+        this.handlerRegisterUser()
+      }
+    },
+    handlerRegisterUser() {
+      this.$axios.post('members/register',this.form).then((res)=> {
+        if(res.code === 200) {
+          this.handlerLogin(this.form)
+        }
+      })
+    },
+    handlerLogin() {
+      this.$axios.post('login',qs.stringify(this.form)).then((res)=> {
+        this.$store.dispatch('login',res.result).then((token)=> {
+          this.$axios.setToken(token, 'Bearer')
+          this.handlerClose()
+          this.getUserInfo()
+        })
+      })
+    },
+    getUserInfo()  {
+      const res = this.$axios.get('members/getMemberInfo')
+      if(res.code === 200) {
+        this.$store.commit('setUser',res.result)
+        // localStorage.setItem('userInfo',res.result)
+      }
+    },
+    handlerUsernameBlur(e) {
+      this.showVcode = this.regPhone.test(e.target.value)
+    },
+    // 弹窗关闭，初始化注册面板
+    resetInterfaceStatus() {
+      this.errMsg = '';
+      this.form.username = ''
+      this.form.password = ''
+      this.form.password_confirm = ''
+      this.form.code = ''
+      this.showVcode = false
+    },
+    handlerChangeLogin() {
+      this.$emit('login','login')
+    },
+    handlerClose() {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="user-login">
+    <div class="logo">
+      <h4 id="loginModalLabel" class="logo_PDF"></h4>
+    </div>
+    <div class="login_content">
+      <input id="signup_account" v-model="form.username" class="login_input_user" type="text" placeholder="手机号/邮箱" @blur="handlerUsernameBlur">
+      <br />
+      <input id="signup_pwd1" v-model="form.password" class="login_input_password" type="password" placeholder="密码（6-16个字符，区分大小写）">
+      <br />
+      <input id="signup_pwd2" v-model="form.password_confirm" class="login_input_password" type="password" placeholder="确认密码">
+      <br />
+      <div v-show="showVcode" class="vcode_content">
+        <input class="input_vcode_signup" placeholder="验证码">
+        <span class="sent-vcode sent-vcode-signup"><a>发送验证码</a></span>
+      </div>
+      <div v-show="errMsg !== ''" class="error-mess error-mess-signup">
+        <span id="error-message error-tip">{{errMsg}}</span>
+      </div>
+      <button id="btn-signup" type="submit" class="logging" :class="{'btn-signin': loginBtnDisabled}" :disabled="loginBtnDisabled" @click="vailidate">注册</button>
+      <div class="login-now">
+        <div class="term">
+          <span>轻触上面的“注册”按钮，即表示你同意我们的<a target="_blank" href="/terms">条款</a></span>
+        </div>
+        <div class="switch_login">
+          <span>已经有账号？<a class="cursor-pointer" @click="handlerChangeLogin">登录</a></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+

components/UserManage.vue

@@ -0,0 +1,256 @@
+<template>
+  <div>
+    <div v-if="!changePsd">
+      <div class="accountmanage-tittle">
+        <p>账号管理</p>
+      </div>  
+      <div class="accountmanage-content">
+        <div class="changeheader flex justify-center">
+          <span><img src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg"></span>
+          <div class="headers">
+          </div>
+        </div>
+
+        <div class="row-name">
+          <span>昵称</span>
+          <input v-model="username" @blur="handlerChangeUserName">
+          <!-- <p class="err-prompt">用户名已经存在</p> -->
+        </div>
+        <div class="changepwd" @click="changepwdModal()">
+          修改密码
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div class="accountmanage-tittle">
+        <p>修改密码</p>
+      </div>
+      <div class="login_content changepwd-content">
+        <input v-model="form.password" class="login_input_password" type="password" placeholder="原始密码">
+        <br/>
+        <input  v-model="form.newPassword"  class="login_input_password new" type="password" placeholder="新密码（6-16个字符，区分大小写）">
+        <br/>
+        <input  v-model="form.newPassword_confirm"  class="login_input_password confirm" type="password" placeholder="确认新密码">
+        <br/>
+        <div class="error-mess error-mess-signup" >
+          <span id="error-message error-tip">{{errMsg}}</span>
+        </div>
+
+        <button class="logging" @click="vailidate">确认</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      changePsd: false,
+      username: this.$store.state.userInfo?.memberInfo?.name,
+      form: {
+        password:'',
+        newPassword: '',
+        newPassword_confirm:''
+      },
+      errMsg:''
+    }
+  },
+
+  methods: {
+    // 点击注册前置校验
+    vailidate() {
+      if(this.form.newPassword !== this.form.newPassword_confirm) {
+        this.errMsg = '密码不一致'
+      }else if(this.form.newPassword.length < 6) {
+        this.errMsg = '密码位数不能少于6位'
+      }else if(this.form.newPassword.length> 16){
+        this.errMsg = '密码位数不能大于16位'
+      }else {
+        this.errMsg = ''
+        this.handlerResetPsw()
+      }
+    },
+    handlerResetPsw() {
+      this.$axios.post('members/modifyPassword', this.form).then((res)=> {
+        if(res.code === 200) {
+          this.$emit('close')
+        }
+      })
+    },
+    changepwdModal() {
+      this.changePsd = true
+    },
+    handlerChangeUserName() {
+      this.$axios.get(`/members/modifyNickname?name=${this.username}`).then((res)=> {
+        if(res.code === 200) {
+          this.getUserInfo()
+        }
+      })
+    },
+    getUserInfo()  {
+      this.$axios.get('members/getMemberInfo').then((res)=> {
+        if(res.code === 200) {
+          this.$store.commit('setUser',res.result)
+          localStorage.setItem('userInfo',JSON.stringify(res.result))
+        }
+      })
+    },
+    resetInterfaceStatus() {
+      this.changePsd = false
+      this.form.password = ''
+      this.form.newPassword = ''
+      this.form.newPassword_confirm = ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.accountmanage-tittle {
+  color: rgb(255, 79, 79);
+  text-align: center;
+  margin: 0;
+
+  p {
+    font-size: 20px;
+    line-height: 64px;
+  }
+}
+
+.accountmanage-content {
+  .changeheader {
+    text-align: center;
+    margin: 0 24px;
+
+    span img {
+      width: 64px;
+      border-radius: 35px;
+    }
+
+    .headers {
+      margin-top: 8px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid rgb(240, 240, 240);
+      img {
+        width: 36px;
+        border-radius: 35px;
+        margin: 8px 2px 0px 2px;
+      }
+    }
+
+  }
+
+  .row-name {
+    border-top: 1px solid rgb(240, 240, 240);
+    margin: 0 24px;
+    height: 64px;
+    line-height: 64px;
+    position: relative;
+    margin-top: 25px;
+
+    span {
+      color: rgb(153, 153, 153);
+      font-size: 14px;
+      float: left;
+      width: 10%;
+    }
+
+    input {
+      width: 88%;
+      float: right;
+      height: 30px;
+      line-height: 30px;
+      text-align: right;
+      border: 0px;
+      margin-top: 12px;
+      border: none;
+      outline: medium;
+
+      &:focus {
+        text-align: right;
+        border: 1px;
+      }
+    }
+
+    p {
+      position: absolute;
+      right: 0px;
+      bottom: 0px;
+      height: 20px;
+      width: 100%;
+      color: rgb(255, 79, 79);
+      font-size: 14px;
+      line-height: 20px;
+      text-align: right;
+      display: none;
+    }
+  }
+
+  .changepwd {
+    color: rgb(51, 51, 51);
+    height: 64px;
+    font-size: 14px;
+    cursor:pointer;
+    margin: 0 24px;
+    line-height: 64px;
+    border-top: 1px solid rgb(240, 240, 240);
+    background: url(http://cn-file.17pdf.com/website/account/ic_cebian_normal.png) right 50% no-repeat;
+  }
+}
+// .changepwd-content {
+//   margin: 20px 0px;
+// }
+.login_content {
+  text-align: center;
+  font-size: 14px;
+  .error-mess {
+    position: relative;
+    font-size: 14px;
+    display: none;
+    span{
+      display: inline-block;
+      background: #808080;
+      color: rgb(255, 255, 255);
+      padding: 5px 15px;
+      border-radius: 4px;
+    }
+  }
+  .error-mess-signup {
+    position: initial;
+    clear: both;
+    margin-top: 15px;
+  }
+  .login_input_password {
+    height: 60px;
+    width: 360px;
+    border-width: 0 0 1px 0;
+    border-color: rgb(238, 238, 238);
+    padding-left: 42px;
+    padding-top: 16px;
+    line-height: 44px;
+    outline:none;
+    background: url(http://cn-file.17pdf.com/website/account/ic_login_inputpassword.png) no-repeat 0px 28px;
+    &.new {
+      background: url(http://cn-file.17pdf.com/website/account/ic_lock_new.png) no-repeat 0px 28px;
+    }
+    &.confirm {
+      background: url(http://cn-file.17pdf.com/website/account/ic_lock_sure.png) no-repeat 0px 28px;
+    }
+  }
+  .login_input_password:-webkit-autofill {
+    box-shadow: 0 0 0px 1000px white inset;
+  }
+  .logging {
+    width: 360px;
+    height: 48px;
+    font-size: 16px;
+    color: rgb(255, 255, 255);
+    border: none;
+    background-color: rgb(255, 79, 79);
+    margin-bottom: 40px;
+    border-radius: 4px;
+    outline:none;
+  }
+}
+</style>