HS_MZAP/src/views/toBeDone/toBeDone.vue

<template>
  <van-nav-bar title="我的待办" left-arrow @click-left="goback" />
  <van-tabs
    v-model:active="active"
    title-inactive-color="#bdbdbd"
    title-active-color="#36a7f3"
  >
    <van-tab title="待处理">
      <div class="list1">
        <van-row class="list-item" v-for="item in toBeDone.DoneList1" :key="item.dateTime">
          <van-col span="6" class="list-item-left">
            <div>
              <p style="color: #a3a3a3">{{item.dateTime}}</p>
              <p style="color: #a3a3a3">{{item.timer}}</p>
            </div>
            <p style="color: red; margin-top: 10px">待处理{{item.state}}</p>
          </van-col>
          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
            <van-row>
              <van-col span="24">
                <span>{{item.title}}</span>
              </van-col>
            </van-row>
            <van-row justify="space-between">
              <van-col span="12">{{item.address}}</van-col>
              <van-col span="8">{{item.type}}交办</van-col>
            </van-row>
          </van-col>
        </van-row> 
      </div>
    </van-tab>
    <van-tab title="已处理">
      <div class="list1">
        <van-row class="list-item" v-for="item in toBeDone.DoneList2" :key="item.dateTime">
          <van-col span="6" class="list-item-left">
            <div>
              <p style="color: #a3a3a3">{{item.dateTime}}</p>
              <p style="color: #a3a3a3">{{item.timer}}</p>
            </div>
            <p style="color: red; margin-top: 10px">已处理{{item.state}}</p>
          </van-col>
          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
            <van-row>
              <van-col span="24">
                <span>{{item.title}}</span>
              </van-col>
            </van-row>
            <van-row justify="space-between">
              <van-col span="12">{{item.address}}</van-col>
              <van-col span="8">{{item.type}}交办</van-col>
            </van-row>
          </van-col>
        </van-row>
      </div>
    </van-tab>
  </van-tabs>
</template>

<script>
import {reactive,ref} from "vue"
export default {
  beforeCreate() {
    this.dealWith()
  },
  setup() {
    const toBeDone =reactive({
      toBeDoneList:[
        {
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:1,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },
        {
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:1,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },
        {
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },
        {
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },
        {
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:1,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },
        {
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:1,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },
        {
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        }
        ,{
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:1,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },{
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },{
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:1,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },{
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        },{
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        }
        ,{
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        }
        ,{
          dateTime:'2022.12.01',//日期
          timer:'11:32',//时间
          state:0,//处理状态
          title:'东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。',//事件标题
          address:'盐城-东台-南阳镇',//举办地点
          type:'一般'//交办类型
        }
      ],
      DoneList1:[],
      DoneList2:[],
    })
    const dealWith = ()=>{
      toBeDone.toBeDoneList.forEach(item=>{
        if(item.state===1){
          toBeDone.DoneList1.push(item)
        }else{
          toBeDone.DoneList2.push(item)
        }
      })
    }
    const goback = ()=>{
      history.back();
    }
    return {
      goback,
      toBeDone,
      dealWith
    }
  }
};
</script>

<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}
.van-nav-bar {
  background-color: #36a7f3;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-badge__wrapper {
    color: #fff;
  }
}
.list1 {
  margin-top: 10px;
  .list-item {
    background-color: #fff;
    padding: 10px 0;
    margin-bottom: 5px;
    .list-item-left {
      text-align: center;
      font-size: 12px;
      border-right: 2px solid #f2f2f2;
      p {
        margin: 0;
        padding: 0;
      }
    }
    .list-item-right{
      .van-row{
        &:nth-child(1){
          padding: 0 10px;
          font-size: 16px;
          font-weight: 700;
          letter-spacing:2px
        }
        &:nth-child(2){
          margin-top: 10px;
          padding: 0 10px;
          color: #c0c0c0;
          font-size: 14px;
          .van-col{
            &:nth-child(2){
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>