eaXing_app/pagesCenter/shiftTurnover/takeOverDetail.vue

<template>
	<view class="section">
		<view class=" padding-lr-sm padding-top-sm text-bold"><text class="cuIcon-titles textBlue"></text>确认交接班</view>
		<view class="cu-card ">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex solids-bottom justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item label="车辆" label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="carNo" inputAlign='right' disabledColor="#fff"
							color="#171717">
						</u-input>
					</view>
				</view>
				<view class="flex solids-bottom justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item label="发起司机" disabled label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="handOverName" inputAlign='right' disabledColor="#fff"
							color="#171717">
						</u-input>
					</view>
				</view>
				<view
					:class="{'flex':true, 'justify-between':true, 'padding-tb-sm':true}">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item label="联系方式" disabled label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="handOverPhone" inputAlign='right' disabledColor="#fff"
							color="#171717">
						</u-input>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="cu-card" v-if="(type==2 && status==1) || type==1 ">
				<view class="cu-item shadow padding-lr-sm cu-item-people">
					<view class="flex solids-bottom justify-between padding-tb-sm">
						<view class="orderNumber padding-left-sm">
							<u-form>
								<u-form-item label="接班司机" disabled label-width="100">
								</u-form-item>
							</u-form>
						</view>
						<view class="padding-top-xs inputTop">
							<u-input border="none" disabled v-model="takeOverName" inputAlign='right'
								disabledColor="#fff" color="#171717">
							</u-input>
						</view>
					</view>
					<view class="flex solids-bottom justify-between padding-tb-sm">
						<view class="orderNumber padding-left-sm">
							<u-form>
								<u-form-item label="联系方式" disabled label-width="100">
								</u-form-item>
							</u-form>
						</view>
					
						<view class="padding-top-xs inputTop">
							<u-input border="none" disabled v-model="takeOverPhone" inputAlign='right'
								disabledColor="#fff" color="#171717">
							</u-input>
						</view>
					</view>
					<view class="flex solids-bottom justify-between padding-tb-sm">
						<view class="orderNumber padding-left-sm">
							<u-form>
								<u-form-item label="发起时间" disabled label-width="100">
								</u-form-item>
							</u-form>
						</view>
						<view class="padding-top-xs inputTop">
							<u-input border="none" disabled v-model="createTime" inputAlign='right' disabledColor="#fff"
								color="#171717">
							</u-input>
						</view>
					</view>
					<view class="flex  justify-between padding-tb-sm">
						<view class="orderNumber padding-left-sm">
							<u-form>
								<u-form-item label="确认时间" disabled label-width="100">
								</u-form-item>
							</u-form>
						</view>
						<view class="padding-top-xs inputTop">
							<u-input border="none" disabled v-model="confirmTime" inputAlign='right'
								disabledColor="#fff" color="#171717">
							</u-input>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<!--  -->
		<view class="confirm" v-if="type==2 && status!=1">
			<u-button @click="bound" shape='circle' type="primary">确认接班</u-button>
		</view>
		<u-modal :show="boundShow" :showCancelButton="true" @confirm="boundConfirm" :content="content"
			@cancel="boundCancel" confirmText="确定">
		</u-modal>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
		watch
	} from "vue";
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app";

	const boundShow = ref(false)
	const content = ref()

	const show = ref(false)
	const listArr = reactive([])
	const carNo = ref()
	const handOverName = ref()
	const handOverPhone = ref()
	const takeOverName = ref()
	const takeOverPhone = ref()
	const createTime = ref()
	const orderNo = ref()
	const type = ref()
	const confirmTime = ref()
	const status = ref()
	const vinApprove=ref()
	// 
	onLoad((option) => {
		console.log('option', JSON.parse(option.detail));
		let list = JSON.parse(option.detail)
		carNo.value = list.carNo
		handOverName.value = list.handOverName
		handOverPhone.value = list.handOverPhone
		takeOverName.value = list.takeOverName
		takeOverPhone.value = list.takeOverPhone
		createTime.value = list.createTime
		confirmTime.value = list.confirmTime
		orderNo.value = list.orderNo
		type.value = list.type
		status.value = list.status
		vinApprove.value= list.vin
	})
	onShow(() => {})
	// 

	const confirm = (e) => {
		show.value = false
	}
	const cancel = () => {
		show.value = false
	}
	const bound = () => {
		boundShow.value = true
		content.value = '请确认是否接班！'
	}
	const boundConfirm = () => {
		boundShow.value = false
		let data = {
			orderNo: orderNo.value,
			status: 1,
			vin:vinApprove.value
		}
		uni.$request({
			url: config.wxUrl_pay + 'app-rest/changeShifts/updateChangeShifts',
			data: data
		}).then(res => {
			if (res.data.code == 200) {
				//res.data.msg
				uni.$u.toast(res.data.msg);
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 3000)
			} else {
				uni.$u.toast(res.data.msg);
			}
		}).catch(err => {
			uni.$u.toast(err.data.msg);
		})
	}
	const boundCancel = () => {
		boundShow.value = false
	}
</script>

<style lang="scss" scoped>
	.section {
		width: 100%;
		height: 100vh;
		background: #F7F8FA;
		position: relative;
	}

	.confirm {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 16rpx 32rpx;
	}

	.textBlue {
		color: #4C91FF;
	}

	.cu-item-people {
		margin-top: 0;
	}
</style>