<template>
|
<Chunk
|
borderRadiusSmall
|
:hasPaddingBottom="false"
|
style="padding: 0"
|
class="select-pay-type-view"
|
>
|
<div class="select-pay-type-form-item-title">选择支付方式</div>
|
<NutFormItem class="bole-form-item" prop="lifePayType" required style="padding-bottom: 0">
|
<NutRadioGroup
|
v-model="lifePayType"
|
text-position="left"
|
class="select-pay-type-view-form-item-radio-group"
|
>
|
<BlRadio
|
:label="LifeRechargeConstants.LifePayTypeEnum.AliPay"
|
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"
|
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>
|
</Chunk>
|
</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';
|
import Chunk from '../Layout/Chunk.vue';
|
|
defineOptions({
|
name: 'SelectPayTypeFormItem',
|
});
|
|
type Props = {
|
showAliPay?: boolean;
|
showWeixinPay?: boolean;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
showAliPay: true,
|
showWeixinPay: true,
|
});
|
|
const lifePayType = defineModel<LifeRechargeConstants.LifePayTypeEnum>();
|
</script>
|
