From 56bc0990597bf3d9667b97b98bcfbb9092ad9df6 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期一, 15 七月 2024 16:46:35 +0800
Subject: [PATCH] 教学资源页面开发，分页，音频，类型图，下载，个人中心资料修改，密码修改，校验
---
src/views/personal-center/index.vue | 171 +++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 153 insertions(+), 18 deletions(-)
diff --git a/src/views/personal-center/index.vue b/src/views/personal-center/index.vue
index 0995cbf..d601d38 100644
--- a/src/views/personal-center/index.vue
+++ b/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); // 灏嗘椂闂存埑杞崲涓篋ate瀵硅薄
- 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>
--
Gitblit v1.8.0