assess-app/pages/task/module/item-text.vue

<template>
  <view class="item-line" v-show="isShow" :class="{'line-one':lineType===1,'line-two':lineType===2}">
    <view class="item-text">
      <view class="item-key">{{label}}</view>
      <view class="item-value" v-if="radioType">{{radioData[value+'']}}{{rightText?rightText:''}}</view>
      <view class="item-value" v-else>{{value?value:'-'}} {{rightText?rightText:''}}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: "item-text",
  components: {},
  props: {
    lineType:{
      type:Number,
      default:0
    },
    label: {
      type: String,
      default: '标题'
    },
    rightText: {
      type: String,
      default: ''
    },
    value: {
      default: ''
    },
    keyStr: {
      default: true
    },
    radioData:{
      default:false
    },
    typeKeys:{
      default:[]
    }
  },
  data() {
    return {
      radioType:false,
      isShow:true
    }
  },
  watch: {},
  mounted() {
    if(this.radioData){
      this.radioType=true
    }
    this.setIsShow()
  },
  methods: {
    setIsShow(){
      if(this.keyStr!==true){
        if(this.typeKeys.indexOf(this.keyStr)<0){
          this.isShow=false
        }
      }

    }
  }
}
</script>

<style scoped lang="scss">
.item-line{
  padding: 16rpx 0;
  .item-text{
    display: flex;
    justify-content: space-between;
    .item-key{
      color: #999999;
      font-size: 30rpx;
      min-width: 130rpx;
      margin-right: 20rpx;
    }
    .item-value{
      color: #333333;
      font-size: 30rpx;
    }
  }
}
.line-one{
  padding-top: 0;
}
.line-two{
  padding-bottom: 0;
}
</style>