You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
398 lines
8.8 KiB
398 lines
8.8 KiB
<template>
|
|
<view class="content">
|
|
<navbar title="拒单申请管理" leftClick @leftClick="$utils.navigateBack" />
|
|
<view class="header">
|
|
<view class="title">拒单申请管理</view>
|
|
<view class="subtitle">处理司机和企业的拒单申请</view>
|
|
</view>
|
|
|
|
<!-- 筛选栏 -->
|
|
<view class="filter-bar">
|
|
<view class="filter-item" :class="{active: currentStatus === 'all'}" @click="setStatus('all')">
|
|
全部
|
|
</view>
|
|
<view class="filter-item" :class="{active: currentStatus === 'pending'}" @click="setStatus('pending')">
|
|
待处理
|
|
</view>
|
|
<view class="filter-item" :class="{active: currentStatus === 'approved'}" @click="setStatus('approved')">
|
|
已通过
|
|
</view>
|
|
<view class="filter-item" :class="{active: currentStatus === 'rejected'}" @click="setStatus('rejected')">
|
|
已拒绝
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 申请列表 -->
|
|
<view class="apply-list">
|
|
<view v-if="filteredList.length === 0" class="empty-state">
|
|
<view class="empty-icon">📋</view>
|
|
<view class="empty-text">暂无拒单申请</view>
|
|
</view>
|
|
|
|
<view v-for="(item, index) in filteredList" :key="index" class="apply-item">
|
|
<view class="item-header">
|
|
<view class="applicant-info">
|
|
<view class="name">{{ item.applicantName }}</view>
|
|
<view class="role">{{ item.applicantRole }}</view>
|
|
</view>
|
|
<view class="apply-time">{{ item.applyTime }}</view>
|
|
</view>
|
|
|
|
<view class="order-info">
|
|
<view class="order-title">{{ item.orderTitle }}</view>
|
|
<view class="order-details">
|
|
<text>订单编号：{{ item.orderNo }}</text>
|
|
<text>工作地点：{{ item.workLocation }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="reject-reason">
|
|
<view class="reason-label">拒单原因：</view>
|
|
<view class="reason-content">{{ item.rejectReason }}</view>
|
|
</view>
|
|
|
|
<view class="item-footer">
|
|
<view class="status-badge" :class="item.status">
|
|
{{ getStatusText(item.status) }}
|
|
</view>
|
|
|
|
<view v-if="item.status === 'pending'" class="action-buttons">
|
|
<view class="btn approve" @click="approveApply(item)">通过</view>
|
|
<view class="btn reject" @click="rejectApply(item)">拒绝</view>
|
|
</view>
|
|
|
|
<view v-else class="result-info">
|
|
<text v-if="item.status === 'approved'">处理人：{{ item.handler }}</text>
|
|
<text v-if="item.status === 'rejected'">拒绝原因：{{ item.handleReason }}</text>
|
|
<text>处理时间：{{ item.handleTime }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
|
|
export default {
|
|
name: 'RejectApply',
|
|
components: {
|
|
navbar
|
|
},
|
|
data() {
|
|
return {
|
|
currentStatus: 'all',
|
|
applyList: [
|
|
{
|
|
id: 1,
|
|
applicantName: '张师傅',
|
|
applicantRole: '泵车司机',
|
|
applyTime: '2024-01-15 14:30',
|
|
orderTitle: '雨花区建设项目混凝土运输',
|
|
orderNo: 'ORD202401150001',
|
|
workLocation: '长沙市雨花区某某路123号',
|
|
rejectReason: '车辆故障，无法按时到达现场',
|
|
status: 'pending'
|
|
},
|
|
{
|
|
id: 2,
|
|
applicantName: '李总',
|
|
applicantRole: '企业负责人',
|
|
applyTime: '2024-01-14 16:20',
|
|
orderTitle: '岳麓区商业中心项目',
|
|
orderNo: 'ORD202401140002',
|
|
workLocation: '长沙市岳麓区某某大道456号',
|
|
rejectReason: '天气原因，现场无法施工',
|
|
status: 'approved',
|
|
handler: '区域管理员王某',
|
|
handleTime: '2024-01-14 17:00'
|
|
},
|
|
{
|
|
id: 3,
|
|
applicantName: '王师傅',
|
|
applicantRole: '搅拌车司机',
|
|
applyTime: '2024-01-13 10:15',
|
|
orderTitle: '开福区住宅项目',
|
|
orderNo: 'ORD202401130003',
|
|
workLocation: '长沙市开福区某某街789号',
|
|
rejectReason: '个人原因，无法完成订单',
|
|
status: 'rejected',
|
|
handler: '区域管理员王某',
|
|
handleReason: '理由不充分',
|
|
handleTime: '2024-01-13 11:30'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
filteredList() {
|
|
if (this.currentStatus === 'all') {
|
|
return this.applyList;
|
|
}
|
|
return this.applyList.filter(item => item.status === this.currentStatus);
|
|
}
|
|
},
|
|
onLoad() {
|
|
uni.setNavigationBarTitle({
|
|
title: '拒单申请管理'
|
|
});
|
|
},
|
|
methods: {
|
|
setStatus(status) {
|
|
this.currentStatus = status;
|
|
},
|
|
getStatusText(status) {
|
|
switch(status) {
|
|
case 'pending': return '待处理';
|
|
case 'approved': return '已通过';
|
|
case 'rejected': return '已拒绝';
|
|
default: return '未知状态';
|
|
}
|
|
},
|
|
approveApply(item) {
|
|
uni.showModal({
|
|
title: '确认通过',
|
|
content: `确定通过${item.applicantName}的拒单申请吗？`,
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
item.status = 'approved';
|
|
item.handler = '区域管理员';
|
|
item.handleTime = new Date().toLocaleString();
|
|
uni.showToast({
|
|
title: '已通过申请',
|
|
icon: 'success'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
rejectApply(item) {
|
|
uni.showModal({
|
|
title: '拒绝申请',
|
|
content: '请输入拒绝原因',
|
|
editable: true,
|
|
placeholderText: '请输入拒绝原因',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
item.status = 'rejected';
|
|
item.handler = '区域管理员';
|
|
item.handleReason = res.content || '无具体原因';
|
|
item.handleTime = new Date().toLocaleString();
|
|
uni.showToast({
|
|
title: '已拒绝申请',
|
|
icon: 'success'
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content {
|
|
padding: 20rpx;
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.header {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
border-radius: 10rpx;
|
|
margin-bottom: 20rpx;
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
gap: 20rpx;
|
|
|
|
.filter-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 15rpx 0;
|
|
border-radius: 25rpx;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
background-color: #f8f8f8;
|
|
transition: all 0.3s;
|
|
|
|
&.active {
|
|
color: #007AFF;
|
|
background-color: #e6f3ff;
|
|
border: 1rpx solid #007AFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.apply-list {
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 100rpx 0;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.apply-item {
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
|
|
|
.item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
.applicant-info {
|
|
.name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
|
|
.role {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-top: 5rpx;
|
|
}
|
|
}
|
|
|
|
.apply-time {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.order-info {
|
|
margin-bottom: 20rpx;
|
|
padding: 20rpx;
|
|
background-color: #f8f8f8;
|
|
border-radius: 8rpx;
|
|
|
|
.order-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.order-details {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
|
|
text {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
.reject-reason {
|
|
margin-bottom: 20rpx;
|
|
|
|
.reason-label {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.reason-content {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
padding: 15rpx;
|
|
background-color: #fff3cd;
|
|
border-radius: 8rpx;
|
|
border-left: 4rpx solid #ffc107;
|
|
}
|
|
}
|
|
|
|
.item-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.status-badge {
|
|
padding: 8rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
|
|
&.pending {
|
|
background-color: #ff9500;
|
|
}
|
|
|
|
&.approved {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.rejected {
|
|
background-color: #ff3b30;
|
|
}
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 15rpx;
|
|
|
|
.btn {
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
|
|
&.approve {
|
|
background-color: #34c759;
|
|
}
|
|
|
|
&.reject {
|
|
background-color: #ff3b30;
|
|
}
|
|
}
|
|
}
|
|
|
|
.result-info {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 1.4;
|
|
|
|
text {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|