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

src/router/index.js

@@ -152,6 +152,14 @@ const routes = [
             title:'司机app案件列表'
         }
     },
+    {
+        path: '/caseAuditList',
+        name: 'caseAuditList',
+        component:()=>import('@/views/caseList/caseAuditList.vue'),
+        meta: {
+            title:'案件审核列表'
+        }
+    },
     {
         path: '/caseDetail',
         name: 'caseDetail',

src/views/caseList/caseAuditList.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+          title="案件审核列表"
+          left-arrow
+          left-arrow-color="#FFFFFF"
+          :border="false"
+          :fixed="true"
+          :safe-area-inset-top="true"
+          @click-left="h5GoBack"
+      />
+    </div>
+    <div class="tab_wrap">
+      <div v-for="(item, index) in tabArr" :key="index"
+           @click="changeTab(index)">
+        <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="line1">
+          <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
+          <div class="right">
+            <img class="commonImg" src="@/assets/waitSubmit.png">
+            <div class="yelColor">待审核</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>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+
+export default {
+  name: "caseAuditList",
+  mixins: [myMixins],
+  data(){
+    return{
+      tabArr: [{name: '待审核', status: 1,num:1}, {name: '审核通过', status: 2,num:3},{name: '审核不通过', status: 2,num:4},],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+    }
+  },
+  methods:{
+    async changeTab(index) {
+      this.activeIndex = index
+      console.log(' this.activeIndex', this.activeIndex)
+      this.pageNum = 1
+      this.pageList = [];
+      if(this.activeIndex === 0){
+        // this.trainingType =1
+      }else{
+        // this.trainingType=2
+      }
+      // 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>
+
+<style scoped lang="scss">
+@import "@/styles/mixin.scss";
+@import "@/styles/common.scss";
+.wrap{
+  @include wh(100%,100%);
+  box-sizing: border-box;
+}
+.navBar{
+  margin-bottom: 46px;
+}
+::v-deep .van-nav-bar__content{
+  background-color: #354683 !important;
+}
+.tab_wrap {
+  @include fontWeightSize(500, 14px);
+  @include flexColAround();
+  padding: 2px 0 10px 0;
+  background: #354683;
+  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 {
+    position: relative;
+    opacity: 1;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(18px,2px);
+    opacity: .8;
+    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%;
+    box-sizing: border-box;
+    padding: 14px 25px 13px 29px;
+    background-color: #FFFFFF;
+    margin-bottom: 10px;
+    .line1{
+      @include flexColBet();
+      .viewBtn{
+        @include wh(48px,18px);
+        text-align: center;
+        line-height: 18px;
+        background: #354D93;
+        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>

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"
@@ -11,15 +11,8 @@
           @click-left="h5GoBack"
       />
     </div>
-    <div class="tab_wrap">
-      <div v-for="(item, index) in tabArr" :key="index"
-           @click="changeTab(index)">
-        <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="listItem" v-for="(item,index) in 3" :key="index">
         <div class="line1">
           <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
           <div class="right">
@@ -30,61 +23,77 @@
         </div>
         <div><span>报销金额:</span><span>1238元</span></div>
       </div>
-      <div class="listItem">
+     <div class="aduit">
-        <div class="line1">
+        <div class="itemWrap">
-          <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
+          <div>
-          <div class="right">
+            <span class="star">*</span>
-            <img class="commonImg" src="@/assets/unpass.png">
+            <span>二次审核结果</span>
-            <div class="oraColor">不通过</div>
+          </div>
-            <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+          <div class="isJoin">
+            <van-radio-group v-model="states" @change="isUse"  class="joinWrap">
+              <van-radio :name="1" style="margin-right: 26px" class="item">
+                通过
+                <img
+                    slot="icon"
+                    slot-scope="props"
+                    :src="props.checked ? activeIcon : inactiveIcon"
+                >
+              </van-radio>
+              <van-radio :name="0" class="item">
+                报销失败
+                <img
+                    slot="icon"
+                    slot-scope="props"
+                    :src="props.checked ? activeIcon : inactiveIcon"
+                >
+              </van-radio>
+            </van-radio-group>
           </div>
         </div>
-        <div><span>报销金额:</span><span>1238元</span></div>
+        <div class="itemWrap">
-        <div><span>审核备注:</span><span style="color: #FF5D2E">缺失凭证照片</span></div>
+         <div>
-      </div>
+           <div>
-      <div class="listItem">
+             <span class="star">*</span>
-        <div class="line1">
+             <span>不通过原因</span>
-          <div><span>审核批次:</span><span>PC1234123443243232131</span></div>
+           </div>
-          <div class="right">
+         </div>
-            <img class="commonImg" src="@/assets/dakuan.png">
+         <select id="mySelect" class="mySelect" v-model="drivingModel"  >
-            <div class="greColor">审核通过</div>
+           <option value="A1">不通过原因1</option>
-            <img class="rightArrImg"  src="@/assets/list_rightArrow.png">
+           <option value="A2">不通过原因2</option>
-          </div>
+           <option value="A3">不通过原因3</option>
+           <option value="B1">不通过原因4</option>
+         </select>
+       </div>
+        <div>
+          <div>其他原因</div>
+          <textarea v-model="supplierRemk" class="multipleTxt" placeholder="描述"></textarea>
         </div>
-        <div><span>报销金额:</span><span>1238元</span></div>
+     </div>
-      </div>
+      <common-btn class="submitBtn"></common-btn>
-    </div>
+   </div>
- </div>
+  </div>
 
 </template>
 
 <script>
 import {myMixins} from "@/utils/myMixins";
-
+import CommonBtn from "@/components/commonBtn.vue"
 export default {
-  name: "caseList",
+  name: "caseDetail",
   mixins: [myMixins],
+  components:{CommonBtn},
   data(){
     return{
-      tabArr: [{name: '待审核', status: 1,num:1}, {name: '审核通过', status: 2,num:3},{name: '审核不通过', status: 2,num:4},],
+      states:'',
-      activeIndex: 0,
+      activeIcon: require('@/assets/check.png'),
-      pageList:[],
+      inactiveIcon: require('@/assets/uncheck.png'),
-      pageNum:1,
+      supplierRemk:'',
-      pageSize:10,
+      drivingModel:''
     }
   },
   methods:{
-    async changeTab(index) {
+    isUse(e){
-      this.activeIndex = index
+      this.states=e
-      console.log(' this.activeIndex', this.activeIndex)
-      this.pageNum = 1
-      this.pageList = [];
-      if(this.activeIndex === 0){
-        // this.trainingType =1
-      }else{
-        // this.trainingType=2
-      }
-      // await this.getList()
     },
     goPageDetail(){
       console.log("去查看详情")
@@ -115,51 +124,14 @@ export default {
 ::v-deep .van-nav-bar__content{
   background-color: #354683 !important;
 }
-.tab_wrap {
-  @include fontWeightSize(500, 14px);
-  @include flexColAround();
-  padding: 2px 0 10px 0;
-  background: #354683;
-  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 {
-    position: relative;
-    opacity: 1;
-  }
-  .active:after {
-    content: '';
-    display: block;
-    @include wh(18px,2px);
-    opacity: .8;
-    background: #FFFFFF;
-    position: absolute;
-    border-radius: 2px;
-    margin-top: 3px;
-    left: 50%;
-    opacity: 1;
-    transform: translateX(-50%);
-  }
-}
 .listWrap{
   width: 100%;
-  height: calc(100% - 86px);
+  height: calc(100% - 46px);
   overflow-y: auto;
   background-color: #F4F5F7;
+  box-sizing: border-box;
+  padding: 10px 8px;
+  position: relative;
   .listItem{
     width: 100%;
     box-sizing: border-box;
@@ -189,6 +161,37 @@ export default {
       }
     }
   }
+  .aduit{
+    width: 100%;
+    background-color: #FFFFFF;
+    height: 201px;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    box-sizing: border-box;
+    padding: 17px 21px 19px 16px;
+    @include flexBetween();
+    .itemWrap{
+      display: flex;
+      justify-content: space-between;
+    }
+    .star{
+      color:  #FF0808;
+      @include fontWeightSize(bold,13px);
+    }
+    .multipleTxt{
+      @include wh(100%,87px);
+      background: #FAFAFA;
+      @include sizingPadRadius(8px,8px,3px);
+      border: 1px solid #E6E6E6;
+      backdrop-filter: blur(10px);
+      margin-top: 3px;
+    }
+  }
+  .submitBtn{
+    margin-left: 4%;
+    position: absolute;
+    bottom: 10px
+  }
 }
 .greColor{
   color:#38AD00 ;
@@ -221,4 +224,13 @@ export default {
   color: #9C9C9C;
   font-weight: 600;
 }
+.isJoin{
+  display: flex;
+  .joinWrap, .item{
+    @include flexCenter;
+  }
+  img{
+    @include widHeiMar(16px,16px,6px)
+  }
+}
 </style>

src/views/caseList/caseList.vue

@@ -65,7 +65,7 @@ export default {
     goPageDetail(){
       console.log("去查看详情")
       this.$router.push({
-        name: 'caseDetail',  // 目标路由的名称
+        name: 'caseAuditList',  // 目标路由的名称
        /* params: {
           id: item.id,                  // 参数对象的属性
           postfix:item.postfix,