From 9453bef1fc4a3121b28ffa6617f0fbfc81d9f634 Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期一, 19 五月 2025 17:35:11 +0800
Subject: [PATCH] fix: 修改首页ui
---
apps/taro/src/components/Layout/PageLayout.vue | 10
packages/components/src/assets/dashboard/icon-dashboard2.png | 0
packages/components/src/assets/dashboard/icon-dashboard1.png | 0
apps/taro/src/pages/mine/index.scss | 6
apps/taro/src/subpackages/order/order/order.vue | 2
packages/components/src/assets/dashboard/icon-dashboard6.png | 0
apps/taro/src/subpackages/my/dashboard/InnerPage.vue | 2
apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue | 2
apps/taro/src/components/Tabs/ProTabs.vue | 14
packages/components/src/styles/mine.scss | 68 +++++++
packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue | 9 +
packages/components/src/assets/dashboard/icon-dashboard3.png | 0
apps/taro/src/components/List/List.vue | 1
packages/components/src/assets/dashboard/icon-dashboard7.png | 0
apps/taro/src/constants/img.ts | 3
packages/components/src/styles/rechargeGrid.scss | 7
packages/components/src/assets/dashboard/icon-dashboard4.png | 0
apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue | 37 ++++
apps/taro/src/components/Layout/ContentScrollView.vue | 2
packages/components/src/styles/layout.scss | 34 +++
apps/taro/src/components/Tabs/tabs.ts | 4
apps/taro/src/pages/mine/index.vue | 49 +----
packages/components/src/views/Mine/Dashboard.vue | 71 +++++++
packages/components/src/assets/dashboard/icon-dashboard8.png | 0
apps/taro/src/assets/mine/icon-mine-exist.png | 0
packages/components/src/components/Layout/Chunk.vue | 24 ++
packages/components/src/views/Mine/components/DashboardLargeCell.vue | 15 +
packages/components/src/assets/dashboard/icon-dashboard5.png | 0
apps/taro/src/subpackages/my/dashboard/dashboard.vue | 26 ++
packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeStep2.vue | 57 +++---
packages/components/src/views/Mine/components/DashboardItem.vue | 48 +++++
packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue | 1
32 files changed, 397 insertions(+), 95 deletions(-)
diff --git a/apps/taro/src/assets/mine/icon-mine-exist.png b/apps/taro/src/assets/mine/icon-mine-exist.png
new file mode 100644
index 0000000..9d1b4c4
--- /dev/null
+++ b/apps/taro/src/assets/mine/icon-mine-exist.png
Binary files differ
diff --git a/apps/taro/src/components/Layout/ContentScrollView.vue b/apps/taro/src/components/Layout/ContentScrollView.vue
index 170176a..775f10b 100644
--- a/apps/taro/src/components/Layout/ContentScrollView.vue
+++ b/apps/taro/src/components/Layout/ContentScrollView.vue
@@ -47,7 +47,7 @@
}
&.hasPaddingTop {
- padding-top: 20px;
+ padding-top: 32px;
}
.content-scroll-view-wrapper-inner {
diff --git a/apps/taro/src/components/Layout/PageLayout.vue b/apps/taro/src/components/Layout/PageLayout.vue
index 4396c42..02fa48e 100644
--- a/apps/taro/src/components/Layout/PageLayout.vue
+++ b/apps/taro/src/components/Layout/PageLayout.vue
@@ -10,7 +10,7 @@
v-if="hasLinearBg"
class="page-layout-linear-bg"
:style="{
- height: Taro.pxTransform(props.linearBgHeight),
+ height: '100%',
}"
></div>
</slot>
@@ -136,13 +136,7 @@
top: 0;
left: 0;
width: 100%;
- background: linear-gradient(
- 180deg,
- boleGetCssVar('color', 'primary') 0%,
- #5a86f6 56%,
- #f9f9fb 100%
- );
- filter: blur(0px);
+ background: linear-gradient(180deg, #7cd0ff 0%, rgba(255, 255, 255, 0) 43%, #ffffff 100%);
border-radius: 0px 0px 20px 20px;
}
diff --git a/apps/taro/src/components/List/List.vue b/apps/taro/src/components/List/List.vue
index bcedec1..d8fdac7 100644
--- a/apps/taro/src/components/List/List.vue
+++ b/apps/taro/src/components/List/List.vue
@@ -15,5 +15,6 @@
.pro-list {
background: #ffffff;
+ padding: 32px 0;
}
</style>
diff --git a/apps/taro/src/components/Tabs/ProTabs.vue b/apps/taro/src/components/Tabs/ProTabs.vue
index 6fe046e..8be9dc5 100644
--- a/apps/taro/src/components/Tabs/ProTabs.vue
+++ b/apps/taro/src/components/Tabs/ProTabs.vue
@@ -461,8 +461,8 @@
width: auto;
margin-right: 78rpx;
flex-direction: column;
- font-size: 26rpx;
- color: boleGetCssVar('text-color', 'secondary');
+ font-size: 30rpx;
+ color: boleGetCssVar('text-color', 'regular');
align-items: center;
transition: all 0.3s ease;
min-width: 0;
@@ -473,14 +473,14 @@
}
.nut-tabs__titles-item__text {
- font-size: 28rpx;
+ font-size: 30rpx;
color: boleGetCssVar('text-color', 'regular');
line-height: 40rpx;
}
&.active {
- color: #222;
- font-weight: 700;
+ color: boleGetCssVar('color', 'primary');
+ font-weight: normal;
font-size: 30rpx;
.nut-tabs__sub-titles-item__text {
@@ -492,7 +492,7 @@
}
.nut-tabs__titles-item__text {
- color: boleGetCssVar('text-color', 'primary');
+ color: boleGetCssVar('color', 'primary');
}
}
@@ -507,7 +507,7 @@
.nut-tabs__titles-item__line {
// width: 100%;
background: boleGetCssVar('color', 'primary');
- bottom: 0;
+ bottom: 20rpx;
height: 4rpx;
max-width: 40rpx;
}
diff --git a/apps/taro/src/components/Tabs/tabs.ts b/apps/taro/src/components/Tabs/tabs.ts
index 4647f84..e7fd3c0 100644
--- a/apps/taro/src/components/Tabs/tabs.ts
+++ b/apps/taro/src/components/Tabs/tabs.ts
@@ -1,4 +1,4 @@
-import { ref, PropType, onMounted, reactive } from 'vue';
+import { ref, PropType, onMounted, reactive, VNode } from 'vue';
export type TabsSize = 'large' | 'normal' | 'small';
@@ -32,7 +32,7 @@
},
type: {
type: String,
- default: 'smile', //card銆乴ine銆乻mile
+ default: 'line', //card銆乴ine銆乻mile
},
titleScroll: {
type: Boolean,
diff --git a/apps/taro/src/constants/img.ts b/apps/taro/src/constants/img.ts
index 1a2db99..c1a6036 100644
--- a/apps/taro/src/constants/img.ts
+++ b/apps/taro/src/constants/img.ts
@@ -4,6 +4,9 @@
common: {
CommonPageBg: `${OssBasePath}/matchMakingMini/assets/common/icon-common-page-bg.png`,
HomePageBg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
+ DataPageBg: `${OssBasePath}/lifePayment/assets/common/icon-data-page-bg.png`,
+ MinePageBg: `${OssBasePath}/lifePayment/assets/common/icon-mine-page-bg.png`,
+ PhoneBillRechargePageBg: `${OssBasePath}/lifePayment/assets/common/icon-phoneBillRecharge-page-bg.png`,
},
mine: {
// Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
diff --git a/apps/taro/src/pages/mine/index.scss b/apps/taro/src/pages/mine/index.scss
index 63af7e4..4b99d62 100644
--- a/apps/taro/src/pages/mine/index.scss
+++ b/apps/taro/src/pages/mine/index.scss
@@ -4,8 +4,8 @@
// background-color: $body-background-color;
// }
-.index-page-wrapper {
- .home-page-bg {
+.mine-page-wrapper {
+ .mine-page-bg {
position: fixed;
z-index: -1;
top: 0;
@@ -18,7 +18,7 @@
.mine-page-top-view {
display: flex;
- padding: 36px 36px 64px;
+ padding: 36px boleGetCssVar('size', 'body-padding-h') 64px;
.mine-avatar {
width: 176px;
diff --git a/apps/taro/src/pages/mine/index.vue b/apps/taro/src/pages/mine/index.vue
index d6a3c92..ef455e0 100644
--- a/apps/taro/src/pages/mine/index.vue
+++ b/apps/taro/src/pages/mine/index.vue
@@ -1,44 +1,11 @@
<template>
- <!-- <PageLayoutWithBg class="mine-page-wrapper" title="鎴戠殑" :need-auth="false">
- <template #navigationBar>
- <TransparentNavigationBar
- title="涓汉涓績"
- :is-absolute="false"
- mode="dark"
- ></TransparentNavigationBar>
- </template>
- <template #bg>
- <img :src="OssAssets.mine.Bg" class="mine-page-bg" :style="{ height: `${bgHeight}px` }" />
- </template>
- <div class="mine-page-top-view" @click="goLogin">
- <img class="mine-avatar" :src="DefaultAvatar" alt="" />
- <div class="user-info">
- <div class="user-info-name" v-if="isLogin">
- {{ hiddenPhoneNumber(virtualPhoneNumber) }}
- </div>
- <div class="mine-go-login" v-else>鐧诲綍</div>
- </div>
- </div>
- <ContentScrollView>
- <List class="mine-list-wrapper">
- <ListItem title="璁㈠崟绠＄悊" @click="goOrderManage"></ListItem>
- <ListItem title="鎴峰彿绠＄悊" @click="goUserAccountList"></ListItem>
- <template v-if="isChannelAccount">
- <ListItem title="鏁版嵁鐪嬫澘" @click="goDashboard"></ListItem>
- <ListItem title="鎺ㄥ箍浜岀淮鐮�" @click="goShareQrcode"></ListItem>
- </template>
- <ListItem v-if="isWeb && !isInAlipay" title="鍦ㄧ嚎瀹㈡湇" @click="handleChat"></ListItem>
- <ListItem v-if="isLogin" title="閫�鍑虹櫥褰�" @click="goLogout"></ListItem>
- </List>
- </ContentScrollView>
- </PageLayoutWithBg> -->
- <PageLayout class="index-page-wrapper" :need-auth="false">
+ <PageLayout class="mine-page-wrapper" :need-auth="false">
<template #navigationBar>
<TransparentNavigationBar :title="'涓汉涓績'" :is-absolute="false">
</TransparentNavigationBar>
</template>
<template #bg>
- <img :src="OssAssets.common.HomePageBg" class="home-page-bg" />
+ <img :src="OssAssets.common.MinePageBg" class="mine-page-bg" />
</template>
<div class="mine-page-top-view" @click="goLogin">
<img class="mine-avatar" :src="DefaultAvatar" alt="" />
@@ -49,7 +16,7 @@
<div class="mine-go-login" v-else>鐧诲綍</div>
</div>
</div>
- <ContentView>
+ <ContentScrollView style="background-color: transparent">
<List class="mine-list-wrapper">
<ListItemV2 :icon="IconMineOrder" title="璁㈠崟绠＄悊" @click="goOrderManage"></ListItemV2>
<ListItemV2 :icon="IconMineUserId" title="鎴峰彿绠＄悊" @click="goUserAccountList"></ListItemV2>
@@ -67,9 +34,14 @@
title="鍦ㄧ嚎瀹㈡湇"
@click="handleChat"
></ListItemV2>
- <ListItemV2 v-if="isLogin" title="閫�鍑虹櫥褰�" @click="goLogout"></ListItemV2>
+ <ListItemV2
+ v-if="isLogin"
+ title="閫�鍑虹櫥褰�"
+ @click="goLogout"
+ :icon="IconMineExist"
+ ></ListItemV2>
</List>
- </ContentView>
+ </ContentScrollView>
</PageLayout>
</template>
@@ -84,6 +56,7 @@
import IconMineDataBoard from '@/assets/mine/icon-mine-data-board.png';
import IconMinePromotion from '@/assets/mine/icon-mine-promotion.png';
import IconMineCustomerService from '@/assets/mine/icon-mine-customer-service.png';
+import IconMineExist from '@/assets/mine/icon-mine-exist.png';
import { useSystemStore } from '@/stores/modules/system';
import { useUserStore } from '@/stores/modules/user';
import { Message } from '@/utils';
diff --git a/apps/taro/src/subpackages/my/dashboard/InnerPage.vue b/apps/taro/src/subpackages/my/dashboard/InnerPage.vue
index 6905b9a..6463612 100644
--- a/apps/taro/src/subpackages/my/dashboard/InnerPage.vue
+++ b/apps/taro/src/subpackages/my/dashboard/InnerPage.vue
@@ -1,5 +1,5 @@
<template>
- <ContentScrollView has-padding-top style="background-color: #fff">
+ <ContentScrollView has-padding-top style="background-color: transparent">
<Dashboard />
</ContentScrollView>
</template>
diff --git a/apps/taro/src/subpackages/my/dashboard/dashboard.vue b/apps/taro/src/subpackages/my/dashboard/dashboard.vue
index e31c527..e413dd9 100644
--- a/apps/taro/src/subpackages/my/dashboard/dashboard.vue
+++ b/apps/taro/src/subpackages/my/dashboard/dashboard.vue
@@ -1,5 +1,12 @@
<template>
- <PageLayout title="鏁版嵁鐪嬫澘" class="dashboard-page-wrapper" hasBorder>
+ <PageLayout class="dashboard-page-wrapper">
+ <template #navigationBar>
+ <TransparentNavigationBar :title="'鏁版嵁鐪嬫澘'" :is-absolute="false">
+ </TransparentNavigationBar>
+ </template>
+ <template #bg>
+ <img :src="OssAssets.common.DataPageBg" class="dashboard-page-bg" />
+ </template>
<InnerPage />
</PageLayout>
</template>
@@ -7,8 +14,25 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import InnerPage from './InnerPage.vue';
+import { OssAssets } from '@/constants';
defineOptions({
name: 'dashboard',
});
</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.dashboard-page-wrapper {
+ .dashboard-page-bg {
+ position: fixed;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+</style>
diff --git a/apps/taro/src/subpackages/order/order/order.vue b/apps/taro/src/subpackages/order/order/order.vue
index fe1cf70..0b71eef 100644
--- a/apps/taro/src/subpackages/order/order/order.vue
+++ b/apps/taro/src/subpackages/order/order/order.vue
@@ -1,5 +1,5 @@
<template>
- <PageLayout title="璁㈠崟绠＄悊" class="order-page-wrapper" hasBorder>
+ <PageLayout title="璁㈠崟绠＄悊" class="order-page-wrapper">
<InnerPage />
</PageLayout>
</template>
diff --git a/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue b/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
index 4b3e585..2d7461d 100644
--- a/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
+++ b/apps/taro/src/subpackages/recharge/phoneBillRecharge/InnerPage.vue
@@ -1,5 +1,5 @@
<template>
- <ContentScrollView :paddingH="false" style="background-color: #fff">
+ <ContentScrollView hasPaddingTop style="background-color: transparent">
<PhoneBillRecharge
@goPay="goPay"
:isDev="isDev"
diff --git a/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue b/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue
index 1a6a678..f813b87 100644
--- a/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue
+++ b/apps/taro/src/subpackages/recharge/phoneBillRecharge/phoneBillRecharge.vue
@@ -1,5 +1,19 @@
<template>
- <PageLayout title="璇濊垂鍏呭��" class="phoneBillRecharge-page-wrapper" hasBorder>
+ <PageLayout
+ class="phoneBillRecharge-page-wrapper"
+ :style="{
+ backgroundImage: `url(${OssAssets.common.PhoneBillRechargePageBg})`,
+ }"
+ >
+ <template #navigationBar>
+ <TransparentNavigationBar
+ :title="'璇濊垂鍏呭��'"
+ :is-absolute="false"
+ mode="dark"
+ navigationArrowWhite
+ >
+ </TransparentNavigationBar>
+ </template>
<InnerPage />
</PageLayout>
</template>
@@ -7,8 +21,29 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import InnerPage from './InnerPage.vue';
+import { OssAssets } from '@/constants';
defineOptions({
name: 'phoneBillRecharge',
});
</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;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 452px;
+ object-fit: cover;
+ }
+}
+</style>
diff --git a/packages/components/src/assets/dashboard/icon-dashboard1.png b/packages/components/src/assets/dashboard/icon-dashboard1.png
new file mode 100644
index 0000000..6da19ca
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard1.png
Binary files differ
diff --git a/packages/components/src/assets/dashboard/icon-dashboard2.png b/packages/components/src/assets/dashboard/icon-dashboard2.png
new file mode 100644
index 0000000..ad4bb30
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard2.png
Binary files differ
diff --git a/packages/components/src/assets/dashboard/icon-dashboard3.png b/packages/components/src/assets/dashboard/icon-dashboard3.png
new file mode 100644
index 0000000..6f8ad32
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard3.png
Binary files differ
diff --git a/packages/components/src/assets/dashboard/icon-dashboard4.png b/packages/components/src/assets/dashboard/icon-dashboard4.png
new file mode 100644
index 0000000..e5f190a
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard4.png
Binary files differ
diff --git a/packages/components/src/assets/dashboard/icon-dashboard5.png b/packages/components/src/assets/dashboard/icon-dashboard5.png
new file mode 100644
index 0000000..f31d843
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard5.png
Binary files differ
diff --git a/packages/components/src/assets/dashboard/icon-dashboard6.png b/packages/components/src/assets/dashboard/icon-dashboard6.png
new file mode 100644
index 0000000..3cad4a0
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard6.png
Binary files differ
diff --git a/packages/components/src/assets/dashboard/icon-dashboard7.png b/packages/components/src/assets/dashboard/icon-dashboard7.png
new file mode 100644
index 0000000..a49a9b6
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard7.png
Binary files differ
diff --git a/packages/components/src/assets/dashboard/icon-dashboard8.png b/packages/components/src/assets/dashboard/icon-dashboard8.png
new file mode 100644
index 0000000..3cf8c3e
--- /dev/null
+++ b/packages/components/src/assets/dashboard/icon-dashboard8.png
Binary files differ
diff --git a/packages/components/src/components/Layout/Chunk.vue b/packages/components/src/components/Layout/Chunk.vue
new file mode 100644
index 0000000..7bdf437
--- /dev/null
+++ b/packages/components/src/components/Layout/Chunk.vue
@@ -0,0 +1,24 @@
+<template>
+ <div :class="['lp-chunk-wrapper', { hasPaddingBottom, borderRadiusSmall }]">
+ <div class="lp-chunk-title" v-if="title">{{ title }}</div>
+ <div class="lp-chunk-content">
+ <slot></slot>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+ name: 'Chunk',
+});
+
+type Props = {
+ title?: string;
+ hasPaddingBottom?: boolean;
+ borderRadiusSmall?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ hasPaddingBottom: true,
+});
+</script>
diff --git a/packages/components/src/styles/layout.scss b/packages/components/src/styles/layout.scss
index 00c0689..d2723e5 100644
--- a/packages/components/src/styles/layout.scss
+++ b/packages/components/src/styles/layout.scss
@@ -35,3 +35,37 @@
}
}
}
+
+.lp-chunk-wrapper {
+ padding: 0 26px;
+ border-radius: 32px;
+ background: #ffffff;
+ margin-bottom: 32px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ &.hasPaddingBottom {
+ padding-bottom: 48px;
+ }
+
+ &.borderRadiusSmall {
+ border-radius: 20px;
+ }
+
+ .lp-chunk-title {
+ height: 88px;
+ background: #ffffff;
+ font-weight: 500;
+ font-size: 34px;
+ color: boleGetCssVar('text-color', 'primary');
+ line-height: 88px;
+ }
+
+ .lp-chunk-content {
+ .nut-cell.bole-form-item {
+ padding: 0;
+ }
+ }
+}
diff --git a/packages/components/src/styles/mine.scss b/packages/components/src/styles/mine.scss
index ebf77eb..0ce2502 100644
--- a/packages/components/src/styles/mine.scss
+++ b/packages/components/src/styles/mine.scss
@@ -7,7 +7,6 @@
}
.dashboard-view {
- padding-top: 40px;
.pro-statistics-wrapper {
text-align: center;
// display: flex;
@@ -23,4 +22,71 @@
font-size: 28px;
}
}
+
+ .dashboard-large-cell {
+ display: flex;
+ align-items: center;
+ padding: 16px 0;
+ background: linear-gradient(90deg, #fff0ea 0%, #faf9f4 52%, #f1fffd 100%);
+ border-radius: 12px;
+ justify-content: space-between;
+ gap: 34px;
+
+ .dashboard-item-wrapper {
+ background: transparent;
+ flex: 1;
+ min-width: 0;
+ }
+ }
+
+ .dashboard-large-cell1 {
+ margin-bottom: 32px;
+ }
+
+ .dashboard-item-grad {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 32px;
+ }
+}
+
+.dashboard-item-wrapper {
+ background: linear-gradient(90deg, #edf6ff 0%, #f6f6fe 55%, #f9fdfe 100%);
+ border-radius: 12px;
+ padding: 24px;
+
+ .dashboard-item-title-wrapper {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+
+ .dashboard-item-title-icon {
+ width: 48px;
+ height: 48px;
+ margin-right: 16px;
+ }
+
+ .dashboard-item-title {
+ font-size: 26px;
+ color: boleGetCssVar('text-color', 'regular');
+ }
+ }
+
+ .dashboard-item-value-wrapper {
+ display: flex;
+ align-items: flex-end;
+ font-weight: bold;
+ font-size: 34px;
+ color: #161b2e;
+
+ .dashboard-item-symbol {
+ font-size: 26px;
+ }
+
+ .dashboard-item-value {
+ flex: 1;
+ min-width: 0;
+ @include ellipsis;
+ }
+ }
}
diff --git a/packages/components/src/styles/rechargeGrid.scss b/packages/components/src/styles/rechargeGrid.scss
index 62edae5..e06c9b3 100644
--- a/packages/components/src/styles/rechargeGrid.scss
+++ b/packages/components/src/styles/rechargeGrid.scss
@@ -153,6 +153,13 @@
}
.order-bill-recharge {
+ .nut-cell-group__wrap {
+ background-color: transparent;
+
+ .nut-cell {
+ background-color: transparent;
+ }
+ }
.recharge-button {
width: 100%;
margin: 40px 0;
diff --git a/packages/components/src/views/Mine/Dashboard.vue b/packages/components/src/views/Mine/Dashboard.vue
index 06d6b0a..2dbf5c5 100644
--- a/packages/components/src/views/Mine/Dashboard.vue
+++ b/packages/components/src/views/Mine/Dashboard.vue
@@ -1,5 +1,5 @@
<template>
- <NutGrid :gutter="10" :column-num="3" square class="dashboard-view">
+ <!-- <NutGrid :gutter="10" :column-num="3" square class="dashboard-view">
<NutGridItem>
<div class="pro-statistics-wrapper">
<div class="pro-statistics-title">绱鏀舵</div>
@@ -54,15 +54,80 @@
<div class="pro-statistics-content">{{ topStatistics?.yesterdayActiveUsers ?? 0 }}</div>
</div>
</NutGridItem>
- </NutGrid>
+ </NutGrid> -->
+ <div class="dashboard-view">
+ <Chunk title="鏍稿績鏁版嵁">
+ <DashboardLargeCell class="dashboard-large-cell1">
+ <DashboardItem
+ title="绱鏀舵"
+ :icon="IconDashboard1"
+ :value="toThousand(topStatistics?.accumulatedReceipts ?? 0)"
+ need-symbol
+ />
+ <DashboardItem
+ title="鏄ㄦ棩鏀舵"
+ :icon="IconDashboard2"
+ :value="toThousand(topStatistics?.receiptsYesterday ?? 0)"
+ need-symbol
+ />
+ </DashboardLargeCell>
+ <div class="dashboard-item-grad">
+ <DashboardItem
+ title="绱涓嬪崟"
+ :icon="IconDashboard3"
+ :value="toThousand(topStatistics?.accumulatedOrders ?? 0)"
+ />
+ <DashboardItem
+ title="鏄ㄦ棩涓嬪崟"
+ :icon="IconDashboard4"
+ :value="toThousand(topStatistics?.ordersNumYesterday ?? 0)"
+ />
+ <DashboardItem
+ title="绱鏀剁泭"
+ :icon="IconDashboard5"
+ :value="toThousand(topStatistics?.accumulatedIncome ?? 0)"
+ need-symbol
+ />
+ <DashboardItem
+ title="鏄ㄦ棩鎴愬姛"
+ :icon="IconDashboard6"
+ :value="toThousand(topStatistics?.yesterdaySuccess ?? 0)"
+ />
+ </div>
+ </Chunk>
+ <Chunk title="鐢ㄦ埛缁熻">
+ <DashboardLargeCell>
+ <DashboardItem
+ title="绱鐢ㄦ埛"
+ :icon="IconDashboard7"
+ :value="toThousand(topStatistics?.accumulatedUsers ?? 0)"
+ />
+ <DashboardItem
+ title="鏄ㄦ棩娲昏穬"
+ :icon="IconDashboard8"
+ :value="toThousand(topStatistics?.yesterdayActiveUsers ?? 0)"
+ />
+ </DashboardLargeCell>
+ </Chunk>
+ </div>
</template>
<script setup lang="ts">
-import { Grid as NutGrid, GridItem as NutGridItem } from '@nutui/nutui-taro';
import { toThousand } from '../../utils';
import { useQuery } from '@tanstack/vue-query';
import { useLifeRechargeContext, TopStatisticsOutput } from '@life-payment/core-vue';
import { computed } from 'vue';
+import Chunk from '../../components/Layout/Chunk.vue';
+import DashboardLargeCell from './components/DashboardLargeCell.vue';
+import DashboardItem from './components/DashboardItem.vue';
+import IconDashboard1 from '../../assets/dashboard/icon-dashboard1.png';
+import IconDashboard2 from '../../assets/dashboard/icon-dashboard2.png';
+import IconDashboard3 from '../../assets/dashboard/icon-dashboard3.png';
+import IconDashboard4 from '../../assets/dashboard/icon-dashboard4.png';
+import IconDashboard5 from '../../assets/dashboard/icon-dashboard5.png';
+import IconDashboard6 from '../../assets/dashboard/icon-dashboard6.png';
+import IconDashboard7 from '../../assets/dashboard/icon-dashboard7.png';
+import IconDashboard8 from '../../assets/dashboard/icon-dashboard8.png';
defineOptions({
name: 'Dashboard',
diff --git a/packages/components/src/views/Mine/components/DashboardItem.vue b/packages/components/src/views/Mine/components/DashboardItem.vue
new file mode 100644
index 0000000..9453a7a
--- /dev/null
+++ b/packages/components/src/views/Mine/components/DashboardItem.vue
@@ -0,0 +1,48 @@
+<template>
+ <div class="dashboard-item-wrapper">
+ <div class="dashboard-item-title-wrapper">
+ <img class="dashboard-item-title-icon" :src="icon" />
+ <div class="dashboard-item-title">{{ title }}</div>
+ </div>
+ <div class="dashboard-item-value-wrapper">
+ <div class="dashboard-item-symbol" v-if="needSymbol" v-html="showSymbol"></div>
+ <div class="dashboard-item-value">{{ value }}</div>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+defineOptions({
+ name: 'DashboardItem',
+});
+
+type Props = {
+ icon?: string;
+ title?: string;
+ value?: string | number;
+ needSymbol?: boolean;
+ symbol?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ needSymbol: false,
+ symbol: '¥',
+});
+
+const replaceSpecialChar = (url: string) => {
+ url = url.replace(/"/g, '"');
+ url = url.replace(/&/g, '&');
+ url = url.replace(/</g, '<');
+ url = url.replace(/>/g, '>');
+ url = url.replace(/ /g, ' ');
+ url = url.replace(/¥/g, '锟�');
+ return url;
+};
+
+const showSymbol = computed(() => {
+ const symbol = props.needSymbol ? replaceSpecialChar(props.symbol) : '';
+ return symbol;
+});
+</script>
diff --git a/packages/components/src/views/Mine/components/DashboardLargeCell.vue b/packages/components/src/views/Mine/components/DashboardLargeCell.vue
new file mode 100644
index 0000000..30b66f6
--- /dev/null
+++ b/packages/components/src/views/Mine/components/DashboardLargeCell.vue
@@ -0,0 +1,15 @@
+<template>
+ <div class="dashboard-large-cell">
+ <slot></slot>
+ </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+ name: 'DashboardLargeCell',
+});
+
+// type Props = {};
+
+// const props = withDefaults(defineProps<Props>(), {});
+</script>
diff --git a/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue b/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
index 196f20f..e598d3c 100644
--- a/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
+++ b/packages/components/src/views/PhoneBillRecharge/PhoneBillRecharge.vue
@@ -28,6 +28,15 @@
const stepperInfo = useStepper(['step1', 'step2'], 'step2');
const current = computed(() => stepperInfo.current.value);
+const outCurrent = defineModel<'step1' | 'step2'>({
+ set(value) {
+ stepperInfo.goTo(value);
+ },
+ get() {
+ return stepperInfo.current.value;
+ },
+});
+
const emit = defineEmits<{
(e: 'goPay', orderNo: string): void;
(e: 'paySuccess', orderNo: string): void;
diff --git a/packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeStep2.vue b/packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeStep2.vue
index 099fdef..1319215 100644
--- a/packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeStep2.vue
+++ b/packages/components/src/views/PhoneBillRecharge/PhoneBillRechargeStep2.vue
@@ -6,34 +6,36 @@
label-position="top"
class="order-bill-recharge phone"
>
- <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.content }}</NutRadio
+ <Chunk borderRadiusSmall>
+ <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"
>
- </NutRadioGroup>
- <AccountCard
- v-if="userAccountAllList.length > 0"
- title="鍏呭�兼墜鏈哄彿"
- :content="form.phone"
- :remark="form.remark"
- >
- <template #action>
- <div class="account-card-action" @click="handleAddUserAccount">鏂板</div>
- </template>
- </AccountCard>
- <AccountAddCard v-else @click="handleAddUserAccount" />
- </NutFormItem>
+ <NutRadio
+ :label="item.id"
+ shape="button"
+ v-for="item in userAccountAllList"
+ :key="item.id"
+ >{{ item.content }}</NutRadio
+ >
+ </NutRadioGroup>
+ <AccountCard
+ v-if="userAccountAllList.length > 0"
+ title="鍏呭�兼墜鏈哄彿"
+ :content="form.phone"
+ :remark="form.remark"
+ >
+ <template #action>
+ <div class="account-card-action" @click="handleAddUserAccount">鏂板</div>
+ </template>
+ </AccountCard>
+ <AccountAddCard 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">
@@ -115,6 +117,7 @@
import SelectPayTypeFormItem from '../../components/SelectPayTypeFormItem/SelectPayTypeFormItem.vue';
import { useSelectPayType, useGetPayStatusByOrderNo } from '../../hooks/selectPayType';
import { RechargeProps } from './types';
+import Chunk from '../../components/Layout/Chunk.vue';
defineOptions({
name: 'PhoneBillRechargeStep2',
diff --git a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue b/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue
index bc5630f..402cb1a 100644
--- a/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue
+++ b/packages/components/src/views/electricBillRecharge/ElectricBillRechargeStep1.vue
@@ -56,6 +56,7 @@
city: '',
sixID: '',
remark: '',
+ name: '',
});
const { goToNext } = useElectricBillRechargeContext();
--
Gitblit v1.9.1