From e662aa7d894a0b259dc1816e79514c1f0d38da9f Mon Sep 17 00:00:00 2001
From: zhengyiming <540361168@qq.com>
Date: 星期三, 21 五月 2025 16:14:05 +0800
Subject: [PATCH] Merge branch 'dev-ui' of http://120.26.58.240:8888/r/LifePaymentFront into dev-ui
---
packages/components/src/components/Card/OrderCard.vue | 9 --
packages/components/src/styles/orderCard.scss | 5 -
packages/components/src/styles/components.scss | 106 ++++++++++++++++++++++++++
apps/taro/src/subpackages/order/orderRefundResult/InnerPage.vue | 6 -
apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue | 4
packages/components/src/constants/img.ts | 5 +
packages/components/src/components/Result/Result.vue | 37 +++++++--
packages/components/src/views/Order/OrderRefundResultView.vue | 25 +++++
apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue | 8 -
packages/components/src/views/RechargeResultView/RechargeResultView.vue | 34 +++++++-
10 files changed, 199 insertions(+), 40 deletions(-)
diff --git a/apps/taro/src/subpackages/order/orderRefundResult/InnerPage.vue b/apps/taro/src/subpackages/order/orderRefundResult/InnerPage.vue
index 94c5308..1be6a1c 100644
--- a/apps/taro/src/subpackages/order/orderRefundResult/InnerPage.vue
+++ b/apps/taro/src/subpackages/order/orderRefundResult/InnerPage.vue
@@ -1,10 +1,6 @@
<template>
<ContentScrollView>
- <OrderRefundResultView
- style="margin-top: 40px"
- @go-back-home="goHome()"
- :orderNo="orderNo"
- ></OrderRefundResultView>
+ <OrderRefundResultView @go-back-home="goHome()" :orderNo="orderNo"></OrderRefundResultView>
</ContentScrollView>
</template>
diff --git a/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue b/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue
index b073adc..fa65220 100644
--- a/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue
+++ b/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue
@@ -2,9 +2,9 @@
<PageLayout title="鍏呭�兼垚鍔�" class="rechargeElectricResult-page-wrapper" hasBorder>
<ContentScrollView>
<RechargeResultView
- style="margin-top: 40px"
@go-back-home="goHome()"
- title="鏀粯鎴愬姛锛屽厖鍊兼灏嗗湪0-72灏忔椂鍐呭埌璐�"
+ title="鏀粯鎴愬姛"
+ refund-check-remark="鍏呭�兼灏嗗湪0-72灏忔椂鍐呭埌璐�"
/>
</ContentScrollView>
</PageLayout>
diff --git a/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue b/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue
index 487fd5d..8cefd70 100644
--- a/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue
+++ b/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue
@@ -2,13 +2,11 @@
<PageLayout title="鍏呭�兼垚鍔�" class="rechargeGasResult-page-wrapper" hasBorder>
<ContentScrollView>
<RechargeResultView
- style="margin-top: 40px"
@go-back-home="goHome()"
- title="鏀粯鎴愬姛锛屽厖鍊兼灏嗗湪0-72灏忔椂鍐呭埌璐�"
+ title="鏀粯鎴愬姛"
+ refund-check-remark="鍏呭�兼灏嗗湪0-72灏忔椂鍐呭埌璐�"
+ danger-tips="鍚屼竴鐕冩皵璐硅处鎴峰湪鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�"
>
- <template #tips>
- 鍚屼竴鐕冩皵璐硅处鎴峰湪鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�
- </template>
</RechargeResultView>
</ContentScrollView>
</PageLayout>
diff --git a/packages/components/src/components/Card/OrderCard.vue b/packages/components/src/components/Card/OrderCard.vue
index 6b052b2..d51367a 100644
--- a/packages/components/src/components/Card/OrderCard.vue
+++ b/packages/components/src/components/Card/OrderCard.vue
@@ -18,7 +18,6 @@
</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"
@@ -32,15 +31,7 @@
@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/Result/Result.vue b/packages/components/src/components/Result/Result.vue
index 479d443..d40bd86 100644
--- a/packages/components/src/components/Result/Result.vue
+++ b/packages/components/src/components/Result/Result.vue
@@ -1,14 +1,31 @@
<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 class="result-wrapper" v-bind="$attrs">
+ <div class="result-content">
+ <img class="result-content-icon" :src="icon" />
+ <div class="result-content-title">{{ title }}</div>
+ <div class="result-content-remark">
+ <slot name="remark">
+ <div class="result-content-remark-item">{{ refundCheckRemark }}</div>
+ <div class="result-content-remark-item" v-if="servicePhone">
+ 濡傛湁鐤戦棶 璇疯仈绯诲鏈� {{ servicePhone }}锛堝懆涓�鍒板懆浜� 9:00-17:30锛�
+ </div>
+ </slot>
+ </div>
</div>
- <div class="recharge-result-view-btn-wrapper">
- <slot name="actions">
- <div class="recharge-result-view-btn" @click="emit('goBackHome')">鍥為椤�</div>
+ <div class="result-order-number">
+ <div class="result-order-number-label">璁㈠崟缂栧彿锛�</div>
+ <div class="result-order-number-value">{{ orderNo }}</div>
+ </div>
+ <div class="result-wrapper-tips">
+ <slot name="tips">
+ <div class="result-wrapper-tips-item title">鍏呭�奸』鐭�</div>
+ <div class="result-wrapper-tips-item danger">{{ dangerTips }}</div>
+ <div class="result-wrapper-tips-item warning">{{ warningTips }}</div>
+ <div class="result-wrapper-tips-item">{{ customerServiceTips }}</div>
</slot>
+ </div>
+ <div class="result-wrapper-actions">
+ <slot name="actions"> </slot>
</div>
</div>
</template>
@@ -20,9 +37,13 @@
type Props = {
title?: string;
+ icon?: string;
orderNo?: string;
refundCheckRemark?: string;
servicePhone?: string;
+ dangerTips?: string;
+ warningTips?: string;
+ customerServiceTips?: string;
};
const props = withDefaults(defineProps<Props>(), {});
diff --git a/packages/components/src/constants/img.ts b/packages/components/src/constants/img.ts
index c2f953f..d03668b 100644
--- a/packages/components/src/constants/img.ts
+++ b/packages/components/src/constants/img.ts
@@ -22,4 +22,9 @@
Gas: `${OssBasePath}/lifePayment/assets/card/account-card-gas.png`,
Phone: `${OssBasePath}/lifePayment/assets/card/account-card-phone.png`,
},
+
+ result: {
+ Success: `${OssBasePath}/lifePayment/assets/common/icon-result-success.png`,
+ Fail: `${OssBasePath}/lifePayment/assets/common/icon-result-fail.png`,
+ },
};
diff --git a/packages/components/src/styles/components.scss b/packages/components/src/styles/components.scss
index cb15a85..80ae8a9 100644
--- a/packages/components/src/styles/components.scss
+++ b/packages/components/src/styles/components.scss
@@ -377,3 +377,109 @@
}
}
}
+
+.result-wrapper {
+ margin-top: 32px;
+
+ .result-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 64px 0;
+ background-color: #ffffff;
+ border-radius: 20px;
+ margin-bottom: 32px;
+
+ .result-content-icon {
+ width: 128px;
+ height: 128px;
+ margin-bottom: 50px;
+ }
+
+ .result-content-title {
+ font-size: 36px;
+ color: boleGetCssVar('text-color', 'primary');
+ font-weight: 600;
+ margin-bottom: 10px;
+ line-height: 52px;
+ }
+
+ .result-content-remark {
+ font-size: 24px;
+ line-height: 38px;
+ color: boleGetCssVar('text-color', 'regular');
+ font-weight: 400;
+ text-align: center;
+ padding: 0 100px;
+ }
+ }
+
+ .result-order-number {
+ background-color: #ffffff;
+ border-radius: 20px;
+ padding: 24px 32px;
+ display: flex;
+ margin-bottom: 32px;
+
+ .result-order-number-label {
+ font-size: 26px;
+ color: boleGetCssVar('text-color', 'primary');
+ font-weight: 400;
+ line-height: 42px;
+ display: inline-flex;
+ align-items: center;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 8px;
+ height: 22px;
+ border-radius: 20px;
+ background-color: boleGetCssVar('color', 'primary');
+ margin-right: 12px;
+ }
+ }
+
+ .result-order-number-value {
+ font-size: 26px;
+ color: boleGetCssVar('text-color', 'primary');
+ font-weight: 400;
+ line-height: 42px;
+ text-align: right;
+ flex: 1;
+ min-width: 0;
+ @include ellipsis();
+ }
+ }
+
+ .result-wrapper-tips {
+ .result-wrapper-tips-item {
+ margin-bottom: 16px;
+ font-size: 28px;
+ color: boleGetCssVar('text-color', 'regular');
+ font-weight: 400;
+ line-height: 44px;
+
+ &.title {
+ margin-bottom: 12px;
+ font-size: 30px;
+ color: boleGetCssVar('text-color', 'primary');
+ font-weight: 400;
+ }
+
+ &.danger {
+ color: boleGetCssVar('color', 'danger');
+ }
+ &.warning {
+ color: boleGetCssVar('color', 'warning');
+ }
+ }
+ }
+
+ .result-wrapper-actions {
+ .recharge-button-text {
+ font-size: 32px;
+ }
+ }
+}
diff --git a/packages/components/src/styles/orderCard.scss b/packages/components/src/styles/orderCard.scss
index b475e2c..0417ebd 100644
--- a/packages/components/src/styles/orderCard.scss
+++ b/packages/components/src/styles/orderCard.scss
@@ -69,14 +69,11 @@
}
}
- .order-card-content {
- padding-bottom: 26px;
- }
-
.order-card-footer {
display: flex;
justify-content: flex-end;
padding-top: 32px;
+ margin-top: 26px;
border-top: solid 1px #f7f7f7;
}
diff --git a/packages/components/src/views/Order/OrderRefundResultView.vue b/packages/components/src/views/Order/OrderRefundResultView.vue
index 72b7f96..040c28c 100644
--- a/packages/components/src/views/Order/OrderRefundResultView.vue
+++ b/packages/components/src/views/Order/OrderRefundResultView.vue
@@ -1,6 +1,24 @@
<template>
<LoadingLayout :loading="isLoading">
- <div class="recharge-result-view" v-bind="$attrs">
+ <Result
+ v-bind="$attrs"
+ :title="title"
+ :orderNo="orderNo"
+ :icon="OssAssets.result.Fail"
+ :refundCheckRemark="detail.refundCheckRemark"
+ :servicePhone="CustomerServicePhone"
+ >
+ <template #actions>
+ <div class="chunk-form-actions">
+ <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')">
+ <div class="recharge-button-inner">
+ <div class="recharge-button-text">鍥為椤�</div>
+ </div>
+ </nut-button>
+ </div>
+ </template>
+ </Result>
+ <!-- <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">
@@ -10,13 +28,14 @@
<div class="recharge-result-view-btn-wrapper">
<div class="recharge-result-view-btn" @click="emit('goBackHome')">鍥為椤�</div>
</div>
- </div>
+ </div> -->
</LoadingLayout>
</template>
<script setup lang="ts">
import { LifeRechargeConstants, useLifeRechargeContext } from '@life-payment/core-vue';
-import { CustomerServicePhone } from '../../constants';
+import Result from '../../components/Result/Result.vue';
+import { CustomerServicePhone, OssAssets } from '../../constants';
import { useQuery } from '@tanstack/vue-query';
import { computed } from 'vue';
import LoadingLayout from '../../components//Layout/LoadingLayout.vue';
diff --git a/packages/components/src/views/RechargeResultView/RechargeResultView.vue b/packages/components/src/views/RechargeResultView/RechargeResultView.vue
index 001e556..066527c 100644
--- a/packages/components/src/views/RechargeResultView/RechargeResultView.vue
+++ b/packages/components/src/views/RechargeResultView/RechargeResultView.vue
@@ -1,5 +1,5 @@
<template>
- <div class="recharge-result-view">
+ <!-- <div class="recharge-result-view">
<div class="recharge-result-view-title">{{ title }}</div>
<div class="recharge-result-view-subtitle">璁㈠崟鍙凤細{{ orderNo }}</div>
<div class="recharge-result-view-tips">
@@ -14,12 +14,33 @@
<div class="recharge-result-view-btn-wrapper">
<div class="recharge-result-view-btn" @click="emit('goBackHome')">鍥為椤�</div>
</div>
- </div>
+ </div> -->
+ <Result
+ v-bind="$attrs"
+ :title="title"
+ :refundCheckRemark="refundCheckRemark"
+ :orderNo="orderNo"
+ :icon="OssAssets.result.Success"
+ :customerServiceTips="CustomerServiceTips"
+ :dangerTips="dangerTips"
+ warningTips="濡傛帴鍒伴檶鐢熸潵鐢碉紝瀵规柟浠ョ即璐规垨璇搷浣滅瓑鐞嗙敱瑕佹眰澶勭悊娆鹃」锛屽姟蹇呯珛鍗虫媺榛戯紝璋ㄩ槻璇堥獥!!!"
+ >
+ <template #actions>
+ <div class="chunk-form-actions">
+ <nut-button class="recharge-button" type="primary" @click="emit('goBackHome')">
+ <div class="recharge-button-inner">
+ <div class="recharge-button-text">杩斿洖棣栭〉</div>
+ </div>
+ </nut-button>
+ </div>
+ </template>
+ </Result>
</template>
<script setup lang="ts">
import { LifeRechargeConstants } from '@life-payment/core-vue';
-import { CustomerServiceTips } from '../../constants';
+import { CustomerServiceTips, OssAssets } from '../../constants';
+import Result from '../../components/Result/Result.vue';
defineOptions({
name: 'RechargeResultView',
@@ -27,12 +48,17 @@
type Props = {
title?: string;
+ refundCheckRemark?: string;
orderNo?: string;
+ dangerTips?: string;
lifePayOrderType?: LifeRechargeConstants.LifePayOrderTypeEnum;
};
const props = withDefaults(defineProps<Props>(), {
- title: '鏀粯鎴愬姛锛屽厖鍊兼灏嗗湪0-24灏忔椂鍐呭埌璐�',
+ title: '鏀粯鎴愬姛',
+ refundCheckRemark: '鍏呭�兼灏嗗湪0-24灏忔椂鍐呭埌璐�',
+ dangerTips:
+ '鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�',
});
const emit = defineEmits<{
--
Gitblit v1.9.1