concrete-transportation-uniapp-20250821/pages_order/base/rejectApply.vue

<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>