<template>
|
<GlobalWindow
|
:title="title"
|
:visible.sync="visible"
|
width="900px"
|
:withFooter="false"
|
>
|
<div class="driver-detail">
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="基本信息" name="basic"></el-tab-pane>
|
<el-tab-pane label="司机业务" name="business"></el-tab-pane>
|
</el-tabs>
|
|
<div v-show="activeTab === 'basic'" class="tab-content">
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">司机信息</span>
|
<el-tag type="success" v-if="detailInfo.auditStatus">已授权手机号</el-tag>
|
<el-tag type="warning" v-else>未授权手机号</el-tag>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">司机姓名：</span>
|
<span class="value">{{ detailInfo.name || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">授权手机号：</span>
|
<span class="value">{{ detailInfo.telephone || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">身份证号：</span>
|
<span class="value">{{ detailInfo.idcard || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">婚姻情况：</span>
|
<span class="value" v-if="detailInfo.maritalStatus === 3">丧偶</span>
|
<span class="value" v-else-if="detailInfo.maritalStatus === 2">离异</span>
|
<span class="value" v-else-if="detailInfo.maritalStatus === 1">已婚</span>
|
<span class="value" v-else-if="detailInfo.maritalStatus === 0">未婚</span>
|
</div>
|
<div class="info-item">
|
<span class="label">性别：</span>
|
<span class="value">{{ detailInfo.gender === 1 ? '男' : detailInfo.gender === 2 ? '女' : '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">现居住地址：</span>
|
<span class="value">{{ detailInfo.livePlace || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">评级：</span>
|
<span class="value">{{ detailInfo.driverLevel || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">状态：</span>
|
<span class="value">{{ detailInfo.status === 0 ? '启用' : '禁用' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">车辆信息</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">车牌号：</span>
|
<span class="value">{{ detailInfo.carCode || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">车辆类型：</span>
|
<span class="value">{{ detailInfo.carTypeName || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">车辆颜色：</span>
|
<span class="value">{{ detailInfo.carColor || '-' }}</span>
|
</div>
|
<div class="info-item">
|
<span class="label">驾驶证有效期：</span>
|
<span class="value">{{ detailInfo.cardStartDate || '-' }} 至 {{ detailInfo.cardEndDate || '-' }}</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="section">
|
<div class="section-header">
|
<span class="section-title">附件材料</span>
|
</div>
|
<div class="info-grid">
|
<div class="info-item">
|
<span class="label">身份证正面：</span>
|
<el-image
|
v-if="detailInfo.idcardImg"
|
style="width: 80px; height: 80px"
|
:src="detailInfo.imgPrefix + detailInfo.idcardImg"
|
:preview-src-list="[detailInfo.imgPrefix + detailInfo.idcardImg]"
|
fit="cover"
|
></el-image>
|
<span v-else>-</span>
|
</div>
|
<div class="info-item">
|
<span class="label">身份证反面：</span>
|
<el-image
|
v-if="detailInfo.idcardImgBack"
|
style="width: 80px; height: 80px"
|
:src="detailInfo.imgPrefix + detailInfo.idcardImgBack"
|
:preview-src-list="[detailInfo.imgPrefix + detailInfo.idcardImgBack]"
|
fit="cover"
|
></el-image>
|
<span v-else>-</span>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">车辆照片：</span>
|
<span v-if="!detailInfo.carImgList">-</span>
|
<div v-else class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.carImgList"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img.fileurlFull"
|
:preview-src-list="detailInfo.carImgList.map(item => item.fileurlFull)"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">驾驶证照片：</span>
|
<span v-if="!detailInfo.licenseImgList">-</span>
|
<div v-else class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.licenseImgList"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img.fileurlFull"
|
:preview-src-list="detailInfo.licenseImgList.map(item => item.fileurlFull)"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
<div class="info-item full-width">
|
<span class="label">其它材料：</span>
|
<span v-if="!detailInfo.otherImgList">-</span>
|
<div v-else class="image-list">
|
<el-image
|
v-for="(img, index) in detailInfo.otherImgList"
|
:key="index"
|
style="width: 80px; height: 80px; margin-right: 10px"
|
:src="img.fileurlFull"
|
:preview-src-list="detailInfo.otherImgList.map(item => item.fileurlFull)"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div v-show="activeTab === 'business'" class="tab-content">
|
<el-form ref="searchForm" :model="searchForm" label-width="100px" inline>
|
<el-form-item label="订单编号" prop="orderNo">
|
<el-input v-model="searchForm.orderNo" clearable placeholder="请输入订单编号"></el-input>
|
</el-form-item>
|
<el-form-item label="物品信息" prop="goodsInfo">
|
<el-input v-model="searchForm.goodsInfo" clearable placeholder="请输入物品信息"></el-input>
|
</el-form-item>
|
<el-form-item label="创建时间" prop="createTime">
|
<el-date-picker type="daterange" v-model="searchForm.createTime" clearable value-format="yyyy-MM-dd"
|
range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange" />
|
</el-form-item>
|
<el-form-item label="订单状态" prop="orderStatus">
|
<el-select v-model="searchForm.orderStatus" clearable placeholder="请选择订单状态">
|
<el-option label="待取件" :value="1"></el-option>
|
<el-option label="配送中" :value="2"></el-option>
|
<el-option label="已完成" :value="3"></el-option>
|
<el-option label="已取消" :value="4"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="结算状态" prop="settleStatus">
|
<el-select v-model="searchForm.settleStatus" clearable placeholder="请选择结算状态">
|
<el-option label="未结算" :value="0"></el-option>
|
<el-option label="已结算" :value="1"></el-option>
|
</el-select>
|
</el-form-item>
|
<section>
|
<el-button type="primary" @click="searchBusiness">搜索</el-button>
|
<el-button @click="resetBusiness">重置</el-button>
|
</section>
|
</el-form>
|
|
<div class="statistics">
|
<span>订单数：{{ statistics.orderCount }}</span>
|
<span>订单总价：¥{{ (statistics.orderAmount / 100).toFixed(2) }}</span>
|
<span>结算总价：¥{{ (statistics.settleAmount / 100).toFixed(2) }}</span>
|
</div>
|
|
<el-table :data="businessData.list" stripe>
|
<el-table-column prop="orderNo" label="订单编号" min-width="150px"></el-table-column>
|
<el-table-column prop="goodsInfo" label="物品信息" min-width="120px"></el-table-column>
|
<el-table-column prop="type" label="类型" min-width="80px"></el-table-column>
|
<el-table-column prop="level" label="订单级别" min-width="80px"></el-table-column>
|
<el-table-column label="物品保费（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.insuranceAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="基础服务费（元）" min-width="120px">
|
<template slot-scope="{row}">¥{{ (row.serviceAmount / 100).toFixed(2) }}</template>
|
</el-table-column>
|
<el-table-column label="订单状态" min-width="100px">
|
<template slot-scope="{row}">
|
<span v-if="row.orderStatus === 1">待取件</span>
|
<span v-else-if="row.orderStatus === 2">配送中</span>
|
<span v-else-if="row.orderStatus === 3">已完成</span>
|
<span v-else-if="row.orderStatus === 4">已取消</span>
|
<span v-else>-</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="结算状态" min-width="100px">
|
<template slot-scope="{row}">
|
<span :style="{ color: row.settleStatus === 1 ? '#67c23a' : '#e6a23c' }">
|
{{ row.settleStatus === 1 ? '已结算' : '未结算' }}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
@size-change="handleBusinessSizeChange"
|
@current-change="handleBusinessPageChange"
|
:pagination="businessData.pagination"
|
></pagination>
|
</div>
|
</div>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import { getById } from '@/api/business/driver'
|
|
export default {
|
name: 'OperaDriverDetail',
|
components: { GlobalWindow, Pagination },
|
data () {
|
return {
|
title: '司机详情',
|
visible: false,
|
activeTab: 'basic',
|
detailInfo: {},
|
searchForm: {
|
orderNo: '',
|
goodsInfo: '',
|
createTime: '',
|
startTime: '',
|
endTime: '',
|
orderStatus: '',
|
settleStatus: ''
|
},
|
statistics: {
|
orderCount: 0,
|
orderAmount: 0,
|
settleAmount: 0
|
},
|
businessData: {
|
list: [],
|
pagination: { page: 1, size: 10, total: 0 }
|
}
|
}
|
},
|
methods: {
|
open (title, row) {
|
this.title = title
|
this.activeTab = 'basic'
|
getById(row.id).then(res => {
|
this.detailInfo = res
|
this.visible = true
|
}).catch(e => {
|
this.$tip.apiFailed(e)
|
})
|
},
|
searchBusiness () {
|
},
|
resetBusiness () {
|
this.searchForm = {
|
orderNo: '',
|
goodsInfo: '',
|
createTime: '',
|
startTime: '',
|
endTime: '',
|
orderStatus: '',
|
settleStatus: ''
|
}
|
this.searchBusiness()
|
},
|
handleDateChange (val) {
|
this.searchForm.startTime = val ? val[0] : ''
|
this.searchForm.endTime = val ? val[1] : ''
|
},
|
handleBusinessSizeChange () {
|
},
|
handleBusinessPageChange () {
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.driver-detail {
|
width: 100%;
|
}
|
.tab-content {
|
margin-top: 20px;
|
}
|
.section {
|
margin-bottom: 25px;
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin-bottom: 15px;
|
}
|
.section-title {
|
font-size: 16px;
|
font-weight: bold;
|
color: #303133;
|
padding-left: 10px;
|
border-left: 4px solid #2E68EC;
|
}
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(2, 1fr);
|
gap: 15px;
|
padding: 0 10px;
|
}
|
.info-item {
|
display: flex;
|
font-size: 14px;
|
}
|
.info-item.full-width {
|
grid-column: span 2;
|
}
|
.info-item .label {
|
color: #909399;
|
min-width: 110px;
|
}
|
.info-item .value {
|
color: #606266;
|
word-break: break-all;
|
}
|
.image-list {
|
display: flex;
|
flex-wrap: wrap;
|
}
|
.statistics {
|
display: flex;
|
gap: 40px;
|
padding: 15px;
|
background: #f5f7fa;
|
border-radius: 4px;
|
margin-bottom: 15px;
|
font-size: 14px;
|
color: #606266;
|
margin: 20px 0;
|
}
|
</style>
|
