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

@@ -1,18 +1,8 @@
<template>
  <Portal.Host>
    <div :class="['page-layout-wrapper', { isWeb: isWeb }]" v-bind="$attrs">
    <div :class="['page-layout-wrapper', { isWeb: isWeb, hasBgColor }]">
      <slot v-if="_showNavigationBar" name="navigationBar">
        <CommonNavigationBar v-bind="_commonNavigationBarProps" />
      </slot>

      <slot name="bg">
        <div
          v-if="hasLinearBg"
          class="page-layout-linear-bg"
          :style="{
            height: '100%',
          }"
        ></div>
      </slot>

      <div class="page-layout-scroll-view-wrapper" :style="{ height: scrollViewHeight }">
@@ -48,31 +38,14 @@
import { isWeb, isInAlipay, isInWeChat } from '@/utils/env';
//@ts-ignore
import { setPageTitle } from '@/utils';
import { pageLayoutProps } from './layout';

defineOptions({
  name: 'PageLayout',
  inheritAttrs: false,
});

const props = defineProps({
  ...commonNavigationBarProps,
  needAuth: {
    type: Boolean,
    default: true,
  },
  useView: {
    type: Boolean,
    default: false,
  },
  hasLinearBg: {
    type: Boolean,
    default: false,
  },
  linearBgHeight: {
    type: Number,
    default: 388,
  },
});
const props = defineProps(pageLayoutProps);

setPageTitle(props.title);

@@ -118,9 +91,25 @@
<style lang="scss">
@import '@/styles/common.scss';

.page-layout-container {
  height: 100%;
  position: relative;

  .page-layout-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
  }
}

.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/components/Layout/PageLayoutWithBg.vue

@@ -1,19 +1,23 @@
<template>
  <PageLayout v-bind="props">
    <template #navigationBar>
      <TransparentNavigationBar :title="title" :is-absolute="false">
        <template #left>
          <slot name="left"></slot>
        </template>
      </TransparentNavigationBar>
    </template>
    <template #bg>
  <div class="page-layout-container">
    <slot name="bg">
      <img :src="OssAssets.common.CommonPageBg" class="common-page-bg" />
    </template>
    <template #default="{ scrollViewHeight }">
      <slot :scrollViewHeight="scrollViewHeight" />
    </template>
  </PageLayout>
    </slot>
    <PageLayout v-bind="props">
      <template #navigationBar>
        <slot name="navigationBar">
          <TransparentNavigationBar :title="title" :is-absolute="false">
            <template #left>
              <slot name="left"></slot>
            </template>
          </TransparentNavigationBar>
        </slot>
      </template>
      <template #default="{ scrollViewHeight }">
        <slot :scrollViewHeight="scrollViewHeight" />
      </template>
    </PageLayout>
  </div>
</template>

<script setup lang="ts">
@@ -21,16 +25,13 @@
import TransparentNavigationBar from '../NavigationBar/TransparentNavigationBar.vue';
import _ from 'lodash';
import { OssAssets } from '@/constants';
import { pageLayoutProps } from './layout';

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

type Props = {
  title?: string;
};

const props = withDefaults(defineProps<Props>(), {});
const props = defineProps(pageLayoutProps);
</script>

<style lang="scss">

 apps/taro/src/components/Layout/layout.ts

@@ -1,4 +1,5 @@
import { PropType } from 'vue';
import { commonNavigationBarProps } from '../NavigationBar/commonNavigationBar';

export const loadingLayoutProps = {
  loading: {
@@ -17,3 +18,27 @@
    type: String,
  },
};

export const pageLayoutProps = {
  ...commonNavigationBarProps,
  needAuth: {
    type: Boolean,
    default: true,
  },
  useView: {
    type: Boolean,
    default: false,
  },
  hasLinearBg: {
    type: Boolean,
    default: false,
  },
  linearBgHeight: {
    type: Number,
    default: 388,
  },
  hasBgColor: {
    type: Boolean,
    default: false,
  },
};

 apps/taro/src/components/NavigationBar/TranslateNavigationBar.vue

New file
@@ -0,0 +1,60 @@
<template>
  <div class="translate-navigation-bar" :style="barStyle">
    <TransparentNavigationBar
      v-bind="_commonNavigationBarProps"
      :is-absolute="false"
      mode="dark"
      navigationArrowWhite
      :style="{ opacity: 1 - rangeValue }"
    >
    </TransparentNavigationBar>
    <CommonNavigationBar v-bind="_commonNavigationBarProps" :style="{ opacity: rangeValue }" />
  </div>
</template>

<script setup lang="ts">
import { commonNavigationBarProps } from './commonNavigationBar';
import { useSystemStore } from '@/stores/modules/system';
import { CSSProperties } from 'vue';
import TransparentNavigationBar from './TransparentNavigationBar.vue';
import CommonNavigationBar from './CommonNavigationBar.vue';
import { usePickProps } from 'senin-mini/hooks';

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

