|
@@ -5,11 +5,17 @@ import {
|
|
|
Icon,
|
|
|
RadioGroup,
|
|
|
Radio,
|
|
|
- showConfirmDialog
|
|
|
+ showConfirmDialog,
|
|
|
+ showLoadingToast,
|
|
|
+ closeToast,
|
|
|
+ showDialog
|
|
|
} from 'vant';
|
|
|
-import { defineComponent, reactive } from 'vue';
|
|
|
+import { computed, defineComponent, reactive } from 'vue';
|
|
|
import styles from './index.module.less';
|
|
|
import { browser, moneyFormat } from '@/helpers/utils';
|
|
|
+import request from '@/helpers/request';
|
|
|
+import { listenerMessage, postMessage } from '@/helpers/native-message';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'payment',
|
|
@@ -17,10 +23,15 @@ export default defineComponent({
|
|
|
paymentConfig: {
|
|
|
type: Object,
|
|
|
default: {}
|
|
|
+ },
|
|
|
+ config: {
|
|
|
+ type: Object,
|
|
|
+ default: {}
|
|
|
}
|
|
|
},
|
|
|
emits: ['backOut', 'close', 'confirm'],
|
|
|
setup(props, { slots, attrs, emit }) {
|
|
|
+ const router = useRouter();
|
|
|
const state = reactive({
|
|
|
payType: 'wx',
|
|
|
pay_channel: ''
|
|
@@ -39,10 +50,138 @@ export default defineComponent({
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ const isWxPay = computed(() => {
|
|
|
+ const paymentChannels = props.config.paymentChannel || '';
|
|
|
+ if (paymentChannels) {
|
|
|
+ if (paymentChannels.toUpperCase().indexOf('WX') !== -1) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const isAliPay = computed(() => {
|
|
|
+ const paymentChannels = props.config.paymentChannel || '';
|
|
|
+ if (paymentChannels) {
|
|
|
+ if (paymentChannels.toUpperCase().indexOf('ALI') !== -1) {
|
|
|
+ return true;
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
// 需要关闭订单
|
|
|
const onCancel = async (noBack?: boolean) => {};
|
|
|
const onSubmit = async () => {
|
|
|
// 支付...
|
|
|
+
|
|
|
+ if (props.config.paymentType === 'original') {
|
|
|
+ submitNativePay();
|
|
|
+ } else {
|
|
|
+ submitQrCodePay();
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ const submitNativePay = async () => {
|
|
|
+ // 支付...
|
|
|
+ try {
|
|
|
+ // const payChannel = state.payType === 'zfb' ? 'alipay-app' : 'wxpay-app';
|
|
|
+ let paymentChannels = props.config.paymentChannel || '';
|
|
|
+ paymentChannels = paymentChannels.split(',');
|
|
|
+ // const payChannel = paymentChannels.map((item: any) => item.indexOf(''))
|
|
|
+ let payChannel = '';
|
|
|
+ paymentChannels.forEach((item: any) => {
|
|
|
+ if (
|
|
|
+ state.payType === 'zfb' &&
|
|
|
+ item.toUpperCase().indexOf('ALI') !== -1
|
|
|
+ ) {
|
|
|
+ payChannel = item;
|
|
|
+ } else if (
|
|
|
+ state.payType === 'wx' &&
|
|
|
+ item.toUpperCase().indexOf('WX') !== -1
|
|
|
+ ) {
|
|
|
+ payChannel = item;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log(state.payType, 'state.payType');
|
|
|
+ let paymentType = props.config.paymentType;
|
|
|
+
|
|
|
+ const payMap: any = {
|
|
|
+ merOrderNo: props.paymentConfig.orderNo,
|
|
|
+ paymentChannel: payChannel, // 支付渠道
|
|
|
+ paymentType: paymentType,
|
|
|
+ userId: props.paymentConfig.userId
|
|
|
+ };
|
|
|
+
|
|
|
+ const { data } = await request.post(
|
|
|
+ '/edu-app/open/userOrder/executePayment',
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ ...payMap
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ postMessage({
|
|
|
+ api: 'paymentOrder',
|
|
|
+ content: {
|
|
|
+ orderNo: props.paymentConfig.orderNo,
|
|
|
+ payChannel: state.payType === 'zfb' ? 'ali_app' : 'wx_app',
|
|
|
+ payInfo: data.reqParams.body || JSON.stringify(data.reqParams)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ showLoadingToast({
|
|
|
+ message: '支付中...',
|
|
|
+ forbidClick: true,
|
|
|
+ duration: 3000,
|
|
|
+ loadingType: 'spinner'
|
|
|
+ });
|
|
|
+ emit('close');
|
|
|
+ // 唤起支付时状态
|
|
|
+ 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 只有安卓端有
|
|
|
+ closeToast();
|
|
|
+ if (res.status === 'success' || res.status === 'error') {
|
|
|
+ emit('close');
|
|
|
+ router.replace({
|
|
|
+ path: '/payment-result',
|
|
|
+ query: {
|
|
|
+ orderNo: props.paymentConfig.orderNo
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (res.status === 'cancel') {
|
|
|
+ emit('close');
|
|
|
+ } else if (res.status === 'fail') {
|
|
|
+ const message =
|
|
|
+ state.payType === 'zfb' ? '您尚未安装支付宝' : '您尚未安装微信';
|
|
|
+ showDialog({
|
|
|
+ title: '提示',
|
|
|
+ message
|
|
|
+ }).then(() => {
|
|
|
+ emit('close');
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const submitQrCodePay = () => {
|
|
|
const pt = state.payType;
|
|
|
// 判断当前浏览器
|
|
|
if (browser().weixin) {
|
|
@@ -96,34 +235,38 @@ 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="wechat-pay" color="#15c434" size={22} />
|
|
|
- ),
|
|
|
- 'right-icon': () => <Radio name="wx" />,
|
|
|
- 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="alipay" color="#009fe9" size={22} />,
|
|
|
- 'right-icon': () => <Radio name="zfb" />
|
|
|
- }}></Cell>
|
|
|
+ {isWxPay.value && (
|
|
|
+ <Cell
|
|
|
+ border={true}
|
|
|
+ center
|
|
|
+ onClick={() => {
|
|
|
+ state.payType = 'wx';
|
|
|
+ }}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => (
|
|
|
+ <Icon name="wechat-pay" color="#15c434" size={22} />
|
|
|
+ ),
|
|
|
+ 'right-icon': () => <Radio name="wx" />,
|
|
|
+ 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="alipay" color="#009fe9" size={22} />,
|
|
|
+ 'right-icon': () => <Radio name="zfb" />
|
|
|
+ }}></Cell>
|
|
|
+ )}
|
|
|
</CellGroup>
|
|
|
</RadioGroup>
|
|
|
|