SmartCommunity/smart/src/views/rechargeRecord/setpPage/details.vue

<template>
  <div class="lookDetail">
    <div class="list-item">
      <div class="formContent-item_title">内部车基本信息</div>
      <el-row>
        <el-col
          :span="12"
          v-for="(item,index) in interiorCar"
          :key="index"
        >
          <el-col :span="8">{{item.name}}</el-col>
          <el-col :span="12">{{item.label}}</el-col>
        </el-col>

      </el-row>
      <div class="formContent-item_title">充值详情</div>
      <el-row>
        <el-col
          :span="12"
          v-for="(item,index) in rechargeDetails"
          :key="index"
        >

          <el-col :span="8">{{item.name}}</el-col>
          <el-col
            :span="12"
            :title='item.label'
            class="whitespace"
          >{{item.label}}</el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>


<script>
export default {
  props: ['params'],
  data () {
    return {
      interiorCar: [
        {
          name: '车主名称',
          label: ''

        }, {
          name: '门牌号码',
          label: '-'
        }, {
          name: '车牌号码',
          label: ''//platNo
        }, {
          name: '车牌类型',
          label: '',//carType
        }, {
          name: '手机号',
          label: ''//
        }
      ],
      rechargeDetails: [
        {
          name: '收费类型',
          label: '-'//0
        }, {
          name: '收费类型',
          label: '-'//1
        }, {
          name: '充值数额',
          label: ''//chargeNumber  2
        }, {
          name: '赠送数额',
          label: '-'//3
        }, {
          name: '充值时段',
          label: '-'//4
        }, {
          name: '订单类型',
          label: '充值订单'//5
        }, {
          name: '操作备注',
          label: '-'//6
        }, {
          name: '订单号码',
          label: ''//orderNo  7
        }, {
          name: '操作时间',
          label: '-'//8
        }, {
          name: '审核时间',
          label: '-'//9
        }, {
          name: '操作人员',
          label: '-'//10
        }, {
          name: '审核人员',
          label: '-'//11
        }
      ]
    }
  },
  created () {
    this.interiorCar[0].label = this.params.row.userName;
    this.interiorCar[2].label = this.params.row.fullCarNoStr;
    this.interiorCar[3].label = this.params.row.carType == 0 ? '临时车'
      : this.params.row.carType == 1 ? 'VIP车'
        : this.params.row.carType == 2 ? '月租车'
          : this.params.row.carType == 3 ? '充时车'
            : this.params.row.carType == 4 ? '时租车'
              : this.params.row.carType == 5 ? '产权车'
                : this.params.row.carType == 6 ? '计次车'
                  : this.params.row.carType == 7 ? '贵宾卡'
                    : this.params.row.carType == 8 ? '员工卡' : '--';
    this.interiorCar[4].label = this.params.row.tel;

    debugger
    // ruleName
    this.rechargeDetails[0].label = this.params.row.ruleName;
    this.rechargeDetails[1].label = this.params.row.carType == 0 ? '临时车'
      : this.params.row.carType == 1 ? 'VIP车'
        : this.params.row.carType == 2 ? '月租车'
          : this.params.row.carType == 3 ? '充时车'
            : this.params.row.carType == 4 ? '时租车'
              : this.params.row.carType == 5 ? '产权车'
                : this.params.row.carType == 6 ? '计次车'
                  : this.params.row.carType == 7 ? '贵宾卡'
                    : this.params.row.carType == 8 ? '员工卡' : '--';
    this.rechargeDetails[2].label = (this.params.row.chargeNumber + '月');
    this.rechargeDetails[3].label = (this.params.row.credit + '月') || '--';
    // payTime
    this.rechargeDetails[4].label = this.params.row.payTime;
    this.rechargeDetails[6].label = this.params.row.remark;
    this.rechargeDetails[7].label = this.params.row.orderNo;
    this.rechargeDetails[8].label = this.params.row.payTime;
  }
}


</script>


<style lang="scss" scoped>
.el-col {
    margin: 8px 0 !important;
}
.whitespace {
    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}
</style>