tqApp-webView/pagesBase/driverManage/details.vue

<template>
	<view class="page-container">
		
		<view class="page-body">
			<view class="box-container">
				<view class="box-head">
					{{renderItem(item,'deptName','--')}} - {{renderItem(item,'applyName','--')}}
				</view>
				<view class="box-body">
					<u-row>
						<u-col :span="12">
							
							<view class="item">
								<view class="label">申请时间：</view>
								<view class="value">{{renderItem(item,'applyTime','--')}}</view>
							</view>
							<view class="item">
								<view class="label">申请单号：</view>
								<view class="value">{{renderItem(item,'id','--')}}</view>
							</view>
							<view class="item">
								<view class="label">联系电话：</view>
								<view class="value">{{renderItem(item,'applyTel','--')}}</view>
							</view>
							<view class="item">
								<view class="label">用车人数：</view>
								<view class="value">{{renderItem(item,'totalNum','--')}}</view>
							</view>
							<view class="item">
								<view class="label">用车事由：</view>
								<view class="value">{{renderItem(item,'reason','--')}}</view>
							</view>
							<view class="item">
								<view class="label">用车范围：</view>
								<view class="value">{{renderItem(item,'applyTypeName','--')}}</view>
							</view>
							<view class="item">
								<view class="label">计划用车时间：</view>
								<view class="value">{{renderItem(item,'planStartTime','--')}}~{{renderItem(item,'planEndTime','--')}}</view>
							</view>
							<view class="item">
								<view class="label">计划出发地：</view>
								<view class="value">{{renderItem(item,'startAddr','--')}}</view>
							</view>
							<view class="item">
								<view class="label">计划目的地：</view>
								<view class="value">{{renderItem(item,'endAddr','--')}}</view>
							</view>
							
							
						</u-col>
						
					</u-row>
				</view>
				
			</view>
		
			<view class="box-container">
				
				<view class="box-body">
					<u-row>
						<u-col :span="12">

							<view class="item">
								<view class="label">审核状态：</view>
								<view class="value">{{renderItem(item,'revStsName','--')}}</view>
							</view>
							<view class="item">
								<view class="label">安排车辆：</view>
								<view class="value">{{renderItem(item,'plate','--')}}</view>
							</view>
							<view class="item">
								<view class="label">安排司机：</view>
								<view class="value">{{renderItem(item,'driverName','--')}}</view>
							</view>
							<view class="item">
								<view class="label">任务状态：</view>
								<view class="value">{{renderItem(item,'exStsName','--')}}</view>
							</view>
							<view class="item">
								<view class="label">实际出发时间：</view>
								<view class="value">{{renderItem(item,'startTime','--')}}</view>
							</view>
							<view class="item">
								<view class="label">实际结束时间：</view>
								<view class="value">{{renderItem(item,'endTime','--')}}</view>
							</view>
							<view class="item">
								<view class="label">实际出发地：</view>
								<view class="value">{{renderItem(item,'realStartAddr','--')}}</view>
							</view>
							<view class="item">
								<view class="label">实际目的地：</view>
								<view class="value">{{renderItem(item,'realEndAddr','--')}}</view>
							</view>
							<view class="item">
								<view class="label">行驶里程（公里）：</view>
								<view class="value">{{renderItem(item,'realMile','--')}}</view>
							</view>
						</u-col>
					</u-row>
				</view>
				
			</view>
		</view>
		
		<view class="page-footer">
			<u-row style="justify-content: flex-end;">
				<u-col :span="12" v-if="item.revSts==1">
					<u-button type="error" :custom-style="{
							width: '100%',
							
						  }"  @click="handleCancel(item)">取消申请
					</u-button>
				</u-col>	
				<u-col :span="12" v-if="item.revSts==3 || item.revSts==4">
					<u-button type="primary" :custom-style="{
							width: '100%',
						  }"  @click="handleRe(item)">重新申请
					</u-button>
				</u-col>	
				
			</u-row>
		</view>
	</view>
	
</template>

<script>
import { renderItem } from '@/utils/gdtq'
import {cancel,detail} from '@/api/vehDispatch/vehDisApplication.js'

export default {
	props: {
		
	},
	data() {
		return {
			item: {}
		}
	},
	onLoad({id}) {
	
		if(id) {
			this.getInfo(id)
		} 
	},
	onShow() {
		
	},
	onUnload() {
		
	},
	methods: {
		async getInfo(id) {
			let {code,data} = await detail({id})
			if(code == 0) {
				this.item = data
			}
		},
		
		handleCancel(item) {
			uni.showModal({
				title: '提示',
				content: `确认取消申请？`,
				showCancel:true,
				confirmText: '确定',
				success: async (res) => {
					if (res.confirm) {
						const {id} = item
						let {code} = await cancel({id})
						if(code == 0) {
							// this.getInfo(id)
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; //上一个页面
							uni.navigateBack({
								success: () => {
									if (beforePage.handleQuery) {
										this.$nextTick(() => {
											beforePage.handleQuery()
										})
									}
								}
							})
							
						}
					}
				}
			})	
		},
		
		handleRe(item) {
			const {id} = item
			uni.navigateTo({
				url: `/pagesVehDispatch/vehDisApplication/index?id=${id}`
			})
		},
	},
}
</script>

<style lang="scss" scoped>
	.page-container {
		font-size: 28rpx;
		min-height: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		.page-head {
			background: #fff;
		}
		.page-body {
			width: 100%;
			height: calc(100%);
			overflow: hidden;
			
			.box-container {
				background: #fff;
				margin: 20rpx 10rpx;
				border-radius: 10rpx;
				font-size: 24rpx;
				.box-head {
					border-bottom: 1px solid #ddd;
					padding: 20rpx;
					font-weight: 700;
				}
				.box-body {
					padding: 20rpx;
					.item {
						margin: 4rpx;
						display: flex;
						.label {
							
						}
						.value {
							flex: 1;
						}
					}
				}
				.box-footer {
					border-top: 1px solid #ddd;
					padding: 20rpx;
				}
			}
		}
		
		.page-footer {
			// border-top: 1px solid #ddd;
			// padding: 10rpx 0;
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
		}
	}	
	
	
	::v-deep {
	
	}
	
	
	
	.primary {
		color: $uni-color-primary;
	}
</style>