fix: 用户头像

components/UserInfoCard.vue

@@ -2,7 +2,7 @@
 	<view class="card user-info-card interactive">
 		<view class="flex-row-g20">
 			<view class="user-avatar">
-				<image src="https://img1.baidu.com/it/u=2462918877,1866131262&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500" mode="aspectFill" alt="用户头像" />
+				<image :src="avatarUrl" mode="aspectFill" alt="用户头像" />
 			</view>
 			<view class="user-details flex-col-g8">
 				<view class="flex-row-g20">
@@ -19,12 +19,25 @@
 </template>
 
 <script setup>
+	import { computed } from 'vue';
+	import { useUserStore } from '@/store/index.js';
+
+	const userStore = useUserStore();
+
 	defineProps({
 		currentCardNo: { type: String, default: '' },
 		deviceInfo: { type: Object, default: () => ({}) },
 		onlineStatus: { type: String, default: '离线' },
 		isDevice: { type: Boolean, default: true }
 	});
+
+	// 默认头像
+	const defaultAvatar = 'https://img1.baidu.com/it/u=2462918877,1866131262&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500';
+
+	// 用户头像，优先使用 store 中的头像，否则使用默认头像
+	const avatarUrl = computed(() => {
+		return userStore.state.userInfo.avatar || defaultAvatar;
+	});
 </script>
 
 <style scoped lang="scss">

pages/login/login.vue

@@ -131,6 +131,38 @@
 			userStore.setToken(loginData.token);
 			uni.setStorageSync('identifier', userStore.state.identifier);
 
+			// H5 环境获取微信用户信息
+			// #ifdef H5
+			try {
+				// 通过 uni.getUserProfile 获取用户信息（需要用户点击授权）
+				// 注意：这个方法在微信公众号 H5 中不可用，需要通过后端接口获取
+				// 这里暂时保存默认信息，实际应该由后端返回用户信息
+				if (loginData.user_info) {
+					userStore.setUserInfo({
+						avatar: loginData.user_info.avatar || '',
+						nickname: loginData.user_info.nickname || ''
+					});
+				}
+			} catch (err) {
+				console.log('获取用户信息失败', err);
+			}
+			// #endif
+
+			// #ifdef MP-WEIXIN
+			// 小程序环境可以直接获取用户信息
+			try {
+				const { userInfo } = await uni.getUserProfile({
+					desc: '用于完善用户资料'
+				});
+				userStore.setUserInfo({
+					avatar: userInfo.avatarUrl || '',
+					nickname: userInfo.nickName || ''
+				});
+			} catch (err) {
+				console.log('用户取消授权');
+			}
+			// #endif
+
 			// 判断是否需要绑定手机号
 			if (loginData.need_bind_phone) {
 				// 需要绑定手机号，跳转到绑定页面

store/user.js

@@ -5,7 +5,11 @@ const state = reactive({
 	assetToken: '',
 	identifier: uni.getStorageSync('identifier') || '',
 	isDevice: false,
-	realNameStatus: 0
+	realNameStatus: 0,
+	userInfo: uni.getStorageSync('userInfo') || {
+		avatar: '',
+		nickname: ''
+	}
 });
 
 export const useUserStore = () => {
@@ -31,11 +35,18 @@ export const useUserStore = () => {
 		state.realNameStatus = status;
 	};
 
+	const setUserInfo = (userInfo) => {
+		state.userInfo = userInfo;
+		uni.setStorageSync('userInfo', userInfo);
+	};
+
 	const clearUser = () => {
 		state.token = '';
 		state.assetToken = '';
+		state.userInfo = { avatar: '', nickname: '' };
 		uni.removeStorageSync('token');
 		uni.removeStorageSync('identifier');
+		uni.removeStorageSync('userInfo');
 	};
 
 	return {
@@ -45,6 +56,7 @@ export const useUserStore = () => {
 		setIdentifier,
 		setIsDevice,
 		setRealNameStatus,
+		setUserInfo,
 		clearUser
 	};
 };