h5-colexiu/src/teacher/piano-room/account-recharge-timer/index.tsx

import ColHeader from '@/components/col-header'
import { postMessage } from '@/helpers/native-message'
import request from '@/helpers/request'
import { numberFormat } from '@/helpers/utils'
import { orderStatus } from '@/views/order-detail/orderStatus'
import { useEventListener, useWindowScroll } from '@vueuse/core'
import { Button } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'

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

export default defineComponent({
  name: 'accountRechargeTimer',
  data() {
    return {
      list: [],
      selectItem: {} as any,
      remain: {
        frozenTime: 0,
        remainTime: 0,
        studentCount: 0
      },
      background: 'transparent',
      color: '#fff'
    }
  },
  async mounted() {
    try {
      await this._init()

      const res = await request.post('/api-teacher/pianoRoomSettings/list', {
        data: {}
      })
      this.list = res.data || []
      if (this.list.length > 0) {
        const item: any = this.list[0]
        this.selectItem = item
      }
      document.addEventListener('scroll', this.scrollInit, false)
    } catch {}
  },
  unmounted() {
    this.background = '#fff'
    this.color = '#333'
    // this.documentDom = document.body as any
    postMessage({
      api: 'backIconChange',
      content: { iconStyle: 'black' }
    })
    document.removeEventListener('scroll', this.scrollInit)
  },
  methods: {
    scrollInit() {
      const { y } = useWindowScroll()
      if (y.value > 30) {
        this.background = '#fff'
        this.color = '#333'
        postMessage({
          api: 'backIconChange',
          content: { iconStyle: 'black' }
        })
      } else {
        this.background = 'transparent'
        this.color = '#fff'
        postMessage({
          api: 'backIconChange',
          content: { iconStyle: 'white' }
        })
      }
    },
    async _init() {
      try {
        const res = await request.get(
          '/api-teacher/courseSchedule/selectRemainTime'
        )
        const { frozenTime, remainTime, studentCount } = res.data || {}
        this.remain = {
          frozenTime: frozenTime || 0,
          remainTime: remainTime || 0,
          studentCount: studentCount || 0
        }
      } catch {}
    },
    async onSubmit() {
      const selectItem = this.selectItem
      orderStatus.orderObject.orderType = 'PIANO_ROOM'
      orderStatus.orderObject.orderName = selectItem.times + '分钟琴房时长充值'
      orderStatus.orderObject.orderDesc = selectItem.times + '分钟琴房时长充值'
      orderStatus.orderObject.actualPrice = selectItem.salePrice
      orderStatus.orderObject.orderNo = ''
      orderStatus.orderObject.orderList = [
        {
          orderType: 'PIANO_ROOM',
          goodsName: selectItem.times + '分钟琴房时长充值',
          ...selectItem
        }
      ]

      this.$router.push({
        path: '/orderDetail',
        query: {
          orderType: 'PIANO_ROOM',
          pinaoId: selectItem.id
        }
      })
    }
  },
  render() {
    return (
      <div class={styles.accountRechargeTimer}>
        <ColHeader
          // rightText="充值记录"
          backIconColor="white"
          border={false}
          background={this.background}
          color={this.color}
          // onClickRight={() => {
          //   this.$router.push('/rechargeRecord')
          // }}
        />

        <div class={styles.userMins}>
          <p class={styles.userLastMins}>
            {numberFormat(this.remain.remainTime)}
            <span>分钟</span>
          </p>
          <p class={styles.userTips}>
            <img src={getAssetsHomeFile('icon_timers.png')} />
            您的琴房剩余时长
          </p>
        </div>

        <div class={styles.selectTimers}>
          <img
            src={getAssetsHomeFile('title_timers.png')}
            class={styles.selectTitle}
            alt=""
          />
          <div class={styles.lastMin}>
            <img src={getAssetsHomeFile('icon_music_account.png')} />
            <p>
              {this.selectItem.times && (
                <b>已选{numberFormat(this.selectItem.times)}分钟</b>
              )}{' '}
              {this.selectItem.description}
            </p>
          </div>

          <div class={styles.memberItem}>
            {/* <div class={styles.rTitle}>
              <span>选择时长</span>
            </div> */}

            <div class={styles['system-list']}>
              {this.list.map((item: any) => (
                <div
                  class={[
                    styles['system-item'],
                    item.id === this.selectItem.id && styles.active
                  ]}
                  style={{ borderRadius: '11px' }}
                  onClick={() => {
                    this.selectItem = item
                  }}
                >
                  <p class={styles.price}>
                    <span>￥</span>
                    {item.salePrice}
                  </p>
                  <del class={styles.originalPrice}>￥{item.originalPrice}</del>
                  <p class={styles.title}>{item.times}分钟</p>
                  {/* <p class={styles.tips}>{item.description}</p> */}
                </div>
              ))}
            </div>
          </div>
        </div>

        <div class={styles.reminder}>
          <div class={styles.h2}>
            <img src={getAssetsHomeFile('icon_tips.png')} />
            <span>温馨提醒</span>
          </div>
          <p>
            1、云酷琴房时长按课程学生人数扣减，以45分钟1对2课程为例，课程结束后将消耗时长：2人*45分钟=90分钟；
          </p>
          <p>
            2、每节线上课平台赠送10分钟免费时长，分别为课前5分钟及课后5分钟，赠送时长不计算费用；
          </p>
          <p>
            3、课程消耗时长按排课人数计算，无论实际到课人数是否为排课人数，都会按照排课人数扣费；
          </p>
          <p>4、课程结束后费用立即结算；</p>
          <p>5、琴房时长不足时，您将无法排课，请确保琴房剩 余时长充足；</p>
          <p>6、琴房时长一经购买不予退费。</p>
        </div>

        <div class={styles.btnGroup}>
          <div class={styles.priceSection}>
            支付金额：
            <div class={styles.price}>
              <span class={styles.priceUnit}>￥</span>
              <span class={styles.priceNum}>{this.selectItem.salePrice}</span>
            </div>
          </div>
          <Button
            color="linear-gradient(360deg, #FF0909 0%, #FF4D4D 69%, #FF7B7B 100%)"
            round
            class={styles.btn}
            onClick={this.onSubmit}
          >
            立即支付
          </Button>
        </div>
      </div>
    )
  }
})