crm-mobile/pages_examine/components/travelItem.vue

<template>
  <view class="travel-item">
    <view v-for="(value, index) in item.value" :key="index">
      <view class="container-header">
        <image :src="$static('images/oa/travel.png')" alt class="img" />
        <text>{{ item.name }}{{ index+1 }}</text>
      </view>
      <view class="container-body">
        <view v-for="(field, i) in formList" :key="i" class="container-remark-row">
          <text class="label">
            {{ field.text }}：
          </text>
          <text>{{ $isEmpty(value[field.name]) ? '--' : value[field.name] }}</text>
        </view>
        <wk-image-content
          v-if="value.img.length > 0"
          :list="value.img"
          class="image-content" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'TravelItem',
    props: {
      item: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        // 出差的表单选项
        businessCause: [
          {text: '交通工具', name: 'vehicle'},
          {text: '单程往返', name: 'trip'},
          {text: '出发城市', name: 'startAddress'},
          {text: '目的城市', name: 'endAddress'},
          {text: '开始时间', name: 'startTime'},
          {text: '结束时间', name: 'endTime'},
          {text: '时长(天)', name: 'duration'},
          {text: '备注', name: 'description'},
        ],

        // 出差报销选项
        examineCause: [
          {text: '出发城市', name: 'startAddress'},
          {text: '目的城市', name: 'endAddress'},
          {text: '开始时间', name: 'startTime', type: 'date'},
          {text: '结束时间', name: 'endTime', type: 'date'},
          {text: '交通费（元）', name: 'traffic'},
          {text: '住宿费（元）', name: 'stay'},
          {text: '餐饮费（元）', name: 'diet'},
          {text: '其他费用（元）', name: 'other'},
          {text: '费用明细描述', name: 'description'},
        ]
      }
    },
    computed: {
      formList() {
        if (this.item.formType === 'business_cause') {
          return this.businessCause
        } else if (this.item.formType === 'examine_cause') {
          return this.examineCause
        }
        return []
      }
    }
  }
</script>

<style lang="scss" scoped>
  .travel-item {
    background-color: #fbfbfb;
    border-radius: 6rpx;
    margin-top: 10rpx;
		
    .container-header {
      background-color: #f5f5f5;
      padding: 0 20rpx;
      font-size: 28rpx;
      height: 72rpx;
      @include left;

      .img {
        width: 34rpx;
        height: 36rpx;
        margin-right: 20rpx;
      }
    }

    .container-body {
      padding: 15rpx 20rpx;

      .container-remark-row {
        display: flex;
        font-size: 28rpx;
        line-height: 50rpx;
        color: $dark;

        .label {
          color: $light;
          padding-right: 10rpx;
          @include left;
        }
      }
			::v-deep .image-content {
				.file-item {
					width: 140rpx;
					height: 140rpx;
				}
			}
    }
  }
</style>