<template>
|
<view class="container">
|
<!-- 标题栏 -->
|
<Nav title="垫付列表" :customBack="customUrl"></Nav>
|
|
<!-- 垫付列表-可下拉滚动 -->
|
<scroll-view class="advance-scroll" scroll-y="true" style="height: calc(100vh - 80rpx);">
|
<view class="advance-item" v-for="(item, index) in advanceList" :key="index">
|
<view class="item-field">
|
<view class="field-label">调度单号</view>
|
<view class="field-value">{{ item.dispatchNo }}</view>
|
</view>
|
<view class="item-field">
|
<view class="field-label">客户</view>
|
<view class="field-value">{{ item.customerName }}</view>
|
</view>
|
<view class="item-field">
|
<view class="field-label">上传时间</view>
|
<view class="field-value">{{ item.feeCreateTime }}</view>
|
</view>
|
<view class="item-field">
|
<view class="field-label">垫付费用类型</view>
|
<view class="field-value">{{ item.statusStr }}</view>
|
</view>
|
<view class="item-field">
|
<view class="field-label">垫付费用金额</view>
|
<view class="field-value fee-amount">¥{{ item.actualFeeAmount }}</view>
|
</view>
|
<!-- 替换原有的voucher-grid部分 -->
|
<view class="item-field">
|
<view class="field-label">垫付凭证</view>
|
<view class="voucher-grid">
|
<view class="voucher-item" v-for="(img, imgIndex) in item.feeVoucherUrl" :key="imgIndex">
|
<image class="voucher-img" :src="img" mode="aspectFill"></image>
|
</view>
|
<!-- 当没有图片时显示提示 -->
|
<view v-if="!item.feeVoucherUrl || item.feeVoucherUrl.length === 0" class="no-voucher">
|
暂无凭证
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
import { getTmsFinanceDetailList } from "@/common/paymentList";
|
import { getcarType, } from "@/common/examine";
|
|
export default {
|
data() {
|
return {
|
advanceList: [
|
|
],
|
formData: {},
|
feeTypeList: [],
|
customUrl: 'pages/beReferred/index'
|
};
|
},
|
|
onLoad(options) {
|
this.formData = options;
|
if (options.id){
|
this.customUrl ='pages/examine/index?id=' + options.id+'&name='+'上传行程'+'&router='+'pages/beReferred/index'
|
}else{
|
this.customUrl ='pages/beReferred/index'
|
}
|
// 获取 URL 参数
|
|
}, created() {
|
this.getList();
|
},
|
methods: {
|
getList() {
|
|
|
getcarType('fee_type').then((res) => {
|
this.feeTypeList = res
|
if (res.length > 0) {
|
getTmsFinanceDetailList({dispatchId:this.formData.id}).then((res1) => {
|
this.advanceList = res1;
|
this.advanceList.forEach(item => {
|
// 查找匹配的dictLabel
|
const matchedDict = this.feeTypeList.find(dictItem => dictItem.dictValue == item.feeType);
|
item.statusStr = matchedDict ? matchedDict.dictLabel : '';
|
|
// 转换voucherUrl为数组
|
if (item.feeVoucherUrl) {
|
item.feeVoucherUrl = item.feeVoucherUrl.split(',').filter(url => url.trim() !== '');
|
} else {
|
item.feeVoucherUrl = [];
|
}
|
});
|
|
|
|
|
}).catch(err => {
|
console.error('获取调度信息失败:', err);
|
});
|
}
|
|
|
}).catch(err => {
|
});
|
},
|
|
|
}
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #f7f7f7;
|
}
|
|
/* 标题栏 */
|
.title-bar {
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
font-size: 32rpx;
|
font-weight: 500;
|
background-color: #fff;
|
border-bottom: 1rpx solid #ccc;
|
}
|
|
/* 垫付列表滚动区域 */
|
.advance-scroll {
|
flex: 1;
|
padding: 20rpx;
|
box-sizing: border-box;
|
}
|
|
/* 垫付项 */
|
.advance-item {
|
background-color: #fff;
|
border: 1rpx solid #eee;
|
border-radius: 12rpx;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
}
|
|
/* 字段行 */
|
.item-field {
|
display: flex;
|
margin-bottom: 20rpx;
|
align-items: flex-start;
|
}
|
|
/* 字段标签 */
|
.field-label {
|
width: 180rpx;
|
color: #666;
|
font-size: 28rpx;
|
}
|
|
/* 字段值 */
|
.field-value {
|
flex: 1;
|
color: #333;
|
font-size: 28rpx;
|
}
|
|
/* 费用金额特殊样式 */
|
.fee-amount {
|
color: #e53e3e;
|
font-weight: 500;
|
}
|
|
/* 凭证网格 */
|
.voucher-grid {
|
display: flex;
|
flex-wrap: wrap; /* 允许换行 */
|
gap: 10rpx;
|
}
|
|
/* 凭证项 */
|
.voucher-item {
|
width: 120rpx;
|
height: 120rpx;
|
position: relative;
|
border: 1rpx solid #eee;
|
border-radius: 6rpx;
|
overflow: hidden;
|
flex-shrink: 0; /* 防止压缩 */
|
}
|
|
/* 凭证图片 */
|
.voucher-img {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
}
|
/* 添加无凭证提示样式 */
|
.no-voucher {
|
color: #999;
|
font-size: 28rpx;
|
padding: 20rpx 0;
|
}
|
</style>
|
