EvenManage/src/components/pages/munAdmin/data.vue

<template>
  <div class="pb_content">
    <div
      class="pb_head"
      style="
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div>
        <span>我的资料</span>
      </div>
      <div v-if="$store.state.userInfo.type == 1">
        <el-button @click="goTo('/eventCenter')" type="primary" size="small"
          >返回</el-button
        >
      </div>
    </div>
    <div class="pb_content_body" style="position: relative; width: 100%">
      <div style="width: 100%; margin: 0px auto">
        <div
          :class="
            $store.state.userInfo.type == 1 ? 'isDataNav' : 'data_nav'
          "
        >
          <span @click="type = 1" :class="{ active: type == 1 }">我的资料</span>
          <span @click="type = 2" :class="{ active: type == 2 }">修改密码</span>
        </div>
        <el-form
          v-if="type == 1"
          :model="ruleForm"
          :rules="rules"
          autocomplete="off"
          ref="ruleForm"
          label-width="100px"
          :class="
            this.$store.state.userInfo.type == 1
              ? 'isDemoRuleForm'
              : 'demo-ruleForm'
          "
        >
          <!-- <el-form-item label="姓名" prop="teacherName">
            <el-input
              v-model="ruleForm.name"
              style="width: 250px"
              placeholder="请输入名字"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="ruleForm.name"
              style="width: 300px"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              style="width: 300px"
              placeholder="请输入手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号">
            <el-input
              v-model="ruleForm.username"
              disabled
              style="width: 300px"
              placeholder="请输入昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="地区" prop="sBySchool">
            <el-input
              v-model="ruleForm.region"
              disabled
              style="width: 300px"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="学校" prop="sBySchool">
            <el-input
              v-model="ruleForm.school"
              disabled
              style="width: 300px"
              placeholder=""
            ></el-input>
            <!-- <el-select v-model="ruleForm.sBySchool" clearable placeholder="请选择学校" disabled>
              <el-option :value="ruleForm.sBySchool"> </el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="个人简介" prop="intro">
            <el-input
              v-model="ruleForm.remark"
              type="textarea"
              :rows="5"
              resize="none"
              placeholder="想说点什么..."
              style="width: 300px"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >修改</el-button
            >
          </el-form-item>
        </el-form>
        <div
          :class="
            this.$store.state.userInfo.type == 1 ? 'isPassword' : 'password'
          "
          v-if="type == 2"
        >
          <div class="input_box">
            <span>原密码</span>
            <el-input
              class="input"
              v-model="opassword"
              placeholder="请输入原密码"
            ></el-input>
          </div>
          <div class="input_box">
            <span>输入新密码</span>
            <div style="position: relative">
              <el-input
                :type="isLook ? 'type' : 'password'"
                class="input"
                v-model="password"
                placeholder="请输入修改密码"
              ></el-input>
              <div class="eye" @click="changeEye">
                <img :src="isLook ? eye : eyeOff" alt="" />
              </div>
            </div>
          </div>
          <div class="input_box">
            <span>再次输入新密码</span>
            <div style="position: relative">
              <el-input
                :type="isLook ? 'type' : 'password'"
                class="input"
                v-model="password1"
                placeholder="请再次输入修改密码"
              ></el-input>
              <div class="eye" @click="changeEye">
                <img :src="isLook ? eye : eyeOff" alt="" />
              </div>
            </div>
          </div>
          <div class="input_box">
            <span></span>
            <div class="input">
              <el-button type="primary" @click="updatePassword">修改</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value == "") {
        return;
      }
      var reg =
        /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的邮箱"));
      } else {
        callback();
      }
    };
    var validatePass1 = (rule, value, callback) => {
      var reg = /^1\d{10}$/;
      if (!reg.test(value)) {
        callback(new Error("请输入正确的手机号码"));
      } else {
        callback();
      }
    };
    return {
      type: 1,
      ruleForm: {
        name: "",
        type: "",
        region: "",
        phone: "",
        school: "",
        remark: "",
      },
      opassword: "",
      password: "",
      password1: "",
      userinfo: "",
      schoolJuri: [],
      orgJuri: [],
      isLook: false,
      eyeOff: require("../../../assets/icon/eyeOff.png"),
      eye: require("../../../assets/icon/eye.png"),
      userid: this.$store.state.userInfo.userid,
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        name: [{ required: true, message: "请输入你的名字", trigger: "blur" }],
        mail: [
          {
            required: true,
            message: "请输入你的邮箱",
            trigger: "blur",
          },
        ],
        phone: [
          // { required: true, message: "请输入你的手机号码", trigger: "blur" },

          {
            required: true,
            validator: validatePass1,
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    submitForm(formName) {
      debugger;
      this.$refs[formName];
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = [
            {
              username: this.ruleForm.name,
              phone: this.ruleForm.phone,
              intro: this.ruleForm.remark,
              userid: this.userid,
            },
          ];
          this.ajax
            .post(this.$store.state.api + "updateRaceUser", params)
            .then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.getUser();
            })
            .catch((err) => {
              this.$message.error("修改失败");
              console.error(err);
            });
        } else {
          return false;
        }
      });
    },
    changeEye() {
      this.isLook = !this.isLook;
    },
    getUser() {
      let params = { uid: this.userid };
      this.ajax
        .get(this.$store.state.api + "getRaceUser", params)
        .then((res) => {
          this.userinfo = res.data[0][0];
          // this.$cookies.set("userInfo", this.userinfo, -1);
          this.$cookies.set("teacherInfo", res.data[0][0], -1);
          this.$store.commit("update", ["userInfo", this.userinfo]);
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getDetail() {
      let params = { uid: this.userid };
      this.ajax
        .get(this.$store.state.api + "getRaceUser", params)
        .then((res) => {
          if (res.data[0][0]) {
            this.ruleForm = res.data[0][0];
            console.log(res.data[0][0]);
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    updatePassword() {
      if (this.password.length < 6) {
        this.$message.error("密码长度不少于6位");
        return;
      } else if (this.password != this.password1) {
        this.$message.error("两次新密码不相同");
        return;
      }
      let params = [
        {
          userid: this.userid,
          opassword: this.opassword,
          password: this.password,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updatePassword1", params)
        .then((res) => {
          if (res.data[0] && res.data[0].success == 1) {
            this.$message.success("修改成功");
            this.opassword = "";
            this.password = "";
          } else {
            this.$message.error("修改失败,原密码不正确");
          }
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
  },
  created() {
    this.getDetail();
  },
};
</script>

<style scoped>
.formTop {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.formTop >>> .el-form {
  margin: 0 auto;
}

.tx {
  width: 100px;
  /* margin-right: 15px; */
  min-width: 50px;
  min-height: 50px;
}

.emailImg {
  width: 30px;
  margin-right: 5px;
}

.tx > img,
.emailImg > img {
  width: 100%;
  height: 100%;
}

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.name {
  color: #3c88dd;
  font-size: 20px;
  margin-bottom: 10px;
}

.email {
  color: #acacac;
  font-size: 18px;
}

.rightBottom {
  display: flex;
  align-items: center;
}

.demo-ruleForm,
.isDemoRuleForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: #fff;
  margin-top: 30px;
}
.isDemoRuleForm {
  align-items: center;
}

/* .demo-ruleForm >>> .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.demo-ruleForm >>> .el-form-item__label:nth-child(3) {
  content: "";
} */
.demo-ruleForm >>> .el-form-item__content {
  width: 300px;
}

.data_nav,
.isDataNav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 10px 150px;
}

.isDataNav {
  justify-content: center;
  width: 100%;
  margin: 60px 0 10px 0;
}

.data_nav span,
.isDataNav span {
  box-sizing: border-box;
  padding: 8px 5px;
  cursor: pointer;
  color: #444444;
  height: 35px;
}

.data_nav span + span,
.isDataNav span + span {
  margin-left: 20px;
}

.data_nav .active,
.isDataNav .active {
  color: #4aa3ff;
  border-bottom: 2px solid #409eff;
}

.password,
.isPassword {
  height: 511px;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
}

.isPassword {
  padding: 50px 0 0 0;
  align-items: center;
}

.input_box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.input_box span {
  width: 100px;
  font-size: 14px;
  text-align: right;
  padding: 0 12px 0 0;
}

.input_box .input {
  width: 300px;
}

.input_box + .input_box {
  margin-top: 20px;
}

.eye {
  position: absolute;
  right: 10px;
  top: 8px;
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.eye > img {
  width: 100%;
  height: 100%;
}
</style>