专辑更新

src/router/routes-common.ts

@@ -174,6 +174,13 @@ export const router = [
     }
   },
   {
+    path: '/look-album-list',
+    component: () => import('@/views/music/look-album-list'),
+    meta: {
+      title: '查看专辑'
+    }
+  },
+  {
     path: '/videoClass',
     name: 'videoClass',
     component: () => import('@/views/video-class/index'),

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

@@ -23,6 +23,7 @@ import ColResult from '@/components/col-result'
 import MusicGrid from '../component/music-grid'
 import { useEventTracking } from '@/helpers/hooks'
 import ColSticky from '@/components/col-sticky'
+import { moneyFormat } from '@/helpers/utils'
 
 const noop = () => {}
 
@@ -123,6 +124,49 @@ export default defineComponent({
       favoriteLoading.value = false
     }
 
+    const onBuy = async () => {
+      // const member: any = this.selectMember
+      // // 判断是否有会员
+      // const startTime = this.userInfo.memberRankSettingId
+      //   ? dayjs(this.userInfo.membershipEndTime).toDate()
+      //   : new Date()
+      // let endTime = new Date()
+      // if (member.period === 'MONTH') {
+      //   endTime = dayjs(startTime).add(1, 'month').toDate()
+      // } else if (member.period === 'QUARTERLY') {
+      //   endTime = dayjs(startTime).add(3, 'month').toDate()
+      // } else if (member.period === 'YEAR_HALF') {
+      //   endTime = dayjs(startTime).add(6, 'month').toDate()
+      // } else if (member.period === 'YEAR') {
+      //   endTime = dayjs(startTime).add(1, 'year').toDate()
+      // }
+      // orderStatus.orderObject.orderType = 'VIP'
+      // orderStatus.orderObject.orderName = '小酷Ai' + member.title
+      // orderStatus.orderObject.orderDesc = '小酷Ai' + member.title
+      // orderStatus.orderObject.actualPrice = this.calcSalePrice(member)
+      // orderStatus.orderObject.recomUserId = this.recomUserId
+      // orderStatus.orderObject.activityId = this.activityId
+      // orderStatus.orderObject.orderNo = ''
+      // orderStatus.orderObject.orderList = [
+      //   {
+      //     orderType: 'VIP',
+      //     goodsName: '小酷Ai' + member.title,
+      //     id: member.id,
+      //     title: member.title,
+      //     price: this.calcSalePrice(member),
+      //     startTime: dayjs(startTime).format('YYYY-MM-DD'),
+      //     endTime: dayjs(endTime).format('YYYY-MM-DD'),
+      //     recomUserId: this.recomUserId
+      //   }
+      // ]
+      // this.$router.push({
+      //   path: '/orderDetail',
+      //   query: {
+      //     orderType: 'VIP'
+      //   }
+      // })
+    }
+
     return () => {
       return (
         <div class={styles.detail}>
@@ -145,7 +189,12 @@ export default defineComponent({
           <div class={styles.bg}>
             <div class={styles.alumWrap}>
               <div class={styles.img}>
-                <span class={styles.albumType}>付费</span>
+                {albumDetail.value?.paymentType && (
+                  <span class={styles.albumType}>
+                    {albumDetail.value?.paymentType === 'FREE' && '免费'}
+                    {albumDetail.value?.paymentType === 'CHARGE' && '付费'}
+                  </span>
+                )}
                 <Image
                   class={styles.image}
                   width="100%"
@@ -190,7 +239,9 @@ export default defineComponent({
 
             <div class={styles.albumTips}>
               <span>此专辑为收费类型，购买即可自由练习该专辑</span>
-              <span class={styles.albumPrice}>¥19.9</span>
+              <span class={styles.albumPrice}>
+                ¥{moneyFormat(albumDetail.value?.albumPrice)}
+              </span>
             </div>
           </div>
           <div class={styles.alumnContainer}>
@@ -247,24 +298,41 @@ export default defineComponent({
               )}
           </div>
 
-          <ColSticky position="bottom" background="white">
-            <div class={['btnGroup', 'btnMore']} style={{ paddingTop: '12px' }}>
-              <Button block round type="primary" style={{ fontSize: '16px' }}>
-                购买专辑
-              </Button>
-              <Button
-                block
-                round
-                type="primary"
-                style={{ fontSize: '16px' }}
-                onClick={() => {
-                  router.push('/memberCenter')
-                }}
+          {albumDetail.value?.paymentType === 'CHARGE' && (
+            <ColSticky position="bottom" background="white">
+              <div
+                class={[
+                  'btnGroup',
+                  albumDetail.value?.musicPaymentTypes.includes('CHARGE') &&
+                    'btnMore'
+                ]}
+                style={{ paddingTop: '12px' }}
               >
-                开通会员
-              </Button>
-            </div>
-          </ColSticky>
+                <Button
+                  block
+                  round
+                  type="primary"
+                  style={{ fontSize: '16px' }}
+                  onClick={onBuy}
+                >
+                  购买专辑
+                </Button>
+                {albumDetail.value?.musicPaymentTypes.includes('CHARGE') && (
+                  <Button
+                    block
+                    round
+                    type="primary"
+                    style={{ fontSize: '16px' }}
+                    onClick={() => {
+                      router.push('/memberCenter')
+                    }}
+                  >
+                    开通会员
+                  </Button>
+                )}
+              </div>
+            </ColSticky>
+          )}
         </div>
       )
     }

src/views/music/album/item.tsx

@@ -20,7 +20,13 @@ export default defineComponent({
         onClick={() => router.push('/music-album-detail/' + data.id)}
       >
         <Image class={styles.img} src={data.albumCoverUrl} />
-        <span class={styles.albumType}>付费</span>
+        {data.paymentType && (
+          <span class={styles.albumType}>
+            {data.paymentType === 'FREE' && '免费'}
+            {data.paymentType === 'CHARGE' && '付费'}
+          </span>
+        )}
+
         <div class={styles.content}>
           <h4 class="van-ellipsis">{data.albumName}</h4>
           <p class="van-multi-ellipsis--l3">{data.albumDesc}</p>

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

@@ -79,6 +79,10 @@
   }
 }
 
+.mb100 {
+  margin-bottom: 100px;
+}
+
 .pImg {
   width: 50px;
   height: 50px;

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

@@ -121,6 +121,8 @@ export default defineComponent({
                     />
                   )}
 
+                  {n.albumNums > 0 && '专'}
+
                   <span class={[styles.title, 'van-ellipsis']}>
                     {n.musicSheetName}
                   </span>
@@ -165,7 +167,12 @@ export default defineComponent({
             </div>
           ))}
 
-          <Popup v-model:show={isMore.value} position="bottom" round teleport='body'>
+          <Popup
+            v-model:show={isMore.value}
+            position="bottom"
+            round
+            teleport="body"
+          >
             <CellGroup border={false}>
               <Cell
                 center
@@ -274,7 +281,7 @@ export default defineComponent({
                 title={'小酷Ai练习'}
                 isLink
                 center
-                style={{ marginBottom: '100px' }}
+                class={moreData.value?.albumNums <= 0 && styles.mb100}
                 onClick={() => {
                   isMore.value = false
                   emit('detail', moreData.value)
@@ -287,6 +294,32 @@ export default defineComponent({
                   )
                 }}
               />
+              {moreData.value?.albumNums > 0 && (
+                <Cell
+                  border={false}
+                  size="large"
+                  title={'查看所在专辑列表'}
+                  isLink
+                  center
+                  class={styles.mb100}
+                  onClick={() => {
+                    isMore.value = false
+                    router.push({
+                      path: '/look-album-list',
+                      query: {
+                        id: moreData.value?.id
+                      }
+                    })
+                  }}
+                  v-slots={{
+                    icon: () => (
+                      <div class={styles.shareIcon}>
+                        <Image src={getAssetsHomeFile('icon_album.png')} />
+                      </div>
+                    )
+                  }}
+                />
+              )}
             </CellGroup>
           </Popup>
 

src/views/music/look-album-list/index.tsx

@@ -0,0 +1,25 @@
+import { defineComponent } from 'vue'
+import Album from '../album'
+
+export default defineComponent({
+  name: 'look-album-list',
+  // musicId
+  data() {
+    const query = this.$route.query
+    return {
+      id: query.id
+    }
+  },
+  render() {
+    return (
+      <>
+        <Album
+          hideSearch={true}
+          defauleParams={{
+            musicId: this.id
+          }}
+        />
+      </>
+    )
+  }
+})

src/views/music/songbook/album.tsx

@@ -57,7 +57,12 @@ export default defineComponent({
                   onClick={() => router.push('/music-album-detail/' + item.id)}
                 >
                   <div class={styles.main}>
-                    <span class={styles.albumType}>付费</span>
+                    {item.paymentType && (
+                      <span class={styles.albumType}>
+                        {item.paymentType === 'FREE' && '免费'}
+                        {item.paymentType === 'CHARGE' && '付费'}
+                      </span>
+                    )}
                     <Image class={styles.img} src={item.albumCoverUrl} />
                     <p class={styles.favorite}>
                       <span>{item.albumFavoriteCount}</span>人收藏