From 0ebd2b0f894e41cf4c22d50eb9470c74b4793666 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Thu, 17 Oct 2024 10:30:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E8=B5=84=E6=96=99=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                  |   1 +
 src/assets/images/info1.png       | Bin 0 -> 201 bytes
 src/pages/account/login/index.vue |   3 +-
 src/pages/setting/list/index.vue  | 131 ++++++++
 src/pages/setting/list/info.vue   | 475 ++++++++++++++++++++++++++++++
 src/router/modules/setting.js     |  23 ++
 6 files changed, 631 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/info1.png
 create mode 100644 src/pages/setting/list/index.vue
 create mode 100644 src/pages/setting/list/info.vue
 create mode 100644 src/router/modules/setting.js

diff --git a/src/api/index.js b/src/api/index.js
index f6fe96f..2e432b5 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -8,6 +8,7 @@ export default {
   forgotPassword: `/users/users/user/forgotPassword`,
   forgotPreVerification: `/users/users/user/forgotPreVerification`,
   sendPhoneVerificationCode: `/users/users/user/sendPhoneVerificationCode`,
+  queryUserInfoDetails: `/users/users/userAccount/queryUserInfoDetails`,
 
   getUserRolesPermissionMenu: `/users/users/user-role/getUserRolesPermissionMenu`,
   getCurrentTime: `/competition/competition/management/getCurrentTime`,
diff --git a/src/assets/images/info1.png b/src/assets/images/info1.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f9ed93d9ebaaa8f3546154eda34c2487b3c11fb
GIT binary patch
literal 201
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjjKx9jP7LeL$-D$|nmt_{Lp;2b
zQx+H|EZO*z=kU#@UH|`k^6gV|>k&98>r%4ifgCgQ;Ygc(hA9aN0gR_7zihtA<J*&I
zp}XR@eQRT*;%p&qhr&jEJBNcjoLNS-4mB~8GY@9SJm7eAv4(+H;*jgn`nLZ(Jr$oA
xJ;Yepi|rOvx-Fi_dPKTA{As~Dqm?2q3=KYBlJ6H>;s-j1!PC{xWt~$(69BY$M+X1^

literal 0
HcmV?d00001

diff --git a/src/pages/account/login/index.vue b/src/pages/account/login/index.vue
index 1d75fd4..fbb0594 100644
--- a/src/pages/account/login/index.vue
+++ b/src/pages/account/login/index.vue
@@ -368,8 +368,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: calc(100vh - 43px);
-  padding-top: calc((100vh - 584px) / 2);
+  height: 100vh;
   background: url(../../../assets/images/shapes/shape1.png) (0 123px) / auto no-repeat,
     url(../../../assets/images/shapes/shape2.png) (35px 238px) / auto no-repeat,
     url(../../../assets/images/shapes/shape3.png) (0 485px) / auto no-repeat,
diff --git a/src/pages/setting/list/index.vue b/src/pages/setting/list/index.vue
new file mode 100644
index 0000000..271c0f4
--- /dev/null
+++ b/src/pages/setting/list/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="main">
+    <div class="left">
+      <div class="inner">
+        <div class="text-center">
+          <img :src="avatar" class="avatar" />
+          <el-upload :action="this.api.updateUserAvatars" name="file" :data="{ userId }" :limit="10" :show-file-list="false" :headers="headers" :on-success="changeAvatar">
+            <el-button type="text" size="small">点击更换头像</el-button>
+          </el-upload>
+        </div>
+
+        <ul class="menu">
+          <li v-for="item in typeList" :key="item.index" :class="{active: item.index == active}">
+            {{ item.title }}
+          </li>
+        </ul>
+      </div>
+    </div>
+    <info class="flex-1" ref="info" @updateStatus="updateStatus" @back="back"></info>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+import Setting from '@/setting'
+import util from '@/libs/util'
+import info from './info'
+export default {
+    data() {
+      return {
+        headers: {
+          token: util.local.get(Setting.tokenKey)
+        },
+        typeList: [
+          {
+            index: '1',
+            title: '用户信息'
+          }
+        ],
+        active: '1',
+        edited: false
+      };
+    },
+    components: { info },
+    computed: {
+      ...mapState('user', [
+        'avatar', 'userId'
+      ]),
+    },
+    // 离开的时候判断是否有保存更改的信息,没有则拦截并提示
+    beforeRouteLeave(to, from, next) {
+      if(this.edited){
+        this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', {
+          type: 'warning'
+        }).then(() => {
+          this.$refs.info.submit()
+          next()
+        }).catch(() => {
+          next()
+        })
+      }else{
+        next()
+      }
+    },
+    mounted() {
+        
+    },
+    methods: {
+      ...mapMutations('user', [
+        'setAvatar'
+      ]),
+      changeAvatar(res) {
+        this.setAvatar(res.data)
+      },
+      updateStatus(status){
+        this.edited = status
+      },
+      // 返回
+      back() {
+        if(this.edited){
+          this.edited = false
+          this.$confirm(`您所更改的内容未更新，是否更新？`, '提示', {
+            type: 'warning'
+          }).then(() => {
+            this.$refs.info.submit()
+            this.$router.back()
+          }).catch(() => {
+            this.$router.back()
+          })
+        }else{
+          this.$router.back()
+        }
+      }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.main{
+  display: flex;
+  margin: 0 auto;
+  .left{
+    margin-right: 12px;
+    background-color: #fff;
+    box-shadow: 2px 0px 6px 0px #EEEEEE;
+    .inner{
+      width: 170px;
+      padding: 20px 0;
+    }
+    .avatar{
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+    .menu{
+      margin-top: 32px;
+      li{
+        padding: 0 20px;
+        color: #303133;
+        font-size: 14px;
+        line-height: 38px;
+        cursor: pointer;
+        &.active{
+          color: #fff;
+          background-color: $main-color;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/setting/list/info.vue b/src/pages/setting/list/info.vue
new file mode 100644
index 0000000..14f27e6
--- /dev/null
+++ b/src/pages/setting/list/info.vue
@@ -0,0 +1,475 @@
+<template>
+  <div class="relative" v-loading="loading">
+    <div class="page">
+      <h6 class="l-title"><img src="@/assets/images/info1.png" alt=""> 基本信息</h6>
+      <div class="page-content">
+        <ul class="list">
+          <li>
+            <label>姓名：</label>
+            <el-input placeholder="请输入姓名" type="text" v-model="form.realName" />
+          </li>
+          <li>
+            <label>性别：</label>
+            <el-select size="small" v-model="form.sex">
+              <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option>
+            </el-select>
+          </li>
+          <li>
+            <label>账号：</label>
+            <el-input class="m-r-10" type="text" size="small" v-model="form.username"></el-input>
+            <!-- <el-button type="text" size="small" @click="showAccount">修改</el-button> -->
+          </li>
+          <li>
+            <label>工号：</label>
+            <el-input size="small" v-model="form.jobNumber" clearable></el-input>
+          </li>
+          <li>
+            <label>邮箱：</label>
+            <el-input class="m-r-10" size="small" v-model="form.email"></el-input>
+            <!-- <el-button v-if="form.email" type="text" size="small" @click="bindEmail">更换</el-button>
+            <el-button v-else type="text" size="small" @click="bindEmail">添加</el-button> -->
+          </li>
+          <li>
+            <label>手机号：</label>
+            <el-input class="m-r-10" type="text" size="small" maxlength="11" v-model="form.phone"></el-input>
+            <!-- <el-button type="text" size="small" @click="bindPhone">{{ form.phone ? '更换' : '绑定' }}</el-button>
+            <el-button v-if="form.phone" type="text" size="small" @click="unbind">解绑</el-button> -->
+          </li>
+          <li>
+            <label>密码：</label>
+            <el-input class="m-r-10" size="small" value="******" disabled></el-input>
+            <el-button type="text" size="small" @click="bindPassword">修改</el-button>
+          </li>
+        </ul>
+      </div>
+      <div class="btn-wrap">
+        <el-button size="small" v-throttle @click="$emit('back')">取消</el-button>
+        <el-button type="primary" size="small" v-throttle @click="submit">更新</el-button>
+      </div>
+    </div>
+    <el-dialog :title="form.email ? '更换邮箱' : '绑定邮箱'" :visible.sync="emailVisible" :close-on-click-modal="false"
+      @close="closeEmail" width="30%">
+      <el-form ref="form" :model="form" label-width="60px">
+        <el-form-item label="邮箱">
+          <el-input placeholder="请输入邮箱" v-model="email"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <div class="flex-between">
+            <el-input v-model="emailCode" placeholder="请输入验证码" maxlength="6"></el-input>
+            <el-button style="margin-left: 10px" type="text" @click="sendEmailCode" :disabled="emailDisabled">{{
+              emailBtnText }}</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="emailVisible = false">取 消</el-button>
+        <el-button type="primary" @click="emailSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog :title="form.phone ? '更换手机号' : '绑定手机号'" :visible.sync="phoneVisible" :close-on-click-modal="false"
+      @close="closePhone" width="30%">
+      <el-form ref="form" :model="form" label-width="60px">
+        <el-form-item label="手机号">
+          <el-input style="width: 404px;" placeholder="请输入手机号" v-model="phone" maxlength="11"></el-input>
+        </el-form-item>
+        <el-form-item label="验证码">
+          <div class="flex-between">
+            <el-input v-model="phoneCode" placeholder="请输入验证码" maxlength="6"></el-input>
+            <el-button style="margin-left: 10px" type="text" @click="sendPhoneCode" :disabled="phoneDisabled">{{
+              phoneBtnText }}</el-button>
+          </div>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="phoneVisible = false">取 消</el-button>
+        <el-button type="primary" @click="phoneSubmit">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="更换密码" :visible.sync="pwdVisible" :close-on-click-modal="false" @close="closePassword" width="30%">
+      <el-form ref="pwdForm" :model="form" label-width="60px">
+        <el-form-item label="原密码">
+          <el-input type="password" v-model="pwdForm.password" placeholder="请输入原密码"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码">
+          <el-input type="password" v-model="pwdForm.newPassword" placeholder="请输入新密码"
+            @keyup.enter.native="editPassword"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码">
+          <el-input type="password" v-model="pwdForm.reNewPassword" placeholder="请确认新密码"
+            @keyup.enter.native="editPassword"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="pwdVisible = false">取 消</el-button>
+        <el-button type="primary" @click="editPassword">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="修改账号" :visible.sync="accountVisible" :close-on-click-modal="false" width="30%">
+      <el-form label-width="70px">
+        <el-form-item label="账号">
+          <el-input v-model="editUsername" placeholder="请输入账号"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="accountVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="confirmAccount">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Setting from '@/setting'
+import util from '@/libs/util'
+import { mapState, mapMutations } from 'vuex'
+export default {
+  data () {
+    return {
+      loading: false,
+      editUsername: '',
+      accountVisible: false,
+      updateTime: 0,
+      token: util.local.get(Setting.tokenKey),
+      form: {
+        userName: "",
+        name: "",
+        jobNumber: "",
+        password: "",
+        phone: "",
+        email: "",
+        sex: 1,
+      },
+      emailVisible: false,
+      pwdVisible: false,
+      phoneVisible: false,
+      showArch: false,
+      pwdForm: {
+        password: "",
+        newPassword: "",
+        reNewPassword: ""
+      },
+      sexList: [
+        {
+          name: "男",
+          value: 1
+        },
+        {
+          name: "女",
+          value: 2
+        }
+      ],
+      email: "",
+      emailBtnText: "发送验证码",
+      emailCode: "",
+      emailDisabled: false,
+      emailTimer: null,
+      phone: "",
+      phoneBtnText: "发送验证码",
+      phoneCode: "",
+      phoneDisabled: false,
+      phoneTimer: null,
+      emailOpener: "",
+      phoneOpener: "",
+      originAccount: "",
+      accountReapeat: false
+    };
+  },
+  computed: {
+    ...mapState("user", [
+      "userId", "avatar"
+    ])
+  },
+  watch: {
+    // 监听信息是否有更改,有的话页面离开的时候要询问是否要保存
+    form: {
+      handler () {
+        this.updateTime++
+        if (this.updateTime > 1) this.$emit('updateStatus', this.updateTime > 1)
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    // this.getData()
+  },
+  methods: {
+    ...mapMutations('user', [
+      'setUserName'
+    ]),
+    // 获取用户信息
+    getData () {
+      this.loading = true
+      this.$get(this.api.queryUserInfoDetails).then(({ data }) => {
+        this.form = data
+        this.loading = false
+      }).catch(err => { })
+    },
+    // 显示修改账号弹框
+    showAccount () {
+      this.accountVisible = true
+    },
+    // 修改账号
+    confirmAccount () {
+      if (this.editUsername) {
+        form.username = this.editUsername
+        this.accountVisible = false
+        const { form } = this
+        this.$put(this.api.user, form).then(res => {
+          this.setUserName(form.username)
+          this.$message.success("提交成功！")
+        }).catch(res => { })
+      } else {
+        util.errorMsg('请输入账号')
+      }
+    },
+    bindEmail () {
+      this.email = this.form.email
+      this.emailVisible = true
+    },
+    bindPhone () {
+      this.phone = this.form.phone
+      this.phoneVisible = true
+    },
+    // 解绑手机号
+    unbind () {
+      this.$confirm('确定要解绑该手机号吗？', '提示', {
+        type: 'warning'
+      }).then(() => {
+        this.$get(this.api.unbindMobilePhone).then(res => {
+          this.$message.success('解绑成功')
+          this.getData()
+        }).catch(res => { })
+      }).catch(() => { })
+    },
+    bindPassword () {
+      this.pwdVisible = true
+    },
+    editPassword () {
+      const data = this.pwdForm
+      if (!data.password) return util.warningMsg("请输入原密码")
+      if (!data.newPassword) return util.warningMsg("请输入新密码")
+      if (!data.reNewPassword) return util.warningMsg("请确认新密码")
+      if (data.newPassword.length < 6 || data.reNewPassword.length < 6) return util.warningMsg("请输入6位数以上的密码")
+      if (data.newPassword !== data.reNewPassword) return util.warningMsg("输入的新密码不一致，请重新确认")
+      if (data.password === data.newPassword) return util.warningMsg("原密码跟新密码不能一致")
+      this.$put(this.api.pwd, {
+        id: this.form.id,
+        oldPwd: data.password,
+        newPwd: data.newPassword
+      }).then(res => {
+        util.successMsg("更换成功")
+        this.pwdVisible = false
+      }).catch(err => { })
+    },
+    closePassword () {
+      this.pwdForm = {
+        password: "",
+        newPassword: "",
+        reNewPassword: ""
+      }
+    },
+    submit () {
+      const { form } = this
+      this.$put(this.api.user, {
+        id: form.id,
+        jobNumber: form.jobNumber,
+        phone: form.phone,
+        realName: form.realName,
+        username: form.username,
+        email: form.email,
+        sex: form.sex,
+      }).then(res => {
+        this.$emit('updateStatus', false)
+        this.setUserName(form.realName)
+        this.$message.success("提交成功！")
+      }).catch(res => { })
+    },
+    emailCountdown () {
+      let count = 60;
+      if (!this.emailTimer) {
+        this.emailDisabled = true;
+        this.emailTimer = setInterval(() => {
+          console.log("倒计时中");
+          if (count > 0) {
+            count--;
+            this.emailBtnText = `${count}秒后重试`;
+          } else {
+            this.emailDisabled = false;
+            clearInterval(this.emailTimer);
+            this.emailTimer = null;
+            this.emailBtnText = `发送验证码`;
+          }
+        }, 1000);
+      }
+    },
+    phoneCountdown () {
+      let count = 60;
+      if (!this.phoneTimer) {
+        this.phoneDisabled = true;
+        this.phoneTimer = setInterval(() => {
+          console.log("倒计时中");
+          if (count > 0) {
+            count--;
+            this.phoneBtnText = `${count}秒后重试`;
+          } else {
+            this.phoneDisabled = false;
+            clearInterval(this.phoneTimer);
+            this.phoneTimer = null;
+            this.phoneBtnText = `发送验证码`;
+          }
+        }, 1000);
+      }
+    },
+    closeEmail () {
+      if (!this.emailDisabled) {
+        this.emailCode = "";
+      }
+    },
+    sendEmailCode () {
+      if (!this.email) return util.warningMsg("请输入邮箱")
+      if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg("请输入正确的邮箱")
+      this.$post(this.api.sendPhoneOrEmailCode, {
+        email: this.email,
+        types: 1
+      }).then(res => {
+        if (res.message.opener) {
+          this.emailCountdown();
+          this.emailOpener = res.message.opener;
+        } else {
+          util.errorMsg(res.message);
+        }
+      }).catch(res => { })
+    },
+    emailSubmit () {
+      if (!this.email) return util.warningMsg("请输入邮箱")
+      if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(this.email)) return util.warningMsg("请输入正确的邮箱")
+      if (!this.emailCode) return util.warningMsg("请输入验证码")
+      this.$put(this.api.bindPhoneOrEmail, {
+        userId: this.userId,
+        email: this.email,
+        types: 1,
+        code: this.emailCode,
+        opener: this.emailOpener
+      }).then(res => {
+        util.successMsg("绑定成功")
+        this.form.email = this.email
+        this.emailVisible = false
+      }).catch(res => { })
+    },
+    closePhone () {
+      if (!this.emailDisabled) {
+        this.emailCode = "";
+      }
+    },
+    sendPhoneCode () {
+      if (!this.phone) return util.warningMsg("请输入手机号");
+      if (!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg("请输入正确的手机号");
+      let data = {
+        userId: this.userId,
+        phone: this.phone,
+        types: 2
+      };
+      this.$post(this.api.sendPhoneOrEmailCode, data).then(res => {
+        if (res.message.opener) {
+          this.phoneCountdown();
+          this.phoneOpener = res.message.opener;
+        } else {
+          util.errorMsg(res.message);
+        }
+      }).catch(res => {
+      });
+    },
+    phoneSubmit () {
+      if (!this.phone) return util.warningMsg("请输入手机号");
+      if (!/^1[3456789]\d{9}$/.test(this.phone)) return util.warningMsg("请输入正确的手机号");
+      if (!this.phoneCode) return util.warningMsg("请输入验证码");
+      let data = {
+        userId: this.userId,
+        phone: this.phone,
+        types: 2,
+        code: this.phoneCode,
+        opener: this.phoneOpener
+      };
+      this.$post(this.api.bindPhoneOrEmail, data).then(res => {
+        util.successMsg("绑定成功");
+        this.form.phone = this.phone;
+        this.phoneVisible = false;
+      }).catch(res => {
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100%;
+}
+
+.l-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  color: #333;
+
+  img {
+    margin-right: 5px;
+  }
+}
+
+.list {
+  .line {
+    display: flex;
+    margin-bottom: 24px;
+  }
+
+  .el-input,
+  .el-select {
+    width: 220px;
+
+    .el-input__inner {
+      border-color: #CACFDB;
+    }
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+
+    &>label {
+      width: 100px;
+      margin-right: 5px;
+      text-align: right;
+      font-size: 14px;
+      color: #4c4c4c;
+      white-space: nowrap;
+    }
+
+    .el-select .el-input.is-disabled .el-input__inner {
+      border-color: #ddd;
+    }
+
+    .val {
+      margin-right: 15px;
+      color: #606266;
+      font-size: 14px;
+    }
+  }
+}
+
+.btn-wrap {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 12px 0;
+  text-align: center;
+  background-color: #fff;
+
+  .el-button {
+    width: 80px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/modules/setting.js b/src/router/modules/setting.js
new file mode 100644
index 0000000..6c2a8fa
--- /dev/null
+++ b/src/router/modules/setting.js
@@ -0,0 +1,23 @@
+import BasicLayout from "@/layouts/home";
+
+const meta = {};
+
+const pre = "setting-";
+
+export default {
+  path: "/setting",
+  name: "setting",
+  redirect: {
+    name: `${pre}person`
+  },
+  meta,
+  component: BasicLayout,
+  children: [
+    {
+      name: `${pre}person`,
+      path: `person`,
+      component: () => import("@/pages/setting/list"),
+      meta: { title: "个人中心" }
+    }
+  ]
+};
\ No newline at end of file