hbj_app/pages/indexpage/fireMan/shenpi/detail/detail.vue

<template>
	<view style="position: relative;height: 100vh;">
		<!-- 头部 -->
		<view class="cardTitle">
			<view style="font-weight: bold;font-size: 32rpx;color: #333333;">{{form.applyTransfer}}提交的调班申请</view>
			<view style="font-weight: 400;font-size: 26rpx;color: #999999;margin-top: 23rpx;">申请时间：{{form.createTime}}
			</view>
			<view style="font-weight: 400;font-size: 26rpx;color: #999999;margin-top: 23rpx;">消防中队：{{form.teamName}}
			</view>
			<view style="position: absolute;top: 25rpx;right: 44rpx;">
				<image src="../../../../../static/images/fireman/shenhe.png" style="width: 206rpx;height: 182rpx">
				</image>
			</view>
		</view>
		<!-- 卡片 -->
		<!-- 人员信息 -->
		<view style="width: 100vw;padding: 0 30rpx;">
			<view style=" background-color: #fff;">
				<view class="cardHead">
					<view style="width: 8rpx;height: 30rpx;background: #168DFB;margin-right: 20rpx;"></view>
					<view>申请信息</view>
				</view>
				<!-- 调班信息 -->
				<view class="cardBottom">
					<u-row style="margin-bottom: 20rpx;">
						<u-col span="3" style="color: #7D858E;">调班原因</u-col>
						<u-col span="9" style="color: #333333;">{{form.applyReason}}</u-col>
					</u-row>
					<u-row style="margin-bottom: 20rpx;">
						<u-col span="3" style="color: #7D858E;">代班人</u-col>
						<u-col span="9" style="color: #333333;">{{form.replaceDutyName}}</u-col>
					</u-row>
					<u-row style="margin-bottom: 20rpx;">
						<u-col span="3" style="color: #7D858E;">开始时间</u-col>
						<u-col span="9" style="color: #333333;">{{form.transferBeginDate}}</u-col>
					</u-row>
					<u-row>
						<u-col span="3" style="color: #7D858E;">结束时间</u-col>
						<u-col span="9" style="color: #333333;">{{form.transferEndDate}}</u-col>
					</u-row>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bohui" @click="bohui">驳回</view>
			<view class="tongguo" @click="tongguo">通过</view>
		</view>

	</view>
</template>

<script>
	import {
		getTransferInfo,
		updateTransferInfo
	} from "@/api/fireman/tiaoban.js"
	export default {
		onLoad(option) {
			this.optionId = option.id
			// console.log(option.id);
		},
		data() {
			return {
				optionId: '', //页面传值id
				form: {}, //表单内容
			}
		},
		mounted() {
			this.getList(this.optionId)
		},
		methods: {
			getList(id) {
				getTransferInfo(id).then(response => {
					this.form = response.data
					console.log(this.form, "审批详细");
				})
			},
			// 驳回按钮
			bohui() {
				this.form.status = "2";
				updateTransferInfo(this.form).then(res => {
					if (res.code === 200) {
						this.$modal.msgSuccess("驳回成功");
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}


				})
			},
			// 通过
			tongguo() {
				this.form.status = "1"
				updateTransferInfo(this.form).then(res => {
					if (res.code === 200) {
						this.$modal.msgSuccess("通过成功");
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					}

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		box-sizing: border-box;

		.cardTitle {
			height: 230rpx;
			width: 100%;
			background-color: #fff;
			padding: 52rpx 29rpx;
			position: relative;
			margin-bottom: 32rpx;
		}

		.cardHead {
			padding: 23rpx 33rpx;
			display: flex;
			border-bottom: 1rpx solid #EEEEEE;
			align-items: center;
		}

		.cardBottom {

			padding: 29rpx 36rpx;

		}

		.bottom {
			width: 100vw;
			position: absolute;
			bottom: 200rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;

			.bohui {
				width: 280rpx;
				height: 80rpx;
				background: #FF4040;
				border-radius: 40rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}

			.tongguo {
				width: 280rpx;
				height: 80rpx;
				background: #16B95B;
				border-radius: 40rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>