|  | @@ -1,5 +1,16 @@
 | 
											
												
													
														|  | -import { defineComponent, onMounted, reactive, ref } from 'vue'
 |  | 
 | 
											
												
													
														|  | -import { Image, Tabs, Tab, List, Button, Popup, Dialog, Sticky } from 'vant'
 |  | 
 | 
											
												
													
														|  | 
 |  | +import { computed, defineComponent, onMounted, reactive, ref, watch } from 'vue'
 | 
											
												
													
														|  | 
 |  | +import {
 | 
											
												
													
														|  | 
 |  | +  Image,
 | 
											
												
													
														|  | 
 |  | +  Tabs,
 | 
											
												
													
														|  | 
 |  | +  Tab,
 | 
											
												
													
														|  | 
 |  | +  List,
 | 
											
												
													
														|  | 
 |  | +  Button,
 | 
											
												
													
														|  | 
 |  | +  Popup,
 | 
											
												
													
														|  | 
 |  | +  Dialog,
 | 
											
												
													
														|  | 
 |  | +  Sticky,
 | 
											
												
													
														|  | 
 |  | +  Swipe,
 | 
											
												
													
														|  | 
 |  | +  SwipeItem
 | 
											
												
													
														|  | 
 |  | +} from 'vant'
 | 
											
												
													
														|  |  import styles from './index.module.less'
 |  |  import styles from './index.module.less'
 | 
											
												
													
														|  |  import TheSticky from '@/components/the-sticky'
 |  |  import TheSticky from '@/components/the-sticky'
 | 
											
												
													
														|  |  import ColHeader from '@/components/col-header'
 |  |  import ColHeader from '@/components/col-header'
 | 
											
										
											
												
													
														|  | @@ -8,6 +19,7 @@ import request from '@/helpers/request'
 | 
											
												
													
														|  |  import iconMenu from './images/icon-menu.png'
 |  |  import iconMenu from './images/icon-menu.png'
 | 
											
												
													
														|  |  import iconRightTop from './images/icon-right-top.png'
 |  |  import iconRightTop from './images/icon-right-top.png'
 | 
											
												
													
														|  |  import iconAlbumCover from '../../images/icon-album-cover.png'
 |  |  import iconAlbumCover from '../../images/icon-album-cover.png'
 | 
											
												
													
														|  | 
 |  | +import iconTimer from './images/icon-timer.png'
 | 
											
												
													
														|  |  import { state as baseState } from '@/state'
 |  |  import { state as baseState } from '@/state'
 | 
											
												
													
														|  |  import Song from '../component/song'
 |  |  import Song from '../component/song'
 | 
											
												
													
														|  |  import { useRoute, useRouter } from 'vue-router'
 |  |  import { useRoute, useRouter } from 'vue-router'
 | 
											
										
											
												
													
														|  | @@ -15,6 +27,13 @@ import ColResult from '@/components/col-result'
 | 
											
												
													
														|  |  import { moneyFormat } from '@/helpers/utils'
 |  |  import { moneyFormat } from '@/helpers/utils'
 | 
											
												
													
														|  |  import { orderStatus } from '@/views/order-detail/orderStatus'
 |  |  import { orderStatus } from '@/views/order-detail/orderStatus'
 | 
											
												
													
														|  |  import { postMessage } from '@/helpers/native-message'
 |  |  import { postMessage } from '@/helpers/native-message'
 | 
											
												
													
														|  | 
 |  | +// Import Swiper Vue.js components
 | 
											
												
													
														|  | 
 |  | +// import Swiper core and required modules
 | 
											
												
													
														|  | 
 |  | +import { Pagination } from 'swiper/modules'
 | 
											
												
													
														|  | 
 |  | +import { Swiper, SwiperSlide } from 'swiper/vue'
 | 
											
												
													
														|  | 
 |  | +// Import Swiper styles
 | 
											
												
													
														|  | 
 |  | +import 'swiper/css'
 | 
											
												
													
														|  | 
 |  | +import 'swiper/css/pagination'
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |  export default defineComponent({
 |  |  export default defineComponent({
 | 
											
												
													
														|  |    name: 'train-tool',
 |  |    name: 'train-tool',
 | 
											
										
											
												
													
														|  | @@ -36,50 +55,14 @@ export default defineComponent({
 | 
											
												
													
														|  |        list: [] as any,
 |  |        list: [] as any,
 | 
											
												
													
														|  |        popupStatus: false,
 |  |        popupStatus: false,
 | 
											
												
													
														|  |        selectMember: {} as any, // 购买的月份
 |  |        selectMember: {} as any, // 购买的月份
 | 
											
												
													
														|  | -      buyList: [
 |  | 
 | 
											
												
													
														|  | -        {
 |  | 
 | 
											
												
													
														|  | -          purchaseCycle: 6,
 |  | 
 | 
											
												
													
														|  | -          salePrice: 0,
 |  | 
 | 
											
												
													
														|  | -          costPrice: 0,
 |  | 
 | 
											
												
													
														|  | -          status: true
 |  | 
 | 
											
												
													
														|  | -        },
 |  | 
 | 
											
												
													
														|  | -        {
 |  | 
 | 
											
												
													
														|  | -          purchaseCycle: 12,
 |  | 
 | 
											
												
													
														|  | -          salePrice: 0,
 |  | 
 | 
											
												
													
														|  | -          costPrice: 0,
 |  | 
 | 
											
												
													
														|  | -          status: false
 |  | 
 | 
											
												
													
														|  | -        },
 |  | 
 | 
											
												
													
														|  | -        {
 |  | 
 | 
											
												
													
														|  | -          purchaseCycle: 18,
 |  | 
 | 
											
												
													
														|  | -          salePrice: 0,
 |  | 
 | 
											
												
													
														|  | -          costPrice: 0,
 |  | 
 | 
											
												
													
														|  | -          status: false
 |  | 
 | 
											
												
													
														|  | -        },
 |  | 
 | 
											
												
													
														|  | -        {
 |  | 
 | 
											
												
													
														|  | -          purchaseCycle: 24,
 |  | 
 | 
											
												
													
														|  | -          salePrice: 0,
 |  | 
 | 
											
												
													
														|  | -          costPrice: 0,
 |  | 
 | 
											
												
													
														|  | -          status: false
 |  | 
 | 
											
												
													
														|  | -        }
 |  | 
 | 
											
												
													
														|  | -        // {
 |  | 
 | 
											
												
													
														|  | -        //   purchaseCycle: 30,
 |  | 
 | 
											
												
													
														|  | -        //   salePrice: 0,
 |  | 
 | 
											
												
													
														|  | -        //   costPrice: 0,
 |  | 
 | 
											
												
													
														|  | -        //   status: false
 |  | 
 | 
											
												
													
														|  | -        // },
 |  | 
 | 
											
												
													
														|  | -        // {
 |  | 
 | 
											
												
													
														|  | -        //   purchaseCycle: 36,
 |  | 
 | 
											
												
													
														|  | -        //   salePrice: 0,
 |  | 
 | 
											
												
													
														|  | -        //   costPrice: 0,
 |  | 
 | 
											
												
													
														|  | -        //   status: false
 |  | 
 | 
											
												
													
														|  | -        // }
 |  | 
 | 
											
												
													
														|  | -      ],
 |  | 
 | 
											
												
													
														|  |        ensembleCounts: false,
 |  |        ensembleCounts: false,
 | 
											
												
													
														|  |        musicCounts: false,
 |  |        musicCounts: false,
 | 
											
												
													
														|  |        subjectCounts: false,
 |  |        subjectCounts: false,
 | 
											
												
													
														|  |        tenantAlbumStatus: 0 as any,
 |  |        tenantAlbumStatus: 0 as any,
 | 
											
												
													
														|  |        ablumStatus: false,
 |  |        ablumStatus: false,
 | 
											
												
													
														|  | -      heightV: 0
 |  | 
 | 
											
												
													
														|  | 
 |  | +      heightV: 0,
 | 
											
												
													
														|  | 
 |  | +      hasBuyStatus: true, // 是否能继续购买
 | 
											
												
													
														|  | 
 |  | +      albumList: [] // 专辑列表
 | 
											
												
													
														|  |      })
 |  |      })
 | 
											
												
													
														|  |      const params = reactive({
 |  |      const params = reactive({
 | 
											
												
													
														|  |        page: 1,
 |  |        page: 1,
 | 
											
										
											
												
													
														|  | @@ -89,29 +72,44 @@ export default defineComponent({
 | 
											
												
													
														|  |        baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
 |  |        baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
 | 
											
												
													
														|  |      )
 |  |      )
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | 
 |  | +    const isSingleAlbum = computed(() => {
 | 
											
												
													
														|  | 
 |  | +      const query = route.query
 | 
											
												
													
														|  | 
 |  | +      if (query.taId || query.albumId) {
 | 
											
												
													
														|  | 
 |  | +        return true
 | 
											
												
													
														|  | 
 |  | +      } else {
 | 
											
												
													
														|  | 
 |  | +        return false
 | 
											
												
													
														|  | 
 |  | +      }
 | 
											
												
													
														|  | 
 |  | +    })
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  |      const getDetails = async () => {
 |  |      const getDetails = async () => {
 | 
											
												
													
														|  |        try {
 |  |        try {
 | 
											
												
													
														|  | -        let url = apiSuffix.value + '/userTenantAlbumRecord/detail'
 |  | 
 | 
											
												
													
														|  | -        if (state.albumId) {
 |  | 
 | 
											
												
													
														|  | -          url = url + '?albumId=' + state.albumId
 |  | 
 | 
											
												
													
														|  | -        }
 |  | 
 | 
											
												
													
														|  | -        const { data } = await request.post(url)
 |  | 
 | 
											
												
													
														|  | -        state.details = data || {}
 |  | 
 | 
											
												
													
														|  | -        state.tenantAlbumStatus = data.tenantAlbumStatus
 |  | 
 | 
											
												
													
														|  | -        state.ablumStatus = data.status
 |  | 
 | 
											
												
													
														|  | -        state.buyList.forEach((item: any, index: number) => {
 |  | 
 | 
											
												
													
														|  | -          item.salePrice = (index + 1) * data.salePrice
 |  | 
 | 
											
												
													
														|  | -          item.costPrice = (index + 1) * data.costPrice
 |  | 
 | 
											
												
													
														|  | -        })
 |  | 
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  | -        state.selectMember = {
 |  | 
 | 
											
												
													
														|  | -          ...state.buyList[0]
 |  | 
 | 
											
												
													
														|  | 
 |  | +        // tenantGroupAlbum/buyAlbumInfo
 | 
											
												
													
														|  | 
 |  | +        const url =
 | 
											
												
													
														|  | 
 |  | +          apiSuffix.value +
 | 
											
												
													
														|  | 
 |  | +          '/tenantGroupAlbum/buyAlbumInfo?tenantGroupAlbumId=' +
 | 
											
												
													
														|  | 
 |  | +          (route.query.taId || '')
 | 
											
												
													
														|  | 
 |  | +        // if (state.albumId) {
 | 
											
												
													
														|  | 
 |  | +        //   url = url + '?albumId=' + state.albumId
 | 
											
												
													
														|  | 
 |  | +        // }
 | 
											
												
													
														|  | 
 |  | +        const { data } = await request.get(url)
 | 
											
												
													
														|  | 
 |  | +        state.albumList = data || []
 | 
											
												
													
														|  | 
 |  | +        if (state.albumList.length > 0) {
 | 
											
												
													
														|  | 
 |  | +          state.details = state.albumList[0]
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -        state.ensembleCounts = data.ensembleCounts <= 0 ? false : true
 |  | 
 | 
											
												
													
														|  | -        state.subjectCounts = data.subjectCounts <= 0 ? false : true
 |  | 
 | 
											
												
													
														|  | -        state.musicCounts = data.musicCounts <= 0 ? false : true
 |  | 
 | 
											
												
													
														|  | 
 |  | +        // state.tenantAlbumStatus = data.tenantAlbumStatus
 | 
											
												
													
														|  | 
 |  | +        // state.ablumStatus = data.status
 | 
											
												
													
														|  | 
 |  | +      } catch {
 | 
											
												
													
														|  | 
 |  | +        //
 | 
											
												
													
														|  | 
 |  | +      }
 | 
											
												
													
														|  | 
 |  | +    }
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | 
 |  | +    watch(
 | 
											
												
													
														|  | 
 |  | +      () => state.details,
 | 
											
												
													
														|  | 
 |  | +      () => {
 | 
											
												
													
														|  | 
 |  | +        state.ensembleCounts = state.details?.ensembleCounts <= 0 ? false : true
 | 
											
												
													
														|  | 
 |  | +        state.subjectCounts = state.details?.subjectCounts <= 0 ? false : true
 | 
											
												
													
														|  | 
 |  | +        state.musicCounts = state.details?.musicCounts <= 0 ? false : true
 | 
											
												
													
														|  |          if (state.subjectCounts) {
 |  |          if (state.subjectCounts) {
 | 
											
												
													
														|  |            state.activeTab = 'SUBJECT'
 |  |            state.activeTab = 'SUBJECT'
 | 
											
												
													
														|  |          } else if (state.musicCounts) {
 |  |          } else if (state.musicCounts) {
 | 
											
										
											
												
													
														|  | @@ -138,16 +136,23 @@ export default defineComponent({
 | 
											
												
													
														|  |          } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
 |  |          } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
 | 
											
												
													
														|  |            state.activeTab = 'ENSEMBLE'
 |  |            state.activeTab = 'ENSEMBLE'
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
												
													
														|  | -      } catch {
 |  | 
 | 
											
												
													
														|  | -        //
 |  | 
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +        if (state.details.buyTimesFlag) {
 | 
											
												
													
														|  | 
 |  | +          if (state.details.buyedTimes >= state.details.buyTimes) {
 | 
											
												
													
														|  | 
 |  | +            state.hasBuyStatus = false
 | 
											
												
													
														|  | 
 |  | +          } else {
 | 
											
												
													
														|  | 
 |  | +            state.hasBuyStatus = true
 | 
											
												
													
														|  | 
 |  | +          }
 | 
											
												
													
														|  | 
 |  | +        } else {
 | 
											
												
													
														|  | 
 |  | +          state.hasBuyStatus = true
 | 
											
												
													
														|  | 
 |  | +        }
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  | -    }
 |  | 
 | 
											
												
													
														|  | 
 |  | +    )
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |      const FetchList = async () => {
 |  |      const FetchList = async () => {
 | 
											
												
													
														|  |        if (state.loading) {
 |  |        if (state.loading) {
 | 
											
												
													
														|  |          return
 |  |          return
 | 
											
												
													
														|  |        }
 |  |        }
 | 
											
												
													
														|  | -      console.log(state.details, 'state.details')
 |  | 
 | 
											
												
													
														|  |        state.loading = true
 |  |        state.loading = true
 | 
											
												
													
														|  |        state.isError = false
 |  |        state.isError = false
 | 
											
												
													
														|  |        const tempParams = {
 |  |        const tempParams = {
 | 
											
										
											
												
													
														|  | @@ -205,12 +210,12 @@ export default defineComponent({
 | 
											
												
													
														|  |      })
 |  |      })
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |      const onSubmit = async () => {
 |  |      const onSubmit = async () => {
 | 
											
												
													
														|  | -      const album = state.selectMember
 |  | 
 | 
											
												
													
														|  | 
 |  | +      const album = state.details
 | 
											
												
													
														|  |        const details = state.details
 |  |        const details = state.details
 | 
											
												
													
														|  |        orderStatus.orderObject.orderType = 'TENANT_ALBUM'
 |  |        orderStatus.orderObject.orderType = 'TENANT_ALBUM'
 | 
											
												
													
														|  |        orderStatus.orderObject.orderName = details.name
 |  |        orderStatus.orderObject.orderName = details.name
 | 
											
												
													
														|  |        orderStatus.orderObject.orderDesc = details.name
 |  |        orderStatus.orderObject.orderDesc = details.name
 | 
											
												
													
														|  | -      orderStatus.orderObject.actualPrice = album.salePrice
 |  | 
 | 
											
												
													
														|  | 
 |  | +      orderStatus.orderObject.actualPrice = album.actualPrice
 | 
											
												
													
														|  |        // orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
 |  |        // orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
 | 
											
												
													
														|  |        // orderStatus.orderObject.activityId = route.query.activityId || 0
 |  |        // orderStatus.orderObject.activityId = route.query.activityId || 0
 | 
											
												
													
														|  |        orderStatus.orderObject.orderNo = ''
 |  |        orderStatus.orderObject.orderNo = ''
 | 
											
										
											
												
													
														|  | @@ -218,9 +223,8 @@ export default defineComponent({
 | 
											
												
													
														|  |          {
 |  |          {
 | 
											
												
													
														|  |            orderType: 'TENANT_ALBUM',
 |  |            orderType: 'TENANT_ALBUM',
 | 
											
												
													
														|  |            goodsName: details.name,
 |  |            goodsName: details.name,
 | 
											
												
													
														|  | -          actualPrice: album.salePrice,
 |  | 
 | 
											
												
													
														|  | -          // recomUserId: route.query.recomUserId || 0,
 |  | 
 | 
											
												
													
														|  | -          price: album.salePrice,
 |  | 
 | 
											
												
													
														|  | 
 |  | +          actualPrice: album.actualPrice,
 | 
											
												
													
														|  | 
 |  | +          price: album.actualPrice,
 | 
											
												
													
														|  |            ...details,
 |  |            ...details,
 | 
											
												
													
														|  |            ...album
 |  |            ...album
 | 
											
												
													
														|  |          }
 |  |          }
 | 
											
										
											
												
													
														|  | @@ -289,56 +293,35 @@ export default defineComponent({
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  |      return () => (
 |  |      return () => (
 | 
											
												
													
														|  |        <div class={styles.trainTool}>
 |  |        <div class={styles.trainTool}>
 | 
											
												
													
														|  | -        {(state.tenantAlbumStatus === 0 || !state.ablumStatus) &&
 |  | 
 | 
											
												
													
														|  | -        state.buy != '1' ? (
 |  | 
 | 
											
												
													
														|  | -          <>
 |  | 
 | 
											
												
													
														|  | -            <TheSticky
 |  | 
 | 
											
												
													
														|  | -              position="top"
 |  | 
 | 
											
												
													
														|  | -              onBarHeight={(height: any) => {
 |  | 
 | 
											
												
													
														|  | -                console.log(height, 'height', height)
 |  | 
 | 
											
												
													
														|  | -                state.heightV = height
 |  | 
 | 
											
												
													
														|  | -              }}
 |  | 
 | 
											
												
													
														|  | -            >
 |  | 
 | 
											
												
													
														|  | -              <ColHeader border={false} isFixed={false} />
 |  | 
 | 
											
												
													
														|  | -            </TheSticky>
 |  | 
 | 
											
												
													
														|  | -            {!state.loading && (
 |  | 
 | 
											
												
													
														|  | -              <div
 |  | 
 | 
											
												
													
														|  | -                style={{
 |  | 
 | 
											
												
													
														|  | -                  height: 'calc(100vh - var(--header-height))',
 |  | 
 | 
											
												
													
														|  | -                  display: 'flex',
 |  | 
 | 
											
												
													
														|  | -                  alignItems: 'center'
 |  | 
 | 
											
												
													
														|  | -                }}
 |  | 
 | 
											
												
													
														|  | -              >
 |  | 
 | 
											
												
													
														|  | -                <ColResult
 |  | 
 | 
											
												
													
														|  | -                  tips="暂无曲目"
 |  | 
 | 
											
												
													
														|  | -                  classImgSize="SMALL"
 |  | 
 | 
											
												
													
														|  | -                  btnStatus={false}
 |  | 
 | 
											
												
													
														|  | -                />
 |  | 
 | 
											
												
													
														|  | -              </div>
 |  | 
 | 
											
												
													
														|  | -            )}
 |  | 
 | 
											
												
													
														|  | -          </>
 |  | 
 | 
											
												
													
														|  | -        ) : (
 |  | 
 | 
											
												
													
														|  | -          <>
 |  | 
 | 
											
												
													
														|  | -            <TheSticky
 |  | 
 | 
											
												
													
														|  | -              position="top"
 |  | 
 | 
											
												
													
														|  | -              onBarHeight={(height: any) => {
 |  | 
 | 
											
												
													
														|  | -                console.log(height, 'height', height)
 |  | 
 | 
											
												
													
														|  | -                state.heightV = height
 |  | 
 | 
											
												
													
														|  | -              }}
 |  | 
 | 
											
												
													
														|  | -            >
 |  | 
 | 
											
												
													
														|  | -              <ColHeader
 |  | 
 | 
											
												
													
														|  | -                background={background.value}
 |  | 
 | 
											
												
													
														|  | -                border={false}
 |  | 
 | 
											
												
													
														|  | -                isFixed={false}
 |  | 
 | 
											
												
													
														|  | -                color={color.value}
 |  | 
 | 
											
												
													
														|  | -                backIconColor="white"
 |  | 
 | 
											
												
													
														|  | -              />
 |  | 
 | 
											
												
													
														|  | -            </TheSticky>
 |  | 
 | 
											
												
													
														|  | -            <img class={styles.bgImg} src={state.details?.coverImg} />
 |  | 
 | 
											
												
													
														|  | -            <div class={styles.musicContent}></div>
 |  | 
 | 
											
												
													
														|  | -            <div class={styles.bg}>
 |  | 
 | 
											
												
													
														|  | -              <div class={styles.alumWrap}>
 |  | 
 | 
											
												
													
														|  | 
 |  | +        {!route.query.taId && (
 | 
											
												
													
														|  | 
 |  | +          <TheSticky
 | 
											
												
													
														|  | 
 |  | +            position="top"
 | 
											
												
													
														|  | 
 |  | +            onBarHeight={(height: any) => {
 | 
											
												
													
														|  | 
 |  | +              state.heightV = height
 | 
											
												
													
														|  | 
 |  | +            }}
 | 
											
												
													
														|  | 
 |  | +          >
 | 
											
												
													
														|  | 
 |  | +            <ColHeader
 | 
											
												
													
														|  | 
 |  | +              background={background.value}
 | 
											
												
													
														|  | 
 |  | +              border={false}
 | 
											
												
													
														|  | 
 |  | +              isFixed={false}
 | 
											
												
													
														|  | 
 |  | +              color={color.value}
 | 
											
												
													
														|  | 
 |  | +              backIconColor="white"
 | 
											
												
													
														|  | 
 |  | +            />
 | 
											
												
													
														|  | 
 |  | +          </TheSticky>
 | 
											
												
													
														|  | 
 |  | +        )}
 | 
											
												
													
														|  | 
 |  | +        {/* <img class={styles.bgImg} src={state.details?.coverImg} /> */}
 | 
											
												
													
														|  | 
 |  | +        <div class={styles.musicContent}></div>
 | 
											
												
													
														|  | 
 |  | +        <div class={styles.bg}>
 | 
											
												
													
														|  | 
 |  | +          <div class={styles.alumWrap}>
 | 
											
												
													
														|  | 
 |  | +            {isSingleAlbum.value ? (
 | 
											
												
													
														|  | 
 |  | +              <div class={styles.singleAlbum}>
 | 
											
												
													
														|  |                  <div class={styles.img}>
 |  |                  <div class={styles.img}>
 | 
											
												
													
														|  | 
 |  | +                  {state.details?.buyTimesFlag && (
 | 
											
												
													
														|  | 
 |  | +                    <span class={styles.quota}>
 | 
											
												
													
														|  | 
 |  | +                      限购:{state.details?.buyedTimes}/{state.details?.buyTimes}
 | 
											
												
													
														|  | 
 |  | +                      次
 | 
											
												
													
														|  | 
 |  | +                    </span>
 | 
											
												
													
														|  | 
 |  | +                  )}
 | 
											
												
													
														|  |                    <Image
 |  |                    <Image
 | 
											
												
													
														|  |                      class={styles.image}
 |  |                      class={styles.image}
 | 
											
												
													
														|  |                      width="100%"
 |  |                      width="100%"
 | 
											
										
											
												
													
														|  | @@ -347,181 +330,167 @@ export default defineComponent({
 | 
											
												
													
														|  |                      src={state.details?.coverImg || iconAlbumCover}
 |  |                      src={state.details?.coverImg || iconAlbumCover}
 | 
											
												
													
														|  |                      errorIcon={iconAlbumCover}
 |  |                      errorIcon={iconAlbumCover}
 | 
											
												
													
														|  |                    />
 |  |                    />
 | 
											
												
													
														|  | -                  {/* <span class={styles.numContent}>
 |  | 
 | 
											
												
													
														|  | -                    <img src={iconMenu} class={styles.iconMenu} />共
 |  | 
 | 
											
												
													
														|  | -                    {state.details?.musicNum}首
 |  | 
 | 
											
												
													
														|  | -                  </span> */}
 |  | 
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  | -                  <div class={styles.iconPian}>
 |  | 
 | 
											
												
													
														|  | -                    <Image
 |  | 
 | 
											
												
													
														|  | -                      class={styles.image}
 |  | 
 | 
											
												
													
														|  | -                      width="100%"
 |  | 
 | 
											
												
													
														|  | -                      height="100%"
 |  | 
 | 
											
												
													
														|  | -                      fit="cover"
 |  | 
 | 
											
												
													
														|  | -                      src={state.details?.coverImg || iconAlbumCover}
 |  | 
 | 
											
												
													
														|  | -                    />
 |  | 
 | 
											
												
													
														|  | -                  </div>
 |  | 
 | 
											
												
													
														|  | -                </div>
 |  | 
 | 
											
												
													
														|  | -                <div class={styles.alumDes}>
 |  | 
 | 
											
												
													
														|  | -                  <div class={[styles.alumTitle, 'van-ellipsis']}>
 |  | 
 | 
											
												
													
														|  | -                    {state.details?.name}
 |  | 
 | 
											
												
													
														|  | -                  </div>
 |  | 
 | 
											
												
													
														|  | -                  <div
 |  | 
 | 
											
												
													
														|  | -                    class={[styles.des, 'van-multi-ellipsis--l2']}
 |  | 
 | 
											
												
													
														|  | -                    style={{
 |  | 
 | 
											
												
													
														|  | -                      height: '32px',
 |  | 
 | 
											
												
													
														|  | -                      lineHeight: '16px'
 |  | 
 | 
											
												
													
														|  | -                    }}
 |  | 
 | 
											
												
													
														|  | -                  >
 |  | 
 | 
											
												
													
														|  | -                    {state.details?.describe}
 |  | 
 | 
											
												
													
														|  | -                  </div>
 |  | 
 | 
											
												
													
														|  | 
 |  | +                  <div class={styles.iconPian}></div>
 | 
											
												
													
														|  |                  </div>
 |  |                  </div>
 | 
											
												
													
														|  |                </div>
 |  |                </div>
 | 
											
												
													
														|  | -            </div>
 |  | 
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  | -            <div class={styles.musicList}>
 |  | 
 | 
											
												
													
														|  | -              <Sticky position="top" offsetTop={state.heightV}>
 |  | 
 | 
											
												
													
														|  | -                <Tabs
 |  | 
 | 
											
												
													
														|  | -                  color="var(--van-primary)"
 |  | 
 | 
											
												
													
														|  | -                  background="transparent"
 |  | 
 | 
											
												
													
														|  | -                  lineWidth={20}
 |  | 
 | 
											
												
													
														|  | -                  shrink
 |  | 
 | 
											
												
													
														|  | -                  v-model:active={state.activeTab}
 |  | 
 | 
											
												
													
														|  | -                  onChange={val => {
 |  | 
 | 
											
												
													
														|  | -                    state.activeTab = val
 |  | 
 | 
											
												
													
														|  | -
 |  | 
 | 
											
												
													
														|  | -                    params.page = 1
 |  | 
 | 
											
												
													
														|  | -                    state.list = []
 |  | 
 | 
											
												
													
														|  | -                    FetchList()
 |  | 
 | 
											
												
													
														|  | -                  }}
 |  | 
 | 
											
												
													
														|  | -                >
 |  | 
 | 
											
												
													
														|  | -                  {state.subjectCounts && (
 |  | 
 | 
											
												
													
														|  | -                    <Tab title="声部练习" name="SUBJECT"></Tab>
 |  | 
 | 
											
												
													
														|  | -                  )}
 |  | 
 | 
											
												
													
														|  | -                  {state.musicCounts && (
 |  | 
 | 
											
												
													
														|  | -                    <Tab title="独奏曲目" name="MUSIC"></Tab>
 |  | 
 | 
											
												
													
														|  | -                  )}
 |  | 
 | 
											
												
													
														|  | -                  {state.ensembleCounts && (
 |  | 
 | 
											
												
													
														|  | -                    <Tab title="合奏练习" name="ENSEMBLE"></Tab>
 |  | 
 | 
											
												
													
														|  | -                  )}
 |  | 
 | 
											
												
													
														|  | -                </Tabs>
 |  | 
 | 
											
												
													
														|  | -              </Sticky>
 |  | 
 | 
											
												
													
														|  | 
 |  | +            ) : (
 | 
											
												
													
														|  | 
 |  | +              <Swiper
 | 
											
												
													
														|  | 
 |  | +                watchSlidesProgress={true}
 | 
											
												
													
														|  | 
 |  | +                slidesPerView={'auto'}
 | 
											
												
													
														|  | 
 |  | +                centeredSlides={true}
 | 
											
												
													
														|  | 
 |  | +                modules={[Pagination]}
 | 
											
												
													
														|  | 
 |  | +                pagination={{ clickable: true }}
 | 
											
												
													
														|  | 
 |  | +                onSlideChange={(swiper: any) => {
 | 
											
												
													
														|  | 
 |  | +                  state.details = state.albumList[swiper.activeIndex]
 | 
											
												
													
														|  | 
 |  | +                }}
 | 
											
												
													
														|  | 
 |  | +                onTransitionEnd={() => {
 | 
											
												
													
														|  | 
 |  | +                  params.page = 1
 | 
											
												
													
														|  | 
 |  | +                  state.list = []
 | 
											
												
													
														|  | 
 |  | +                  FetchList()
 | 
											
												
													
														|  | 
 |  | +                }}
 | 
											
												
													
														|  | 
 |  | +              >
 | 
											
												
													
														|  | 
 |  | +                {state.albumList.map((album: any) => (
 | 
											
												
													
														|  | 
 |  | +                  <SwiperSlide>
 | 
											
												
													
														|  | 
 |  | +                    <div class={styles.img}>
 | 
											
												
													
														|  | 
 |  | +                      {album.buyTimesFlag && (
 | 
											
												
													
														|  | 
 |  | +                        <span class={styles.quota}>
 | 
											
												
													
														|  | 
 |  | +                          限购:{album.buyedTimes}/{album.buyTimes}次
 | 
											
												
													
														|  | 
 |  | +                        </span>
 | 
											
												
													
														|  | 
 |  | +                      )}
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -              <div class={styles.alumnList}>
 |  | 
 | 
											
												
													
														|  | -                <List
 |  | 
 | 
											
												
													
														|  | -                  loading={state.loading}
 |  | 
 | 
											
												
													
														|  | -                  finished={state.finished}
 |  | 
 | 
											
												
													
														|  | -                  finished-text={' '}
 |  | 
 | 
											
												
													
														|  | -                  onLoad={FetchList}
 |  | 
 | 
											
												
													
														|  | -                  immediateCheck={false}
 |  | 
 | 
											
												
													
														|  | -                  error={state.isError}
 |  | 
 | 
											
												
													
														|  | -                >
 |  | 
 | 
											
												
													
														|  | -                  {state.list && state.list.length ? (
 |  | 
 | 
											
												
													
														|  | -                    <Song
 |  | 
 | 
											
												
													
														|  | -                      showNumber
 |  | 
 | 
											
												
													
														|  | -                      list={state.list}
 |  | 
 | 
											
												
													
														|  | -                      onDetail={(item: any) => {
 |  | 
 | 
											
												
													
														|  | -                        sessionStorage.setItem(
 |  | 
 | 
											
												
													
														|  | -                          'tool-subject-type',
 |  | 
 | 
											
												
													
														|  | -                          state.activeTab as any
 |  | 
 | 
											
												
													
														|  | -                        )
 |  | 
 | 
											
												
													
														|  | -                        router.push({
 |  | 
 | 
											
												
													
														|  | -                          path: '/music-detail',
 |  | 
 | 
											
												
													
														|  | -                          query: {
 |  | 
 | 
											
												
													
														|  | -                            id: item.id
 |  | 
 | 
											
												
													
														|  | -                            // albumId: route.params.id
 |  | 
 | 
											
												
													
														|  | -                          }
 |  | 
 | 
											
												
													
														|  | -                        })
 |  | 
 | 
											
												
													
														|  | -                      }}
 |  | 
 | 
											
												
													
														|  | -                    />
 |  | 
 | 
											
												
													
														|  | -                  ) : (
 |  | 
 | 
											
												
													
														|  | -                    !state.loading && (
 |  | 
 | 
											
												
													
														|  | -                      <ColResult
 |  | 
 | 
											
												
													
														|  | -                        tips="暂无曲目"
 |  | 
 | 
											
												
													
														|  | -                        classImgSize="SMALL"
 |  | 
 | 
											
												
													
														|  | -                        btnStatus={false}
 |  | 
 | 
											
												
													
														|  | 
 |  | +                      <Image
 | 
											
												
													
														|  | 
 |  | +                        class={styles.image}
 | 
											
												
													
														|  | 
 |  | +                        width="100%"
 | 
											
												
													
														|  | 
 |  | +                        height="100%"
 | 
											
												
													
														|  | 
 |  | +                        fit="cover"
 | 
											
												
													
														|  | 
 |  | +                        src={album?.coverImg || iconAlbumCover}
 | 
											
												
													
														|  | 
 |  | +                        errorIcon={iconAlbumCover}
 | 
											
												
													
														|  |                        />
 |  |                        />
 | 
											
												
													
														|  | -                    )
 |  | 
 | 
											
												
													
														|  | -                  )}
 |  | 
 | 
											
												
													
														|  | -                </List>
 |  | 
 | 
											
												
													
														|  | 
 |  | +                      <div class={styles.iconPian}></div>
 | 
											
												
													
														|  | 
 |  | +                    </div>
 | 
											
												
													
														|  | 
 |  | +                  </SwiperSlide>
 | 
											
												
													
														|  | 
 |  | +                ))}
 | 
											
												
													
														|  | 
 |  | +              </Swiper>
 | 
											
												
													
														|  | 
 |  | +            )}
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +            <div class={styles.alumDes}>
 | 
											
												
													
														|  | 
 |  | +              <div class={[styles.alumTitle, 'van-ellipsis']}>
 | 
											
												
													
														|  | 
 |  | +                {state.details?.name}
 | 
											
												
													
														|  | 
 |  | +              </div>
 | 
											
												
													
														|  | 
 |  | +              <div
 | 
											
												
													
														|  | 
 |  | +                class={[styles.des, 'van-multi-ellipsis--l2']}
 | 
											
												
													
														|  | 
 |  | +                style={{
 | 
											
												
													
														|  | 
 |  | +                  height: '32px',
 | 
											
												
													
														|  | 
 |  | +                  lineHeight: '16px'
 | 
											
												
													
														|  | 
 |  | +                }}
 | 
											
												
													
														|  | 
 |  | +              >
 | 
											
												
													
														|  | 
 |  | +                {state.details?.describe}
 | 
											
												
													
														|  |                </div>
 |  |                </div>
 | 
											
												
													
														|  |              </div>
 |  |              </div>
 | 
											
												
													
														|  | -            {baseState.platformType === 'STUDENT' && state.buy != '1' && (
 |  | 
 | 
											
												
													
														|  | -              <TheSticky position="bottom">
 |  | 
 | 
											
												
													
														|  | -                <div class={styles.btnGroup}>
 |  | 
 | 
											
												
													
														|  | -                  <Button
 |  | 
 | 
											
												
													
														|  | -                    round
 |  | 
 | 
											
												
													
														|  | -                    block
 |  | 
 | 
											
												
													
														|  | -                    disabled={state.details?.musicNum <= 0}
 |  | 
 | 
											
												
													
														|  | -                    color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
 |  | 
 | 
											
												
													
														|  | -                    onClick={() => (state.popupStatus = true)}
 |  | 
 | 
											
												
													
														|  | -                  >
 |  | 
 | 
											
												
													
														|  | -                    购买教程
 |  | 
 | 
											
												
													
														|  | -                  </Button>
 |  | 
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +            {state.buy != '1' && (
 | 
											
												
													
														|  | 
 |  | +              <div class={styles.albumPriceGroup}>
 | 
											
												
													
														|  | 
 |  | +                <div class={styles.albumTimer}>
 | 
											
												
													
														|  | 
 |  | +                  <img src={iconTimer} class={styles.iconTimer} />
 | 
											
												
													
														|  | 
 |  | +                  <span>有效期:{state.details?.purchaseNum || 0}天</span>
 | 
											
												
													
														|  |                  </div>
 |  |                  </div>
 | 
											
												
													
														|  | -              </TheSticky>
 |  | 
 | 
											
												
													
														|  | -            )}
 |  | 
 | 
											
												
													
														|  | -          </>
 |  | 
 | 
											
												
													
														|  | -        )}
 |  | 
 | 
											
												
													
														|  | 
 |  | +                <div class={styles.albumPriceList}>
 | 
											
												
													
														|  | 
 |  | +                  {(state.details?.originalPrice || 0) >
 | 
											
												
													
														|  | 
 |  | +                    (state.details?.actualPrice || 0) && (
 | 
											
												
													
														|  | 
 |  | +                    <span class={styles.originPrice}>
 | 
											
												
													
														|  | 
 |  | +                      原价:¥{moneyFormat(state.details?.originalPrice || 0)}
 | 
											
												
													
														|  | 
 |  | +                    </span>
 | 
											
												
													
														|  | 
 |  | +                  )}
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -        <Popup
 |  | 
 | 
											
												
													
														|  | -          v-model:show={state.popupStatus}
 |  | 
 | 
											
												
													
														|  | -          position="bottom"
 |  | 
 | 
											
												
													
														|  | -          round
 |  | 
 | 
											
												
													
														|  | -          zIndex={9999}
 |  | 
 | 
											
												
													
														|  | -          safe-area-inset-bottom
 |  | 
 | 
											
												
													
														|  | -          closeable={false}
 |  | 
 | 
											
												
													
														|  | -          class={styles.popupStatus}
 |  | 
 | 
											
												
													
														|  | -          onClose={() => (state.popupStatus = false)}
 |  | 
 | 
											
												
													
														|  | -          // onClosed={() => (this.openStatus = false)}
 |  | 
 | 
											
												
													
														|  | -        >
 |  | 
 | 
											
												
													
														|  | -          <div class={styles.bottom_function}>
 |  | 
 | 
											
												
													
														|  | -            <i
 |  | 
 | 
											
												
													
														|  | -              class={styles.iconClose}
 |  | 
 | 
											
												
													
														|  | -              onClick={() => (state.popupStatus = false)}
 |  | 
 | 
											
												
													
														|  | -            ></i>
 |  | 
 | 
											
												
													
														|  | -            <img src={iconRightTop} class={styles.iconRightTop} />
 |  | 
 | 
											
												
													
														|  | -            <div class={styles.memberMeal}>
 |  | 
 | 
											
												
													
														|  | -              <div class={styles.titleMeal}>
 |  | 
 | 
											
												
													
														|  | -                <span>请选择教程购买周期</span>
 |  | 
 | 
											
												
													
														|  | 
 |  | +                  <span class={styles.currentPrice}>
 | 
											
												
													
														|  | 
 |  | +                    <span>¥{moneyFormat(state.details?.actualPrice || 0)}</span>
 | 
											
												
													
														|  | 
 |  | +                  </span>
 | 
											
												
													
														|  | 
 |  | +                </div>
 | 
											
												
													
														|  |                </div>
 |  |                </div>
 | 
											
												
													
														|  | 
 |  | +            )}
 | 
											
												
													
														|  | 
 |  | +          </div>
 | 
											
												
													
														|  | 
 |  | +        </div>
 | 
											
												
													
														|  |  
 |  |  
 | 
											
												
													
														|  | -              <div class={styles['system-list']}>
 |  | 
 | 
											
												
													
														|  | -                {state.buyList.map((item: any) => (
 |  | 
 | 
											
												
													
														|  | -                  <div
 |  | 
 | 
											
												
													
														|  | -                    class={[
 |  | 
 | 
											
												
													
														|  | -                      styles['system-item'],
 |  | 
 | 
											
												
													
														|  | -                      item.status && styles.active
 |  | 
 | 
											
												
													
														|  | -                    ]}
 |  | 
 | 
											
												
													
														|  | -                    onClick={() => {
 |  | 
 | 
											
												
													
														|  | -                      state.buyList.forEach((item: any) => {
 |  | 
 | 
											
												
													
														|  | -                        item.status = false
 |  | 
 | 
											
												
													
														|  | -                      })
 |  | 
 | 
											
												
													
														|  | -                      item.status = true
 |  | 
 | 
											
												
													
														|  | -                      state.selectMember = item
 |  | 
 | 
											
												
													
														|  | -                    }}
 |  | 
 | 
											
												
													
														|  | -                  >
 |  | 
 | 
											
												
													
														|  | -                    <p class={styles.title}>{item.purchaseCycle}个月</p>
 |  | 
 | 
											
												
													
														|  | -                    <p class={styles.price}>
 |  | 
 | 
											
												
													
														|  | -                      <span>¥</span>
 |  | 
 | 
											
												
													
														|  | -                      {moneyFormat(item.salePrice, '0,0[.]00')}
 |  | 
 | 
											
												
													
														|  | -                    </p>
 |  | 
 | 
											
												
													
														|  | -                    {item.salePrice < item.costPrice && (
 |  | 
 | 
											
												
													
														|  | -                      <del class={styles.originalPrice}>
 |  | 
 | 
											
												
													
														|  | -                        ¥{moneyFormat(item.costPrice, '0,0[.]00')}
 |  | 
 | 
											
												
													
														|  | -                      </del>
 |  | 
 | 
											
												
													
														|  | -                    )}
 |  | 
 | 
											
												
													
														|  | -                  </div>
 |  | 
 | 
											
												
													
														|  | -                ))}
 |  | 
 | 
											
												
													
														|  | -              </div>
 |  | 
 | 
											
												
													
														|  | -            </div>
 |  | 
 | 
											
												
													
														|  | 
 |  | +        <div class={styles.musicList}>
 | 
											
												
													
														|  | 
 |  | +          <Sticky position="top" offsetTop={state.heightV}>
 | 
											
												
													
														|  | 
 |  | +            <Tabs
 | 
											
												
													
														|  | 
 |  | +              color="var(--van-primary)"
 | 
											
												
													
														|  | 
 |  | +              background="transparent"
 | 
											
												
													
														|  | 
 |  | +              lineWidth={20}
 | 
											
												
													
														|  | 
 |  | +              shrink
 | 
											
												
													
														|  | 
 |  | +              v-model:active={state.activeTab}
 | 
											
												
													
														|  | 
 |  | +              onChange={val => {
 | 
											
												
													
														|  | 
 |  | +                state.activeTab = val
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +                params.page = 1
 | 
											
												
													
														|  | 
 |  | +                state.list = []
 | 
											
												
													
														|  | 
 |  | +                FetchList()
 | 
											
												
													
														|  | 
 |  | +              }}
 | 
											
												
													
														|  | 
 |  | +            >
 | 
											
												
													
														|  | 
 |  | +              {state.subjectCounts && (
 | 
											
												
													
														|  | 
 |  | +                <Tab title="声部练习" name="SUBJECT"></Tab>
 | 
											
												
													
														|  | 
 |  | +              )}
 | 
											
												
													
														|  | 
 |  | +              {state.musicCounts && <Tab title="独奏曲目" name="MUSIC"></Tab>}
 | 
											
												
													
														|  | 
 |  | +              {state.ensembleCounts && (
 | 
											
												
													
														|  | 
 |  | +                <Tab title="合奏练习" name="ENSEMBLE"></Tab>
 | 
											
												
													
														|  | 
 |  | +              )}
 | 
											
												
													
														|  | 
 |  | +            </Tabs>
 | 
											
												
													
														|  | 
 |  | +          </Sticky>
 | 
											
												
													
														|  | 
 |  | +
 | 
											
												
													
														|  | 
 |  | +          <div class={styles.alumnList}>
 | 
											
												
													
														|  | 
 |  | +            <List
 | 
											
												
													
														|  | 
 |  | +              loading={state.loading}
 | 
											
												
													
														|  | 
 |  | +              finished={state.finished}
 | 
											
												
													
														|  | 
 |  | +              finished-text={' '}
 | 
											
												
													
														|  | 
 |  | +              onLoad={FetchList}
 | 
											
												
													
														|  | 
 |  | +              immediateCheck={false}
 | 
											
												
													
														|  | 
 |  | +              error={state.isError}
 | 
											
												
													
														|  | 
 |  | +            >
 | 
											
												
													
														|  | 
 |  | +              {state.list && state.list.length ? (
 | 
											
												
													
														|  | 
 |  | +                <Song
 | 
											
												
													
														|  | 
 |  | +                  showNumber
 | 
											
												
													
														|  | 
 |  | +                  list={state.list}
 | 
											
												
													
														|  | 
 |  | +                  onDetail={(item: any) => {
 | 
											
												
													
														|  | 
 |  | +                    sessionStorage.setItem(
 | 
											
												
													
														|  | 
 |  | +                      'tool-subject-type',
 | 
											
												
													
														|  | 
 |  | +                      state.activeTab as any
 | 
											
												
													
														|  | 
 |  | +                    )
 | 
											
												
													
														|  | 
 |  | +                    router.push({
 | 
											
												
													
														|  | 
 |  | +                      path: '/music-detail',
 | 
											
												
													
														|  | 
 |  | +                      query: {
 | 
											
												
													
														|  | 
 |  | +                        id: item.id
 | 
											
												
													
														|  | 
 |  | +                        // albumId: route.params.id
 | 
											
												
													
														|  | 
 |  | +                      }
 | 
											
												
													
														|  | 
 |  | +                    })
 | 
											
												
													
														|  | 
 |  | +                  }}
 | 
											
												
													
														|  | 
 |  | +                />
 | 
											
												
													
														|  | 
 |  | +              ) : (
 | 
											
												
													
														|  | 
 |  | +                !state.loading && (
 | 
											
												
													
														|  | 
 |  | +                  <ColResult
 | 
											
												
													
														|  | 
 |  | +                    tips="暂无曲目"
 | 
											
												
													
														|  | 
 |  | +                    classImgSize="SMALL"
 | 
											
												
													
														|  | 
 |  | +                    btnStatus={false}
 | 
											
												
													
														|  | 
 |  | +                  />
 | 
											
												
													
														|  | 
 |  | +                )
 | 
											
												
													
														|  | 
 |  | +              )}
 | 
											
												
													
														|  | 
 |  | +            </List>
 | 
											
												
													
														|  | 
 |  | +          </div>
 | 
											
												
													
														|  | 
 |  | +        </div>
 | 
											
												
													
														|  | 
 |  | +        {baseState.platformType === 'STUDENT' && state.buy != '1' && (
 | 
											
												
													
														|  | 
 |  | +          <TheSticky position="bottom">
 | 
											
												
													
														|  |              <div class={styles.btnGroup}>
 |  |              <div class={styles.btnGroup}>
 | 
											
												
													
														|  | -              <Button round block class={styles.btn} onClick={onSubmit}>
 |  | 
 | 
											
												
													
														|  | -                点击购买
 |  | 
 | 
											
												
													
														|  | 
 |  | +              <Button
 | 
											
												
													
														|  | 
 |  | +                round
 | 
											
												
													
														|  | 
 |  | +                block
 | 
											
												
													
														|  | 
 |  | +                disabled={state.details?.musicNum <= 0 && !state.hasBuyStatus}
 | 
											
												
													
														|  | 
 |  | +                color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
 | 
											
												
													
														|  | 
 |  | +                onClick={onSubmit}
 | 
											
												
													
														|  | 
 |  | +              >
 | 
											
												
													
														|  | 
 |  | +                购买教程
 | 
											
												
													
														|  |                </Button>
 |  |                </Button>
 | 
											
												
													
														|  |              </div>
 |  |              </div>
 | 
											
												
													
														|  | -          </div>
 |  | 
 | 
											
												
													
														|  | -        </Popup>
 |  | 
 | 
											
												
													
														|  | 
 |  | +          </TheSticky>
 | 
											
												
													
														|  | 
 |  | +        )}
 | 
											
												
													
														|  |        </div>
 |  |        </div>
 | 
											
												
													
														|  |      )
 |  |      )
 | 
											
												
													
														|  |    }
 |  |    }
 |