<template>
|
<NutFormItem label="选择支付方式" class="bole-form-item" prop="lifePayType" required>
|
<NutRadioGroup v-model="lifePayType" direction="horizontal">
|
<BlRadio
|
:label="LifeRechargeConstants.LifePayTypeEnum.AliPay"
|
shape="button"
|
class="select-pay-type-view-form-item-radio"
|
v-if="showAliPay"
|
>
|
<div class="select-pay-type-view-form-item">
|
<img class="select-pay-type-view-form-item-icon" :src="IconAliPay" />
|
{{
|
LifeRechargeConstants.LifePayTypeEnumText[LifeRechargeConstants.LifePayTypeEnum.AliPay]
|
}}
|
</div>
|
</BlRadio>
|
<BlRadio
|
:label="LifeRechargeConstants.LifePayTypeEnum.WxPay"
|
shape="button"
|
class="select-pay-type-view-form-item-radio"
|
v-if="showWeixinPay"
|
>
|
<div class="select-pay-type-view-form-item">
|
<img class="select-pay-type-view-form-item-icon" :src="IconWeixin" />
|
{{
|
LifeRechargeConstants.LifePayTypeEnumText[LifeRechargeConstants.LifePayTypeEnum.WxPay]
|
}}
|
</div>
|
</BlRadio>
|
</NutRadioGroup>
|
</NutFormItem>
|
</template>
|
|
<script setup lang="ts">
|
import { LifeRechargeConstants } from '@life-payment/core-vue';
|
import { FormItem as NutFormItem, RadioGroup as NutRadioGroup } from '@nutui/nutui-taro';
|
import BlRadio from '../Radio/Radio.vue';
|
import IconWeixin from '../../assets/icon-weixin-pay.png';
|
import IconAliPay from '../../assets/icon-alipay.png';
|
|
defineOptions({
|
name: 'SelectPayTypeFormItem',
|
});
|
|
type Props = {
|
showAliPay?: boolean;
|
showWeixinPay?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
showAliPay: true,
|
showWeixinPay: true,
|
});
|
|
const lifePayType = defineModel<LifeRechargeConstants.LifePayTypeEnum>();
|
</script>
|
