root/riwa-ionic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加IonRippleEffect组件到wallet-card，优化充值和提现按钮的交互效果

Browse Source
This commit is contained in:
Seven
2025-12-17 03:59:38 +07:00
parent 2575fa4e00
commit 1cfa5e8618
2 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@@ -36,6 +36,7 @@ declare module 'vue' {
IonPage: typeof import('@ionic/vue')['IonPage'] IonPage: typeof import('@ionic/vue')['IonPage']
IonRadio: typeof import('@ionic/vue')['IonRadio'] IonRadio: typeof import('@ionic/vue')['IonRadio']
IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup'] IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup']
IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet'] IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
IonSearchbar: typeof import('@ionic/vue')['IonSearchbar'] IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
IonSelect: typeof import('@ionic/vue')['IonSelect'] IonSelect: typeof import('@ionic/vue')['IonSelect']
@@ -85,6 +86,7 @@ declare global {
const IonPage: typeof import('@ionic/vue')['IonPage'] const IonPage: typeof import('@ionic/vue')['IonPage']
const IonRadio: typeof import('@ionic/vue')['IonRadio'] const IonRadio: typeof import('@ionic/vue')['IonRadio']
const IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup'] const IonRadioGroup: typeof import('@ionic/vue')['IonRadioGroup']
const IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet'] const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar'] const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
const IonSelect: typeof import('@ionic/vue')['IonSelect'] const IonSelect: typeof import('@ionic/vue')['IonSelect']

26
src/views/user/components/wallet-card.vue
View File

@@ -1,4 +1,6 @@
<script lang='ts' setup> <script lang='ts' setup>
import IcRoundArrowCircleDown from "~icons/ic/round-arrow-circle-down";
import IcRoundArrowCircleUp from "~icons/ic/round-arrow-circle-up";
import RechargeChannel from "./recharge-channel.vue"; import RechargeChannel from "./recharge-channel.vue";
const { t } = useI18n(); const { t } = useI18n();
@@ -31,17 +33,27 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="px-2.5 pb-5 bg-(--ion-card-background)"> <div class="flex mt-7 gap-10">
<ion-buttons class="gap-2.5" expand="block"> <div id="open-recharge-modal" class="flex-col-center">
<ion-button id="open-recharge-modal" expand="block" fill="clear"> <ion-ripple-effect />
<ion-button shape="round" color="success" size="large">
<IcRoundArrowCircleDown slot="icon-only" />
</ion-button>
<div class="text-center mt-2 text-sm font-medium text-text-500">
{{ t("wallet.recharge") }} {{ t("wallet.recharge") }}
</ion-button> </div>
</div>
<ion-button expand="block" fill="clear" @click="handleWithdraw"> <div class="flex-col-center" @click="handleWithdraw">
{{ t("wallet.withdraw") }} <ion-ripple-effect />
<ion-button shape="round" color="success" size="large">
<IcRoundArrowCircleUp slot="icon-only" />
</ion-button> </ion-button>
</ion-buttons> <div class="text-center mt-2 text-sm font-medium text-text-500">
{{ t("wallet.withdraw") }}
</div>
</div> </div>
</div> </div>