学生端和老师端我的相册

src/components/o-image/index.module.less

@@ -0,0 +1,11 @@
+.imgWrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background-color: #eaeaea;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url('./icon-photo-default.png');
+}

src/components/o-image/index.tsx

@@ -0,0 +1,41 @@
+import { Loading } from 'vant'
+import { defineComponent, ref, Transition } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'o-image',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const loading = ref(true)
+    return () => (
+      <div
+        class={styles.imageWrap}
+        style={
+          !loading.value
+            ? {
+                backgroundImage: `url(${props.src})`,
+                backgroundSize: 'cover'
+              }
+            : ''
+        }
+      >
+        <Transition name="van-fade">
+          {loading.value && (
+            <img
+              style={{ display: 'none' }}
+              src={props.src}
+              onLoad={() => {
+                loading.value = false
+              }}
+            />
+          )}
+        </Transition>
+      </div>
+    )
+  }
+})

src/views/mine-orchestra/orchestra-deeds/index.module.less

@@ -67,6 +67,10 @@
       height: 200px;
       border-radius: 10px;
       overflow: hidden;
+      background-color: #eaeaea;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-image: url('../images/icon-photo-default.png');
     }
   }
 

src/views/mine-orchestra/orchestra-deeds/index.tsx

@@ -133,7 +133,17 @@ export default defineComponent({
                       item.attachments.map((child: any) => (
                         <SwipeItem>
                           {item.type === 'IMAGE' && (
-                            <Image src={child.url} class={styles.swipeImg} fit="cover" />
+                            <div
+                              class={styles.swipeImg}
+                              style={
+                                child.url
+                                  ? {
+                                      backgroundImage: `url(${child.url})`,
+                                      backgroundSize: 'cover'
+                                    }
+                                  : ''
+                              }
+                            ></div>
                           )}
                           {item.type === 'VIDEO' && (
                             <OVideo

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

@@ -3,12 +3,13 @@ import OHeader from '@/components/o-header'
 import request from '@/helpers/request'
 import { state } from '@/state'
 import { Grid, GridItem, Image, List, Loading, showImagePreview } from 'vant'
-import { defineComponent, onMounted, reactive } from 'vue'
+import { defineComponent, onMounted, reactive, TransitionGroup } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import iconImage from '../images/icon-photo-default.png'
 import OSticky from '@/components/o-sticky'
 import OFullRefresh from '@/components/o-full-refresh'
+import OImage from '@/components/o-image'
 export default defineComponent({
   name: 'photo-detail',
   props: {
@@ -34,7 +35,7 @@ export default defineComponent({
     const getList = async () => {
       if (data.loading) return
       data.loading = true
-      if (data.refreshing){
+      if (data.refreshing) {
         data.list = []
         data.pages.page = 1
       }
@@ -43,10 +44,11 @@ export default defineComponent({
           data: {
             ...data.pages,
             orchestraPhotoAlbumId: route.query.photoId
-          }
+          },
+          hideLoading: data.refreshing
         })
         if (Array.isArray(res?.data?.rows)) {
-          data.list = new Array(10).fill(res.data.rows[0]) // data.list.concat(res.data.rows)
+          data.list = data.list.concat(res.data.rows)
           data.pages.page = res.data.current + 1
           data.finished = !res.data.next
         } else {
@@ -55,6 +57,7 @@ export default defineComponent({
       } catch {
         data.finished = true
       }
+      data.refreshing = false
       data.loading = false
     }
 
@@ -85,38 +88,38 @@ export default defineComponent({
         >
           <OHeader />
         </OSticky>
-        <OFullRefresh modelValue={data.refreshing} onRefresh={() => {
-          data.refreshing = true
-          getList()
-        }}>
-          <div class={styles.phoneDetail}>
-            {!!data.list.length && (
-              <List
-                loading={data.loading}
-                loadingText=" "
-                finished={data.finished}
-                finishedText="没有更多数据"
-                onLoad={getList}
-                immediateCheck={false}
-              >
-                <Grid class={styles.detailGrid} columnNum={3} border={false} gutter={3}>
-                  {data.list.map((item: any, index: number) => (
-                    <GridItem onClick={() => onShowImage(index)}>
-                      <div
-                        class={styles.gridImg}
-                        style={{
-                          backgroundImage: item.fileUrl ? `url(${item.fileUrl})` : '',
-                          backgroundSize: item.fileUrl ? 'cover' : '',
-                          height: 'calc(100vw / 3)'
-                        }}
-                      ></div>
-                    </GridItem>
-                  ))}
-                </Grid>
-              </List>
-            )}
-            {!data.loading && !data.list.length && <OEmpty btnStatus={false} tips="暂无照片" />}
-          </div>
+        <OFullRefresh
+          modelValue={data.refreshing}
+          onRefresh={() => {
+            data.refreshing = true
+            getList()
+          }}
+        >
+          <List
+            loading={data.loading}
+            loadingText=" "
+            finished={data.finished}
+            finishedText=" "
+            onLoad={getList}
+            immediateCheck={false}
+          >
+            <div class={styles.phoneListDetail}>
+              <TransitionGroup name="van-fade">
+                {data.list.map((item: any, index: number) => (
+                  <div
+                    key={`index-${index}`}
+                    class={styles.gridItem}
+                    onClick={() => onShowImage(index)}
+                  >
+                    <OImage class={styles.gridImg} src={item.fileUrl} />
+                  </div>
+                ))}
+                {!data.loading && !data.list.length && (
+                  <OEmpty key="OEmpty1" btnStatus={false} tips="暂无照片" />
+                )}
+              </TransitionGroup>
+            </div>
+          </List>
         </OFullRefresh>
       </div>
     )

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

@@ -42,18 +42,25 @@
   }
 }
 
-.phoneDetail{
-  
-}
-
-.detailGrid {
-  :global {
-    .van-grid-item__content {
-      padding: 0;
-      background-color: transparent;
+.phoneListDetail{
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  min-height: calc(100vh - var(--header-height));
+  .gridItem{
+    padding: 1.5px;
+    width: calc(100vw / 3);
+    height: calc(100vw / 3);
+    box-sizing: border-box;
+    .gridImg{
+      width: 100%;
+      height: 100%;
+      border-radius: 0;
     }
   }
 }
+
 :global {
   .van-image-preview {
     .van-image-preview__close-icon,