Merge branch 'liu-v1.3'

src/views/live-class/index.tsx

@@ -10,7 +10,7 @@ import LiveItem from './live-item'
 import banner from '../video-class/images/banner.png'
 import { state } from '@/state'
 import OrganSearch from '@/student/practice-class/model/organ-search'
-
+ 
 export default defineComponent({
   name: 'liveClass',
   data() {

src/views/music/album/index.module.less

@@ -3,3 +3,17 @@
     box-shadow: 10px 10px 10px var(--box-shadow-color);
   }
 }
+.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/views/music/album/index.tsx

@@ -142,6 +142,17 @@ export default defineComponent({
               onCancel={() => {}}
             />
           </Popup>
+          <Popup
+            show={subject.show}
+            position="bottom"
+            round
+            closeable
+            safe-area-inset-bottom
+            onClose={() => (subject.show = false)}
+            onClosed={() => (subject.show = false)}
+          >
+            <SelectSubject isReset onComfirm={onComfirmSubject} />
+          </Popup>
         </>
       )
     }

src/views/music/list/index.module.less

@@ -3,3 +3,17 @@
     box-shadow: 10px 10px 10px var(--box-shadow-color);
   }
 }
+.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/views/music/list/index.tsx

@@ -105,7 +105,6 @@ export default defineComponent({
       tagVisibility.value = false
     }
     const onComfirmSubject = (item) => {
-      // console.log(item,123)
       params.page = 1
       params.subjectIds = item.id
       subject.id = item.id

src/views/music/list/item.tsx

@@ -123,7 +123,7 @@ export default defineComponent({
                   style={{ border: 'none' }}
                   class={styles.shareBtn}
                   onClick={onShare}
-                >
+                > 
                   <Icon class={styles.favorite} name={iconShare} />
                 </Button>
               )}

src/views/music/search/header.tsx

@@ -164,6 +164,19 @@ export default defineComponent({
               onCancel={() => {}}
             />
           </Popup>
+
+          {/* 声部弹框 */}
+          <Popup
+            show={subject.show}
+            position="bottom"
+            round
+            closeable
+            safe-area-inset-bottom
+            onClose={() => (subject.show = false)}
+            onClosed={() => (subject.show = false)}
+          >
+            <SelectSubject isReset onComfirm={onComfirmSubject} />
+          </Popup>
         </div>
       )
     }

src/views/music/search/index.module.less

@@ -49,4 +49,18 @@
       font-size: 16px;
     }
   }
+  .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/views/music/search/index.tsx

@@ -107,6 +107,7 @@ export default defineComponent({
       mitter.off('changeTab', changeTab)
       mitter.off('search', onSearch)
       mitter.off('confirm', onComfirm)
+      mitter.off('confirmSubject', onConfirmSubject)
     })
 
     return () => {

src/views/music/search/select-subject.module.less

@@ -0,0 +1,79 @@
+.filterTitle {
+  font-size: 18px;
+  font-weight: 500;
+  color: #000000;
+  line-height: 25px;
+  text-align: center;
+  padding: 20px 0;
+}
+
+.searchResult {
+  padding: 0 16px;
+  overflow: hidden;
+  margin-bottom: 20px;
+  .searchTitle {
+    font-size: 16px;
+    color: #333333;
+    line-height: 22px; 
+  }
+}
+
+.radio-group {
+  display: flex;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  .radio:first-child {
+    :global {
+      .van-radio__label {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+.radio {
+  :global {
+    .van-radio__icon {
+      display: none;
+    }
+    .van-tag--large {
+      width: 80px;
+      height: 32px;
+      font-size: 16px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .van-tag {
+      box-sizing: border-box;
+    }
+    .van-tag--default {
+      color: var(--van-tag-text-default-color);
+    }
+    .van-tag--primary {
+      background-color: var(--tag-bg-color);
+    }
+  }
+}
+
+.organ-radio {
+  :global {
+    .van-tag--large {
+      width: auto;
+      padding: 0 12px;
+      margin-bottom: 8px;
+      margin-right: 8px;
+      font-size: 14px;
+    }
+  }
+}
+
+.btn {
+  padding: 5px 14px;
+
+  & + .btn {
+    margin-left: 10px;
+  }
+}

src/views/music/search/select-subject.tsx

@@ -0,0 +1,118 @@
+import { defineComponent } from 'vue'
+import styles from './select-subject.module.less'
+import { Tag, Button, Sticky } from 'vant'
+import { state } from '@/state'
+import request from '@/helpers/request'
+
+export default defineComponent({
+  name: 'selectSubject',
+  props: {
+    isReset: {
+      type: Boolean,
+      default: false
+    },
+    onComfirm: {
+      type: Function,
+      default: (item: any) => {}
+    }
+  },
+  data() {
+    return {
+      subject: {
+        name: '',
+        id: ''
+      },
+      subjectList: [] as any,
+      apiSuffix:
+        state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      const { data } = await request.get(
+        `${this.apiSuffix}/subject/subjectSelect?type=MUSIC`
+      )
+      if (Array.isArray(data)) {
+        this.subjectList = data
+      }
+    }
+  },
+  render() {
+    return (
+      <>
+        <div class={styles.filterTitle}>全部声部</div>
+        <div
+          class={styles.searchResult}
+          style={{ maxHeight: '45vh', overflowY: 'auto' }}
+        >
+          {this.subjectList.map(
+            (item: any) =>
+              item.subjects &&
+              item.subjects.length > 0 && (
+                <>
+                  <div class={styles.searchTitle}>{item.name}</div>
+                  <div
+                    class={[
+                      styles['radio-group'],
+                      styles.radio,
+                      styles['organ-radio']
+                    ]}
+                  >
+                    {item.subjects.map((subject: any) => {
+                      const isActive = subject.id === Number(this.subject.id)
+                      const type = isActive ? 'primary' : 'default'
+                      return (
+                        <Tag
+                          size="large"
+                          plain={isActive}
+                          type={type}
+                          round
+                          onClick={() => {
+                            this.subject = subject
+                          }}
+                        >
+                          {subject.name}
+                        </Tag>
+                      )
+                    })}
+                  </div>
+                </>
+              )
+          )}
+        </div>
+        <Sticky position="bottom" offsetBottom={0}>
+          <div class={['btnGroup', this.isReset ? 'btnMore' : '']}>
+            {this.isReset && (
+              <Button
+                type="primary"
+                plain
+                round
+                onClick={() => {
+                  this.subject.name = '全部'
+                  this.subject.id = ''
+                  this.onComfirm({...this.subject})
+                }}
+              >
+                重 置
+              </Button>
+            )}
+
+            <Button
+              type="primary"
+              round
+              block
+              onClick={() => {
+                this.onComfirm({ ...this.subject })
+              }}
+            >
+              确 认
+            </Button>
+          </div>
+        </Sticky>
+      </>
+    )
+  }
+})

src/views/video-class/index.tsx

@@ -46,7 +46,7 @@ export default defineComponent({
       //
     }
     let subjectName = ''
-    console.log(this.params.lessonSubject)
+    // console.log(this.params.lessonSubject)
     this.subjectList.forEach((item: any) => {
       item.subjects?.forEach((child: any) => {
         if (child.id === Number(this.params.lessonSubject)) {