fix: 修改ui

zhengyiming

1 天以前 bd7dd96c732ded6854d47bf77f65e5c64d3d15e2

fix: 修改ui

 apps/taro/src/components/Layout/PageLayout.vue

@@ -1,6 +1,6 @@
<template>
  <Portal.Host>
    <div :class="['page-layout-wrapper', { isWeb: isWeb }]" v-bind="$attrs">
    <div :class="['page-layout-wrapper', { isWeb: isWeb, hasBgColor }]" v-bind="$attrs">
      <slot v-if="_showNavigationBar" name="navigationBar">
        <CommonNavigationBar v-bind="_commonNavigationBarProps" />
      </slot>
@@ -72,6 +72,10 @@
    type: Number,
    default: 388,
  },
  hasBgColor: {
    type: Boolean,
    default: false,
  },
});

setPageTitle(props.title);
@@ -121,6 +125,10 @@
.page-layout-wrapper {
  /* background-color: $body-background-color; */

  &.hasBgColor {
    background-color: $body-background-color;
  }

  .page-layout-scroll-view-wrapper {
    display: flex;
    flex-direction: column;

 apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue

@@ -1,5 +1,5 @@
<template>
  <ContentScrollView :paddingH="false" style="background-color: #fff">
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <electricBillRecharge
      @goPay="goPay"
      :isDev="isDev"
@@ -13,6 +13,8 @@
      :showAliPay="!isInWeChat"
      :showWeixinPay="isInWeChat"
      @missName="handleMissName"
      @editUserAccount="handleEditUserAccount"
      @currentChange="emit('currentChange', $event)"
    />
  </ContentScrollView>
</template>
@@ -29,6 +31,10 @@
defineOptions({
  name: 'InnerPage',
});

const emit = defineEmits<{
  (e: 'currentChange', current: 'step1' | 'step2'): void;
}>();

const isDev = process.env.NODE_ENV === 'development';

@@ -56,4 +62,10 @@
    });
  } catch (error) {}
}

function handleEditUserAccount(userAccountId: string) {
  RouteHelper.navigateTo({
    url: `${RouterPath.editElectricUserAccount}?id=${userAccountId}`,
  });
}
</script>

 apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue

@@ -1,14 +1,52 @@
<template>
  <PageLayout title="电费充值" class="electricBillRecharge-page-wrapper" hasBorder>
    <InnerPage />
  <PageLayout
    class="electricBillRecharge-page-wrapper"
    :style="
      current === 'step2' && {
        backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
      }
    "
    :title="current != 'step2' ? title : ''"
  >
    <template #navigationBar v-if="current === 'step2'">
      <TransparentNavigationBar
        :title="title"
        :is-absolute="false"
        mode="dark"
        navigationArrowWhite
      >
      </TransparentNavigationBar>
    </template>
    <InnerPage @currentChange="handleCurrentChange" />
  </PageLayout>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import InnerPage from './InnerPage.vue';
import { OssAssets } from '@/constants';

defineOptions({
  name: 'electricBillRecharge',
});

type Current = 'step1' | 'step2';

const title = '电费充值';

const current = ref<Current>();

function handleCurrentChange(val: Current) {
  current.value = val;
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.electricBillRecharge-page-wrapper {
  background-size: 100% 452px;
  background-color: $body-background-color;
  background-repeat: no-repeat;
}
</style>

 apps/taro/src/subpackages/recharge/gasBillRecharge/InnerPage.vue

@@ -1,5 +1,5 @@
<template>
  <ContentScrollView :paddingH="false" style="background-color: #fff">
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <GasBillRecharge
      @goPay="goPay"
      :isDev="isDev"
@@ -13,6 +13,8 @@
      :showAliPay="!isInWeChat"
      :showWeixinPay="isInWeChat"
      @missName="handleMissName"
      @editUserAccount="handleEditUserAccount"
      @currentChange="emit('currentChange', $event)"
    />
  </ContentScrollView>
</template>
@@ -29,6 +31,10 @@
defineOptions({
  name: 'InnerPage',
});

const emit = defineEmits<{
  (e: 'currentChange', current: 'step1' | 'step2' | 'step3'): void;
}>();

const isDev = process.env.NODE_ENV === 'development';

@@ -56,4 +62,10 @@
    });
  } catch (error) {}
}

