hookehuyr

fix(profile): 修复用户信息获取路径错误并更新默认头像

修复了获取用户信息时路径错误的问题,将 `response.data.avatar` 和 `response.data.name` 更新为 `response.data.user.avatar` 和 `response.data.user.name`。同时更新了默认头像的 URL,使用 Vant 提供的默认图片。
......@@ -11,7 +11,7 @@ VITE_PROXY_PREFIX = /srv/
VITE_OUTDIR = mlaj
# 是否开启调试
VITE_CONSOLE = 0
VITE_CONSOLE = 1
# appID相关
VITE_APPID=微信appID
......
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-26 11:21:05
* @LastEditTime: 2025-03-26 12:34:44
* @FilePath: /mlaj/src/router/guards.js
* @Description: 路由守卫逻辑
*/
......@@ -33,7 +33,7 @@ export const checkWxAuth = async () => {
const { code, data } = await getAuthInfoAPI();
if (code && !data.openid_has) {
// 直接在这里处理授权跳转
let raw_url = encodeURIComponent(location.origin + location.pathname + $route.query.href); // 未授权的地址
let raw_url = encodeURIComponent(location.origin + location.pathname + location.href); // 未授权的地址
const short_url = `/srv/?f=behalo&a=openid&res=${raw_url}`;
location.href = short_url;
......
<template>
<div class="min-h-screen flex flex-col bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 py-12 px-4 sm:px-6 lg:px-8">
<div
class="min-h-screen flex flex-col bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 py-12 px-4 sm:px-6 lg:px-8"
>
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<h1 class="text-center text-3xl font-bold text-gray-800 mb-2">亲子学院</h1>
<h2 class="text-center text-xl font-medium text-gray-600">欢迎回来</h2>
......@@ -7,7 +9,10 @@
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<FrostedGlass class="py-8 px-6 rounded-lg">
<div v-if="error" class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-md">
<div
v-if="error"
class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-md"
>
{{ error }}
</div>
......@@ -44,7 +49,10 @@
<div class="flex justify-end">
<div class="text-sm">
<router-link to="/forgotPwd" class="font-medium text-green-600 hover:text-green-500">
<router-link
to="/forgotPwd"
class="font-medium text-green-600 hover:text-green-500"
>
忘记密码?
</router-link>
</div>
......@@ -57,7 +65,7 @@
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
:class="{ 'opacity-70 cursor-not-allowed': loading }"
>
{{ loading ? '登录中...' : '登 录' }}
{{ loading ? "登录中..." : "登 录" }}
</button>
</div>
</form>
......@@ -99,7 +107,10 @@
<div class="text-center mt-6">
<p class="text-sm text-gray-600">
还没有账号?
<router-link to="/register" class="font-medium text-green-600 hover:text-green-500">
<router-link
to="/register"
class="font-medium text-green-600 hover:text-green-500"
>
立即注册
</router-link>
</p>
......@@ -110,92 +121,64 @@
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import { useAuth } from '@/contexts/auth'
import { loginAPI } from '@/api/users'
import { useTitle } from '@vueuse/core'
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import FrostedGlass from "@/components/ui/FrostedGlass.vue";
import { useAuth } from "@/contexts/auth";
import { loginAPI, getUserInfoAPI } from "@/api/users";
import { useTitle } from "@vueuse/core";
const $route = useRoute();
useTitle($route.meta.title);
const router = useRouter()
const { login } = useAuth()
const router = useRouter();
const { login } = useAuth();
const mobile = ref('')
const password = ref('')
const error = ref('')
const loading = ref(false)
const mobile = ref("");
const password = ref("");
const error = ref("");
const loading = ref(false);
// 原登录逻辑
// const handleSubmit = async () => {
// if (!mobile.value || !password.value) {
// error.value = '请填写所有字段'
// return
// }
// try {
// error.value = ''
// loading.value = true
// // 调用登录接口
// const response = await loginAPI({
// mobile: mobile.value,
// password: password.value
// })
// if (response.code !== 1) {
// error.value = response.msg || '登录失败,请检查您的凭据'
// return
// }
// // 登录成功,更新auth状态
// const success = login(response.data)
// if (success) {
// // 如果有重定向参数,登录成功后跳转到对应页面
// const redirect = $route.query.redirect
// router.push(redirect || '/')
// } else {
// error.value = '登录失败,请检查您的凭据'
// }
// 临时登录逻辑 - 支持任意输入
const handleSubmit = async () => {
if (!mobile.value || !password.value) {
error.value = '请填写所有字段'
return
error.value = "请填写所有字段";
return;
}
try {
error.value = ''
loading.value = true
error.value = "";
loading.value = true;
// 构造默认用户数据
const mockUserData = {
id: 1,
name: '测试用户',
// 调用登录接口
const response = await loginAPI({
mobile: mobile.value,
avatar: 'https://cdn.ipadbiz.cn/mlaj/images/user-avatar-2.jpg',
checkInDays: 3,
completedCourses: 12
password: password.value,
});
if (response.code !== 1) {
error.value = response.msg || "登录失败,请检查您的凭据";
return;
}
// 模拟登录成功
const success = login(mockUserData)
const { code, data } = await getUserInfoAPI();
if (code) {
// 登录成功,更新auth状态
const success = login(data.user);
if (success) {
const redirect = $route.query.redirect
router.push(redirect || '/')
// 如果有重定向参数,登录成功后跳转到对应页面
const redirect = $route.query.redirect;
router.push(redirect || "/");
} else {
error.value = '登录失败,请检查您的凭据'
error.value = "登录失败,请检查您的凭据";
}
}
} catch (err) {
console.error('Login error:', err)
error.value = '登录时发生错误'
console.error("Login error:", err);
error.value = "登录时发生错误";
} finally {
loading.value = false
loading.value = false;
}
}
};
</script>
......
......@@ -13,7 +13,7 @@
class="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-lg mb-4"
>
<img
:src="profile.avatar || '/assets/images/user-avatar-1.jpg'"
:src="profile.avatar || 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
:alt="profile.name"
class="w-full h-full object-cover"
@error="handleImageError"
......@@ -211,14 +211,22 @@ import MenuItem from "@/components/ui/MenuItem.vue";
import { useAuth } from "@/contexts/auth";
import { userProfile, checkInTypes } from "@/utils/mockData";
import CheckInDialog from "@/components/ui/CheckInDialog.vue";
import { getUserInfoAPI } from "@/api/users";
import { showToast } from "vant";
import { useTitle } from "@vueuse/core";
const router = useRouter();
const $route = useRoute();
useTitle($route.meta.title);
const { currentUser, logout } = useAuth();
const profile = ref(userProfile);
const { logout } = useAuth();
const profile = ref({});
onMounted(async () => {
const { code, data } = await getUserInfoAPI();
if (code) {
profile.value = data.user;
}
})
const showCheckInDialog = ref(false);
// 处理打卡成功
......@@ -249,7 +257,7 @@ const handleMenuClick = (path) => {
// Handle image error
const handleImageError = (e) => {
e.target.onerror = null;
e.target.src = "/assets/images/user-avatar-1.jpg";
e.target.src = "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg";
};
// Handle check-in type click
......
<!--
* @Date: 2025-03-24 13:04:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-25 09:56:14
* @LastEditTime: 2025-03-26 13:03:11
* @FilePath: /mlaj/src/views/profile/SettingsPage.vue
* @Description: 用户设置页面
-->
......@@ -95,8 +95,8 @@ onMounted(async () => {
try {
const response = await getUserInfoAPI();
if (response.data) {
userAvatar.value = response.data.avatar;
username.value = response.data.name;
userAvatar.value = response.data.user.avatar;
username.value = response.data.user.name;
}
} catch (error) {
console.error('获取用户信息失败:', error);
......
......@@ -70,7 +70,7 @@ onMounted(async () => {
try {
const response = await getUserInfoAPI();
if (response.data) {
userAvatar.value = response.data.avatar;
userAvatar.value = response.data.user.avatar;
}
} catch (error) {
console.error("获取用户信息失败:", error);
......
<!--
* @Date: 2025-03-24 13:04:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-24 13:46:15
* @LastEditTime: 2025-03-26 13:03:27
* @FilePath: /mlaj/src/views/profile/settings/UsernameSettingPage.vue
* @Description: 修改用户名页面
-->
......@@ -57,7 +57,7 @@ onMounted(async () => {
try {
const response = await getUserInfoAPI();
if (response.data) {
username.value = response.data.name;
username.value = response.data.user.name;
}
} catch (error) {
console.error('获取用户信息失败:', error);
......