wx-qhb/pageD/afterSalesDetail/component/applicationInformation.vue

<template>
  <view class="application-card">
    <view class="title"> {{ i18n.applicationInformation }} </view>
    <view class="_label-1">
      <text>{{ i18n.theGoods }}</text>
      <text class="result">{{
        orderInformation.is_received == 0
          ? i18n.receivedGoods
          : i18n.notReceivedGoods
      }}</text>
    </view>
    <view class="_label-1">
      <text>{{ i18n.AfterSalesInstructions }}</text>
      <text class="result">{{
        orderInformation.goods[0].refund.refund_reason
      }}</text>
    </view>
    <view class="photo">
      <text>{{ i18n.pictureVoucher }}</text>
      <view class="photo-list">
        <image
          class="img-1"
          v-for="(item, index) in refuseImg"
          :key="index"
          :src="item"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    orderInformation: {
      typeof: Object,
      default: () => {
        return {};
      },
    },
    refuseImg: {
      typeof: Array,
      default: () => {
        return [];
      },
    },
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.application-card {
  padding: 28rpx 20rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-top: 20rpx;
  margin-bottom: 200rpx;
  .title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
  }
  ._label-1 {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    color: #232323;
    margin: 20rpx 0;
    .result {
      color: #555;
    }
  }
  .photo {
    font-size: 28rpx;
    color: #232323;
    display: flex;
    justify-content: space-between;
    .photo-list {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      width: 80%;
      .img-1 {
        width: 156rpx;
        height: 156rpx;
        border-radius: 10rpx;
        // background-color: #d4d4d4;
        margin-left: 16rpx;
        margin-bottom: 10rpx;
      }
    }
  }
}
</style>