feat: UI

wupengfei

1 天以前 2500843dbffc841eeab2e0a91d735c56cb6ea357

 packages/components/src/components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue

@@ -1,20 +1,46 @@
<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"
  <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"
      >
        <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>
        <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">
@@ -23,15 +49,21 @@
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',
});

const lifePayType = defineModel<LifeRechargeConstants.LifePayTypeEnum>();

const IconMap = {
  [LifeRechargeConstants.LifePayTypeEnum.WxPay]: IconWeixin,
  [LifeRechargeConstants.LifePayTypeEnum.AliPay]: IconAliPay,
type Props = {
  showAliPay?: boolean;
  showWeixinPay?: boolean;
};

const props = withDefaults(defineProps<Props>(), {
  showAliPay: true,
  showWeixinPay: true,
});

const lifePayType = defineModel<LifeRechargeConstants.LifePayTypeEnum>();
</script>