Merge branch 'fine-music-score' into dev

src/components/col-header/index.tsx

@@ -51,8 +51,8 @@ export default defineComponent({
       default: () => {}
     }
   },
-  watch:{
-    backIconColor(){
+  watch: {
+    backIconColor() {
       // 设置返回按钮颜色
       postMessage({
         api: 'backIconChange',
@@ -129,7 +129,10 @@ export default defineComponent({
       <div>
         {this.$slots.content ? (
           <div
-            style={{ paddingTop: `${this.navBarHeight}px` }}
+            style={{
+              paddingTop: `${this.navBarHeight}px`,
+              background: this.background
+            }}
             class={styles.headerSection}
           >
             {this.$slots.content(this.navBarHeight)}

src/constant/music.ts

@@ -52,3 +52,9 @@ export const teacherStyleType = {
   HOMEMODE: '自制伴奏',
   COMMON: '普通伴奏'
 }
+
+/** 老师端展示是否精品乐谱 */
+export const teacherExquisiteType = {
+  0: '否',
+  1: '是'
+}

src/student/teacher-dependent/components/music.tsx

@@ -40,6 +40,7 @@ export default defineComponent({
       <>
         <MusicList
           hideSearch
+          type="list"
           onItemClick={this.onItemClick}
           teacherId={this.teacherId}
         />

src/teacher/music/upload/index.tsx

@@ -26,7 +26,8 @@ import {
   teachershowFingeringType,
   teachershowHasBeatType,
   teacherNotationType,
-  teacherStyleType
+  teacherStyleType,
+  teacherExquisiteType
 } from '@/constant/music'
 import { getXmlInfo, FormatXMLInfo } from '@/helpers/music-xml'
 import Upload from './upload'
@@ -95,6 +96,7 @@ export default defineComponent({
       submitLoading: false,
       showPicker: false,
       music_sheet_service_fee: 0,
+      exquisiteFlag: 0,
       backgroundMp3s: [
         {
           url: '',
@@ -201,7 +203,7 @@ export default defineComponent({
         for (let i = 0; i < names.length; i++) {
           this.tagsNames[this.tags[i]] = names[i]
         }
-
+        this.exquisiteFlag = res.data.exquisiteFlag
         this.xmlFileUrl = res.data.xmlFileUrl
         this.accompanimentType = res.data.accompanimentType
         this.titleImg = res.data.titleImg
@@ -258,6 +260,7 @@ export default defineComponent({
         xmlFileUrl: this.xmlFileUrl,
         canEvaluate: Number(this.canEvaluate),
         chargeType: this.chargeType === 0 ? 'FREE' : 'CHARGE',
+        exquisiteFlag: this.exquisiteFlag,
         composer: this.composer,
         musicPrice: this.chargeType === 0 ? 0 : this.musicPrice, // 当选择免费时，重置金额为0
         background: this.backgroundMp3s.map(item => ({
@@ -870,6 +873,22 @@ export default defineComponent({
                 })}
               </RadioGroup>
             </ColField>
+            {this.chargeType === 2 && (
+              <ColField required title="收费价格">
+                <Field
+                  clearable
+                  class={styles['clear-px']}
+                  placeholder="请输入收费价格"
+                  formatter={this.onFormatter}
+                  v-slots={{ button: () => '元' }}
+                  modelValue={this.musicPrice}
+                  rules={[
+                    { required: true, validator, message: '请输入收费价格' }
+                  ]}
+                  onUpdate:modelValue={val => (this.musicPrice = val)}
+                />
+              </ColField>
+            )}
             <ColField required title="支持简谱" border={false}>
               <RadioGroup
                 class={styles['radio-group']}
@@ -891,22 +910,27 @@ export default defineComponent({
                 })}
               </RadioGroup>
             </ColField>
-            {this.chargeType === 2 && (
-              <ColField required title="收费价格">
-                <Field
-                  clearable
-                  class={styles['clear-px']}
-                  placeholder="请输入收费价格"
-                  formatter={this.onFormatter}
-                  v-slots={{ button: () => '元' }}
-                  modelValue={this.musicPrice}
-                  rules={[
-                    { required: true, validator, message: '请输入收费价格' }
-                  ]}
-                  onUpdate:modelValue={val => (this.musicPrice = val)}
-                />
-              </ColField>
-            )}
+            <ColField required title="是否精品乐谱" border={false}>
+              <RadioGroup
+                class={styles['radio-group']}
+                modelValue={this.exquisiteFlag}
+                onUpdate:modelValue={val => {
+                  this.exquisiteFlag = Number(val)
+                }}
+              >
+                {Object.keys(teacherExquisiteType).map((item: string) => {
+                  const isActive = item === String(this.exquisiteFlag)
+                  const type = isActive ? 'primary' : 'default'
+                  return (
+                    <Radio class={styles.radio} name={item}>
+                      <Tag size="large" plain={isActive} type={type}>
+                        {teacherExquisiteType[item]}
+                      </Tag>
+                    </Radio>
+                  )
+                })}
+              </RadioGroup>
+            </ColField>
           </ColFieldGroup>
           {this.chargeType === 2 && (
             <div class={styles.rule}>

src/views/music/component/song/index.module.less

@@ -184,3 +184,8 @@
     line-height: 20px;
   }
 }
+
+.exquisiteFlag {
+  width: 14px;
+  margin-left: 5px;
+}

src/views/music/component/song/index.tsx

@@ -98,6 +98,13 @@ export default defineComponent({
                 >
                   {colors[n.chargeType].text}
                 </Tag>
+                {n.exquisiteFlag === 1 && (
+                  <Image
+                    class={styles.exquisiteFlag}
+                    src={getAssetsHomeFile('icon_ exquisite.png')}
+                  />
+                )}
+
                 <span class={[styles.title, 'van-ellipsis']}>
                   {n.musicSheetName}
                 </span>

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

@@ -3,6 +3,28 @@
     box-shadow: 10px 10px 10px var(--box-shadow-color);
   }
 }
+
+.listContainer {
+  padding-top: 2px;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  font-size: 16px;
+  font-weight: 600;
+  color: #999999;
+  line-height: 22px;
+  .line {
+    margin: 0 15px;
+    width: 1px;
+    height: 10px;
+    background: #e8e8e8;
+  }
+  .active {
+    color: #333333;
+  }
+}
 .label {
   margin-right: 8px;
   font-size: 14px;
@@ -24,3 +46,7 @@
   background-color: #fff;
   margin: 14px;
 }
+
+.swipeContainer {
+  // height: calc(100vh - 44px);
+}

src/views/music/list/index.tsx

@@ -1,8 +1,8 @@
-import { defineComponent, reactive, ref } from 'vue'
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
 import { Sticky, List, Popup, Icon } from 'vant'
 import Search from '@/components/col-search'
 import request from '@/helpers/request'
-import Item from './item'
+// import Item from './item'
 import SelectTag from '../search/select-tag'
 import { useRoute, useRouter } from 'vue-router'
 import ColResult from '@/components/col-result'
@@ -12,8 +12,12 @@ import { state } from '@/state'
 import SelectSubject from '../search/select-subject'
 import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
 import Song from '../component/song'
+import ColHeader from '@/components/col-header'
+import { useRect } from '@vant/use'
 
-const noop = () => {}
+const noop = () => {
+  //
+}
 
 export default defineComponent({
   name: 'MusicList',
@@ -33,9 +37,16 @@ export default defineComponent({
     teacherId: {
       type: String || Number,
       default: ''
+    },
+    type: {
+      tyep: String,
+      default: 'fine'
     }
   },
-  setup({ hideSearch, defauleParams, onItemClick, teacherId }, { expose }) {
+  setup(
+    { hideSearch, defauleParams, onItemClick, teacherId, type },
+    { expose }
+  ) {
     const subjects: any = useSubjectId(SubjectEnum.SEARCH)
     // 判断是否已有数据
     if (!subjects.id) {
@@ -75,11 +86,15 @@ export default defineComponent({
     //
     const params = reactive({
       search: (route.query.search as string) || '',
+      // exquisiteFlag: 1,
       musicTagIds: route.query.tagids || '',
       page: 1,
       ...defauleParams,
       ...tempParams
     })
+    const routeType = ref<string>(
+      route.query.type === 'list' || type === 'list' ? 'list' : 'fine'
+    )
     const data = ref<any>(null)
     const loading = ref(false)
     const finished = ref(false)
@@ -105,12 +120,12 @@ export default defineComponent({
       const tempParams = {
         ...params,
         idAndName: params.search,
-        createBy: teacherId
+        createBy: teacherId,
+        myself: false
+      }
+      if (routeType.value === 'fine') {
+        tempParams.exquisiteFlag = 1
       }
-      // if (state.platformType === 'TEACHER') {
-      tempParams.myself = false
-      // }
-
       try {
         const res = await request.post(`${apiSuffix.value}/music/sheet/list`, {
           data: tempParams
@@ -154,6 +169,33 @@ export default defineComponent({
       FetchList()
       subject.show = false
     }
+
+    const tabType = ref(route.query.type === 'list' || type === 'list' ? 0 : 1)
+    const onTabChange = async (type: number) => {
+      tabType.value = type
+      if (type === 1) {
+        routeType.value = 'fine'
+      } else {
+        routeType.value = 'list'
+      }
+      params.page = 1
+      data.value = null
+      await FetchList()
+    }
+
+    const sticky = ref()
+    // const searchHeight = ref(200)
+    // onMounted(() => {
+    //   nextTick(() => {
+    //     if (sticky.value) {
+    //       const { height } = useRect(sticky)
+    //       const clientHeight =
+    //         document.body.clientHeight || document.body.offsetHeight
+    //       searchHeight.value = clientHeight - height
+    //     }
+    //   })
+    // })
+
     const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
     const subject = reactive({
       show: false,
@@ -169,17 +211,33 @@ export default defineComponent({
 
     return () => (
       <>
-        <List
-          loading={loading.value}
-          finished={finished.value}
-          finished-text={
-            data.value && data.value.rows.length ? '没有更多了' : ''
-          }
-          onLoad={FetchList}
-          error={isError.value}
-        >
-          {!hideSearch && (
-            <Sticky class={styles.sticky}>
+        {!hideSearch && (
+          <Sticky class={styles.sticky}>
+            <div ref={sticky}>
+              <ColHeader
+                isFixed={false}
+                border={false}
+                background="#fff"
+                v-slots={{
+                  content: () => (
+                    <div class={styles.listContainer}>
+                      <span
+                        onClick={() => onTabChange(1)}
+                        class={tabType.value === 1 && styles.active}
+                      >
+                        精品曲目
+                      </span>
+                      <span class={styles.line}></span>
+                      <span
+                        onClick={() => onTabChange(0)}
+                        class={tabType.value === 0 && styles.active}
+                      >
+                        热门曲目
+                      </span>
+                    </div>
+                  )
+                }}
+              />
               <Search
                 showAction
                 onSearch={onSearch}
@@ -202,9 +260,18 @@ export default defineComponent({
                   )
                 }}
               />
-            </Sticky>
-          )}
-
+            </div>
+          </Sticky>
+        )}
+        <List
+          loading={loading.value}
+          finished={finished.value}
+          finished-text={
+            data.value && data.value.rows.length ? '没有更多了' : ''
+          }
+          onLoad={FetchList}
+          error={isError.value}
+        >
           {data.value && data.value.rows.length ? (
             <div class={styles.alumnList}>
               <Song
@@ -215,30 +282,10 @@ export default defineComponent({
                   } else {
                     onItemClick?.(item)
                   }
-                  // if (onItemClick === noop || !onItemClick) {
-                  //   musicBuy(item, () => {}, {
-                  //     albumId: route.params.id,
-                  //     albumName: albumDetail.value?.albumName
-                  //   })
-                  // } else {
-                  //   onItemClick(item)
-                  // }
                 }}
               />
             </div>
           ) : (
-            // data.value.rows.map(item => (
-            //     <Item
-            //       data={item}
-            //       onClick={() => {
-            //         if (onItemClick === noop) {
-            //           musicBuy(item)
-            //         } else {
-            //           onItemClick?.(item)
-            //         }
-            //       }}
-            //     />
-            //   ))
             !loading.value && (
               <ColResult
                 tips="暂无曲目"
@@ -248,6 +295,82 @@ export default defineComponent({
             )
           )}
         </List>
+        {/* <Swipe
+          height={searchHeight.value}
+          showIndicators={false}
+          onChange={(name: string) => {
+            console.log('12')
+          }}
+        >
+          <SwipeItem>
+            <List
+              loading={loading.value}
+              finished={finished.value}
+              finished-text={
+                data.value && data.value.rows.length ? '没有更多了' : ''
+              }
+              onLoad={FetchList}
+              error={isError.value}
+            >
+              {data.value && data.value.rows.length ? (
+                <div class={styles.alumnList}>
+                  <Song
+                    list={data.value.rows}
+                    onDetail={(item: any) => {
+                      if (onItemClick === noop) {
+                        musicBuy(item)
+                      } else {
+                        onItemClick?.(item)
+                      }
+                    }}
+                  />
+                </div>
+              ) : (
+                !loading.value && (
+                  <ColResult
+                    tips="暂无曲目"
+                    classImgSize="SMALL"
+                    btnStatus={false}
+                  />
+                )
+              )}
+            </List>
+          </SwipeItem>
+          <SwipeItem>
+            <List
+              loading={loading.value}
+              finished={finished.value}
+              finished-text={
+                data.value && data.value.rows.length ? '没有更多了' : ''
+              }
+              onLoad={FetchList}
+              error={isError.value}
+            >
+              {data.value && data.value.rows.length ? (
+                <div class={styles.alumnList}>
+                  <Song
+                    list={data.value.rows}
+                    onDetail={(item: any) => {
+                      if (onItemClick === noop) {
+                        musicBuy(item)
+                      } else {
+                        onItemClick?.(item)
+                      }
+                    }}
+                  />
+                </div>
+              ) : (
+                !loading.value && (
+                  <ColResult
+                    tips="暂无曲目"
+                    classImgSize="SMALL"
+                    btnStatus={false}
+                  />
+                )
+              )}
+            </List>
+          </SwipeItem>
+        </Swipe> */}
         <Popup
           show={tagVisibility.value}
           round
@@ -259,7 +382,9 @@ export default defineComponent({
         >
           <SelectTag
             onConfirm={onComfirm}
-            onCancel={() => {}}
+            onCancel={() => {
+              //
+            }}
             defaultValue={route.query.tagids as string}
           />
         </Popup>

src/views/music/list/list.tsx

@@ -0,0 +1,125 @@
+import ColResult from '@/components/col-result'
+import { SubjectEnum, useSubjectId } from '@/helpers/hooks'
+import request from '@/helpers/request'
+import { state } from '@/state'
+import { List } from 'vant'
+import { defineComponent, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import Song from '../component/song'
+import { getRandomKey, musicBuy } from '../music'
+import styles from './index.module.less'
+
+const noop = () => {}
+
+export default defineComponent({
+  name: 'list',
+  props: {
+    hideSearch: {
+      type: Boolean,
+      default: false
+    },
+    defauleParams: {
+      type: Object,
+      default: () => ({})
+    },
+    onItemClick: {
+      type: Function,
+      default: noop
+    },
+    teacherId: {
+      type: String || Number,
+      default: ''
+    }
+  },
+  setup({ hideSearch, defauleParams, onItemClick, teacherId }, { expose }) {
+    const route = useRoute()
+    // const router = useRouter()
+    const tempParams: any = {}
+    if (state.version) {
+      tempParams.version = state.version || '' // 处理ios审核版本
+      tempParams.platform =
+        state.platformType === 'STUDENT' ? 'ios-student' : 'ios-teacher'
+    }
+    // 判断是否在搜索页面用过
+    if (!hideSearch) {
+      const getSubject: any = useSubjectId(SubjectEnum.SEARCH)
+      tempParams.subjectIds = getSubject.id
+    }
+    //
+    const params = reactive({
+      search: (route.query.search as string) || '',
+      exquisiteFlag: 1,
+      musicTagIds: route.query.tagids || '',
+      page: 1,
+      ...defauleParams,
+      ...tempParams
+    })
+    const data = ref<any>(null)
+    const loading = ref(false)
+    const finished = ref(false)
+    const isError = ref(false)
+    const apiSuffix = ref(
+      state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+    )
+
+    const FetchList = async () => {
+      if (loading.value) {
+        return
+      }
+      loading.value = true
+      isError.value = false
+      const tempParams = {
+        ...params,
+        idAndName: params.search,
+        createBy: teacherId
+      }
+      // if (state.platformType === 'TEACHER') {
+      tempParams.myself = false
+      // }
+
+      try {
+        const res = await request.post(`${apiSuffix.value}/music/sheet/list`, {
+          data: tempParams
+        })
+        if (data.value) {
+          const result = (data.value?.rows || []).concat(res.data.rows || [])
+          data.value.rows = result
+        }
+        data.value = data.value || res.data
+        params.page = res.data.pageNo + 1
+        finished.value = res.data.pageNo >= res.data.totalPage
+      } catch (error) {
+        isError.value = true
+      }
+      loading.value = false
+    }
+    return () => (
+      <List
+        loading={loading.value}
+        finished={finished.value}
+        finished-text={data.value && data.value.rows.length ? '没有更多了' : ''}
+        onLoad={FetchList}
+        error={isError.value}
+      >
+        {data.value && data.value.rows.length ? (
+          <div class={styles.alumnList}>
+            <Song
+              list={data.value.rows}
+              onDetail={(item: any) => {
+                if (onItemClick === noop) {
+                  musicBuy(item)
+                } else {
+                  onItemClick?.(item)
+                }
+              }}
+            />
+          </div>
+        ) : (
+          !loading.value && (
+            <ColResult tips="暂无曲目" classImgSize="SMALL" btnStatus={false} />
+          )
+        )}
+      </List>
+    )
+  }
+})