function handleEditUserAccount(userAccountId: string) {
  RouteHelper.navigateTo({
    url: `${RouterPath.editGasUserAccount}?id=${userAccountId}`,
  });
}
</script>

 apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue

@@ -1,14 +1,52 @@
<template>
  <PageLayout title="燃气充值" class="gasBillRecharge-page-wrapper" hasBorder>
    <InnerPage />
  <PageLayout
    class="gasBillRecharge-page-wrapper"
    :style="
      current === 'step3' && {
        backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
      }
    "
    :title="current != 'step3' ? title : ''"
  >
    <template #navigationBar v-if="current === 'step3'">
      <TransparentNavigationBar
        :title="title"
        :is-absolute="false"
        mode="dark"
        navigationArrowWhite
      >
      </TransparentNavigationBar>
    </template>
    <InnerPage @currentChange="handleCurrentChange" />
  </PageLayout>
</template>

<script setup lang="ts">
import { PageLayout } from '@/components';
import InnerPage from './InnerPage.vue';
import { OssAssets } from '@/constants';

defineOptions({
  name: 'gasBillRecharge',
});

type Current = 'step1' | 'step2' | 'step3';

const title = '燃气充值';

const current = ref<Current>();

function handleCurrentChange(val: Current) {
  current.value = val;
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.gasBillRecharge-page-wrapper {
  background-size: 100% 452px;
  background-color: $body-background-color;
  background-repeat: no-repeat;
}
</style>

 apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue

@@ -6,7 +6,7 @@
        backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
      }
    "
    :title="current != 'step2' && title"
    :title="current != 'step2' ? title : ''"
  >
    <template #navigationBar v-if="current === 'step2'">
      <TransparentNavigationBar

 apps/taro/src/subpackages/userAccount/editElectricUserAccount/InnerPage.vue

@@ -1,5 +1,5 @@
<template>
  <ContentScrollView :paddingH="false">
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <EditElectricUserAccount :id="id" @success="handleSuccess" />
  </ContentScrollView>
</template>

 apps/taro/src/subpackages/userAccount/editElectricUserAccount/editElectricUserAccount.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout title="编辑" class="editElectricUserAccount-page-wrapper" hasBorder>
  <PageLayout title="编辑" class="editElectricUserAccount-page-wrapper" hasBgColor>
    <InnerPage />
  </PageLayout>
</template>

 apps/taro/src/subpackages/userAccount/editGasUserAccount/InnerPage.vue

@@ -1,5 +1,5 @@
<template>
  <ContentScrollView :paddingH="false">
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <EditGasUserAccount :id="id" @success="handleSuccess" />
  </ContentScrollView>
</template>

 apps/taro/src/subpackages/userAccount/editGasUserAccount/editGasUserAccount.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout title="编辑" class="editGasUserAccount-page-wrapper" hasBorder>
  <PageLayout title="编辑" class="editGasUserAccount-page-wrapper" hasBgColor>
    <InnerPage />
  </PageLayout>
</template>

 apps/taro/src/subpackages/userAccount/editPhoneUserAccount/InnerPage.vue

@@ -1,5 +1,5 @@
<template>
  <ContentScrollView :paddingH="false">
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <EditPhoneUserAccount :id="id" @success="handleSuccess" />
  </ContentScrollView>
</template>

 apps/taro/src/subpackages/userAccount/editPhoneUserAccount/editPhoneUserAccount.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout title="编辑" class="editPhoneUserAccount-page-wrapper" hasBorder>
  <PageLayout title="编辑" class="editPhoneUserAccount-page-wrapper" hasBgColor>
    <InnerPage />
  </PageLayout>
</template>

 packages/components/src/components/Card/OrderCard.vue

@@ -2,20 +2,22 @@
  <div class="order-card">
    <div class="order-card-title">
      <div class="order-card-title-left">
        <div class="order-card-title-text">{{ title }}</div>
        <div class="order-card-title-text-wrapper">
          <div class="order-card-title-text">{{ title }}</div>
          <div class="order-card-title-status">
            <img :src="LifePayOrderStatusEnumImg[status]" alt="" />
          </div>
        </div>
        <div class="order-card-title-ordernum">
          {{ `订单编号：${orderNo}` }}
        </div>
      </div>
      <div class="order-card-title-status">
        <img :src="LifePayOrderStatusEnumImg[status]" alt="" />
      </div>
    </div>
    <div class="order-card-content">
      <slot></slot>
    </div>
    <slot name="actions">
      <div class="order-card-footer" v-if="shoeFooter">
      <div class="order-card-footer" v-if="showFooter">
        <div
          v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中"
          class="order-card-action"
