From 14368e8a09c4b5793d0975f85e36a4c1d410ca36 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期五, 16 五月 2025 17:27:24 +0800
Subject: [PATCH] feat: UI
---
apps/taro/src/components/List/ListItemV2.vue | 63 ++++++++++
packages/components/src/components/Card/OrderCard.vue | 63 ++++++---
apps/taro/src/assets/mine/icon-mine-promotion.png | 0
apps/taro/src/pages/mine/index.vue | 51 +++++++
apps/taro/src/assets/mine/icon-mine-userId.png | 0
apps/taro/src/pages/mine/index.scss | 29 ++--
packages/components/src/constants/img.ts | 10 +
apps/taro/src/assets/mine/icon-mine-order.png | 0
apps/taro/src/components/index.ts | 1
apps/taro/src/assets/mine/icon-mine-customer-service.png | 0
packages/components/src/styles/orderCard.scss | 80 +++++++++----
packages/components/src/styles/index.scss | 2
apps/taro/src/constants/img.ts | 3
apps/taro/src/assets/mine/icon-mine-data-board.png | 0
14 files changed, 235 insertions(+), 67 deletions(-)
diff --git a/apps/taro/src/assets/mine/icon-mine-customer-service.png b/apps/taro/src/assets/mine/icon-mine-customer-service.png
new file mode 100644
index 0000000..ddcbeb4
--- /dev/null
+++ b/apps/taro/src/assets/mine/icon-mine-customer-service.png
Binary files differ
diff --git a/apps/taro/src/assets/mine/icon-mine-data-board.png b/apps/taro/src/assets/mine/icon-mine-data-board.png
new file mode 100644
index 0000000..25e3831
--- /dev/null
+++ b/apps/taro/src/assets/mine/icon-mine-data-board.png
Binary files differ
diff --git a/apps/taro/src/assets/mine/icon-mine-order.png b/apps/taro/src/assets/mine/icon-mine-order.png
new file mode 100644
index 0000000..defd522
--- /dev/null
+++ b/apps/taro/src/assets/mine/icon-mine-order.png
Binary files differ
diff --git a/apps/taro/src/assets/mine/icon-mine-promotion.png b/apps/taro/src/assets/mine/icon-mine-promotion.png
new file mode 100644
index 0000000..5b733c5
--- /dev/null
+++ b/apps/taro/src/assets/mine/icon-mine-promotion.png
Binary files differ
diff --git a/apps/taro/src/assets/mine/icon-mine-userId.png b/apps/taro/src/assets/mine/icon-mine-userId.png
new file mode 100644
index 0000000..37fd1d0
--- /dev/null
+++ b/apps/taro/src/assets/mine/icon-mine-userId.png
Binary files differ
diff --git a/apps/taro/src/components/List/ListItemV2.vue b/apps/taro/src/components/List/ListItemV2.vue
new file mode 100644
index 0000000..e880e8f
--- /dev/null
+++ b/apps/taro/src/components/List/ListItemV2.vue
@@ -0,0 +1,63 @@
+<template>
+ <div class="pro-list-itemV2">
+ <div class="pro-list-itemV2-inner">
+ <img v-if="icon" :src="icon" class="pro-list-itemV2-icon" />
+ <div class="pro-list-itemV2-title">{{ title }}</div>
+ <slot name="extra"></slot>
+ <img v-if="showArrow" :src="IconArrow" class="pro-list-itemV2-arrow" />
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+import IconArrow from '@/assets/setting/icon-arrow.png';
+
+defineOptions({
+ name: 'ListItemV2',
+});
+
+type Props = {
+ icon?: string;
+ title?: string;
+ showArrow?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ showArrow: true,
+});
+</script>
+
+<style lang="scss">
+@import '@/styles/common.scss';
+
+.pro-list-itemV2 {
+ padding: 0 boleGetCssVar('size', 'body-padding-h');
+
+ .pro-list-itemV2-inner {
+ height: 112px;
+ display: flex;
+ align-items: center;
+
+ .pro-list-itemV2-icon {
+ width: 48px;
+ height: 48px;
+ margin-right: 16px;
+ }
+
+ .pro-list-itemV2-title {
+ font-weight: 400;
+ font-size: 32px;
+ color: boleGetCssVar('text-color', 'primary');
+ line-height: 44px;
+ flex: 1;
+ min-width: 0;
+ @include ellipsis;
+ }
+
+ .pro-list-itemV2-arrow {
+ width: 32px;
+ height: 32px;
+ }
+ }
+}
+</style>
diff --git a/apps/taro/src/components/index.ts b/apps/taro/src/components/index.ts
index ff8db0e..7675d75 100644
--- a/apps/taro/src/components/index.ts
+++ b/apps/taro/src/components/index.ts
@@ -2,6 +2,7 @@
export { default as TransparentNavigationBar } from './NavigationBar/TransparentNavigationBar.vue';
export { default as List } from './List/List.vue';
export { default as ListItem } from './List/ListItem.vue';
+export { default as ListItemV2 } from './List/ListItemV2.vue';
export { default as LargeTitleNavigationBar } from './NavigationBar/LargeTitleNavigationBar.vue';
export { default as PageLayout } from './Layout/PageLayout.vue';
export { default as PageLayoutWithBg } from './Layout/PageLayoutWithBg.vue';
diff --git a/apps/taro/src/constants/img.ts b/apps/taro/src/constants/img.ts
index 0694927..1a2db99 100644
--- a/apps/taro/src/constants/img.ts
+++ b/apps/taro/src/constants/img.ts
@@ -6,7 +6,8 @@
HomePageBg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
},
mine: {
- Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
+ // Bg: `${OssBasePath}/matchMakingMini/assets/mine/icon-bg.png`,
+ Bg: `${OssBasePath}/lifePayment/assets/common/icon-home-page-bg.png`,
IdBg: `${OssBasePath}/matchMakingMini/assets/mine/icon-id-bg.png`,
},
setting: {
diff --git a/apps/taro/src/pages/mine/index.scss b/apps/taro/src/pages/mine/index.scss
index fcd093e..63af7e4 100644
--- a/apps/taro/src/pages/mine/index.scss
+++ b/apps/taro/src/pages/mine/index.scss
@@ -4,26 +4,27 @@
// background-color: $body-background-color;
// }
-.mine-page-bg {
- position: fixed;
- z-index: -1;
- top: 0;
- left: 0;
- width: 750px;
- height: 434px;
- object-fit: cover;
+.index-page-wrapper {
+ .home-page-bg {
+ position: fixed;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
}
.mine-page-top-view {
display: flex;
- padding: 30px 20px;
- margin-top: 30px;
+ padding: 36px 36px 64px;
.mine-avatar {
- width: 120px;
- height: 120px;
+ width: 176px;
+ height: 176px;
object-fit: cover;
- margin-right: 30px;
+ margin-right: 36px;
}
.user-info {
@@ -44,5 +45,5 @@
}
.mine-list-wrapper {
- margin-top: 60px;
+ border-radius: 20px;
}
diff --git a/apps/taro/src/pages/mine/index.vue b/apps/taro/src/pages/mine/index.vue
index 403801c..d6a3c92 100644
--- a/apps/taro/src/pages/mine/index.vue
+++ b/apps/taro/src/pages/mine/index.vue
@@ -1,5 +1,5 @@
<template>
- <PageLayoutWithBg class="mine-page-wrapper" title="鎴戠殑" :need-auth="false">
+ <!-- <PageLayoutWithBg class="mine-page-wrapper" title="鎴戠殑" :need-auth="false">
<template #navigationBar>
<TransparentNavigationBar
title="涓汉涓績"
@@ -31,17 +31,60 @@
<ListItem v-if="isLogin" title="閫�鍑虹櫥褰�" @click="goLogout"></ListItem>
</List>
</ContentScrollView>
- </PageLayoutWithBg>
+ </PageLayoutWithBg> -->
+ <PageLayout class="index-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" />
+ </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>
+ <ContentView>
+ <List class="mine-list-wrapper">
+ <ListItemV2 :icon="IconMineOrder" title="璁㈠崟绠＄悊" @click="goOrderManage"></ListItemV2>
+ <ListItemV2 :icon="IconMineUserId" title="鎴峰彿绠＄悊" @click="goUserAccountList"></ListItemV2>
+ <template v-if="isChannelAccount">
+ <ListItemV2 :icon="IconMineDataBoard" title="鏁版嵁鐪嬫澘" @click="goDashboard"></ListItemV2>
+ <ListItemV2
+ :icon="IconMinePromotion"
+ title="鎺ㄥ箍浜岀淮鐮�"
+ @click="goShareQrcode"
+ ></ListItemV2>
+ </template>
+ <ListItemV2
+ :icon="IconMineCustomerService"
+ v-if="isWeb && !isInAlipay"
+ title="鍦ㄧ嚎瀹㈡湇"
+ @click="handleChat"
+ ></ListItemV2>
+ <ListItemV2 v-if="isLogin" title="閫�鍑虹櫥褰�" @click="goLogout"></ListItemV2>
+ </List>
+ </ContentView>
+ </PageLayout>
</template>
<script setup lang="ts">
-import { TransparentNavigationBar, List, ListItem } from '@/components';
+import { TransparentNavigationBar, List, ListItemV2 } from '@/components';
import { useUser, useIsLogin, useGoLogin, useAccessLogin, useOnlineService } from '@/hooks';
import Taro from '@tarojs/taro';
import { RouterPath, OssAssets } from '@/constants';
import DefaultAvatar from '@/assets/components/icon-default-avatar.png';
+import IconMineOrder from '@/assets/mine/icon-mine-order.png';
+import IconMineUserId from '@/assets/mine/icon-mine-userId.png';
+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 { useSystemStore } from '@/stores/modules/system';
-import PageLayoutWithBg from '@/components/Layout/PageLayoutWithBg.vue';
import { useUserStore } from '@/stores/modules/user';
import { Message } from '@/utils';
import { isWeb, isInAlipay } from '@/utils/env';
diff --git a/packages/components/src/components/Card/OrderCard.vue b/packages/components/src/components/Card/OrderCard.vue
index d261033..d8f2a47 100644
--- a/packages/components/src/components/Card/OrderCard.vue
+++ b/packages/components/src/components/Card/OrderCard.vue
@@ -1,42 +1,44 @@
<template>
<div class="order-card">
<div class="order-card-title">
- <div class="order-card-title-top">
+ <div class="order-card-title-left">
<div class="order-card-title-text">{{ title }}</div>
- <div class="order-card-title-status">
- {{ LifeRechargeConstants.LifePayOrderStatusEnumText[status] }}
- </div>
- </div>
- <div class="order-card-title-ordernum-wrapper">
<div class="order-card-title-ordernum">
{{ `璁㈠崟缂栧彿锛�${orderNo}` }}
</div>
- <slot name="actions">
- <div
- class="order-card-action"
- v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.鍏呭�间腑"
- @click="emit('goApplyRefund', id)"
- >
- 鐢宠閫�娆�
- </div>
- <div
- class="order-card-action"
- v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.閫�娆惧け璐�"
- @click="emit('goRefundDetail', orderNo)"
- >
- 璇︽儏
- </div>
- </slot>
+ </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
+ v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.鍏呭�间腑"
+ class="order-card-action"
+ @click="emit('goApplyRefund', id)"
+ >
+ 鐢宠閫�娆�
+ </div>
+ <div
+ class="order-card-action"
+ v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.閫�娆惧け璐�"
+ @click="emit('goRefundDetail', orderNo)"
+ >
+ 璇︽儏
+ </div>
+ </div>
+ </slot>
</div>
</template>
<script setup lang="ts">
import { LifeRechargeConstants } from '@life-payment/core-vue';
+import { OssAssets } from '../../constants';
+import { computed } from 'vue';
defineOptions({
name: 'OrderCard',
@@ -55,4 +57,21 @@
(e: 'goApplyRefund', id: string): void;
(e: 'goRefundDetail', orderNo: string): void;
}>();
+
+const LifePayOrderStatusEnumImg = {
+ [LifeRechargeConstants.LifePayOrderStatusEnum.鍏呭�间腑]: OssAssets.card.Recharge,
+ [LifeRechargeConstants.LifePayOrderStatusEnum.宸插け璐: OssAssets.card.Failed,
+ [LifeRechargeConstants.LifePayOrderStatusEnum.宸插畬鎴怾: OssAssets.card.Success,
+ [LifeRechargeConstants.LifePayOrderStatusEnum.寰呴��娆綸: OssAssets.card.WaitRefund,
+ [LifeRechargeConstants.LifePayOrderStatusEnum.宸查��娆綸: OssAssets.card.Refunded,
+ [LifeRechargeConstants.LifePayOrderStatusEnum.閫�娆惧け璐: OssAssets.card.RefundFail,
+ [LifeRechargeConstants.LifePayOrderStatusEnum.閫�娆句腑]: OssAssets.card.Refund,
+};
+
+const shoeFooter = computed(() => {
+ return (
+ props.status === LifeRechargeConstants.LifePayOrderStatusEnum.鍏呭�间腑 ||
+ props.status === LifeRechargeConstants.LifePayOrderStatusEnum.閫�娆惧け璐�
+ );
+});
</script>
diff --git a/packages/components/src/constants/img.ts b/packages/components/src/constants/img.ts
index cb5fab6..26f4d94 100644
--- a/packages/components/src/constants/img.ts
+++ b/packages/components/src/constants/img.ts
@@ -6,4 +6,14 @@
FreeDian: `${OssBasePath}/lifePayment/assets/home/icon-free-dian.png`,
FreeGas: `${OssBasePath}/lifePayment/assets/home/icon-free-gas.png`,
},
+
+ card: {
+ Failed: `${OssBasePath}/lifePayment/assets/card/card-status-failed.png`,
+ Recharge: `${OssBasePath}/lifePayment/assets/card/card-status-recharge.png`,
+ RefundFail: `${OssBasePath}/lifePayment/assets/card/card-status-refund-fail.png`,
+ Refund: `${OssBasePath}/lifePayment/assets/card/card-status-refund.png`,
+ Refunded: `${OssBasePath}/lifePayment/assets/card/card-status-refunded.png`,
+ Success: `${OssBasePath}/lifePayment/assets/card/card-status-success.png`,
+ WaitRefund: `${OssBasePath}/lifePayment/assets/card/card-status-wait-refund.png`,
+ },
};
diff --git a/packages/components/src/styles/index.scss b/packages/components/src/styles/index.scss
index bb0c7c7..7ccae1d 100644
--- a/packages/components/src/styles/index.scss
+++ b/packages/components/src/styles/index.scss
@@ -52,5 +52,5 @@
.life-page-infinite-scroll-list {
@include lifeListScrollView;
- padding-top: 16px;
+ padding-top: 32px;
}
diff --git a/packages/components/src/styles/orderCard.scss b/packages/components/src/styles/orderCard.scss
index 8578715..9619746 100644
--- a/packages/components/src/styles/orderCard.scss
+++ b/packages/components/src/styles/orderCard.scss
@@ -1,10 +1,9 @@
@use './common.scss' as *;
.order-card {
- border: 1px solid #e8e8e8;
- border-radius: 12px;
- padding: 20px;
- margin-bottom: 20px;
+ border-radius: 24px;
+ padding: 40px 28px;
+ margin-bottom: 32px;
background-color: #fff;
&:last-child {
@@ -13,46 +12,73 @@
.order-card-title {
display: flex;
- flex-direction: column;
- border-bottom: 1px solid #e8e8e8;
- padding-bottom: 20px;
- margin-bottom: 20px;
+ border-bottom: 1px solid #f3f3f3;
+ padding-bottom: 32px;
+ margin-bottom: 32px;
- .order-card-title-top {
+ .order-card-title-left {
display: flex;
+ flex-direction: column;
justify-content: space-between;
color: #333333;
- font-size: 28px;
- line-height: 40px;
- font-weight: 600;
- margin-bottom: 12px;
+ flex: 1;
+ min-width: 0;
+ margin-right: 56px;
+
+ .order-card-title-text {
+ font-size: 30px;
+ line-height: 42px;
+ font-weight: 400;
+ }
}
.order-card-title-ordernum {
- font-size: 24px;
- color: #999999;
- flex: 1;
- min-width: 0;
+ font-size: 28px;
+ line-height: 40px;
+ color: #575b6c;
@include ellipsis;
}
- .order-card-title-ordernum-wrapper {
- display: flex;
- align-items: center;
+ .order-card-title-status {
+ width: 116px;
+ height: 116px;
- .order-card-action {
- font-size: 24px;
- color: boleGetCssVar('color', 'primary');
+ img {
+ width: 100%;
+ height: 100%;
}
}
+ }
+
+ .order-card-content {
+ padding-bottom: 26px;
+ }
+
+ .order-card-footer {
+ display: flex;
+ justify-content: flex-end;
+ padding-top: 32px;
+ border-top: solid 1px #f7f7f7;
+ }
+
+ .order-card-action {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 6px 24px;
+ color: boleGetCssVar('color', 'primary');
+ font-size: 26px;
+ line-height: 36px;
+ border: 1px solid boleGetCssVar('color', 'primary');
+ border-radius: 8px;
}
}
.order-card-item {
display: flex;
font-size: 28px;
- line-height: 40px;
- margin-bottom: 15px;
+ line-height: 48px;
+ margin-bottom: 8px;
.order-card-item-label {
color: #333333;
@@ -69,4 +95,8 @@
color: boleGetCssVar('color', 'danger');
}
}
+
+ &:last-child {
+ margin-bottom: 0;
+ }
}
--
Gitblit v1.9.1