Merge branch 'share-member' into dev

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/student/live-class/live-detail.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
       courseId: query.classId,
       live: {} as any,
       shareStatus: false,
-      shareUrl: '',
+      shareUrl: ''
     }
   },
   computed: {
@@ -263,11 +263,13 @@ export default defineComponent({
   render() {
     return (
       <div class={[styles['live-detail'], 'mb12']}>
-        <ColHeader v-slots={{
-          right: () => (
-            <img src={iconShare} onClick={() => this.shareStatus = true} />
-          )
-        }} />
+        <ColHeader
+          v-slots={{
+            right: () => (
+              <img src={iconShare} onClick={() => (this.shareStatus = true)} />
+            )
+          }}
+        />
         <UserDetail userInfo={this.userInfo} showBuy={false} />
         <SectionDetail border>
           <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>

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

@@ -37,6 +37,20 @@
     right: -6px;
     top: 8px;
   }
+
+  .albumType {
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
+    box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
+    border-radius: 10px 0px 10px 0px;
+    font-size: 12px;
+    padding: 0 6px;
+    line-height: 20px;
+    color: #ffffff;
+    z-index: 9;
+  }
 }
 .detailContent {
   background-color: white;
@@ -184,6 +198,23 @@
     margin-left: 26px;
   }
 }
+.albumTips {
+  background: rgba(0, 0, 0, 0.32);
+  border-radius: 16px;
+  // opacity: 0.32;
+  padding: 8px 12px 6px 10px;
+  margin-top: 12px;
+  font-size: 12px;
+  // line-height: 17px;
+  color: #999999;
+  display: flex;
+  justify-content: space-between;
+  .albumPrice {
+    font-size: 14px;
+    font-weight: bold;
+    color: #ffaa00;
+  }
+}
 .alumnContainer {
   position: relative;
   padding: 0 16px;

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

@@ -3,7 +3,7 @@ import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
 import { postMessage } from '@/helpers/native-message'
-import { Button, Icon, Image, List, NavBar, Sticky } from 'vant'
+import { Button, Dialog, Icon, Image, List, NavBar, Sticky } from 'vant'
 // import classNames from 'classnames'
 // import Footer from '../album/footer'
 // import FavoriteIcon from '../album/favorite.svg'
@@ -22,6 +22,9 @@ import Song from '../component/song'
 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'
+import { orderStatus } from '@/views/order-detail/orderStatus'
 
 const noop = () => {}
 
@@ -122,6 +125,82 @@ export default defineComponent({
       favoriteLoading.value = false
     }
 
+    const onBuy = async () => {
+      const album = albumDetail.value
+      orderStatus.orderObject.orderType = 'ALBUM'
+      orderStatus.orderObject.orderName = album.albumName
+      orderStatus.orderObject.orderDesc = album.albumName
+      orderStatus.orderObject.actualPrice = album.albumPrice
+      // orderStatus.orderObject.recomUserId = this.recomUserId
+      // orderStatus.orderObject.activityId = this.activityId
+      orderStatus.orderObject.orderNo = ''
+      orderStatus.orderObject.orderList = [
+        {
+          orderType: 'ALBUM',
+          goodsName: album.albumName,
+          price: album.albumPrice,
+          ...album
+        }
+      ]
+
+      const res = await request.post('/api-student/userOrder/getPendingOrder', {
+        data: {
+          goodType: 'ALBUM',
+          bizId: album.id
+        }
+      })
+
+      const result = res.data
+      if (result) {
+        Dialog.confirm({
+          title: '提示',
+          message: '您有一个未支付的订单，是否继续支付？',
+          confirmButtonColor: '#269a93',
+          cancelButtonText: '取消订单',
+          confirmButtonText: '继续支付'
+        })
+          .then(async () => {
+            orderStatus.orderObject.orderNo = result.orderNo
+            orderStatus.orderObject.actualPrice = result.actualPrice
+            orderStatus.orderObject.discountPrice = result.discountPrice
+            routerTo()
+          })
+          .catch(() => {
+            Dialog.close()
+            // 只用取消订单，不用做其它处理
+            cancelPayment(result.orderNo)
+          })
+      } else {
+        routerTo()
+      }
+      // this.$router.push({
+      //   path: '/orderDetail',
+      //   query: {
+      //     orderType: 'VIP'
+      //   }
+      // })
+    }
+    const routerTo = () => {
+      const album = albumDetail.value
+      router.push({
+        path: '/orderDetail',
+        query: {
+          orderType: 'ALBUM',
+          album: album.id
+        }
+      })
+    }
+    const cancelPayment = async (orderNo: string) => {
+      try {
+        await request.post('/api-student/userOrder/orderCancel', {
+          data: {
+            orderNo
+          }
+        })
+        // this.routerTo()
+      } catch {}
+    }
+
     return () => {
       return (
         <div class={styles.detail}>
@@ -144,6 +223,12 @@ export default defineComponent({
           <div class={styles.bg}>
             <div class={styles.alumWrap}>
               <div class={styles.img}>
+                {albumDetail.value?.paymentType && (
+                  <span class={styles.albumType}>
+                    {albumDetail.value?.paymentType === 'FREE' && '免费'}
+                    {albumDetail.value?.paymentType === 'CHARGE' && '付费'}
+                  </span>
+                )}
                 <Image
                   class={styles.image}
                   width="100%"
@@ -174,14 +259,23 @@ export default defineComponent({
             </div>
             <div class={styles.alumCollect}>
               <img src={IconPan} />
-              <span>共{albumDetail.value?.musicSheetCount}首曲目{state.platformType}</span>
+              <span>
+                共{albumDetail.value?.musicSheetCount}首曲目{state.platformType}
+              </span>
               <div
-                  class={styles.right}
-                  onClick={() => toggleFavorite(albumDetail.value?.id)}
-                >
-                  <img src={favorited.value ? iStart : oStart} />
-                  <span>{albumFavoriteCount.value}人收藏</span>
-                </div>
+                class={styles.right}
+                onClick={() => toggleFavorite(albumDetail.value?.id)}
+              >
+                <img src={favorited.value ? iStart : oStart} />
+                <span>{albumFavoriteCount.value}人收藏</span>
+              </div>
+            </div>
+
+            <div class={styles.albumTips}>
+              <span>此专辑为收费类型，购买即可自由练习该专辑</span>
+              <span class={styles.albumPrice}>
+                ¥{moneyFormat(albumDetail.value?.albumPrice)}
+              </span>
             </div>
           </div>
           <div class={styles.alumnContainer}>
@@ -237,6 +331,42 @@ export default defineComponent({
                 </>
               )}
           </div>
+
+          {albumDetail.value?.paymentType === 'CHARGE' && (
+            <ColSticky position="bottom" background="white">
+              <div
+                class={[
+                  'btnGroup',
+                  albumDetail.value?.musicPaymentTypes.includes('CHARGE') &&
+                    'btnMore'
+                ]}
+                style={{ paddingTop: '12px' }}
+              >
+                <Button
+                  block
+                  round
+                  type="primary"
+                  style={{ fontSize: '16px' }}
+                  onClick={onBuy}
+                >
+                  购买专辑
+                </Button>
+                {albumDetail.value?.musicPaymentTypes.includes('VIP') && (
+                  <Button
+                    block
+                    round
+                    type="primary"
+                    style={{ fontSize: '16px' }}
+                    onClick={() => {
+                      router.push('/memberCenter')
+                    }}
+                  >
+                    开通会员
+                  </Button>
+                )}
+              </div>
+            </ColSticky>
+          )}
         </div>
       )
     }

src/views/music/album/item.module.less

@@ -4,6 +4,19 @@
   background-color: var(--music-list-item-background-color);
   border-radius: 10px;
   display: flex;
+  position: relative;
+  .albumType {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
+    box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
+    border-radius: 10px 0px 10px 0px;
+    font-size: 12px;
+    padding: 0 6px;
+    line-height: 20px;
+    color: #ffffff;
+  }
   .img {
     width: 94px;
     height: 94px;

src/views/music/album/item.tsx

@@ -20,6 +20,13 @@ export default defineComponent({
         onClick={() => router.push('/music-album-detail/' + data.id)}
       >
         <Image class={styles.img} src={data.albumCoverUrl} />
+        {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,6 +57,12 @@ export default defineComponent({
                   onClick={() => router.push('/music-album-detail/' + item.id)}
                 >
                   <div class={styles.main}>
+                    {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>人收藏

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

@@ -37,6 +37,19 @@
     // overflow: hidden;
     width: 94px;
     flex-shrink: 0;
+    .albumType {
+      position: absolute;
+      left: 0;
+      top: 0;
+      background: linear-gradient(180deg, #ff8900 0%, #ff5100 100%);
+      box-shadow: 0px 1px 2px 0px rgba(150, 13, 0, 0.11);
+      border-radius: 10px 0px 10px 0px;
+      font-size: 12px;
+      padding: 0 6px;
+      line-height: 20px;
+      color: #ffffff;
+      z-index: 9;
+    }
     .main {
       position: relative;
       .favorite {

src/views/order-detail/index.tsx

@@ -28,6 +28,7 @@ import OrderPinao from './order-pinao'
 import { getMusicDetail } from '@/student/trade/tradeOrder'
 import OrderActive from './order-active'
 import UseCoupon from './use-coupons'
+import OrderAlbum from './order-album'
 
 export default defineComponent({
   name: 'order-detail',
@@ -240,6 +241,8 @@ export default defineComponent({
                 return <OrderPinao item={item} />
               } else if (item.orderType === 'ACTI_REGIST') {
                 return <OrderActive item={item} />
+              } else if (item.orderType === 'ALBUM') {
+                return <OrderAlbum item={item} />
               }
             })}
 

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

@@ -0,0 +1,81 @@
+.item {
+  background-color: var(--music-list-item-background-color);
+  // margin: 10px 14px;
+  margin-bottom: 12px;
+  padding: 10px;
+  border-radius: 9px;
+  .header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--music-list-item-border-color);
+    padding-bottom: 12px;
+    .mate {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      .icon {
+        width: 40px;
+        height: 40px;
+      }
+      .info {
+        margin-left: 14px;
+        > h4 {
+          color: var(--music-list-item-title-color);
+          font-size: 14px;
+          font-weight: 600;
+        }
+        > p {
+          color: var(--music-list-item-mate-color);
+          line-height: 17px;
+        }
+      }
+    }
+    .btn {
+      width: 54px;
+      height: 22px;
+      font-size: 12px;
+      border-radius: 11px;
+      padding: 0;
+      border: none;
+      &.vip {
+        background-color: var(--music-list-item-vip-bg);
+        color: var(--music-list-item-vip-color);
+      }
+      &.free {
+        background-color: var(--music-list-item-free-bg);
+        color: var(--music-list-item-free-color);
+      }
+      &.charge {
+        background-color: var(--music-list-item-charge-bg);
+        color: var(--music-list-item-charge-color);
+      }
+    }
+  }
+  .footer {
+    display: flex;
+    padding-top: 8px;
+    align-items: center;
+    justify-content: space-between;
+    .user {
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+      .userIcon {
+        width: 20px;
+        height: 20px;
+        margin-right: 8px;
+      }
+    }
+    .favorite {
+      font-size: 16px;
+    }
+    .tags {
+      display: flex;
+      align-items: center;
+      --van-tag-default-color: #fff1de;
+      --van-tag-text-color: #ff8c00;
+    }
+  }
+
+  --van-button-disabled-opacity: 1;
+}

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

@@ -0,0 +1,29 @@
+import { Button, Icon, Image, Tag } from 'vant'
+import classNames from 'classnames'
+import MusicIcon from '@/views/music/list/icons/music-icon.png'
+import InitUserIcon from '@/views/music/list/icons/init-user-icon.png'
+// import FavoriteIcon from '@/student/music/album/favorite.svg'
+// import FavoritedIcon from '@/student/music/album/favorited.svg'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import Item from '@/views/music/album/item'
+
+const chargeTypes = {
+  CHARGE: '点播',
+  FREE: '免费',
+  VIP: 'VIP'
+}
+
+export default defineComponent({
+  name: 'OrderMusic',
+  props: {
+    item: {
+      type: Object,
+      default: {}
+    }
+  },
+  render() {
+    const item = this.item
+    return <Item data={item} style={{ margin: '0 0 10px' }} />
+  }
+})

src/views/order-detail/orderStatus.ts

@@ -12,6 +12,7 @@ type orderType =
   | 'MUSIC'
   | 'PINAO_ROOM'
   | 'ACTI_REGIST'
+  | 'ALBUM'
   | ''
 
 const original = () => {
@@ -113,6 +114,12 @@ export const orderInfos = () => {
         actualPrice: item.actualPrice || 0,
         clientType: state.platformType
       }
+    } else if (item.orderType === 'ALBUM') {
+      params.bizContent = {
+        id: item.id,
+        actualPrice: item.actualPrice || 0,
+        clientType: state.platformType
+      }
     } else if (item.orderType === 'PINAO_ROOM') {
       params.bizContent = item.id
     } else if (item.orderType === 'ACTI_REGIST') {