乐团剪映

src/views/courseList/index.module.less

@@ -30,12 +30,13 @@
     }
     .title {
       text-align: center;
-      padding: 14px;
+      padding: 10px;
       color: #742c00;
-      font-size: 16px;
+      font-size: 15px;
     }
     .subtitle{
-      font-size: 12px;
+      font-size: 11px;
+      margin-top: 2px;
     }
     .num {
       position: absolute;

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

@@ -1,5 +1,7 @@
 .phoneDetail {
+  height: calc(100vh - var(--header-height));
   overflow: hidden;
+  overflow-y: auto;
 }
 .photoWrap {
   display: flex;

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

@@ -19,6 +19,8 @@ import { useRoute, useRouter } from 'vue-router'
 import styles from './index.module.less'
 import iconImage from '../images/icon-photo-default.png'
 import iconOrchestra from '../images/icon-or.png'
+import OSticky from '@/components/o-sticky'
+import OFullRefresh from '@/components/o-full-refresh'
 export default defineComponent({
   name: 'photo-detail',
   props: {
@@ -31,6 +33,7 @@ export default defineComponent({
     const route = useRoute()
     const router = useRouter()
     const data = reactive({
+      refreshing: false,
       loading: false,
       finished: false,
       pages: {
@@ -44,12 +47,17 @@ export default defineComponent({
     })
 
     const getList = async () => {
+      if (data.refreshing) {
+        data.pages.page = 1
+        data.finished = false
+        data.list = []
+      }
       data.loading = true
       try {
         const res = await request.post(`${state.platformApi}/orchestraPhotoAlbum/page`, {
           data: {
             ...data.pages,
-            orchestraId: data.school.id
+            schoolId: data.school.id
           },
           hideLoading: true
         })
@@ -64,6 +72,9 @@ export default defineComponent({
         data.finished = true
       }
       data.loading = false
+      setTimeout(() => {
+        data.refreshing = false
+      }, 500)
     }
 
     const getSchoolList = async () => {
@@ -109,84 +120,100 @@ export default defineComponent({
     })
 
     return () => (
-      <div class={[styles.phoneDetail]}>
-        <CellGroup inset class={styles.cellGroup}>
-          <Cell class={styles.select} center isLink onClick={() => (data.schoolStatus = true)}>
-            {{
-              icon: () => <img class={styles.icon} src={iconOrchestra} />,
-              title: () => <div class="van-ellipsis">{data.school.name}</div>
-            }}
-          </Cell>
-        </CellGroup>
-        {!data.loading && !!data.list.length && (
-          <List
-            // v-model:loading={data.loading}
-            finished={data.finished}
-            finishedText="没有更多数据"
-            onLoad={getList}
-            immediateCheck={false}
-          >
-            <div class={styles.photoWrap}>
-              {data.list.map((item: any, index: number) => (
-                <div
-                  class={styles.photoItem}
-                  onClick={() => {
-                    router.push({
-                      path: '/photo-list',
-                      query: {
-                        id: item.id
-                      }
-                    })
-                  }}
-                >
-                  <div
-                    class={styles.gridImg}
-                    style={
-                      item.coverUrl
-                        ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
-                        : ''
-                    }
-                  ></div>
+      <div>
+        <OSticky
+          onGetHeight={(height: number) => {
+            document.documentElement.style.setProperty('--header-height', height + 'px')
+          }}
+        >
+          <OHeader />
+          <CellGroup inset class={styles.cellGroup}>
+            <Cell class={styles.select} center isLink onClick={() => (data.schoolStatus = true)}>
+              {{
+                icon: () => <img class={styles.icon} src={iconOrchestra} />,
+                title: () => <div class="van-ellipsis">{data.school.name}</div>
+              }}
+            </Cell>
+          </CellGroup>
+        </OSticky>
+        <OFullRefresh v-model={data.refreshing} onRefresh={() => getList()}>
+          <div class={[styles.phoneDetail]}>
+            {!data.loading && !!data.list.length && (
+              <List
+                loading={data.loading}
+                finished={data.finished}
+                finishedText="没有更多数据"
+                onLoad={getList}
+                immediateCheck={false}
+              >
+                <div class={styles.photoWrap}>
+                  {data.list.map((item: any, index: number) => (
+                    <div
+                      class={styles.photoItem}
+                      onClick={() => {
+                        router.push({
+                          path: '/photo-list',
+                          query: {
+                            id: item.id
+                          }
+                        })
+                      }}
+                    >
+                      <div
+                        class={styles.gridImg}
+                        style={
+                          item.coverUrl
+                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                            : ''
+                        }
+                      ></div>
 
-                  <div class={styles.gridName}>{item.name}</div>
-                  <div class={styles.gridDes}>{item.photoCount}张</div>
+                      <div class={styles.gridName}>{item.name}</div>
+                      <div class={styles.gridDes}>{item.photoCount}张</div>
+                    </div>
+                  ))}
                 </div>
-              ))}
-            </div>
-          </List>
-        )}
-        {!data.loading && !data.list.length && (
-          <div
-            class="emptyRootContainer"
-            style={{
-              minHeight: 'calc(100vh - 1.22667rem)'
-            }}
-          >
-            <OEmpty btnStatus={false} tips="暂无相册" />
-          </div>
-        )}
+              </List>
+            )}
+            {!data.loading && !data.list.length && (
+              <div
+                class="emptyRootContainer"
+                style={{
+                  minHeight: '78%'
+                }}
+              >
+                <OEmpty btnStatus={false} tips="暂无相册" />
+              </div>
+            )}
 
-        <Popup v-model:show={data.schoolStatus} position="bottom" round class={'popupBottomSearch'}>
-          <Picker
-            columns={data.schoolList}
-            columnsFieldNames={{ text: 'name', value: 'id' }}
-            onCancel={() => (data.schoolStatus = false)}
-            onConfirm={({ selectedValues }: any) => {
-              const val = selectedValues[0] || ''
-              data.schoolStatus = false
-              if (val == data.school?.id) {
-                return
-              }
-              const active = data.schoolList.find((n: any) => n.id == val) || {}
-              data.school = active
+            <Popup
+              v-model:show={data.schoolStatus}
+              position="bottom"
+              round
+              class={'popupBottomSearch'}
+            >
+              <Picker
+                columns={data.schoolList}
+                columnsFieldNames={{ text: 'name', value: 'id' }}
+                onCancel={() => (data.schoolStatus = false)}
+                onConfirm={({ selectedValues }: any) => {
+                  const val = selectedValues[0] || ''
+                  data.schoolStatus = false
+                  if (val == data.school?.id) {
+                    return
+                  }
+                  const active = data.schoolList.find((n: any) => n.id == val) || {}
+                  data.school = active
 
-              data.pages.page = 1
-              data.list = []
-              data.finished = false
-              getList()
-            }}
-          />
-        </Popup>
+                  data.pages.page = 1
+                  data.list = []
+                  data.finished = false
+                  getList()
+                }}
+              />
+            </Popup>
+          </div>
+        </OFullRefresh>
       </div>
     )
   }