aiot-app/pages/maintenance/check/components/CheckCard.vue

<template>
  <view class="kd-check-card">
    <view class="title">
      <text class="label">{{ index + 1 }}</text>
      <text>{{ item.name }}</text>
    </view>
    <view class="card-cell">
      <text class="label">内容</text>
      <text class="cell-content">{{ item.content }}</text>
    </view>
    <view class="card-cell">
      <text class="label">标准</text>
      <text class="cell-content">{{ item.norm }}</text>
    </view>
    <view class="card-cell">
      <text class="label">结果</text>
      <view class="cell-content">
        <view class="content-status" v-if="type == 'view'">
          <!-- {{ item.isNormal?'正常':'缺陷' }} -->
          <div v-if="item.isNormal" style="color: green">正常</div>
          <div v-else-if="item.isNormal === 0" style="color: red">缺陷</div>
        </view>
        <textarea
          v-if="type !== 'view'"
          placeholder="请输入"
          v-model="item.resultText"
        />
        <view class="result-text" v-else>{{ item.resultText }}</view>
        <view class="radio-wrapper" v-if="type !== 'view'">
          <div
            v-for="(it, ind) in statusList"
            :key="ind"
            class="wrapper-box"
            @click="changeStatus(item, it)"
            :style="
              item.isNormal == it.isNormal && item.isNormal == 0
                ? 'color:red;border: 1rpx solid red'
                : item.isNormal == it.isNormal && item.isNormal == 1
                ? 'color:green;border: 1rpx solid green'
                : ''
            "
          >
            {{ it.label }}
          </div>
          <!-- <u-radio-group
            v-model="item.isNormal"
            placement="row"
            v-if="type !== 'view'"
            :size="28"
          >
            <u-radio
              :customStyle="{ marginRight: '20px' }"
              :labelSize="30"
              label="正常"
              :name="1"
            >
            </u-radio>
            <u-radio :customStyle="{}" :labelSize="30" label="缺陷" :name="0">
            </u-radio>
          </u-radio-group>
          <view
            :class="item.isNormal === 0 ? 'text-danger' : ''"
            v-else
            style="min-height: 1em"
          >
            {{ ['缺陷', '正常'][item.isNormal] }}
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    index: Number,
    type: {
      type: String,
      default: 'edit'
    }
  },
  data () {
    return {
      statusList: [
        { label: '正常', isNormal: 1 },
        { label: '缺陷', isNormal: 0 }
      ]
    }
  },
  methods: {
    changeStatus (item, it) {
      item.isNormal = it.isNormal
    }
  }
}
</script>

<style lang="scss" scoped>
$border-color: #f2f2f2;
.kd-check-card {
  font-size: 28rpx;
  border: 1rpx solid $border-color;
  .label {
    display: inline-block;
    width: 80rpx;
    text-align: center;
    border-right: 1px solid $border-color;
    justify-content: center;
  }
  .title {
    line-height: 72rpx;
    font-weight: bold;
    background-color: #f2f2f2;
  }
  .card-cell {
    min-height: 72rpx;
    display: flex;
    align-items: stretch;
    border: 1px solid $border-color;
    text {
      display: flex;
      align-items: center;
    }
  }
  .cell-content {
    flex: 1;
    .content-status {
      width: 100%;
      height: 50rpx;
      line-height: 50rpx;
      text-indent: 10rpx;
      border-bottom: 1rpx solid #f2f2f2;
    }
  }
  .radio-wrapper {
    padding: 10rpx 20rpx;
    border-bottom: 1px solid $border-color;
    margin-left: -8rpx;
  }
  /deep/uni-textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .result-text {
    min-height: 100rpx;
    padding: 10rpx;
  }
  .cell-content {
    padding-left: 8rpx;
  }
  .radio-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .wrapper-box {
    width: 45%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border: 1rpx solid #000;
    color: #000;
    border-radius: 15rpx;
  }
}
</style>