pbl-teacher/src/components/pages/data.vue

<template>
  <div class="pb_content">
    <div class="pb_head">
      <span>我的资料</span>
    </div>
    <div class="pb_content_body">
      <div style="width: 500px">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input
              v-model="ruleForm.name"
              style="width: 250px"
              placeholder="请输入名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="mail">
            <el-input
              v-model="ruleForm.mail"
              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="请输入手机号码"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="学校选择" prop="school">
            <el-input
              v-model="ruleForm.school"
              style="width: 300px"
              disabled
            ></el-input>
            <!-- <el-select v-model="ruleForm.school" placeholder="请选择学校">
              <el-option label="深圳实验学校" value="ssti"></el-option>
              <el-option label="深圳第二职业学校" value="erzhi"></el-option>
              <el-option label="深圳职业技术学院" value="jishu"></el-option>
              <el-option label="深圳信息技术学院" value="xinxi"></el-option>
            </el-select> -->
          </el-form-item>
          <el-form-item label="个人简介" prop="desc">
            <el-input
              type="textarea"
              v-model="ruleForm.desc"
              :rows="5"
              resize="none"
              placeholder="想说点什么..."
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >修改</el-button
            >
          </el-form-item>
        </el-form>
      </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 {
      ruleForm: {
        name: "",
        type: [],
        sex: "男",
        desc: "",
        mail: "",
        phone: "",
        school: "",
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        name: [{ required: true, message: "请输入你的名字", trigger: "blur" }],
        mail: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入你的手机号码", trigger: "blur" },

          {
            validator: validatePass1,
            trigger: "blur",
          },
        ],
        // school: [{ required: true, message: "请选择学校", trigger: "change" }],
      },
    };
  },
  methods: {
    getUser() {
      let params = { uid:this.$store.state.userInfo.userid };
      this.ajax
        .get(this.$store.state.api + "getUser", params)
        .then((res) => {
          this.userinfo = res.data[0][0];
          // window.sessionStorage.setItem(
          //   "userInfo",
          //   JSON.stringify(this.userinfo)
          // );
          this.$cookies.set("userInfo",this.userinfo,-1)
          this.$store.commit("update", ["userInfo", this.userinfo]);
          this.getClass();
          console.log(res.data[0][0]);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    submitForm(formName) {
      this.$refs[formName];
      let params = [
        {
          uid: this.$store.state.userInfo.userid,
          n: this.ruleForm.name,
          sex: this.ruleForm.sex == "男" ? "0" : "1",
          mail: this.ruleForm.mail,
          intro: this.ruleForm.desc,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updateTeacherDetail", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getUser();
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
    getDetail() {
      let params = { uid: this.$store.state.userInfo.userid };
      this.ajax
        .get(this.$store.state.api + "findteacherDeatail", params)
        .then((res) => {
          res.data[0][0].sex = res.data[0][0].sex ? "女" : "男";
          this.ruleForm = res.data[0][0];
        })
        .catch((err) => {
          // this.$message.error("删除失败");
          console.error(err);
        });
    },
  },
  created() {
    this.getDetail();
  },
};
</script>

<style scoped>
</style>