apps/supplier-dispatch-h5
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zhouxueli
2024-01-24 15:54:11 +08:00
parent 857197eac6
commit 290b562ce7
1 changed files with 137 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/views/caseList/caseDetail.vue
View File

@ -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><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 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>
</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);
display: flex;
justify-content: space-around;
padding: 5px 0 5px 0;
@include colorOpa(#737373,0.7);
@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 {
color: #3678FF;
position: relative;
opacity: 1;
}
.active:after {
content: '';
display: block;
@include wh(50px,3px);
background: linear-gradient(270deg, #33A3FF 0%, #176AFE 100%);
border-radius: 2px;
@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%;
//@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;
}
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>