h5-colexiu/src/views/order-detail/order-discount/index.tsx

import { Cell, CellGroup, Icon, Image, Stepper } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
// import { orderStatus } from '../orderStatus'

import iconDiscount from '@common/images/icon_discount.png'
import dayjs from 'dayjs'
import { numberToTwoUp } from '..'

export default defineComponent({
  name: 'OrderVideo',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['priceChange'],
  computed: {
    startTime() {
      const item = this.item
      return item.startTime
    }
  },
  render() {
    const item = this.item
    return (
      <div class={styles.videoOrder}>
        <CellGroup class={['mb12', styles.cellGroup]} border={false}>
          <Cell
            // center
            titleClass={styles.titleClass}
            v-slots={{
              icon: () => (
                <Image class={styles.memberLogo} src={iconDiscount} />
              ),
              title: () => (
                <>
                  <div class={styles.container}>
                    <div class={styles.title}>
                      {item.goodsName || item.goodName}
                    </div>
                    <div class={styles.price}>
                      <i>¥ </i>
                      {(this as any).$filters.moneyFormat(item.price)}
                    </div>
                  </div>
                  <div class={styles.addNum}>
                    <Stepper
                      disableInput
                      disabled={item.period === 'PERPETUAL' || this.disabled}
                      v-model={item.num}
                      theme="round"
                      min={1}
                      max={99}
                      onChange={() => {
                        let endTime = new Date()
                        if (item.period === 'MONTH') {
                          endTime = dayjs(item.startTime)
                            .add(1 * item.num, 'month')
                            .toDate()
                        } else if (item.period === 'QUARTERLY') {
                          endTime = dayjs(item.startTime)
                            .add(3 * item.num, 'month')
                            .toDate()
                        } else if (item.period === 'YEAR_HALF') {
                          endTime = dayjs(item.startTime)
                            .add(6 * item.num, 'month')
                            .toDate()
                        } else if (item.period === 'YEAR') {
                          endTime = dayjs(item.startTime)
                            .add(1 * item.num, 'year')
                            .toDate()
                        }
                        item.endTime = dayjs(endTime).format('YYYY-MM-DD')
                        // 价格变化
                        this.$emit(
                          'priceChange',
                          numberToTwoUp(item.price * item.num)
                        )
                      }}
                    ></Stepper>
                  </div>
                </>
              )
            }}
          />
        </CellGroup>

        <CellGroup
          class={['mb12', styles.cellGroup, styles.cellGroupTimer]}
          border={false}
        >
          <Cell
            center
            v-slots={{
              title: () => (
                <div class={styles.timerCell}>
                  <div class={styles.timerTitle}>
                    <span>畅学卡生效时间</span>
                  </div>
                  <div class={styles.timer}>
                    {this.startTime} 至 {item.endTime}
                  </div>
                </div>
              )
            }}
          />
        </CellGroup>

        {/* {item.discountPrice && item.discountPrice > 0 ? <CellGroup class={['mb12', styles.cellGroup]} border={false}>
          <Cell
            center
            v-slots={{
              title: () => (
                <div class={styles.timerCell}>
                  <div class={styles.timerTitle}>
                    <span>畅学卡优惠</span>
                  </div>
                  <div class={styles.timer}>-￥{(this as any).$filters.moneyFormat(item.discountPrice)}</div>
                </div>
              )
            }}
          />
        </CellGroup> : ''} */}
        
      </div>
      // 视频课
    )
  }
})