eaXing_app/pagesCenter/shiftTurnover/shiftTurnover.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" :required="true">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<view class="padding-tb-xs inputTop" @click="getCarName">
							{{selfCarNo ? selfCarNo : '请选择交班车辆' }}
							<u-picker :show="showCar" :columns="selfListArr" keyName="label" @confirm="confirmCar"
								@cancel="cancelCar" :immediateChange='true'> </u-picker>
						</view>
					</view>
				</view>
				<view class="flex  justify-between padding-tb-sm">
					<view class="orderNumber padding-left-sm">
						<u-form>
							<u-form-item label="vin" disabled label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-top-xs inputTop">
						<u-input border="none" disabled v-model="selfVin" inputAlign='right' disabledColor="#fff"
							color="#808080">
						</u-input>
					</view>
				</view>


			</view>
		</view>
		<!--  -->
		<view class="cu-card">
			<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 :required="true" label="接班司机" label-width="100">
							</u-form-item>
						</u-form>
					</view>
					<view class="padding-tb-xs inputTop" @click="getName">
						{{motorName ? motorName : '请选择接班司机' }}
						<u-picker :show="show" :columns="listArr" keyName="label" @confirm="confirm" @cancel="cancel"
							:immediateChange='true'> </u-picker>
					</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="phone" inputAlign='right' disabledColor="#fff"
							color="#808080">
						</u-input>
					</view>
				</view>
			</view>
			<view class="prompt" v-if="promptMessage">
				<view class="title">温馨提示：</view>
				<view class="content">{{selfCarNo}}<text class="font">{{promptMessage}}</text>！</view>
			</view>
		</view>
		<!--  -->
		<view class="confirm">
			<u-button @click="bound" :disabled="btnInitiate" 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";
	// import {
	// 	log
	// } from '../../static/mqtt/dist/mqtt.min';

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

	const show = ref(false)
	const showCar = ref(false)
	const motorName = ref()
	const selfCarNo = ref()

	const motorId = ref()
	const listArr = reactive([]) //此车绑定的其他司机
	const originalListArr = reactive([]) //此车绑定的其他司机初始arr
	const selfListArr = reactive([]) //自己名下车辆
	const originalselfList = reactive([]) //自己名下初始arr
	const selfVin = ref()
	const othersList = ref()
	const phone = ref()
	const btnInitiate = ref(true)
	const promptMessage = ref()
	// 
	onLoad(() => {
		getSelect()
	})
	onShow(() => {

	})
	// 1
	watch(selfCarNo, (newValue, oldValue) => {
		if (oldValue != newValue && originalselfList[0] != undefined) {
			console.log(originalselfList[0], 'originalselfList');
			let heart = originalselfList[0].filter(item => {
				return item.carNo == newValue
			})

			selfVin.value = heart[0].vin

			// 判断是否可以交接车提示
			if (heart[0].isDefault == 0) {
				promptMessage.value = '不在你的名下，请等待确认接车'
			} else if (heart[0].isDefault == 1) {
				promptMessage.value = ' 已经绑定在你的名下，可以发起交车，无需接车'
			}

			console.log(heart[0], 'heart[0]');

			phone.value = ''
			motorName.value = ''
			listArr.length = 0
			originalListArr.length = 0

			// 接班列表接口
			let data = {
				vin: selfVin.value
			}
			uni.$request({
				url: config.wxUrl_pay + "app-rest/customerVehicle/members",
				data: data
			}).then(res => {
				originalListArr.push(res.data.data)
				let listCopy = JSON.parse(JSON.stringify(res.data.data))
				let arr = []
				listCopy.forEach(item => {
					arr.push({
						value: item.id,
						label: item.userName
					})
				})
				listArr.length = 0
				listArr.push(arr)

			})
		}

	});
	// 2
	watch(motorName, (newValue, oldValue) => {
		if (newValue != '' && oldValue != newValue && originalListArr[0] != undefined) {
			let heart = originalListArr[0].filter(item => {
				return item.userName == newValue
			})
			phone.value = heart[0].phone

		}

	});

	// 
	const cancelCar = () => {
		showCar.value = false
	}
	const confirmCar = (e) => {
		showCar.value = false
		selfCarNo.value = e.value[0].label
	}
	const getSelect = () => {
		uni.$request({
			url: config.wxUrl_pay + "app-rest/customerVehicle/validList"
		}).then(res => {
			if (res.data.data.length != 0) {
				btnInitiate.value = false
			}
			originalselfList.push(res.data.data)
			let listCopy = JSON.parse(JSON.stringify(res.data.data))
			let arr = []
			listCopy.forEach(item => {
				arr.push({
					value: item.id,
					label: item.carNo
				})
			})
			selfListArr.push(arr)
			console.log(selfListArr, 'selfListArr');
			if (selfListArr[0].length === 0) {
				promptMessage.value = '未绑定车辆，无法发起交接班'
			}
		})
	}
	const getCarName = () => {
		showCar.value = true
	}
	const getName = () => {
		show.value = true
	}
	const confirm = (e) => {
		motorName.value = e.value[0].label
		show.value = false
	}
	const cancel = () => {
		show.value = false
	}
	const bound = () => {
		boundShow.value = true
		content.value = '请确认是否发起交接班！'
	}
	const boundConfirm = () => {
		boundShow.value = false
		let data = {
			takeOverPhone: phone.value,
			vin: selfVin.value
		}
		uni.$request({
			url: config.wxUrl_pay + 'app-rest/changeShifts/addChangeShifts',
			method: 'POST',
			data: data
		}).then(res => {
			if (res.data.code == 200) {
				//res.data.msg
				uni.$u.toast(res.data.msg);
				setTimeout(function() {
					uni.navigateBack({
						delta: 1,
					});
				}, 1000)
			} else {
				uni.$u.toast(res.data.msg);
			}
		}).catch(err => {
			uni.$u.toast('交接失败');
		})
	}
	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;
	}

	.prompt {
		padding: 0 30rpx;

		.title {
			font-family: PingFang SC;
			font-size: 34rpx;
			font-weight: 400;
			color: #000000;
			margin-bottom: 16rpx;
		}

		.content {
			font-family: PingFang SC;
			font-size: 30rpx;
			font-weight: 400;
			color: #585858;

			.font {
				color: #ff0000;
			}
		}
	}
</style>