349 lines
9.0 KiB
Vue
349 lines
9.0 KiB
Vue
<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="goBack"
|
|
/>
|
|
</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="monthSearch" v-show="activeIndex == 0">
|
|
<span v-for="(item,index) in monthList" :class="monthIndex === index ? 'active' : ''" :key="index" @click="clickHandle(index)">{{item}}</span>
|
|
</div>
|
|
<van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-show="!show" style="min-height: 80%;position: relative">
|
|
<!-- v-show="!show"-->
|
|
<!-- <van-list
|
|
v-model="loading"
|
|
:finished="finished"
|
|
finished-text="没有更多了"
|
|
@load="onLoad"
|
|
></van-list>-->
|
|
<div class="listWrap">
|
|
<div class="itemWrap" v-for="(item,index) in pageList" :key="index">
|
|
<div class="contentWrap" @click="goDetail">
|
|
<div class="line1">
|
|
<div><span>订单编号:</span><span>{{item.userOrderCode}}</span></div>
|
|
<div class="right">
|
|
<img class="commonImg" :src="getStatus(item.state)">
|
|
<div :class="getStatusColor(item.state)">{{item.stateStr}}</div>
|
|
<img class="rightArrImg" src="@/assets/list_rightArrow.png">
|
|
</div>
|
|
</div>
|
|
<div><span>报销金额:</span><span>{{item.reimburseAmount}}</span></div>
|
|
<div v-show="activeIndex == 2"><span>审核备注:</span><span style="color: #FF5D2E">{{item.auditRemark}}</span></div>
|
|
<div v-show="activeIndex != 0"><span>审核人员:</span><span>{{item.auditUser}}</span></div>
|
|
<div v-show="activeIndex != 0"><span>审核时间:</span><span>{{item.auditTime}}</span></div>
|
|
</div>
|
|
<img v-show="activeIndex == 0" class="checkImg" @click="toggleSelection(item)" :src="item.isSelected ? require('@/assets/baoxiao_check.png') : require('@/assets/baoxiao_uncheck.png')">
|
|
</div>
|
|
</div>
|
|
</van-pull-refresh>
|
|
<div v-show="activeIndex == 0" class="submitBtn" @click="noMultipleClicks(submitHandle)">提交</div>
|
|
<div class="bgEmptyImg" v-show="show" >
|
|
<img src="@/assets/empty.png" />
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {myMixins} from "@/utils/myMixins";
|
|
import { waitReimburseList ,submitReimburseBatch,reimbursedList,waitReimburseMonth} from '@/api/reimbursementBatch'
|
|
export default {
|
|
name: "driverCaseList",
|
|
mixins: [myMixins],
|
|
data(){
|
|
return{
|
|
tabArr: [{name: '待报销', status: 1}, {name: '已报销', status: 2},{name: '报销失败', status: 3},],
|
|
activeIndex: 0,
|
|
pageList:[],
|
|
pageNum:1,
|
|
pageSize:10,
|
|
total: 0,
|
|
isCheck:false,
|
|
driverId: '',//
|
|
submitData:[],
|
|
noClick:true,
|
|
loading:false,
|
|
isLoading: false,
|
|
finished: false,
|
|
monthList:[],
|
|
monthIndex:0
|
|
}
|
|
},
|
|
computed:{
|
|
show() {
|
|
return (this.pageList.length < 0 || this.pageList.length == 0); // 判断数组长度是否大于 0
|
|
},
|
|
},
|
|
async mounted() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
this.driverId = urlParams.get('driverId');
|
|
// this.driverId = 78948;
|
|
await this.getMonth();
|
|
await this.getList()
|
|
},
|
|
methods:{
|
|
async clickHandle(index){
|
|
this.monthIndex=index
|
|
await this.getList()
|
|
},
|
|
onRefresh() {
|
|
this.pageNum=1;
|
|
// this.getDriverList()
|
|
setTimeout(() => {
|
|
this.$toast('刷新成功');
|
|
this.isLoading = false;
|
|
}, 1000);
|
|
},
|
|
toggleSelection(item) {
|
|
item.isSelected = !item.isSelected; // 切换 isSelected 属性的值
|
|
},
|
|
async submitHandle(){
|
|
this.pageList.forEach((item)=>{
|
|
if(item.isSelected){
|
|
this.submitData.push({...item})
|
|
}
|
|
})
|
|
let res = await submitReimburseBatch({
|
|
driverId: this.driverId,
|
|
orderList: [...this.submitData]
|
|
})
|
|
if(res.code === 200){
|
|
this.$toast(res.msg)
|
|
}
|
|
await this.getList()
|
|
},
|
|
async changeTab(index) {
|
|
this.activeIndex = index
|
|
this.total = 0;
|
|
this.pageNum = 1
|
|
this.orderList = [];
|
|
await this.getList()
|
|
},
|
|
goDetail(){
|
|
|
|
},
|
|
async getList(){
|
|
let res=[]
|
|
if(this.activeIndex==0){
|
|
res=await waitReimburseList({
|
|
pageNum:this.pageNum,
|
|
pageSize:this.pageSize,
|
|
driverId:this.driverId,
|
|
type: this.activeIndex+1,
|
|
periodMonth:this.monthList[this.monthIndex]
|
|
})
|
|
}else{
|
|
res=await reimbursedList({
|
|
pageNum:this.pageNum,
|
|
pageSize:this.pageSize,
|
|
driverId:this.driverId,
|
|
type: this.activeIndex+1
|
|
})
|
|
}
|
|
this.pageList=res.data
|
|
if(this.activeIndex==0){
|
|
this.pageList.forEach(item => {
|
|
this.$set(item,'isSelected',false)
|
|
});
|
|
}
|
|
},
|
|
async getMonth(){
|
|
let res = await waitReimburseMonth({
|
|
driverId:this.driverId,
|
|
})
|
|
this.monthList=res.data
|
|
},
|
|
getStatus(i){
|
|
switch (i){
|
|
case 0://待提交
|
|
case 1://待审核
|
|
return require('@/assets/waitSubmit.png')
|
|
case 2://审核通过
|
|
case 7://已打款
|
|
return require('@/assets/dakuan.png')
|
|
case 3://审核不通过
|
|
return require('@/assets/unpass.png')
|
|
case 4://报销失败
|
|
return require('@/assets/unSubmit.png')
|
|
case 6://代打款
|
|
return require('@/assets/waitDakuan.png')
|
|
default:
|
|
return require('@/assets/waitSubmit.png')
|
|
}
|
|
},
|
|
getStatusColor(i){
|
|
switch (i){
|
|
case 0://待提交
|
|
case 1://待审核
|
|
return 'yelColor'
|
|
case 2://审核通过
|
|
case 6://代打款
|
|
case 7://已打款
|
|
return 'greColor'
|
|
case 3://审核不通过
|
|
return 'oraColor'
|
|
case 4://报销失败
|
|
return 'garyColor'
|
|
default:
|
|
return 'yelColor'
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</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: #000000 !important;
|
|
}
|
|
.tab_wrap {
|
|
@include fontWeightSize(500, 15px);
|
|
@include flexColAround();
|
|
padding: 2px 0 10px 0;
|
|
@include bgFontColor(#FFFFFF,#101011);
|
|
div {
|
|
padding-top: 8px;
|
|
@include colorOpa(#FFFFFF,0.5);
|
|
}
|
|
.active {
|
|
position: relative;
|
|
opacity: 1;
|
|
}
|
|
.active:after {
|
|
content: '';
|
|
display: block;
|
|
@include wh(18px,2px);
|
|
background: #FFFFFF;
|
|
position: absolute;
|
|
border-radius: 2px;
|
|
margin-top: 3px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
.monthSearch{
|
|
@include wh(100%,45px);
|
|
background: #F4F5F7 ;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
span{
|
|
display: inline-block;
|
|
@include wh(82px,25px);
|
|
box-shadow: 0px 1px 2px 0px rgba(236,236,236,0.5);
|
|
border-radius: 14px;
|
|
margin-right: 8px;
|
|
line-height: 25px;
|
|
text-align: center;
|
|
@include fontWeightSize(14px,600);
|
|
background: #FFFFFF;
|
|
}
|
|
.active{
|
|
background: #3687FF;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
.listWrap{
|
|
width: 100%;
|
|
height: calc(100% - 250px);
|
|
box-sizing: border-box;
|
|
padding: 10px 7px 10px 8px;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
.itemWrap{
|
|
position: relative;
|
|
width: 100%;
|
|
@include flexColBet();
|
|
box-sizing: border-box;
|
|
padding: 14px 12px 11px 34px;
|
|
box-shadow: 0px 0px 8px 0px rgba(98,107,128,0.07);
|
|
border-radius: 10px;
|
|
border: 1px solid #4C81F5;
|
|
margin-bottom: 10px;
|
|
.contentWrap{
|
|
width: 100%;
|
|
@include fontWeightSize(400,12px);
|
|
line-height: 27px;
|
|
.line1{
|
|
@include flexColBet();
|
|
}
|
|
span:first-child{
|
|
display:inline-block;
|
|
width: 60px;
|
|
opacity: .5;
|
|
}
|
|
.right{
|
|
@include flexCenter();
|
|
}
|
|
}
|
|
.checkImg{
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
@include wh(25px,27px)
|
|
}
|
|
}
|
|
}
|
|
.submitBtn{
|
|
position: absolute;
|
|
bottom: 15px;
|
|
margin:20px 0 10px 6%;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
@include bgFontColor(#FFFFFF,#333333);
|
|
@include fontWeightSize(bold,15px);
|
|
@include whLin(88%,48px);
|
|
}
|
|
.commonImg{
|
|
@include widHeiMar(13px,13px,4px);
|
|
}
|
|
.rightArrImg{
|
|
@include wh(6px,9px);
|
|
margin-left: 6px;
|
|
}
|
|
.yelColor{
|
|
color: #E69B0B;
|
|
}
|
|
.greColor{
|
|
color: #56B628;
|
|
}
|
|
.oraColor{
|
|
color: #FF5D2E;
|
|
}
|
|
.garyColor{
|
|
color: #9C9C9C;
|
|
}
|
|
.bgEmptyImg{
|
|
@include flexTwoCenter;
|
|
height: 90% ;
|
|
background-color: #FAFAFA;
|
|
img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
//::v-deep .van-pull-refresh__track{
|
|
// position: static !important;
|
|
//}
|
|
</style>
|