<template>
|
<NutFormItem label="选择支付方式" class="bole-form-item" prop="lifePayType" required>
|
<NutRadioGroup v-model="lifePayType" direction="horizontal">
|
<BlRadio
|
:label="Number(lifePayTypeEnum)"
|
v-for="(lifePayTypeEnumText, lifePayTypeEnum) in LifeRechargeConstants.LifePayTypeEnumText"
|
:key="lifePayTypeEnum"
|
shape="button"
|
class="select-pay-type-view-form-item-radio"
|
>
|
<div class="select-pay-type-view-form-item">
|
<img class="select-pay-type-view-form-item-icon" :src="IconMap[lifePayTypeEnum]" />
|
{{ lifePayTypeEnumText }}
|
</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',
|
});
|
|
const lifePayType = defineModel<LifeRechargeConstants.LifePayTypeEnum>();
|
|
const IconMap = {
|
[LifeRechargeConstants.LifePayTypeEnum.WxPay]: IconWeixin,
|
[LifeRechargeConstants.LifePayTypeEnum.AliPay]: IconAliPay,
|
};
|
</script>
|
