|
|
@@ -1,5 +1,14 @@
|
|
|
-import { Button, Cell, CellGroup, Icon, RadioGroup, Radio, Dialog } from 'vant'
|
|
|
-import { defineComponent, reactive } from 'vue'
|
|
|
+import {
|
|
|
+ Button,
|
|
|
+ Cell,
|
|
|
+ CellGroup,
|
|
|
+ Icon,
|
|
|
+ RadioGroup,
|
|
|
+ Radio,
|
|
|
+ Dialog,
|
|
|
+ Toast
|
|
|
+} from 'vant'
|
|
|
+import { computed, defineComponent, reactive } from 'vue'
|
|
|
import styles from './index.module.less'
|
|
|
import { browser, moneyFormat } from '@/helpers/utils'
|
|
|
import { useEventTracking } from '@/helpers/hooks'
|
|
|
@@ -11,6 +20,11 @@ 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'
|
|
|
+import {
|
|
|
+ listenerMessage,
|
|
|
+ postMessage,
|
|
|
+ removeListenerMessage
|
|
|
+} from '@/helpers/native-message'
|
|
|
|
|
|
const urlFix =
|
|
|
baseState.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
|
|
|
@@ -23,7 +37,15 @@ export default defineComponent({
|
|
|
},
|
|
|
paymentConfig: {
|
|
|
type: Object,
|
|
|
- default: {}
|
|
|
+ default: () => ({})
|
|
|
+ },
|
|
|
+ paymentVendor: {
|
|
|
+ type: String,
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
+ paymentChannels: {
|
|
|
+ type: Array,
|
|
|
+ default: () => []
|
|
|
}
|
|
|
},
|
|
|
emits: ['backOut', 'close', 'confirm', 'update:modelValue'],
|
|
|
@@ -52,6 +74,35 @@ export default defineComponent({
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ const isWxPay = computed(() => {
|
|
|
+ if (
|
|
|
+ props.paymentVendor === 'yeepay' ||
|
|
|
+ props.paymentVendor === 'adapay'
|
|
|
+ ) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
+ const channelStr = props.paymentChannels?.join(',')
|
|
|
+ if (channelStr && channelStr.indexOf('wxpay') !== -1) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ })
|
|
|
+
|
|
|
+ const isAliPay = computed(() => {
|
|
|
+ if (
|
|
|
+ props.paymentVendor === 'yeepay' ||
|
|
|
+ props.paymentVendor === 'adapay'
|
|
|
+ ) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ const channelStr = props.paymentChannels?.join(',')
|
|
|
+ if (channelStr && channelStr.indexOf('alipay') !== -1) {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ return false
|
|
|
+ })
|
|
|
+
|
|
|
// 需要关闭订单
|
|
|
// orderPay: {
|
|
|
// cancelUrl: urlFix + '/userOrder/orderCancel',
|
|
|
@@ -69,16 +120,111 @@ export default defineComponent({
|
|
|
}
|
|
|
// 不管接口是否报错,都返回
|
|
|
emit('update:modelValue', false)
|
|
|
- // 为了单独处理支付 曲目购买 && orderStatus.orderObject.orderType == 'MUSIC'
|
|
|
- // if (!noBack) {
|
|
|
- // postMessage({ api: 'back', content: {} })
|
|
|
- // return
|
|
|
- // }
|
|
|
|
|
|
!noBack && router.go(-1)
|
|
|
emit('backOut')
|
|
|
}
|
|
|
const onSubmit = async () => {
|
|
|
+ if (
|
|
|
+ props.paymentVendor &&
|
|
|
+ (props.paymentVendor.indexOf('wxpay') > -1 ||
|
|
|
+ props.paymentVendor.indexOf('alipay') > -1)
|
|
|
+ ) {
|
|
|
+ submitNativePay()
|
|
|
+ } else {
|
|
|
+ submitQrCodePay()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 支付方式，使用原生支付
|
|
|
+ const submitNativePay = async () => {
|
|
|
+ // 支付...
|
|
|
+ try {
|
|
|
+ const payChannel = state.payType === 'zfb' ? 'ali_app' : 'wx_app'
|
|
|
+ console.log(props.paymentConfig, 'paymentConfig')
|
|
|
+ let paymentType = props.paymentVendor
|
|
|
+ props.paymentChannels.forEach((item: any) => {
|
|
|
+ if (state.payType === 'zfb' && item.indexOf('alipay') !== -1) {
|
|
|
+ paymentType = item
|
|
|
+ }
|
|
|
+ if (state.payType === 'wx' && item.indexOf('wxpay') !== -1) {
|
|
|
+ paymentType = item
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const params = {
|
|
|
+ // orderNo: props.paymentConfig.orderNo,
|
|
|
+ merOrderNo: props.paymentConfig.orderNo,
|
|
|
+ paymentChannel: payChannel,
|
|
|
+ paymentVendor: paymentType
|
|
|
+ }
|
|
|
+ const res = await request.post(
|
|
|
+ urlFix + '/userOrder/executePayment/v2',
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ ...params
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ postMessage({
|
|
|
+ api: 'paymentOrder',
|
|
|
+ content: {
|
|
|
+ orderNo: props.paymentConfig.orderNo,
|
|
|
+ payChannel,
|
|
|
+ // payInfo: `alipays://platformapi/startapp?saId=10000007&qrcode=${res.data.pay_info}`
|
|
|
+ payInfo:
|
|
|
+ res.data.reqParams.body || JSON.stringify(res.data.reqParams)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ Toast.loading({
|
|
|
+ message: '支付中...',
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 3000,
|
|
|
+ loadingType: 'spinner'
|
|
|
+ })
|
|
|
+ Toast.clear()
|
|
|
+ emit('update:modelValue', false)
|
|
|
+ // 唤起支付时状态
|
|
|
+ listenerMessage('paymentOperation', result => {
|
|
|
+ console.log(result, 'init paymentOperation')
|
|
|
+ paymentOperation(result?.content)
|
|
|
+ })
|
|
|
+ } catch (e: any) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const paymentOperation = (res: any) => {
|
|
|
+ console.log(res, 'paymentOperation')
|
|
|
+ // 支付状态
|
|
|
+ // paymentOperation 支付成功:success 支付失败:error 支付取消:cancel 未安装:fail
|
|
|
+ // error 只有安卓端有
|
|
|
+ if (res.status === 'success' || res.status === 'error') {
|
|
|
+ Toast.clear()
|
|
|
+ emit('update:modelValue', false)
|
|
|
+ router.replace({
|
|
|
+ path: '/tradeDetail',
|
|
|
+ query: {
|
|
|
+ orderNo: props.paymentConfig.orderNo
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (res.status === 'cancel') {
|
|
|
+ Toast.clear()
|
|
|
+ emit('update:modelValue', false)
|
|
|
+ } else if (res.status === 'fail') {
|
|
|
+ const message =
|
|
|
+ state.payType === 'zfb' ? '您尚未安装支付宝' : '您尚未安装微信'
|
|
|
+ Dialog.alert({
|
|
|
+ title: '提示',
|
|
|
+ message
|
|
|
+ }).then(() => {
|
|
|
+ Toast.clear()
|
|
|
+ emit('update:modelValue', false)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 支付方式，汇付，易宝支付
|
|
|
+ const submitQrCodePay = () => {
|
|
|
// 支付...
|
|
|
const pt = state.payType
|
|
|
// 判断当前浏览器
|
|
|
@@ -133,70 +279,74 @@ export default defineComponent({
|
|
|
</div>
|
|
|
<RadioGroup v-model={state.payType}>
|
|
|
<CellGroup border={false}>
|
|
|
- <Cell
|
|
|
- border={true}
|
|
|
- center
|
|
|
- onClick={() => {
|
|
|
- state.payType = 'wx'
|
|
|
- }}
|
|
|
- v-slots={{
|
|
|
- icon: () => <Icon name={iconWechat} size={18} />,
|
|
|
- 'right-icon': () => (
|
|
|
- <Radio
|
|
|
- name="wx"
|
|
|
- v-slots={{
|
|
|
- icon: (props: any) => (
|
|
|
- <Icon
|
|
|
- class={styles.boxStyle}
|
|
|
- name={
|
|
|
- props.checked
|
|
|
- ? baseState.projectType === 'tenant'
|
|
|
- ? activeButtonIconTenant
|
|
|
- : activeButtonIcon
|
|
|
- : inactiveButtonIcon
|
|
|
- }
|
|
|
- />
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- ),
|
|
|
- title: () => (
|
|
|
- <div class={styles.payTypeRe}>
|
|
|
- 微信支付 <span class={styles.recommend}>推荐</span>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- ></Cell>
|
|
|
- <Cell
|
|
|
- title="支付宝支付"
|
|
|
- border={true}
|
|
|
- center
|
|
|
- onClick={() => {
|
|
|
- state.payType = 'zfb'
|
|
|
- }}
|
|
|
- v-slots={{
|
|
|
- icon: () => <Icon name={iconAlipay} size={18} />,
|
|
|
- 'right-icon': () => (
|
|
|
- <Radio
|
|
|
- name="zfb"
|
|
|
- v-slots={{
|
|
|
- icon: (props: any) => (
|
|
|
- <Icon
|
|
|
- class={styles.boxStyle}
|
|
|
- name={
|
|
|
- props.checked
|
|
|
- ? baseState.projectType === 'tenant'
|
|
|
- ? activeButtonIconTenant
|
|
|
- : activeButtonIcon
|
|
|
- : inactiveButtonIcon
|
|
|
- }
|
|
|
- />
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- )
|
|
|
- }}
|
|
|
- ></Cell>
|
|
|
+ {isWxPay.value && (
|
|
|
+ <Cell
|
|
|
+ border={true}
|
|
|
+ center
|
|
|
+ onClick={() => {
|
|
|
+ state.payType = 'wx'
|
|
|
+ }}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => <Icon name={iconWechat} size={18} />,
|
|
|
+ 'right-icon': () => (
|
|
|
+ <Radio
|
|
|
+ name="wx"
|
|
|
+ v-slots={{
|
|
|
+ icon: (props: any) => (
|
|
|
+ <Icon
|
|
|
+ class={styles.boxStyle}
|
|
|
+ name={
|
|
|
+ props.checked
|
|
|
+ ? baseState.projectType === 'tenant'
|
|
|
+ ? activeButtonIconTenant
|
|
|
+ : activeButtonIcon
|
|
|
+ : inactiveButtonIcon
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.payTypeRe}>
|
|
|
+ 微信支付 <span class={styles.recommend}>推荐</span>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ ></Cell>
|
|
|
+ )}
|
|
|
+ {isAliPay.value && (
|
|
|
+ <Cell
|
|
|
+ title="支付宝支付"
|
|
|
+ border={true}
|
|
|
+ center
|
|
|
+ onClick={() => {
|
|
|
+ state.payType = 'zfb'
|
|
|
+ }}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => <Icon name={iconAlipay} size={18} />,
|
|
|
+ 'right-icon': () => (
|
|
|
+ <Radio
|
|
|
+ name="zfb"
|
|
|
+ v-slots={{
|
|
|
+ icon: (props: any) => (
|
|
|
+ <Icon
|
|
|
+ class={styles.boxStyle}
|
|
|
+ name={
|
|
|
+ props.checked
|
|
|
+ ? baseState.projectType === 'tenant'
|
|
|
+ ? activeButtonIconTenant
|
|
|
+ : activeButtonIcon
|
|
|
+ : inactiveButtonIcon
|
|
|
+ }
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ ></Cell>
|
|
|
+ )}
|
|
|
</CellGroup>
|
|
|
</RadioGroup>
|
|
|
|
