详情页

src/views/toBeDone/toBeDone.vue

@@ -14,287 +14,47 @@
   >
     <van-tab title="待处理">
       <div class="list1">
-        <van-row class="list-item">
+        <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">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
+              <p style="color: #a3a3a3">{{item.dateTime}}</p>
+              <p style="color: #a3a3a3">{{item.timer}}</p>
             </div>
-            <p style="color: red; margin-top: 10px">待处理</p>
+            <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>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
+                <span>{{item.title}}</span>
               </van-col>
             </van-row>
             <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
+              <van-col span="12">{{item.address}}</van-col>
+              <van-col span="8">{{item.type}}交办</van-col>
             </van-row>
           </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">待处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">待处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">待处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">待处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">待处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">待处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
+        </van-row> 
       </div>
     </van-tab>
-    <van-tab title="已处理"> 
+    <van-tab title="已处理">
       <div class="list1">
-        <van-row class="list-item">
+        <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">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
+              <p style="color: #a3a3a3">{{item.dateTime}}</p>
+              <p style="color: #a3a3a3">{{item.timer}}</p>
             </div>
-            <p style="color: red; margin-top: 10px">已处理</p>
+            <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>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
+                <span>{{item.title}}</span>
               </van-col>
             </van-row>
             <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">已处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">已处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">已处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">已处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">已处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
-            </van-row>
-          </van-col>
-        </van-row>
-        <van-row class="list-item">
-          <van-col span="6" class="list-item-left">
-            <div>
-              <p style="color: #a3a3a3">2022.12.01</p>
-              <p style="color: #a3a3a3">11:32</p>
-            </div>
-            <p style="color: red; margin-top: 10px">已处理</p>
-          </van-col>
-          <van-col span="18" style="border-left: 1px solid #e3e3e3" class="list-item-right">
-            <van-row>
-              <van-col span="24">
-                <span>东台市南阳镇菩提寺需要于12.12日晚8点举办祈福活动，请审核。</span>
-              </van-col>
-            </van-row>
-            <van-row justify="space-between">
-              <van-col span="12">盐城-东台-南阳镇</van-col>
-              <van-col span="8">一般交办</van-col>
+              <van-col span="12">{{item.address}}</van-col>
+              <van-col span="8">{{item.type}}交办</van-col>
             </van-row>
           </van-col>
         </van-row>
@@ -304,13 +64,142 @@
 </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
     }
   }
 };

src/views/toBeDone/toBeDone_details.vue

@@ -27,9 +27,21 @@
         <p>问题附件：<span style="color:#6892ff;">活动申请书</span></p>
     </div>
     <div class="content-bottom">
-        
+        <p>
+          处理结果：
+        </p>
+        <div>
+          <form action="">
+            <textarea name="" id="" cols="40" rows="5"></textarea>
+          </form>
+        </div>
+        <div style="margin-top:10px;">
+          处理证据资料：<img class="uploadImg" src="../../assets/upload.png" alt=""><span  style="color:#58b5f5;font-size:14px;">点击上传</span>
+        </div>
     </div>
+     <van-button type="primary">确认</van-button>
   </div>
+ 
 </template>
 
 <script>
@@ -38,6 +50,7 @@ export default {
     const goback = () => {
       history.back();
     };
+    
     return {
       goback,
     };
@@ -78,8 +91,8 @@ html {
 }
 .content{
     position: fixed;
-    min-width: 90%;
-    height: 600px;
+    width: 85%;
+    height: 640px;
     top: 240px;
     left: 50%;
     padding: 20px 10px;
@@ -87,17 +100,29 @@ html {
     background-color: #fff;
     border-radius: 10px;
     .content-top{
-        padding-bottom: 40px;
+        padding-bottom: 30px;
         border-bottom: 2px solid #e7e7e7;
         p{
             margin: 0;
             padding: 0;
             margin-bottom: 10px;
             &:nth-child(2){
-                margin-bottom: 50px;
+                margin-bottom: 40px;
             }
         }
     }
+    .van-button{
+      width: 100%;
+      border-radius:20px;
+    }
+    .content-bottom{
+      margin-bottom: 30px;
+      .uploadImg{
+        width: 30px;
+        height: 30px;
+        vertical-align: middle;
+      }
+    }
 }
 
 </style>