wx-qhb/pageD/afterSalesManage/component/detailCard.vue

<template>
  <view class="card" @click="$emit('toDetail', itemInfo)">
    <view class="user-name">
      <view class="name">
        <image class="header-img" :src="itemInfo.member.avatar" mode=""></image>

        <text>{{ itemInfo.member.nickname }}</text>
      </view>
      <text
        class="order-status"
        :style="
          this.itemInfo.status == '0' || this.itemInfo.status == '1'
            ? 'color:#444'
            : ''
        "
        >{{ deliveryStatus }}</text
      >
    </view>
    <view class="order-detail">
      <view class="detail">
        <image
          class="order-img"
          :src="itemInfo.goods.sku_item[0].image"
          mode=""
        ></image>
        <view class="detail-right">
          <view class="title-price">
            <view class="title"> {{ itemInfo.goods.name_cn }}</view>
            <view class="price">
              <text style="font-size: 20rpx">￥</text>
              <text>{{ itemInfo.goods.sku_item[0].price.split(".")[0] }}</text
              >.
              <text style="font-size: 20rpx">{{
                itemInfo.goods.sku_item[0].price.split(".")[1]
              }}</text>
            </view>
          </view>
          <view class="specifications">
            <view class="title"> {{ itemInfo.goods.sku_item[0].item }} </view>
            <text>x1</text>
          </view>
        </view>
      </view>
      <view class="price-detail">
        <text style="color: #222; font-size: 24rpx">{{
          "共1件商品" + "&nbsp;"
        }}</text>
        <text style="font-size: 28rpx">买家实付</text>
        <view class="price">
          <text style="font-size: 20rpx">￥</text>
          <text>{{ itemInfo.order_goods.amount.split(".")[0] }}</text
          >.
          <text style="font-size: 20rpx">{{
            itemInfo.order_goods.amount.split(".")[1]
          }}</text>
        </view>
      </view>
    </view>
    <view class="btn-list">
      <button
        disabled
        class="btn-2"
        :disabled="itemInfo.status == 3"
        :style="itemInfo.status == 3 ? 'opacity: 0.5' : ''"
        v-if="itemInfo.status == 0 || itemInfo.status == 3"
        @click.stop="$emit('platformIntervene', itemInfo)"
      >
        平台介入
      </button>
      <button
        class="btn-1"
        v-if="
          (itemInfo.status == 0 || itemInfo.status == 3) &&
          Number(itemInfo.is_send)
        "
        @click.stop="$emit('refuseRefund', itemInfo)"
      >
        拒绝申请
      </button>
      <button
        class="btn-3"
        v-if="
          (itemInfo.status == 0 || itemInfo.status == 3) &&
          Number(itemInfo.is_send)
        "
        @click.stop="$emit('agreeRefund', itemInfo)"
      >
        同意退款
      </button>
      <button
        class="btn-2"
        v-if="itemInfo.status == 1"
        @click.stop="$emit('openPop', itemInfo)"
      >
        删除
      </button>
      <button class="btn-2" v-if="itemInfo.status == 1">查看详情</button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemInfo: {
      typeof: Object,
      default: {},
    },
  },
  computed: {
    model() {
      if (this.itemInfo.status == 0) {
        return "filter: blur(5px);";
      }
    },
    deliveryStatus() {
      if (this.itemInfo.status == "0") {
        return "待退款";
      } else if (this.itemInfo.status == "3") {
        return "平台介入";
      } else if (this.itemInfo.status == "2") {
        return "拒绝退款";
      } else if (this.itemInfo.status == "1") {
        return "已退款";
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 0 20rpx;
  padding-bottom: 20rpx;
  margin-bottom: 20rpx;

  .user-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 84rpx;
    border-bottom: 2rpx solid rgba(151, 151, 151, 0.2);

    .name {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #333;

      .header-img {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        margin-right: 12rpx;
      }
    }

    .order-status {
      font-size: 24rpx;
      color: #f83224;
    }
  }

  .order-detail {
    margin-top: 22rpx;
    position: relative;

    .detail {
      display: flex;

      .order-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .detail-right {
        width: 70%;

        .title-price {
          display: flex;
          font-size: 28rpx;
          justify-content: space-between;
          align-items: center;

          .title {
            width: 330rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .specifications {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 28rpx;
          color: #777;
          margin-top: 10rpx;

          .title {
            width: 330rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .price-detail {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 20rpx;

    .price {
      font-weight: 600;
    }
  }

  .remarks {
    display: flex;
    font-size: 28rpx;
    background-color: #f4f4f4;
    border-radius: 10rpx;
    padding: 14rpx 20rpx;
    margin-top: 20rpx;
  }

  .btn-list {
    display: flex;
    justify-content: flex-end;
    margin-top: 30rpx;

    .btn-1 {
      font-size: 28rpx;
      color: #f83224;
      border: 2rpx solid #f83224;
      background-color: #fff;
      margin: 0;
      border-radius: 34rpx;
      min-width: 162rpx;
      margin-left: 20rpx;
    }

    .btn-2 {
      font-size: 28rpx;
      color: #222;
      border: 2rpx solid #979797;
      background-color: #fff;
      margin: 0;
      border-radius: 34rpx;
      min-width: 162rpx;
      margin-left: 20rpx;
    }
    .btn-3 {
      font-size: 28rpx;
      color: #fff;
      background-color: #f83224;
      margin: 0;
      border-radius: 34rpx;
      min-width: 162rpx;
      margin-left: 20rpx;
    }
  }
}
</style>