product_wx/pages/subPackages/todo/index.vue

<template>
  <div class="todoIndex">
      <div class="todoItem" v-for="item in todoList" @tap.stop="toDetail(item)">
        <div class="tagTip">{{ item.tag }}</div>
         <div class="todoItemTitle">{{ item.name }}</div>
         <div class="submitTime">提交时间：2024-05-21</div>
         <div class="submitPerson">提交人：吴凯旋</div>
      </div>
  </div>
</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      todoList:[
        {name:'2024年01月26日~2024年...',tag:'企业房源预定'},
        {name:'空调坏了，不能使用',tag:'报事报修-派单'},
        {name:'上月水费不太对，怀疑水表',tag:'报事报修-处理'},
        {name:'XXXXXXX企业入库审核',tag:'企业入库审核'},
        {name:'2024年01月26日~2024年...',tag:'企业房源预定'},
        {name:'XXXXXXX',tag:'资源预约审核'},
      ]
    };
  },
  methods:{
    toDetail(item) {
      if(item.tag === '企业房源预定'){
        uni.navigateTo({
          url:'/pages/subPackages/todo/predetermineDetail'
        })
      }else if(item.tag.includes('报事报修')){
        uni.navigateTo({
          url:'/pages/subPackages/todo/repairAcceptance'
        })
      }else if(item.tag.includes('资源预约审核')){
        uni.navigateTo({
          url:'/pages/subPackages/todo/resourceReview'
        })
      }else if(item.tag.includes('企业入库审核')){
        uni.navigateTo({
          url:'/pages/subPackages/todo/inventoryReview'
        })
      }
    }
  }
}
</script>


<style lang="scss">
    .todoIndex{
      .todoItem{
        margin-top: 24rpx;
        width: 686rpx;
        height: 212rpx;
        padding: 32rpx 32rpx;
        position: relative;
        background: white;
        border-radius: 16rpx;
        box-sizing: border-box;
        margin-left: 32rpx;
        .tagTip{
          position: absolute;
          right: 0;
          top: 0;
          width: 220rpx;
          height: 56rpx;
          color: rgba(3, 101, 249, 1);
          font-size: 26rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("https://www.idea-co-sf.com/gardenProduct/image/bj02.png") no-repeat;
          background-size: 100%;
        }
        .todoItemTitle{
          width: 400rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: rgba(34, 34, 34, 1);
          font-size: 32rpx;
          line-height: 38rpx;
          font-weight: 600;
        }
        .submitTime{
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
          margin-top: 24rpx;
          line-height: 32rpx;
        }
        .submitPerson{
          color: rgba(102, 102, 102, 1);
          font-size: 28rpx;
          margin-top: 16rpx;
          line-height: 32rpx;
        }
      }
    }
</style>