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

<template>
  <view class="application-card">
    <view class="title"> 申请信息 </view>
    <view class="_label-1">
      <text>是否收货</text>
      <text class="result">{{
        orderInformation.is_received == 0 ? "已收货" : "未收货"
      }}</text>
    </view>
    <view class="_label-1">
      <text>售后说明</text>
      <text class="result">{{
        orderInformation.goods[0].refund.refund_reason
      }}</text>
    </view>
    <view class="photo">
      <text>图片凭证</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 [];
      },
    },
  },
  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>