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

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 TheSticky from '@/components/the-sticky'
import ColHeader from '@/components/col-header'
import { useWindowScroll, useEventListener } from '@vueuse/core'
import request from '@/helpers/request'
import iconMenu from './images/icon-menu.png'
import iconRightTop from './images/icon-right-top.png'
import iconAlbumCover from '../../images/icon-album-cover.png'
import iconTimer from './images/icon-timer.png'
import { state as baseState, setLogout } from '@/state'
import Song from '../component/song'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import { moneyFormat } from '@/helpers/utils'
import { orderStatus } from '@/views/order-detail/orderStatus'
import { postMessage } from '@/helpers/native-message'
import { browser } from '@/helpers/utils'
// 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({
  name: 'train-tool',
  setup() {
    const subjectType = sessionStorage.getItem('tool-subject-type')
    sessionStorage.removeItem('tool-subject-type')
    const route = useRoute()
    const router = useRouter()
    const background = ref<string>('rgba(55, 205, 177, 0)')
    const color = ref<string>('#fff')
    const state = reactive({
      details: {} as any,
      buy: route.query.buy as any,
      albumId: route.query.albumId || null,
      activeTab: route.query.subjectType || 'SUBJECT',
      loadingAlbum: false,
      loading: false,
      finished: false,
      isError: false,
      list: [] as any,
      popupStatus: false,
      selectMember: {} as any, // 购买的月份
      ensembleCounts: false,
      musicCounts: false,
      subjectCounts: false,
      tenantAlbumStatus: 0 as any,
      ablumStatus: false,
      heightV: 0,
      hasBuyStatus: true, // 是否能继续购买
      albumList: [] as any // 专辑列表
    })
    const params = reactive({
      page: 1,
      rows: 20
    })
    const apiSuffix = ref(
      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 () => {
      state.loadingAlbum = true
      try {
        // tenantGroupAlbum/buyAlbumInfo
        if (state.albumId) {
          let url = apiSuffix.value + '/userTenantAlbumRecord/detail'
          if (state.albumId) {
            url = url + '?albumId=' + state.albumId
          }
          const { data } = await request.post(url)
          state.albumList = [data || {}]
          state.details = data || {}
        } else {
          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]
          } else {
            // state.albumList
            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 {
        //
      }
      state.loadingAlbum = false
    }

    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) {
          state.activeTab = 'SUBJECT'
        } else if (state.musicCounts) {
          state.activeTab = 'MUSIC'
        } else if (state.ensembleCounts) {
          state.activeTab = 'ENSEMBLE'
        }
        // 带的参数
        if (route.query.subjectType == 'SUBJECT' && state.subjectCounts) {
          state.activeTab = 'SUBJECT'
        } else if (route.query.subjectType == 'MUSIC' && state.musicCounts) {
          state.activeTab = 'MUSIC'
        } else if (
          route.query.subjectType == 'ENSEMBLE' &&
          state.ensembleCounts
        ) {
          state.activeTab = 'ENSEMBLE'
        }
        // subjectType 缓存
        if (subjectType == 'SUBJECT' && state.subjectCounts) {
          state.activeTab = 'SUBJECT'
        } else if (subjectType == 'MUSIC' && state.musicCounts) {
          state.activeTab = 'MUSIC'
        } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
          state.activeTab = 'ENSEMBLE'
        }

        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 (hideLoading = false) => {
      if (state.loading) {
        return
      }
      state.loading = true
      state.isError = false
      const tempParams = {
        albumId: state.details.id || null,
        subjectType: state.activeTab,
        ...params
      }

      try {
        const { data } = await request.post(
          `${apiSuffix.value}/tenantAlbumMusic/page`,
          {
            hideLoading,
            data: tempParams
          }
        )
        if (state.list.length > 0 && data.pageNo === 1) {
          return
        }
        state.list = state.list.concat(data.rows || [])
        params.page = data.pageNo + 1
        // showContact.value = state.list.length > 0
        state.loading = false
        state.finished = data.pageNo >= data.totalPage
        params.page = data.pageNo + 1
      } catch (error) {
        state.isError = true
      }
      state.loading = false
    }

    onMounted(async () => {
      useEventListener(document, 'scroll', evt => {
        const { y } = useWindowScroll()
        if (y.value > 20) {
          background.value = `rgba(255, 255, 255)`
        } else {
          background.value = 'transparent'
        }
      })

      state.loading = true
      state.loadingAlbum = true
      await getDetails()
      await FetchList()
      state.loadingAlbum = false
      state.loading = false

      // 为了处理 swiper 会不显示的问题
      document.body.scrollIntoView()
      window.scrollTo(1, 0)
    })

    const onSubmit = async () => {
      const album = state.details
      const details = state.details
      orderStatus.orderObject.orderType = 'TENANT_ALBUM'
      orderStatus.orderObject.orderName = details.name
      orderStatus.orderObject.orderDesc = details.name
      orderStatus.orderObject.actualPrice = album.actualPrice
      // orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
      // orderStatus.orderObject.activityId = route.query.activityId || 0
      orderStatus.orderObject.orderNo = ''
      orderStatus.orderObject.orderList = [
        {
          orderType: 'TENANT_ALBUM',
          goodsName: details.name,
          actualPrice: album.actualPrice,
          price: album.actualPrice,
          ...details,
          ...album
        }
      ]

      const res = await request.post('/api-student/userOrder/getPendingOrder', {
        data: {
          goodType: 'TENANT_ALBUM',
          bizId: details.id
        }
      })

      const result = res.data
      if (result) {
        state.popupStatus = false
        Dialog.confirm({
          title: '提示',
          message: '您有一个未支付的订单，是否继续支付？',
          theme: 'round-button',
          className: 'confirm-button-group',
          cancelButtonText: '取消订单',
          confirmButtonText: '继续支付'
        })
          .then(async () => {
            orderStatus.orderObject.orderNo = result.orderNo
            orderStatus.orderObject.actualPrice = result.actualPrice
            orderStatus.orderObject.discountPrice = result.discountPrice
            orderStatus.orderObject.paymentConfig = {
              ...result.paymentConfig,
              paymentVendor: result.paymentVendor,
              paymentVersion: result.paymentVersion
            }

            routerTo()
          })
          .catch(() => {
            Dialog.close()
            // 只用取消订单，不用做其它处理
            cancelPayment(result.orderNo)
          })
      } else {
        routerTo()
      }
    }
    const routerTo = () => {
      const album = state.details
      router.push({
        path: '/orderDetail',
        query: {
          orderType: 'ALBUM',
          album: album.id
        }
      })
    }

    const cancelPayment = async (orderNo: string) => {
      try {
        await request.post('/api-student/userOrder/orderCancel/v2', {
          data: {
            orderNo
          }
        })
      } catch {
        //
      }
    }

    return () => (
      <div class={styles.trainTool}>
        {!state.loading && !state.details.id && 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>
            )}
          </>
        ) : (
          !state.loadingAlbum && (
            <>
              <TheSticky
                position="top"
                onBarHeight={(height: any) => {
                  state.heightV = height
                }}
              >
                <ColHeader
                  background={background.value}
                  border={false}
                  isFixed={false}
                  hideHeader={route.query.taId ? true : 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}>
                        {state.details?.buyTimesFlag && (
                          <span class={styles.quota}>
                            限购:{state.details?.buyedTimes}/
                            {state.details?.buyTimes}次
                          </span>
                        )}
                        <Image
                          class={styles.image}
                          width="100%"
                          height="100%"
                          fit="cover"
                          src={state.details?.coverImg || iconAlbumCover}
                          errorIcon={iconAlbumCover}
                        />
                        <div class={styles.iconPian}></div>
                      </div>
                    </div>
                  ) : (
                    state.albumList &&
                    state.albumList.length > 0 && (
                      <Swiper
                        watchSlidesProgress={true}
                        slidesPerView={'auto'}
                        centeredSlides={true}
                        modules={[Pagination]}
                        pagination={{ clickable: true }}
                        // onSlideChange={(swiper: any) => {}}
                        onTransitionEnd={(swiper: any) => {
                          state.details = state.albumList[swiper.activeIndex]
                          params.page = 1
                          state.list = []
                          FetchList(true)
                        }}
                      >
                        {state.albumList.map((album: any) => (
                          <SwiperSlide>
                            <div class={styles.img}>
                              {album.buyTimesFlag && (
                                <span class={styles.quota}>
                                  限购{album.buyedTimes}/{album.buyTimes}次
                                </span>
                              )}
                              <Image
                                class={styles.image}
                                width="100%"
                                height="100%"
                                fit="cover"
                                src={album?.coverImg || iconAlbumCover}
                                errorIcon={iconAlbumCover}
                              />
                              <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>

                  {state.buy != '1' && baseState.platformType === 'STUDENT' && (
                    <div class={styles.albumPriceGroup}>
                      <div class={styles.albumTimer}>
                        <img src={iconTimer} class={styles.iconTimer} />
                        <span>有效期：{state.details?.purchaseNum || 0}天</span>
                      </div>
                      <div class={styles.albumPriceList}>
                        {(state.details?.originalPrice || 0) >
                          (state.details?.actualPrice || 0) && (
                          <del class={styles.originPrice}>
                            原价：¥
                            {moneyFormat(state.details?.originalPrice || 0)}
                          </del>
                        )}

                        <span class={styles.currentPrice}>
                          <span>
                            ¥{moneyFormat(state.details?.actualPrice || 0)}
                          </span>
                        </span>
                      </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>

                <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,
                              tenantAlbumId: item.tenantAlbumId
                              // 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}>
                    <Button
                      round
                      block
                      disabled={
                        state.details?.musicNum <= 0 || !state.hasBuyStatus
                      }
                      color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
                      onClick={onSubmit}
                    >
                      购买教程
                    </Button>
                  </div>
                </TheSticky>
              )}
            </>
          )
        )}
      </div>
    )
  }
})