task#10094,调度app案件审核静态页
This commit is contained in:
224
src/views/caseList/caseAuditList.vue
Normal file
224
src/views/caseList/caseAuditList.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user