From a0d334f6a2dd329af28bc393e9e0c9a3625fc6ff Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 21 五月 2025 13:25:42 +0800
Subject: [PATCH] Merge branch 'dev-ui' of http://120.26.58.240:8888/r/LifePaymentFront into dev-ui
---
packages/components/src/components/Card/OrderCardItem.vue | 9 +
packages/components/src/components/Card/OrderCard.vue | 9 ++
packages/components/src/assets/account/icon-account-delete.png | 0
packages/components/src/styles/orderCard.scss | 12 +++
packages/components/src/views/Order/components/GasOrder.vue | 2
packages/components/src/views/Order/components/PhoneOrder.vue | 2
packages/components/src/components/Card/UserAccountCard.vue | 28 +++++++
packages/components/src/constants/img.ts | 6 +
packages/components/src/components/Result/Result.vue | 29 +++++++
packages/components/src/assets/account/icon-account-edit.png | 0
packages/components/src/styles/card.scss | 69 +++++++++++++++++
packages/components/src/views/userAccount/UserAccountListView.vue | 40 +++++++--
12 files changed, 192 insertions(+), 14 deletions(-)
diff --git a/packages/components/src/assets/account/icon-account-delete.png b/packages/components/src/assets/account/icon-account-delete.png
new file mode 100644
index 0000000..90bfbb1
--- /dev/null
+++ b/packages/components/src/assets/account/icon-account-delete.png
Binary files differ
diff --git a/packages/components/src/assets/account/icon-account-edit.png b/packages/components/src/assets/account/icon-account-edit.png
new file mode 100644
index 0000000..53e21ca
--- /dev/null
+++ b/packages/components/src/assets/account/icon-account-edit.png
Binary files differ
diff --git a/packages/components/src/components/Card/OrderCard.vue b/packages/components/src/components/Card/OrderCard.vue
index d51367a..6b052b2 100644
--- a/packages/components/src/components/Card/OrderCard.vue
+++ b/packages/components/src/components/Card/OrderCard.vue
@@ -18,6 +18,7 @@
</div>
<slot name="actions">
<div class="order-card-footer" v-if="showFooter">
+ <!-- <div class="order-card-footer" v-if="showFooter">
<div
v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.鍏呭�间腑"
class="order-card-action"
@@ -31,7 +32,15 @@
@click="emit('goRefundDetail', orderNo)"
>
璇︽儏
+ </div> -->
+ <div
+ v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.鍏呭�间腑"
+ class="order-card-action"
+ @click="emit('goApplyRefund', id)"
+ >
+ 鐢宠閫�娆�
</div>
+ <div class="order-card-action" @click="emit('goRefundDetail', orderNo)">璇︽儏</div>
</div>
</slot>
</div>
diff --git a/packages/components/src/components/Card/OrderCardItem.vue b/packages/components/src/components/Card/OrderCardItem.vue
index 3979a54..4f867b7 100644
--- a/packages/components/src/components/Card/OrderCardItem.vue
+++ b/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>
diff --git a/packages/components/src/components/Card/UserAccountCard.vue b/packages/components/src/components/Card/UserAccountCard.vue
new file mode 100644
index 0000000..0b76251
--- /dev/null
+++ b/packages/components/src/components/Card/UserAccountCard.vue
@@ -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>
diff --git a/packages/components/src/components/Result/Result.vue b/packages/components/src/components/Result/Result.vue
new file mode 100644
index 0000000..479d443
--- /dev/null
+++ b/packages/components/src/components/Result/Result.vue
@@ -0,0 +1,29 @@
+<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-remark">
+ {{ refundCheckRemark }},濡傛湁鐤戦棶璇疯仈绯诲鏈� {{ servicePhone }}锛堝懆涓�鍒板懆浜� 9:00-17:30锛�
+ </div>
+ <div class="recharge-result-view-btn-wrapper">
+ <slot name="actions">
+ <div class="recharge-result-view-btn" @click="emit('goBackHome')">鍥為椤�</div>
+ </slot>
+ </div>
+ </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+ name: 'Result',
+});
+
+type Props = {
+ title?: string;
+ orderNo?: string;
+ refundCheckRemark?: string;
+ servicePhone?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {});
+</script>
diff --git a/packages/components/src/constants/img.ts b/packages/components/src/constants/img.ts
index 26f4d94..c2f953f 100644
--- a/packages/components/src/constants/img.ts
+++ b/packages/components/src/constants/img.ts
@@ -16,4 +16,10 @@
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`,
+ },
};
diff --git a/packages/components/src/styles/card.scss b/packages/components/src/styles/card.scss
index 016c08a..d56188b 100644
--- a/packages/components/src/styles/card.scss
+++ b/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', 'primary');
+ @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: boleGetCssVar('text-color', 'regular');
+ }
+ }
+
+ .user-account-card-action + .user-account-card-action {
+ margin-left: 64px;
+ }
+ }
+}
diff --git a/packages/components/src/styles/orderCard.scss b/packages/components/src/styles/orderCard.scss
index b552f48..fe3d890 100644
--- a/packages/components/src/styles/orderCard.scss
+++ b/packages/components/src/styles/orderCard.scss
@@ -35,6 +35,18 @@
font-weight: 400;
flex: 1;
min-width: 0;
+ display: flex;
+ align-items: center;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 8px;
+ height: 24px;
+ background-color: #fa4640;
+ border-radius: 24px;
+ margin-right: 12px;
+ }
}
}
diff --git a/packages/components/src/views/Order/components/GasOrder.vue b/packages/components/src/views/Order/components/GasOrder.vue
index 270f6a5..ebd341b 100644
--- a/packages/components/src/views/Order/components/GasOrder.vue
+++ b/packages/components/src/views/Order/components/GasOrder.vue
@@ -52,7 +52,7 @@
item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.閫�娆惧け璐�
"
label="閫�娆惧彂璧锋椂闂�:"
- labelWidth="110px"
+ :labelWidth="200"
:value="
item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss')
"
diff --git a/packages/components/src/views/Order/components/PhoneOrder.vue b/packages/components/src/views/Order/components/PhoneOrder.vue
index c1e1f71..caefe34 100644
--- a/packages/components/src/views/Order/components/PhoneOrder.vue
+++ b/packages/components/src/views/Order/components/PhoneOrder.vue
@@ -52,7 +52,7 @@
item.frontStatus === BlLifeRecharge.constants.LifePayOrderFrontStatusEnum.閫�娆惧け璐�
"
label="閫�娆惧彂璧锋椂闂�:"
- labelWidth="110px"
+ :labelWidth="200"
:value="
item?.refundApplyTime && dayjs(item?.refundApplyTime).format('YYYY-MM-DD HH:mm:ss')
"
diff --git a/packages/components/src/views/userAccount/UserAccountListView.vue b/packages/components/src/views/userAccount/UserAccountListView.vue
index 2c33b1b..c8fcb43 100644
--- a/packages/components/src/views/userAccount/UserAccountListView.vue
+++ b/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(
--
Gitblit v1.9.1