更新样式

src/components/o-sticky/index.tsx

@@ -17,6 +17,13 @@ export default defineComponent({
     mode: {
       type: String as PropType<'fixed' | 'sticky'>,
       default: 'fixed'
+    },
+    offsetTop: {
+      type: String,
+      default: '0px'
+    },
+    offsetBottom: {
+      default: '0px'
     }
   },
   data() {
@@ -31,9 +38,9 @@ export default defineComponent({
   },
   mounted() {
     if (this.position === 'top') {
-      this.divStyle.top = '0px'
+      this.divStyle.top = this.offsetTop || '0px'
     } else {
-      this.divStyle.bottom = '0px'
+      this.divStyle.bottom = this.offsetBottom || '0px'
     }
 
     // nextTick(() => {
@@ -48,6 +55,14 @@ export default defineComponent({
       }, 200)
     })
   },
+  watch: {
+    offsetTop() {
+      this.divStyle.top = this.offsetTop
+    },
+    offsetBottom() {
+      this.divStyle.bottom = this.offsetBottom
+    }
+  },
   render() {
     return (
       <div style={[this.sectionStyle]} class={this.mode === 'sticky' && styles.sticky}>

src/school/approval-manage/batch-adjust.tsx

@@ -241,7 +241,12 @@ export default defineComponent({
         </OSticky>
 
         {/* 乐团列表 */}
-        <Popup v-model:show={forms.orchestraStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.orchestraStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={forms.orchestraList}
             columnsFieldNames={{ text: 'name', value: 'id' }}
@@ -276,7 +281,12 @@ export default defineComponent({
         </OPopup>
 
         {/* 开始日期 */}
-        <Popup v-model:show={forms.startTimeStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.startTimeStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             // v-model={forms.startTime}
             minDate={new Date()}
@@ -290,7 +300,12 @@ export default defineComponent({
           />
         </Popup>
         {/* 结束日期 */}
-        <Popup v-model:show={forms.endTimeStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.endTimeStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             // v-model={forms.endTime}
             minDate={forms.endTimeMinDate}

src/school/attendance/components/attend-student.tsx

@@ -247,7 +247,12 @@ export default defineComponent({
           )}
         </div>
 
-        <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false
@@ -276,7 +281,13 @@ export default defineComponent({
           actions={state.subjects}
           onSelect={checkSubject}
         ></ActionSheet> */}
-        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverOrchestra}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.actions}
             onCancel={() => (state.showPopoverOrchestra = false)}
@@ -285,7 +296,13 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverSubject}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.subjects}
             onCancel={() => (state.showPopoverSubject = false)}

src/school/attendance/components/attend-teacher.tsx

@@ -251,7 +251,13 @@ export default defineComponent({
             <OEmpty tips="暂无考勤" />
           )}
         </div>
-        <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false
@@ -280,7 +286,13 @@ export default defineComponent({
           actions={state.courseList}
           onSelect={checkSubject}
         ></ActionSheet> */}
-        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverOrchestra}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.actions}
             onCancel={() => (state.showPopoverOrchestra = false)}
@@ -289,7 +301,13 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverSubject}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.courseList}
             onCancel={() => (state.showPopoverSubject = false)}

src/school/attendance/student-att-day.tsx

@@ -141,7 +141,12 @@ export default defineComponent({
         ) : (
           <OEmpty />
         )}
-        <Popup v-model:show={state.showPopoverTime} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false

src/school/companion-teacher/companion-teacher-register.tsx

@@ -695,7 +695,7 @@ export default defineComponent({
           </Button>
         </Form>
         {/* 城市 */}
-        <Popup v-model:show={state.showPicker} position="bottom" round>
+        <Popup v-model:show={state.showPicker} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             showToolbar
             columns={state.columns}
@@ -751,7 +751,12 @@ export default defineComponent({
         </Popup>
         {/* 学历 */}
         {/* 学历分为专科、本科、硕士、博士、其他 */}
-        <Popup v-model:show={state.showEducation} position="bottom" round>
+        <Popup
+          v-model:show={state.showEducation}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             showToolbar
             columns={[

src/school/companion-teacher/index.tsx

@@ -375,7 +375,7 @@ export default defineComponent({
           }}
         />
 
-        <Popup v-model:show={form.showPopover} round position="bottom">
+        <Popup v-model:show={form.showPopover} round position="bottom" class={'popupBottomSearch'}>
           <Picker
             columns={form.subjectList}
             onCancel={() => (form.showPopover = false)}

src/school/mass-message/component/class-list/index.tsx

@@ -269,7 +269,7 @@ export default defineComponent({
           <OEmpty btnStatus={false} tips="暂无班级" />
         )}
 
-        <Popup v-model:show={forms.showPopover} position="bottom" round>
+        <Popup v-model:show={forms.showPopover} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             columns={forms.orchestraList}
             onCancel={() => (forms.showPopover = false)}

src/school/mass-message/create-message.tsx

@@ -451,7 +451,12 @@ export default defineComponent({
           }}
         />
 
-        <Popup v-model:show={forms.sendTimeStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.sendTimeStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <PickerGroup
             title="发送时间"
             tabs={['选择日期', '选择时间']}

src/school/mass-message/index.tsx

@@ -6,9 +6,10 @@ import OSticky from '@/components/o-sticky'
 import { snedStatus } from '@/constant'
 import request from '@/helpers/request'
 import item from '@/student/coupons/item'
-import { Cell, CellGroup, Icon, List, Tab, Tabs } from 'vant'
+import { Cell, CellGroup, Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRouter } from 'vue-router'
+import List from './list'
 import styles from './index.module.less'
 
 export default defineComponent({
@@ -85,11 +86,12 @@ export default defineComponent({
       getList()
     })
     return () => (
-      <div class={[styles.massMessage, !state.dataShow && 'emptyRootContainer']}>
+      <div class={[styles.massMessage]}>
         <OSticky
           position="top"
           onGetHeight={(height: any) => {
             state.height = height
+            document.documentElement.style.setProperty('--header-height', height + 'px')
           }}
         >
           <OHeader border={false}>
@@ -106,76 +108,42 @@ export default defineComponent({
               )
             }}
           </OHeader>
-          <Tabs
-            lineWidth={18}
-            v-model:active={state.tabValue}
-            onChange={(val: string) => {
-              state.params.sendStatus = val
-              onSearch()
-              sessionStorage.setItem('mass-message-send', val)
-            }}
-          >
-            <Tab title="待发送" name="WAIT"></Tab>
-            <Tab title="已发送" name="SEND"></Tab>
-          </Tabs>
-
-          <OSearch
-            background="#f6f8f9"
-            inputBackground="white"
-            placeholder="请输入群聊/学员名称/伴学指导名称"
-            onSearch={(val: string) => {
-              console.log('val', val)
-              state.params.keyword = val
-              onSearch()
-            }}
-          />
         </OSticky>
+        <Tabs
+          lineWidth={18}
+          v-model:active={state.tabValue}
+          sticky
+          animated
+          swipeable
+          offsetTop={state.height}
+          onChange={(val: string) => {
+            state.params.sendStatus = val
+            onSearch()
+            sessionStorage.setItem('mass-message-send', val)
+          }}
+        >
+          <Tab title="待发送" name="WAIT">
+            <List status="WAIT" height={state.height} />
+          </Tab>
+          <Tab title="已发送" name="SEND">
+            <List status="SEND" height={state.height} />
+          </Tab>
+        </Tabs>
 
-        {state.dataShow ? (
-          <OFullRefresh
-            v-model:modelValue={state.refreshing}
-            onRefresh={onSearch}
-            style={{
-              minHeight: `calc(100vh - ${state.height}px)`
-            }}
-          >
-            <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>
-          </OFullRefresh>
-        ) : (
-          <OEmpty btnStatus={false} tips="暂无群发消息" />
-        )}
+        {/* <Swipe
+          showIndicators={false}
+          style={{
+            height: 'calc(100vh - var(--header-height))',
+            overflowY: 'auto'
+          }}
+        >
+          <SwipeItem>
+            <List status="WAIT" height={state.height} />
+          </SwipeItem>
+          <SwipeItem>
+            <List status="SEND" height={state.height} />
+          </SwipeItem>
+        </Swipe> */}
       </div>
     )
   }

src/school/mass-message/list.tsx

@@ -0,0 +1,165 @@
+import OEmpty from '@/components/o-empty'
+import OFullRefresh from '@/components/o-full-refresh'
+import OSearch from '@/components/o-search'
+import OSticky from '@/components/o-sticky'
+import { snedStatus } from '@/constant'
+import request from '@/helpers/request'
+import { Cell, CellGroup, Icon, List, Sticky } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import { useRouter } from 'vue-router'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'mass-list',
+  props: {
+    status: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 0
+    }
+  },
+  setup(props) {
+    const router = useRouter()
+    const state = reactive({
+      refreshing: false,
+      height: 0, // 页面头部高度，为了处理下拉刷新用的
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        keyword: null as any,
+        sendStatus: props.status || 'WAIT',
+        page: 1,
+        rows: 10
+      },
+      isClick: false
+    })
+    const getList = async () => {
+      try {
+        if (state.isClick) return
+        state.isClick = true
+        const res = await request.post('/api-school/imMessageBatchSending/page', {
+          data: {
+            ...state.params
+          }
+        })
+        state.isClick = false
+        state.loading = false
+        state.refreshing = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (state.list.length > 0 && result.current === 1) {
+          return
+        }
+        state.list = state.list.concat(result.rows || [])
+        state.finished = result.current >= result.pages
+        state.params.page = result.current + 1
+        state.dataShow = state.list.length > 0
+      } catch {
+        state.isClick = false
+        state.dataShow = false
+        state.refreshing = false
+        state.finished = true
+      }
+    }
+
+    // 搜索
+    const onSearch = () => {
+      state.params.page = 1
+      state.list = []
+      state.dataShow = true // 判断是否有数据
+      state.loading = false
+      state.finished = false
+      getList()
+    }
+
+    // 查看详情
+    const onDetail = async (item: any) => {
+      router.push({
+        path: '/create-message',
+        query: {
+          id: item.id
+        }
+      })
+    }
+
+    onMounted(() => {
+      getList()
+    })
+    return () => (
+      <>
+        {/* var(--van-tab-line-height) */}
+
+        <OSearch
+          background="#f6f8f9"
+          inputBackground="white"
+          placeholder="请输入群聊/学员名称/伴学指导名称"
+          onSearch={(val: string) => {
+            state.params.keyword = val
+            onSearch()
+          }}
+        />
+
+        <div
+          style={{
+            height:
+              'calc(100vh -  var(--van-tabs-line-height) - var(--header-height) - var(--van-search-input-height) - 0.53334rem)',
+            overflow: 'hidden',
+            overflowY: 'auto'
+          }}
+        >
+          {state.dataShow ? (
+            <OFullRefresh
+              v-model:modelValue={state.refreshing}
+              onRefresh={onSearch}
+              style={{
+                minHeight:
+                  'calc(100vh -  var(--van-tabs-line-height) - var(--header-height) - var(--van-search-input-height) - 0.53334rem)'
+              }}
+            >
+              <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>
+            </OFullRefresh>
+          ) : (
+            <OEmpty btnStatus={false} tips="暂无群发消息" />
+          )}
+        </div>
+      </>
+    )
+  }
+})

src/school/mass-message/select-sned.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
 
     return () => (
       <div class={styles.orchestraDetail} style={{ background: '#f6f6f6', minHeight: '100vh' }}>
-        <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={state.tabValue}>
+        <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={state.tabValue} swipeable>
           <Tab title="班级" name="class">
             <ClassList
               height={state.height}

src/school/orchestra-story/index.tsx

@@ -253,7 +253,12 @@ export default defineComponent({
           <OEmpty btnStatus={false} tips="暂无事迹" />
         )}
 
-        <Popup v-model:show={state.orchestraStatus} position="bottom" round>
+        <Popup
+          v-model:show={state.orchestraStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.orchestraList}
             onCancel={() => (state.orchestraStatus = false)}

src/school/orchestra-story/story-operation/index.tsx

@@ -390,7 +390,12 @@ export default defineComponent({
           </div>
         </OSticky>
 
-        <Popup v-model:show={forms.createTimeStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.createTimeStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             maxDate={new Date()}
             v-model={forms.currentDate}
@@ -403,7 +408,12 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={forms.orchestraStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.orchestraStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={forms.orchestraList}
             onCancel={() => (forms.orchestraStatus = false)}

src/school/orchestra/compontent/information.tsx

@@ -372,7 +372,7 @@ export default defineComponent({
           </OSticky>
         )}
 
-        <Popup v-model:show={state.timeShow} position="bottom" round>
+        <Popup v-model:show={state.timeShow} position="bottom" round class={'popupBottomSearch'}>
           <DatePicker
             v-model={state.currentData}
             columnsType={['year']}

src/school/orchestra/compontent/plan.tsx

@@ -300,7 +300,7 @@ export default defineComponent({
           <OEmpty btnStatus={false} tips="暂无班级" />
         )}
 
-        <Popup v-model:show={state.timeShow} position="bottom" round>
+        <Popup v-model:show={state.timeShow} position="bottom" round class={'popupBottomSearch'}>
           <DatePicker
             v-model={state.currentData}
             columnsType={['year']}

src/school/orchestra/modal/student-list.tsx

@@ -287,7 +287,7 @@ export default defineComponent({
         </OSticky>
 
         {/* 乐团 */}
-        <Popup v-model:show={state.oPopover} position="bottom" round>
+        <Popup v-model:show={state.oPopover} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             columns={props.orchestraList as any}
             onCancel={() => (state.oPopover = false)}
@@ -303,7 +303,7 @@ export default defineComponent({
         </Popup>
 
         {/* 年级 */}
-        <Popup v-model:show={state.showPopover} position="bottom" round>
+        <Popup v-model:show={state.showPopover} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             columns={state.classList as any}
             onCancel={() => (state.showPopover = false)}

src/school/practice-rewards/detail.tsx

@@ -215,7 +215,12 @@ export default defineComponent({
           <OEmpty btnStatus={false} tips="暂无数据" />
         )}
 
-        <Popup v-model:show={state.subjectStatus} position="bottom" round>
+        <Popup
+          v-model:show={state.subjectStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.subjectList}
             onCancel={() => (state.subjectStatus = false)}

src/school/ranking-list/components/day-bang.tsx

@@ -243,7 +243,12 @@ export default defineComponent({
           <OEmpty />
         )}
 
-        <Popup v-model:show={state.showPopoverTime} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false
@@ -272,7 +277,12 @@ export default defineComponent({
           actions={state.subjects}
           onSelect={checkSubject}
         ></ActionSheet> */}
-        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverOrchestra}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.actions}
             onCancel={() => (state.showPopoverOrchestra = false)}
@@ -281,7 +291,12 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverSubject}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.subjects}
             onCancel={() => (state.showPopoverSubject = false)}

src/school/ranking-list/components/timer-bang.tsx

@@ -243,7 +243,12 @@ export default defineComponent({
           <OEmpty />
         )}
 
-        <Popup v-model:show={state.showPopoverTime} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false
@@ -272,7 +277,12 @@ export default defineComponent({
           actions={state.subjects}
           onSelect={checkSubject}
         ></ActionSheet> */}
-        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverOrchestra}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.actions}
             onCancel={() => (state.showPopoverOrchestra = false)}
@@ -281,7 +291,12 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverSubject}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.subjects}
             onCancel={() => (state.showPopoverSubject = false)}

src/school/train-planning/component/practice-detail/index.tsx

@@ -291,7 +291,7 @@ export default defineComponent({
           />
         </OPopup>
 
-        <Popup v-model:show={forms.timerStatus} position="bottom" round>
+        <Popup v-model:show={forms.timerStatus} position="bottom" round class={'popupBottomSearch'}>
           <TimePicker
             v-model={f.currentTime}
             minHour={f.minHour}

src/school/train-planning/component/practice/index.tsx

@@ -241,7 +241,7 @@ export default defineComponent({
         </OSticky>
 
         {/* 训练周次 */}
-        <Popup v-model:show={forms.weekStatus} position="bottom" round>
+        <Popup v-model:show={forms.weekStatus} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             columns={weekdays}
             onCancel={() => (forms.weekStatus = false)}
@@ -253,7 +253,12 @@ export default defineComponent({
         </Popup>
 
         {/* 训练开始日期 */}
-        <Popup v-model:show={forms.calendarStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.calendarStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             minDate={new Date()}
             v-model={forms.classDate}

src/school/train-planning/component/standard/index.tsx

@@ -267,7 +267,7 @@ export default defineComponent({
           </div>
         </OSticky>
 
-        <Popup v-model:show={forms.weekStatus} position="bottom" round>
+        <Popup v-model:show={forms.weekStatus} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             columns={weekdays}
             onCancel={() => (forms.weekStatus = false)}
@@ -334,7 +334,12 @@ export default defineComponent({
           )}
         </OPopup>
 
-        <Popup v-model:show={forms.numberStatus} position="bottom" round>
+        <Popup
+          v-model:show={forms.numberStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={forms.timerPickerList}
             onConfirm={(val: any) => {

src/school/train-planning/modal/practice-class/index.tsx

@@ -266,7 +266,7 @@ export default defineComponent({
           </div>
         </OSticky>
 
-        <Popup v-model:show={forms.showPopover} position="bottom" round>
+        <Popup v-model:show={forms.showPopover} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             columns={forms.orchestraList}
             onCancel={() => (forms.showPopover = false)}

src/school/train-planning/modal/timer/index.tsx

@@ -268,7 +268,12 @@ export default defineComponent({
           </div>
         </Sticky>
 
-        <Popup v-model:show={state.selectTimeStatus} position="bottom" round>
+        <Popup
+          v-model:show={state.selectTimeStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <TimePicker
             minMinute={state.minMinute}
             maxMinute={state.maxMinute}

src/student/music-group/pre-apply/component/apply.tsx

@@ -339,6 +339,7 @@ export default defineComponent({
           safeAreaInsetBottom
           // duration={0}
           lazyRender={false}
+          class={'popupBottomSearch'}
         >
           <Picker
             showToolbar
@@ -353,7 +354,7 @@ export default defineComponent({
           />
         </Popup>
         {/* 班级 */}
-        <Popup v-model:show={state.classStatus} position="bottom" round>
+        <Popup v-model:show={state.classStatus} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             showToolbar
             columns={state.classList}
@@ -367,7 +368,12 @@ export default defineComponent({
           />
         </Popup>
         {/* 声部 */}
-        <Popup v-model:show={state.subjectStatus} position="bottom" round>
+        <Popup
+          v-model:show={state.subjectStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             showToolbar
             columns={state.subjectList}

src/student/music-group/shop-address/address-operation.tsx

@@ -162,7 +162,7 @@ export default defineComponent({
           </div>
         </OSticky>
 
-        <Popup v-model:show={state.showPicker} position="bottom" round>
+        <Popup v-model:show={state.showPicker} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             showToolbar
             columns={areas}

src/student/my-orchestra/apply-withdrawal.tsx

@@ -72,7 +72,7 @@ export default defineComponent({
         })
 
         forms.isClick = false
-        router.replace('/my-orchestra')
+        router.replace('/mine-orchestra')
       } catch {
         //
         forms.isClick = false

src/student/my-orchestra/index.tsx

@@ -263,7 +263,12 @@ export default defineComponent({
           <OEmpty btnStatus={false} tips="暂无乐团" />
         )}
 
-        <Popup v-model:show={state.orchestraStatus} position="bottom" round>
+        <Popup
+          v-model:show={state.orchestraStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.orchestraList}
             columnsFieldNames={{ text: 'orchestraName', value: 'orchestraId' }}

src/student/ranking-list/index.tsx

@@ -66,7 +66,12 @@ export default defineComponent({
         ) : (
           <DayBang toHeight={state.heightV}></DayBang>
         )}
-        <Popup v-model:show={state.showPopoverTime} position="bottom" style="{ height: '30%' }">
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false

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

@@ -146,63 +146,65 @@ export default defineComponent({
       })
     })
     return () => (
-      <div
-        class={!form.listState.dataShow && 'emptyRootContainer'}
-        style={{ minHeight: `calc(100vh - ${props.height}px)` }}
-      >
-        <Sticky position="top" offsetTop={props.height} style={{ width: '100%' }}>
-          <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
-            <div class={styles.searchBand} onClick={() => (form.timeShow = true)}>
-              {form.currentData[0]}年 <Icon name={form.timeShow ? 'arrow-up' : 'arrow-down'} />
-            </div>
-            <div
-              class={styles.searchBand}
-              onClick={() => (form.typeShow = true)}
-              style="margin-left: 16px"
-            >
-              {formatOrderType(form.currentType)}
-              <Icon name={form.typeShow ? 'arrow-up' : 'arrow-down'} />
-            </div>
+      <div>
+        <div class={styles.searchGroup}>
+          <div class={styles.searchBand} onClick={() => (form.timeShow = true)}>
+            {form.currentData[0]}年 <Icon name={form.timeShow ? 'arrow-up' : 'arrow-down'} />
           </div>
-        </Sticky>
-
-        {form.listState.dataShow ? (
-          <OFullRefresh
-            v-model:modelValue={form.listState.refreshing}
-            onRefresh={() => onSearch(true)}
-            style={{
-              minHeight: `calc(100vh - ${form.listState.height}px)`
-            }}
+          <div
+            class={styles.searchBand}
+            onClick={() => (form.typeShow = true)}
+            style="margin-left: 16px"
           >
-            <List
-              // v-model:loading={form.listState.loading}
-              finished={form.listState.finished}
-              finishedText=" "
-              class={[styles.liveList]}
-              onLoad={getList}
-              immediateCheck={false}
+            {formatOrderType(form.currentType)}
+            <Icon name={form.typeShow ? 'arrow-up' : 'arrow-down'} />
+          </div>
+        </div>
+
+        <div
+          style={{
+            height: 'calc(100vh -  var(--van-tabs-line-height) - 1.12rem)',
+            overflow: 'hidden',
+            overflowY: 'auto'
+          }}
+        >
+          {form.listState.dataShow ? (
+            <OFullRefresh
+              v-model:modelValue={form.listState.refreshing}
+              onRefresh={() => onSearch(true)}
+              style={{
+                minHeight: 'calc(100vh -  var(--van-tabs-line-height) - 1.12rem)'
+              }}
             >
-              {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'}>
+              <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 style={'padding: 0'}>
                     {{
                       title: () =>
                         item.refundable && (
@@ -220,15 +222,22 @@ export default defineComponent({
                         )
                     }}
                   </Cell> */}
-                </CellGroup>
-              ))}
-            </List>
-          </OFullRefresh>
-        ) : (
-          <OEmpty btnStatus={false} tips="暂无订单" />
-        )}
+                  </CellGroup>
+                ))}
+              </List>
+            </OFullRefresh>
+          ) : (
+            <OEmpty btnStatus={false} tips="暂无订单" />
+          )}
+        </div>
 
-        <Popup v-model:show={form.timeShow} position="bottom" round>
+        <Popup
+          v-model:show={form.timeShow}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             v-model={form.currentData}
             columnsType={['year']}
@@ -241,7 +250,13 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={form.typeShow} position="bottom" round>
+        <Popup
+          v-model:show={form.typeShow}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={form.typeArray}
             onCancel={() => (form.typeShow = false)}

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

@@ -112,71 +112,80 @@ export default defineComponent({
       })
     })
     return () => (
-      <div
-        class={!form.listState.dataShow && 'emptyRootContainer'}
-        style={{ minHeight: `calc(100vh - ${props.height}px)` }}
-      >
-        <Sticky position="top" offsetTop={props.height} style={{ width: '100%' }}>
-          <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
-            <div class={styles.searchBand} onClick={() => (form.timeShow = true)}>
-              {form.currentData[0]}年 <Icon name={form.timeShow ? 'arrow-up' : 'arrow-down'} />
-            </div>
-            <div
-              class={styles.searchBand}
-              onClick={() => (form.typeShow = true)}
-              style="margin-left: 16px"
-            >
-              {formatOrderType(form.currentType)}
-              <Icon name={form.typeShow ? 'arrow-up' : 'arrow-down'} />
-            </div>
+      <div>
+        <div class={styles.searchGroup}>
+          <div class={styles.searchBand} onClick={() => (form.timeShow = true)}>
+            {form.currentData[0]}年 <Icon name={form.timeShow ? 'arrow-up' : 'arrow-down'} />
           </div>
-        </Sticky>
-
-        {form.listState.dataShow ? (
-          <OFullRefresh
-            v-model:modelValue={form.listState.refreshing}
-            onRefresh={() => onSearch(true)}
-            style={{
-              minHeight: `calc(100vh - ${form.listState.height}px)`
-            }}
+          <div
+            class={styles.searchBand}
+            onClick={() => (form.typeShow = true)}
+            style="margin-left: 16px"
           >
-            <List
-              // v-model:loading={form.listState.loading}
-              finished={form.listState.finished}
-              finishedText=" "
-              class={[styles.liveList]}
-              onLoad={getList}
-              immediateCheck={false}
+            {formatOrderType(form.currentType)}
+            <Icon name={form.typeShow ? 'arrow-up' : 'arrow-down'} />
+          </div>
+        </div>
+
+        <div
+          style={{
+            height: 'calc(100vh -  var(--van-tabs-line-height) - 1.12rem)',
+            overflow: 'hidden',
+            overflowY: 'auto'
+          }}
+        >
+          {form.listState.dataShow ? (
+            <OFullRefresh
+              v-model:modelValue={form.listState.refreshing}
+              onRefresh={() => onSearch(true)}
+              style={{
+                minHeight: 'calc(100vh -  var(--van-tabs-line-height) - 1.12rem)'
+              }}
             >
-              {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="暂无订单" />
-        )}
+              <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="暂无订单" />
+          )}
+        </div>
 
-        <Popup v-model:show={form.timeShow} position="bottom" round>
+        <Popup
+          v-model:show={form.timeShow}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             v-model={form.currentData}
             columnsType={['year']}
@@ -189,7 +198,13 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={form.typeShow} position="bottom" round>
+        <Popup
+          v-model:show={form.typeShow}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={form.typeArray}
             onCancel={() => (form.typeShow = false)}

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

@@ -165,105 +165,114 @@ export default defineComponent({
       })
     })
     return () => (
-      <div
-        class={!form.listState.dataShow && 'emptyRootContainer'}
-        style={{ minHeight: `calc(100vh - ${props.height}px)` }}
-      >
-        <Sticky position="top" offsetTop={props.height} style={{ width: '100%' }}>
-          <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
-            <div class={styles.searchBand} onClick={() => (form.timeShow = true)}>
-              {form.currentData[0]}年 <Icon name={form.timeShow ? 'arrow-up' : 'arrow-down'} />
-            </div>
-            <div
-              class={styles.searchBand}
-              onClick={() => (form.typeShow = true)}
-              style="margin-left: 16px"
-            >
-              {formatOrderType(form.currentType)}
-              <Icon name={form.typeShow ? 'arrow-up' : 'arrow-down'} />
-            </div>
+      <div>
+        <div class={styles.searchGroup}>
+          <div class={styles.searchBand} onClick={() => (form.timeShow = true)}>
+            {form.currentData[0]}年 <Icon name={form.timeShow ? 'arrow-up' : 'arrow-down'} />
           </div>
-        </Sticky>
-
-        {form.listState.dataShow ? (
-          <OFullRefresh
-            v-model:modelValue={form.listState.refreshing}
-            onRefresh={() => onSearch(false)}
-            style={{
-              minHeight: `calc(100vh - ${form.listState.height}px)`
-            }}
+          <div
+            class={styles.searchBand}
+            onClick={() => (form.typeShow = true)}
+            style="margin-left: 16px"
           >
-            <List
-              // v-model:loading={form.listState.loading}
-              finished={form.listState.finished}
-              finishedText=" "
-              class={[styles.liveList]}
-              onLoad={getList}
-              immediateCheck={false}
+            {formatOrderType(form.currentType)}
+            <Icon name={form.typeShow ? 'arrow-up' : 'arrow-down'} />
+          </div>
+        </div>
+
+        <div
+          style={{
+            height: 'calc(100vh -  var(--van-tabs-line-height) - 1.12rem)',
+            overflow: 'hidden',
+            overflowY: 'auto'
+          }}
+        >
+          {form.listState.dataShow ? (
+            <OFullRefresh
+              v-model:modelValue={form.listState.refreshing}
+              onRefresh={() => onSearch(false)}
+              style={{
+                minHeight: 'calc(100vh -  var(--van-tabs-line-height) - 1.12rem)'
+              }}
             >
-              {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="暂无订单" />
-        )}
+              <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="暂无订单" />
+          )}
+        </div>
 
-        <Popup v-model:show={form.timeShow} position="bottom" round>
+        <Popup
+          v-model:show={form.timeShow}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             v-model={form.currentData}
             columnsType={['year']}
@@ -276,7 +285,13 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={form.typeShow} position="bottom" round>
+        <Popup
+          v-model:show={form.typeShow}
+          position="bottom"
+          round
+          teleport={'body'}
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={form.typeArray}
             onCancel={() => (form.typeShow = false)}

src/student/trade-record/index.module.less

@@ -12,6 +12,12 @@
   }
 }
 
+.searchGroup {
+  padding: 0 13px;
+  line-height: 42px;
+  background-color: #f8f8f8;
+  // style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}
+}
 .searchBand {
   display: inline-block;
   font-size: 14px;

src/student/trade-record/index.tsx

@@ -23,26 +23,28 @@ export default defineComponent({
     })
     return () => (
       <div class={styles.tradeRecord}>
-        <OSticky position="top">
-          <div ref={tabsRef}>
-            <Tabs
-              lineWidth={20}
-              lineHeight={4}
-              v-model:active={state.tabValue}
-              onChange={(val: any) => {
-                sessionStorage.setItem('tradeRecordTabs', val)
-              }}
-            >
-              <Tab title="待完成" name="wait_pay"></Tab>
-              <Tab title="已完成" name="paid"></Tab>
-              <Tab title="退费" name="refund"></Tab>
-            </Tabs>
-          </div>
-        </OSticky>
-
-        {state.tabValue === 'wait_pay' && <WaitPay height={state.height} />}
-        {state.tabValue === 'paid' && <PaidList height={state.height} />}
-        {state.tabValue === 'refund' && <RefundList height={state.height} />}
+        <Tabs
+          lineWidth={20}
+          lineHeight={4}
+          sticky
+          animated
+          swipeable
+          offsetTop={0}
+          v-model:active={state.tabValue}
+          onChange={(val: any) => {
+            sessionStorage.setItem('tradeRecordTabs', val)
+          }}
+        >
+          <Tab title="待完成" name="wait_pay">
+            <WaitPay height={state.height} />
+          </Tab>
+          <Tab title="已完成" name="paid">
+            <PaidList height={state.height} />
+          </Tab>
+          <Tab title="退费" name="refund">
+            <RefundList height={state.height} />
+          </Tab>
+        </Tabs>
       </div>
     )
   }

src/styles/index.less

@@ -326,3 +326,32 @@ input {
   border: 1px solid var(--van-border-color);
   transform: scale(0.5);
 }
+
+// 搜索公用样式
+.popupBottomSearch {
+  .van-picker__toolbar {
+    position: relative;
+    &::after {
+      position: absolute;
+      box-sizing: border-box;
+      content: ' ';
+      pointer-events: none;
+      right: var(--van-padding-md);
+      bottom: 0;
+      left: var(--van-padding-md);
+      border-bottom: 1px solid var(--van-cell-border-color);
+      transform: scaleY(0.5);
+    }
+  }
+  .van-picker-column {
+    position: relative;
+    z-index: 1;
+  }
+  .van-picker__frame {
+    z-index: 0;
+    &::after {
+      background: #f2f2f2;
+      border-radius: 8px;
+    }
+  }
+}

src/teacher/attendance/index.tsx

@@ -225,7 +225,12 @@ export default defineComponent({
           <OEmpty tips="暂无考勤" />
         )}
 
-        <Popup v-model:show={state.showPopoverTime} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false
@@ -254,7 +259,12 @@ export default defineComponent({
           actions={state.courseList}
           onSelect={checkSubject}
         ></ActionSheet> */}
-        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverOrchestra}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.actions}
             onCancel={() => (state.showPopoverOrchestra = false)}
@@ -263,7 +273,12 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverSubject}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.courseList}
             onCancel={() => (state.showPopoverSubject = false)}

src/views/bind-wechat/index.module.less

@@ -36,4 +36,44 @@
   .btnGroup {
     padding: 168px 64px 32px;
   }
+
+  .wxPopupDialog {
+    // position: relative;
+    overflow: initial;
+    // margin-top: -160px;
+    &::before {
+      position: absolute;
+      content: ' ';
+      top: -73px;
+      left: 50%;
+      margin-left: -86px;
+      display: inline-block;
+      background: url('../../student/music-group/pre-apply/images/wx-no-top.png') no-repeat top
+        center;
+      background-size: contain;
+      width: 172px;
+      height: 154px;
+    }
+  }
+  .popupContainer {
+    background: url('../../student/music-group/pre-apply/images/wx-no-bg.png') no-repeat top center;
+    background-size: cover;
+    border-radius: 20px;
+    overflow: hidden;
+    .title1 {
+      padding-top: 57px;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 500;
+      color: #3b2300;
+    }
+    .popupTips {
+      padding-top: 12px;
+      padding-bottom: 47px;
+      text-align: center;
+      font-size: 15px;
+      color: #777777;
+      line-height: 21px;
+    }
+  }
 }

src/views/bind-wechat/index.tsx

@@ -1,24 +1,145 @@
-import { defineComponent } from 'vue'
-import { Button, Image } from 'vant'
+import { defineComponent, onMounted, reactive } from 'vue'
+import { Button, closeToast, Image, Popup } from 'vant'
 import styles from './index.module.less'
 import iconLogo from './images/icon-logo.png'
+import { useRoute } from 'vue-router'
+import qs from 'query-string'
+import { browser, getUrlCode } from '@/helpers/utils'
+import request from '@/helpers/request'
+import dayjs from 'dayjs'
+import { state } from '@/state'
 
 export default defineComponent({
   name: 'bind-wechat',
   setup() {
+    const route = useRoute()
+    console.log(route.query)
+    const forms = reactive({
+      showPopup: false,
+      code: '',
+      phone: route.query.phone,
+      time: route.query.time,
+      // platform: route.query.platform,
+      popupMessage: '请使用微信打开'
+    })
+    // 浏览器自带加密方式
+    // window.btoa() 加密
+    // window.atob() 解密
+    // console.log(qs.parse(location.hash))
+
+    const getAppIdAndCode = async (url?: string) => {
+      try {
+        const { data } = await request.get(state.platformApi + '/open/paramConfig/wechatAppId')
+        // 判断是否有微信appId
+        if (data) {
+          closeToast()
+          goAuth(data, url)
+        }
+      } catch {
+        //
+      }
+    }
+    const goAuth = (wxAppId: string, urlString?: string) => {
+      // 用户授权
+      console.log(urlString || window.location.href, 'urlString || window.location.href')
+      const urlNow = encodeURIComponent(urlString || window.location.href)
+      console.log(urlNow, 'urlNow')
+      const scope = 'snsapi_base' //snsapi_userinfo   //静默授权 用户无感知
+      const appid = wxAppId || 'wx8654c671631cfade'
+      const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`
+      window.location.replace(url)
+    }
+
+    // 确认授权
+    const onAuth = async () => {
+      try {
+        await request.post(state.platformApi + '/open/user/updateOpenId', {
+          data: {
+            clientType: state.platformType,
+            code: forms.code,
+            phone: forms.phone
+          }
+        })
+        window.location.href =
+          'https://mp.weixin.qq.com/s?__biz=MzkxMDMwOTI5Nw==&mid=2247485261&idx=1&sn=70c79a832a609bf9fae01c9e90fb4f69&chksm=c12c2593f65bac85d26362bca470f6abc2bfc087d9f4dcf87c00094420bdf5a3acb1b870199b#rd'
+      } catch {
+        //
+      }
+    }
+
+    onMounted(async () => {
+      // console.log(dayjs(Number(data.time)).subtract(3, 'hour').valueOf())
+      // 判断是否是微信，只能微信中打开
+      if (!browser().weixin) {
+        forms.showPopup = true
+        return
+      } else {
+        //授权
+        const code = getUrlCode()
+        if (!code) {
+          const newUrl =
+            window.location.origin +
+            window.location.pathname +
+            '#' +
+            route.path +
+            '?' +
+            qs.stringify({
+              ...route.query
+            })
+          await getAppIdAndCode(newUrl)
+          return
+        } else {
+          forms.code = code
+        }
+      }
+
+      // t: route.query.t, // 过期时间
+      try {
+        if (forms.time) {
+          const { data } = await request.get(
+            state.platformApi + '/open/paramConfig/queryByParamName',
+            {
+              requestType: 'form',
+              params: {
+                paramName: 'qr_code_expire_hours'
+              }
+            }
+          )
+          if (dayjs(Number(forms.time)).add(data.paramValue, 'hour').isBefore(dayjs())) {
+            forms.popupMessage = '二维码已失效'
+            forms.showPopup = true
+          }
+        }
+      } catch {
+        //
+      }
+    })
     return () => (
       <div class={styles.bindWeChat}>
         <Image class={styles.largeLogo} />
         <Image src={iconLogo} class={styles.smallLogo} />
 
         <p class={styles.tips}>同意管乐团获取您的微信信息</p>
-        <p class={styles.phone}>173 6007 3597</p>
+        <p class={styles.phone}>{forms.phone}</p>
 
         <div class={styles.btnGroup}>
-          <Button type="primary" size="large" round>
+          <Button type="primary" size="large" round onClick={onAuth}>
             确认授权
           </Button>
         </div>
+
+        <Popup
+          v-model:show={forms.showPopup}
+          round
+          style={{ width: '88%', marginTop: '-6vh' }}
+          closeOnClickOverlay={false}
+          class={styles.wxPopupDialog}
+        >
+          <div class={styles.popupContainer}>
+            <p class={styles.title1}>温馨提示</p>
+            <p class={styles.popupTips}>{forms.popupMessage}</p>
+          </div>
+        </Popup>
       </div>
     )
   }

src/views/exercise-record/exercis-detail.tsx

@@ -271,7 +271,12 @@ export default defineComponent({
           )}
         </div>
 
-        <Popup v-model:show={state.showPopoverTime} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false

src/views/exercise-record/index.tsx

@@ -302,7 +302,12 @@ export default defineComponent({
           <OEmpty tips="暂无练习记录" />
         )}
 
-        <Popup v-model:show={state.showPopoverTime} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverTime}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <DatePicker
             onCancel={() => {
               state.showPopoverTime = false
@@ -322,7 +327,12 @@ export default defineComponent({
           actions={state.actions}
           onSelect={checkOrchestra}
         ></ActionSheet> */}
-        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverOrchestra}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.actions}
             onCancel={() => (state.showPopoverOrchestra = false)}
@@ -331,7 +341,12 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={state.showPopoverSubject} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverSubject}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.subjects}
             onCancel={() => (state.showPopoverSubject = false)}

src/views/mine-orchestra/index.tsx

@@ -193,7 +193,12 @@ export default defineComponent({
           )}
         </OFullRefresh>
 
-        <Popup v-model:show={modelData.orchestraStatus} position="bottom" round>
+        <Popup
+          v-model:show={modelData.orchestraStatus}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={data.orchestraList}
             columnsFieldNames={{ text: 'name', value: 'id' }}

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

@@ -166,7 +166,7 @@ export default defineComponent({
           </div>
         )}
 
-        <Popup v-model:show={data.schoolStatus} position="bottom" round>
+        <Popup v-model:show={data.schoolStatus} position="bottom" round class={'popupBottomSearch'}>
           <Picker
             columns={data.schoolList}
             columnsFieldNames={{ text: 'name', value: 'id' }}

src/views/unit-test/unit-create/index.tsx

@@ -218,7 +218,12 @@ export default defineComponent({
           actions={state.actions}
           onSelect={checkOrchestra}
         ></ActionSheet> */}
-        <Popup v-model:show={state.showPopoverOrchestra} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverOrchestra}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.actions}
             columnsFieldNames={{ text: 'name', value: 'value' }}
@@ -227,7 +232,12 @@ export default defineComponent({
           />
         </Popup>
 
-        <Popup v-model:show={state.showPopoverClass} position="bottom" round>
+        <Popup
+          v-model:show={state.showPopoverClass}
+          position="bottom"
+          round
+          class={'popupBottomSearch'}
+        >
           <Picker
             columns={state.classList}
             columnsFieldNames={{ text: 'name', value: 'value' }}

src/views/unit-test/unit-list/index.tsx

@@ -171,7 +171,7 @@ export default defineComponent({
           cancelText="取消"
           actions={
             [
-              { name: '班级类型', id: 'ALL' },
+              { name: '班级类型', id: 'ALL', color: 'red' },
               { name: '单技班', id: 'SINGLE' },
               { name: '乐理班', id: 'MUSIC_THEORY' },
               { name: '合奏班', id: 'INSTRUMENTAL_ENSEMBLE' }