From 456de36d8e21416cdd2439437bdfd9460dcd15be Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期五, 21 二月 2025 16:35:24 +0800
Subject: [PATCH] Merge branch 'master' of http://120.26.58.240:8888/r/LifePaymentFront

---
 packages/components/src/views/electricBillRecharge/electricBillRecharge.vue            |  164 ++++++++++++++
 packages/components/src/components/Input/ChooseInput.vue                               |   37 +++
 apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue       |   19 +
 apps/taro/src/app.config.ts                                                            |    1 
 apps/taro/src/pages/mine/index.vue                                                     |   11 
 packages/components/src/components/Input/input.ts                                      |    4 
 apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue                  |   20 +
 packages/components/src/components/Input/ChooseInputWithPicker.vue                     |   73 ++++++
 apps/taro/src/constants/router.ts                                                      |    1 
 apps/taro/src/components/Input/CommonInputField.vue                                    |   39 +++
 packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue                  |    2 
 apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.config.ts |    3 
 packages/components/src/index.ts                                                       |    1 
 apps/taro/src/components/Input/ChooseInput.vue                                         |   37 +++
 apps/taro/src/pages/home/index.vue                                                     |   10 
 packages/components/src/components/Dialog/ConfirmDialog.vue                            |   10 
 apps/taro/src/components/Input/ChooseInputWithDatePicker.vue                           |   58 +++++
 apps/taro/src/components/Input/ChooseInputWithPicker.vue                               |   73 ++++++
 apps/taro/src/components/Input/NumberInput.vue                                         |   71 ++++++
 apps/taro/src/components/Input/input.ts                                                |    4 
 packages/components/src/styles/rechargeGrid.scss                                       |    2 
 21 files changed, 633 insertions(+), 7 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/components/Input/ChooseInput.vue b/apps/taro/src/components/Input/ChooseInput.vue
