|
|
@@ -1,15 +1,356 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 我的资料
|
|
|
+ <div class="pb_content">
|
|
|
+ <div class="pb_head">
|
|
|
+ <div>
|
|
|
+ <span>我的资料</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- export default {
|
|
|
-
|
|
|
- }
|
|
|
- </script>
|
|
|
-
|
|
|
- <style scoped>
|
|
|
-
|
|
|
- </style>
|
|
|
+ <div class="pb_content_body" style="position: relative; width: 100%">
|
|
|
+ <div style="width: 100%; margin: 0px auto">
|
|
|
+ <!-- <div class="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" ref="ruleForm" label-width="100px"
|
|
|
+ class="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="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>
|
|
|
+ <el-input class="input" v-model="password" placeholder="请输入修改密码"></el-input>
|
|
|
+ </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: "",
|
|
|
+ userinfo: "",
|
|
|
+ schoolJuri: [],
|
|
|
+ orgJuri: [],
|
|
|
+ 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: {
|
|
|
+ submitForm(formName) {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ userid: this.userid,
|
|
|
+ opassword: this.opassword,
|
|
|
+ password: this.password,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ this.ajax
|
|
|
+ .post(this.$store.state.api + "updatePassword", 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 {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+/* .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 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.data_nav span {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 8px 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #444444;
|
|
|
+ height: 35px;
|
|
|
+}
|
|
|
+
|
|
|
+.data_nav span+span {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.data_nav .active {
|
|
|
+ color: #4aa3ff;
|
|
|
+ border-bottom: 2px solid #409eff;
|
|
|
+}
|
|
|
+
|
|
|
+.password {
|
|
|
+ height: 511px;
|
|
|
+ padding: 50px 0 0 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ /* display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: column; */
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
