feat: UI

wupengfei

1 天以前 ddddcf83e7deb9d0a674d2bbead300089530d87e

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<template>
  <div class="order-card">
    <div class="order-card-title">
      <div class="order-card-title-left">
        <div class="order-card-title-text">{{ title }}</div>
        <div class="order-card-title-ordernum">
          {{ `订单编号：${orderNo}` }}
        </div>
      </div>
      <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="showFooter">
        <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> -->
      <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>
    </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?: 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 showFooter = computed(() => {
  return (
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.充值中 ||
    props.status === LifeRechargeConstants.LifePayOrderStatusEnum.退款失败
  );
});
</script>