new file mode 100644
index 0000000..6486c46
--- /dev/null
+++ b/apps/taro/src/components/Input/ChooseInput.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-input
+    class="nut-input-text bole-input-text"
+    type="text"
+    readonly
+    alwaysEmbed
+    v-bind="$attrs"
+  >
+    <template #clear>
+      <slot name="clear"></slot>
+    </template>
+    <template #right>
+      <slot name="right">
+        <RectRight :size="12" class="common-choose-input-icon" />
+      </slot>
+    </template>
+  </nut-input>
+</template>
+
+<script setup lang="ts">
+import { RectRight } from '@nutui/icons-vue-taro';
+
+defineOptions({
+  name: 'ChooseInput',
+});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.common-choose-input-icon {
+  //   width: 13px;
+  //   height: 23px;
+  margin-left: 18px;
+  color: boleGetCssVar('text-color', 'primary');
+}
+</style>
diff --git a/apps/taro/src/components/Input/ChooseInputWithDatePicker.vue b/apps/taro/src/components/Input/ChooseInputWithDatePicker.vue
new file mode 100644
index 0000000..a40694d
--- /dev/null
+++ b/apps/taro/src/components/Input/ChooseInputWithDatePicker.vue
@@ -0,0 +1,58 @@
+<template>
+  <ChooseInput :modelValue="modelValue" @click="handleOpen()"></ChooseInput>
+</template>
+
+<script setup lang="ts">
+import ChooseInput from './ChooseInput.vue';
+import { Popup, DatePicker } from '@nutui/nutui-taro';
+import { Portal } from 'senin-mini/components';
+import { h } from 'vue';
+import dayjs from 'dayjs';
+
+defineOptions({
+  name: 'ChooseInputWithDatePicker',
+});
+
+type Props = {
+  modelValue: string | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | number): void;
+}>();
+
+function handleOpen() {
+  const _modelValue = [props.modelValue];
+  Portal.add((key) => {
+    return h(
+      Portal.Container,
+      { keyNumber: key, delayOpen: true },
+      {
+        default: ({ open, onClose }) =>
+          h(
+            Popup,
+            {
+              visible: open.value,
+              'onUpdate:visible': (value) => !value && onClose(),
+              position: 'bottom',
+            },
+            {
+              default: () =>
+                h(DatePicker, {
+                  modelValue: _modelValue,
+                  onCancel: onClose,
+                  onConfirm: ({ selectedValue }) => {
+                    console.log('selectedValue: ', selectedValue);
+                    emit('update:modelValue', dayjs(selectedValue).format('YYYY-MM-DD'));
+                    onClose();
+                  },
+                }),
+            }
+          ),
+      }
+    );
+  });
+}
+</script>
diff --git a/apps/taro/src/components/Input/ChooseInputWithPicker.vue b/apps/taro/src/components/Input/ChooseInputWithPicker.vue
new file mode 100644
index 0000000..bd57273
--- /dev/null
+++ b/apps/taro/src/components/Input/ChooseInputWithPicker.vue
@@ -0,0 +1,73 @@
+<template>
+  <ChooseInput :modelValue="inputValue" @click="handleOpen()"></ChooseInput>
+</template>
+
+<script setup lang="ts">
+import ChooseInput from './ChooseInput.vue';
+import { Popup, Picker } from '@nutui/nutui-taro';
+import { convertOptions, ValueEnum } from 'senin-mini/utils';
+import { Portal } from 'senin-mini/components';
+import { computed, h } from 'vue';
+
+defineOptions({
+  name: 'ChooseInputWithPicker',
+});
+
+type Props = {
+  enumLabelKey?: string;
+  enumValueKey?: string;
+  valueEnum?: ValueEnum;
+  modelValue: string | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  enumLabelKey: 'name',
+  enumValueKey: 'id',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | number): void;
+}>();
+
+const options = computed(() =>
+  convertOptions(props.valueEnum, props.enumLabelKey, props.enumValueKey)
+);
+
+const inputValue = computed(
+  () => options.value?.find((x) => x.value === props.modelValue)?.text ?? ''
+);
+
+function handleOpen() {
+  const _modelValue = [props.modelValue];
+  Portal.add((key) => {
+    return h(
+      Portal.Container,
+      { keyNumber: key, delayOpen: true },
+      {
+        default: ({ open, onClose }) =>
+          h(
+            Popup,
+            {
+              visible: open.value,
+              'onUpdate:visible': (value) => !value && onClose(),
+              position: 'bottom',
+            },
+            {
+              default: () =>
+                h(Picker, {
+                  modelValue: _modelValue,
+                  columns: options.value,
+                  onCancel: onClose,
+                  onConfirm: ({ selectedValue, selectedOptions }) => {
+                    console.log('selectedValue: ', selectedValue, selectedOptions);
+                    emit('update:modelValue', selectedOptions[0].value);
+                    onClose();
+                  },
+                }),
+            }
+          ),
+      }
+    );
+  });
+}
+</script>
diff --git a/apps/taro/src/components/Input/CommonInputField.vue b/apps/taro/src/components/Input/CommonInputField.vue
new file mode 100644
index 0000000..9b77dd2
--- /dev/null
+++ b/apps/taro/src/components/Input/CommonInputField.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="common-input-field-wrapper">
+    <div class="common-input-field">
+      <slot></slot>
+    </div>
+    <RectRight :size="12" class="common-input-field-icon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RectRight } from '@nutui/icons-vue-taro';
+
+defineOptions({
+  name: 'CommonInputField',
+});
+
+// type Props = {};
+
+// const props = withDefaults(defineProps<Props>(), {});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.common-input-field-wrapper {
+  display: flex;
+  width: 100%;
+
+  .common-input-field {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .common-input-field-icon {
+    margin-left: 18px;
+    color: boleGetCssVar('text-color', 'primary');
+  }
+}
+</style>
diff --git a/apps/taro/src/components/Input/NumberInput.vue b/apps/taro/src/components/Input/NumberInput.vue
new file mode 100644
index 0000000..c14c749
--- /dev/null
+++ b/apps/taro/src/components/Input/NumberInput.vue
@@ -0,0 +1,71 @@
+<template>
+  <nut-input type="number" :formatter="formatter" formatTrigger="onBlur" v-model="innerModelValue">
+    <template #right>
+      <slot name="right"></slot>
+    </template>
+  </nut-input>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+  name: 'NumberInput',
+});
+
+type Props = {
+  min?: number;
+  max?: number;
+  precision?: number;
+  modelValue?: number | string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  max: Math.pow(2, 53) - 1,
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | number): void;
+}>();
+
+const innerModelValue = computed({
+  get() {
+    return props.modelValue + '';
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+function formatter(value: string): string {
+  const newVal = value !== '' ? Number.parseFloat(value) : '';
+  if (Number.isNaN(newVal)) {
+    return '';
+  }
+  if (newVal && newVal > props.max) {
+    return `${toPrecision(props.max)}`;
+  }
+  if (props.min !== undefined && !!`${newVal}` && (newVal as number) < props.min) {
+    return `${toPrecision(props.min)}`;
+  }
+  return newVal !== '' ? `${toPrecision(newVal)}` : newVal;
+}
+
+function toPrecision(num: number) {
+  if (props.precision) {
+    if (props.precision === 0) return Math.round(num);
+    let snum = String(num);
+    const pointPos = snum.indexOf('.');
+    if (pointPos === -1) return num;
+    const nums = snum.replace('.', '').split('');
+    const datum = nums[pointPos + props.precision];
+    if (!datum) return num;
+    const length = snum.length;
+    if (snum.charAt(length - 1) === '5') {
+      snum = `${snum.slice(0, Math.max(0, length - 1))}6`;
+    }
+    return Number(snum).toFixed(props.precision);
+  }
+  return String(num);
+}
+</script>
diff --git a/apps/taro/src/components/Input/input.ts b/apps/taro/src/components/Input/input.ts
new file mode 100644
index 0000000..5a39e1b
--- /dev/null
+++ b/apps/taro/src/components/Input/input.ts
@@ -0,0 +1,4 @@
+export type ChooseCheckBoxOptionItem = {
+  text: string;
+  value: string | number;
+};
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 e349db9..aba6441 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>
@@ -19,6 +22,11 @@
     url: `${RouterPath.phoneBillRecharge}`,
   });
 });
