interest-purchase/src/pageSubs/refund/components/iphRefundOrderCard.vue

<!--
 * @Descripttion: 退费单卡片
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-04-12 09:56:51
 * @LastEditors: dream
 * @LastEditTime: 2021-04-12 10:39:24
-->
<template>
  <view class="refund-order-card-main iph-bg-fff" @click="cardClick">
    <view class="u-flex u-p-b-24 u-border-bottom u-font-24 u-line-34">
      <view class="u-flex-1 text-weight-500">退费单号：{{value.orderId}}</view>
      <view class="card-status">{{value.status | statusFilter}}</view>
    </view>
    <view class="u-flex u-p-t-32 u-font-24 u-line-34">
      <view class="u-flex-1">创建时间</view>
      <view class="card-time">{{value.createTime | dateFilter}}</view>
    </view>
    <view class="u-flex u-p-t-24 u-p-b-32 u-font-24 u-line-34">
      <view class="u-flex-1">退货退费</view>
      <view>¥{{value.refundPrice | priceFilter}}</view>
    </view>
    <view class="u-border-top u-p-t-32 card-time u-font-24 u-line-34">退费描述：{{value.desc}}</view>
  </view>
</template>

<script>
export default {
  name: 'iphRefundOrderCard',
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    cardClick () {
      this.$emit('cardClick', this.val)
    }
  },
  filters: {
    statusFilter (val) {
      const statusText = {
        1: '已退款'
      }
      return statusText[val]
    }
  }
}
</script>

<style lang="scss" scoped>
.refund-order-card-main {
  padding: 24px 24px 32px;
  border-radius: 12px;
  .card-status {
    color: $u-type-primary;
  }
  .card-time {
    color: $iph-desc-text;
  }
}
</style>