feat: UI

wupengfei

2025-05-21 ea408eac6343066edcd8ca18117794442b64b545

feat: UI

 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>

 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>

 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({

 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>

 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>

 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';

 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>


 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:
    '同一号码充值期间，未到账前切勿在其他任何平台再次充值。因此造成的资金损失须用户自行承担！！！',
});