laboratory_maintenance_app/pages/home/components/swiperRepair.vue

<template>
  <view v-if="list.length > 0">
    <view class="work-title">维修提报</view>
    <view class="notice_bg">
      <view class="line"></view>
      <swiper autoplay="true" display-multiple-items="1" vertical="true" cixrcular interval="7000" class="bar-swiper">
        <swiper-item v-for="(item, index) in list" :key="index" class="swiper-item" @click="goPage(item)">
          <view class="time">单号:{{ item.requirementCode }}</view>
          <view class="name">故障描述:{{ item.faultDescribe }}</view>
          <view class="type">   <u-tag :text="statusName(item.status)" type="success" mode="dark" shape="circle"
            :bg-color="tagColor[statusName(item.status)]" /></view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>
<script>
import { tabList, tabListColor } from '@/config/status.js'
export default {
  data() {
    return {
      list: [

      ],
      tabList: [],//tab状态
    };
  },
  computed: {
    dataTypes() {
      this.tabList = tabList[this.$store.state.dataType]
      return this.$store.state.dataType
    },
    tagColor() {
      return tabListColor
    },
  },

  mounted() {
    this.workList()
  },
  methods: {
    // 点击通告栏
    click(id) {
      // console.log(id, "======>id");
    },
    workList() {
      this.loadingState = "loading";
      let query = {
        current: 1,				          //页数
        size: 20,				            //条数
        dataType: this.dataTypes,//数据权限
        statusSearch: '201,401,402,301,403,202,104',//状态5报错
      }
      this.$u.api.getWorkOrderRecords(query).then(res => {
        if (res.code == 200) {
          this.list = res.data.records

        }
      }).catch(err => {

      })
    },
    statusName(item) {
      if (this.tabList.length > 0) {
        let newArr = this.tabList.filter(i => {

          let sta = i.key.split(',')

          return sta.includes(item + '')
        })
        if (this.dataTypes == 2 || this.dataTypes == 3 || this.dataTypes == 4) {
          if (item == 100) {
            return '维修驳回'
          }
          if (item == 101) {
            return '主管驳回'
          }
          if (item == 102) {
            return '客户驳回'
          }
        }
        return newArr.length <= 0 ? '' : newArr[0].name


      }

    },
    goPage(item){
      uni.navigateTo({
          url: '/pages/submission/records?type=submission&requirementCode='+item.requirementCode,
        });
    }

  },
};
</script>
<style scoped lang="scss">
.work-title {
  color: rgba(16, 16, 16, 1);
  font-size: 32rpx;
  padding: 0 0 32rpx 36rpx;
}

.notice_bg {
  margin: 0 40rpx 32rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 16rpx 20rpx;
  display: flex;
  align-items: center;
  position: relative;

  .icon {
    width: 74rpx;
    height: 72rpx;
  }

  .bar-swiper {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(34, 34, 34, 0.5);
    height: 140rpx;
    display: flex;
    align-items: center;
    flex: 1;
    margin-left: 12rpx;
  }

  .swiper-item {
    overflow: hidden;
  }

  // 内容样式
  .title {
    font-size: 32rpx;
    color: rgba(16, 16, 16, 1);
    text-align: left;
    margin-top: 22rpx;
    line-height: 38rpx;
  }

  .time {
    margin-top: 20rpx;
    margin-bottom: 28rpx;
  }

  .time,
  .name {
    font-size: 26rpx;
    color: rgba(108, 108, 108, 1);
    line-height: 38rpx;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }

  .status {
    font-size: 26rpx;
    line-height: 38rpx;
    margin-top: 20rpx;

    .status-name {
      color: rgba(58, 98, 215, 1);
      padding-right: 10rpx;
    }
  }

  .type {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    color: rgba(58, 98, 215, 1);
    font-size: 26rpx;
  }
}
</style>