From 1ba3a11308cf59c513d70fbc3608961f19a02621 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 14 五月 2025 17:41:50 +0800
Subject: [PATCH] fix: ui
---
packages/components/src/views/RechargeGrid/RechargeGrid.vue | 58 ++++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 48 insertions(+), 10 deletions(-)
diff --git a/packages/components/src/views/RechargeGrid/RechargeGrid.vue b/packages/components/src/views/RechargeGrid/RechargeGrid.vue
index cb56872..c99dbee 100644
--- a/packages/components/src/views/RechargeGrid/RechargeGrid.vue
+++ b/packages/components/src/views/RechargeGrid/RechargeGrid.vue
@@ -1,21 +1,51 @@
<template>
- <MainCell title="鐢熸椿缂磋垂">
- <Grid square :gutter="20" :column-num="2">
- <GridItem class="publish-circle-friend-file-grid-item" text="璇濊垂">
- <Dongdong />
+ <MainCell title="蹇�熺即璐�">
+ <!-- <Grid square :gutter="20" :column-num="2" class="recharge-grid-wrapper">
+ <GridItem class="recharge-grid-item" text="璇濊垂" @click="emit('phoneBillRecharge')">
+ <img :src="IconFreePhone" class="recharge-grid-item-icon" />
+ <div class="discountTag" v-if="lifePayPhoneRate > 0">{{ lifePayPhoneRate }}鎶�</div>
</GridItem>
- <GridItem class="publish-circle-friend-file-grid-item" text="鐢佃垂">
- <Dongdong />
+ <GridItem class="recharge-grid-item" text="鐢佃垂" @click="emit('electricityBillRecharge')">
+ <img :src="IconFreeDian" class="recharge-grid-item-icon" />
+ <div class="discountTag" v-if="lifePayElectricRate > 0">{{ lifePayElectricRate }}鎶�</div>
</GridItem>
- </Grid>
+ <GridItem class="recharge-grid-item" text="鐕冩皵" @click="emit('gasBillRecharge')">
+ <img :src="IconFreeGas" class="recharge-grid-item-icon" />
+ <div class="discountTag" v-if="lifePayGasRate > 0">{{ lifePayGasRate }}鎶�</div>
+ </GridItem>
+ </Grid> -->
+ <div class="recharge-list-wrapper">
+ <div class="recharge-list-item">
+ <img :src="IconFreePhone" class="recharge-list-item-icon" />
+ <div class="recharge-list-item-text">璇濊垂</div>
+ <NutButton type="primary" class="recharge-list-item-button">绔嬪嵆缂磋垂</NutButton>
+ </div>
+ <div class="recharge-list-item">
+ <img :src="IconFreeDian" class="recharge-list-item-icon" />
+ <div class="recharge-list-item-text">鐢佃垂</div>
+ <NutButton type="primary" class="recharge-list-item-button">绔嬪嵆缂磋垂</NutButton>
+ </div>
+ <div class="recharge-list-item">
+ <img :src="IconFreeGas" class="recharge-list-item-icon" />
+ <div class="recharge-list-item-text">鐕冩皵璐�</div>
+ <NutButton type="primary" class="recharge-list-item-button">绔嬪嵆缂磋垂</NutButton>
+ </div>
+ </div>
</MainCell>
</template>
<script setup lang="ts">
import MainCell from '../../components/Layout/MainCell.vue';
-// import Grid from '../../components/Grid/Grid.vue';
-import { Grid, GridItem } from '@nutui/nutui-taro';
-import { Dongdong } from '@nutui/icons-vue-taro';
+import { Button as NutButton } from '@nutui/nutui-taro';
+import IconFreePhone from '../../assets/icon-free-phone.png';
+console.log(
+ 'IconFreePhone: ',
+ IconFreePhone,
+ new URL('../../assets/icon-free-phone.png', import.meta.url)
+);
+import IconFreeDian from '../../assets/icon-free-dian.png';
+import IconFreeGas from '../../assets/icon-free-gas.png';
+import { useGetRate } from '../../hooks';
defineOptions({
name: 'RechargeGrid',
@@ -24,4 +54,12 @@
// type Props = {};
// const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+ (e: 'phoneBillRecharge'): void;
+ (e: 'electricityBillRecharge'): void;
+ (e: 'gasBillRecharge'): void;
+}>();
+
+const { lifePayPhoneRate, lifePayElectricRate, lifePayGasRate } = useGetRate();
</script>
--
Gitblit v1.9.1