@@ -68,7 +70,7 @@
  [LifeRechargeConstants.LifePayOrderStatusEnum.退款中]: OssAssets.card.Refund,
};

const shoeFooter = computed(() => {
const showFooter = computed(() => {
  return (
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中 ||
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败

 packages/components/src/styles/gas.scss

@@ -1,24 +1,38 @@
@use './common.scss' as *;

.gas-bill-recharge-wrapper {
  .gas-bill-recharge-title {
    padding: 24px 26px 0;
    font-weight: 500;
    font-size: 34px;
    color: boleGetCssVar('text-color', 'primary');
  }

  .gasOrgType-card {
    border-radius: 16px;
    border: 1px solid #e8e8e8;
    padding: 28px;
    border: 1px solid #e1e9f5;
    padding: 20px 32px;
    min-height: 120px;
    margin-bottom: 30px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafb;

    &:last-child {
      margin-bottom: 0;
    }

    .gasOrgType-card-title {
      font-size: 36px;
      font-size: 34px;
      line-height: 48px;
      color: boleGetCssVar('text-color', 'primary');
    }

    .gasOrgType-card-button {
      font-size: 26px;
      height: 48px;
      padding: 18px;
    }
  }
}

 packages/components/src/styles/orderCard.scss

@@ -23,12 +23,18 @@
      color: #333333;
      flex: 1;
      min-width: 0;
      margin-right: 56px;

      .order-card-title-text-wrapper {
        height: 68px;
        display: flex;
      }

      .order-card-title-text {
        font-size: 30px;
        line-height: 42px;
        font-weight: 400;
        flex: 1;
        min-width: 0;
      }
    }

@@ -40,8 +46,8 @@
    }

    .order-card-title-status {
      width: 116px;
      height: 116px;
      width: 90px;
      height: 90px;

      img {
        width: 100%;

 packages/components/src/views/GasBillRecharge/GasBillRechargeBaseForm.vue

@@ -4,7 +4,7 @@
    ref="formRef"
    :rules="rules"
    label-position="top"
    class="order-bill-recharge electric"
    class="order-bill-recharge electric chunk-form"
  >
    <slot name="top"></slot>
    <NutFormItem label="所在城市" class="bole-form-item" prop="areaList" required>

 packages/components/src/views/GasBillRecharge/GasBillRechargeStep1.vue

@@ -1,5 +1,9 @@
<template>
  <NutForm label-position="top" class="order-bill-recharge gas-bill-recharge-wrapper phone">
  <NutForm
    label-position="top"
    class="order-bill-recharge gas-bill-recharge-wrapper phone chunk-form"
  >
    <div class="gas-bill-recharge-title">选择缴费类型</div>
    <NutFormItem class="bole-form-item">
      <GasOrgTypeCard
        :title="item.gasOrgName"
@@ -8,14 +12,14 @@
        @click="goNext(item.gasOrgCode)"
      ></GasOrgTypeCard>
    </NutFormItem>
    <div class="common-content">
      <NutButton class="recharge-button" type="primary" plain @click="goTo('step3')">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">返回</div>
        </div>
      </NutButton>
    </div>
  </NutForm>
  <div class="chunk-form-actions">
    <NutButton class="recharge-button" type="primary" plain @click="goTo('step3')">
      <div class="recharge-button-inner">
        <div class="recharge-button-text">返回</div>
      </div>
    </NutButton>
  </div>
</template>

<script setup lang="ts">
@@ -24,6 +28,7 @@
import { BlLifeRecharge, LifeRechargeConstants } from '@life-payment/core-vue';
import { useGasBillRechargeContext } from './context';
import { useGetGasParValue } from '../../hooks';
import Chunk from '../../components/Layout/Chunk.vue';

defineOptions({
  name: 'GasBillRechargeStep1',

 packages/components/src/views/GasBillRecharge/GasBillRechargeStep2.vue

@@ -12,19 +12,19 @@
      >
      </NutTextarea>
    </NutFormItem>
    <div class="common-content">
      <NutButton class="recharge-button" type="primary" @click="handleNext">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">保存</div>
        </div>
      </NutButton>
      <NutButton class="recharge-button" type="primary" plain @click="goToPrevious">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">返回</div>
        </div>
      </NutButton>
    </div>
  </GasBillRechargeBaseForm>
  <div class="chunk-form-actions">
    <NutButton class="recharge-button" type="primary" @click="handleNext">
      <div class="recharge-button-inner">
        <div class="recharge-button-text">保存</div>
      </div>
    </NutButton>
    <NutButton class="recharge-button" type="primary" plain @click="goToPrevious">
      <div class="recharge-button-inner">
        <div class="recharge-button-text">返回</div>
      </div>
    </NutButton>
  </div>
</template>

<script setup lang="ts">

 packages/components/src/views/GasBillRecharge/GasBillRechargeStep3.vue

@@ -6,63 +6,82 @@
    label-position="top"
    class="order-bill-recharge electric"
  >
    <NutFormItem class="bole-form-item" prop="currentUserAccountId">
      <NutRadioGroup
        v-model="form.currentUserAccountId"
        direction="horizontal"
        class="par-account-list"
        v-if="userAccountAllList.length > 0"
        @change="handleUserAccountChange"
      >
        <NutRadio :label="item.id" shape="button" v-for="item in userAccountAllList" :key="item.id"
          >{{ item.city }}-{{ item.content }}</NutRadio
    <Chunk borderRadiusSmall :hasPaddingBottom="false">
      <NutFormItem class="bole-form-item user-account-form-item" prop="currentUserAccountId">
        <NutRadioGroup
          v-model="form.currentUserAccountId"
          direction="horizontal"
          class="par-account-list"
          v-if="userAccountAllList.length > 0"
          @change="handleUserAccountChange"
        >
      </NutRadioGroup>
      <AccountCard
        v-if="userAccountAllList.length > 0"
        title="充值户号"
        :content="`${form.areaList?.[1] ?? ''} ${form.gasAccount}`"
        :remark="form.remark"
      >
        <template #action>
          <div class="account-card-action" @click="handleAddUserAccount">新增</div>
        </template>
      </AccountCard>
      <AccountAddCard text="新增户号" v-else @click="handleAddUserAccount" />
    </NutFormItem>
          <NutRadio
            :label="item.id"
            shape="button"
            v-for="item in userAccountAllList"
            :key="item.id"
            >{{ item.city }}-{{ item.content }}</NutRadio
          >
        </NutRadioGroup>
        <AccountCardV2
          v-if="userAccountAllList.length > 0"
          :content="`${form.areaList?.[1] ?? ''} ${form.gasAccount}`"
          :remark="form.remark"
          :showEditBtn="!!form.currentUserAccountId"
          @add="handleAddUserAccount"
          @edit="emit('editUserAccount', form.currentUserAccountId)"
        >
        </AccountCardV2>
        <AccountAddCardV2
          content="去添加充值户号"
          remark="添加户号将保存在生活缴费进行管理"
          tip="添加正确户号"
          v-else
          @click="handleAddUserAccount"
        />
      </NutFormItem>
    </Chunk>

    <NutFormItem label="选择充值金额" class="bole-form-item" prop="parValue" required>
      <NutRadioGroup v-model="form.parValue" direction="horizontal" class="parValue-radio-group">
        <NutRadio
          :label="Number(item)"
          :key="item"
          shape="button"
          v-for="item in gasValueList"
          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, lifePayGasRate) }}元
    <Chunk borderRadiusSmall :hasPaddingBottom="false" title="选择充值金额">
      <NutFormItem class="bole-form-item" prop="parValue" required>
        <NutRadioGroup v-model="form.parValue" direction="horizontal" class="parValue-radio-group">
          <NutRadio
            :label="Number(item)"
            :key="item"
            shape="button"
            v-for="item in gasValueList"
            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, lifePayGasRate) }}元
                </div>
              </div>
              <div class="discountTag" v-if="lifePayGasRate > 0">{{ lifePayGasRate }}折</div>
              <img :src="IconSelect" class="discount-icon" />
            </div>
            <div class="discountTag" v-if="lifePayGasRate > 0">{{ lifePayGasRate }}折</div>
          </div>
        </NutRadio>
      </NutRadioGroup>
    </NutFormItem>
          </NutRadio>
        </NutRadioGroup>
      </NutFormItem>
    </Chunk>

    <SelectPayTypeFormItem
      v-model="form.lifePayType"
      :showWeixinPay="showWeixinPay"
      :showAliPay="showAliPay"
    ></SelectPayTypeFormItem>
    <div class="common-content">
      <nut-button class="recharge-button" type="primary" @click="handleSubmit">
      <nut-button
        class="recharge-button recharge-button-linear"
        type="primary"
        @click="handleSubmit"
      >
        <div class="recharge-button-inner">
          <div>￥{{ realParValue }}</div>
          <div class="recharge-button-text">立即充值</div>
@@ -116,14 +135,16 @@
import { useGetRate, useGetGasParValue, useSetUserAccountBySelect } from '../../hooks';
import { useGasBillRechargeContext, GasUserAccountExtraProperties } from './context';
import { FormValidator, initLifePayType } from '../../utils';
import AccountAddCard from '../../components/Card/AccountAddCard.vue';
import AccountCard from '../../components/Card/AccountCard.vue';
import AccountAddCardV2 from '../../components/Card/AccountAddCardV2.vue';
import AccountCardV2 from '../../components/Card/AccountCardV2.vue';
import RechargeTipsView from '../../components/RechargeTipsView/RechargeTipsView.vue';
import ConfirmDialog from '../../components/Dialog/ConfirmDialog.vue';
import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue';
import SelectPayTypeFormItem from '../../components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue';
import { useSelectPayType, useGetPayStatusByOrderNo } from '../../hooks/selectPayType';
import { RechargeProps } from '../PhoneBillRecharge/types';
import Chunk from '../../components/Layout/Chunk.vue';
import IconSelect from '../../assets/recharge/icon-select.png';

defineOptions({
  name: 'GasBillRechargeStep3',
@@ -137,6 +158,7 @@
  (e: 'goPay', orderNo: string): void;
  (e: 'paySuccess', orderNo: string): void;
  (e: 'missName', userAccountId: string): void;
  (e: 'editUserAccount', userAccountId: string): void;
}>();

const { goTo } = useGasBillRechargeContext();

 packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeBaseForm.vue

@@ -35,12 +35,12 @@
      />
    </NutFormItem>
    <slot></slot>
    <NutDialog
      title="提示"
      content="电信可充值区域包括：广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中，在此期间可能会出现充值不成功并自动退款的情况，请您谅解。"
      v-model:visible="dialogVisible"
    />
  </NutForm>
  <NutDialog
    title="提示"
    content="电信可充值区域包括：广东、江苏、湖北、四川、江西、河北、河南、福建、辽宁。其它区域正在分批次进行维护中，在此期间可能会出现充值不成功并自动退款的情况，请您谅解。"
    v-model:visible="dialogVisible"
  />
</template>

<script setup lang="ts">

 packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue

@@ -4,7 +4,7 @@
    ref="formRef"
    :rules="rules"
    label-position="top"
    class="order-bill-recharge electric"
    class="order-bill-recharge electric chunk-form"
  >
    <NutFormItem label="所在区域" class="bole-form-item" prop="province" required>
      <ChooseInputWithPicker

 packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue

@@ -12,19 +12,19 @@
      >
      </NutTextarea>
    </NutFormItem>
    <div class="common-content">
      <nut-button class="recharge-button" type="primary" @click="handleNext">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">保存</div>
        </div>
      </nut-button>
      <nut-button class="recharge-button" type="primary" plain @click="goToNext">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">返回</div>
        </div>
      </nut-button>
    </div>
  </ElectricBillRechargeBaseForm>
  <div class="chunk-form-actions">
    <nut-button class="recharge-button" type="primary" @click="handleNext">
      <div class="recharge-button-inner">
        <div class="recharge-button-text">保存</div>
      </div>
    </nut-button>
    <nut-button class="recharge-button" type="primary" plain @click="goToNext">
      <div class="recharge-button-inner">
        <div class="recharge-button-text">返回</div>
      </div>
    </nut-button>
  </div>
</template>

<script setup lang="ts">

 packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep2.vue

@@ -6,71 +6,84 @@
    label-position="top"
    class="order-bill-recharge electric"
  >
    <NutFormItem class="bole-form-item" prop="currentUserAccountId">
      <NutRadioGroup
        v-model="form.currentUserAccountId"
        direction="horizontal"
        class="par-account-list"
        v-if="userAccountAllList.length > 0"
        @change="handleUserAccountChange"
      >
        <NutRadio :label="item.id" shape="button" v-for="item in userAccountAllList" :key="item.id"
          >{{ item.city }}-{{ item.content }}</NutRadio
    <Chunk borderRadiusSmall :hasPaddingBottom="false">
      <NutFormItem class="bole-form-item user-account-form-item" prop="currentUserAccountId">
        <NutRadioGroup
          v-model="form.currentUserAccountId"
          direction="horizontal"
          class="par-account-list"
          v-if="userAccountAllList.length > 0"
          @change="handleUserAccountChange"
        >
      </NutRadioGroup>
      <AccountCard
        v-if="userAccountAllList.length > 0"
        title="充值户号"
        :content="`${form.city} ${form.electricAccount}`"
        :remark="form.remark"
      >
        <template #action>
          <div class="account-card-action" @click="handleAddUserAccount">新增</div>
        </template>
      </AccountCard>
      <AccountAddCard text="新增户号" v-else @click="handleAddUserAccount" />
    </NutFormItem>
          <NutRadio
            :label="item.id"
            shape="button"
            v-for="item in userAccountAllList"
            :key="item.id"
            >{{ item.city }}-{{ item.content }}</NutRadio
          >
        </NutRadioGroup>
        <AccountCardV2
          v-if="userAccountAllList.length > 0"
          :content="`${form.city}-${form.electricAccount}`"
          :remark="form.remark"
          :showEditBtn="!!form.currentUserAccountId"
          @add="handleAddUserAccount"
          @edit="emit('editUserAccount', form.currentUserAccountId)"
        >
        </AccountCardV2>
        <AccountAddCardV2
          content="去添加充值户号"
          remark="添加户号将保存在生活缴费进行管理"
          tip="添加正确户号"
          v-else
          @add="handleAddUserAccount"
        />
      </NutFormItem>
    </Chunk>

    <NutFormItem
      v-if="!!form.province"
      label="选择充值金额"
      class="bole-form-item"
      prop="parValue"
      required
    >
      <NutRadioGroup v-model="form.parValue" direction="horizontal" class="parValue-radio-group">
        <NutRadio
          :label="Number(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, lifePayElectricRate) }}元
    <Chunk borderRadiusSmall :hasPaddingBottom="false" title="选择充值金额" v-if="!!form.province">
      <NutFormItem class="bole-form-item" prop="parValue" required>
        <NutRadioGroup v-model="form.parValue" direction="horizontal" class="parValue-radio-group">
          <NutRadio
            :label="Number(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, lifePayElectricRate) }}元
                </div>
              </div>
              <div class="discountTag" v-if="lifePayElectricRate > 0">
                {{ lifePayElectricRate }}折
              </div>
              <img :src="IconSelect" class="discount-icon" />
            </div>
            <div class="discountTag" v-if="lifePayElectricRate > 0">
              {{ lifePayElectricRate }}折
            </div>
          </div>
        </NutRadio>
      </NutRadioGroup>
    </NutFormItem>
          </NutRadio>
        </NutRadioGroup>
      </NutFormItem>
    </Chunk>

    <SelectPayTypeFormItem
      v-model="form.lifePayType"
      :showWeixinPay="showWeixinPay"
      :showAliPay="showAliPay"
    ></SelectPayTypeFormItem>
    <div class="common-content">
      <nut-button class="recharge-button" type="primary" @click="handleSubmit">
      <nut-button
        class="recharge-button recharge-button-linear"
        type="primary"
        @click="handleSubmit"
      >
        <div class="recharge-button-inner">
          <div>￥{{ realParValue }}</div>
          <div class="recharge-button-text">立即充值</div>
@@ -122,12 +135,14 @@
import ConfirmDialogInfoItem from '../../components/Dialog/ConfirmDialogInfoItem.vue';
import { useGetRate, useGetElectricParValue, useSetUserAccountBySelect } from '../../hooks';
import { FormValidator, initLifePayType } from '../../utils';
import AccountAddCard from '../../components/Card/AccountAddCard.vue';
import AccountCard from '../../components/Card/AccountCard.vue';
import AccountAddCardV2 from '../../components/Card/AccountAddCardV2.vue';
import AccountCardV2 from '../../components/Card/AccountCardV2.vue';
import { useElectricBillRechargeContext, ElectricUserAccountExtraProperties } from './context';
import SelectPayTypeFormItem from '../../components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue';
import { useSelectPayType, useGetPayStatusByOrderNo } from '../../hooks/selectPayType';
import { RechargeProps } from '../PhoneBillRecharge/types';
import Chunk from '../../components/Layout/Chunk.vue';
import IconSelect from '../../assets/recharge/icon-select.png';

defineOptions({
  name: 'ElectricBillRechargeStep2',
@@ -141,6 +156,7 @@
  (e: 'goPay', orderNo: string): void;
  (e: 'paySuccess', orderNo: string): void;
  (e: 'missName', userAccountId: string): void;
  (e: 'editUserAccount', userAccountId: string): void;
}>();

const { goTo } = useElectricBillRechargeContext();

 packages/components/src/views/electricBillRecharge/electricBillRecharge.vue

@@ -6,11 +6,12 @@
    @go-pay="emit('goPay', $event)"
    @paySuccess="emit('paySuccess', $event)"
    @missName="emit('missName', $event)"
    @editUserAccount="emit('editUserAccount', $event)"
  />
</template>

<script setup lang="ts">
import { computed, provide } from 'vue';
import { computed, provide, watch } from 'vue';
import { useStepper } from 'senin-mini/hooks';
import { ElectricBillRechargeContextKey } from './context';
import ElectricBillRechargeStep1 from './ElectricBillRechargeStep1.vue';
@@ -25,14 +26,26 @@
  isDev: false,
});

const stepperInfo = useStepper(['step1', 'step2'], 'step2');
const current = computed(() => stepperInfo.current.value);

const emit = defineEmits<{
  (e: 'goPay', orderNo: string): void;
  (e: 'paySuccess', orderNo: string): void;
  (e: 'missName', userAccountId: string): void;
  (e: 'editUserAccount', userAccountId: string): void;
  (e: 'currentChange', current: 'step1' | 'step2'): void;
}>();

const stepperInfo = useStepper(['step1', 'step2'], 'step2');
const current = computed(() => stepperInfo.current.value);
watch(
  current,
  (newVal) => {
    emit('currentChange', newVal);
  },
  {
    immediate: true,
  }
);

provide(ElectricBillRechargeContextKey, {
  ...stepperInfo,

 packages/components/src/views/userAccount/EditElectricUserAccount.vue

@@ -13,14 +13,14 @@
        >
        </NutTextarea>
      </NutFormItem>
      <div class="common-content">
        <NutButton class="recharge-button" type="primary" @click="handleSave">
          <div class="recharge-button-inner">
            <div class="recharge-button-text">保存</div>
          </div>
        </NutButton>
      </div>
    </ElectricBillRechargeBaseForm>
    <div class="chunk-form-actions">
      <NutButton class="recharge-button" type="primary" @click="handleSave">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">保存</div>
        </div>
      </NutButton>
    </div>
  </LoadingLayout>
</template>


 packages/components/src/views/userAccount/EditGasUserAccount.vue

@@ -24,14 +24,14 @@
        >
        </NutTextarea>
      </NutFormItem>
      <div class="common-content">
        <NutButton class="recharge-button" type="primary" @click="handleSave">
          <div class="recharge-button-inner">
            <div class="recharge-button-text">保存</div>
          </div>
        </NutButton>
      </div>
    </GasBillRechargeBaseForm>
    <div class="chunk-form-actions">
      <NutButton class="recharge-button" type="primary" @click="handleSave">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">保存</div>
        </div>
      </NutButton>
    </div>
  </LoadingLayout>
</template>


 packages/components/src/views/userAccount/EditPhoneUserAccount.vue

@@ -13,14 +13,14 @@
        >
        </NutTextarea>
      </NutFormItem>
      <div class="common-content">
        <NutButton class="recharge-button" type="primary" @click="handleSave">
          <div class="recharge-button-inner">
            <div class="recharge-button-text">保存</div>
          </div>
        </NutButton>
      </div>
    </PhoneBillRechargeBaseForm>
    <div class="chunk-form-actions">
      <NutButton class="recharge-button" type="primary" @click="handleSave">
        <div class="recharge-button-inner">
          <div class="recharge-button-text">保存</div>
        </div>
      </NutButton>
    </div>
  </LoadingLayout>
</template>