task#10094,调度app案件审核静态页

src/views/caseList/caseDetail.vue

@@ -2,7 +2,7 @@
   <div class="wrap">
     <div class="navBar">
       <van-nav-bar
-          title="案件详情"
+          title="案件审核列表"
           left-arrow
           left-arrow-color="#FFFFFF"
           :border="false"
@@ -12,23 +12,49 @@
       />
     </div>
     <div class="tab_wrap">
-      <div v-for="(item, index) in tabArr" :key="index" :class="{'active' : activeIndex == index}"
+      <div v-for="(item, index) in tabArr" :key="index"
            @click="changeTab(index)">
-        {{ item.name }}
+        <sapn :class="{'active' : activeIndex == index , 'alpha' :true}"> {{ item.name }}</sapn>
+        <span class="numTip" style="opacity: 1 !important;">{{item.num}}</span>
       </div>
     </div>
     <div class="listWrap">
       <div class="listItem">
-        <div class="item">
+        <div class="line1">
-          <div><span>审核批次</span><span>PC1234123443243232131</span></div>
+          <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
-          <div><span>报销金额</span><span>300</span></div>
+          <div class="right">
-          <div><span>案件数量</span><span>30</span></div>
+            <img class="commonImg" src="@/assets/waitSubmit.png">
-          <div><span>提交人员</span><span>张三</span></div>
+            <div class="yelColor">待审核</div>
-          <div><span>提交时间</span><span>2023-11-22 12:12:00</span></div>
+            <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+          </div>
         </div>
+        <div><span>报销金额:</span><span>1238元</span></div>
+      </div>
+      <div class="listItem">
+        <div class="line1">
+          <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
+          <div class="right">
+            <img class="commonImg" src="@/assets/unpass.png">
+            <div class="oraColor">不通过</div>
+            <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+          </div>
+        </div>
+        <div><span>报销金额:</span><span>1238元</span></div>
+        <div><span>审核备注:</span><span style="color: #FF5D2E">缺失凭证照片</span></div>
+      </div>
+      <div class="listItem">
+        <div class="line1">
+          <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
+          <div class="right">
+            <img class="commonImg" src="@/assets/dakuan.png">
+            <div class="greColor">审核通过</div>
+            <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+          </div>
+        </div>
+        <div><span>报销金额:</span><span>1238元</span></div>
       </div>
     </div>
-  </div>
+ </div>
 
 </template>
 
@@ -36,11 +62,11 @@
 import {myMixins} from "@/utils/myMixins";
 
 export default {
-  name: "caseDetail",
+  name: "caseList",
   mixins: [myMixins],
   data(){
     return{
-      tabArr: [{name: '待审核', status: 1}, {name: '审核通过', status: 2},{name: '审核不通过', status: 3},],
+      tabArr: [{name: '待审核', status: 1,num:1}, {name: '审核通过', status: 2,num:3},{name: '审核不通过', status: 2,num:4},],
       activeIndex: 0,
       pageList:[],
       pageNum:1,
@@ -50,6 +76,7 @@ export default {
   methods:{
     async changeTab(index) {
       this.activeIndex = index
+      console.log(' this.activeIndex', this.activeIndex)
       this.pageNum = 1
       this.pageList = [];
       if(this.activeIndex === 0){
@@ -59,6 +86,18 @@ export default {
       }
       // await this.getList()
     },
+    goPageDetail(){
+      console.log("去查看详情")
+      this.$router.push({
+        name: 'caseDetail',  // 目标路由的名称
+        /* params: {
+           id: item.id,                  // 参数对象的属性
+           postfix:item.postfix,
+           index:this.activeIndex,
+           queryTime: this.time || this.queryTime
+         }*/
+      });
+    },
   }
 }
 </script>
@@ -73,51 +112,113 @@ export default {
 .navBar{
   margin-bottom: 46px;
 }
+::v-deep .van-nav-bar__content{
+  background-color: #354683 !important;
+}
 .tab_wrap {
-  @include fontWeightSize(bolder, 15px);
+  @include fontWeightSize(500, 14px);
-  display: flex;
+  @include flexColAround();
-  justify-content: space-around;
+  padding: 2px 0 10px 0;
-  padding: 5px 0 5px 0;
+  background: #354683;
-  @include colorOpa(#737373,0.7);
   div {
     padding-top: 8px;
+    color: #FFFFFF;
+  }
+  .alpha{
+    opacity: 0.5;
+  }
+  .numTip{
+    display: inline-block;
+    @include wh(15px,15px);
+    @include bgcolorOpa(#F95B45,0.9);
+    border-radius: 4px;
+    text-align: center;
+    line-height: 15px;
+    margin-left: 5px;
+    opacity: 1; /* 保持透明度为1 */
   }
   .active {
-    color: #3678FF;
     position: relative;
+    opacity: 1;
   }
   .active:after {
     content: '';
     display: block;
-    @include wh(50px,3px);
+    @include wh(18px,2px);
-    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
+    opacity: .8;
-    border-radius: 2px;
+    background: #FFFFFF;
     position: absolute;
+    border-radius: 2px;
     margin-top: 3px;
     left: 50%;
+    opacity: 1;
     transform: translateX(-50%);
   }
 }
 .listWrap{
   width: 100%;
+  height: calc(100% - 86px);
+  overflow-y: auto;
+  background-color: #F4F5F7;
   .listItem{
     width: 100%;
-    //@include wh(100%,200px);
-    padding: 12px 12px;
     box-sizing: border-box;
-    .item{
+    padding: 14px 25px 13px 29px;
-      @include wh(100%,100%);
+    background-color: #FFFFFF;
-      box-sizing: border-box;
+    margin-bottom: 10px;
-      padding: 6px 0;
+    .line1{
-      border-bottom: 1px solid #cccccc;
+      @include flexColBet();
-      border-top: 1px solid #cccccc;
+      .viewBtn{
-      div{
+        @include wh(48px,18px);
-        line-height: 22px;
+        text-align: center;
-        span:first-child{
+        line-height: 18px;
-          display: inline-block;
+        background: #354D93;
-          margin-right: 8px;
+        border-radius: 3px;
-        }
+        color: #FFFFFF;
+      }
+    }
+    div{
+      line-height: 27px;
+      span:first-child{
+        display: inline-block;
+        width: 60px;
+        opacity: 0.5;
+      }
+      .right{
+        @include flexCenter();
       }
     }
   }
 }
+.greColor{
+  color:#38AD00 ;
+  font-weight: 500;
+}
+.redColor{
+  color:#FF5D2E ;
+  font-weight: 500;
+}
+.commonImg{
+  @include widHeiMar(13px,13px,4px);
+}
+.rightArrImg{
+  @include wh(6px,9px);
+  margin-left: 6px;
+}
+.yelColor{
+  color: #E69B0B;
+  font-weight: 600;
+}
+.greColor{
+  color: #56B628;
+  font-weight: 600;
+}
+.oraColor{
+  color: #FF5D2E;
+  font-weight: 600;
+}
+.garyColor{
+  color: #9C9C9C;
+  font-weight: 600;
+}
+</style>