+const goElectricityBillRecharge = useAccessLogin(() => {
+  Taro.navigateTo({
+    url: `${RouterPath.electricBillRecharge}`,
+  });
+});
 </script>
 
 <style lang="scss">
diff --git a/apps/taro/src/pages/mine/index.vue b/apps/taro/src/pages/mine/index.vue
index 464499e..e86f178 100644
--- a/apps/taro/src/pages/mine/index.vue
+++ b/apps/taro/src/pages/mine/index.vue
@@ -18,8 +18,9 @@
       </div>
     </div>
     <ContentScrollView>
-      <List class="mine-list-wrapper">
+      <List class="mine-list-wrapper" v-if="isLogin">
         <ListItem title="璁㈠崟绠＄悊" @click="goOrderManage"></ListItem>
+        <ListItem title="閫�鍑虹櫥褰�" @click="goLogout"></ListItem>
       </List>
     </ContentScrollView>
   </PageLayoutWithBg>
@@ -33,10 +34,13 @@
 import DefaultAvatar from '@/assets/components/icon-default-avatar.png';
 import { useSystemStore } from '@/stores/modules/system';
 import PageLayoutWithBg from '@/components/Layout/PageLayoutWithBg.vue';
+import { useUserStore } from '@/stores/modules/user';
+import { useUserStoreWithOut } from '@/stores/modules/user';
 
 const { userDetail } = useUser();
 const isLogin = useIsLogin();
 const systemStore = useSystemStore();
+const userStore = useUserStore();
 
 const { goLoginFn } = useGoLogin();
 const bgHeight = computed(() => 133 + systemStore.navHeight);
@@ -66,6 +70,11 @@
 });
 
 function goOrderManage() {}
+
+function goLogout() {
+  userStore.logout();
+  useUserStoreWithOut().logout();
+}
 </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..be80e9b
--- /dev/null
+++ b/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
@@ -0,0 +1,20 @@
+<template>
+  <ContentScrollView :paddingH="false">
+    <electricBillRecharge @goPay="goPay" />
+  </ContentScrollView>
+</template>
+
+<script setup lang="ts">
+import { electricBillRecharge } 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/components/Dialog/ConfirmDialog.vue b/packages/components/src/components/Dialog/ConfirmDialog.vue
index 8cf3fcc..886942e 100644
--- a/packages/components/src/components/Dialog/ConfirmDialog.vue
+++ b/packages/components/src/components/Dialog/ConfirmDialog.vue
@@ -1,14 +1,18 @@
 <template>
