From 517ada59580a84035d2373034f7b77c0bdf044c5 Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期一, 11 十一月 2024 15:33:05 +0800
Subject: [PATCH] 错题本分页
---
src/views/personal-center/index.vue | 212 ++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 184 insertions(+), 28 deletions(-)
diff --git a/src/views/personal-center/index.vue b/src/views/personal-center/index.vue
index 26980b4..b50c891 100644
--- a/src/views/personal-center/index.vue
+++ b/src/views/personal-center/index.vue
@@ -23,12 +23,12 @@
ref="fileHeadPortrait"
id="fileHeadPortrait"
/>
- <img
- class="img"
- id="headPortrait"
- @click="uploadImage"
- :src="'api/files/' + userData.imagePath"
- />
+ <img
+ class="img"
+ id="headPortrait"
+ @click="uploadImage"
+ :src="userData.imagePath?'api/files/' + userData.imagePath:'/static/icons/touxiang.png'"
+ />
<span>{{ userData.userName }}</span>
</div>
<div>
@@ -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>
@@ -55,9 +55,11 @@
:model="informationForm"
label-width="auto"
style="max-width: 600px"
+ :rules="informationRules"
+ ref="informationFormRef"
>
- <el-form-item label="鐪熷疄濮撳悕">
- <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" />
@@ -67,8 +69,8 @@
v-model="informationForm.sex"
style="width: 100px"
>
- <el-option label="鐢�" value="1" />
- <el-option label="濂�" value="2" />
+ <el-option label="鐢�" :value="1" />
+ <el-option label="濂�" :value="2" />
</el-select>
</el-form-item>
<el-form-item label="鍑虹敓骞存湀">
@@ -76,28 +78,59 @@
v-model="informationForm.birthDay"
type="date"
placeholder="Pick a day"
- :size="size"
/>
</el-form-item>
- <el-form-item label="鎵嬫満">
- <el-input
- v-model="informationForm.phone"
- /> </el-form-item></el-form
- ></el-tab-pane>
+ <el-form-item label="鎵嬫満" prop="phone">
+ <el-input v-model="informationForm.phone" />
+ </el-form-item>
+ <el-form-item>
+ <div class="submit-box">
+ <el-button
+ type="primary"
+ @click="informationSubmit(informationFormRef)"
+ >鏇存柊</el-button
+ >
+ </div>
+ </el-form-item></el-form
+ ></el-tab-pane
+ >
<el-tab-pane label="瀵嗙爜淇敼" name="password">
<el-form
: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>
@@ -111,19 +144,73 @@
<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({ name: "" });
+const passwordForm = ref({
+ oldPassword: "",
+ newPassword: "",
+ newPasswordA: "",
+});
+// 鎵嬫満鍙烽獙璇侀�昏緫
+const validatePhone = (rule, value, callback) => {
+ const phoneRegex = /^1[3-9]\d{9}$/;
+ if (!phoneRegex.test(value)) {
+ callback(new Error("鎵嬫満鍙锋牸寮忎笉姝ｇ‘"));
+ } else {
+ 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 = {
+ realName: [{ required: true, message: "璇峰～鍐欑湡瀹炲鍚�", trigger: "blur" }],
+ phone: [
+ { validator: validatePhone, trigger: "blur" },
+ { required: true, message: "璇疯緭鍏ユ墜鏈哄彿", trigger: "blur" },
+ ],
+};
+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 = () => {
@@ -158,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>
@@ -192,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