const systemStore = useSystemStore();

const props = defineProps({
  ...commonNavigationBarProps,
  rangeValue: {
    type: Number,
    default: 0,
  },
});

const _commonNavigationBarProps = usePickProps(props, commonNavigationBarProps);

const barStyle = computed(() => {
  return {
    height: systemStore.navigationBarHeight + 'px',
  } as CSSProperties;
});
</script>

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

.translate-navigation-bar {
  position: relative;

  .navigation-bar-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
</style>

 apps/taro/src/hooks/index.ts

@@ -4,3 +4,4 @@
export * from './login';
export * from './infiniteLoading';
export * from './lifepay';
export * from './page';

 apps/taro/src/hooks/page.ts

New file
@@ -0,0 +1,20 @@
import { BaseEventOrig, ScrollViewProps } from '@tarojs/components';

type UseScrollRangeOptions = {
  maxRange?: number;
};

export function useScrollRange(options: UseScrollRangeOptions = {}) {
  const { maxRange = 160 } = options;

  const rangeValue = ref(0);

  function scroll(e: BaseEventOrig<ScrollViewProps.onScrollDetail>) {
    rangeValue.value = Math.min(maxRange, e.detail.scrollTop) / maxRange;
  }

  return {
    scroll,
    rangeValue,
  };
}

 apps/taro/src/pages/home/index.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout class="index-page-wrapper" :need-auth="false">
  <PageLayoutWithBg class="index-page-wrapper" :need-auth="false">
    <template #navigationBar>
      <TransparentNavigationBar :title="'生活缴费'" :is-absolute="false">
      </TransparentNavigationBar>
@@ -34,7 +34,7 @@
        @gasBillRecharge="goGasBillRecharge"
      />
    </ContentView>
  </PageLayout>
  </PageLayoutWithBg>
</template>

<script setup lang="ts">

 apps/taro/src/pages/mine/index.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout class="mine-page-wrapper" :need-auth="false">
  <PageLayoutWithBg class="mine-page-wrapper" :need-auth="false">
    <template #navigationBar>
      <TransparentNavigationBar :title="'个人中心'" :is-absolute="false">
      </TransparentNavigationBar>
@@ -42,7 +42,7 @@
        ></ListItemV2>
      </List>
    </ContentScrollView>
  </PageLayout>
  </PageLayoutWithBg>
</template>

<script setup lang="ts">

 apps/taro/src/subpackages/login/components/LoginPageLayout/LoginPageLayout.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout :needAuth="false" class="login-page-layout">
  <PageLayoutWithBg :needAuth="false" class="login-page-layout">
    <template #navigationBar>
      <TransparentNavigationBar :title="title" :is-absolute="false"></TransparentNavigationBar>
    </template>
@@ -10,7 +10,7 @@
    <div class="authorization-page-title">欢迎使用生活缴费平台</div>

    <slot></slot>
  </PageLayout>
  </PageLayoutWithBg>
</template>

<script setup lang="ts">

 apps/taro/src/subpackages/my/dashboard/dashboard.vue

@@ -1,5 +1,5 @@
<template>
  <PageLayout class="dashboard-page-wrapper">
  <PageLayoutWithBg class="dashboard-page-wrapper">
    <template #navigationBar>
      <TransparentNavigationBar :title="'数据看板'" :is-absolute="false">
      </TransparentNavigationBar>
@@ -8,11 +8,10 @@
      <img :src="OssAssets.common.DataPageBg" class="dashboard-page-bg" />
    </template>
    <InnerPage />
  </PageLayout>
  </PageLayoutWithBg>
</template>

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


 apps/taro/src/subpackages/order/orderRefundResult/InnerPage.vue

@@ -1,10 +1,6 @@
<template>
  <ContentScrollView>
    <OrderRefundResultView
      style="margin-top: 40px"
      @go-back-home="goHome()"
      :orderNo="orderNo"
    ></OrderRefundResultView>
    <OrderRefundResultView @go-back-home="goHome()" :orderNo="orderNo"></OrderRefundResultView>
  </ContentScrollView>
</template>


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

@@ -1,20 +1,20 @@
<template>
  <ContentScrollView :paddingH="false" style="background-color: #fff">
    <electricBillRecharge
      @goPay="goPay"
      :isDev="isDev"
      @paySuccess="handePaySuccess"
      :getOpenId="ensureOpenId"
      :isInWeChat="isInWeChat"
      :isInAlipay="isInAlipay"
      :isH5="isWeb"
      :appId="WXPayAppId"
      :isFocus="isFocus"
      :showAliPay="!isInWeChat"
      :showWeixinPay="isInWeChat"
      @missName="handleMissName"
    />
  </ContentScrollView>
  <electricBillRecharge
    @goPay="goPay"
    :isDev="isDev"
    @paySuccess="handePaySuccess"
    :getOpenId="ensureOpenId"
    :isInWeChat="isInWeChat"
    :isInAlipay="isInAlipay"
    :isH5="isWeb"
    :appId="WXPayAppId"
    :isFocus="isFocus"
    :showAliPay="!isInWeChat"
    :showWeixinPay="isInWeChat"
    @missName="handleMissName"
    @editUserAccount="handleEditUserAccount"
    @currentChange="emit('currentChange', $event)"
  />
</template>

<script setup lang="ts">
@@ -29,6 +29,10 @@
defineOptions({
  name: 'InnerPage',
});

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

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

@@ -56,4 +60,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,65 @@
<template>
  <PageLayout title="电费充值" class="electricBillRecharge-page-wrapper" hasBorder>
    <InnerPage />
  </PageLayout>
  <PageLayoutWithBg
    class="electricBillRecharge-page-wrapper"
    :title="current != 'step2' ? title : ''"
  >
    <template #navigationBar v-if="current === 'step2'">
      <TranslateNavigationBar :title="title" :rangeValue="rangeValue"> </TranslateNavigationBar>
    </template>
    <template #bg>
      <div
        class="electricBillRecharge-page-bg"
        :style="
          current === 'step2' && {
            backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
            opacity: 1 - rangeValue,
          }
        "
      ></div>
    </template>
    <ContentScrollView hasPaddingTop style="background-color: transparent" @scroll="scroll">
      <InnerPage @currentChange="handleCurrentChange" />
    </ContentScrollView>
  </PageLayoutWithBg>
</template>

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

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

type Current = 'step1' | 'step2';

const title = '电费充值';

const current = ref<Current>();

function handleCurrentChange(val: Current) {
  current.value = val;
}

const { rangeValue, scroll } = useScrollRange();
</script>

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

.electricBillRecharge-page-wrapper {
  background-color: $body-background-color;

  .electricBillRecharge-page-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 452px;
    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,62 @@
<template>
  <PageLayout title="燃气充值" class="gasBillRecharge-page-wrapper" hasBorder>
    <InnerPage />
  </PageLayout>
  <PageLayoutWithBg class="gasBillRecharge-page-wrapper" :title="current != 'step3' ? title : ''">
    <template #navigationBar v-if="current === 'step3'">
      <TranslateNavigationBar :title="title" :rangeValue="rangeValue"> </TranslateNavigationBar>
    </template>
    <template #bg>
      <div
        class="gasBillRecharge-page-bg"
        :style="
          current === 'step3' && {
            backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
            opacity: 1 - rangeValue,
          }
        "
      ></div>
    </template>
    <ContentScrollView hasPaddingTop style="background-color: transparent" @scroll="scroll">
      <InnerPage @currentChange="handleCurrentChange" />
    </ContentScrollView>
  </PageLayoutWithBg>
</template>

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

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

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

const title = '燃气充值';

const current = ref<Current>();

function handleCurrentChange(val: Current) {
  current.value = val;
}

const { rangeValue, scroll } = useScrollRange();
</script>

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

.gasBillRecharge-page-wrapper {
  background-color: $body-background-color;

  .gasBillRecharge-page-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100% 452px;
    background-repeat: no-repeat;
  }
}
</style>

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

@@ -1,22 +1,20 @@
<template>
  <ContentScrollView hasPaddingTop style="background-color: transparent">
    <PhoneBillRecharge
      @goPay="goPay"
      :isDev="isDev"
      @paySuccess="handePaySuccess"
      :getOpenId="ensureOpenId"
      :isInWeChat="isInWeChat"
      :isInAlipay="isInAlipay"
      :isH5="isWeb"
      :appId="WXPayAppId"
      :isFocus="isFocus"
      :showAliPay="!isInWeChat"
      :showWeixinPay="isInWeChat"
      @missName="handleMissName"
      @editUserAccount="handleEditUserAccount"
      @currentChange="emit('currentChange', $event)"
    />
  </ContentScrollView>
  <PhoneBillRecharge
    @goPay="goPay"
    :isDev="isDev"
    @paySuccess="handePaySuccess"
    :getOpenId="ensureOpenId"
    :isInWeChat="isInWeChat"
    :isInAlipay="isInAlipay"
    :isH5="isWeb"
    :appId="WXPayAppId"
    :isFocus="isFocus"
    :showAliPay="!isInWeChat"
    :showWeixinPay="isInWeChat"
    @missName="handleMissName"
    @editUserAccount="handleEditUserAccount"
    @currentChange="emit('currentChange', $event)"
  />
</template>

<script setup lang="ts">

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

@@ -1,28 +1,27 @@
<template>
  <PageLayout
    class="phoneBillRecharge-page-wrapper"
    :style="
      current === 'step2' && {
        backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
      }
    "
    :title="current != 'step2' && title"
  >
  <PageLayoutWithBg class="phoneBillRecharge-page-wrapper" :title="current != 'step2' ? title : ''">
    <template #navigationBar v-if="current === 'step2'">
      <TransparentNavigationBar
        :title="title"
        :is-absolute="false"
        mode="dark"
        navigationArrowWhite
      >
      </TransparentNavigationBar>
      <TranslateNavigationBar :title="title" :rangeValue="rangeValue"> </TranslateNavigationBar>
    </template>
    <InnerPage @currentChange="handleCurrentChange" />
  </PageLayout>
    <template #bg>
      <div
        class="phoneBillRecharge-page-bg"
        :style="
          current === 'step2' && {
            backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
            opacity: 1 - rangeValue,
          }
        "
      ></div>
    </template>
    <ContentScrollView hasPaddingTop style="background-color: transparent" @scroll="scroll">
      <InnerPage @currentChange="handleCurrentChange" />
    </ContentScrollView>
  </PageLayoutWithBg>
</template>

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

@@ -39,24 +38,25 @@
function handleCurrentChange(val: Current) {
  current.value = val;
}

const { rangeValue, scroll } = useScrollRange();
</script>

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

.phoneBillRecharge-page-wrapper {
  background-size: 100% 452px;
  background-color: $body-background-color;
  background-repeat: no-repeat;

  .phoneBillRecharge-page-bg {
    position: fixed;
    z-index: -1;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 452px;
    object-fit: cover;
    right: 0;
    bottom: 0;
    background-size: 100% 452px;
    background-repeat: no-repeat;
  }
}
</style>

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

@@ -1,11 +1,17 @@
<template>
  <PageLayout title="充值成功" class="rechargeElectricResult-page-wrapper" hasBorder>
    <ContentScrollView>
      <RechargeResultView
        style="margin-top: 40px"
      <ResultWithTips
        :title="title"
        :orderNo="orderNo"
        type="success"
        dangerTips="同一号码充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！"
        @go-back-home="goHome()"
        title="支付成功，充值款将在0-72小时内到账"
      />
      >
        <template #remark>
          <div class="result-content-remark-item">充值款将在0-72小时内到账</div>
        </template>
      </ResultWithTips>
    </ContentScrollView>
  </PageLayout>
</template>
@@ -13,9 +19,19 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import { goHome } from '@/utils';
import { RechargeResultView } from '@life-payment/components';
import { ResultWithTips } from '@life-payment/components';

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

type Props = {
  title?: string;
  orderNo?: string;
  dangerTips?: string;
};

const props = withDefaults(defineProps<Props>(), {
  title: '支付成功',
});
</script>

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

@@ -1,15 +1,17 @@
<template>
  <PageLayout title="充值成功" class="rechargeGasResult-page-wrapper" hasBorder>
    <ContentScrollView>
      <RechargeResultView
        style="margin-top: 40px"
      <ResultWithTips
        :title="title"
        :orderNo="orderNo"
        type="success"
        dangerTips="同一燃气费账户在充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！"
        @go-back-home="goHome()"
        title="支付成功，充值款将在0-72小时内到账"
      >
        <template #tips>
          同一燃气费账户在充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！
        <template #remark>
          <div class="result-content-remark-item">充值款将在0-72小时内到账</div>
        </template>
      </RechargeResultView>
      </ResultWithTips>
    </ContentScrollView>
  </PageLayout>
</template>
@@ -17,9 +19,18 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import { goHome } from '@/utils';
import { RechargeResultView } from '@life-payment/components';
import { ResultWithTips } from '@life-payment/components';

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

type Props = {
  title?: string;
  orderNo?: string;
};

const props = withDefaults(defineProps<Props>(), {
  title: '支付成功',
});
</script>

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

@@ -1,7 +1,17 @@
<template>
  <PageLayout title="充值成功" class="rechargeResult-page-wrapper" hasBorder>
    <ContentScrollView>
      <RechargeResultView style="margin-top: 40px" @go-back-home="goHome()" :orderNo="orderNo" />
      <ResultWithTips
        title="支付成功"
        :orderNo="orderNo"
        type="success"
        dangerTips="同一号码充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！"
        @go-back-home="goHome()"
      >
        <template #remark>
          <div class="result-content-remark-item">充值款将在0-24小时内到账</div>
        </template>
      </ResultWithTips>
    </ContentScrollView>
  </PageLayout>
</template>
@@ -9,7 +19,7 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import { goHome } from '@/utils';
import { RechargeResultView } from '@life-payment/components';
import { ResultWithTips } from '@life-payment/components';
import Taro from '@tarojs/taro';

defineOptions({

 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/assets/account/icon-account-delete.png

 packages/components/src/assets/account/icon-account-edit.png

 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="StatusEnumImg" 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"
@@ -25,7 +27,7 @@
        </div>
        <div
          class="order-card-action"
          v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败"
          v-if="frontStatus === LifeRechargeConstants.LifePayOrderFrontStatusEnum.退款失败"
          @click="emit('goRefundDetail', orderNo)"
        >
          详情
@@ -47,6 +49,7 @@
type Props = {
  title: string;
  status?: LifeRechargeConstants.LifePayOrderStatusEnum;
  frontStatus?: LifeRechargeConstants.LifePayOrderFrontStatusEnum;
  orderNo: string;
  id: string;
};
@@ -68,10 +71,19 @@
  [LifeRechargeConstants.LifePayOrderStatusEnum.退款中]: OssAssets.card.Refund,
};

const shoeFooter = computed(() => {
const StatusEnumImg = computed(() => {
  if (props.frontStatus === LifeRechargeConstants.LifePayOrderFrontStatusEnum.退款失败) {
    return OssAssets.card.RefundFail;
  } else {
    return LifePayOrderStatusEnumImg[props.status];
  }
});

const showFooter = computed(() => {
  return (
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中 ||
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败 ||
    props.frontStatus === LifeRechargeConstants.LifePayOrderFrontStatusEnum.退款失败
  );
});
</script>

 packages/components/src/components/Card/OrderCardItem.vue

@@ -1,6 +1,9 @@
<template>
  <div class="order-card-item" :class="{ danger }">
    <div class="order-card-item-label" :style="{ width: labelWidth, textAlign: textAlign }">
    <div
      class="order-card-item-label"
      :style="{ width: Taro.pxTransform(labelWidth), textAlign: textAlign }"
    >
      <slot name="label">{{ label }}</slot>
    </div>
    <div class="order-card-item-value">
@@ -10,6 +13,8 @@
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro';

defineOptions({
  name: 'OrderCardItem',
});
@@ -23,7 +28,7 @@
};

const props = withDefaults(defineProps<Props>(), {
  labelWidth: '80px',
  labelWidth: 140,
  textAlign: 'left',
});
</script>

 packages/components/src/components/Card/UserAccountCard.vue

New file
@@ -0,0 +1,28 @@
<template>
  <div class="user-account-card">
    <div class="user-account-card-title">
      <img class="user-account-card-icon" :src="icon" alt="" />
      <span class="user-account-card-text">{{ title }}</span>
    </div>
    <div class="user-account-card-content">{{ content }}</div>
    <div class="user-account-card-remark">{{ remark }}</div>
    <div class="user-account-card-actions">
      <slot name="action" />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'UserAccountCard',
});

type Props = {
  title?: string;
  content?: string;
  icon?: string;
  remark?: string;
};

const props = withDefaults(defineProps<Props>(), {});
</script>

 packages/components/src/components/Result/Result.vue

New file
@@ -0,0 +1,65 @@
<template>
  <div class="result-wrapper" v-bind="$attrs">
    <div class="result-content">
      <img class="result-content-icon" :src="icon" />
      <div class="result-content-title">{{ title }}</div>
      <div class="result-content-remark">
        <slot name="remark"> </slot>
      </div>
    </div>
    <div class="result-order-number">
      <div class="result-order-number-label">订单编号：</div>
      <div class="result-order-number-value">{{ orderNo }}</div>
    </div>
    <div class="result-wrapper-tips">
      <slot name="tips"> </slot>
    </div>
    <div class="result-wrapper-actions">
      <slot name="actions">
        <div class="chunk-form-actions">
          <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')">
            <div class="recharge-button-inner">
              <div class="recharge-button-text">返回首页</div>
            </div>
          </nut-button>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { OssAssets } from '../../constants/img';

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

type Props = {
  title?: string;
  type?: 'success' | 'fail';
  orderNo?: string;
  servicePhone?: string;
  dangerTips?: string;
  warningTips?: string;
  customerServiceTips?: string;
};

const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (e: 'goBackHome'): void;
}>();