-  <nut-dialog title="璇锋牳瀵瑰厖鍊间俊鎭苟鏀粯" v-model:visible="visible">
+  <nut-dialog title="璇锋牳瀵瑰厖鍊间俊鎭苟鏀粯" v-model:visible="visible" class="confirm-dialog-wrapper">
     <div class="confirm-dialog-content">
       <div class="confirm-dialog-content-tips">
-        璇ヤ骇鍝佷负鎱㈠厖妯″紡锛�0-24灏忔椂鍐呭埌璐︼紝浠嬫剰璇峰嬁浠樻锛� 鍏呭�煎墠璇蜂粩缁嗛槄璇诲厖鍊奸』鐭ワ紒
+        <slot name="tips">
+          璇ヤ骇鍝佷负鎱㈠厖妯″紡锛�0-24灏忔椂鍐呭埌璐︼紝浠嬫剰璇峰嬁浠樻锛� 鍏呭�煎墠璇蜂粩缁嗛槄璇诲厖鍊奸』鐭ワ紒
+        </slot>
       </div>
       <div class="confirm-dialog-content-info">
         <slot name="info"></slot>
       </div>
       <div class="confirm-dialog-content-warning">
-        鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�
+        <slot name="warning">
+          鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�
+        </slot>
       </div>
     </div>
   </nut-dialog>
diff --git a/packages/components/src/components/Input/ChooseInput.vue b/packages/components/src/components/Input/ChooseInput.vue
new file mode 100644
index 0000000..6486c46
--- /dev/null
+++ b/packages/components/src/components/Input/ChooseInput.vue
@@ -0,0 +1,37 @@
+<template>
+  <nut-input
+    class="nut-input-text bole-input-text"
+    type="text"
+    readonly
+    alwaysEmbed
+    v-bind="$attrs"
+  >
+    <template #clear>
+      <slot name="clear"></slot>
+    </template>
+    <template #right>
+      <slot name="right">
+        <RectRight :size="12" class="common-choose-input-icon" />
+      </slot>
+    </template>
+  </nut-input>
+</template>
+
+<script setup lang="ts">
+import { RectRight } from '@nutui/icons-vue-taro';
+
+defineOptions({
+  name: 'ChooseInput',
+});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.common-choose-input-icon {
+  //   width: 13px;
+  //   height: 23px;
+  margin-left: 18px;
+  color: boleGetCssVar('text-color', 'primary');
+}
+</style>
diff --git a/packages/components/src/components/Input/ChooseInputWithPicker.vue b/packages/components/src/components/Input/ChooseInputWithPicker.vue
new file mode 100644
index 0000000..bd57273
--- /dev/null
+++ b/packages/components/src/components/Input/ChooseInputWithPicker.vue
@@ -0,0 +1,73 @@
+<template>
+  <ChooseInput :modelValue="inputValue" @click="handleOpen()"></ChooseInput>
+</template>
+
+<script setup lang="ts">
+import ChooseInput from './ChooseInput.vue';
+import { Popup, Picker } from '@nutui/nutui-taro';
+import { convertOptions, ValueEnum } from 'senin-mini/utils';
+import { Portal } from 'senin-mini/components';
+import { computed, h } from 'vue';
+
+defineOptions({
+  name: 'ChooseInputWithPicker',
+});
+
+type Props = {
+  enumLabelKey?: string;
+  enumValueKey?: string;
+  valueEnum?: ValueEnum;
+  modelValue: string | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  enumLabelKey: 'name',
+  enumValueKey: 'id',
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | number): void;
+}>();
+
+const options = computed(() =>
+  convertOptions(props.valueEnum, props.enumLabelKey, props.enumValueKey)
+);
+
+const inputValue = computed(
+  () => options.value?.find((x) => x.value === props.modelValue)?.text ?? ''
+);
+
+function handleOpen() {
+  const _modelValue = [props.modelValue];
+  Portal.add((key) => {
+    return h(
+      Portal.Container,
+      { keyNumber: key, delayOpen: true },
+      {
+        default: ({ open, onClose }) =>
+          h(
+            Popup,
+            {
+              visible: open.value,
+              'onUpdate:visible': (value) => !value && onClose(),
+              position: 'bottom',
+            },
+            {
+              default: () =>
+                h(Picker, {
+                  modelValue: _modelValue,
+                  columns: options.value,
+                  onCancel: onClose,
+                  onConfirm: ({ selectedValue, selectedOptions }) => {
+                    console.log('selectedValue: ', selectedValue, selectedOptions);
+                    emit('update:modelValue', selectedOptions[0].value);
+                    onClose();
+                  },
+                }),
+            }
+          ),
+      }
+    );
+  });
+}
+</script>
diff --git a/packages/components/src/components/Input/input.ts b/packages/components/src/components/Input/input.ts
new file mode 100644
index 0000000..5a39e1b
--- /dev/null
+++ b/packages/components/src/components/Input/input.ts
@@ -0,0 +1,4 @@
+export type ChooseCheckBoxOptionItem = {
+  text: string;
+  value: string | number;
+};
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index d2d94eb..8027acd 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,5 +1,6 @@
 export { default as RechargeGrid } from './views/RechargeGrid/RechargeGrid.vue';
 export { default as PhoneBillRecharge } from './views/PhoneBillRecharge/PhoneBillRecharge.vue';
