aiot-app/pages/tour_tally/order/OrderTask copy.vue

<template>
  <view class="marginTop">
    <view
      v-for="(item, index) in list"
      class="kd-row"
      :key="item.id"
      @click="goDetail(item)"
      v-show="list.length !== 0"
    >
      <!-- 进度组件 -->
      <view class="kd-col">
        <text class="title">{{ item.workOrderCode }}</text>
        <text>{{ item.planName }}</text>
      </view>
      <view class="kd-col">
        <text>规则名称:{{ item.ruleName }}</text>
        <text>{{ item.equiTypeName }}</text>
      </view>
      <view class="kd-col">
        <text
          class="status"
          :class="statusList[item.status && item.status.code]"
          >{{ item.status && item.status.descp }}</text
        >
        <text class="text-danger">截止时间 {{ item.planFinishTime }}</text>
      </view>
    </view>
    <view v-show="list.length === 0" class="no_data">
      <u-empty mode="data" textSize="22"></u-empty>
    </view>
  </view>
</template>

<script>
import CellTip from '@/components/CellTip.vue'
export default {
  components: {
    CellTip
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      statusList: {
        0: 'text-primary',
        1: '',
        2: 'text-primary'
      }
    }
  },
  methods: {
    goDetail ({ workOrderCode, id }) {
      uni.navigateTo({
        url: `../detail/detail?workOrderCode=${workOrderCode}&id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.marginTop {
  border-top: 20rpx solid $page-bg;

  .kd-row {
    font-size: 28rpx;
    padding: 14rpx 12rpx 6rpx;
    border-bottom: 1rpx solid $page-bg;
    .kd-col {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 2rpx;
      color: #aaaaaa;

      .status {
        background-color: $page-bg;
        display: inline-block;
        padding: 4rpx 10rpx;
        border-radius: 18rpx;
      }
    }
    .title {
      font-weight: bold;
      color: #333333;
    }
  }

  .center {
    text-align: center;
    margin-bottom: 10rpx;
    color: #999;
  }
  .no_data {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 28rpx;
  }
}
</style>