const icon = computed(() => {
  switch (props.type) {
    case 'success':
      return OssAssets.result.Success;
    case 'fail':
      return OssAssets.result.Fail;
    default:
      return OssAssets.result.Success;
  }
});
</script>

 packages/components/src/components/Result/ResultWithTips.vue

New file
@@ -0,0 +1,35 @@
<template>
  <Result>
    <template #remark>
      <slot name="remark"> </slot>
    </template>
    <template #tips>
      <slot name="tips">
        <div class="result-wrapper-tips-item title">充值须知</div>
        <div class="result-wrapper-tips-item danger">{{ dangerTips }}</div>
        <div class="result-wrapper-tips-item warning">{{ warningTips }}</div>
        <div class="result-wrapper-tips-item">{{ customerServiceTips }}</div>
      </slot>
    </template>
  </Result>
</template>

<script setup lang="ts">
import Result from './Result.vue';
import { CustomerServiceTips } from '../../constants';

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

type Props = {
  dangerTips?: string;
  warningTips?: string;
  customerServiceTips?: string;
};

const props = withDefaults(defineProps<Props>(), {
  warningTips: '如接到陌生来电，对方以缴费或误操作等理由要求处理款项，务必立即拉黑，谨防诈骗!!!',
  customerServiceTips: CustomerServiceTips,
});
</script>

 packages/components/src/constants/img.ts

