FE_IASF_server/src/pages/setting/list/info.vue

<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"
                   @click="$emit('back')">取消</el-button>
        <el-button type="primary"
                   size="small"
                   @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.$post(this.api.queryUser, Util.rsa(this.userId)).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.$post(this.api.updateUser, Util.rsa(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.$post(this.api.updateUser, Util.rsa({
        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>