From bd7dd96c732ded6854d47bf77f65e5c64d3d15e2 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 21 五月 2025 13:24:09 +0800
Subject: [PATCH] fix: 修改ui
---
packages/components/src/views/electricBillRecharge/electricBillRecharge.vue | 19 +
packages/components/src/components/Card/OrderCard.vue | 14
apps/taro/src/components/Layout/PageLayout.vue | 10
apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue | 42 ++++
packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeBaseForm.vue | 10
apps/taro/src/subpackages/recharge/gasBillRecharge/InnerPage.vue | 14 +
packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue | 2
apps/taro/src/subpackages/userAccount/editElectricUserAccount/editElectricUserAccount.vue | 2
packages/components/src/views/GasBillRecharge/GasBillRechargeStep1.vue | 21 +
packages/components/src/views/GasBillRecharge/GasBillRechargeStep2.vue | 24 +-
apps/taro/src/subpackages/userAccount/editGasUserAccount/InnerPage.vue | 2
packages/components/src/views/userAccount/EditElectricUserAccount.vue | 14
apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue | 2
packages/components/src/views/GasBillRecharge/GasBillRechargeBaseForm.vue | 2
packages/components/src/views/GasBillRecharge/GasBillRechargeStep3.vue | 120 +++++++----
packages/components/src/views/userAccount/EditPhoneUserAccount.vue | 14
packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep2.vue | 130 +++++++-----
apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue | 14 +
apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue | 42 ++++
apps/taro/src/subpackages/userAccount/editElectricUserAccount/InnerPage.vue | 2
apps/taro/src/subpackages/userAccount/editPhoneUserAccount/InnerPage.vue | 2
packages/components/src/styles/orderCard.scss | 12
apps/taro/src/subpackages/userAccount/editGasUserAccount/editGasUserAccount.vue | 2
packages/components/src/views/userAccount/EditGasUserAccount.vue | 14
apps/taro/src/subpackages/userAccount/editPhoneUserAccount/editPhoneUserAccount.vue | 2
packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue | 24 +-
packages/components/src/styles/gas.scss | 22 +
27 files changed, 382 insertions(+), 196 deletions(-)
diff --git a/apps/taro/src/components/Layout/PageLayout.vue b/apps/taro/src/components/Layout/PageLayout.vue
index 02fa48e..84a15dd 100644
--- a/apps/taro/src/components/Layout/PageLayout.vue
+++ b/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;
diff --git a/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue b/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
index d1ea12e..f18a1bd 100644
--- a/apps/taro/src/subpackages/recharge/electricBillRecharge/InnerPage.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue b/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue
index cd96e69..b698085 100644
--- a/apps/taro/src/subpackages/recharge/electricBillRecharge/electricBillRecharge.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/recharge/gasBillRecharge/InnerPage.vue b/apps/taro/src/subpackages/recharge/gasBillRecharge/InnerPage.vue
index a545c37..cee63c6 100644
--- a/apps/taro/src/subpackages/recharge/gasBillRecharge/InnerPage.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue b/apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue
index a801c75..437bc9a 100644
--- a/apps/taro/src/subpackages/recharge/gasBillRecharge/gasBillRecharge.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue b/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue
index eaf617a..7b96c66 100644
--- a/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue
+++ b/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
diff --git a/apps/taro/src/subpackages/userAccount/editElectricUserAccount/InnerPage.vue b/apps/taro/src/subpackages/userAccount/editElectricUserAccount/InnerPage.vue
index 1407742..55f4e12 100644
--- a/apps/taro/src/subpackages/userAccount/editElectricUserAccount/InnerPage.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/userAccount/editElectricUserAccount/editElectricUserAccount.vue b/apps/taro/src/subpackages/userAccount/editElectricUserAccount/editElectricUserAccount.vue
index c954720..9d34602 100644
--- a/apps/taro/src/subpackages/userAccount/editElectricUserAccount/editElectricUserAccount.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/userAccount/editGasUserAccount/InnerPage.vue b/apps/taro/src/subpackages/userAccount/editGasUserAccount/InnerPage.vue
index e78a700..0db4910 100644
--- a/apps/taro/src/subpackages/userAccount/editGasUserAccount/InnerPage.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/userAccount/editGasUserAccount/editGasUserAccount.vue b/apps/taro/src/subpackages/userAccount/editGasUserAccount/editGasUserAccount.vue
index 2c239b0..e6a01c5 100644
--- a/apps/taro/src/subpackages/userAccount/editGasUserAccount/editGasUserAccount.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/userAccount/editPhoneUserAccount/InnerPage.vue b/apps/taro/src/subpackages/userAccount/editPhoneUserAccount/InnerPage.vue
index 1c6feee..8ba66c5 100644
--- a/apps/taro/src/subpackages/userAccount/editPhoneUserAccount/InnerPage.vue
+++ b/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>
diff --git a/apps/taro/src/subpackages/userAccount/editPhoneUserAccount/editPhoneUserAccount.vue b/apps/taro/src/subpackages/userAccount/editPhoneUserAccount/editPhoneUserAccount.vue
index d2b7147..cbf6883 100644
--- a/apps/taro/src/subpackages/userAccount/editPhoneUserAccount/editPhoneUserAccount.vue
+++ b/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>
diff --git a/packages/components/src/components/Card/OrderCard.vue b/packages/components/src/components/Card/OrderCard.vue
index d8f2a47..d51367a 100644
--- a/packages/components/src/components/Card/OrderCard.vue
+++ b/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.閫�娆惧け璐�
diff --git a/packages/components/src/styles/gas.scss b/packages/components/src/styles/gas.scss
index 3687334..fa139b6 100644
--- a/packages/components/src/styles/gas.scss
+++ b/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;
+ }
}
}
diff --git a/packages/components/src/styles/orderCard.scss b/packages/components/src/styles/orderCard.scss
index 9619746..b552f48 100644
--- a/packages/components/src/styles/orderCard.scss
+++ b/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%;
diff --git a/packages/components/src/views/GasBillRecharge/GasBillRechargeBaseForm.vue b/packages/components/src/views/GasBillRecharge/GasBillRechargeBaseForm.vue
index afc5179..d58c43d 100644
--- a/packages/components/src/views/GasBillRecharge/GasBillRechargeBaseForm.vue
+++ b/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>
diff --git a/packages/components/src/views/GasBillRecharge/GasBillRechargeStep1.vue b/packages/components/src/views/GasBillRecharge/GasBillRechargeStep1.vue
index 32828f1..7a73a9b 100644
--- a/packages/components/src/views/GasBillRecharge/GasBillRechargeStep1.vue
+++ b/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',
diff --git a/packages/components/src/views/GasBillRecharge/GasBillRechargeStep2.vue b/packages/components/src/views/GasBillRecharge/GasBillRechargeStep2.vue
index d7051d8..9f28bb7 100644
--- a/packages/components/src/views/GasBillRecharge/GasBillRechargeStep2.vue
+++ b/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">
diff --git a/packages/components/src/views/GasBillRecharge/GasBillRechargeStep3.vue b/packages/components/src/views/GasBillRecharge/GasBillRechargeStep3.vue
index 7b4588a..be78bf7 100644
--- a/packages/components/src/views/GasBillRecharge/GasBillRechargeStep3.vue
+++ b/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();
diff --git a/packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeBaseForm.vue b/packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeBaseForm.vue
index 163da73..51222db 100644
--- a/packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeBaseForm.vue
+++ b/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">
diff --git a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue b/packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue
index 3c3af5d..d7b13d2 100644
--- a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeBaseForm.vue
+++ b/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
diff --git a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue b/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue
index 402cb1a..857d176 100644
--- a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue
+++ b/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">
diff --git a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep2.vue b/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep2.vue
index c3c7a81..40844f6 100644
--- a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep2.vue
+++ b/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();
diff --git a/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue b/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue
index 83e9ab9..b181b30 100644
--- a/packages/components/src/views/electricBillRecharge/electricBillRecharge.vue
+++ b/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,
diff --git a/packages/components/src/views/userAccount/EditElectricUserAccount.vue b/packages/components/src/views/userAccount/EditElectricUserAccount.vue
index 3c42404..a99795e 100644
--- a/packages/components/src/views/userAccount/EditElectricUserAccount.vue
+++ b/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>
diff --git a/packages/components/src/views/userAccount/EditGasUserAccount.vue b/packages/components/src/views/userAccount/EditGasUserAccount.vue
index 1e94383..b75859b 100644
--- a/packages/components/src/views/userAccount/EditGasUserAccount.vue
+++ b/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>
diff --git a/packages/components/src/views/userAccount/EditPhoneUserAccount.vue b/packages/components/src/views/userAccount/EditPhoneUserAccount.vue
index 93654be..2e718b0 100644
--- a/packages/components/src/views/userAccount/EditPhoneUserAccount.vue
+++ b/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>
--
Gitblit v1.9.1