@@ -16,4 +16,15 @@
    Success: `${OssBasePath}/lifePayment/assets/card/card-status-success.png`,
    WaitRefund: `${OssBasePath}/lifePayment/assets/card/card-status-wait-refund.png`,
  },

  accountCard: {
    Electric: `${OssBasePath}/lifePayment/assets/card/account-card-electric.png`,
    Gas: `${OssBasePath}/lifePayment/assets/card/account-card-gas.png`,
    Phone: `${OssBasePath}/lifePayment/assets/card/account-card-phone.png`,
  },

  result: {
    Success: `${OssBasePath}/lifePayment/assets/common/icon-result-success.png`,
    Fail: `${OssBasePath}/lifePayment/assets/common/icon-result-fail.png`,
  },
};

 packages/components/src/index.ts

@@ -4,6 +4,8 @@
export { default as GasBillRecharge } from './views/GasBillRecharge/GasBillRecharge.vue';
export { default as SelectPayTypeView } from './views/SelectPayTypeView/SelectPayTypeView.vue';
export { default as RechargeResultView } from './views/RechargeResultView/RechargeResultView.vue';
export { default as Result } from './components/Result/Result.vue';
export { default as ResultWithTips } from './components/Result/ResultWithTips.vue';
export { default as PhoneOrder } from './views/Order/components/PhoneOrder.vue';
export { default as ElectricOrder } from './views/Order/components/ElectricOrder.vue';
export { default as GasOrder } from './views/Order/components/GasOrder.vue';

 packages/components/src/styles/card.scss

