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>
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="wrap">
|
||||
<div class="navBar">
|
||||
<van-nav-bar
|
||||
title="案件审核列表"
|
||||
title="案件详情"
|
||||
left-arrow
|
||||
left-arrow-color="#FFFFFF"
|
||||
:border="false"
|
||||
@ -11,15 +11,8 @@
|
||||
@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="listItem" v-for="(item,index) in 3" :key="index">
|
||||
<div class="line1">
|
||||
<div><span>审核批次:</span><span>PC1234123443243232131</span></div>
|
||||
<div class="right">
|
||||
@ -30,61 +23,77 @@
|
||||
</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 class="aduit">
|
||||
<div class="itemWrap">
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>二次审核结果</span>
|
||||
</div>
|
||||
<div class="isJoin">
|
||||
<van-radio-group v-model="states" @change="isUse" class="joinWrap">
|
||||
<van-radio :name="1" style="margin-right: 26px" class="item">
|
||||
通过
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
<van-radio :name="0" class="item">
|
||||
报销失败
|
||||
<img
|
||||
slot="icon"
|
||||
slot-scope="props"
|
||||
:src="props.checked ? activeIcon : inactiveIcon"
|
||||
>
|
||||
</van-radio>
|
||||
</van-radio-group>
|
||||
</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 class="itemWrap">
|
||||
<div>
|
||||
<div>
|
||||
<span class="star">*</span>
|
||||
<span>不通过原因</span>
|
||||
</div>
|
||||
</div>
|
||||
<select id="mySelect" class="mySelect" v-model="drivingModel" >
|
||||
<option value="A1">不通过原因1</option>
|
||||
<option value="A2">不通过原因2</option>
|
||||
<option value="A3">不通过原因3</option>
|
||||
<option value="B1">不通过原因4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<div>其他原因</div>
|
||||
<textarea v-model="supplierRemk" class="multipleTxt" placeholder="描述"></textarea>
|
||||
</div>
|
||||
<div><span>报销金额:</span><span>1238元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<common-btn class="submitBtn"></common-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {myMixins} from "@/utils/myMixins";
|
||||
|
||||
import CommonBtn from "@/components/commonBtn.vue"
|
||||
export default {
|
||||
name: "caseList",
|
||||
name: "caseDetail",
|
||||
mixins: [myMixins],
|
||||
components:{CommonBtn},
|
||||
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,
|
||||
states:'',
|
||||
activeIcon: require('@/assets/check.png'),
|
||||
inactiveIcon: require('@/assets/uncheck.png'),
|
||||
supplierRemk:'',
|
||||
drivingModel:''
|
||||
}
|
||||
},
|
||||
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()
|
||||
isUse(e){
|
||||
this.states=e
|
||||
},
|
||||
goPageDetail(){
|
||||
console.log("去查看详情")
|
||||
@ -115,51 +124,14 @@ export default {
|
||||
::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);
|
||||
height: calc(100% - 46px);
|
||||
overflow-y: auto;
|
||||
background-color: #F4F5F7;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 8px;
|
||||
position: relative;
|
||||
.listItem{
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
@ -189,6 +161,37 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.aduit{
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
height: 201px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
box-sizing: border-box;
|
||||
padding: 17px 21px 19px 16px;
|
||||
@include flexBetween();
|
||||
.itemWrap{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.star{
|
||||
color: #FF0808;
|
||||
@include fontWeightSize(bold,13px);
|
||||
}
|
||||
.multipleTxt{
|
||||
@include wh(100%,87px);
|
||||
background: #FAFAFA;
|
||||
@include sizingPadRadius(8px,8px,3px);
|
||||
border: 1px solid #E6E6E6;
|
||||
backdrop-filter: blur(10px);
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
.submitBtn{
|
||||
margin-left: 4%;
|
||||
position: absolute;
|
||||
bottom: 10px
|
||||
}
|
||||
}
|
||||
.greColor{
|
||||
color:#38AD00 ;
|
||||
@ -221,4 +224,13 @@ export default {
|
||||
color: #9C9C9C;
|
||||
font-weight: 600;
|
||||
}
|
||||
.isJoin{
|
||||
display: flex;
|
||||
.joinWrap, .item{
|
||||
@include flexCenter;
|
||||
}
|
||||
img{
|
||||
@include widHeiMar(16px,16px,6px)
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
goPageDetail(){
|
||||
console.log("去查看详情")
|
||||
this.$router.push({
|
||||
name: 'caseDetail', // 目标路由的名称
|
||||
name: 'caseAuditList', // 目标路由的名称
|
||||
/* params: {
|
||||
id: item.id, // 参数对象的属性
|
||||
postfix:item.postfix,
|
||||
|
||||
Reference in New Issue
Block a user