interest-purchase/src/pageSubs/afterSales/components/iphAfterSaleOrderCard.vue

<!--
 * @Descripttion: 售后单卡片
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-04-10 14:48:01
 * @LastEditors: dream
 * @LastEditTime: 2021-04-10 15:17:12
-->
<template>
  <view class="after-sale-order-card iph-bg-fff">
    <view class="u-flex">
      <view class="u-flex-1 u-font-30 u-line-42 text-weight-500">退补配送费申请</view>
      <view class="ordre-time u-font-24 u-line-34">{{value.createTime | dateFilter}}</view>
    </view>
    <view class="u-font-24 u-line-34 u-m-t-24 u-p-b-40 u-border-bottom">售后单号：{{value.orderId}}</view>
    <view class="u-flex u-m-t-16">
      <view class="total u-flex-1">合计：{{value.num}}项仓库</view>
      <button class="look-btn" @click="lookDetail">退款详情</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'iphAfterSaleOrderCrad',
  props: {
    value: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    lookDetail () {
      this.$emit('lookDetail', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.after-sale-order-card {
  padding: 32px 24px 16px;
  border-radius: 12px;
  .ordre-time {
    color: $iph-desc-text;
  }
  .total {
    color: $iph-total-text;
  }
  .look-btn {
    margin: 0;
    padding: 8px 0;
    width: 144px;
    font-size: 24px;
    line-height: 34px;
    border-radius: 24px;
    color: $u-type-primary;
    background-color: $iph-standby-bg;
    &::after {
      border-radius: 48px;
      border-color: $u-type-primary;
    }
  }
}
</style>