Merge branch 'iteration-20241126'

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

@@ -37,7 +37,7 @@ import {
 } from 'echarts/components'
 import { LabelLayout } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
-import { Button, DatetimePicker, Popup } from 'vant'
+import { Button, DatetimePicker, Popup, Toast } from 'vant'
 import { formatterDatePicker } from '@/helpers/utils'
 import dayjs from 'dayjs'
 import { getTimeRange, TIME_TYPE } from '../../home-statistics'
@@ -407,6 +407,11 @@ export default defineComponent({
                 block
                 type="primary"
                 onClick={() => {
+                  if(!forms.startTimeStr || !forms.endTimeStr) {
+                    Toast('请选择时间范围')
+                    return
+                  }
+
                   emit('confirm', {
                     startTime: forms.startTimeStr,
                     endTime: forms.endTimeStr

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

@@ -9,6 +9,7 @@ import BuyItem from '../buy-item'
 import request from '@/helpers/request'
 import { getTimeRange } from '../../home-statistics'
 import { moneyFormat } from '@/helpers/utils'
+import { useRoute } from 'vue-router'
 
 export default defineComponent({
   name: 'list',
@@ -25,7 +26,10 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const timeRange = ref(getTimeRange('MONTH'))
+    const route = useRoute()
+    const timeRange = ref(
+      getTimeRange((route.query.currentType as any) || 'MONTH')
+    )
 
     const obj = ref({
       xAxisData: [] as any,
@@ -121,9 +125,8 @@ export default defineComponent({
       <div class={styles.list}>
         <Echats
           obj={obj.value}
-          currentType={'MONTH'}
+          currentType={(route.query.currentType as any) || 'MONTH'}
           onConfirm={(val: any) => {
-            // currentType.value = val
             state.params.page = 1
             tableList.value = []
             timeRange.value = val
@@ -147,7 +150,7 @@ export default defineComponent({
           </div>
           {/* </Sticky> */}
           <div class={styles.incomeTip}>
-            实际收入将在课程结束{props.accountPeriod || 0}天后结算
+            实际收入将在课程结束{props.accountPeriod || 1}天后结算
           </div>
 
           <div class={styles.element}></div>

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

@@ -1,11 +1,4 @@
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  reactive,
-  ref
-} from 'vue'
+import { computed, defineComponent, nextTick, ref } from 'vue'
 import styles from './index.module.less'
 import icon1 from '../images/icon1.png'
 import iconArrow from '../images/icon-arrow.png'
@@ -37,7 +30,6 @@ import {
 } from 'echarts/components'
 import { LabelLayout } from 'echarts/features'
 import { CanvasRenderer } from 'echarts/renderers'
-import { format } from 'path'
 import request from '@/helpers/request'
 import dayjs from 'dayjs'
 import { listenerMessage, postMessage } from '@/helpers/native-message'
@@ -170,9 +162,7 @@ const lineChartOption = (xAxisData: any, seriesData: any) => {
 export type TIME_TYPE = 'MONTH' | 'THREE_MONTH' | 'HALF_YEAR' | 'YEAR'
 
 /** 获取时间范围 */
-export const getTimeRange = (
-  type: TIME_TYPE
-) => {
+export const getTimeRange = (type: TIME_TYPE) => {
   if (type === 'MONTH') {
     return {
       startTime: dayjs().format('YYYY-MM') + '-01',
@@ -202,9 +192,7 @@ export default defineComponent({
     const homeStatisticsRef = ref()
     const router = useRouter()
     const popoverStatus = ref(false)
-    const currentType = ref<TIME_TYPE>(
-      'MONTH'
-    )
+    const currentType = ref<TIME_TYPE>('MONTH')
     const timeRange = ref(getTimeRange(currentType.value))
     const statisticCounts = ref({
       browseCount: 0,
@@ -253,7 +241,7 @@ export default defineComponent({
           xAxisData.push(item.date)
           exposureList.push(item.exposureNum)
 
-          if(exposure.length - 1 === index) {
+          if (exposure.length - 1 === index) {
             statisticCounts.value.browseCount = item.exposureNum
           }
         })
@@ -261,7 +249,7 @@ export default defineComponent({
         buy.forEach((item: any, index: number) => {
           buyList.push(item.exposureNum)
 
-          if(buy.length - 1 === index) {
+          if (buy.length - 1 === index) {
             statisticCounts.value.buyCount = item.exposureNum
           }
         })
@@ -289,9 +277,7 @@ export default defineComponent({
       }
     }
 
-    const onChangeTime = (
-      type: TIME_TYPE
-    ) => {
+    const onChangeTime = (type: TIME_TYPE) => {
       popoverStatus.value = false
       if (currentType.value === type) return
       currentType.value = type
@@ -301,17 +287,22 @@ export default defineComponent({
 
     /** 跳转详情 */
     const goDetail = () => {
-      if(browser().isApp) {
+      if (browser().isApp) {
         postMessage({
           api: 'openWebView',
           content: {
-            url: `${location.origin}/teacher/#/home-statistics-detail`,
+            url: `${location.origin}/teacher/#/home-statistics-detail?currentType=${currentType.value}`,
             orientation: 1,
             isHideTitle: false
           }
         })
       } else {
-        router.push({ path: '/home-statistics-detail' })
+        router.push({
+          path: '/home-statistics-detail',
+          query: {
+            currentType: currentType.value
+          }
+        })
       }
     }
 

src/teacher/statistics/practice-statistics-detail/echats/index.tsx

@@ -59,7 +59,8 @@ const lineChartOption = (params: {
     startColor?: string
     endColor?: string
     unit?: string
-  }
+  },
+  splitNumber: number
 }) => {
   return {
     title: {
@@ -151,7 +152,8 @@ const lineChartOption = (params: {
       splitLine: {
         axisLine: { lineStyle: { color: '#8C8C8C' } },
         lineStyle: { color: ['#f2f2f2'], type: 'dashed' }
-      }
+      },
+      splitNumber: params.splitNumber || 5
     },
     dataZoom: [{ type: 'inside', throttle: 100 }],
     toolbox: { feature: { saveAsImage: { show: false } } }
@@ -207,7 +209,8 @@ export default defineComponent({
                     ? 'rgba(255, 149, 93, 0)'
                     : 'rgba(45, 199, 170, 0)',
                 unit: props.type === 'NUM' ? '人' : '分钟'
-              }
+              },
+              splitNumber: props.obj.countMaxCount
             })
           )
         myChart.on('highlight', function (params: any) {

src/teacher/statistics/practice-statistics-detail/index.module.less

@@ -213,17 +213,19 @@
       padding-left: 6px;
       padding-right: 6px;
       text-align: left;
-      display: flex;
-      align-items: center;
+      // display: flex;
+      // align-items: center;
       font-weight: 400;
       span {
+        display: inline-block;
         font-size: 13px;
         color: #333333;
         line-height: 20px;
-        max-width: 60px;
+        max-width: 45px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        vertical-align: middle;
       }
     }
     &:nth-child(4n) {
@@ -239,6 +241,7 @@
       border-radius: 50%;
       margin-right: 4px;
       flex-shrink: 0;
+      vertical-align: middle;
     }
   }
 

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

@@ -5,7 +5,7 @@ import iconArrow11 from '../images/icon-arrow1-1.png'
 import icon1 from '../images/icon-1.png'
 import icon2 from '../images/icon-2.png'
 import iconDownload from '../images/icon-download.png'
-import { Button, DatetimePicker, Icon, Popup } from 'vant'
+import { Button, DatetimePicker, Icon, Popup, Toast } from 'vant'
 import Echats from './echats'
 import ColHeader from '@/components/col-header'
 import TheSticky from '@/components/the-sticky'
@@ -89,10 +89,12 @@ export default defineComponent({
       students: [] as any,
       xAxisDataTime: [] as any,
       yAxisDataTime: [] as any,
-      timeCount: 0,
+      timeMaxCount: 5,
+      timeCount: 0 as any,
       timeStr: '',
       xAxisDataCount: [] as any,
       yAxisDataCount: [] as any,
+      countMaxCount: 5, // 默认横线
       countCount: 0,
       countStr: ''
     })
@@ -171,7 +173,7 @@ export default defineComponent({
           practiceTimeList.push(item.practiceTime)
 
           if (practiceTimes.length - 1 === index) {
-            obj.value.timeCount = item.practiceTime
+            obj.value.timeCount = formatSecToMin(item.practiceTime)
             obj.value.timeStr = item.date
           }
         })
@@ -180,10 +182,15 @@ export default defineComponent({
         const practiceCounts = data.practiceCounts || []
         const xAxisDataCounts: string[] = []
         const countList: number[] = []
+        let maxCount = 0 // 最大人数 - 用记设置练习人数分割线
         practiceCounts.forEach((item: any, index: number) => {
           xAxisDataCounts.push(item.date)
           countList.push(item.practiceTime)
 
+          if (maxCount < (item.practiceTime || 0)) {
+            maxCount = item.practiceTime
+          }
+
           if (practiceCounts.length - 1 === index) {
             obj.value.countCount = item.practiceTime
             obj.value.countStr = item.date
@@ -194,6 +201,8 @@ export default defineComponent({
         obj.value.yAxisDataTime = practiceTimeList
         obj.value.xAxisDataCount = xAxisDataCounts
         obj.value.yAxisDataCount = countList
+        // 最小数量为1
+        obj.value.countMaxCount = maxCount >= 5 ? 5 : Math.max(maxCount, 1)
       } catch {
         //
       }
@@ -272,6 +281,10 @@ export default defineComponent({
 
     // 重置
     const onConfirm = () => {
+      if (!forms.startTimeStr || !forms.endTimeStr) {
+        Toast('请选择时间范围')
+        return
+      }
       // timeRange.value = getTimeRange(currentType.value)
       searchStatus.value = false
       forms.subjectId = searchObj.tempSubjectId
@@ -395,7 +408,8 @@ export default defineComponent({
                 xAxisData: obj.value.xAxisDataCount,
                 yAxisData: obj.value.yAxisDataCount,
                 count: obj.value.countCount,
-                time: obj.value.countStr
+                time: obj.value.countStr,
+                countMaxCount: obj.value.countMaxCount
               }}
             />
           </div>

src/views/award-activity/index.module.less

@@ -98,6 +98,7 @@
 }
 .popupContainerGift {
   position: relative;
+
   .giftBg {
     width: 279px;
     height: 308px;

src/views/award-activity/index.tsx

@@ -198,7 +198,9 @@ export default defineComponent({
 
         <Popup v-model:show={this.statusGift} class={styles.popupGift}>
           <div class={styles.popupContainerGift}>
-            <Image src={giftBg} class={styles.giftBg} />
+            <img src={giftBg} class={styles.giftBg} style="opacity: 0" onLoad={(e: any) => {
+              e.target.style.opacity = 1
+            }} />
             <img src={giftBtn} class={styles.giftBtn} onClick={() => {
                   this.statusGift = false
                   this.list = []

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

@@ -19,6 +19,14 @@
   }
 }
 
+.stickySearch {
+  :global {
+    .van-sticky--fixed {
+      background-color: #fff;
+    }
+  }
+}
+
 .base {
   :global(.van-sticky--fixed) {
     box-shadow: 10px 10px 10px var(--box-shadow-color);
@@ -176,9 +184,15 @@
   -webkit-backdrop-filter: blur(20px);
 }
 
+.musicContentMain {
+  height: calc(100vh - var(--header-height));
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
 .bg {
   position: relative;
-  height: 100%;
+  // height: 100%;
   padding: 16px;
   z-index: 11;
 }

src/views/music/album-detail/index.tsx

@@ -1,11 +1,4 @@
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  reactive,
-  ref
-} from 'vue'
+import { computed, defineComponent, nextTick, watch, reactive, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
@@ -22,15 +15,9 @@ import {
   Popup,
   Sticky
 } from 'vant'
-// import classNames from 'classnames'
-// import Footer from '../album/footer'
-// import FavoriteIcon from '../album/favorite.svg'
-// import FavoritedIcon from '../album/favorited.svg'
 import styles from './index.module.less'
-// import Item from '../list/item'
-import { useRect } from '@vant/use'
-import { useEventListener, useWindowScroll } from '@vueuse/core'
-import { getRandomKey, musicBuy } from '../music'
+import { useScroll } from '@vueuse/core'
+import { getRandomKey } from '../music'
 import { openDefaultWebView, state } from '@/state'
 import IconPan from './pan.png'
 import oStart from './oStart.png'
@@ -87,7 +74,6 @@ export default defineComponent({
     const isError = ref(false)
     const favorited = ref(0)
     const albumFavoriteCount = ref(0)
-    const headers = ref(null)
     const background = ref<string>('rgba(55, 205, 177, 0)')
     const color = ref<string>('#fff')
     const heightInfo = ref<any>('auto')
@@ -165,18 +151,18 @@ export default defineComponent({
 
     FetchDetail()
     FetchList()
-    useEventListener(document, 'scroll', () => {
-      const { y } = useWindowScroll()
-      if (y.value > 20) {
-        background.value = `rgba(255, 255, 255)`
-        color.value = 'black'
-        title.value = albumDetail.value?.albumName || ' '
-      } else {
-        background.value = 'transparent'
-        color.value = '#fff'
-        title.value = ' '
+    const musicContentMainRef = ref<HTMLDivElement>()
+    const { y } = useScroll(musicContentMainRef)
+    watch(
+      () => y.value,
+      () => {
+        if (y.value > 20) {
+          title.value = albumDetail.value?.albumName || ' '
+        } else {
+          title.value = ' '
+        }
       }
-    })
+    )
 
     useEventTracking('专辑')
 
@@ -322,19 +308,18 @@ export default defineComponent({
     return () => {
       return (
         <div class={styles.detail}>
-          <div ref={headers}>
+          <TheSticky
+            position="top"
+            onBarHeight={(height: number) => {
+              heightInfo.value = height
+            }}
+          >
             <ColHeader
               background={background.value}
               border={false}
               title={title.value}
               color={color.value}
               backIconColor="white"
-              onHeaderBack={() => {
-                nextTick(() => {
-                  const { height } = useRect(headers as any)
-                  heightInfo.value = height
-                })
-              }}
               v-slots={{
                 right: () => (
                   <div
@@ -352,164 +337,156 @@ export default defineComponent({
                 )
               }}
             />
-          </div>
+          </TheSticky>
           <img class={styles.bgImg} src={albumDetail.value?.albumCoverUrl} />
           <div class={styles.musicContent}></div>
-          <div class={styles.bg}>
-            <div class={styles.alumWrap}>
-              <div class={styles.img}>
-                {albumDetail.value?.paymentType === 'CHARGE' && (
-                  <span class={styles.albumType}>付费</span>
-                )}
-                <Image
-                  class={styles.image}
-                  width="100%"
-                  height="100%"
-                  fit="cover"
-                  src={albumDetail.value?.albumCoverUrl}
-                />
-              </div>
-              <div class={styles.alumDes}>
-                <div class={[styles.alumTitle, 'van-ellipsis']}>
-                  {albumDetail.value?.albumName}
+          <div class={styles.musicContentMain} ref={musicContentMainRef}>
+            <div class={styles.bg}>
+              <div class={styles.alumWrap}>
+                <div class={styles.img}>
+                  {albumDetail.value?.paymentType === 'CHARGE' && (
+                    <span class={styles.albumType}>付费</span>
+                  )}
+                  <Image
+                    class={styles.image}
+                    width="100%"
+                    height="100%"
+                    fit="cover"
+                    src={albumDetail.value?.albumCoverUrl}
+                  />
                 </div>
-                <div class={styles.tags}>
-                  {albumDetail.value?.musicTagNames?.map((tag: any) => (
-                    <span class={styles.tag}>{tag}</span>
-                  ))}
+                <div class={styles.alumDes}>
+                  <div class={[styles.alumTitle, 'van-ellipsis']}>
+                    {albumDetail.value?.albumName}
+                  </div>
+                  <div class={styles.tags}>
+                    {albumDetail.value?.musicTagNames?.map((tag: any) => (
+                      <span class={styles.tag}>{tag}</span>
+                    ))}
+                  </div>
+                  <div
+                    class={[styles.des, 'van-multi-ellipsis--l3']}
+                    style={{
+                      height: '48px',
+                      lineHeight: '16px'
+                    }}
+                  >
+                    {albumDetail.value?.albumDesc}
+                  </div>
                 </div>
+              </div>
+              <div class={styles.alumCollect}>
+                <img src={IconPan} />
+                <span>共{albumDetail.value?.musicSheetCount}首曲目</span>
                 <div
-                  class={[styles.des, 'van-multi-ellipsis--l3']}
-                  style={{
-                    height: '48px',
-                    lineHeight: '16px'
-                  }}
+                  class={styles.right}
+                  onClick={() => toggleFavorite(albumDetail.value?.id)}
                 >
-                  {albumDetail.value?.albumDesc}
+                  <img src={favorited.value ? iStart : oStart} />
+                  <span>{albumFavoriteCount.value}人收藏</span>
                 </div>
               </div>
-            </div>
-            <div class={styles.alumCollect}>
-              <img src={IconPan} />
-              <span>共{albumDetail.value?.musicSheetCount}首曲目</span>
-              <div
-                class={styles.right}
-                onClick={() => toggleFavorite(albumDetail.value?.id)}
-              >
-                <img src={favorited.value ? iStart : oStart} />
-                <span>{albumFavoriteCount.value}人收藏</span>
-              </div>
-            </div>
 
-            {albumDetail.value?.paymentType === 'CHARGE' &&
-              albumDetail.value?.orderStatus !== 'PAID' && (
-                <div class={styles.albumTips}>
-                  <span>此专辑为付费专辑，购买即可自由练习该专辑</span>
-                  <span class={styles.albumPrice}>
-                    ¥{moneyFormat(albumDetail.value?.albumPrice)}
-                  </span>
-                </div>
-              )}
-          </div>
-          <div class={styles.alumnContainer}>
-            <div class={styles.alumnList}>
-              {/* <Title title="曲目列表" isMore={false}>
-                {{
-                  right: () =>
-                    albumDetail.value?.albumType === 'CONCERT' && (
-                      <div
-                        class={[
-                          styles.subjectSearch,
-                          subjects.show ? styles.active : ''
-                        ]}
-                        onClick={() => (subjects.show = true)}
-                      >
-                        {subjects.name}
-                      </div>
-                    )
-                }}
-              </Title> */}
-              <ColSearch
-                class={styles.searchSection}
-                background="transparent"
-                placeholder="请输入曲目关键词"
-                onSearch={(val: string) => {
-                  params.musicSheetName = val
-                  rows.value = []
-                  params.page = 1
-                  FetchList()
-                }}
-                v-slots={{
-                  left: () =>
-                    albumLevel.value.length > 0 ||
-                    albumType.value.length > 0 ? (
-                      <DropdownMenu activeColor="#2DC7AA">
-                        <DropdownItem title="筛选" ref={dropdownItemRef}>
-                          <SearchGroup
-                            searchList={{
-                              albumLevelList: albumLevel.value,
-                              albumTypeList: albumType.value
-                            }}
-                            searchObj={{
-                              albumCategoryLevelId: params.albumCategoryLevelId,
-                              albumCategoryTypeId: params.albumCategoryTypeId
-                            }}
-                            onConfirm={(val: any) => {
-                              params.albumCategoryLevelId =
-                                val.albumCategoryLevelId
-                              params.albumCategoryTypeId =
-                                val.albumCategoryTypeId
-                              dropdownItemRef.value?.toggle()
-                              rows.value = []
-                              params.page = 1
-                              FetchList()
-                            }}
-                          />
-                        </DropdownItem>
-                      </DropdownMenu>
-                    ) : (
-                      ''
-                    )
-                }}
-              />
-              <List
-                loading={loading.value}
-                finished={finished.value}
-                onLoad={FetchList}
-                error={isError.value}
-              >
-                <Song
-                  list={rows.value}
-                  onDetail={(item: any) => {
-                    if (onItemClick === noop || !onItemClick) {
-                      const url =
-                        location.origin +
-                        location.pathname +
-                        '#/music-detail?id=' +
-                        item.id +
-                        '&albumId=' +
-                        route.params.id
-                      openDefaultWebView(url, () => {
-                        router.push({
-                          path: '/music-detail',
-                          query: {
-                            id: item.id,
-                            albumId: route.params.id
-                          }
-                        })
-                      })
-                    } else {
-                      onItemClick(item)
-                    }
-                  }}
-                />
-                {rows.value && !loading.value && rows.value.length <= 0 && (
-                  <ColResult btnStatus={false} tips="暂无曲目" />
+              {albumDetail.value?.paymentType === 'CHARGE' &&
+                albumDetail.value?.orderStatus !== 'PAID' && (
+                  <div class={styles.albumTips}>
+                    <span>此专辑为付费专辑，购买即可自由练习该专辑</span>
+                    <span class={styles.albumPrice}>
+                      ¥{moneyFormat(albumDetail.value?.albumPrice)}
+                    </span>
+                  </div>
                 )}
-              </List>
             </div>
+            <div class={styles.alumnContainer}>
+              <div class={styles.alumnList}>
+                <Sticky
+                  offsetTop={heightInfo.value}
+                  class={styles.stickySearch}
+                >
+                  <ColSearch
+                    class={styles.searchSection}
+                    background="transparent"
+                    placeholder="请输入曲目关键词"
+                    onSearch={(val: string) => {
+                      params.musicSheetName = val
+                      rows.value = []
+                      params.page = 1
+                      FetchList()
+                    }}
+                    v-slots={{
+                      left: () =>
+                        albumLevel.value.length > 0 ||
+                        albumType.value.length > 0 ? (
+                          <DropdownMenu activeColor="#2DC7AA">
+                            <DropdownItem title="筛选" ref={dropdownItemRef}>
+                              <SearchGroup
+                                searchList={{
+                                  albumLevelList: albumLevel.value,
+                                  albumTypeList: albumType.value
+                                }}
+                                searchObj={{
+                                  albumCategoryLevelId:
+                                    params.albumCategoryLevelId,
+                                  albumCategoryTypeId:
+                                    params.albumCategoryTypeId
+                                }}
+                                onConfirm={(val: any) => {
+                                  params.albumCategoryLevelId =
+                                    val.albumCategoryLevelId
+                                  params.albumCategoryTypeId =
+                                    val.albumCategoryTypeId
+                                  dropdownItemRef.value?.toggle()
+                                  rows.value = []
+                                  params.page = 1
+                                  FetchList()
+                                }}
+                              />
+                            </DropdownItem>
+                          </DropdownMenu>
+                        ) : (
+                          ''
+                        )
+                    }}
+                  />
+                </Sticky>
+                <List
+                  loading={loading.value}
+                  finished={finished.value}
+                  onLoad={FetchList}
+                  error={isError.value}
+                >
+                  <Song
+                    list={rows.value}
+                    onDetail={(item: any) => {
+                      if (onItemClick === noop || !onItemClick) {
+                        const url =
+                          location.origin +
+                          location.pathname +
+                          '#/music-detail?id=' +
+                          item.id +
+                          '&albumId=' +
+                          route.params.id
+                        openDefaultWebView(url, () => {
+                          router.push({
+                            path: '/music-detail',
+                            query: {
+                              id: item.id,
+                              albumId: route.params.id
+                            }
+                          })
+                        })
+                      } else {
+                        onItemClick(item)
+                      }
+                    }}
+                  />
+                  {rows.value && !loading.value && rows.value.length <= 0 && (
+                    <ColResult btnStatus={false} tips="暂无曲目" />
+                  )}
+                </List>
+              </div>
 
-            {/* {albumDetail.value?.relatedMusicAlbum &&
+              {/* {albumDetail.value?.relatedMusicAlbum &&
               albumDetail.value?.relatedMusicAlbum.length > 0 && (
                 <>
                   <Title
@@ -539,54 +516,55 @@ export default defineComponent({
                   />
                 </>
               )} */}
-          </div>
+            </div>
 
-          {/* 判断是否是收费 是否是已经购买 */}
-          {albumDetail.value?.paymentType === 'CHARGE' &&
-            albumDetail.value?.orderStatus !== 'PAID' && (
-              <TheSticky position="bottom">
-                <div
-                  class={[
-                    styles.btnGroup,
-                    buyVip.value &&
-                      !(state.user.data.userVip?.vipType !== 'NOT_VIP') &&
-                      'btnMore'
-                  ]}
-                >
-                  <Button
-                    block
-                    round
-                    type="primary"
-                    style={{ fontSize: '16px' }}
-                    onClick={onBuy}
+            {/* 判断是否是收费 是否是已经购买 */}
+            {albumDetail.value?.paymentType === 'CHARGE' &&
+              albumDetail.value?.orderStatus !== 'PAID' && (
+                <TheSticky varName="--bottom-height" position="bottom">
+                  <div
+                    class={[
+                      styles.btnGroup,
+                      buyVip.value &&
+                        !(state.user.data.userVip?.vipType !== 'NOT_VIP') &&
+                        'btnMore'
+                    ]}
                   >
-                    购买专辑
-                  </Button>
-                  {buyVip.value &&
-                    !(state.user.data.userVip?.vipType !== 'NOT_VIP') && (
-                      <Button
-                        block
-                        round
-                        type="primary"
-                        style={{ fontSize: '16px' }}
-                        onClick={() => {
-                          router.push({
-                            path: '/memberCenter',
-                            query: {
-                              ...route.query
-                            }
-                          })
-                        }}
-                      >
-                        {studentActivityId.value > 0 && (
-                          <div class={[styles.buttonDiscount]}>专属优惠</div>
-                        )}
-                        开通会员
-                      </Button>
-                    )}
-                </div>
-              </TheSticky>
-            )}
+                    <Button
+                      block
+                      round
+                      type="primary"
+                      style={{ fontSize: '16px' }}
+                      onClick={onBuy}
+                    >
+                      购买专辑
+                    </Button>
+                    {buyVip.value &&
+                      !(state.user.data.userVip?.vipType !== 'NOT_VIP') && (
+                        <Button
+                          block
+                          round
+                          type="primary"
+                          style={{ fontSize: '16px' }}
+                          onClick={() => {
+                            router.push({
+                              path: '/memberCenter',
+                              query: {
+                                ...route.query
+                              }
+                            })
+                          }}
+                        >
+                          {studentActivityId.value > 0 && (
+                            <div class={[styles.buttonDiscount]}>专属优惠</div>
+                          )}
+                          开通会员
+                        </Button>
+                      )}
+                  </div>
+                </TheSticky>
+              )}
+          </div>
 
           <Popup
             v-model:show={shareStatus.value}