fix

src/views/mine-orchestra/photo-list/detail.tsx

@@ -2,7 +2,7 @@ import OEmpty from '@/components/o-empty'
 import OHeader from '@/components/o-header'
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Grid, GridItem, Image, List, showImagePreview } from 'vant'
+import { Grid, GridItem, Image, List, Loading, showImagePreview } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
@@ -18,7 +18,7 @@ export default defineComponent({
   },
   setup(props) {
     const route = useRoute()
-    console.log("🚀 ~ route", route)
+    console.log('🚀 ~ route', route)
     const data = reactive({
       loading: false,
       finished: false,
@@ -70,7 +70,7 @@ export default defineComponent({
     return () => (
       <div>
         <OSticky>
-            <OHeader title={(route.query.name as string) || '我的乐团'} />
+          <OHeader title={(route.query.name as string) || '我的乐团'} />
         </OSticky>
         <div class={styles.phoneDetail}>
           {!data.loading && !!data.list.length && (
@@ -81,17 +81,20 @@ export default defineComponent({
               onLoad={getList}
               immediateCheck={false}
             >
-              <Grid columnNum={3}>
+              <Grid class={styles.detailGrid} columnNum={3} border={false} gutter={3}>
                 {data.list.map((item: any, index: number) => (
                   <GridItem onClick={() => onShowImage(index)}>
-                    {item.fileUrl ? (
-                      <Image class={styles.gridImg} style={{height: 'calc(100vw / 3)'}} src={item.fileUrl} fit="cover" />
-                    ) : (
-                      <div class={styles.gridImg}>
-                        <Image src={iconImage} fit="cover" />
-                      </div>
-                    )}
-
+                    <Image
+                      class={styles.gridImg}
+                      style={{ width: '100%', height: 'calc(100vw / 3)' }}
+                      src={item.fileUrl}
+                      errorIcon={iconImage}
+                      fit="cover"
+                    >
+                      {{
+                        loading: () => <Loading type="spinner" />,
+                      }}
+                    </Image>
                   </GridItem>
                 ))}
               </Grid>

src/views/mine-orchestra/photo-list/index.module.less

@@ -26,11 +26,18 @@
     .gridName{
       font-size: 16px;
       color:#333;
-      padding: 6px 0 4px 0;
+      padding: 8px 0 4px 0;
     }
     .gridDes {
       color: #777;
       font-size: 12px;
     }
   }
-  
+  
+  .detailGrid{
+    :global{
+      .van-grid-item__content{
+        padding: 0;
+      }
+    }
+  }

src/views/mine-orchestra/photo-list/index.tsx

@@ -2,7 +2,7 @@ import OEmpty from '@/components/o-empty'
 import OHeader from '@/components/o-header'
 import request from '@/helpers/request'
 import { state } from '@/state'
-import { Grid, GridItem, Image, List, showImagePreview } from 'vant'
+import { Grid, GridItem, Image, List, Loading, showImagePreview } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import styles from './index.module.less'
@@ -19,7 +19,7 @@ export default defineComponent({
   setup(props) {
     const route = useRoute()
     const router = useRouter()
-    console.log("🚀 ~ route", route)
+    console.log('🚀 ~ route', route)
     const data = reactive({
       loading: false,
       finished: false,
@@ -72,7 +72,7 @@ export default defineComponent({
     return () => (
       <div>
         <OSticky>
-            <OHeader title={(route.query.name as string) || '我的乐团'} />
+          <OHeader title={(route.query.name as string) || '我的乐团'} />
         </OSticky>
         <div class={styles.phoneDetail}>
           {!data.loading && !!data.list.length && (
@@ -85,21 +85,20 @@ export default defineComponent({
             >
               <div class={styles.photoWrap}>
                 {data.list.map((item: any, index: number) => (
-                  <div class={styles.photoItem} onClick={() => {
-                    router.push({
+                  <div
+                    class={styles.photoItem}
+                    onClick={() => {
+                      router.push({
                         path: '/photo-list-detail',
-                        query:{
-                            orchestraPhotoAlbumId: item.id
+                        query: {
+                          orchestraPhotoAlbumId: item.id
                         }
-                    })
-                  }}>
-                    {item.coverUrl ? (
-                      <Image class={styles.gridImg} src={item.coverUrl} fit="cover" />
-                    ) : (
-                      <div class={styles.gridImg}>
-                        <Image src={iconImage} fit="cover" />
-                      </div>
-                    )}
+                      })
+                    }}
+                  >
+                    <Image class={styles.gridImg} src={item.coverUrl} fit="cover">
+                      {{ loading: () => <Loading type="spinner" /> }}
+                    </Image>
 
                     <div class={styles.gridName}>{item.name || ''}</div>
                     <div class={styles.gridDes}>{item.photoCount || 0}张</div>