@@ -176,3 +176,72 @@
    @include ellipsis;
  }
}

.user-account-card {
  border-radius: 20px;
  padding: 32px;

  .user-account-card-title {
    display: flex;
    align-items: center;
    margin-bottom: 26px;
    color: boleGetCssVar('text-color', 'primary');

    .user-account-card-icon {
      width: 88px;
      height: 88px;
      margin-right: 26px;
    }

    .user-account-card-title-text {
      font-size: 36px;
      line-height: 50px;
      font-weight: 500;
    }
  }

  .user-account-card-content {
    font-size: 34px;
    font-weight: 400;
    line-height: 48px;
    margin-bottom: 14px;
    color: boleGetCssVar('text-color', 'regular');
    @include ellipsis;
  }

  .user-account-card-remark {
    font-size: 30px;
    line-height: 42px;
    font-weight: 400;
    margin-bottom: 20px;
    color: boleGetCssVar('text-color', 'secondary');
    @include ellipsis;
  }

  .user-account-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .user-account-card-action {
      display: flex;
      align-items: center;

      .user-account-card-action-icon {
        width: 40px;
        height: 40px;
        margin-right: 12px;
      }

      .user-account-card-action-text {
        font-size: 26px;
        line-height: 36px;
        color: #777;
      }
    }

    .user-account-card-action + .user-account-card-action {
      margin-left: 64px;
    }
  }
}

 packages/components/src/styles/components.scss

