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" v-show="language == 'zh-CN'">
              {{ itemInfo.goods.name_cn }}</view
            >
            <view class="title" v-show="language == 'en-US'">
              {{ itemInfo.goods.name_en }}</view
            >
            <view class="title" v-show="language == 'es-ES'">
              {{ itemInfo.goods.name_es }}</view
            >
            <view class="title" v-show="language == 'it-IT'">
              {{ itemInfo.goods.name_ita }}</view
            >
            <view class="price">
              <text style="font-size: 20rpx">￥</text>
              <text>{{ itemInfo.goods.discount_price.split(".")[0] }}</text
              >.
              <text style="font-size: 20rpx">{{
                itemInfo.goods.discount_price.split(".")[1]
              }}</text>
            </view>
          </view>
          <view class="specifications">
            <view class="title"> {{ itemInfo.goods.sku_item[0].item }} </view>
            <text>x{{ itemInfo.order_goods.goods_num }}</text>
          </view>
        </view>
      </view>
      <view
        style="color: #222; font-size: 24rpx; text-align: right"
        v-if="language != 'zh-CN'"
        >{{
          i18n.Atotalof +
          "&nbsp;" +
          itemInfo.order_goods.goods_num +
          "&nbsp;" +
          i18n.piece +
          i18n.mineCommodity +
          "&nbsp;"
        }}</view
      >
      <view class="price-detail">
        <text
          style="color: #222; font-size: 24rpx"
          v-if="language == 'zh-CN'"
          >{{
            i18n.Atotalof +
            "&nbsp;" +
            itemInfo.order_goods.goods_num +
            "&nbsp;" +
            i18n.piece +
            i18n.mineCommodity +
            "&nbsp;"
          }}</text
        >
        <text style="font-size: 28rpx">{{ i18n.actualPayment }}</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)"
      >
        {{ i18n.platformIntervention }}
      </button>
      <button
        class="btn-1"
        v-if="
          (itemInfo.status == 0 || itemInfo.status == 3) &&
          Number(itemInfo.is_send)
        "
        @click.stop="$emit('refuseRefund', itemInfo)"
      >
        {{ i18n.refuseApplication }}
      </button>
      <button
        class="btn-3"
        v-if="
          (itemInfo.status == 0 || itemInfo.status == 3) &&
          Number(itemInfo.is_send)
        "
        @click.stop="$emit('agreeRefund', itemInfo)"
      >
        {{ i18n.AccettareRestituzione }}
      </button>
      <button
        class="btn-2"
        v-if="itemInfo.status == 1"
        @click.stop="$emit('openPop', itemInfo)"
      >
        {{ i18n.delete }}
      </button>
      <button class="btn-2" v-if="itemInfo.status == 1">
        {{ i18n.details }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    itemInfo: {
      typeof: Object,
      default: {},
    },
    language: {
      typeof: String,
      default: "",
    },
  },
  computed: {
    model() {
      if (this.itemInfo.status == 0) {
        return "filter: blur(5px);";
      }
    },
    deliveryStatus() {
      if (this.itemInfo.status == "0") {
        return this.i18n.pendingRefund;
      } else if (this.itemInfo.status == "3") {
        return this.i18n.platformIntervention;
      } else if (this.itemInfo.status == "2") {
        return this.i18n.refuseRefund;
      } else if (this.itemInfo.status == "1") {
        return this.i18n.refunded;
      }
    },
    i18n() {
      return this.$t("index");
    },
  },
  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>