From 1327b99efda99ada27a956981648950f580314b0 Mon Sep 17 00:00:00 2001 From: zhengyiming <540361168@qq.com> Date: 星期四, 22 五月 2025 14:17:47 +0800 Subject: [PATCH] fix: 修改ui --- packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue | 66 +++++++++++++++++++++++++++++--- 1 files changed, 59 insertions(+), 7 deletions(-) diff --git a/packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue b/packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue index 95cf51f..2b50807 100644 --- a/packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue +++ b/packages/components/src/views/SelectPayTypeView/SelectPayTypeView.vue @@ -1,27 +1,79 @@ <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> <script setup lang="ts"> -import IconWeixin from '../../../assets/icon-weixin-pay.png'; -import IconAliPay from '../../../assets/icon-alipay.png'; +import IconWeixin from '../../assets/icon-weixin-pay.png'; +import IconAliPay from '../../assets/icon-alipay.png'; +import { LifeRechargeConstants } from '@life-payment/core-vue'; +import { Toast as NutToast } from '@nutui/nutui-taro'; +import { computed, toRef } from 'vue'; +import { useSelectPayType, useGetPayStatusByOrderNo } from '../../hooks/selectPayType'; defineOptions({ name: 'SelectPayTypeView', }); -// type Props = {}; +type Props = { + orderNo?: string; + lifePayOrderType?: LifeRechargeConstants.LifePayOrderTypeEnum; + showAliPay?: boolean; + showWeixinPay?: boolean; + isInWeChat?: boolean; + isH5?: boolean; + appId?: string; + isFocus?: boolean; + getOpenId?: () => Promise<string>; +}; -// const props = withDefaults(defineProps<Props>(), {}); +const props = withDefaults(defineProps<Props>(), { + showAliPay: true, + showWeixinPay: true, +}); -function handleAliPay() {} +const emit = defineEmits<{ + ( + e: 'paySuccess', + orderNo: string, + lifePayOrderType: LifeRechargeConstants.LifePayOrderTypeEnum + ): void; + (e: 'payOrderForJsAPISuccess'): void; +}>(); + +const { state, invokeAliPay, invokeWeixinPay } = useSelectPayType({ + getOpenId: toRef(props, 'getOpenId'), + isInWeChat: toRef(props, 'isInWeChat'), + isH5: toRef(props, 'isH5'), + appId: toRef(props, 'appId'), +}); + +async function handleAliPay() { + try { + await invokeAliPay(props.orderNo); + } catch (error) {} +} + +async function handleWeixinPay() { + try { + await invokeWeixinPay(props.orderNo); + } catch (error) {} +} + +useGetPayStatusByOrderNo({ + orderNo: toRef(props, 'orderNo'), + enabled: computed(() => props.isFocus), + onPaySuccess() { + emit('paySuccess', props.orderNo, props.lifePayOrderType); + }, +}); </script> -- Gitblit v1.9.1