@@ -377,3 +377,109 @@
    }
  }
}

.result-wrapper {
  margin-top: 32px;

  .result-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 64px 0;
    background-color: #ffffff;
    border-radius: 20px;
    margin-bottom: 32px;

    .result-content-icon {
      width: 128px;
      height: 128px;
      margin-bottom: 50px;
    }

    .result-content-title {
      font-size: 36px;
      color: boleGetCssVar('text-color', 'primary');
      font-weight: 600;
      margin-bottom: 10px;
      line-height: 52px;
    }

    .result-content-remark {
      font-size: 24px;
      line-height: 38px;
      color: boleGetCssVar('text-color', 'regular');
      font-weight: 400;
      text-align: center;
      padding: 0 100px;
    }
  }

  .result-order-number {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 24px 32px;
    display: flex;
    margin-bottom: 32px;

    .result-order-number-label {
      font-size: 30px;
      color: boleGetCssVar('text-color', 'primary');
      font-weight: 400;
      line-height: 42px;
      display: inline-flex;
      align-items: center;

      &::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 30px;
        border-radius: 4px;
        background-color: boleGetCssVar('color', 'primary');
        margin-right: 12px;
      }
    }

    .result-order-number-value {
      font-size: 30px;
      color: boleGetCssVar('text-color', 'primary');
      font-weight: 400;
      line-height: 42px;
      text-align: right;
      flex: 1;
      min-width: 0;
      @include ellipsis();
    }
  }

  .result-wrapper-tips {
    .result-wrapper-tips-item {
      margin-bottom: 16px;
      font-size: 28px;
      color: boleGetCssVar('text-color', 'regular');
      font-weight: 400;
      line-height: 44px;

      &.title {
        margin-bottom: 12px;
        font-size: 30px;
        color: boleGetCssVar('text-color', 'primary');
        font-weight: 400;
      }

      &.danger {
        color: boleGetCssVar('color', 'danger');
      }
      &.warning {
        color: boleGetCssVar('color', 'warning');
      }
    }
  }

  .result-wrapper-actions {
    .recharge-button-text {
      font-size: 32px;
    }
  }
}

 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,31 @@
      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;
        display: flex;

        &::before {
          content: '';
          display: inline-block;
          width: 8px;
          height: 24px;
          background-color: #fa4640;
          border-radius: 24px;
          margin-right: 12px;
          line-height: 42px;
          margin-top: 9px;
        }
      }
    }

