<template>
|
<div class="select-pay-type-view">
|
<div class="select-pay-type-view-item" v-if="showAliPay" @click="handleAliPay">
|
<img class="select-pay-type-view-item-icon" :src="IconAliPay" />
|
<div class="select-pay-type-view-item-text">支付宝支付</div>
|
</div>
|
<div class="select-pay-type-view-item" v-if="showWeixinPay" @click="handleWeixinPay">
|
<img class="select-pay-type-view-item-icon" :src="IconWeixin" />
|
<div class="select-pay-type-view-item-text">微信支付</div>
|
</div>
|
<NutToast :msg="state.msg" v-model:visible="state.show" type="warn" cover />
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import IconWeixin from '../../../assets/icon-weixin-pay.png';
|
import IconAliPay from '../../../assets/icon-alipay.png';
|
import {
|
useLifeRechargeContext,
|
SetLifePayOrderPayTypeInput,
|
LifeRechargeConstants,
|
GetPayOrderForJsAPIInput,
|
} from '@life-payment/core-vue';
|
import { useQuery } from '@tanstack/vue-query';
|
import { Toast as NutToast } from '@nutui/nutui-taro';
|
import { reactive } from 'vue';
|
|
defineOptions({
|
name: 'SelectPayTypeView',
|
});
|
|
type Props = {
|
orderNo?: string;
|
lifePayOrderType?: LifeRechargeConstants.LifePayOrderTypeEnum;
|
showAliPay?: boolean;
|
showWeixinPay?: boolean;
|
openId?: string;
|
isInWeChat?: boolean;
|
isH5?: boolean;
|
appId?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
showAliPay: true,
|
showWeixinPay: true,
|
});
|
|
const emit = defineEmits<{
|
(
|
e: 'paySuccess',
|
orderNo: string,
|
lifePayOrderType: LifeRechargeConstants.LifePayOrderTypeEnum
|
): void;
|
(e: 'payOrderForJsAPISuccess'): void;
|
}>();
|
|
const state = reactive({
|
show: false,
|
msg: '',
|
});
|
|
const { blLifeRecharge } = useLifeRechargeContext();
|
|
async function handleAliPay() {
|
try {
|
let res = await setLifePayOrderPayType(blLifeRecharge.constants.LifePayTypeEnum.AliPay);
|
if (res) {
|
location.href = res;
|
}
|
} catch (error) {}
|
}
|
|
async function handleWeixinPay() {
|
if (props.isH5) {
|
if (props.isInWeChat) {
|
handleWeixinPayByJsApi();
|
} else {
|
// try {
|
// let res = await setLifePayOrderPayType(blLifeRecharge.constants.LifePayTypeEnum.WxPay);
|
// if (res) {
|
// location.href = res;
|
// }
|
// } catch (error) {}
|
state.msg = '请在微信中打开';
|
state.show = true;
|
}
|
}
|
}
|
|
async function handleWeixinPayByJsApi() {
|
try {
|
let params: GetPayOrderForJsAPIInput = {
|
orderNo: props.orderNo,
|
lifePayType: blLifeRecharge.constants.LifePayTypeEnum.WxPay,
|
openId: props.openId,
|
attach: Date.now().toString(),
|
};
|
let res = await blLifeRecharge.services.getPayOrderForJsAPI(params);
|
//@ts-ignore
|
if (res && WeixinJSBridge) {
|
//@ts-ignore
|
WeixinJSBridge.invoke(
|
'getBrandWCPayRequest',
|
{
|
appId: props.appId, //公众号ID，由商户传入
|
timeStamp: res.timestamp, //时间戳，自1970年以来的秒数
|
nonceStr: res.nonceStr, //随机串
|
package: res.package,
|
signType: res.signType, //微信签名方式：
|
paySign: res.paySign, //微信签名
|
},
|
function (res) {
|
if (res.err_msg == 'get_brand_wcpay_request:ok') {
|
// 使用以上方式判断前端返回,微信团队郑重提示：
|
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠，商户需进一步调用后端查单确认支付结果。
|
}
|
},
|
function (res) {
|
console.log('res: ', res);
|
}
|
);
|
}
|
} catch (error) {}
|
}
|
|
async function setLifePayOrderPayType(lifePayType: LifeRechargeConstants.LifePayTypeEnum) {
|
try {
|
let params: SetLifePayOrderPayTypeInput = {
|
orderNo: props.orderNo,
|
lifePayType: lifePayType,
|
};
|
return await blLifeRecharge.services.setLifePayOrderPayType(params);
|
} catch (error) {}
|
}
|
|
useQuery({
|
queryKey: ['platformServicePayServices/getPayStatusByOrderNo', props.orderNo],
|
queryFn: async () => {
|
return await blLifeRecharge.services.getPayStatusByOrderNo(
|
{
|
orderNo: props.orderNo,
|
},
|
{
|
showLoading: false,
|
}
|
);
|
},
|
onSuccess(data) {
|
if (data !== blLifeRecharge.constants.LifePayStatusEnum.未支付) {
|
emit('paySuccess', props.orderNo, props.lifePayOrderType);
|
}
|
},
|
refetchInterval: 1000 * 3,
|
});
|
</script>
|
