147 lines
3.4 KiB
Vue
147 lines
3.4 KiB
Vue
<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>
|