更新

src/tenant/music/music-detail/new-index.tsx

@@ -861,106 +861,115 @@ export default defineComponent({
           )}
         </div>
 
-        {musicDetail.value?.id &&
-          (!buyState.value.hasTenantAlbum || buyState.value.play) && (
-            <TheSticky position="bottom">
-              <div style={{ backgroundColor: '#fff' }}>
-                <div class={styles.videoOperation}>
-                  {audioFileUrl.value && (
-                    <>
-                      {!buyState.value.play &&
-                        freeRate.value != 100 &&
-                        freeRate.value != 0 && (
-                          <div class={[styles.audition]}>
-                            <img src={iconListen} />
-                            <span>每首曲目可试听{freeRate.value}%</span>
-                          </div>
-                        )}
+        {musicDetail.value?.id && (
+          <TheSticky position="bottom">
+            <div style={{ backgroundColor: '#fff' }}>
+              <div class={styles.videoOperation}>
+                {audioFileUrl.value && (
+                  <>
+                    {!buyState.value.play &&
+                      freeRate.value != 100 &&
+                      freeRate.value != 0 && (
+                        <div class={[styles.audition]}>
+                          <img src={iconListen} />
+                          <span>每首曲目可试听{freeRate.value}%</span>
+                        </div>
+                      )}
 
-                      <div class={[styles.audio, styles.collectCell]}>
-                        <audio id="player" controls ref={audio}>
-                          <source src={audioFileUrl.value} type="audio/mp3" />
-                        </audio>
-                      </div>
-                    </>
-                  )}
-                </div>
+                    <div class={[styles.audio, styles.collectCell]}>
+                      <audio id="player" controls ref={audio}>
+                        <source src={audioFileUrl.value} type="audio/mp3" />
+                      </audio>
+                    </div>
+                  </>
+                )}
+              </div>
 
-                <div ref={footers} class={styles.footers}>
-                  {/* 判断是否是免费的，或者已经购买过 */}
-                  {buyState.value.play ? (
-                    <Button
-                      round
-                      block
-                      type="primary"
-                      color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
-                      onClick={() => {
-                        const throttleFn = useThrottleFn(() => {
-                          player.value && player.value.stop()
-                          const item: any = partColumns.value.find(
-                            (c: any) => c.value === staffData.partIndex
-                          )
-                          const index = staffData.tempPartList.findIndex(
-                            (i: any) => i.track === item?.track
-                          )
-                          musicBuy(musicDetail.value, () => {}, {
-                            'part-index': index || 0,
-                            sett: staff.radio,
-                            // 1：忽略系统节拍器
-                            ignoreSysMetronome:
-                              route.query.subjectType === 'MUSIC' ? 1 : 0
-                          })
-                        }, 500)
+              <div ref={footers} class={styles.footers}>
+                {/* 判断是否是免费的，或者已经购买过 */}
+                {buyState.value.play ? (
+                  <Button
+                    round
+                    block
+                    type="primary"
+                    color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                    onClick={() => {
+                      const throttleFn = useThrottleFn(() => {
+                        player.value && player.value.stop()
+                        const item: any = partColumns.value.find(
+                          (c: any) => c.value === staffData.partIndex
+                        )
+                        const index = staffData.tempPartList.findIndex(
+                          (i: any) => i.track === item?.track
+                        )
+                        musicBuy(musicDetail.value, () => {}, {
+                          'part-index': index || 0,
+                          sett: staff.radio,
+                          // 1：忽略系统节拍器
+                          ignoreSysMetronome:
+                            route.query.subjectType === 'MUSIC' ? 1 : 0
+                        })
+                      }, 500)
 
-                        throttleFn()
-                      }}
-                    >
-                      立即练习
-                    </Button>
-                  ) : (
-                    <div class={[styles.buyBtn]}>
-                      {/* 判断是否是需要收费的 */}
-                      {buyState.value.charge && (
-                        <Button
-                          round
-                          type="primary"
-                          color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
-                          class={styles.primary}
-                          onClick={onBuy}
-                        >
-                          立即点播
-                        </Button>
-                      )}
+                      throttleFn()
+                    }}
+                  >
+                    立即练习
+                  </Button>
+                ) : buyState.value.hasTenantAlbum || !buyState.value.play ? (
+                  <Button
+                    round
+                    block
+                    type="primary"
+                    disabled
+                    color="linear-gradient(270deg, #FF3C81 0%, #FF76A6 100%)"
+                  >
+                    立即练习
+                  </Button>
+                ) : (
+                  <div class={[styles.buyBtn]}>
+                    {/* 判断是否是需要收费的 */}
+                    {buyState.value.charge && (
+                      <Button
+                        round
+                        type="primary"
+                        color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
+                        class={styles.primary}
+                        onClick={onBuy}
+                      >
+                        立即点播
+                      </Button>
+                    )}
 
-                      {/* 判断是否有会员的 */}
-                      {buyState.value.vip && (
-                        <Button
-                          round
-                          block={!buyState.value.charge ? true : false}
-                          type="primary"
-                          color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
-                          class={styles.memeber}
-                          onClick={() => {
-                            router.push({
-                              path: '/memberCenter',
-                              query: {
-                                ...route.query
-                              }
-                            })
-                          }}
-                        >
-                          {studentActivityId.value > 0 && (
-                            <div class={[styles.buttonDiscount]}>专属优惠</div>
-                          )}
-                          开通会员
-                        </Button>
-                      )}
-                    </div>
-                  )}
-                </div>
+                    {/* 判断是否有会员的 */}
+                    {buyState.value.vip && (
+                      <Button
+                        round
+                        block={!buyState.value.charge ? true : false}
+                        type="primary"
+                        color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
+                        class={styles.memeber}
+                        onClick={() => {
+                          router.push({
+                            path: '/memberCenter',
+                            query: {
+                              ...route.query
+                            }
+                          })
+                        }}
+                      >
+                        {studentActivityId.value > 0 && (
+                          <div class={[styles.buttonDiscount]}>专属优惠</div>
+                        )}
+                        开通会员
+                      </Button>
+                    )}
+                  </div>
+                )}
               </div>
-            </TheSticky>
-          )}
+            </div>
+          </TheSticky>
+        )}
 
         <Popup
           v-model:show={shareStatus.value}

