muck_truck_app/pages/cityTransportDetail/index.vue

<template>
	<view class="container">
		<uni-navbar title="运输申请"></uni-navbar>
		<view class="box commonMt" style="overflow: hidden;">
			<view class="topMap">
				<mapPreview :startPoint='form.startPoint' :endPoint='form.endPoint' v-show="isMap"
					:mtRoutePointList='form.mtRoutePointList'></mapPreview>
			</view>
			<view class="box3">
				<view class="addLineSuccess-big-box commonBj commonMt">
					<view class="addLineSuccess-big-box-top">
						<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
							src="../../static/images/transport/dingwei.png" mode="widthFix">
						</image>
						<text class="listTitle">路线信息</text>
					</view>
					<view class="addLineSuccess-big-box-bottom" style="padding-bottom: 40rpx;">
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">运输名称:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.transportName}}</text>
							</view>
						</view>
						<!-- <view class="map">
							<mapImg :startPoint='form.startPoint' :endPoint='form.endPoint'
								:mtRoutePointList='form.mtRoutePointList'></mapImg>
						</view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">开始地址:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.startName}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">结束地址:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.endName}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">运输期限:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.startDate}} 至 {{form.endDate}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">开始时间:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{ changeTime(form.startTime) }}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">结束时间:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{ changeTime(form.endTime) }}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">计划车辆:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.expectCar}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">上报企业:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.companyName}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
					</view>
				</view>
				<!-- 审批状态 -->
				<view class="reject-box mt28 commonMb commonBj">
					<view class="reject-box-top just-content-start">
						<image src="../../static/images/car/yunshu.png" mode="widthFix"></image>
						<text class="listTitle">审批状态</text>
					</view>
					<view class="reject-box-bottom pb0">
						<view class="state-icon">
							<view class="flexAlignCenter center">
								<view class="redCircle">
								</view>
								<text class="itemText mr46">审批状态:</text>
								<view class="normal" :class="auditType===1?'success':''" @tap="successClick">
									<image style="width: 33rpx;height: 33rpx;margin-right: 12rpx;"
										src="../../static/images/cityCar/state2.png" mode="widthFix"></image>
									<text>通过</text>
								</view>
								<view class="normal ml37" :class="auditType===-1?'fail':''" @tap="failClick">
									<image style="width: 33rpx;height: 33rpx;margin-right: 12rpx;"
										src="../../static/images/cityCar/state1.png" mode="widthFix"></image>
									<text>驳回</text>
								</view>
							</view>
						</view>
						<!-- <view :class="isPass?'border-style mb':'border-style2'"></view> -->
						<!-- <view class="state-icon" v-if="auditType === -1">
							<view class="flexAlignCenter center">
								<view class="redCircle">
								</view>
								<text class="itemText">驳回原因:</text>
							</view>
						</view>
						<u--textarea confirmType="done" v-if="auditType === -1" class="textareaStyle" height="198rpx"
							v-model="auditContent" placeholder="请输入驳回原因">
						</u--textarea> -->
						<u--form v-if="auditType === -1" :model="uform" ref="uForm" :rules="rules" labelWidth="0"
							class='formStyle formClass'>
							<u-form-item prop="auditContent">
								<view class="flexBox mb40">
									<view class="redCircle"></view>
									<text class="itemText">驳回原因</text>
								</view>
								<u--textarea confirmType="done" v-if="auditType === -1" class="textareaStyle"
									maxlength="255" height="198rpx" v-model="uform.auditContent" placeholder="请输入驳回原因">
								</u--textarea>
							</u-form-item>
						</u--form>
						<!-- <view v-if="!isPass" class="border-style2 mb"></view> -->
					</view>
				</view>
				<u-button @click="submit" class="custom-style mt33 commonMb" shape="circle"
					color="linear-gradient(to top, #F59A02, #FFD334)">确认审批</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		transportDetail
	} from "../../api/company/transport.js"
	import {
		checkTransport
	} from "@/api/city/transport.js"
	export default {
		data() {
			return {
				// 通过样式开关
				auditType: 1,
				// 驳回样式开关
				isFail: false,
				isMap: true,
				form: {
					startTime: "00:00:00",
					endTime: "00:00:00",
					// 结束坐标和开始坐标
					endPoint: '',
					startPoint: '',
					mtRoutePointList: [],
				},
				uform: {
					// 驳回原因
					auditContent: null,
				},
				rules: {
					auditContent: [{
						required: true,
						whitespace:true,
						message: '请输入驳回原因',
						trigger: ['blur', 'change']
					}, ],
				},
			}
		},
		methods: {
			submit() {
				if (this.auditType === -1) {
					this.$refs.uForm.validate().then(async res => {
						console.log(this.form);
						let obj = {}
						obj.id = this.form.id
						obj.auditState = this.auditType
						obj.auditContent = this.uform.auditContent
						obj.startDate = this.form.startDate
						checkTransport(obj).then(res => {
							console.log(res);
							this.uform.auditContent = null
							this.$tab.navigateBack()
							// uni.redirectTo({
							// 	url: '/pages/cityTransport/index'
							// });
							// this.$tab.navigateTo('/pages/cityTransport/index')
							// uni.showToast({
							// 	title: '已审批'
							// })
						})
					})
				} else {
					let obj = {}
					obj.id = this.form.id
					obj.auditState = this.auditType
					obj.auditContent = this.uform.auditContent
					obj.startDate = this.form.startDate
					checkTransport(obj).then(res => {
						console.log(res);
						this.uform.auditContent = null
						this.$tab.navigateBack()
						// uni.redirectTo({
						// 	url: '/pages/cityTransport/index'
						// });
						// this.$tab.navigateTo('/pages/cityTransport/index')
						// uni.showToast({
						// 	title: '已审批'
						// })
					})
				}
			},
			// 切换按钮事件
			successClick() {
				if (this.auditType === 1) {
					return
				} else {
					this.auditType = 1
				}
			},
			failClick() {
				if (this.isFail === -1) {
					return
				} else {
					this.auditType = -1
				}
			},
			// 获取运输申请详情
			async getDetail(id) {
				this.isMap = false;
				const res = await transportDetail(id)
				console.log('运输详情', res);
				this.form = res.data;
				this.isMap = true;
			},
			changeTime(time) {
				return time.slice(0, 5)
			},
		},
		onLoad(option) {

			if (option.id) {
				this.getDetail(option.id)
				this.uform.auditContent = null
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mr46 {
		margin-right: 46rpx !important;
	}

	// 驳回表单样式
	.flexBox {
		display: flex;
		align-items: center;
	}

	.mb40 {
		margin-bottom: 40rpx;
	}

	.formClass {
		/deep/.u-form-item {
			margin-bottom: 56rpx;
		}

		/deep/.u-form-item__body {
			padding: 0;
		}

		/deep/.u-form-item__body__right__content__slot {
			display: block !important;
			// margin-bottom: 56rpx;
		}

	}

	// 审批状态按钮样式
	.normal {
		width: 170rpx;
		height: 58rpx;
		background: rgba(126, 142, 193, 0.6);
		border-radius: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.success {
		background: linear-gradient(90deg, #3FC377 0%, #83D992 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
	}

	.fail {
		background: linear-gradient(90deg, #FF2D04 0%, #FFA53E 100%);
		box-shadow: 0px 2rpx 13rpx 0px rgba(27, 43, 95, 0.25);
	}

	.ml37 {
		margin-left: 37rpx;
	}

	.center {
		justify-content: center;
		align-items: center;
	}

	.textareaStyle {
		background: rgba(255, 255, 255, 0.1);
		border: 2rpx solid #495B93 !important;
		border-radius: 15rpx;

		/deep/ .input-placeholder {
			color: #7E8EC1 !important;
			font-size: 26rpx;
		}
	}

	.reject-box-top {
		width: 100%;
		height: 69rpx;
		background: #7FB5FF;
		border-radius: 26rpx 26rpx 0px 0px;
		display: flex;
		justify-content: space-between;

		uni-image {
			width: 50rpx;
			margin-left: 32rpx;
			vertical-align: middle;
		}

	}

	.reject-box-bottom {
		padding: 40rpx;

		.state-icon {
			display: flex;
			margin: 40rpx 0;
		}

		.state-icon:nth-child(1) {
			margin: 0 0 40rpx;
		}

		.border-style {
			border-top: 1rpx dashed #F98803;
			width: 90%;
			margin: 0 auto;
		}

		.border-style2 {
			border-top: 1rpx dashed #FB5637;
			width: 90%;
			margin: 0 auto;
		}
	}


	.reject-box-bottom:nth-child(2) {
		padding: 40rpx 40rx 20rpx !important;
	}

	.just-content-start {
		justify-content: flex-start !important;
		align-items: center;
	}

	.pb0 {
		padding-bottom: 0 !important;
	}

	.mt28 {
		margin-top: 40rpx;
	}

	// 
	.addLineSuccess-big-box {

		.addLineSuccess-big-box-top {
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
		}

		.addLineSuccess-big-box-bottom {
			padding: 0rpx 39rpx;
			border-radius: 0 0 28rpx 28rpx;

			.addLineSuccess-big-box-bottom-item {
				display: flex;
				margin: 36rpx auto;
			}

			.map {
				// width: 599rpx;
				height: 339rpx;
				background: #FFFFFF;
				border: 2rpx solid #495B93;
				border-radius: 15rpx;
				margin: 25rpx auto 40rpx;
			}

			// .border-style {
			// 	border-top: 1rpx dashed #F98803;
			// 	margin: 0 auto;
			// }
		}
	}

	.custom-style {
		box-shadow: 0px 2rpx 13rpx 0rpx rgba(27, 43, 95, 0.25);
		border-radius: 28rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 27rpx 0 36rpx;
		height: 85rpx;
	}


	.bg-color-green {
		background: #36C372 !important;
	}


	.mb {
		margin-bottom: 11rpx !important;
	}

	.mt31 {
		margin-top: 31rpx;
	}

	.mb43 {
		margin-bottom: 43rpx;
	}
</style>