微信小程序联调

pages/ucenter/ucenter.vue

@@ -2,8 +2,21 @@
 	<view class="center">
 		<uni-sign-in ref="signIn"></uni-sign-in>
 		<view class="userInfo" @click.capture="toUserInfo">
-			<cloud-image width="150rpx" height="150rpx" v-if="hasLogin&&userInfo.avatar_file&&userInfo.avatar_file.url" :src="userInfo.avatar_file.url"></cloud-image>
-			
+			<!-- 云存储 fileID 走 cloud-image；普通网络图用 image（相对路径会拼 API 根地址，避免小程序下无法加载） -->
+			<cloud-image
+				v-if="showCloudAvatar"
+				width="150rpx"
+				height="150rpx"
+				:src="resolvedAvatarUrl"
+				@load-error="onRemoteAvatarFail"
+			/>
+			<image
+				v-else-if="showHttpAvatar"
+				class="user-avatar-img"
+				:src="resolvedAvatarUrl"
+				mode="aspectFill"
+				@error="onRemoteAvatarFail"
+			/>
 			<view v-else class="defaultAvatarUrl">
 				<uni-icons color="#ffffff" size="50" type="person-filled" />
 			</view>
@@ -122,6 +135,7 @@
 		mutations
 	} from '@/common/store.js'
 	import { put, get } from '@/common/request.js'
+	import { API_BASE_URL } from '@/common/config.js'
 	import DeviceBindPopup from './components/DeviceBindPopup.vue'
 	import DeviceListPopup from './components/DeviceListPopup.vue'
 	import CloudImage from '@/uni_modules/uni-id-pages/components/cloud-image/cloud-image.vue'
@@ -171,6 +185,8 @@
 					confirmPassword: ''
 				},
 				changePwdSubmitting: false,
+				/** 头像远程地址加载失败时回退默认占位（云临时链失败、域名未配置、404 等） */
+				remoteAvatarFailed: false,
 				ucenterList: [
 					[
 						// #ifdef APP-PLUS
@@ -223,6 +239,11 @@
 				}
 			}
 		},
+		watch: {
+			resolvedAvatarUrl() {
+				this.remoteAvatarFailed = false
+			}
+		},
 		onLoad() {
 			// 加载用户信息
 			this.loadUserInfo()
@@ -270,6 +291,34 @@
 			hasLogin(){
 				return store.hasLogin || false
 			},
+			rawAvatarUrl() {
+				const u = this.userInfo && this.userInfo.avatar_file && this.userInfo.avatar_file.url
+				return typeof u === 'string' ? u.trim() : ''
+			},
+			/** 小程序中相对路径 /api/... 或 /uploads/... 需补全为完整 URL；云存储仍为 cloud:// */
+			resolvedAvatarUrl() {
+				const t = this.rawAvatarUrl
+				if (!t) return ''
+				if (
+					t.startsWith('cloud://') ||
+					t.startsWith('http://') ||
+					t.startsWith('https://') ||
+					t.startsWith('data:') ||
+					t.startsWith('wxfile://') ||
+					t.startsWith('//')
+				) {
+					return t.startsWith('//') ? `https:${t}` : t
+				}
+				const base = API_BASE_URL.replace(/\/+$/, '')
+				return t.startsWith('/') ? `${base}${t}` : `${base}/${t}`
+			},
+			showCloudAvatar() {
+				return this.hasLogin && !!this.resolvedAvatarUrl && this.resolvedAvatarUrl.startsWith('cloud://') && !this.remoteAvatarFailed
+			},
+			showHttpAvatar() {
+				const u = this.resolvedAvatarUrl
+				return this.hasLogin && !!u && !u.startsWith('cloud://') && !this.remoteAvatarFailed
+			},
 			// #ifdef APP-PLUS
 			appVersion() {
 				try {
@@ -297,6 +346,9 @@
 			}
 		},
 		methods: {
+			onRemoteAvatarFail() {
+				this.remoteAvatarFailed = true
+			},
 			/**
 			 * 加载用户信息（租户ID和登录人信息）
 			 */
@@ -854,6 +906,13 @@
 		align-items: center;
 	}
 
+	.user-avatar-img {
+		width: 150rpx;
+		height: 150rpx;
+		border-radius: 100%;
+		background-color: rgba(0, 0, 0, 0.15);
+	}
+
 	.logo-title {
 		flex: 1;
 		align-items: center;