src/tenant/music/train-tool/index.tsx

@@ -109,25 +109,27 @@ export default defineComponent({
             state.details = state.albumList[0]
           } else {
             // state.albumList
-            Dialog.alert({
-              title: '提示',
-              message: '该专辑不可购买',
-              confirmButtonText: '确定',
-              confirmButtonColor: '#2dc7aa'
-            }).then(() => {
-              if (browser().isApp) {
-                postMessage({ api: 'back' })
-              } else {
-                setLogout()
-                router.replace({
-                  path: '/login' as any,
-                  query: {
-                    returnUrl: '/train-tool',
-                    ...route.query
-                  }
-                })
-              }
-            })
+            if (!browser().isApp) {
+              Dialog.alert({
+                title: '提示',
+                message: '该专辑不可购买',
+                confirmButtonText: '确定',
+                confirmButtonColor: '#2dc7aa'
+              }).then(() => {
+                if (browser().isApp) {
+                  postMessage({ api: 'back' })
+                } else {
+                  setLogout()
+                  router.replace({
+                    path: '/login' as any,
+                    query: {
+                      returnUrl: '/train-tool',
+                      ...route.query
+                    }
+                  })
+                }
+              })
+            }
           }
         }
       } catch {
@@ -181,7 +183,7 @@ export default defineComponent({
       }
     )
 
-    const FetchList = async () => {
+    const FetchList = async (hideLoading = false) => {
       if (state.loading) {
         return
       }
@@ -197,6 +199,7 @@ export default defineComponent({
         const { data } = await request.post(
           `${apiSuffix.value}/tenantAlbumMusic/page`,
           {
+            hideLoading,
             data: tempParams
           }
         )
@@ -410,7 +413,7 @@ export default defineComponent({
                       onTransitionEnd={() => {
                         params.page = 1
                         state.list = []
-                        FetchList()
+                        FetchList(true)
                       }}
                     >
                       {state.albumList.map((album: any) => (
@@ -461,10 +464,10 @@ export default defineComponent({
                       <div class={styles.albumPriceList}>
                         {(state.details?.originalPrice || 0) >
                           (state.details?.actualPrice || 0) && (
-                          <span class={styles.originPrice}>
+                          <del class={styles.originPrice}>
                             原价：¥
                             {moneyFormat(state.details?.originalPrice || 0)}
-                          </span>
+                          </del>
                         )}
 
                         <span class={styles.currentPrice}>