169 lines
3.8 KiB
Vue
169 lines
3.8 KiB
Vue
<template>
|
|
<view class="list-container">
|
|
<!-- 救援司机列表 -->
|
|
<view v-if="type === 'driver'" class="table-wrapper">
|
|
<view class="table-header">
|
|
<text class="col-driver">司机</text>
|
|
<text class="col-num">救援数量(次)</text>
|
|
<text class="col-distance">公里数(km)</text>
|
|
<text class="col-money">金额(元)</text>
|
|
</view>
|
|
<view class="table-row" v-for="(item, index) in list" :key="index">
|
|
<view class="col-driver">
|
|
<!-- <image :src="item.avatar" class="avatar" /> -->
|
|
<text>{{ item.driverName }}</text>
|
|
</view>
|
|
<text class="col-num">{{ item.rescueNum }}</text>
|
|
<text class="col-distance">{{ item.mileage > 0 ? item.mileage : 0 }}</text>
|
|
<text class="col-money">{{ item.money }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 救援车辆列表 -->
|
|
<view v-if="type === 'vehicle'" class="table-wrapper">
|
|
<view class="table-header">
|
|
<text class="col-driver">车牌号</text>
|
|
<text class="col-num">救援数量(次)</text>
|
|
<text class="col-distance">公里数(km)</text>
|
|
<text class="col-money">金额(元)</text>
|
|
</view>
|
|
<view class="table-row" v-for="(item, index) in list" :key="index">
|
|
<view class="col-driver">
|
|
<!-- <image :src="item.avatar" class="avatar" /> -->
|
|
<text>{{ item.driverCarNum }}</text>
|
|
</view>
|
|
<text class="col-num">{{ item.rescueNum }}</text>
|
|
<text class="col-distance">{{ item.mileage > 0 ? item.mileage : 0 }}</text>
|
|
<text class="col-money">{{ item.money }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 调度列表 -->
|
|
<view v-if="type === 'dispatch'" class="table-wrapper">
|
|
<view class="table-header">
|
|
<text class="disp-name">调度</text>
|
|
<text class="disp-money">创建工单</text>
|
|
<text class="disp-num">出发现场</text>
|
|
<text class="disp-distance">转维修</text>
|
|
<text class="disp-money">完成</text>
|
|
</view>
|
|
<view class="table-row" v-for="(item, index) in list" :key="index">
|
|
<view class="disp-name">
|
|
<!-- <image :src="item.avatar" class="avatar" /> -->
|
|
<text>{{ item.driverName }}</text>
|
|
</view>
|
|
<text class="disp-money">{{ item.createRescueNum }}</text>
|
|
<text class="disp-num">{{ item.toSceneNum }}</text>
|
|
<text class="disp-distance">{{ item.toRepairNum }}</text>
|
|
<text class="disp-money">{{ item.confirmCompleteNum }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "CategoryList",
|
|
props: {
|
|
type: {
|
|
type: String,
|
|
default: "driver",
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.list-container {
|
|
margin: 10px;
|
|
}
|
|
|
|
/* 通用表格样式 */
|
|
.table-wrapper {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20rpx 0;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
}
|
|
|
|
.table-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 50rpx 0;
|
|
border-bottom: 2rpx solid #f0f0f0;
|
|
}
|
|
|
|
.table-header {
|
|
background: #f0f3f8;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.table-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 列宽分配 */
|
|
/* .col-driver {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
} */
|
|
|
|
.col-driver,
|
|
.col-num,
|
|
.col-distance,
|
|
.col-money {
|
|
width: 90px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 其他类型列表样式 */
|
|
.vehicle-list,
|
|
.dispatch-list {
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* .disp-name {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 10px;
|
|
} */
|
|
|
|
.disp-name,
|
|
.disp-num,
|
|
.disp-distance,
|
|
.disp-money {
|
|
width: 70px;
|
|
text-align: center;
|
|
flex-shrink: 0;
|
|
}
|
|
</style> |