h5-colexiu/src/views/music/music-detail/index.tsx

import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  ref
} from 'vue'
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, Cell, Dialog, Icon, Image, Popup, Tag } from 'vant'
import styles from './index.module.less'
// import Item from '../list/item'
import { useRect } from '@vant/use'
import { Vue3Lottie } from 'vue3-lottie'
import { getRandomKey, musicBuy } from '../music'
import { state } from '@/state'
import { useEventTracking } from '@/helpers/hooks'
import ColSticky from '@/components/col-sticky'
import { moneyFormat } from '@/helpers/utils'
import { orderStatus } from '@/views/order-detail/orderStatus'
import iconShare from '@/views/music/album/icon_share.svg'
import iconDownload from './images/icon_download.png'
import AstronautJSON from './animate/bigLoad.json'
import ColShare from '@/components/col-share'
import iconCollect from './images/icon_collect.png'
import iconCollectActive from './images/icon_collect_active.png'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../component/images/${fileName}`
  const modules = import.meta.globEager('../component/images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'MusicDetail',
  setup() {
    localStorage.setItem('behaviorId', getRandomKey())
    const router = useRouter()
    const route = useRoute()
    const albumDetail = ref<any>(null)
    const loading = ref(false)
    const aId = Number(route.query.activityId) || 0
    const studentActivityId = ref(aId)
    const isError = ref(false)
    const favorited = ref(0)
    const albumFavoriteCount = ref(0)
    const headers = ref(null)
    const heightInfo = ref<any>('0')
    const musicDetail = ref<any>(null)
    const showImg = ref<string>('')

    const colors: any = {
      FREE: {
        color: '#01B84F',
        text: '免费'
      },
      VIP: {
        color: '#CD863E',
        text: '会员'
      },
      CHARGE: {
        color: '#3591CE',
        text: '点播'
      }
    }

    const FetchList = async (id?: any) => {
      if (loading.value) {
        return
      }
      loading.value = true
      isError.value = false
      try {
        const res = await request.get(`/music/sheet/detail/${route.query.id}`, {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
        })
        musicDetail.value = res.data
        showImg.value = res.data.musicImg || ''
      } catch (error) {
        isError.value = true
      }
      loading.value = false
    }

    const favoriteLoading = ref(false)

    onMounted(() => {
      FetchList()
      const { height } = useRect(headers as any)
      heightInfo.value = height
    })

    const toggleFavorite = async (id: number) => {
      favoriteLoading.value = true
      try {
        await request.post('/music/album/favorite/' + id, {
          prefix:
            state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
        })
        favorited.value = favorited.value === 1 ? 0 : 1
        albumFavoriteCount.value += favorited.value ? 1 : -1
      } catch (error) {}
      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 = route.query.recomUserId || 0
      orderStatus.orderObject.activityId = route.query.activityId || 0
      orderStatus.orderObject.orderNo = ''
      orderStatus.orderObject.orderList = [
        {
          orderType: 'ALBUM',
          goodsName: album.albumName,
          recomUserId: route.query.recomUserId || 0,
          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()
      }
    }
    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
          }
        })
      } catch {}
    }

    const paymentType = computed(() => {
      let paymentType = musicDetail.value?.paymentType
      if (typeof paymentType === 'string') {
        paymentType = paymentType.split(',')
        return paymentType
      }
      return []
    })

    const shareStatus = ref(false)
    const shareUrl = ref('')
    const shareDiscount = ref(0)
    // console.log(data)
    const onShare = async () => {
      try {
        const res = await request.post('/api-teacher/open/musicShareProfit', {
          data: {
            bizId: musicDetail.value?.id,
            userId: state.user.data?.userId
          }
        })
        let url =
          location.origin +
          `/accompany/colexiu-share.html?id=${musicDetail.value?.id}&recomUserId=${state.user.data?.userId}&userType=${state.platformType}`
        // 判断是否有活动
        if (res.data.discount === 1) {
          url += `&activityId=${res.data.activityId}`
        }
        shareDiscount.value = res.data.discount || 0
        shareUrl.value = url
        shareStatus.value = true
        return
      } catch {}
    }
    return () => {
      return (
        <div class={styles.detail}>
          <ColHeader
            background="transparent"
            border={false}
            color="#fff"
            backIconColor="white"
            v-slots={{
              right: () => (
                <div
                  class={styles.shareBtn}
                  style={{
                    color: '#fff'
                  }}
                  onClick={onShare}
                >
                  <Image src={iconShare} />
                  分享
                </div>
              )
            }}
          />
          <img class={styles.bgImg} src={musicDetail.value?.titleImg} />

          <div
            class={styles.musicContainer}
            style={{
              marginTop: '16px',
              height: `calc(100vh - var(--van-nav-bar-height) - ${
                heightInfo.value + 16 + 'px'
              })`
            }}
          >
            <Cell
              border={false}
              center
              class={styles.musicInfo}
              v-slots={{
                icon: () => (
                  <Image
                    class={styles.pImg}
                    src={musicDetail.value?.titleImg}
                  />
                ),
                title: () => (
                  <div class={styles.info}>
                    <h4 class="van-ellipsis">
                      {musicDetail.value?.musicSheetName}
                    </h4>
                    <p
                      style={{
                        display: 'flex'
                      }}
                    >
                      {paymentType.value.map(tag => (
                        <Tag
                          style={{ color: colors[tag].color }}
                          class={styles.tag}
                          type="success"
                          plain
                        >
                          {colors[tag].text}
                        </Tag>
                      ))}
                      {musicDetail.value?.exquisiteFlag === 1 && (
                        <Image
                          class={styles.exquisiteFlag}
                          src={getAssetsHomeFile('icon_ exquisite.png')}
                        />
                      )}

                      {musicDetail.value?.albumNums > 0 && (
                        <Image
                          class={styles.songAlbum}
                          src={getAssetsHomeFile('icon_album_active.png')}
                        />
                      )}
                      <span style={{ paddingTop: '2px', paddingLeft: '6px' }}>
                        {musicDetail.value?.composer}
                      </span>
                    </p>
                  </div>
                ),
                value: () => (
                  <span class={styles.download}>
                    <img src={iconDownload} />
                    下载曲谱
                  </span>
                )
              }}
            />
            <div class={styles.musicContent}>
              <iframe
                id="containerPrint"
                ref="print"
                style="width: 100%;page-break-after:always; height: 0"
                // src={state.accompanyUrl}
              />
              <p class={styles.musicTitle}>
                {musicDetail.value?.musicSheetName}
              </p>
              {showImg.value ? (
                <img src={showImg.value} alt="" class={styles.musicImg} />
              ) : (
                <>
                  <Vue3Lottie
                    animationData={AstronautJSON}
                    class={styles.finch}
                  ></Vue3Lottie>
                  <p class={styles.finchLoad}>加载中...</p>
                </>
              )}

              <div class={styles.videoOperation}>
                <div class={[styles.collect, styles.collectCell]}>
                  <div class={styles.userInfo}>
                    <img src="" />
                    <span>用户名</span>
                  </div>

                  <div class={styles.collectSection}>
                    <span>326人收藏</span>
                    <img src={iconCollect} />
                  </div>
                </div>
              </div>

              <div class={styles.lookAlbum}></div>
            </div>
          </div>

          <ColSticky position="bottom" background="white">
            <div ref={headers}>
              <div class={styles.colSticky}>
                <div class={styles.priceSection}>
                  <span>点播价：</span>
                  <span class={styles.price}>
                    <i>¥</i>
                    {moneyFormat(9.9)}
                  </span>
                </div>
                <div class={[styles.buyBtn]}>
                  <Button
                    round
                    type="primary"
                    color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
                    class={styles.primary}
                    onClick={onBuy}
                  >
                    立即点播
                  </Button>

                  <Button
                    round
                    type="primary"
                    color="linear-gradient(180deg, #F7BD8D 0%, #CD8806 100%)"
                    class={styles.memeber}
                    onClick={onBuy}
                  >
                    开通会员
                  </Button>
                </div>
              </div>
            </div>
          </ColSticky>

          <Popup
            v-model:show={shareStatus.value}
            style={{ background: 'transparent' }}
            teleport="body"
          >
            <ColShare
              teacherId={state.user.data?.userId}
              shareUrl={shareUrl.value}
              shareType="music"
            >
              <div class={styles.shareMate}>
                {shareDiscount.value === 1 && (
                  <div class={styles.tagDiscount}>专属优惠</div>
                )}

                <img
                  class={styles.icon}
                  crossorigin="anonymous"
                  src={
                    musicDetail.value?.titleImg +
                    `@base@tag=imgScale&h=80&w=80&m=1?t=${+new Date()}`
                  }
                />
                <div class={styles.info}>
                  <h4 class="van-multi-ellipsis--l2">
                    {musicDetail.value?.musicSheetName}
                  </h4>
                  <p>作曲人：{musicDetail.value?.composer}</p>
                </div>
              </div>
            </ColShare>
          </Popup>
        </div>
      )
    }
  }
})