feat: UI

wupengfei

1 天以前 0224735fb1cba46f6549adfa1f60ffd6b5041b72

feat: UI

 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>


 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>

 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>

 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>

 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>(), {});

 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`,
  },
};

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

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


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

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