From 92be5ef4fbb40e84e737d6ba8ef8dd0a741abc34 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 21 二月 2025 14:52:13 +0800
Subject: [PATCH] feat: 电费
---
packages/components/src/views/electricBillRecharge/electricBillRecharge.vue | 124 +++++++++++++++++++++++++++++++
apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue | 19 ++++
apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.config.ts | 3
apps/taro/src/pages/home/index.vue | 16 +++
apps/taro/src/app.config.ts | 1
apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue | 20 +++++
apps/taro/src/constants/router.ts | 1
7 files changed, 183 insertions(+), 1 deletions(-)
diff --git a/apps/taro/src/app.config.ts b/apps/taro/src/app.config.ts
index 2b836ec..1452de5 100644
--- a/apps/taro/src/app.config.ts
+++ b/apps/taro/src/app.config.ts
@@ -55,6 +55,7 @@
root: 'subpackages/recharge',
pages: [
'phoneBillRecharge/phoneBillRecharge',
+ 'electricBillRecharge/electricBillRecharge',
'selectPayType/selectPayType',
'rechargeResult/rechargeResult',
],
diff --git a/apps/taro/src/constants/router.ts b/apps/taro/src/constants/router.ts
index 239feab..e7dbf76 100644
--- a/apps/taro/src/constants/router.ts
+++ b/apps/taro/src/constants/router.ts
@@ -9,6 +9,7 @@
mine = '/pages/mine/index',
phoneBillRecharge = '/subpackages/recharge/phoneBillRecharge/phoneBillRecharge',
+ electricBillRecharge = '/subpackages/recharge/electricBillRecharge/electricBillRecharge',
selectPayType = '/subpackages/recharge/selectPayType/selectPayType',
rechargeResult = '/subpackages/recharge/rechargeResult/rechargeResult',
}
diff --git a/apps/taro/src/pages/home/index.vue b/apps/taro/src/pages/home/index.vue
index f92134b..49528bf 100644
--- a/apps/taro/src/pages/home/index.vue
+++ b/apps/taro/src/pages/home/index.vue
@@ -1,7 +1,10 @@
<template>
<PageLayoutWithBg class="index-page-wrapper" :title="'鐢熸椿缂磋垂'" :need-auth="false">
<ContentView>
- <RechargeGrid @phoneBillRecharge="goPhoneBillRecharge" />
+ <RechargeGrid
+ @phoneBillRecharge="goPhoneBillRecharge"
+ @electricityBillRecharge="goElectricityBillRecharge"
+ />
</ContentView>
</PageLayoutWithBg>
</template>
@@ -25,6 +28,17 @@
console.error('Navigation failed:', err);
});
}
+function goElectricityBillRecharge() {
+ Taro.navigateTo({
+ url: `${RouterPath.electricBillRecharge}`,
+ })
+ .then(() => {
+ console.log('Navigate successfully');
+ })
+ .catch((err) => {
+ console.error('Navigation failed:', err);
+ });
+}
</script>
<style lang="scss">
diff --git a/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue b/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
new file mode 100644
index 0000000..97bebf1
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
@@ -0,0 +1,20 @@
+<template>
+ <ContentScrollView :paddingH="false">
+ <PhoneBillRecharge @goPay="goPay" />
+ </ContentScrollView>
+</template>
+
+<script setup lang="ts">
+import { PhoneBillRecharge } from '@life-payment/components';
+import Taro from '@tarojs/taro';
+
+defineOptions({
+ name: 'InnerPage',
+});
+
+function goPay() {
+ Taro.navigateTo({
+ url: RouterPath.selectPayType,
+ });
+}
+</script>
diff --git a/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.config.ts b/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.config.ts
new file mode 100644
index 0000000..305fdb1
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+ disableScroll: true,
+});
diff --git a/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue b/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue
new file mode 100644
index 0000000..4163f04
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue
@@ -0,0 +1,19 @@
+<template>
+ <PageLayout
+ title="鐢佃垂鍏呭��"
+ class="electricBillRecharge-page-wrapper"
+ hasBorder
+ :need-auth="false"
+ >
+ <InnerPage />
+ </PageLayout>
+</template>
+
+<script setup lang="ts">
+import { PageLayout } from '@/components';
+import InnerPage from './InnerPage.vue';
+
+defineOptions({
+ name: 'electricBillRecharge',
+});
+</script>
diff --git a/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue b/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue
new file mode 100644
index 0000000..b072c16
--- /dev/null
+++ b/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue
@@ -0,0 +1,124 @@
+<template>
+ <Form
+ :model-value="form"
+ ref="formRef"
+ :rules="rules"
+ label-position="top"
+ class="phone-bill-recharge"
+ >
+ <FormItem label="鍏呭�兼墜鏈哄彿" class="bole-form-item" prop="phone" required>
+ <Input
+ v-model.trim="form.phone"
+ class="bole-input-text"
+ placeholder="璇峰～鍐欐偍闇�瑕佸厖鍊肩殑鎵嬫満鍙风爜"
+ type="text"
+ />
+ </FormItem>
+ <FormItem label="閫夋嫨鍏呭�奸噾棰�" class="bole-form-item" prop="parValue" required>
+ <RadioGroup v-model="form.parValue" direction="horizontal" class="parValue-radio-group">
+ <Radio
+ :label="item"
+ :key="item"
+ shape="button"
+ v-for="item in parValueList"
+ class="parValue-item"
+ >
+ <div class="parValue-item-inner">
+ <div class="amount-wrapper">
+ <div class="amount">{{ item }}</div>
+ <div class="unit">鍏�</div>
+ </div>
+ <div class="price-wrapper">
+ <div class="price-text">鎶樺悗</div>
+ <div class="price">{{ blLifeRecharge.getRechargeParValue(item, rate) }}鍏�</div>
+ </div>
+ <div class="discountTag">{{ rate * 100 }}鎶�</div>
+ </div>
+ </Radio>
+ </RadioGroup>
+ </FormItem>
+ <div class="common-content">
+ <nut-button class="recharge-button" type="primary" @click="recharge">
+ <div class="recharge-button-inner">
+ <div>锟{ form.parValue }}</div>
+ <div class="recharge-button-text">绔嬪嵆鍏呭��</div>
+ </div>
+ </nut-button>
+ <RechargeTipsView :tips="tips" />
+ </div>
+ <ConfirmDialog v-model:visible="confirmDialogVisible" @ok="goPay">
+ <template #info>
+ <ConfirmDialogInfoItem label="鍏呭�艰处鍙�" content="18858418480" />
+ <ConfirmDialogInfoItem label="鍏呭�奸噾棰�" :content="`锟�${form.parValue}`" danger />
+ <ConfirmDialogInfoItem label="浼樻儬閲戦" :content="`锟�${discountParValue}`" />
+ <ConfirmDialogInfoItem label="瀹炰粯閲戦" :content="`锟�${realParValue}`" danger />
+ </template>
+ </ConfirmDialog>
+ </Form>
+</template>
+
+<script setup lang="ts">
+import { Form, FormItem, RadioGroup, Radio, Input, Button as NutButton } from '@nutui/nutui-taro';
+import { FormRules } from '@nutui/nutui-taro/dist/types/__VUE/form/types';
+import { reactive, ref, computed } from 'vue';
+import BlRadio from '../../components/Radio/Radio.vue';
+import { IspCodeText, IspCode } from '../../constants';
+import { useLifeRechargeContext } from '../../utils';
+import RechargeTipsView from '../../components/RechargeTipsView/RechargeTipsView.vue';
+import ConfirmDialog from '../../components/Dialog/ConfirmDialog.vue';
+import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue';
+
+defineOptions({
+ name: 'electricBillRecharge',
+});
+
+const emit = defineEmits<{
+ (e: 'goPay'): void;
+}>();
+
+const form = reactive({
+ ispCode: IspCode.yidong,
+ phone: '',
+ parValue: 100,
+});
+
+const rate = 0.96;
+
+const parValueList = [50, 100, 200];
+
+const realParValue = computed(() => blLifeRecharge.getRechargeParValue(form.parValue, rate));
+const discountParValue = computed(() => form.parValue - Number(realParValue.value));
+
+const { blLifeRecharge } = useLifeRechargeContext();
+
+const rules = reactive<FormRules>({});
+
+const formRef = ref<any>(null);
+
+function handleSubmit() {
+ if (!formRef.value) return;
+ formRef.value.validate().then(({ valid, errors }: any) => {
+ if (valid) {
+ }
+ });
+}
+
+const tips = [
+ '骞冲彴鎻愪緵鎱㈠厖鏈嶅姟锛岃鍗曟彁浜ゅ悗锛岃瘽璐瑰皢浜�0 - 24灏忔椂鍐呭埌璐︺�傝嫢鏈兘鎸夋椂鍒拌处锛岀郴缁熷皢鑷姩鍙戣捣閫�娆俱��',
+ '鍏呭�兼湡闂达紝鑻ュ悓涓�鍙风爜娆鹃」鏈埌璐︼紝璇峰嬁鍦ㄥ叾浠栧钩鍙伴噸澶嶅厖鍊硷紱涓诲壇鍗′笉鍙悓鏃跺厖鍊笺�傚洜涓婅堪鎿嶄綔瀵艰嚧鐨勮祫閲戞崯澶憋紝鐢辩敤鎴疯嚜琛屾壙鎷呫��',
+ '鏈钩鍙拌瘽璐瑰厖鍊兼湇鍔′笉閫傜敤浜庡凡鍋滄満鍙风爜銆傜數淇″彿鐮佽嫢鏈夋瑺璐癸紝涔熸棤娉曞畬鎴愬厖鍊笺�傜數淇″凡瀹屾垚缁存姢鐨勫尯鍩熷寘鎷細骞夸笢銆佹睙鑻忋�佹箹鍖椼�佸洓宸濄�佹睙瑗裤�佹渤鍖椼�佹渤鍗椼�佺寤恒�佽窘瀹併�傚叾瀹冨尯鍩熸鍦ㄥ垎鎵规杩涜缁存姢涓紝鍦ㄦ鏈熼棿鍙兘浼氬嚭鐜板厖鍊间笉鎴愬姛骞惰嚜鍔ㄩ��娆剧殑鎯呭喌锛岃鎮ㄨ皡瑙ｃ��',
+ '濡傛帴鍒伴檶鐢熸潵鐢碉紝瀵规柟浠ョ即璐规垨璇搷浣滅瓑鐞嗙敱瑕佹眰澶勭悊娆鹃」锛屽姟蹇呯珛鍗虫媺榛戯紝璋ㄩ槻璇堥獥銆�',
+ '鍞悗鏈嶅姟鏈熶负鍏呭�煎畬鎴愪箣鏃ヨ捣3澶┿�傜敵璇峰敭鍚庢湇鍔℃椂锛岄渶鎻愪緵褰曞睆璇佹嵁锛岃纭鎺ュ彈姝よ姹傚悗鍐嶄笅鍗曪紝閫炬湡骞冲彴涓嶅啀鍙楃悊鍞悗鐢宠銆�',
+ '鍏呭�煎彂绁ㄧ敱杩愯惀鍟嗘彁渚涳紝鎮ㄥ彲鐧诲綍缃戜笂钀ヤ笟鍘呬笅杞界數瀛愬彂绁ㄣ��',
+];
+
+const confirmDialogVisible = ref(false);
+
+function recharge() {
+ confirmDialogVisible.value = true;
+}
+
+function goPay() {
+ emit('goPay');
+}
+</script>
--
Gitblit v1.9.1