task#10094,路桥费页面布局，纯静态

src/router/index.js

@@ -135,6 +135,30 @@ const routes = [
         meta: {
             title:'文档资料'
         }
+    },
+    {
+        path: '/caseList',
+        name: 'caseList',
+        component:()=>import('@/views/caseList/caseList.vue'),
+        meta: {
+            title:'案件列表'
+        }
+    },
+    {
+        path: '/driverCaseList',
+        name: 'driverCaseList',
+        component:()=>import('@/views/driverCaseList/driverCaseList.vue'),
+        meta: {
+            title:'司机app案件列表'
+        }
+    },
+    {
+        path: '/caseDetail',
+        name: 'caseDetail',
+        component:()=>import('@/views/caseList/caseDetail.vue'),
+        meta: {
+            title:'案件详情'
+        }
     }
   ]
 

src/views/caseList/caseDetail.vue

@@ -0,0 +1,123 @@
+<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" :class="{'active' : activeIndex == index}"
+           @click="changeTab(index)">
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="listWrap">
+      <div class="listItem">
+        <div class="item">
+          <div><span>审核批次</span><span>PC1234123443243232131</span></div>
+          <div><span>报销金额</span><span>300</span></div>
+          <div><span>案件数量</span><span>30</span></div>
+          <div><span>提交人员</span><span>张三</span></div>
+          <div><span>提交时间</span><span>2023-11-22 12:12:00</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+
+export default {
+  name: "caseDetail",
+  mixins: [myMixins],
+  data(){
+    return{
+      tabArr: [{name: '待审核', status: 1}, {name: '审核通过', status: 2},{name: '审核不通过', status: 3},],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+    }
+  },
+  methods:{
+    async changeTab(index) {
+      this.activeIndex = index
+      this.pageNum = 1
+      this.pageList = [];
+      if(this.activeIndex === 0){
+        // this.trainingType =1
+      }else{
+        // this.trainingType=2
+      }
+      // await this.getList()
+    },
+  }
+}
+</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;
+}
+.tab_wrap {
+  @include fontWeightSize(bolder, 15px);
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 0 5px 0;
+  @include colorOpa(#737373,0.7);
+  div {
+    padding-top: 8px;
+  }
+  .active {
+    color: #3678FF;
+    position: relative;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(50px,3px);
+    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.listWrap{
+  width: 100%;
+  .listItem{
+    width: 100%;
+    //@include wh(100%,200px);
+    padding: 12px 12px;
+    box-sizing: border-box;
+    .item{
+      @include wh(100%,100%);
+      box-sizing: border-box;
+      padding: 6px 0;
+      border-bottom: 1px solid #cccccc;
+      border-top: 1px solid #cccccc;
+      div{
+        line-height: 22px;
+        span:first-child{
+          display: inline-block;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}

src/views/caseList/caseList.vue

@@ -0,0 +1,146 @@
+<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" :class="{'active' : activeIndex == index}"
+           @click="changeTab(index)">
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="listWrap">
+      <div class="listItem" @click="goPageDetail">
+        <div class="item">
+          <div><span>审核批次</span><span>PC1234123443243232131</span></div>
+          <div><span>报销金额</span><span>300</span></div>
+          <div><span>案件数量</span><span>30</span></div>
+          <div><span>提交人员</span><span>张三</span></div>
+          <div><span>提交时间</span><span>2023-11-22 12:12:00</span></div>
+          <img  src="@/assets/arrow_rht.png">
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+
+export default {
+  name: "caseList",
+  mixins: [myMixins],
+  data(){
+    return{
+      tabArr: [{name: '待审核', status: 1}, {name: '已审核', status: 2},],
+      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;
+}
+.tab_wrap {
+  @include fontWeightSize(bolder, 15px);
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 0 5px 0;
+  @include colorOpa(#737373,0.7);
+  div {
+    padding-top: 8px;
+  }
+  .active {
+    color: #3678FF;
+    position: relative;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(50px,3px);
+    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.listWrap{
+  width: 100%;
+  .listItem{
+    width: 100%;
+    //@include wh(100%,200px);
+    padding: 12px 12px;
+    box-sizing: border-box;
+    .item{
+      @include wh(100%,100%);
+      box-sizing: border-box;
+      padding: 6px 0;
+      border-bottom: 1px solid #cccccc;
+      border-top: 1px solid #cccccc;
+      position: relative;
+      div{
+        line-height: 22px;
+        span:first-child{
+          display: inline-block;
+          margin-right: 8px;
+        }
+      }
+      img{
+        width: 23px;
+        height: 31px;
+        position: absolute;
+        top: 34%;
+        right: 0
+      }
+    }
+  }
+}
+</style>

src/views/driverCaseList/driverCaseList.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="wrap">
+    <div class="navBar">
+      <van-nav-bar
+          title="司机app报销"
+          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" :class="{'active' : activeIndex == index}"
+           @click="changeTab(index)">
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="listWrap">
+      <div class="listItem">
+        <div class="item">
+          <div><span>审核批次</span><span>PC1234123443243232131</span></div>
+          <div><span>报销金额</span><span>300</span></div>
+          <div><span>案件数量</span><span>30</span></div>
+          <div><span>提交人员</span><span>张三</span></div>
+          <div><span>提交时间</span><span>2023-11-22 12:12:00</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import {myMixins} from "@/utils/myMixins";
+
+export default {
+  name: "caseList",
+  mixins: [myMixins],
+  data(){
+    return{
+      tabArr: [{name: '待提交', status: 1}, {name: '已提交', status: 2},{name: '不可提交', status: 3},],
+      activeIndex: 0,
+      pageList:[],
+      pageNum:1,
+      pageSize:10,
+    }
+  },
+  methods:{
+    async changeTab(index) {
+      this.activeIndex = index
+      this.pageNum = 1
+      this.pageList = [];
+      if(this.activeIndex === 0){
+        // this.trainingType =1
+      }else{
+        // this.trainingType=2
+      }
+      // await this.getList()
+    },
+  }
+}
+</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;
+}
+.tab_wrap {
+  @include fontWeightSize(bolder, 15px);
+  display: flex;
+  justify-content: space-around;
+  padding: 5px 0 5px 0;
+  @include colorOpa(#737373,0.7);
+  div {
+    padding-top: 8px;
+  }
+  .active {
+    color: #3678FF;
+    position: relative;
+  }
+  .active:after {
+    content: '';
+    display: block;
+    @include wh(50px,3px);
+    background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
+    border-radius: 2px;
+    position: absolute;
+    margin-top: 3px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+.listWrap{
+  width: 100%;
+  .listItem{
+    width: 100%;
+    //@include wh(100%,200px);
+    padding: 12px 12px;
+    box-sizing: border-box;
+    .item{
+      @include wh(100%,100%);
+      box-sizing: border-box;
+      padding: 6px 0;
+      border-bottom: 1px solid #cccccc;
+      border-top: 1px solid #cccccc;
+      div{
+        line-height: 22px;
+        span:first-child{
+          display: inline-block;
+          margin-right: 8px;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/index/driverAdd.vue

@@ -190,4 +190,4 @@ export default {
   position: fixed;
   bottom: 30px;
 }
-</style>
+</style>