学员列表

src/student/practice-class/model/organ-search.tsx

@@ -1,10 +1,15 @@
 import { defineComponent } from 'vue'
 import styles from './all-search.module.less'
 import { RadioGroup, Radio, Tag, Button, Sticky } from 'vant'
+import { join } from 'path'
 
 export default defineComponent({
   name: 'organ-search',
   props: {
+    isReset: {
+      type: Boolean,
+      default: false
+    },
     modelValue: {
       type: [Number, String],
       default: 0
@@ -78,12 +83,22 @@ export default defineComponent({
           )}
         </div>
         <Sticky position="bottom" offsetBottom={0}>
-          <div class="btnGroup">
-            {/* <Button type="primary" plain round onClick={() => {
-              this.$emit('update:modelValue', this.modelValue)
-            }}>
-              重置
-            </Button> */}
+          <div class={['btnGroup', this.isReset ? 'btnMore' : '']}>
+            {this.isReset && (
+              <Button
+                type="primary"
+                plain
+                round
+                onClick={() => {
+                  this.$emit('update:modelValue', null)
+                  this.$emit('update:subjectName', '全部声部')
+                  this.onSort()
+                }}
+              >
+                重置
+              </Button>
+            )}
+
             <Button
               type="primary"
               round

src/teacher/piano-room/index.tsx

@@ -1,5 +1,15 @@
 import ColHeader from '@/components/col-header'
-import { Row, Col, Button, CellGroup, Cell, Grid, GridItem, Icon } from 'vant'
+import {
+  Row,
+  Col,
+  Button,
+  CellGroup,
+  Cell,
+  Grid,
+  GridItem,
+  Icon,
+  Popup
+} from 'vant'
 import { defineComponent } from 'vue'
 import Course from './components/course'
 import styles from './index.module.less'
@@ -12,6 +22,11 @@ export const getAssetsHomeFile = (fileName: string) => {
 
 export default defineComponent({
   name: 'PianoRoom',
+  data() {
+    return {
+      shareStatus: false
+    }
+  },
   render() {
     return (
       <>
@@ -68,7 +83,14 @@ export default defineComponent({
               border={false}
             />
             <Cell valueClass={styles.btnGroupInvite}>
-              <Button color="#E0F7F3" round block>
+              <Button
+                color="#E0F7F3"
+                round
+                block
+                onClick={() => {
+                  this.shareStatus = true
+                }}
+              >
                 <img src={getAssetsHomeFile('icon_invite_student.png')} />
                 邀请学员
               </Button>
@@ -104,6 +126,10 @@ export default defineComponent({
         </div>
 
         <Course />
+
+        <Popup show={this.shareStatus} round>
+          <div style={{ height: '500px', background: '#fff' }}></div>
+        </Popup>
       </>
     )
   }

src/teacher/piano-room/my-student/index.module.less

@@ -0,0 +1,14 @@
+.label {
+  margin-right: 8px;
+  font-size: 14px;
+  :global {
+    .van-list__loading,
+    .van-list__finished-text,
+    .van-list__error-text {
+      width: 100%;
+    }
+    .iconfont-down {
+      margin-left: 4px;
+    }
+  }
+}

src/teacher/piano-room/my-student/index.tsx

@@ -1,15 +1,113 @@
 import ColHeader from '@/components/col-header'
+import ColSearch from '@/components/col-search'
+import request from '@/helpers/request'
+import OrganSearch from '@/student/practice-class/model/organ-search'
+import { useRect } from '@vant/use'
+import { Icon, Popup, Sticky } from 'vant'
 import { defineComponent } from 'vue'
 import Student from '../components/student'
+import styles from './index.module.less'
 
 export default defineComponent({
   name: 'myStudent',
+  data() {
+    return {
+      searchStatus: false,
+      openStatus: false,
+      subjectList: [],
+      list: [],
+      dataShow: true, // 判断是否有数据
+      loading: false,
+      finished: false,
+      params: {
+        search: '',
+        subjectName: '全部声部',
+        subjectId: null as any,
+        page: 1,
+        rows: 20
+      },
+      height: 'auto' as any
+    }
+  },
+  async mounted() {
+    try {
+      const res = await request.get('/api-teacher/subject/subjectSelect')
+      this.subjectList = res.data || []
+    } catch {}
+    // this.getList()
+
+    const { height } = useRect((this as any).$refs.headers)
+    this.height = height
+  },
+  methods: {
+    onSort() {
+      this.params.page = 1
+      this.list = []
+      this.dataShow = true // 判断是否有数据
+      this.loading = false
+      this.finished = false
+      this.searchStatus = false
+      this.getList()
+    },
+    onSearch(val: string) {
+      this.params.search = val
+      this.onSort()
+    },
+    async getList() {}
+  },
   render() {
     return (
       <>
-        <ColHeader />
+        <Sticky>
+          <div ref="headers">
+            <ColHeader isFixed={false} border={false} />
+            <ColSearch
+              placeholder="请输入老师名称"
+              onSearch={this.onSearch}
+              v-slots={{
+                left: () => (
+                  <div
+                    class={styles.label}
+                    onClick={() => {
+                      this.searchStatus = !this.searchStatus
+                      this.openStatus = !this.openStatus
+                    }}
+                  >
+                    {this.params.subjectName}
+                    <Icon
+                      classPrefix="iconfont"
+                      name="down"
+                      size={12}
+                      color="#333"
+                    />
+                  </div>
+                )
+              }}
+            />
+          </div>
+        </Sticky>
+
+        <Student>上次课程 1 天前</Student>
 
-        <Student />
+        <Popup
+          show={this.searchStatus}
+          position="bottom"
+          round
+          closeable
+          safe-area-inset-bottom
+          onClose={() => (this.searchStatus = false)}
+          onClosed={() => (this.openStatus = false)}
+        >
+          {this.openStatus && (
+            <OrganSearch
+              subjectList={this.subjectList}
+              onSort={this.onSort}
+              isReset
+              v-model={this.params.subjectId}
+              v-model:subjectName={this.params.subjectName}
+            />
+          )}
+        </Popup>
       </>
     )
   }