feat: UI

wupengfei

6 天以前 14368e8a09c4b5793d0975f85e36a4c1d410ca36

 packages/components/src/components/Card/OrderCard.vue

@@ -1,59 +1,77 @@
<template>
  <div class="order-card">
    <div class="order-card-title">
      <div class="order-card-title-top">
      <div class="order-card-title-left">
        <div class="order-card-title-text">{{ title }}</div>
        <div class="order-card-title-status">{{ status }}</div>
        <div class="order-card-title-ordernum">
          {{ `订单编号：${orderNo}` }}
        </div>
      </div>
      <div class="order-card-title-ordernum">
        {{ `订单编号：${'JF202502191515350002'}` }}
      <div class="order-card-title-status">
        <img :src="LifePayOrderStatusEnumImg[status]" alt="" />
      </div>
    </div>
    <div class="order-card-content">
      <slot></slot>
    </div>
    <slot name="actions">
      <div class="order-card-footer" v-if="shoeFooter">
        <div
          v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中"
          class="order-card-action"
          @click="emit('goApplyRefund', id)"
        >
          申请退款
        </div>
        <div
          class="order-card-action"
          v-if="status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败"
          @click="emit('goRefundDetail', orderNo)"
        >
          详情
        </div>
      </div>
    </slot>
  </div>
</template>

<script setup lang="ts">
import { LifeRechargeConstants } from '@life-payment/core-vue';
import { OssAssets } from '../../constants';
import { computed } from 'vue';

defineOptions({
  name: 'OrderCard',
});

type Props = {
  title: string;
  status: string;
  status?: LifeRechargeConstants.LifePayOrderStatusEnum;
  orderNo: string;
  id: string;
};

const props = withDefaults(defineProps<Props>(), {});

const emit = defineEmits<{
  (e: 'goApplyRefund', id: string): void;
  (e: 'goRefundDetail', orderNo: string): void;
}>();

const LifePayOrderStatusEnumImg = {
  [LifeRechargeConstants.LifePayOrderStatusEnum.充值中]: OssAssets.card.Recharge,
  [LifeRechargeConstants.LifePayOrderStatusEnum.已失败]: OssAssets.card.Failed,
  [LifeRechargeConstants.LifePayOrderStatusEnum.已完成]: OssAssets.card.Success,
  [LifeRechargeConstants.LifePayOrderStatusEnum.待退款]: OssAssets.card.WaitRefund,
  [LifeRechargeConstants.LifePayOrderStatusEnum.已退款]: OssAssets.card.Refunded,
  [LifeRechargeConstants.LifePayOrderStatusEnum.退款失败]: OssAssets.card.RefundFail,
  [LifeRechargeConstants.LifePayOrderStatusEnum.退款中]: OssAssets.card.Refund,
};

const shoeFooter = computed(() => {
  return (
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中 ||
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败
  );
});
</script>
<style lang="scss">
.order-card {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;

  .order-card-title {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 20px;
    margin-bottom: 20px;

    .order-card-title-top {
      display: flex;
      justify-content: space-between;
      color: #333333;
      font-size: 28px;
      line-height: 40px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .order-card-title-ordernum {
      font-size: 24px;
      color: #999999;
    }
  }
}
</style>