pbl-student-table/src/components/mine.vue

<template>
  <div class="pb_content">
    <div class="pb_content_body">
      <div class="body_student">
        <!-- <div class="student_head">
					<div class="box_course">
						<div class="wheel">
							<img
								:src="
									studentMessage.headportrait != null
										? studentMessage.headportrait
										: tx
								"
								alt=""
							/>
						</div>
						<div class="right_box">
							<div class="right_box_title">{{ studentMessage.name }}</div>
							<div class="people">
								<div>
									<span>班级：</span
									><span style="color: #999">{{ studentMessage.cname }}</span>
								</div>
								<div style="margin-left: 50px">
									<span>所属学校：</span
									><span style="color: #999">{{ studentMessage.sname }}</span>
								</div>
							</div>
							<div>
								<span>手机号码：</span
								><span style="color: #999">{{
									studentMessage.phonenumber
								}}</span>
							</div>
						</div>
					</div>
				</div> -->
        <div class="student_body">
          <div class="tx">
            <img
              :src="ruleForm.headportrait != null ? ruleForm.headportrait : tx"
              alt=""
            />
          </div>
          <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="phonenumber">
              <el-input
                disabled
                v-model="ruleForm.phonenumber"
                style="width: 300px"
                placeholder="请输入手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="组织：" prop="sname">
              <el-input
                disabled
                v-model="ruleForm.sname"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="班级：" prop="cname">
              <el-input
                disabled
                v-model="ruleForm.cname"
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item label="个人简介：" prop="intro">
              <el-input
                v-model="ruleForm.intro"
                type="textarea"
                :rows="5"
                resize="none"
                placeholder="想说点什么..."
                style="width: 300px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="
                  background: #41cda6;
                  border-color: #41cda6;
                  width: 200px;
                  height: 20px;
                  line-height: 0px;
                "
                @click="submitForm('ruleForm')"
                >修改</el-button
              >
            </el-form-item>
          </el-form>
        </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 {
      studentMessage: [],
      tx: require("../assets/tx.png"),
      userid: this.$route.query.userid,
      ruleForm: {
        name: "",
        sex: "男",
        intro: "",
        mail: "",
        phonenumber: "",
        sname: "",
        headportrait: "",
        cname: "",
      },
      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",
          },
        ],
      },
    };
  },
  methods: {
    goTo(path) {
      this.$router.push(path);
    },
    selectSDetail() {
      let params = {
        uid: this.userid,
      };
      this.ajax
        .get(this.$store.state.api + "selectSDetail", params)
        .then((res) => {
          res.data[0][0].sex = res.data[0][0].sex ? "女" : "男";
          this.ruleForm = res.data[0][0];
          console.log(this.ruleForm);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    submitForm(formName) {
      this.$refs[formName];
      let params = [
        {
          uid: this.userid,
          sname: this.ruleForm.name,
          ph: this.ruleForm.phonenumber,
          sex: this.ruleForm.sex == "男" ? "0" : "1",
          email: this.ruleForm.mail == null ? "" : this.ruleForm.mail,
          js: this.ruleForm.intro == null ? "" : this.ruleForm.intro,
        },
      ];
      this.ajax
        .post(this.$store.state.api + "updateUser", params)
        .then((res) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.selectSDetail();
        })
        .catch((err) => {
          this.$message.error("修改失败");
          console.error(err);
        });
    },
  },
  created() {
    this.selectSDetail();
  },
};
</script>

<style scoped>
.body_student {
  margin: 0px auto;
  width: 98%;
  height: 100%;
}
.student_head {
  width: 80%;
  margin: 0 auto;
  background: #fff;
  height: 30%;
}
.wheel > img， .mine_pic > img {
  width: 100%;
  height: 100%;
}
.box_course {
  display: flex;
  padding: 35px 0 25px 60px;
  align-items: center;
}
.wheel {
  width: 210px;
}
.right_box {
  display: flex;
  flex-direction: column;
  margin-left: 30px;
  /* justify-content: space-around; */
}
.right_box_title {
  font-size: 23px;
}
.people {
  display: flex;
  margin: 30px 0 15px 0px;
}
.student_body {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  min-height: 1000px;
  display: flex;
  padding: 5% 0 0 0;
  justify-content: center;
}
.mine_pic {
  width: 120px;
  height: 116px;
  margin: 0 auto;
}
.box_three_pic {
  margin: 0 auto;
  width: 80%;
  padding: 50px 0 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.pic_box {
  text-align: center;
  width: 33%;
  cursor: pointer;
  margin-bottom: 100px;
}
.pic_box > div:nth-child(2) {
  margin-top: 12px;
}
.tx {
  width: 200px;
  height: 200px;
}
.tx > img {
  width: 100%;
  height: 100%;
}
</style>