| | |
| | | <template> |
| | | <div class="select-pay-type-view"> |
| | | <div class="select-pay-type-view-item" @click="handleAliPay"> |
| | | <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"> |
| | | <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> |
| | | |
| | |
| | | useLifeRechargeContext, |
| | | SetLifePayOrderPayTypeInput, |
| | | LifeRechargeConstants, |
| | | } from '../../utils'; |
| | | GetPayOrderForJsAPIInput, |
| | | } from '@life-payment/core-vue'; |
| | | import { useQuery } from '@tanstack/vue-query'; |
| | | import { Toast as NutToast } from '@nutui/nutui-taro'; |
| | | import { onMounted, reactive, ref, computed } from 'vue'; |
| | | |
| | | defineOptions({ |
| | | name: 'SelectPayTypeView', |
| | |
| | | type Props = { |
| | | orderNo?: string; |
| | | lifePayOrderType?: LifeRechargeConstants.LifePayOrderTypeEnum; |
| | | showAliPay?: boolean; |
| | | showWeixinPay?: boolean; |
| | | openId?: string; |
| | | isInWeChat?: boolean; |
| | | isH5?: boolean; |
| | | appId?: string; |
| | | isFocus?: boolean; |
| | | }; |
| | | |
| | | const props = withDefaults(defineProps<Props>(), {}); |
| | | const props = withDefaults(defineProps<Props>(), { |
| | | showAliPay: true, |
| | | showWeixinPay: true, |
| | | }); |
| | | |
| | | const emit = defineEmits<{ |
| | | ( |
| | |
| | | orderNo: string, |
| | | lifePayOrderType: LifeRechargeConstants.LifePayOrderTypeEnum |
| | | ): void; |
| | | (e: 'payOrderForJsAPISuccess'): void; |
| | | }>(); |
| | | |
| | | const state = reactive({ |
| | | show: false, |
| | | msg: '', |
| | | }); |
| | | |
| | | const { blLifeRecharge } = useLifeRechargeContext(); |
| | | |
| | |
| | | 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,但并不保证它绝对可靠,商户需进一步调用后端查单确认支付结果。 |
| | | } else if (res.err_msg == 'system:access_denied') { |
| | | state.msg = '请在手机微信中打开'; |
| | | state.show = true; |
| | | } else { |
| | | state.msg = res.err_msg; |
| | | state.show = true; |
| | | } |
| | | } |
| | | ); |
| | | } |
| | | } catch (error) {} |
| | | } |
| | |
| | | ); |
| | | }, |
| | | onSuccess(data) { |
| | | if (data === blLifeRecharge.constants.LifePayStatusEnum.已支付) { |
| | | if (data !== blLifeRecharge.constants.LifePayStatusEnum.未支付) { |
| | | emit('paySuccess', props.orderNo, props.lifePayOrderType); |
| | | } |
| | | }, |
| | | refetchInterval: 1000 * 3, |
| | | enabled: computed(() => props.isFocus), |
| | | }); |
| | | </script> |