h5-colexiu/src/student/share-active/track-review-activity/index.tsx

import ColSticky from '@/components/col-sticky'
import request from '@/helpers/request'
import { browser, removeAuth } from '@/helpers/utils'
import { postMessage } from '@/helpers/native-message'
import {
  Button,
  Cell,
  CellGroup,
  Dialog,
  Image,
  Notify,
  Popup,
  Toast
} from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import logo from '@/common/images/logo.png'
import { shareCall } from '@/teacher/share-page/share'
import { getRandomKey } from '@/views/music/music'
import qs from 'query-string'
import dayjs from 'dayjs'
import { orderStatus } from '@/views/order-detail/orderStatus'
import { difficulty } from '@/constant'
import { state } from '@/state'
import iconTeacher from '@/common/images/icon_teacher.png'

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

export default defineComponent({
  name: 'track-review-activity',
  data() {
    const query = this.$route.query
    return {
      id: query.id,
      recomUserId: query.recomUserId || '', // 推荐人id
      activeInfo: {} as any,
      popupStatus: false,
      wxStatus: false,
      behaviorId: getRandomKey(),
      selectMusic: {} as any,
      hiddenProperty: null as any
    }
  },
  computed: {
    activityMusic() {
      const activeInfo: any = this.activeInfo
      return activeInfo.activityMusicVoList || []
    },
    // 用户是否有中选的曲子
    userSelectMusic() {
      let status = false
      this.activityMusic.forEach((item: any) => {
        if (item.join === 1) {
          status = true
        }
      })
      return status
    },
    // this.activeInfo.activityRewardList
    rewardList() {
      const activeInfo: any = this.activeInfo
      // activityRewardList = activityRewardList?.activityRewardList
      // console.log(activityRewardList)
      let list = activeInfo.activityRewardList || []
      if (list && list.length > 0) {
        const last = list.sort((a: any, b: any) => {
          return Number(a.group) < Number(b.group) ? -1 : 1
        })
        list = this.groupBy(last, (item: any) => {
          return [item.group]
        })
      }
      return list || []
    }
  },
  async mounted() {
    await this.getMusicInfo()

    // 判断是否在内容打开页面
    if (!browser().isApp) {
      // this.popupStatus = true
      // removeAuth()
      // return
    } else if (state.platformType === 'TEACHER') {
      this.onBackDialog('请使用酷乐秀学生端扫码打开')
      return
    } else {
      this.hiddenProperty =
        'hidden' in document
          ? 'hidden'
          : 'webkitHidden' in document
          ? 'webkitHidden'
          : 'mozHidden' in document
          ? 'mozHidden'
          : null
      const visibilityChangeEvent = this.hiddenProperty.replace(
        /hidden/i,
        'visibilitychange'
      )
      document.addEventListener(visibilityChangeEvent, this.onVisibilityChange)
    }

    // 判断活动状态的活动时间
    this.checkActivityTime()
  },
  unmounted() {
    const visibilityChangeEvent = this.hiddenProperty.replace(
      /hidden/i,
      'visibilitychange'
    )
    document.removeEventListener(visibilityChangeEvent, this.onVisibilityChange)
  },
  methods: {
    groupBy(array: any, f: any) {
      const groups = {}
      array.forEach(function (o) {
        //注意这里必须是forEach 大写
        const group = JSON.stringify(f(o))
        groups[group] = groups[group] || []
        groups[group].push(o)
      })
      return Object.keys(groups).map(function (group) {
        return groups[group]
      })
    },
    onVisibilityChange() {
      if (!document[this.hiddenProperty]) {
        this.getMusicInfo()
      }
    },
    async getMusicInfo() {
      try {
        const res = await request.post(
          '/api-student/open/activity/info/' + this.id
        )
        this.activeInfo = res.data
        document.title = this.activeInfo.activityName
      } catch {
        //
      }
    },
    checkActivityTime() {
      // 判断活动状态的活动时间
      try {
        const activeInfo = this.activeInfo
        if (activeInfo.activityState !== 1) {
          Dialog.alert({
            message: '活动已结束，感谢你的关注！',
            theme: 'round-button',
            confirmButtonColor: '#2dc7aa'
          })
          this.onBackDialog('活动已结束，感谢你的关注！')
          return false
        }

        const nowTime = dayjs()
        const startTime = dayjs(activeInfo.activityStart)
        const endTime = dayjs(activeInfo.activityEnd)
        if (dayjs(nowTime).isBefore(dayjs(startTime))) {
          this.onBackDialog('活动尚未开始，请您耐心等待！')
          return false
        } else if (!dayjs(nowTime).isBefore(dayjs(endTime))) {
          this.onBackDialog('活动已结束，感谢你的关注！')
          return false
        }
        return true
      } catch {
        //
      }
    },
    onBackDialog(str: string) {
      Dialog.alert({
        message: str,
        theme: 'round-button',
        confirmButtonColor: '#2dc7aa'
      }).then(() => {
        postMessage({ api: 'back' })
      })
    },
    async onJoinActve() {
      if (!browser().isApp) {
        this.popupStatus = true
        removeAuth()
        return
      }

      const activeInfo = this.activeInfo
      try {
        if (!this.checkActivityTime()) {
          return
        }
        if (activeInfo.registrationMethod === 'CHARGE') {
          // 判断是否有待支付订单
          const res = await request.post(
            '/api-student/userOrder/getPendingOrder',
            {
              data: {
                goodType: 'ACTI_REGIST',
                bizId: activeInfo.id
              }
            }
          )
          // 判断是否是收费活动
          orderStatus.orderObject.orderType = 'ACTI_REGIST'
          orderStatus.orderObject.orderName = activeInfo.activityName
          orderStatus.orderObject.orderDesc = activeInfo.activityName
          orderStatus.orderObject.actualPrice = activeInfo.registrationPrice
          orderStatus.orderObject.orderNo = res.data?.orderNo || ''
          orderStatus.orderObject.recomUserId = this.recomUserId
          orderStatus.orderObject.orderList = [
            {
              orderType: 'ACTI_REGIST',
              goodsName: activeInfo.activityName,
              activityId: activeInfo.id,
              actualPrice: activeInfo.registrationPrice,
              recomUserId: this.recomUserId
            }
          ]
          this.$router.push({
            path: '/orderDetail',
            query: {
              orderType: 'ACTI_REGIST',
              activityId: activeInfo.id
            }
          })
        } else {
          await request.post(
            `/api-student/activity/joinActivity/${activeInfo.id}`
          )

          // 成功通知
          setTimeout(() => {
            Toast('报名成功')
          }, 300)
          // Notify({ type: 'success', message: '报名成功' })
          this.getMusicInfo()
        }
      } catch {
        //
      }
    },
    async onOpenMusic() {
      try {
        const selectMusic = this.selectMusic
        if (selectMusic.join !== 1) {
          await request.post(
            `/api-student/activity/evaluation/${selectMusic.evaluationId}`
          )
          this.selectMusic.join = 1
        }
        this.popupStatus = false
        const browserInfo = browser()
        const url = qs.stringifyUrl({
          url: location.origin + '/accompany',
          query: {
            id: selectMusic.musicSheetId,
            behaviorId: this.behaviorId,
            client: browserInfo.isTeacher ? 'teacher' : 'student',
            setting: JSON.stringify({
              mode: 'EVALUATING',
              resets: ['SPEED'],
              difficulty: this.activeInfo.evaluationDifficulty,
              feeType: 'FREE',
              submitData: { evaluationId: this.selectMusic.evaluationId }
            })
          }
        })
        postMessage({
          api: 'openAccompanyWebView',
          content: {
            url,
            orientation: 0,
            isHideTitle: true,
            statusBarTextColor: false,
            isOpenLight: true
          }
        })
      } catch {
        //
      }
    },
    onOpenApp() {
      //
      if (!browser().isApp) {
        if (browser().weixin) {
          this.wxStatus = true
          return
        }
        // 如果不在app里面则不需要唤起操作
        const { origin } = location
        const str =
          origin +
          `/student/#/track-review-activity?id=${this.id}&recomUserId=${this.recomUserId}`
        shareCall(str, {})
        // 不管有没有唤起，则跳转到下载页面
        setTimeout(() => {
          window.location.href = location.origin + '/student/#/download'
        }, 3000)
      } else {
        this.popupStatus = false
      }
    }
  },
  render() {
    return (
      <div
        class={styles.review}
        style={{
          background: `url(${this.activeInfo.subjectUrl}) no-repeat top center ${this.activeInfo.backgroundUrl}`,
          backgroundSize: 'contain'
        }}
      >
        <div class={styles.reviewContainer}>
          <div class={[styles.section, styles.activeTime]}>
            <div class={styles.activeBg}>
              <img src={getAssetsHomeFile('icon_time.png')} />
              <p>
                <span>活动时间：</span>
                {dayjs(this.activeInfo.activityStart).format(
                  'YYYY-MM-DD'
                )} ~ {dayjs(this.activeInfo.activityEnd).format('YYYY-MM-DD')}
              </p>
            </div>
          </div>

          <div class={[styles.section]}>
            <div class={styles.title}>
              <img src={getAssetsHomeFile('icon_arrow_left.png')} />
              <span>活动介绍</span>
              <img src={getAssetsHomeFile('icon_arrow_right.png')} />
            </div>
            <div class={styles.tips}>{this.activeInfo.describe}</div>
          </div>

          <div class={[styles.section]}>
            <h2 class={styles.title2}>
              <span>
                <i class={styles.titlePrefix}></i>
                活动奖品
              </span>

              {/* <img
                src={getAssetsHomeFile('star_bg.png')}
                class={styles.iconStar}
              /> */}
              <span
                class={styles.titleTips}
                onClick={() =>
                  this.$router.push({
                    path: '/leaderboard',
                    query: { id: this.id }
                  })
                }
              >
                查看挑战排行榜
                <img
                  style={{ width: '16px', marginLeft: '4px' }}
                  src={getAssetsHomeFile('icon-lv.png')}
                />
              </span>
            </h2>
            {this.rewardList.map((item: any, index: number) => (
              <>
                <div class={styles.prizeTitle}>
                  {index === 0 && (
                    <Image
                      class={styles.prizeLevel}
                      src={getAssetsHomeFile('icon_level.png')}
                    />
                  )}
                  {index === 1 && (
                    <Image
                      class={styles.prizeLevel}
                      src={getAssetsHomeFile('icon_level2.png')}
                    />
                  )}
                  {index === 2 && (
                    <Image
                      class={styles.prizeLevel}
                      src={getAssetsHomeFile('icon_level3.png')}
                    />
                  )}
                  第{++index}名奖品
                </div>
                <div class={styles.prizeSection}>
                  {item.map((child: any) => (
                    <div class={[styles.prize]}>
                      <Image src={child.imgUrl} />
                      <div class={styles.prizeContainer}>
                        <div class={styles.prizeName}>{child.rewardName}</div>
                        <div class={styles.prizeDesc}>
                          {child.rewardDescribe}
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </>
            ))}
          </div>

          <div class={[styles.section]} style={{ backgroundColor: '#fff' }}>
            <h2 class={styles.title2}>
              <span>
                <i class={styles.titlePrefix}></i>
                活动曲目
              </span>
              <span class={styles.titleTips}>
                共{this.activityMusic.length || 0}首曲目
              </span>
            </h2>

            {this.activityMusic.map((item: any) => (
              <CellGroup class={styles.musicItem} border={false}>
                <Cell
                  center
                  titleClass={styles.musicTitle}
                  v-slots={{
                    icon: () => (
                      <Image
                        src={getAssetsHomeFile('icon_music.png')}
                        class={styles.iconMusic}
                      />
                    ),
                    title: () => (
                      <span class={styles.musicName}>
                        {item.musicSheetName}
                      </span>
                    ),
                    value: () => <span>{item.musicSubject}</span>
                  }}
                />
                <Cell
                  center
                  class={styles.cellLevel}
                  v-slots={{
                    icon: () => (
                      <div class={styles.kingSection}>
                        <Image
                          src={getAssetsHomeFile('icon_king.png')}
                          class={styles.iconKing}
                        />
                        <p class={styles.score}>
                          {item.userId ? item.score : '--'}
                          <span>分</span>
                        </p>
                      </div>
                    ),
                    title: () => (
                      <div class={styles.users}>
                        <div class={styles.userInfo}>
                          <div class={styles.userImg}>
                            {item.userId ? (
                              <>
                                <Image
                                  src={item.userAvatar || iconTeacher}
                                  class={styles.userLogo}
                                  fit="cover"
                                />
                                <img
                                  src={getAssetsHomeFile('icon_level.png')}
                                  class={styles.iconLevel}
                                />
                              </>
                            ) : (
                              <div class={styles.userLogo}>
                                <img
                                  class={styles.img}
                                  src={getAssetsHomeFile('icon_no_level.png')}
                                />
                              </div>
                            )}
                          </div>
                          <div class={styles.userName}>
                            {item.userId ? (
                              <>
                                <p class={styles.name}>{item.username}</p>
                                <p>
                                  <span class={styles.subjectName}>
                                    {item.userSubject}
                                  </span>
                                </p>{' '}
                              </>
                            ) : (
                              <span class={styles.noText}>虚位以待</span>
                            )}
                          </div>
                        </div>
                        <div class={styles.userBtn}>
                          <Button
                            round
                            style={{
                              padding: '0 8px',
                              height: '32px'
                            }}
                            color="linear-gradient(180deg, #FFA200 0%, #FF6900 100%)"
                            disabled={
                              this.activeInfo.join === 0 ||
                              (this.userSelectMusic && item.join !== 1)
                            }
                            onClick={() => {
                              if (!this.checkActivityTime()) {
                                return
                              }
                              this.selectMusic = item
                              if (item.join === 1) {
                                this.onOpenMusic()
                              } else {
                                this.popupStatus = true
                              }
                            }}
                          >
                            立刻挑战
                          </Button>
                        </div>
                      </div>
                    )
                  }}
                ></Cell>
              </CellGroup>
            ))}
          </div>

          <div class={[styles.section]}>
            <div class={styles.title}>
              <img src={getAssetsHomeFile('icon_arrow_left.png')} />
              <span>活动规则</span>
              <img src={getAssetsHomeFile('icon_arrow_right.png')} />
            </div>
            <div class={styles.tips}>{this.activeInfo.ruleDescribe}</div>
          </div>
        </div>

        {this.activeInfo.join !== 1 && (
          <ColSticky position="bottom">
            <div class={styles.btnGroup}>
              <Button
                round
                class={styles.submit}
                block
                onClick={this.onJoinActve}
              >
                报名参与
              </Button>
            </div>
          </ColSticky>
        )}

        <Popup
          v-model:show={this.popupStatus}
          round
          style={{ width: '90%' }}
          closeOnClickOverlay={false}
        >
          <div class={styles.popupContainer}>
            <div class={[styles.popupTitle, 'van-hairline--bottom']}>
              <i class={styles.line}></i>提示
              <img
                src={getAssetsHomeFile('icon_close.png')}
                class={styles.popupClose}
                onClick={() => (this.popupStatus = false)}
              />
            </div>

            <div class={styles.popupContent}>
              {browser().isApp ? (
                <>
                  <p>
                    确定要参加<span>{this.selectMusic.musicSheetName}</span>评测
                    <span>
                      {difficulty[this.activeInfo.evaluationDifficulty]}
                    </span>
                    的比拼吗？
                  </p>
                  <p class={styles.popupTips}>
                    每位用户仅可选择一首曲目的一个难度哦！
                  </p>
                </>
              ) : (
                <div class={styles.appOut}>
                  <img src={logo} />
                  <p>请在酷乐秀APP内打开活动链接！</p>
                </div>
              )}
            </div>

            {browser().isApp ? (
              <div class={['btnGroup, btnMore', styles.popupBtn]}>
                <Button
                  type="primary"
                  round
                  plain
                  onClick={() => (this.popupStatus = false)}
                >
                  再想想
                </Button>
                <Button type="primary" round onClick={this.onOpenMusic}>
                  就是它了
                </Button>
              </div>
            ) : (
              <div class={['btnGroup, btnMore', styles.popupBtn]}>
                <Button type="primary" round onClick={this.onOpenApp}>
                  确定
                </Button>
              </div>
            )}
          </div>
        </Popup>

        {this.wxStatus && (
          <div
            class={styles.wxpopup}
            onClick={() => {
              this.wxStatus = false
            }}
          >
            <img src={getAssetsHomeFile('wx_bg.png')} alt="" />
          </div>
        )}
      </div>
    )
  }
})