AnYang_UI/anyangWebAPP/pages/myTask/myTask.vue

<template>
  <view>
   
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
        :duration="duration">
        <swiper-item v-for="item in bannnerData" :key="item.id">
            <image :src="item.imgPath" mode=""></image>
        </swiper-item>       
      </swiper>
    </view>
    
    <view class="orderManage">
      
      <view class="orderTit">
        <image src="../../static/orderManage.png"></image>
        <text>工单进度</text>
      </view>
      
      <view class="orderCon" >
        <view class="orderList" v-for="item in orderListData" :key="item.id" @click="workOrderListClick(item)">
          <image :style="{ background:item.imageBg}" :src="item.imagePath" mode=""></image>
          <text>{{item.text}}</text>
        </view>
      </view>
      
      <view class="orderTit" @click="changeStore" v-if="noticState">
        <image style="background:#ff9600;" src="../../static/icon_noticefi.png"></image>
        <text>公告通知</text>
      </view>
      
      <view class="notification">
        
        <view class="notifiList" v-for="item in noticListData" :key="item.id">
          <image :style="{background:item.imageBg}" :src="item.imagePath" mode=""></image>
          <view class="">
            <text>{{item.textTit}}</text>
            <text>{{item.textCon}}</text>
          </view>
        </view>
                
      </view>
      
    </view>
    
    
  </view>
</template>
<script>
  import {mapGetters} from 'vuex'
	
  export default {
    data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        noticState:false,
        duration: 500,
        bannnerData:[
          
        ],
        orderListData:[],
        noticListData:[]
      
      }
    },
    computed: {
      ...mapGetters([        
        'State'
      ])
    },
    onLoad() {
      //banner数据
      this.bannnerData = this.$mConstDataConfig.bannnerData  
      //工单列表数据  auditorList
      this.orderListData = this.$mConstDataConfig.roleListData.acceptList  
      // 公告数据
      //this.noticListData = this.$mConstDataConfig.noticListData
      
    },
    methods: {
		  changeStore() {
            this.$mStore.dispatch('STATE', 3)
            console.log(this.State)
        },
      workOrderListClick(item) {
        console.log(123, item)
        uni.navigateTo({
          url: item.navigateToUrl
        })
      }
    }
  }
</script>

<style lang="scss">

  .uni-margin-wrap {
    width: 690rpx;
    width: 100%;
    
  }
  .swiper {
    height: 225px;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .orderManage{
    
    .orderTit{
      margin-top: 15rpx;
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background: #FFFFFF;
      display: flex;
      border-bottom: 1rpx solid #eeeeee ;
      text{
        font-size: 32rpx;
      }
      image{
        width: 24rpx;
        height: 24rpx;
        padding: 8rpx;
        border-radius: 12px;
        background: #1972c2;
        margin: 20rpx 10rpx 20rpx 26rpx;
      }
    }
    
    .orderCon{
      background: #FFFFFF;
      display: flex;
      flex-wrap: wrap;
      .orderList{
        width: 186rpx;
        height: 206rpx;
        text-align: center;
        border-right: 2rpx solid #eeeeee;
        border-bottom: 2rpx solid #eeeeee;
        image{
          width: 40rpx;
          height: 40rpx;
          margin: 0 auto;
          display: block;
          border-radius: 35rpx;
          padding: 15rpx;
          margin-top: 45rpx;
        }
        text{
          font-size: 24rpx;
          line-height: 60rpx;
        }
      }
      .orderList:nth-child(4n+4){
        border-right: none;
      }
      .orderList:last-child{
        border-right: none;
      }
    }
    
    .notification{
      background: #FFFFFF;
      margin-bottom: 100rpx;
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1rpx solid #eeeeee ;
      .notifiList{
        width: 375rpx;
        height: 172rpx;
        padding: 46rpx 30rpx 46rpx 30rpx;
        text-align: left;
        border-right: 1rpx solid #eeeeee;
        border-bottom: 1rpx solid #eeeeee;
        box-sizing: border-box;
        display: flex;
        image{
          width: 48rpx;
          height: 48rpx;
          box-sizing:border-box;
          border-radius: 24rpx;
          padding: 10rpx;
          margin: 19rpx;
        }
        text{
          font-size: 24rpx;
          line-height: 30rpx;
        }
      }
      .notifiList:nth-child(2n+2){
        border-right: none;
      }
      
    }
    
  }
  
  
</style>