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

import ColHeader from '@/components/col-header'
import request from '@/helpers/request'
import { orderStatus } from '@/views/order-detail/orderStatus'
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() {
    const query = this.$route.query
    return {
      remainTime: query.remainTime || 0,
      list: [],
      selectItem: {} as any
    }
  },
  async mounted() {
    try {
      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
      }

      console.log(this.selectItem)
    } catch {}
  },
  methods: {
    async onSubmit() {
      const selectItem = this.selectItem
      orderStatus.orderObject.orderType = 'PINAO_ROOM'
      orderStatus.orderObject.orderName = '琴房时长充值'
      orderStatus.orderObject.orderDesc = '琴房时长充值'
      orderStatus.orderObject.actualPrice = selectItem.salePrice
      orderStatus.orderObject.orderNo = ''
      orderStatus.orderObject.orderList = [
        {
          orderType: 'PINAO_ROOM',
          goodsName: '琴房时长充值',
          ...selectItem
        }
      ]

      this.$router.push({
        path: '/orderDetail',
        query: {
          orderType: 'PINAO_ROOM',
          pinaoId: selectItem.id
        }
      })
    }
  },
  render() {
    return (
      <div style={{ overflow: 'hidden' }}>
        <ColHeader />

        <div class={styles.lastMin}>
          <img src={getAssetsHomeFile('icon_music_account.png')} />
          <p>
            琴房剩余时长<span>{this.remainTime}</span>分钟
          </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
                ]}
                onClick={() => {
                  this.selectItem = item
                }}
              >
                <p class={styles.title}>{item.times}分钟琴房时长</p>
                <p class={styles.tips}>{item.description}</p>
                <p class={styles.price}>
                  <span>￥</span>
                  {item.salePrice}
                </p>
                <del class={styles.originalPrice}>￥{item.originalPrice}</del>
              </div>
            ))}
          </div>
        </div>

        <div class={styles.reminder}>
          <div class={styles.h2}>
            <img src={getAssetsHomeFile('icon_tips.png')} />
            <span>温馨提醒</span>
          </div>
          <p>
            1、云酷琴房时长按课程人数扣减（含老师），以45分钟1对1课程师生2人为例，课程结束后将消耗长：2人*45分钟=90分钟；
          </p>
          <p>
            2、每节线上课平台赠送10分钟免费时长，分别为课前5分钟及课后5分钟，赠送时长不计算费用；
          </p>
          <p>
            3、课程消耗时长按排课人数计算，无论实际到课人数是否为排课人数，都会按照排课人数扣费；
            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>
    )
  }
})