@@ -40,8 +59,8 @@
    }

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

      img {
        width: 100%;
@@ -50,14 +69,11 @@
    }
  }

  .order-card-content {
    padding-bottom: 26px;
  }

  .order-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 32px;
    margin-top: 26px;
    border-top: solid 1px #f7f7f7;
  }


 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/Order/OrderRefundResultView.vue

@@ -1,22 +1,26 @@
<template>
  <LoadingLayout :loading="isLoading">
    <div class="recharge-result-view" v-bind="$attrs">
      <div class="recharge-result-view-title">{{ title }}</div>
      <div class="recharge-result-view-subtitle">订单号：{{ orderNo }}</div>
      <div class="recharge-result-view-remark">
        {{ detail.refundCheckRemark }},如有疑问请联系客服 {{ CustomerServicePhone }}（周一到周五
        9:00-17:30）
      </div>
      <div class="recharge-result-view-btn-wrapper">
        <div class="recharge-result-view-btn" @click="emit('goBackHome')">回首页</div>
      </div>
    </div>
    <Result
      v-bind="$attrs"
      :title="title"
      :orderNo="orderNo"
      type="fail"
      @goBackHome="emit('goBackHome')"
    >
      <template #remark>
        <div class="result-content-remark-item">{{ detail.refundCheckRemark }}</div>
        <div class="result-content-remark-item">
          如有疑问 请联系客服 {{ CustomerServicePhone }}（周一到周五 9:00-17:30）
        </div>
      </template>
    </Result>
  </LoadingLayout>
</template>

<script setup lang="ts">
import { LifeRechargeConstants, useLifeRechargeContext } from '@life-payment/core-vue';
import { CustomerServicePhone } from '../../constants';
import Result from '../../components/Result/Result.vue';
import { CustomerServicePhone, OssAssets } from '../../constants';
import { useQuery } from '@tanstack/vue-query';
import { computed } from 'vue';
import LoadingLayout from '../../components//Layout/LoadingLayout.vue';

 packages/components/src/views/Order/components/ElectricOrder.vue

@@ -7,6 +7,7 @@
      <OrderCard
        title="电费充值"
        :status="item?.lifePayOrderStatus"
        :frontStatus="item?.frontStatus"
        :order-no="item?.orderNo"
        :id="item?.id"
        @goApplyRefund="emit('goApplyRefund', $event)"

 packages/components/src/views/Order/components/GasOrder.vue

@@ -7,6 +7,7 @@
      <OrderCard
        title="燃气充值"
        :status="item?.lifePayOrderStatus"
        :frontStatus="item?.frontStatus"
        :order-no="item?.orderNo"
        :id="item?.id"
        @goApplyRefund="emit('goApplyRefund', $event)"
@@ -52,7 +53,7 @@
            item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.退款失败
          "
          label="退款发起时间:"
          labelWidth="110px"
          :labelWidth="200"
          :value="
            item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss')
          "

 packages/components/src/views/Order/components/PhoneOrder.vue

@@ -7,6 +7,7 @@
      <OrderCard
        title="话费充值"
        :status="item?.lifePayOrderStatus"
        :frontStatus="item?.frontStatus"
        :order-no="item?.orderNo"
        :id="item?.id"
        @goApplyRefund="emit('goApplyRefund', $event)"
@@ -52,7 +53,7 @@
            item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.退款失败
          "
          label="退款发起时间:"
          labelWidth="110px"
          :labelWidth="200"
          :value="
            item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss')
          "

 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/RechargeResultView/RechargeResultView.vue

