添加下拉加载功能

src/components/o-full-refresh/index.module.less

@@ -2,3 +2,11 @@
   width: 40px;
   height: 40px;
 }
+
+.pullRefresh {
+  :global {
+    .van-pull-refresh__track {
+      min-height: inherit;
+    }
+  }
+}

src/components/o-full-refresh/index.tsx

@@ -37,6 +37,7 @@ export default defineComponent({
         v-model:modelValue={state.fullState}
         onRefresh={() => emit('refresh')}
         loadingText=" "
+        class={styles.pullRefresh}
       >
         {{
           loading: () => (

src/router/routes-school.ts

@@ -102,14 +102,6 @@ export default [
         }
       },
       {
-        path: '/content-information',
-        name: 'content-information',
-        component: () => import('@/school/content-information/index'),
-        meta: {
-          title: '资讯管理'
-        }
-      },
-      {
         path: '/companion-teacher',
         name: 'companion-teacher',
         component: () => import('@/school/companion-teacher/index'),

src/school/companion-teacher/index.tsx

@@ -36,6 +36,7 @@ import { manageTeacherType } from '@/constant'
 import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
 import html2canvas from 'html2canvas'
 import { forms } from '../train-planning/create'
+import OFullRefresh from '@/components/o-full-refresh'
 
 export default defineComponent({
   name: 'companion-teacher',
@@ -54,7 +55,9 @@ export default defineComponent({
       listState: {
         dataShow: true, // 判断是否有数据
         loading: false,
-        finished: false
+        finished: false,
+        refreshing: false,
+        height: 0 // 页面头部高度，为了处理下拉刷新用的
       },
       subjectText: '全部声部',
       statusText: '状态',
@@ -119,6 +122,7 @@ export default defineComponent({
           }
         })
         form.listState.loading = false
+        form.listState.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (form.list.length > 0 && result.current === 1) {
@@ -134,6 +138,7 @@ export default defineComponent({
         form.listState.dataShow = form.list.length > 0
       } catch {
         form.listState.dataShow = false
+        form.listState.refreshing = false
         form.listState.finished = true
       }
     }
@@ -276,7 +281,12 @@ export default defineComponent({
     })
     return () => (
       <>
-        <OSticky position="top">
+        <OSticky
+          position="top"
+          onGetHeight={(height: any) => {
+            form.listState.height = height
+          }}
+        >
           <OHeader border={false}>
             {{
               right: () => <Icon name="plus" size={19} onClick={() => (form.showQrcode = true)} />
@@ -307,74 +317,82 @@ export default defineComponent({
         </OSticky>
 
         {form.listState.dataShow ? (
-          <List
-            v-model:loading={form.listState.loading}
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={form.listState.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${form.listState.height}px)`
+            }}
           >
-            {form.list.map((item: any) => (
-              <CellGroup inset style={{ marginBottom: '12px' }} onClick={() => onDetail(item)}>
-                <Cell center isLink class={styles.manageCell}>
-                  {{
-                    icon: () => (
-                      <Image class={styles.img} src={item.avatar ? item.avatar : iconTeacher} />
-                    ),
-                    title: () => (
-                      <div class={styles.teacherContent}>
-                        <div class={styles.content}>
-                          <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
-                        </div>
-                        <div class={styles.classNum}>
-                          <p class={styles.num}>
-                            {item.completedCourseScheduleNum || 0}/
-                            {item.totalCourseScheduleNum || 0}
-                          </p>
-                          <p class={styles.numText}>课时</p>
+            <List
+              v-model:loading={form.listState.loading}
+              finished={form.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {form.list.map((item: any) => (
+                <CellGroup inset style={{ marginBottom: '12px' }} onClick={() => onDetail(item)}>
+                  <Cell center isLink class={styles.manageCell}>
+                    {{
+                      icon: () => (
+                        <Image class={styles.img} src={item.avatar ? item.avatar : iconTeacher} />
+                      ),
+                      title: () => (
+                        <div class={styles.teacherContent}>
+                          <div class={styles.content}>
+                            <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
+                          </div>
+                          <div class={styles.classNum}>
+                            <p class={styles.num}>
+                              {item.completedCourseScheduleNum || 0}/
+                              {item.totalCourseScheduleNum || 0}
+                            </p>
+                            <p class={styles.numText}>课时</p>
+                          </div>
+                          <div
+                            class={styles.message}
+                            onClick={(e: any) => {
+                              e.stopPropagation()
+                              e.preventDefault()
+                              form.showMessage = true
+                              form.selectItem = item
+                            }}
+                          >
+                            <Image class={styles.messageImg} src={iconMessage} />
+                          </div>
                         </div>
-                        <div
-                          class={styles.message}
-                          onClick={(e: any) => {
-                            e.stopPropagation()
-                            e.preventDefault()
-                            form.showMessage = true
-                            form.selectItem = item
-                          }}
-                        >
-                          <Image class={styles.messageImg} src={iconMessage} />
+                      ),
+                      value: () => (
+                        <span class={[styles.status, item.delFlag ? styles.frozen : '']}>
+                          {!item.delFlag ? '绑定' : '解绑'}
+                        </span>
+                      )
+                    }}
+                  </Cell>
+                  <Cell center>
+                    {{
+                      title: () => (
+                        <div class={styles.subjectContainer}>
+                          <span>声部：</span>
+                          <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
+                            {item.subjectNames &&
+                              item.subjectNames.length > 0 &&
+                              item.subjectNames.map((subject: any) => (
+                                <Tag type="primary" class={styles.tagSubject}>
+                                  {subject}
+                                </Tag>
+                              ))}
+                          </div>
                         </div>
-                      </div>
-                    ),
-                    value: () => (
-                      <span class={[styles.status, item.delFlag ? styles.frozen : '']}>
-                        {!item.delFlag ? '绑定' : '解绑'}
-                      </span>
-                    )
-                  }}
-                </Cell>
-                <Cell center>
-                  {{
-                    title: () => (
-                      <div class={styles.subjectContainer}>
-                        <span>声部：</span>
-                        <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-                          {item.subjectNames &&
-                            item.subjectNames.length > 0 &&
-                            item.subjectNames.map((subject: any) => (
-                              <Tag type="primary" class={styles.tagSubject}>
-                                {subject}
-                              </Tag>
-                            ))}
-                        </div>
-                      </div>
-                    )
-                  }}
-                </Cell>
-              </CellGroup>
-            ))}
-          </List>
+                      )
+                    }}
+                  </Cell>
+                </CellGroup>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无伴学指导" />
         )}

src/school/content-information/index.module.less

@@ -1,46 +0,0 @@
-.contentInformation {
-  // padding: 13px;
-  overflow: hidden;
-
-  .addPhone {
-    width: calc(100% - 26px);
-    color: var(--van-primary-text);
-    border-color: #fff;
-    border-radius: 10px;
-    font-size: 16px;
-    margin: 12px 13px;
-  }
-
-  .contentCell {
-    padding: 13px 13px 3px;
-    &:last-child {
-      padding-bottom: 16px;
-    }
-  }
-
-  .img {
-    width: 142px;
-    height: 80px;
-    overflow: hidden;
-    border-radius: 10px;
-    margin-right: 15px;
-    flex-shrink: 0;
-  }
-
-  .title {
-    font-size: 14px;
-    font-weight: 500;
-    color: #333333;
-    line-height: 21px;
-  }
-  .label {
-    font-size: 12px;
-    color: #777777;
-    line-height: 17px;
-  }
-  .content {
-  }
-  .time {
-    color: #aaaaaa;
-  }
-}

src/school/content-information/index.tsx

@@ -1,38 +0,0 @@
-import { Button, Cell, Image } from 'vant'
-import { defineComponent } from 'vue'
-import styles from './index.module.less'
-
-export default defineComponent({
-  name: 'content-information',
-  setup() {
-    return () => (
-      <div class={styles.contentInformation}>
-        <Button icon="plus" block class={styles.addPhone}>
-          添加资讯
-        </Button>
-
-        {[1, 2, 3, 4, 5, 6].map((i) => (
-          <Cell center border={false} class={styles.contentCell}>
-            {{
-              icon: () => (
-                <Image
-                  class={styles.img}
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1670231208704.png"
-                />
-              ),
-              title: () => <div class={styles.title}>带你认识一位管乐大师</div>,
-              label: () => (
-                <div class={styles.label}>
-                  <div class={[styles.content, 'van-multi-ellipsis--l2']}>
-                    音乐是人类共通的灵魂，而音乐大师就是灵魂的工程师。学习管乐音乐是人类共通的灵魂，而音乐大师就是灵魂的工程师。学习管乐
-                  </div>
-                  <div class={styles.time}>2021年10月15日</div>
-                </div>
-              )
-            }}
-          </Cell>
-        ))}
-      </div>
-    )
-  }
-})

src/school/home/index.tsx

@@ -8,7 +8,7 @@ export default defineComponent({
     return (
       <>
         <div class={styles.title}>标题-管理端</div>
-        <Button>首页</Button>
+        {/* <Button>首页</Button> */}
       </>
     )
   }

src/school/manage-teacher/index.tsx

@@ -29,6 +29,7 @@ import OEmpty from '@/components/o-empty'
 import { manageTeacherType } from '@/constant'
 import html2canvas from 'html2canvas'
 import { promisefiyPostMessage, postMessage } from '@/helpers/native-message'
+import OFullRefresh from '@/components/o-full-refresh'
 
 export default defineComponent({
   name: 'companion-teacher',
@@ -44,7 +45,9 @@ export default defineComponent({
       listState: {
         dataShow: true, // 判断是否有数据
         loading: false,
-        finished: false
+        finished: false,
+        refreshing: false,
+        height: 0 // 页面头部高度，为了处理下拉刷新用的
       },
       statusText: '状态',
       params: {
@@ -87,6 +90,7 @@ export default defineComponent({
           }
         })
         form.listState.loading = false
+        form.listState.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (form.list.length > 0 && result.current === 1) {
@@ -100,6 +104,7 @@ export default defineComponent({
       } catch {
         form.listState.dataShow = false
         form.listState.finished = true
+        form.listState.refreshing = false
         form.isClick = false
       }
     }
@@ -233,7 +238,12 @@ export default defineComponent({
     })
     return () => (
       <>
-        <OSticky position="top">
+        <OSticky
+          position="top"
+          onGetHeight={(height: any) => {
+            form.listState.height = height
+          }}
+        >
           <OHeader border={false}>
             {{
               right: () => <Icon name="plus" size={19} onClick={() => (form.showQrcode = true)} />
@@ -262,35 +272,43 @@ export default defineComponent({
           />
         </OSticky>
         {form.listState.dataShow ? (
-          <List
-            v-model:loading={form.listState.loading}
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={form.listState.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${form.listState.height}px)`
+            }}
           >
-            {form.list.map((item: any) => (
-              <Cell center isLink class={styles.manageCell} onClick={() => onDetail(item)}>
-                {{
-                  icon: () => (
-                    <Image class={styles.img} src={item.avatar ? item.avatar : iconTeacher} />
-                  ),
-                  title: () => (
-                    <div class={styles.content}>
-                      <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
-                      <p class={styles.phone}>{item.phone}</p>
-                    </div>
-                  ),
-                  value: () => (
-                    <span class={[styles.status, item.status === 'LOCKED' ? styles.frozen : '']}>
-                      {manageTeacherType[item.status]}
-                    </span>
-                  )
-                }}
-              </Cell>
-            ))}
-          </List>
+            <List
+              v-model:loading={form.listState.loading}
+              finished={form.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {form.list.map((item: any) => (
+                <Cell center isLink class={styles.manageCell} onClick={() => onDetail(item)}>
+                  {{
+                    icon: () => (
+                      <Image class={styles.img} src={item.avatar ? item.avatar : iconTeacher} />
+                    ),
+                    title: () => (
+                      <div class={styles.content}>
+                        <p class={[styles.name, 'van-ellipsis']}>{item.nickname}</p>
+                        <p class={styles.phone}>{item.phone}</p>
+                      </div>
+                    ),
+                    value: () => (
+                      <span class={[styles.status, item.status === 'LOCKED' ? styles.frozen : '']}>
+                        {manageTeacherType[item.status]}
+                      </span>
+                    )
+                  }}
+                </Cell>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无管理老师" />
         )}

src/school/manage-teacher/manage-detail.tsx

@@ -16,7 +16,7 @@ export default defineComponent({
     const detail = ref<any>({})
     const state = reactive({
       menuStatus: false,
-      status: true
+      status: false
     })
     const getDetail = async () => {
       try {

src/school/mass-message/index.tsx

@@ -1,4 +1,5 @@
 import OEmpty from '@/components/o-empty'
+import OFullRefresh from '@/components/o-full-refresh'
 import OHeader from '@/components/o-header'
 import OSearch from '@/components/o-search'
 import OSticky from '@/components/o-sticky'
@@ -16,6 +17,8 @@ export default defineComponent({
     const router = useRouter()
     const status = sessionStorage.getItem('mass-message-send')
     const state = reactive({
+      refreshing: false,
+      height: 0, // 页面头部高度，为了处理下拉刷新用的
       list: [],
       dataShow: true, // 判断是否有数据
       loading: false,
@@ -40,6 +43,7 @@ export default defineComponent({
         })
         state.isClick = false
         state.loading = false
+        state.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (state.list.length > 0 && result.current === 1) {
@@ -52,6 +56,7 @@ export default defineComponent({
       } catch {
         state.isClick = false
         state.dataShow = false
+        state.refreshing = false
         state.finished = true
       }
     }
@@ -81,7 +86,12 @@ export default defineComponent({
     })
     return () => (
       <div class={styles.massMessage}>
-        <OSticky position="top">
+        <OSticky
+          position="top"
+          onGetHeight={(height: any) => {
+            state.height = height
+          }}
+        >
           <OHeader border={false}>
             {{
               right: () => (
@@ -122,39 +132,47 @@ export default defineComponent({
         </OSticky>
 
         {state.dataShow ? (
-          <List
-            v-model:loading={state.loading}
-            finished={state.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={state.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${state.height}px)`
+            }}
           >
-            {state.list.map((item: any) => (
-              <CellGroup inset onClick={() => onDetail(item)} style={{ marginBottom: '12px' }}>
-                <Cell
-                  class={[styles.waitSend, item.sendStatus === 'SEND' && styles.messageSend]}
-                  titleStyle={{ flex: '1 auto' }}
-                >
-                  {{
-                    title: () => (
-                      <div class={styles.time}>
-                        {item.sendStatus === 'WAIT' && (
-                          <Icon name="clock-o" class={styles.clockO} />
-                        )}
+            <List
+              v-model:loading={state.loading}
+              finished={state.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {state.list.map((item: any) => (
+                <CellGroup inset onClick={() => onDetail(item)} style={{ marginBottom: '12px' }}>
+                  <Cell
+                    class={[styles.waitSend, item.sendStatus === 'SEND' && styles.messageSend]}
+                    titleStyle={{ flex: '1 auto' }}
+                  >
+                    {{
+                      title: () => (
+                        <div class={styles.time}>
+                          {item.sendStatus === 'WAIT' && (
+                            <Icon name="clock-o" class={styles.clockO} />
+                          )}
 
-                        {item.sendTime}
-                      </div>
-                    ),
-                    value: () => <span>{snedStatus[item.sendStatus]}</span>
-                  }}
-                </Cell>
-                <Cell valueClass={[styles.messageContent, 'van-multi-ellipsis--l3']}>
-                  {item.textMessage}
-                </Cell>
-              </CellGroup>
-            ))}
-          </List>
+                          {item.sendTime}
+                        </div>
+                      ),
+                      value: () => <span>{snedStatus[item.sendStatus]}</span>
+                    }}
+                  </Cell>
+                  <Cell valueClass={[styles.messageContent, 'van-multi-ellipsis--l3']}>
+                    {item.textMessage}
+                  </Cell>
+                </CellGroup>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无群发消息" />
         )}

src/school/orchestra/index.tsx

@@ -8,6 +8,7 @@ import styles from './index.module.less'
 import { state } from '@/state'
 import OEmpty from '@/components/o-empty'
 import { orchestraType } from '@/constant'
+import OFullRefresh from '@/components/o-full-refresh'
 
 export default defineComponent({
   name: 'my-orchestra',
@@ -25,7 +26,9 @@ export default defineComponent({
       listState: {
         dataShow: true, // 判断是否有数据
         loading: false,
-        finished: false
+        finished: false,
+        refreshing: false,
+        height: 0 // 页面头部高度，为了处理下拉刷新用的
       },
       params: {
         type: null,
@@ -68,6 +71,7 @@ export default defineComponent({
           }
         })
         form.listState.loading = false
+        form.listState.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (form.list.length > 0 && result.current === 1) {
@@ -81,6 +85,7 @@ export default defineComponent({
       } catch {
         form.listState.dataShow = false
         form.listState.finished = true
+        form.listState.refreshing = false
         form.isClick = false
       }
     }
@@ -95,12 +100,26 @@ export default defineComponent({
       })
     }
 
+    const onRefresh = () => {
+      form.params.page = 1
+      form.list = []
+      form.listState.dataShow = true // 判断是否有数据
+      form.listState.loading = false
+      form.listState.finished = false
+      getList()
+    }
+
     onMounted(() => {
       getList()
     })
     return () => (
       <>
-        <OSticky position="top">
+        <OSticky
+          position="top"
+          onGetHeight={(height: any) => {
+            form.listState.height = height
+          }}
+        >
           <OHeader>
             {{
               right: () => (
@@ -137,34 +156,42 @@ export default defineComponent({
         </OSticky>
 
         {form.listState.dataShow ? (
-          <List
-            v-model:loading={form.listState.loading}
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={form.listState.refreshing}
+            onRefresh={onRefresh}
+            style={{
+              minHeight: `calc(100vh - ${form.listState.height}px)`
+            }}
           >
-            {form.list.map((item: any) => (
-              <Cell isLink center class={styles.oCell} onClick={() => onDetail(item)}>
-                {{
-                  title: () => (
-                    <div class={styles.oTitle}>
-                      <div>{item.name}</div>
+            <List
+              v-model:loading={form.listState.loading}
+              finished={form.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {form.list.map((item: any) => (
+                <Cell isLink center class={styles.oCell} onClick={() => onDetail(item)}>
+                  {{
+                    title: () => (
+                      <div class={styles.oTitle}>
+                        <div>{item.name}</div>
 
-                      <Tag
-                        style={{ marginLeft: '6px', flexShrink: 0 }}
-                        color={item.type === 'DELIVERY' ? '#FF8057' : '#64A9FF'}
-                      >
-                        {orchestraType[item.type]}
-                      </Tag>
-                    </div>
-                  ),
-                  label: () => <p>学生人数：{item.currentStudentNum || 0}人</p>
-                }}
-              </Cell>
-            ))}
-          </List>
+                        <Tag
+                          style={{ marginLeft: '6px', flexShrink: 0 }}
+                          color={item.type === 'DELIVERY' ? '#FF8057' : '#64A9FF'}
+                        >
+                          {orchestraType[item.type]}
+                        </Tag>
+                      </div>
+                    ),
+                    label: () => <p>学生人数：{item.currentStudentNum || 0}人</p>
+                  }}
+                </Cell>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无乐团" />
         )}

src/school/orchestra/modal/add-information.tsx

@@ -25,6 +25,7 @@ export default defineComponent({
       coverImage: null,
       title: null,
       linkUrl: '',
+      linkType: 'OUT',
       memo: null
     })
     const onSubmit = async () => {

src/school/orchestra/orchestra-information.tsx

@@ -1,4 +1,5 @@
 import OEmpty from '@/components/o-empty'
+import OFullRefresh from '@/components/o-full-refresh'
 import OPopup from '@/components/o-popup'
 import OSticky from '@/components/o-sticky'
 import request from '@/helpers/request'
@@ -22,7 +23,9 @@ export default defineComponent({
       listState: {
         dataShow: true, // 判断是否有数据
         loading: false,
-        finished: false
+        finished: false,
+        refreshing: false,
+        height: 0 // 页面头部高度，为了处理下拉刷新用的
       },
       params: {
         type: 'HOT_CONSULTATION',
@@ -46,6 +49,7 @@ export default defineComponent({
           }
         })
         state.listState.loading = false
+        state.listState.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (state.list.length > 0 && result.current === 1) {
@@ -60,6 +64,7 @@ export default defineComponent({
       } catch {
         state.listState.dataShow = false
         state.listState.finished = true
+        state.listState.refreshing = false
         state.isLoading = false
       }
     }
@@ -125,7 +130,12 @@ export default defineComponent({
     })
     return () => (
       <div class={styles.information}>
-        <OSticky position="top">
+        <OSticky
+          position="top"
+          onGetHeight={(height: any) => {
+            state.listState.height = height
+          }}
+        >
           <div style="background: #f6f8f9; overflow: hidden;">
             <Button
               icon="plus"
@@ -142,50 +152,58 @@ export default defineComponent({
         </OSticky>
 
         {state.listState.dataShow ? (
-          <List
-            v-model:loading={state.listState.loading}
-            finished={state.listState.finished}
-            finishedText=" "
-            onLoad={getList}
-            immediateCheck={false}
-            class={styles.informationGroup}
+          <OFullRefresh
+            v-model:modelValue={state.listState.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${state.listState.height}px)`
+            }}
           >
-            {state.list.map((item: any, index: number) => (
-              <Cell center class={styles.cell} onClick={() => onDetail(item)}>
-                {{
-                  icon: () => <Image src={item.coverImage} class={styles.img} />,
-                  title: () => (
-                    <div>
-                      <div class={[styles.title, 'van-ellipsis']}>{item.title}</div>
-                      <div class={[styles.content, 'van-multi-ellipsis--l2']}>{item.memo}</div>
-                      <div
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          justifyContent: 'space-between'
-                        }}
-                      >
-                        <div class={styles.time}>
-                          {item.createTime ? dayjs(item.createTime).format('YYYY年MM月DD日') : ''}
-                        </div>
-                        <Icon
-                          name="ellipsis"
-                          size={23}
-                          color="#777777"
-                          style={{ fontWeight: 'bold' }}
-                          onClick={(e: any) => {
-                            e.stopPropagation()
-                            state.selectItem = item
-                            state.oPopover = true
+            <List
+              v-model:loading={state.listState.loading}
+              finished={state.listState.finished}
+              finishedText=" "
+              onLoad={getList}
+              immediateCheck={false}
+              class={styles.informationGroup}
+            >
+              {state.list.map((item: any, index: number) => (
+                <Cell center class={styles.cell} onClick={() => onDetail(item)}>
+                  {{
+                    icon: () => <Image src={item.coverImage} class={styles.img} />,
+                    title: () => (
+                      <div>
+                        <div class={[styles.title, 'van-ellipsis']}>{item.title}</div>
+                        <div class={[styles.content, 'van-multi-ellipsis--l2']}>{item.memo}</div>
+                        <div
+                          style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between'
                           }}
-                        />
+                        >
+                          <div class={styles.time}>
+                            {item.createTime ? dayjs(item.createTime).format('YYYY年MM月DD日') : ''}
+                          </div>
+                          <Icon
+                            name="ellipsis"
+                            size={23}
+                            color="#777777"
+                            style={{ fontWeight: 'bold' }}
+                            onClick={(e: any) => {
+                              e.stopPropagation()
+                              state.selectItem = item
+                              state.oPopover = true
+                            }}
+                          />
+                        </div>
                       </div>
-                    </div>
-                  )
-                }}
-              </Cell>
-            ))}
-          </List>
+                    )
+                  }}
+                </Cell>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无资讯" />
         )}

src/student/trade-record/component/paid-list.tsx

@@ -26,6 +26,7 @@ import { moneyFormat } from '@/helpers/utils'
 import ODialog from '@/components/o-dialog'
 import { forms } from '@/school/train-planning/create'
 import { useRouter } from 'vue-router'
+import OFullRefresh from '@/components/o-full-refresh'
 
 export default defineComponent({
   name: 'wait_pay',
@@ -49,7 +50,9 @@ export default defineComponent({
       listState: {
         dataShow: true, // 判断是否有数据
         loading: false,
-        finished: false
+        finished: false,
+        refreshing: false,
+        height: props.height || 0 // 页面头部高度，为了处理下拉刷新用的
       },
       params: {
         paymentStatus: ['PAID', 'TIMEOUT', 'FAIL', 'CLOSED'],
@@ -83,6 +86,7 @@ export default defineComponent({
           }
         })
         form.listState.loading = false
+        form.listState.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (form.list.length > 0 && result.current === 1) {
@@ -96,6 +100,7 @@ export default defineComponent({
       } catch {
         form.listState.dataShow = false
         form.listState.finished = true
+        form.listState.refreshing = false
         form.isClick = false
       }
     }
@@ -211,55 +216,63 @@ export default defineComponent({
         </Sticky>
 
         {form.listState.dataShow ? (
-          <List
-            v-model:loading={form.listState.loading}
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={form.listState.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${form.listState.height}px)`
+            }}
           >
-            {form.list.map((item: any) => (
-              <CellGroup inset class={styles.cellGroup} onClick={() => onDetails(item)}>
-                <Cell center titleClass={styles.times}>
-                  {{
-                    title: () => <span class={styles.times}>{item.createTime}</span>,
-                    value: () => <span class={styles.status}>{orderStatus[item.status]}</span>
-                  }}
-                </Cell>
-                <Cell isLink center clickable={false} titleStyle={{ flex: '0 auto' }}>
-                  {{
-                    icon: () => <Image class={styles.img} src={iconOrder} />,
-                    title: () => <span class={styles.name}>{orderType[item.orderType]}</span>,
-                    value: () => (
-                      <div class={styles.price}>
-                        <span>¥</span>
-                        {moneyFormat(item.paymentCashAmount)}
-                      </div>
-                    )
-                  }}
-                </Cell>
-                <Cell style={'padding: 0'}>
-                  {{
-                    title: () =>
-                      item.refundable && (
-                        <Button
-                          block
-                          class={styles.refundBtn}
-                          onClick={(e: any) => {
-                            e.stopPropagation()
-                            form.refundSelect = item
-                            form.refundStatus = true
-                          }}
-                        >
-                          申请退费
-                        </Button>
+            <List
+              v-model:loading={form.listState.loading}
+              finished={form.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {form.list.map((item: any) => (
+                <CellGroup inset class={styles.cellGroup} onClick={() => onDetails(item)}>
+                  <Cell center titleClass={styles.times}>
+                    {{
+                      title: () => <span class={styles.times}>{item.createTime}</span>,
+                      value: () => <span class={styles.status}>{orderStatus[item.status]}</span>
+                    }}
+                  </Cell>
+                  <Cell isLink center clickable={false} titleStyle={{ flex: '0 auto' }}>
+                    {{
+                      icon: () => <Image class={styles.img} src={iconOrder} />,
+                      title: () => <span class={styles.name}>{orderType[item.orderType]}</span>,
+                      value: () => (
+                        <div class={styles.price}>
+                          <span>¥</span>
+                          {moneyFormat(item.paymentCashAmount)}
+                        </div>
                       )
-                  }}
-                </Cell>
-              </CellGroup>
-            ))}
-          </List>
+                    }}
+                  </Cell>
+                  <Cell style={'padding: 0'}>
+                    {{
+                      title: () =>
+                        item.refundable && (
+                          <Button
+                            block
+                            class={styles.refundBtn}
+                            onClick={(e: any) => {
+                              e.stopPropagation()
+                              form.refundSelect = item
+                              form.refundStatus = true
+                            }}
+                          >
+                            申请退费
+                          </Button>
+                        )
+                    }}
+                  </Cell>
+                </CellGroup>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无订单" />
         )}

src/student/trade-record/component/refund-list.tsx

@@ -8,6 +8,7 @@ import OEmpty from '@/components/o-empty'
 import { orderStatus, orderType } from '@/constant'
 import { moneyFormat } from '@/helpers/utils'
 import { useRouter } from 'vue-router'
+import OFullRefresh from '@/components/o-full-refresh'
 
 export default defineComponent({
   name: 'wait_pay',
@@ -30,7 +31,9 @@ export default defineComponent({
       listState: {
         dataShow: true, // 判断是否有数据
         loading: false,
-        finished: false
+        finished: false,
+        refreshing: false,
+        height: props.height || 0 // 页面头部高度，为了处理下拉刷新用的
       },
       params: {
         paymentStatus: ['REFUNDING', 'REFUNDED'],
@@ -51,6 +54,7 @@ export default defineComponent({
           }
         })
         form.listState.loading = false
+        form.listState.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (form.list.length > 0 && result.current === 1) {
@@ -63,6 +67,7 @@ export default defineComponent({
         form.isClick = false
       } catch {
         form.listState.dataShow = false
+        form.listState.refreshing = false
         form.listState.finished = true
         form.isClick = false
       }
@@ -124,37 +129,45 @@ export default defineComponent({
         </Sticky>
 
         {form.listState.dataShow ? (
-          <List
-            v-model:loading={form.listState.loading}
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={form.listState.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${form.listState.height}px)`
+            }}
           >
-            {form.list.map((item: any) => (
-              <CellGroup inset class={styles.cellGroup} onClick={() => onDetails(item)}>
-                <Cell center titleClass={styles.times}>
-                  {{
-                    title: () => <span class={styles.times}>{item.createTime}</span>,
-                    value: () => <span class={styles.status}>{orderStatus[item.status]}</span>
-                  }}
-                </Cell>
-                <Cell isLink clickable={false} center titleStyle={{ flex: '0 auto' }}>
-                  {{
-                    icon: () => <Image class={styles.img} src={iconOrder} />,
-                    title: () => <span class={styles.name}>{orderType[item.orderType]}</span>,
-                    value: () => (
-                      <div class={styles.price}>
-                        <span>¥</span>
-                        {moneyFormat(item.paymentCashAmount)}
-                      </div>
-                    )
-                  }}
-                </Cell>
-              </CellGroup>
-            ))}
-          </List>
+            <List
+              v-model:loading={form.listState.loading}
+              finished={form.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {form.list.map((item: any) => (
+                <CellGroup inset class={styles.cellGroup} onClick={() => onDetails(item)}>
+                  <Cell center titleClass={styles.times}>
+                    {{
+                      title: () => <span class={styles.times}>{item.createTime}</span>,
+                      value: () => <span class={styles.status}>{orderStatus[item.status]}</span>
+                    }}
+                  </Cell>
+                  <Cell isLink clickable={false} center titleStyle={{ flex: '0 auto' }}>
+                    {{
+                      icon: () => <Image class={styles.img} src={iconOrder} />,
+                      title: () => <span class={styles.name}>{orderType[item.orderType]}</span>,
+                      value: () => (
+                        <div class={styles.price}>
+                          <span>¥</span>
+                          {moneyFormat(item.paymentCashAmount)}
+                        </div>
+                      )
+                    }}
+                  </Cell>
+                </CellGroup>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无订单" />
         )}

src/student/trade-record/component/wait-pay.tsx

@@ -20,6 +20,7 @@ import OEmpty from '@/components/o-empty'
 import { orderStatus, orderType } from '@/constant'
 import { moneyFormat } from '@/helpers/utils'
 import { useRouter } from 'vue-router'
+import OFullRefresh from '@/components/o-full-refresh'
 
 export default defineComponent({
   name: 'wait_pay',
@@ -42,7 +43,9 @@ export default defineComponent({
       listState: {
         dataShow: true, // 判断是否有数据
         loading: false,
-        finished: false
+        finished: false,
+        refreshing: false,
+        height: props.height || 0 // 页面头部高度，为了处理下拉刷新用的
       },
       params: {
         paymentStatus: ['WAIT_PAY', 'PAYING'],
@@ -63,6 +66,7 @@ export default defineComponent({
           }
         })
         form.listState.loading = false
+        form.listState.refreshing = false
         const result = res.data || {}
         // 处理重复请求数据
         if (form.list.length > 0 && result.current === 1) {
@@ -75,6 +79,7 @@ export default defineComponent({
         form.isClick = false
       } catch {
         form.listState.dataShow = false
+        form.listState.refreshing = false
         form.listState.finished = true
         form.isClick = false
       }
@@ -174,71 +179,79 @@ export default defineComponent({
         </Sticky>
 
         {form.listState.dataShow ? (
-          <List
-            v-model:loading={form.listState.loading}
-            finished={form.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
+          <OFullRefresh
+            v-model:modelValue={form.listState.refreshing}
+            onRefresh={onSearch}
+            style={{
+              minHeight: `calc(100vh - ${form.listState.height}px)`
+            }}
           >
-            {form.list.map((item: any) => (
-              <CellGroup inset class={styles.cellGroup} onClick={() => onDetails(item)}>
-                <Cell center titleClass={styles.times}>
-                  {{
-                    title: () => <span class={styles.times}>{item.createTime}</span>,
-                    value: () => <span class={styles.status}>{orderStatus[item.status]}</span>
-                  }}
-                </Cell>
-                <Cell isLink center clickable={false} titleStyle={{ flex: '0 auto' }}>
-                  {{
-                    icon: () => <Image class={styles.img} src={iconOrder} />,
-                    title: () => <span class={styles.name}>{orderType[item.orderType]}</span>,
-                    value: () => (
-                      <div class={styles.price}>
-                        <span>¥</span>
-                        {moneyFormat(item.paymentCashAmount)}
-                      </div>
-                    )
-                  }}
-                </Cell>
-                <Cell>
-                  {{
-                    value: () => (
-                      <div class={styles.btnGroup}>
-                        <Button
-                          plain
-                          round
-                          size="small"
-                          color="#777777"
-                          class={styles.smallBtn}
-                          onClick={(e: any) => {
-                            e.stopPropagation()
-                            onCancelOrder(item)
-                          }}
-                        >
-                          取消订单
-                        </Button>
-                        <Button
-                          plain
-                          round
-                          size="small"
-                          type="primary"
-                          class={styles.smallBtn}
-                          onClick={(e: any) => {
-                            e.stopPropagation()
-                            onConfirmOrder(item)
-                          }}
-                        >
-                          继续支付
-                        </Button>
-                      </div>
-                    )
-                  }}
-                </Cell>
-              </CellGroup>
-            ))}
-          </List>
+            <List
+              v-model:loading={form.listState.loading}
+              finished={form.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {form.list.map((item: any) => (
+                <CellGroup inset class={styles.cellGroup} onClick={() => onDetails(item)}>
+                  <Cell center titleClass={styles.times}>
+                    {{
+                      title: () => <span class={styles.times}>{item.createTime}</span>,
+                      value: () => <span class={styles.status}>{orderStatus[item.status]}</span>
+                    }}
+                  </Cell>
+                  <Cell isLink center clickable={false} titleStyle={{ flex: '0 auto' }}>
+                    {{
+                      icon: () => <Image class={styles.img} src={iconOrder} />,
+                      title: () => <span class={styles.name}>{orderType[item.orderType]}</span>,
+                      value: () => (
+                        <div class={styles.price}>
+                          <span>¥</span>
+                          {moneyFormat(item.paymentCashAmount)}
+                        </div>
+                      )
+                    }}
+                  </Cell>
+                  <Cell>
+                    {{
+                      value: () => (
+                        <div class={styles.btnGroup}>
+                          <Button
+                            plain
+                            round
+                            size="small"
+                            color="#777777"
+                            class={styles.smallBtn}
+                            onClick={(e: any) => {
+                              e.stopPropagation()
+                              onCancelOrder(item)
+                            }}
+                          >
+                            取消订单
+                          </Button>
+                          <Button
+                            plain
+                            round
+                            size="small"
+                            type="primary"
+                            class={styles.smallBtn}
+                            onClick={(e: any) => {
+                              e.stopPropagation()
+                              onConfirmOrder(item)
+                            }}
+                          >
+                            继续支付
+                          </Button>
+                        </div>
+                      )
+                    }}
+                  </Cell>
+                </CellGroup>
+              ))}
+            </List>
+          </OFullRefresh>
         ) : (
           <OEmpty btnStatus={false} tips="暂无订单" />
         )}