From 758d8056dc3dbc6bf92c298aa3627e66b933b5a0 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期四, 22 五月 2025 13:25:21 +0800
Subject: [PATCH] feat: UI
---
packages/components/src/components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue | 72 ++++++++++++++++++++++++++----------
1 files changed, 52 insertions(+), 20 deletions(-)
diff --git a/packages/components/src/components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue b/packages/components/src/components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue
index 7a01ca9..7fc78d3 100644
--- a/packages/components/src/components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue
+++ b/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>
--
Gitblit v1.9.1