@@ -1,25 +1,28 @@
<template>
  <div class="recharge-result-view">
    <div class="recharge-result-view-title">{{ title }}</div>
    <div class="recharge-result-view-subtitle">订单号：{{ orderNo }}</div>
    <div class="recharge-result-view-tips">
      <slot name="tips">
        同一号码充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！
      </slot>
    </div>
    <div class="recharge-result-view-warning">
      如接到陌生来电，对方以缴费或误操作等理由要求处理款项，务必立即拉黑，谨防诈骗!!!
    </div>
    <div class="recharge-result-view-customerService">{{ CustomerServiceTips }}</div>
    <div class="recharge-result-view-btn-wrapper">
      <div class="recharge-result-view-btn" @click="emit('goBackHome')">回首页</div>
    </div>
  </div>
  <Result
    :title="title"
    :orderNo="orderNo"
    :icon="OssAssets.result.Success"
    :customerServiceTips="CustomerServiceTips"
    :dangerTips="dangerTips"
    warningTips="如接到陌生来电，对方以缴费或误操作等理由要求处理款项，务必立即拉黑，谨防诈骗!!!"
  >
    <template #actions>
      <div class="chunk-form-actions">
        <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')">
          <div class="recharge-button-inner">
            <div class="recharge-button-text">返回首页</div>
          </div>
        </nut-button>
      </div>
    </template>
  </Result>
</template>

<script setup lang="ts">
import { LifeRechargeConstants } from '@life-payment/core-vue';
import { CustomerServiceTips } from '../../constants';
import { CustomerServiceTips, OssAssets } from '../../constants';
import Result from '../../components/Result/Result.vue';

defineOptions({
  name: 'RechargeResultView',
@@ -28,11 +31,14 @@
type Props = {
  title?: string;
  orderNo?: string;
  dangerTips?: string;
  lifePayOrderType?: LifeRechargeConstants.LifePayOrderTypeEnum;
};

const props = withDefaults(defineProps<Props>(), {
  title: '支付成功，充值款将在0-24小时内到账',
  title: '支付成功',
  dangerTips:
    '同一号码充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！',
});

const emit = defineEmits<{

 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>


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

@@ -4,24 +4,35 @@
    v-bind="infiniteLoadingProps"
  >
    <template #renderItem="{ item }">
      <AccountCard
      <UserAccountCard
        :title="TitleMap[item.lifePayType]"
        :icon="TitleIconMap[item.lifePayType]"
        :content="
          item.lifePayType === LifeRechargeConstants.LifePayOrderTypeEnum.话费订单
            ? item.content
            ? `${
                BlLifeRecharge.constants.IspCodeText[
                  JSON.parse(item?.extraProperties)?.ispCode ?? ''
                ]
              }-${item.content}`
            : `${item.city}-${item.content}`
        "
        :remark="item.remark"
        :style="{
          marginBottom: Taro.pxTransform(20),
          marginBottom: Taro.pxTransform(32),
          backgroundColor: '#ffffff',
        }"
      >
        <template #action>
          <div class="account-card-action" @click="handleEditUserAccount(item)">编辑</div>
          <div class="account-card-action" @click="handleDeleteUserAccount(item)">删除</div>
          <div class="user-account-card-action" @click="handleEditUserAccount(item)">
            <img :src="IconAccountEdit" class="user-account-card-action-icon" />
            <span class="user-account-card-action-text">编辑</span>
          </div>
          <div class="user-account-card-action" @click="handleDeleteUserAccount(item)">
            <img :src="IconAccountDelete" class="user-account-card-action-icon" />
            <span class="user-account-card-action-text">删除</span>
          </div>
        </template>
      </AccountCard>
      </UserAccountCard>
    </template>
  </InfiniteLoading>
</template>
@@ -37,7 +48,10 @@
} from '@life-payment/core-vue';
import { useInfiniteLoading } from '../../hooks/infiniteLoading';
import { OrderInputType } from '../../constants';
import AccountCard from '../../components/Card/AccountCard.vue';
import UserAccountCard from '../../components/Card/UserAccountCard.vue';
import IconAccountDelete from '../../assets/account/icon-account-delete.png';
import IconAccountEdit from '../../assets/account/icon-account-edit.png';
import { OssAssets } from '../../constants';
import Taro from '@tarojs/taro';

defineOptions({
@@ -51,9 +65,15 @@
const { blLifeRecharge } = useLifeRechargeContext();

const TitleMap = {
  [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: '手机号',
  [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: '电费户号',
  [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: '燃气户号',
  [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: '话费',
  [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: '电费',
  [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: '燃气费',
};

const TitleIconMap = {
  [LifeRechargeConstants.LifePayOrderTypeEnum.话费订单]: OssAssets.accountCard.Phone,
  [LifeRechargeConstants.LifePayOrderTypeEnum.电费订单]: OssAssets.accountCard.Electric,
  [LifeRechargeConstants.LifePayOrderTypeEnum.燃气订单]: OssAssets.accountCard.Gas,
};

const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(