Refactor image handling in components to use NuxtImg and improve avatar loading

- Replaced <img> tags with <NuxtImg> in multiple components including PlaymateCards, OrderCard, Order, OrderRating, and user profile pages for better image optimization.
- Added placeholder support for avatars using a default image path, enhancing user experience during loading times.

app/components/home/PlaymateCards.vue

@@ -29,12 +29,13 @@ const handlePlaymateClick = (id: string) => {
       <div class="flex gap-3">
         <div class="flex w-[76px] flex-col items-center shrink-0">
           <div class="avatar-box relative flex flex-col items-center">
-            <img
+            <NuxtImg
               :src="card.avatar"
               :alt="card.nickname"
               class="avatar"
               loading="lazy"
-            >
+              :placeholder="img('/avatar.png')"
+            />
             <CommonVoiceBar
               v-if="card.voiceBar"
               :audio-url="card.voiceBar"

app/components/order/OrderCard.vue

@@ -16,6 +16,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+const img = useImage()
 
 const emit = defineEmits<{
   (e: 'primary-action' | 'secondary-action', payload: typeof props): void
@@ -53,11 +54,12 @@ const handleSecondaryClick = () => {
     <!-- 中部：服务信息 -->
     <section class="order-card__body">
       <div class="order-card__avatar">
-        <img
+        <NuxtImg
           :src="avatar"
           :alt="nickname"
           loading="lazy"
-        >
+          :placeholder="img('/avatar.png')"
+        />
       </div>
 
       <div class="order-card__info">

app/components/popup/Order.vue

@@ -7,6 +7,7 @@ const { state, totalPrice, close, confirm, setQuantity } = useOrderPopup()
 const { wallet } = useAuth()
 const { openRecharge } = useRecharge()
 const { t } = useI18n()
+const img = useImage()
 
 const walletCoins = computed(() => wallet.value?.goldCoin ?? 0)
 const isWalletBalanceEnough = computed(() => totalPrice.value <= walletCoins.value)
@@ -43,12 +44,12 @@ const handleRecharge = () => {
 
         <div class="order-popup__avatar-wrapper">
           <div class="order-popup__avatar">
-            <img
-              v-if="state.avatar"
+            <NuxtImg
               :src="state.avatar"
               :alt="state.name"
               loading="lazy"
-            >
+              :placeholder="img('/avatar.png')"
+            />
           </div>
         </div>
 

app/components/popup/OrderRating.vue

@@ -26,6 +26,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+const img = useImage()
 
 const localScore = ref(props.modelValue || 0)
 
@@ -85,16 +86,14 @@ const handleSubmit = () => {
     @update:show="handleUpdateShow"
   >
     <div class="order-rating-popup__container">
-      <div
-        v-if="avatar"
-        class="order-rating-popup__avatar-wrapper"
-      >
+      <div class="order-rating-popup__avatar-wrapper">
         <div class="order-rating-popup__avatar">
-          <img
+          <NuxtImg
             :src="avatar"
-            alt="avatar"
+            :alt="avatar"
             loading="lazy"
-          >
+            :placeholder="img('/avatar.png')"
+          />
         </div>
       </div>
 

app/components/popup/QrCode.vue

@@ -383,8 +383,7 @@ const handleUpdateShow = (value: boolean) => {
       <div class="save-image-popup__avatar-wrapper">
         <div class="save-image-popup__avatar">
           <img
-            v-if="userProfile?.avatar"
-            :src="userProfile?.avatar"
+            :src="userProfile?.avatar ? userProfile?.avatar : '/avatar.png'"
             :alt="userProfile?.nickname || 'avatar'"
             loading="lazy"
           >

app/pages/mine/index.vue

@@ -25,7 +25,7 @@ const router = useRouter()
 const { t } = useI18n()
 const { openRecharge } = useRecharge()
 const { isPlaymate, userProfile, wallet, playmateInfo, refreshUser, logout } = useAuth()
-
+const img = useImage()
 const { copy, isSupported } = useClipboard()
 
 onMounted(() => {
@@ -125,11 +125,12 @@ const handleLogout = async () => {
             class="mine-hero__avatar"
             @click="handleEditProfile"
           >
-            <img
-              :src="userProfile?.avatar || '/placeholder.png'"
-              :alt="userProfile?.nickname || 'User avatar'"
+            <NuxtImg
+              :src="userProfile?.avatar"
+              :alt="userProfile?.nickname || 'avatar'"
               loading="lazy"
-            >
+              :placeholder="img('/avatar.png')"
+            />
             <EditSvg class="mine-hero__avatar-icon" />
           </div>
           <div class="mine-hero__info">

app/pages/order/detail.vue

@@ -32,7 +32,7 @@ interface OrderDetail {
 const route = useRoute()
 const router = useRouter()
 const { t } = useI18n()
-
+const img = useImage()
 const { request } = useApi()
 const detail = ref<OrderDetail | null>(null)
 
@@ -171,11 +171,12 @@ onMounted(() => {
         <article class="order-detail-card">
           <header class="order-detail-card__header">
             <div class="order-detail-card__avatar">
-              <img
+              <NuxtImg
                 :src="detail.avatar"
                 :alt="detail.name"
                 loading="lazy"
-              >
+                :placeholder="img('/avatar.png')"
+              />
             </div>
             <div class="order-detail-card__info">
               <p class="order-detail-card__name">

app/pages/user/profile.vue

@@ -444,11 +444,11 @@ const handleSubmitFavor = async () => {
       @submit="handleSubmitFavor"
     >
       <template #avatar>
-        <img
-          v-if="playmateInfo"
-          :src="playmateInfo.avatar"
-          :alt="playmateInfo.nickname"
-        >
+        <NuxtImg
+          :src="playmateInfo?.avatar"
+          :alt="playmateInfo?.nickname || 'avatar'"
+          :placeholder="img('/avatar.png')"
+        />
       </template>
     </PopupFavorability>
   </div>