From ea408eac6343066edcd8ca18117794442b64b545 Mon Sep 17 00:00:00 2001
From: wupengfei <834520024@qq.com>
Date: 星期三, 21 五月 2025 17:16:39 +0800
Subject: [PATCH] feat: UI
---
apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue | 14 ++++
packages/components/src/index.ts | 2
apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue | 26 +++++++-
packages/components/src/components/Result/Result.vue | 45 ++++++++++-----
packages/components/src/views/Order/OrderRefundResultView.vue | 27 ++-------
apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue | 25 ++++++--
packages/components/src/views/RechargeResultView/RechargeResultView.vue | 3 -
packages/components/src/components/Result/ResultWithTips.vue | 35 +++++++++++
8 files changed, 125 insertions(+), 52 deletions(-)
diff --git a/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue b/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue
index fa65220..02746bf 100644
--- a/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue
+++ b/apps/taro/src/subpackages/recharge/rechargeElectricResult/rechargeElectricResult.vue
@@ -1,11 +1,17 @@
<template>
<PageLayout title="鍏呭�兼垚鍔�" class="rechargeElectricResult-page-wrapper" hasBorder>
<ContentScrollView>
- <RechargeResultView
+ <ResultWithTips
+ :title="title"
+ :orderNo="orderNo"
+ type="success"
+ dangerTips="鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�"
@go-back-home="goHome()"
- title="鏀粯鎴愬姛"
- refund-check-remark="鍏呭�兼灏嗗湪0-72灏忔椂鍐呭埌璐�"
- />
+ >
+ <template #remark>
+ <div class="result-content-remark-item">鍏呭�兼灏嗗湪0-72灏忔椂鍐呭埌璐�</div>
+ </template>
+ </ResultWithTips>
</ContentScrollView>
</PageLayout>
</template>
@@ -13,9 +19,19 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import { goHome } from '@/utils';
-import { RechargeResultView } from '@life-payment/components';
+import { ResultWithTips } from '@life-payment/components';
defineOptions({
name: 'rechargeElectricResult',
});
+
+type Props = {
+ title?: string;
+ orderNo?: string;
+ dangerTips?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ title: '鏀粯鎴愬姛',
+});
</script>
diff --git a/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue b/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue
index 8cefd70..7d96951 100644
--- a/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue
+++ b/apps/taro/src/subpackages/recharge/rechargeGasResult/rechargeGasResult.vue
@@ -1,13 +1,17 @@
<template>
<PageLayout title="鍏呭�兼垚鍔�" class="rechargeGasResult-page-wrapper" hasBorder>
<ContentScrollView>
- <RechargeResultView
+ <ResultWithTips
+ :title="title"
+ :orderNo="orderNo"
+ type="success"
+ dangerTips="鍚屼竴鐕冩皵璐硅处鎴峰湪鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�"
@go-back-home="goHome()"
- title="鏀粯鎴愬姛"
- refund-check-remark="鍏呭�兼灏嗗湪0-72灏忔椂鍐呭埌璐�"
- danger-tips="鍚屼竴鐕冩皵璐硅处鎴峰湪鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�"
>
- </RechargeResultView>
+ <template #remark>
+ <div class="result-content-remark-item">鍏呭�兼灏嗗湪0-72灏忔椂鍐呭埌璐�</div>
+ </template>
+ </ResultWithTips>
</ContentScrollView>
</PageLayout>
</template>
@@ -15,9 +19,18 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import { goHome } from '@/utils';
-import { RechargeResultView } from '@life-payment/components';
+import { ResultWithTips } from '@life-payment/components';
defineOptions({
name: 'rechargeGasResult',
});
+
+type Props = {
+ title?: string;
+ orderNo?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ title: '鏀粯鎴愬姛',
+});
</script>
diff --git a/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue b/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue
index 15e43fd..e18b43f 100644
--- a/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue
+++ b/apps/taro/src/subpackages/recharge/rechargeResult/rechargeResult.vue
@@ -1,7 +1,17 @@
<template>
<PageLayout title="鍏呭�兼垚鍔�" class="rechargeResult-page-wrapper" hasBorder>
<ContentScrollView>
- <RechargeResultView style="margin-top: 40px" @go-back-home="goHome()" :orderNo="orderNo" />
+ <ResultWithTips
+ title="鏀粯鎴愬姛"
+ :orderNo="orderNo"
+ type="success"
+ dangerTips="鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�"
+ @go-back-home="goHome()"
+ >
+ <template #remark>
+ <div class="result-content-remark-item">鍏呭�兼灏嗗湪0-24灏忔椂鍐呭埌璐�</div>
+ </template>
+ </ResultWithTips>
</ContentScrollView>
</PageLayout>
</template>
@@ -9,7 +19,7 @@
<script setup lang="ts">
import { PageLayout } from '@/components';
import { goHome } from '@/utils';
-import { RechargeResultView } from '@life-payment/components';
+import { ResultWithTips } from '@life-payment/components';
import Taro from '@tarojs/taro';
defineOptions({
diff --git a/packages/components/src/components/Result/Result.vue b/packages/components/src/components/Result/Result.vue
index d40bd86..fdd9835 100644
--- a/packages/components/src/components/Result/Result.vue
+++ b/packages/components/src/components/Result/Result.vue
@@ -4,12 +4,7 @@
<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>
+ <slot name="remark"> </slot>
</div>
</div>
<div class="result-order-number">
@@ -17,29 +12,34 @@
<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>
+ <slot name="tips"> </slot>
</div>
<div class="result-wrapper-actions">
- <slot name="actions"> </slot>
+ <slot name="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>
+ </slot>
</div>
</div>
</template>
<script setup lang="ts">
+import { computed } from 'vue';
+import { OssAssets } from '../../constants/img';
+
defineOptions({
name: 'Result',
});
type Props = {
title?: string;
- icon?: string;
+ type?: string;
orderNo?: string;
- refundCheckRemark?: string;
servicePhone?: string;
dangerTips?: string;
warningTips?: string;
@@ -47,4 +47,19 @@
};
const props = withDefaults(defineProps<Props>(), {});
+
+const emit = defineEmits<{
+ (e: 'goBackHome'): void;
+}>();
+
+const icon = computed(() => {
+ switch (props.type) {
+ case 'success':
+ return OssAssets.result.Success;
+ case 'fail':
+ return OssAssets.result.Fail;
+ default:
+ return OssAssets.result.Success;
+ }
+});
</script>
diff --git a/packages/components/src/components/Result/ResultWithTips.vue b/packages/components/src/components/Result/ResultWithTips.vue
new file mode 100644
index 0000000..2381c2e
--- /dev/null
+++ b/packages/components/src/components/Result/ResultWithTips.vue
@@ -0,0 +1,35 @@
+<template>
+ <Result>
+ <template #remark>
+ <slot name="remark"> </slot>
+ </template>
+ <template #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>
+ </template>
+ </Result>
+</template>
+
+<script setup lang="ts">
+import Result from './Result.vue';
+import { CustomerServiceTips } from '../../constants';
+
+defineOptions({
+ name: 'ResultWithTips',
+});
+
+type Props = {
+ dangerTips?: string;
+ warningTips?: string;
+ customerServiceTips?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+ warningTips: '濡傛帴鍒伴檶鐢熸潵鐢碉紝瀵规柟浠ョ即璐规垨璇搷浣滅瓑鐞嗙敱瑕佹眰澶勭悊娆鹃」锛屽姟蹇呯珛鍗虫媺榛戯紝璋ㄩ槻璇堥獥!!!',
+ customerServiceTips: CustomerServiceTips,
+});
+</script>
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index af9fa74..8e753b6 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -4,6 +4,8 @@
export { default as GasBillRecharge } from './views/GasBillRecharge/GasBillRecharge.vue';
export { default as SelectPayTypeView } from './views/SelectPayTypeView/SelectPayTypeView.vue';
export { default as RechargeResultView } from './views/RechargeResultView/RechargeResultView.vue';
+export { default as Result } from './components/Result/Result.vue';
+export { default as ResultWithTips } from './components/Result/ResultWithTips.vue';
export { default as PhoneOrder } from './views/Order/components/PhoneOrder.vue';
export { default as ElectricOrder } from './views/Order/components/ElectricOrder.vue';
export { default as GasOrder } from './views/Order/components/GasOrder.vue';
diff --git a/packages/components/src/views/Order/OrderRefundResultView.vue b/packages/components/src/views/Order/OrderRefundResultView.vue
index 040c28c..958b01a 100644
--- a/packages/components/src/views/Order/OrderRefundResultView.vue
+++ b/packages/components/src/views/Order/OrderRefundResultView.vue
@@ -4,31 +4,16 @@
v-bind="$attrs"
:title="title"
:orderNo="orderNo"
- :icon="OssAssets.result.Fail"
- :refundCheckRemark="detail.refundCheckRemark"
- :servicePhone="CustomerServicePhone"
+ type="fail"
+ @goBackHome="emit('goBackHome')"
>
- <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>
+ <template #remark>
+ <div class="result-content-remark-item">{{ detail.refundCheckRemark }}</div>
+ <div class="result-content-remark-item">
+ 濡傛湁鐤戦棶 璇疯仈绯诲鏈� {{ CustomerServicePhone }}锛堝懆涓�鍒板懆浜� 9:00-17:30锛�
</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">
- {{ detail.refundCheckRemark }},濡傛湁鐤戦棶璇疯仈绯诲鏈� {{ CustomerServicePhone }}锛堝懆涓�鍒板懆浜�
- 9:00-17:30锛�
- </div>
- <div class="recharge-result-view-btn-wrapper">
- <div class="recharge-result-view-btn" @click="emit('goBackHome')">鍥為椤�</div>
- </div>
- </div> -->
</LoadingLayout>
</template>
diff --git a/packages/components/src/views/RechargeResultView/RechargeResultView.vue b/packages/components/src/views/RechargeResultView/RechargeResultView.vue
index ad41ffc..db7a64a 100644
--- a/packages/components/src/views/RechargeResultView/RechargeResultView.vue
+++ b/packages/components/src/views/RechargeResultView/RechargeResultView.vue
@@ -1,7 +1,6 @@
<template>
<Result
:title="title"
- :refundCheckRemark="refundCheckRemark"
:orderNo="orderNo"
:icon="OssAssets.result.Success"
:customerServiceTips="CustomerServiceTips"
@@ -31,7 +30,6 @@
type Props = {
title?: string;
- refundCheckRemark?: string;
orderNo?: string;
dangerTips?: string;
lifePayOrderType?: LifeRechargeConstants.LifePayOrderTypeEnum;
@@ -39,7 +37,6 @@
const props = withDefaults(defineProps<Props>(), {
title: '鏀粯鎴愬姛',
- refundCheckRemark: '鍏呭�兼灏嗗湪0-24灏忔椂鍐呭埌璐�',
dangerTips:
'鍚屼竴鍙风爜鍏呭�兼湡闂达紝鏈埌璐﹀墠鍒囧嬁鍦ㄥ叾浠栦换浣曞钩鍙板啀娆″厖鍊笺�傚洜姝ら�犳垚鐨勮祫閲戞崯澶遍』鐢ㄦ埛鑷鎵挎媴锛侊紒锛�',
});
--
Gitblit v1.9.1