aiot-app/pages/salesServiceManagement/workOrder/components/reportInfo.vue

<template>
	<u-cell-group>
		<u-cell title="开始时间" arrow-direction="down">
			<uni-datetime-picker :end="finishTime" type="datetime" slot="value" v-model="reportForm.acceptTime"
				@change="starTimeChange">
			</uni-datetime-picker>
		</u-cell>
		<u-cell title="结束时间" arrow-direction="down">
			<uni-datetime-picker :start="starTime" type="datetime" slot="value" v-model="reportForm.finishTime"
				@change="endTimeChange">
			</uni-datetime-picker>
		</u-cell>
		<u-cell title="时间售后时长(天)" arrow-direction="down">
			<view slot="value" style="display: flex;align-items: center;width: 100%;">
				<u--input readonly style="flex:1" border="surround" v-model="days">
				</u--input>
			</view>
		</u-cell>
		<u-cell title="时间售后时长(小时)" arrow-direction="down">
			<view slot="value" style="display: flex;align-items: center;width: 100%;">
				<u--input readonly style="flex:1" border="surround" v-model="hours">
				</u--input>
			</view>
		</u-cell>
		<u-cell title="时间售后时长(分钟)" arrow-direction="down">
			<view slot="value" style="display: flex;align-items: center;width: 100%;">
				<u--input readonly style="flex:1" border="surround" v-model="minutes">
				</u--input>
			</view>
		</u-cell>
	</u-cell-group>
</template>

<script>
	export default {
		data() {
			return {
				reportForm: {
					acceptTime: '',
					finishTime: '',
					inFactDuration: ''
				},
				finishTime: '',
				starTime: '',
				minutes: '',
				hours: '',
				days: ''
			}
		},
		props: {
			form: {
				type: Object,
				default: () => {}
			}
		},
		watch: {
			form: {
				handler(newVal) {
					this.reportForm = {
						...newVal
					}
					this.calculateTimeDifference();
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			getReportForm() {
				let data = JSON.parse(JSON.stringify(this.reportForm));
				let arr1 = data.acceptTime.split(' ')
				let arr2 = data.finishTime.split(' ')
				if (arr1.length == 2 && !arr1[1]) {
					data.acceptTime = data.acceptTime + '00:00:00'
				}
				if (arr2.length == 2 && !arr2[1]) {
					data.finishTime = data.finishTime + '00:00:00'
				}
				return data;
			},
			// 开始时间
			starTimeChange(e) {
				this.starTime = e;
				this.reportForm.acceptTime = e;
				this.calculateTimeDifference()
			},
			// 结束时间
			endTimeChange(e) {
				this.finishTime = e;
				this.reportForm.finishTime = e;
				this.calculateTimeDifference();
			},
			calculateTimeDifference() {
				if (!this.reportForm.acceptTime || !this.reportForm.finishTime) {
					this.days = '';
					this.hours = '';
					this.minutes = '';
					this.reportForm.inFactDuration = '';
					return
				}
				// 计算时间差
				const acceptTime = new Date(this.reportForm.acceptTime);
				const finishTime = new Date(this.reportForm.finishTime);
				const timeDiff = finishTime - acceptTime; // 毫秒数
				// 转换为天、小时、分钟
				const minutes = timeDiff / (1000 * 60);
				const hours = minutes / 60;
				const days = hours / 24;
				this.reportForm.inFactDuration = minutes;
				this.minutes = minutes.toFixed(0) + ' 分钟';
				this.hours = hours.toFixed(1) + ' 小时';
				this.days = days.toFixed(1) + ' 天';
			},

		}
	}
</script>

<style>
</style>