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

import request from '@/helpers/request'
import {
  listenerMessage,
  postMessage,
  removeListenerMessage
} from '@/helpers/native-message'
import {
  Button,
  Cell,
  CellGroup,
  Icon,
  RadioGroup,
  Radio,
  Dialog,
  Toast
} from 'vant'
import { defineComponent, PropType } from 'vue'

import styles from './index.module.less'
import { state } from '@/state'
import { orderStatus } from '../orderStatus'
import { useEventTracking } from '@/helpers/hooks'
import activeButtonIcon from '@common/images/icon_checkbox.png'
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
import activeButtonIconTenant from '@common/images/icon_checkbox-tenant.png'
import iconWechat from '@common/images/icon-wechat.png'
import iconAlipay from '@common/images/icon-alipay.png'

interface IOrderInfo {
  orderNo: string | number
  actualPrice: string | number
}

const urlFix =
  state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
const urlType = {
  goodsPay: {
    cancelUrl: '/api-mall-portal/order/cancelUserOrder',
    payUrl: '/api-mall-portal/payment/orderPay'
  },
  orderPay: {
    cancelUrl: urlFix + '/userOrder/orderCancel',
    payUrl: urlFix + '/userOrder/orderPay'
  }
}

export default defineComponent({
  name: 'payment',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    orderInfo: {
      type: Object as PropType<IOrderInfo>,
      default: {
        orderNo: '',
        actualPrice: 0
      }
    },
    onBackOut: {
      type: Function,
      default: () => {}
    },
    paymentType: {
      type: String,
      default: 'orderPay' as 'orderPay' | 'goodsPay'
    }
  },
  data() {
    return {
      payType: 'wx_app',
      pay_channel: ''
    }
  },
  unmounted() {
    removeListenerMessage('paymentOperation', this.paymentOperation)
  },
  mounted() {
    console.log(this.orderInfo, 'this.orderInfo')
  },
  methods: {
    onClose() {
      Dialog.confirm({
        message: '是否放弃本次付款',
        confirmButtonText: '继续付款',
        cancelButtonText: '放弃'
      })
        .then(() => {})
        .catch(async () => {
          this.onCancel()
          useEventTracking('取消支付')
        })
    },
    async onCancel(noBack?: boolean) {
      try {
        await request.post(urlType[this.paymentType].cancelUrl, {
          data: {
            orderNo: this.orderInfo.orderNo
          }
        })
      } catch {}
      // 不管接口是否报错,都返回
      this.$emit('update:modelValue', false)
      // 为了单独处理支付 曲目购买  && orderStatus.orderObject.orderType == 'MUSIC'
      // if (!noBack) {
      //   postMessage({ api: 'back', content: {} })
      //   return
      // }

      !noBack && this.$router.go(-1)
      this.onBackOut && this.onBackOut()
    },
    async onSubmit() {
      // 支付...
      try {
        const params = {
          orderNo: this.orderInfo.orderNo,
          payChannel: this.payType,
          paymentClient: null as any
        }
        if (this.paymentType === 'goodsPay') {
          params.paymentClient = state.platformType
        }
        const res = await request.post(urlType[this.paymentType].payUrl, {
          data: {
            ...params
          }
        })
        postMessage({
          api: 'paymentOrder',
          content: {
            orderNo: this.orderInfo.orderNo,
            payChannel: this.payType,
            // payInfo: `alipays://platformapi/startapp?saId=10000007&qrcode=${res.data.pay_info}`
            payInfo: res.data.pay_info
          }
        })
        Toast.loading({
          message: '支付中...',
          forbidClick: true,
          duration: 3000,
          loadingType: 'spinner'
        })
        Toast.clear()
        this.$emit('update:modelValue', false)
        // 唤起支付时状态
        listenerMessage('paymentOperation', result => {
          console.log(result, 'init paymentOperation')
          this.paymentOperation(result?.content)
        })
      } catch (e: any) {
        console.log(e)
      }
      useEventTracking('购买支付')
    },
    paymentOperation(res: any) {
      console.log(res, 'paymentOperation', this.paymentType, this.orderInfo)

      // 支付状态
      // paymentOperation  支付成功:success 支付失败:error 支付取消:cancel 未安装:fail
      // error 只有安卓端有
      if (res.status === 'success' || res.status === 'error') {
        Toast.clear()
        this.$emit('update:modelValue', false)
        if (this.paymentType === 'goodsPay') {
          this.$router.replace({
            path: '/shopTrade',
            query: {
              orderNo: this.orderInfo.orderNo
            }
          })
          return
        }
        this.$router.replace({
          path: '/tradeDetail',
          query: {
            orderNo: this.orderInfo.orderNo
          }
        })
      } else if (res.status === 'cancel') {
        Toast.clear()
        this.$emit('update:modelValue', false)
      } else if (res.status === 'fail') {
        const message =
          this.payType === 'ali_app' ? '您尚未安装支付宝' : '您尚未安装微信'
        Dialog.alert({
          title: '提示',
          message
        }).then(() => {
          Toast.clear()
          this.$emit('update:modelValue', false)
        })
      }
    }
  },
  render() {
    return (
      <div class={styles.payment}>
        <Icon onClick={this.onClose} name="cross" size={20} />
        <div class={[styles.title]}>选择支付方式</div>

        <div class={styles.payAmount}>
          <p>应付金额</p>
          <div class={styles.amount}>
            <span>￥</span>
            {(this as any).$filters.moneyFormat(this.orderInfo.actualPrice)}
          </div>
        </div>
        <RadioGroup v-model={this.payType}>
          <CellGroup border={false}>
            <Cell
              border={true}
              center
              onClick={() => {
                // wx_lite
                this.payType = 'wx_app'
              }}
              v-slots={{
                icon: () => <Icon name={iconWechat} size={18} />,
                'right-icon': () => (
                  <Radio
                    name="wx_app"
                    v-slots={{
                      icon: (props: any) => (
                        <Icon
                          class={styles.boxStyle}
                          name={
                            props.checked
                              ? state.projectType === 'tenant'
                                ? activeButtonIconTenant
                                : activeButtonIcon
                              : inactiveButtonIcon
                          }
                        />
                      )
                    }}
                  />
                ),
                title: () => (
                  <div class={styles.payTypeRe}>
                    微信支付 <span class={styles.recommend}>推荐</span>
                  </div>
                )
              }}
            ></Cell>
            <Cell
              title="支付宝支付"
              border={true}
              center
              onClick={() => {
                this.payType = 'ali_app'
              }}
              v-slots={{
                icon: () => <Icon name={iconAlipay} size={18} />,
                'right-icon': () => (
                  <Radio
                    name="ali_app"
                    v-slots={{
                      icon: (props: any) => (
                        <Icon
                          class={styles.boxStyle}
                          name={
                            props.checked
                              ? state.projectType === 'tenant'
                                ? activeButtonIconTenant
                                : activeButtonIcon
                              : inactiveButtonIcon
                          }
                        />
                      )
                    }}
                  />
                ),
                title: () => <div class={styles.payTypeRe}>支付宝支付</div>
              }}
            ></Cell>
          </CellGroup>
        </RadioGroup>

        <div class={styles.blank}></div>
        <Button
          type="primary"
          class={[
            styles.payBtn,
            state.projectType === 'tenant' && styles.tenantPayBtn
          ]}
          block
          round
          onClick={this.onSubmit}
        >
          确认支付
        </Button>
      </div>
    )
  }
})