优化

src/teacher/statistics/home-statistics-detail/index.tsx

@@ -1,13 +1,51 @@
-import { defineComponent } from 'vue'
+import { defineComponent, reactive } from 'vue'
 import styles from './index.module.less'
 import { Tab, Tabs } from 'vant'
 import ColHeader from '@/components/col-header'
 import TheSticky from '@/components/the-sticky'
 import List from './list'
+import request from '@/helpers/request'
 
 export default defineComponent({
   name: 'HomeStatistics',
   setup() {
+    const typeList = reactive({
+      VIP_COURSE: 0,
+      PRACTICE: 0,
+      GROUP: 0,
+      LIVE: 0,
+      VIDEO: 0,
+      MUSIC: 0
+    })
+    const getSysConfig = async () => {
+      try {
+        const { data } = await request.get('/api-teacher/sysConfig/list', {
+          params: {
+            group: 'ACCOUNT_PERIOD'
+          }
+        })
+        const result = data || []
+        result.forEach((item: any) => {
+          if (item.paramName === 'vip_course_account_period') {
+            typeList.VIP_COURSE = Number(item.paramValue || 0)
+          } else if (item.paramName === 'practice_account_period') {
+            typeList.PRACTICE = Number(item.paramValue || 0)
+          } else if (item.paramName === 'group_course_account_period') {
+            typeList.GROUP = Number(item.paramValue || 0)
+          } else if (item.paramName === 'live_account_period') {
+            typeList.LIVE = Number(item.paramValue || 0)
+          } else if (item.paramName === 'video_account_period') {
+            typeList.VIDEO = Number(item.paramValue || 0)
+          } else if (item.paramName === 'music_account_period') {
+            typeList.MUSIC = Number(item.paramValue || 0)
+          }
+        })
+      } catch {
+        //
+      }
+    }
+
+    getSysConfig()
     return () => (
       <div class={styles.homeStatistics}>
         <TheSticky position="top">
@@ -16,22 +54,22 @@ export default defineComponent({
 
         <Tabs class={styles.tabs}>
           <Tab title="VIP定制课" name="VIP_COURSE">
-            <List type="VIP_COURSE" />
+            <List accountPeriod={typeList.VIP_COURSE} type="VIP_COURSE" />
           </Tab>
           <Tab title="趣纠课" name="PRACTICE">
-            <List type="PRACTICE" />
+            <List accountPeriod={typeList.PRACTICE} type="PRACTICE" />
           </Tab>
           <Tab title="小组课" name="GROUP">
-            <List type="GROUP" />
+            <List accountPeriod={typeList.GROUP} type="GROUP" />
           </Tab>
           <Tab title="直播课" name="LIVE">
-            <List type="LIVE" />
+            <List accountPeriod={typeList.LIVE} type="LIVE" />
           </Tab>
           <Tab title="视频课" name="VIDEO">
-            <List type="VIDEO" />
+            <List accountPeriod={typeList.VIDEO} type="VIDEO" />
           </Tab>
           <Tab title="乐谱" name="MUSIC">
-            <List type="MUSIC" />
+            <List accountPeriod={typeList.MUSIC} type="MUSIC" />
           </Tab>
         </Tabs>
       </div>

src/teacher/statistics/home-statistics-detail/list/index.module.less

@@ -6,7 +6,7 @@
   background: #ffffff;
   border-radius: 10px;
   margin: 12px 14px 0;
-  // overflow: hidden;
+  overflow: hidden;
   :global {
     .van-list__loading,
     .van-list__finished-text,

src/teacher/statistics/home-statistics-detail/list/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, PropType, ref } from 'vue'
+import { defineComponent, PropType, reactive, ref } from 'vue'
 import styles from './index.module.less'
 import { CellGroup, List } from 'vant'
 import iconMoney from '../../images/icon-money.png'
@@ -18,6 +18,10 @@ export default defineComponent({
         'VIP_COURSE' | 'PRACTICE' | 'GROUP' | 'LIVE' | 'VIDEO' | 'MUSIC'
       >,
       default: 'VIP_COURSE'
+    },
+    accountPeriod: {
+      type: Number,
+      default: 0
     }
   },
   setup(props) {
@@ -31,65 +35,18 @@ export default defineComponent({
     })
 
     const dataShow = ref(true) // 判断是否有数据
-    const state = {
+    const state = reactive({
       statInfo: 0, // 预计课程总收入
-      accountPeriod: 0, // 几天后
       loading: false,
       finished: false,
       params: {
         page: 1,
         rows: 20
       }
-    }
+    })
 
     const tableList = ref<any[]>([])
 
-    const getSysConfig = async () => {
-      try {
-        const { data } = await request.get('/api-teacher/sysConfig/list', {
-          params: {
-            group: 'ACCOUNT_PERIOD'
-          }
-        })
-        const result = data || []
-        result.forEach((item: any) => {
-          if (
-            props.type === 'VIP_COURSE' &&
-            item.paramName === 'vip_course_account_period'
-          ) {
-            state.accountPeriod = item.paramValue
-          } else if (
-            props.type === 'PRACTICE' &&
-            item.paramName === 'practice_account_period'
-          ) {
-            state.accountPeriod = item.paramValue
-          } else if (
-            props.type === 'GROUP' &&
-            item.paramName === 'group_course_account_period'
-          ) {
-            state.accountPeriod = item.paramValue
-          } else if (
-            props.type === 'LIVE' &&
-            item.paramName === 'live_account_period'
-          ) {
-            state.accountPeriod = item.paramValue
-          } else if (
-            props.type === 'VIDEO' &&
-            item.paramName === 'video_account_period'
-          ) {
-            state.accountPeriod = item.paramValue
-          } else if (
-            props.type === 'MUSIC' &&
-            item.paramName === 'music_account_period'
-          ) {
-            state.accountPeriod = item.paramValue
-          }
-        })
-      } catch {
-        //
-      }
-    }
-
     const getDetail = async () => {
       try {
         const { data } = await request.post(
@@ -129,8 +86,6 @@ export default defineComponent({
     }
 
     const getList = async () => {
-      console.log(state.loading, state)
-      // if (state.loading || state.finished) return; // 如果正在加载或者已加载完，则返回
       state.loading = true
       try {
         const { data } = await request.post(
@@ -159,7 +114,6 @@ export default defineComponent({
       state.loading = false
     }
 
-    getSysConfig()
     getDetail()
     getList()
 
@@ -191,7 +145,7 @@ export default defineComponent({
           </div>
           {/* </Sticky> */}
           <div class={styles.incomeTip}>
-            实际收入将在课程结束{state.accountPeriod || 0}天后结算
+            实际收入将在课程结束{props.accountPeriod || 0}天后结算
           </div>
 
           <div class={styles.element}></div>

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

@@ -55,6 +55,14 @@
     color: #131415;
   }
 
+  &.labelActive {
+    :global {
+      .iconfont-down {
+        transform: rotate(180deg) translateY(1px);
+      }
+    }
+  }
+
   :global {
     .van-list__loading,
     .van-list__finished-text,
@@ -236,3 +244,121 @@
     }
   }
 }
+
+
+
+.popupContainer {
+  // max-height: 504px;
+  // overflow-x: hidden;
+  // overflow-y: auto;
+  .popupTitle {
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    color: #333333;
+    line-height: 24px;
+    padding: 18px 0 12px;
+  }
+
+  .popupSearchList {
+    min-height: 30vh;
+    max-height: 50vh;
+    overflow: hidden auto;
+  }
+
+  .popupSection {
+    padding: 0 16px 18px;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 10px;
+      span {
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+        font-size: 15px;
+        color: #333333;
+        line-height: 18px;
+        &::before {
+          content: '';
+          display: inline-block;
+          width: 3px;
+          height: 12px;
+          background: linear-gradient(180deg, #59e5d4 0%, #2dc7aa 100%);
+          border-radius: 2px;
+          margin-right: 4px;
+        }
+      }
+    }
+
+    .timeCount {
+      display: flex;
+      align-items: center;
+
+      p {
+        margin-left: 10px;
+        flex: 1;
+        background: #f8f8f8;
+        border: 1px solid #f8f8f8;
+        border-radius: 4px;
+        font-size: 13px;
+        color: #999999;
+        line-height: 18px;
+        text-align: center;
+        padding: 6px 0;
+        &:first-child {
+          margin-left: 0;
+        }
+
+        &.active {
+          background: #e9fff8;
+          border-radius: 4px;
+          border: 1px solid #2dc7aa;
+          color: #2dc7aa;
+        }
+      }
+    }
+
+    .timeSubject {
+      flex-wrap: wrap;
+      margin-left: -5px;
+      margin-right: -5px;
+      p {
+        width: calc(25% - 10px);
+        padding: 6px 3px;
+        margin: 0 5px;
+        flex: none;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-bottom: 9px;
+        box-sizing: border-box;
+        &:first-child {
+          margin-left: 5px;
+        }
+
+      }
+    }
+  }
+
+  .popupBottom {
+    position: sticky;
+    z-index: 1;
+    bottom: 0;
+    border-top: 1px solid #f2f2f2;
+    padding: 20px 13px 30px;
+    display: flex;
+    align-items: center;
+    :global {
+      .van-button {
+        font-size: 16px;
+      }
+      .van-button + .van-button {
+        margin-left: 15px;
+      }
+    }
+  }
+}

src/views/music/list/index.tsx

@@ -7,7 +7,7 @@ import {
   ref,
   watch
 } from 'vue'
-import { Sticky, List, Popup, Icon, Switch, Tabs, Tab } from 'vant'
+import { Sticky, List, Popup, Icon, Switch, Tabs, Tab, Button } from 'vant'
 import Search from '@/components/col-search'
 import request from '@/helpers/request'
 // import Item from './item'
@@ -27,6 +27,7 @@ import bgImg from './icons/bgImg.png'
 import iconSearch from './icons/icon_search.png'
 import { browser } from '@/helpers/utils'
 import TheSticky from '@/components/the-sticky'
+import deepClone from '@/helpers/deep-clone'
 
 const noop = () => {
   //
@@ -87,6 +88,12 @@ export default defineComponent({
 
     const stickyHeight = ref(height || 0)
 
+    const searchObj = reactive({
+      searchStatus: false,
+      tagId: '',
+      chargeType: ''
+    })
+
     const updateStickyHeight = (height: number) => {
       stickyHeight.value = height
     }
@@ -163,9 +170,10 @@ export default defineComponent({
 
     const params = reactive({
       search: (route.query.search as string) || '',
-      musicSortType: (route.query.type as string) || "",
+      musicSortType: (route.query.type as string) || '',
       // exquisiteFlag: 1,
-      musicTagIds: route.query.tagids || '',
+      musicTagIds: route.query.tagids || '', // 标签
+      changeType: '', // 曲目类型
       page: 1,
       ...defauleParams,
       ...tempParams
@@ -227,17 +235,17 @@ export default defineComponent({
     }
 
     // 设置默认声部
-    const setDefaultSubject = async (subjectId: any) => {
-      try {
-        await request.post('/api-teacher/teacher/defaultSubject', {
-          params: {
-            subjectId
-          }
-        })
-      } catch {
-        //
-      }
-    }
+    // const setDefaultSubject = async (subjectId: any) => {
+    //   try {
+    //     await request.post('/api-teacher/teacher/defaultSubject', {
+    //       params: {
+    //         subjectId
+    //       }
+    //     })
+    //   } catch {
+    //     //
+    //   }
+    // }
 
     const onComfirm = tags => {
       const tempTags: any = {}
@@ -336,7 +344,7 @@ export default defineComponent({
     })
 
     return () => {
-      // const tagList = ((state.value && state.value.data) as any) || []
+      const tagList = ((state.value && state.value.data) as any) || []
       return (
         <>
           {!hideSearch && (
@@ -367,7 +375,7 @@ export default defineComponent({
                           class={styles.tabSection}
                           v-model:active={params.musicSortType}
                           shrink
-                          onClick-tab={(val) => {
+                          onClick-tab={val => {
                             params.musicSortType = val.name
                             onSearch(params.search)
                           }}
@@ -379,29 +387,6 @@ export default defineComponent({
                         </Tabs>
                       </div>
                     )
-                    // right: () =>
-                    //   !isAudit.value && (
-                    //     <span
-                    //       class={styles.fleg}
-                    //       onClick={() => {
-                    //         // 不要看这个字段的意思
-                    //         exquisiteFlag.value != exquisiteFlag.value
-                    //         useSubjectId(
-                    //           SubjectEnum.MUSIC_FREE,
-                    //           JSON.stringify({
-                    //             chargeType: exquisiteFlag.value
-                    //           }),
-                    //           'set'
-                    //         )
-                    //         data.value = null
-                    //         params.page = 1
-                    //         FetchList()
-                    //       }}
-                    //     >
-                    //       <Switch v-model={exquisiteFlag.value} size="20px" />
-                    //       <span>免费</span>
-                    //     </span>
-                    //   )
                   }}
                 />
                 <Search
@@ -409,25 +394,25 @@ export default defineComponent({
                   background="transparent"
                   inputBackground="transparent"
                   leftIcon={iconSearch}
-                  // v-slots={{
-                  //   left: () => (
-                  //     <div
-                  //       class={styles.label}
-                  //       onClick={() => (subject.show = true)}
-                  //     >
-                  //       {baseState.platformType === 'TEACHER'
-                  //         ? teacherDetaultSubject.value.name
-                  //         : subject.name}
-
-                  //       <Icon
-                  //         classPrefix="iconfont"
-                  //         name="down"
-                  //         size={12}
-                  //         color="#fff"
-                  //       />
-                  //     </div>
-                  //   )
-                  // }}
+                  v-slots={{
+                    left: () => (
+                      <div
+                        class={[
+                          styles.label,
+                          searchObj.searchStatus ? styles.labelActive : ''
+                        ]}
+                        onClick={() => (searchObj.searchStatus = true)}
+                      >
+                        筛选
+                        <Icon
+                          classPrefix="iconfont"
+                          name="down"
+                          size={12}
+                          color="#fff"
+                        />
+                      </div>
+                    )
+                  }}
                 />
                 {/* <Tabs
                   shrink
@@ -457,25 +442,26 @@ export default defineComponent({
                 inputBackground="white"
                 // leftIcon={iconSearch}
                 class={styles.searchGroup}
-                // v-slots={{
-                //   left: () => (
-                //     <div
-                //       class={[styles.label, styles.searchs]}
-                //       onClick={() => (subject.show = true)}
-                //     >
-                //       {baseState.platformType === 'TEACHER'
-                //         ? teacherDetaultSubject.value.name
-                //         : subject.name}
-
-                //       <Icon
-                //         classPrefix="iconfont"
-                //         name="down"
-                //         size={12}
-                //         color="#949597"
-                //       />
-                //     </div>
-                //   )
-                // }}
+                v-slots={{
+                  left: () => (
+                    <div
+                        class={[
+                          styles.label,
+                          styles.searchs,
+                          searchObj.searchStatus ? styles.labelActive : ''
+                        ]}
+                        onClick={() => (searchObj.searchStatus = true)}
+                      >
+                        筛选
+                        <Icon
+                          classPrefix="iconfont"
+                          name="down"
+                          size={12}
+                          color="#333"
+                        />
+                      </div>
+                  )
+                }}
               />
             </Sticky>
           ) : (
@@ -565,6 +551,120 @@ export default defineComponent({
               onComfirm={onComfirmSubject}
             />
           </Popup> */}
+
+          <Popup
+            round
+            closeable
+            safe-area-inset-bottom
+            position="bottom"
+            v-model:show={searchObj.searchStatus}
+          >
+            <div class={styles.popupContainer}>
+              <div class={styles.popupTitle}>筛选</div>
+
+              <div class={styles.popupSearchList}>
+                <div class={styles.popupSection}>
+                  <div class={styles.title}>
+                    <span>标签</span>
+                  </div>
+
+                  <div class={[styles.timeCount, styles.timeSubject]}>
+                    <p
+                      class={searchObj.tagId === '' ? styles.active : ''}
+                      onClick={() => (searchObj.tagId = '')}
+                    >
+                      全部
+                    </p>
+                    {tagList.map((item: any) => (
+                      <p
+                        class={searchObj.tagId === item.id ? styles.active : ''}
+                        onClick={() => {
+                          searchObj.tagId = item.id
+                        }}
+                      >
+                        {item.name}
+                      </p>
+                    ))}
+                  </div>
+                </div>
+
+                <div class={styles.popupSection}>
+                  <div class={styles.title}>
+                    <span>类型</span>
+                  </div>
+
+                  <div class={[styles.timeCount, styles.timeSubject]}>
+                    <p
+                      class={searchObj.chargeType === '' ? styles.active : ''}
+                      onClick={() => (searchObj.chargeType = '')}
+                    >
+                      全部曲目
+                    </p>
+
+                    <p
+                      class={
+                        searchObj.chargeType === 'VIP' ? styles.active : ''
+                      }
+                      onClick={() => {
+                        searchObj.chargeType = 'VIP'
+                      }}
+                    >
+                      会员曲目
+                    </p>
+                    <p
+                      class={
+                        searchObj.chargeType === 'CHARGE' ? styles.active : ''
+                      }
+                      onClick={() => {
+                        searchObj.chargeType = 'CHARGE'
+                      }}
+                    >
+                      点播曲目
+                    </p>
+                    <p
+                      class={
+                        searchObj.chargeType === 'FREE' ? styles.active : ''
+                      }
+                      onClick={() => {
+                        searchObj.chargeType = 'FREE'
+                      }}
+                    >
+                      免费曲目
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <div class={styles.popupBottom}>
+                <Button
+                  round
+                  block
+                  type="default"
+                  onClick={() => {
+                    searchObj.tagId = JSON.parse(JSON.stringify(params.musicTagIds))
+                    searchObj.chargeType = JSON.parse(JSON.stringify(params.changeType))
+                  }}
+                >
+                  重置
+                </Button>
+                <Button
+                  round
+                  block
+                  type="primary"
+                  onClick={() => {
+                    params.musicTagIds = JSON.parse(JSON.stringify(searchObj.tagId))
+                    params.changeType = JSON.parse(JSON.stringify(searchObj.chargeType))
+                    data.value = null
+                    params.page = 1
+                    FetchList()
+                    searchObj.searchStatus = false
+                  }}
+                >
+                  确定
+                </Button>
+              </div>
+            </div>
+          </Popup>
         </>
       )
     }