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

import ColProtocol from '@/components/col-protocol'
import { Button, Icon, Popup, Sticky, Toast } from 'vant'
import ColPopup from '@/components/col-popup'
import { defineComponent } from 'vue'
import { postMessage } from '@/helpers/native-message'
import styles from './index.module.less'
import OrderVideo from './order-video'
import OrderLive from './order-live'
import UserAuth from './userAuth'

// 调用原生支付
// postMessage({ api: 'paymentOrder', content: { orderNo: 0 } })
// listenerMessage({ api: 'paymentResult', callback: (res: any) => {
//   status: 'success | fail'
// }})

import iconTips from '@common/images/icon_tips.png'
import Payment from './payment'
import ColHeader from '@/components/col-header'
import { state } from '@/state'

export default defineComponent({
  name: 'order-detail',
  data() {
    const query = this.$route.query
    console.log(query)
    return {
      orderType: query.orderType,
      agreeStatus: false,
      popupShow: false,
      paymentStatus: false,
      orderPrice: 0, // 支付金额
      orderInfo: {
        orderNo: '',
        actualPrice: 0
      }
    }
  },
  methods: {
    onAuthSuccess() {
      console.log('auth success')
      this.popupShow = false
      this.onSubmit() // 实名成功后自动支付
    },
    async onSubmit() {
      if (!this.agreeStatus) {
        Toast('请先阅读并同意《酷乐秀平台服务协议》')
        return
      }
      const users = state.user.data
      // 判断是否需要实名认证
      if (!users?.realName || !users?.idCard) {
        this.popupShow = true
        return
      }
      // return
      let result: any
      if (this.$refs.orderVideo && this.orderType == 'VIDEO') {
        result = await (this as any).$refs.orderVideo.onSubmit()
        console.log(result)
      } else if (this.$refs.orderLive && this.orderType == 'LIVE') {
        result = await (this as any).$refs.orderLive.onSubmit()
      }

      if (result) {
        this.orderInfo = {
          orderNo: result.orderNo,
          actualPrice: result.actualPrice
        }
        this.paymentStatus = true
      }
    }
  },
  render() {
    return (
      <div class={styles['order-detail']}>
        <ColHeader />
        {this.orderType === 'LIVE' && (
          <OrderLive ref="orderLive" v-model={this.orderPrice} />
        )}
        {this.orderType === 'VIDEO' && (
          <OrderVideo ref="orderVideo" v-model={this.orderPrice} />
        )}

        <div class={styles.tips}>
          <h3>
            <Icon name={iconTips} size={15} />
            温馨提示
          </h3>
          <p>
            1、您支付的课程费用将由平台收取； <br />
            2、陪练课、直播课课程结束后，平台将单课时费用向老师结算；
            <br />
            3、除直播课未达到开课人数外，其他服务一经购买不予退费。
          </p>
        </div>

        <div class={styles.paymentInfo}>
          <div class={styles.protocol}>
            <ColProtocol
              v-model={this.agreeStatus}
              showHeader
              style={{ paddingLeft: 0, paddingRight: 0 }}
            />
          </div>

          <div class={styles.btnGroup}>
            <div class={styles.priceSection}>
              支付金额：
              <div class={styles.price}>
                <span class={styles.priceUnit}>￥</span>
                <span class={styles.priceNum}>
                  {(this as any).$filters.moneyFormat(this.orderPrice)}
                </span>
              </div>
            </div>
            <Button
              type="primary"
              round
              class={styles.btn}
              onClick={this.onSubmit}
            >
              立即支付
            </Button>
          </div>
        </div>
        <ColPopup v-model={this.popupShow}>
          <UserAuth onSuccess={this.onAuthSuccess} />
        </ColPopup>

        <Popup
          show={this.paymentStatus}
          closeOnClickOverlay={false}
          position="bottom"
          round
          closeOnPopstate
          safeAreaInsetBottom
          style={{ minHeight: '30%' }}
        >
          <Payment v-model={this.paymentStatus} orderInfo={this.orderInfo} />
        </Popup>
      </div>
    )
  }
})