+export { default as electricBillRecharge } from './views/electricBillRecharge/electricBillRecharge.vue';
 export { default as SelectPayTypeView } from './views/SelectPayTypeView/SelectPayTypeView.vue';
 export { default as RechargeResultView } from './views/RechargeResultView/RechargeResultView.vue';
 export * from './utils';
diff --git a/packages/components/src/styles/rechargeGrid.scss b/packages/components/src/styles/rechargeGrid.scss
index dffc078..a4a127f 100644
--- a/packages/components/src/styles/rechargeGrid.scss
+++ b/packages/components/src/styles/rechargeGrid.scss
@@ -118,7 +118,7 @@
   }
 }
 
-.phone-bill-recharge {
+.order-bill-recharge {
   .recharge-button {
     width: 100%;
     margin: 20px 0;
diff --git a/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue b/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
index 484d4ba..a8130de 100644
--- a/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
+++ b/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
@@ -4,7 +4,7 @@
     ref="formRef"
     :rules="rules"
     label-position="top"
-    class="phone-bill-recharge"
+    class="order-bill-recharge phone"
   >
     <FormItem label="閫夋嫨杩愯惀鍟�:" class="bole-form-item" prop="ispCode" required>
       <RadioGroup v-model="form.ispCode" direction="horizontal">
diff --git a/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue b/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue
new file mode 100644
index 0000000..bd6ffdc
--- /dev/null
+++ b/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue
@@ -0,0 +1,164 @@
+<template>
+  <Form
+    :model-value="form"
+    ref="formRef"
+    :rules="rules"
+    label-position="top"
+    class="order-bill-recharge electric"
+  >
+    <FormItem label="鎵�鍦ㄥ煄甯�" class="bole-form-item" prop="type" required>
+      <ChooseInputWithPicker
+        v-model="form.type"
+        placeholder="璇烽�夋嫨鍩庡競"
+        :value-enum="IspCodeText"
+      />
+    </FormItem>
+    <FormItem label="鐢电綉绫诲瀷" class="bole-form-item" prop="type" required>
+      <ChooseInputWithPicker
+        v-model="form.type"
+        placeholder="璇烽�夋嫨鐢电綉绫诲瀷"
+        :value-enum="IspCodeText"
+      />
+    </FormItem>
+    <FormItem label="鐢佃垂绫诲瀷" class="bole-form-item" prop="type" required>
+      <ChooseInputWithPicker
+        v-model="form.type"
+        placeholder="璇烽�夋嫨鐢佃垂绫诲瀷"
+        :value-enum="IspCodeText"
+      />
+    </FormItem>
+    <FormItem label="鐢电綉鎴峰彿" class="bole-form-item" prop="phone" required>
+      <Input
+        v-model.trim="form.phone"
+        class="bole-input-text"
+        placeholder="璇疯緭鍏�13浣嶆暟瀛楃紪鍙�"
+        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>锟{ realParValue }}</div>
+          <div class="recharge-button-text">绔嬪嵆鍏呭��</div>
+        </div>
+      </nut-button>
+      <RechargeTipsView :tips="tips" />
+    </div>
+    <ConfirmDialog v-model:visible="confirmDialogVisible" @ok="goPay">
+      <template #tips>
+        璇ヤ骇鍝佷负鎱㈠厖妯″紡锛�0-72灏忔椂鍐呭埌璐︼紝浠嬫剰璇峰嬁浠樻锛佸厖鍊煎墠璇蜂粩缁嗛槄璇诲厖鍊奸』鐭ワ紒
+      </template>
+      <template #info>
+        <ConfirmDialogInfoItem label="鐢电綉绫诲瀷" content="鍥藉鐢电綉" />
+        <ConfirmDialogInfoItem label="鐢佃垂绫诲瀷" content="浣忓畢" />
+        <ConfirmDialogInfoItem label="鍏呭�奸噾棰�" :content="`锟�${form.parValue}`" danger />
+        <ConfirmDialogInfoItem label="浼樻儬閲戦" :content="`锟�${discountParValue}`" />
+        <ConfirmDialogInfoItem label="瀹炰粯閲戦" :content="`锟�${realParValue}`" danger />
+      </template>
+      <template #warning>
+        鍚屼竴鐢佃垂璐︽埛鍦ㄥ厖鍊兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�
+      </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';
+import ChooseInputWithPicker from '../../components/Input/ChooseInputWithPicker.vue';
+
+defineOptions({
+  name: 'electricBillRecharge',
+});
+
+const emit = defineEmits<{
+  (e: 'goPay'): void;
+}>();
+
+const form = reactive({
+  ispCode: IspCode.yidong,
+  phone: '',
+  parValue: 100,
+  type: IspCodeText.yidong,
+});
+
+const rate = 0.96;
+
+const parValueList = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1500, 2000, 3000];
+
+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 - 72 灏忔椂鍐呭埌璐︼紝鑻ユ湭鑳芥寜鏃跺埌璐︼紝绯荤粺灏嗚嚜鍔ㄥ彂璧烽��娆俱��',
+  '鍏呭�兼湡闂达紝鑻ュ悓涓�璐︽埛鐨勫厖鍊兼鏈埌璐︼紝璇峰嬁鍦ㄥ叾浠栧钩鍙伴噸澶嶅厖鍊硷紝鍥犱笂杩版搷浣滃鑷寸殑璧勯噾鎹熷け锛岀敱鐢ㄦ埛鑷鎵挎媴銆�',
+  '涓虹‘淇濆厖鍊奸『鍒╄繘琛岋紝鐩墠骞冲彴涓嶆敮鎸佸娆犳閲戦瓒呰繃1000鍏冪殑璐︽埛杩涜鍏呭�硷紝涓旀瘡娆″厖鍊奸噾棰濆繀椤婚珮浜庢瑺璐规�婚銆�',
+  '濡傛帴鍒伴檶鐢熸潵鐢碉紝瀵规柟浠ョ即璐规垨璇搷浣滅瓑鐞嗙敱瑕佹眰澶勭悊娆鹃」锛屽姟蹇呯珛鍗虫媺榛戯紝璋ㄩ槻璇堥獥銆�',
+  '涓嬪崟鏃讹紝璇锋偍鍔″繀鍑嗙‘濉啓瀹屾暣鐨勭渷甯傚強鎴峰彿淇℃伅銆傚厖鍊煎畬鎴愬悗锛屽彂绁ㄧ敱杩愯惀鍟嗘彁渚涳紝鎮ㄥ彲鐧诲綍缃戜笂钀ヤ笟鍘呬笅杞藉搴旂殑鐢靛瓙鍙戠エ銆�',
+];
+
+const confirmDialogVisible = ref(false);
+
+function recharge() {
+  confirmDialogVisible.value = true;
+}
+
+function goPay() {
+  emit('goPay');
+}
+</script>
+<style lang="scss">
+.order-bill-recharge {
+  &.electric {
+    .nut-dialog {
+      .nut-dialog__content {
+        max-height: 700px;
+      }
+    }
+  }
+}
+</style>

--
Gitblit v1.9.1