教学资源页面开发，分页，音频，类型图，下载，个人中心资料修改，密码修改，校验

黄何裕

2024-07-15 56bc0990597bf3d9667b97b98bcfbb9092ad9df6

 src/views/personal-center/index.vue

@@ -40,7 +40,7 @@
                    {{ userData.className.join(",") }}
                  </el-form-item>
                  <el-form-item label="注册时间">
                    {{ timestampToDate(userData.createTime) }}
                    {{ userData.createTime }}
                  </el-form-item>
                </el-form>
              </div>
@@ -56,9 +56,10 @@
                  label-width="auto"
                  style="max-width: 600px"
                  :rules="informationRules"
                  ref="informationFormRef"
                >
                  <el-form-item label="真实姓名" prop="name">
                    <el-input v-model="informationForm.name" />
                  <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="informationForm.realName" />
                  </el-form-item>
                  <el-form-item label="年龄">
                    <el-input v-model="informationForm.age" />
@@ -77,14 +78,19 @@
                      v-model="informationForm.birthDay"
                      type="date"
                      placeholder="Pick a day"
                      :size="size"
                    />
                  </el-form-item>
                  <el-form-item label="手机" prop="phone">
                    <el-input v-model="informationForm.phone" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">更新</el-button>
                    <div class="submit-box">
                      <el-button
                        type="primary"
                        @click="informationSubmit(informationFormRef)"
                        >更新</el-button
                      >
                    </div>
                  </el-form-item></el-form
                ></el-tab-pane
              >
@@ -93,15 +99,38 @@
                  :model="passwordForm"
                  label-width="auto"
                  style="max-width: 600px"
                  :rules="passwordRules"
                  ref="passwordFormRef"
                >
                  <el-form-item label="旧密码">
                    <el-input v-model="passwordForm.name" />
                  <el-form-item label="旧密码" prop="oldPassword">
                    <el-input
                      v-model="passwordForm.oldPassword"
                      type="password"
                      show-password
                    />
                  </el-form-item>
                  <el-form-item label="新密码">
                    <el-input v-model="passwordForm.name" />
                  <el-form-item label="新密码" prop="newPassword">
                    <el-input
                      v-model="passwordForm.newPassword"
                      type="password"
                      show-password
                    />
                  </el-form-item>
                  <el-form-item label="确认密码">
                    <el-input v-model="passwordForm.name" />
                  <el-form-item label="确认密码" prop="newPasswordA">
                    <el-input
                      v-model="passwordForm.newPasswordA"
                      type="password"
                      show-password
                    />
                  </el-form-item>
                  <el-form-item>
                    <div class="submit-box">
                      <el-button
                        type="primary"
                        @click="passwordSubmit(passwordFormRef)"
                        >保存</el-button
                      >
                    </div>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
@@ -115,17 +144,24 @@

<script setup>
import { ref } from "vue";
import { uploadImg } from "@/api/modules/personalCenter.js";
import { uploadImg, userUpdate,passwordUpdate } from "@/api/modules/personalCenter.js";
import { ElMessage } from "element-plus";

const activeName = ref("information");
const userData = ref(JSON.parse(localStorage.getItem("user")).userInfo);
const informationFormRef = ref();
const passwordFormRef = ref();
const informationForm = ref({
  name: userData.value.realName,
  realName: userData.value.realName,
  sex: userData.value.sex,
  age: userData.value.age,
  phone: userData.value.phone,
  birthDay: userData.value.birthDay,
});
const passwordForm = ref({
  oldPassword: "",
  newPassword: "",
  newPasswordA: "",
});
// 手机号验证逻辑
const validatePhone = (rule, value, callback) => {
@@ -136,15 +172,45 @@
    callback();
  }
};

const validatePassword = (rule, value, callback) => {
  if (!/[A-Z]/.test(value)) {
    callback(new Error("密码必须包含至少一个大写字母"));
  } else if (!/[a-z]/.test(value)) {
    callback(new Error("密码必须包含至少一个小写字母"));
  } else if (!/[0-9]/.test(value)) {
    callback(new Error("密码必须包含至少一个数字"));
  } else {
    callback();
  }
};
const validatePasswordA = (rule, value, callback) => {
  if (value !== passwordForm.value.newPassword) {
    callback(new Error("两次输入密码不同！"));
  } else {
    callback();
  }
};
const informationRules = {
  name: [{ required: true, message: "请填写真实姓名", trigger: "blur" }],
  realName: [{ required: true, message: "请填写真实姓名", trigger: "blur" }],
  phone: [
    { validator: validatePhone, trigger: "blur" },
    { required: true, message: "请输入手机号", trigger: "blur" },
  ],
};
const passwordForm = ref({ name: "" });
const passwordRules = {
  oldPassword: [
    { validator: validatePassword, trigger: "blur" },
    { required: true, message: "请输入旧密码", trigger: "blur" },
  ],
  newPassword: [
    { validator: validatePasswordA, trigger: "blur" },
    { required: true, message: "请输入新密码", trigger: "blur" },
  ],
  newPasswordA: [
    { validator: validatePasswordA, trigger: "blur" },
    { required: true, message: "请输入再次输入新密码", trigger: "blur" },
  ],
};
//头像上传
let formData = new FormData();
const uploadImage = () => {
@@ -179,10 +245,73 @@
    );
  }
};
const informationSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      informationForm.value.birthDay = timestampToDate(
        informationForm.value.birthDay
      );
      userUpdate(informationForm.value).then(
        () => {
          ElMessage({
            showClose: true,
            message: "更新成功",
            type: "success",
          });
          const newData = JSON.parse(localStorage.getItem("user"));
          newData.userInfo.realName = informationForm.value.realName;
          newData.userInfo.sex = informationForm.value.sex;
          newData.userInfo.age = informationForm.value.age;
          newData.userInfo.phone = informationForm.value.phone;
          newData.userInfo.birthDay = informationForm.value.birthDay;
          localStorage.setItem("user", JSON.stringify(newData));
        },
        (err) => {
          ElMessage.error(err.data.errorMsg);
        }
      );
    } else {
      console.log("error submit!", fields);
    }
  });
};
const passwordSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let data = {
        userId:userData.value.id,
        newPassword:passwordForm.value.newPassword,
        oldPassword:passwordForm.value.oldPassword,
      }
      passwordUpdate(data).then(
        () => {
          ElMessage({
            showClose: true,
            message: "修改成功",
            type: "success",
          });
        },
        (err) => {
          ElMessage.error(err.data.errorMsg);
        }
      );
    } else {
      console.log("error submit!", fields);
    }
  });
};
function timestampToDate(timestamp) {
  const date = new Date(timestamp); // 将时间戳转换为Date对象
  const options = { year: "numeric", month: "long", day: "numeric" }; // 定义日期格式
  return new Intl.DateTimeFormat("zh-CN", options).format(date); // 使用Intl.DateTimeFormat进行格式化
  const year = date.getFullYear();
  const month = date.getMonth() + 1; // 月份从0开始，所以要加1
  const day = date.getDate();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  const convertedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return convertedTime; // 使用Intl.DateTimeFormat进行格式化
}
</script>

@@ -213,4 +342,10 @@
  overflow: hidden;
  object-fit: cover;
}
.submit-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
</style>