dingdong-master/pages/order-manage/modal/time-arrange.vue

<template>
	<!-- 排单模态框 -->
	<view class="cu-modal" :class="show?'show':''">
		<view class="cu-dialog">
			<view class="close-icon" data-modal="showTimeArrangeModal" @click="hideModal">
				<text class="cuIcon-close text-red"></text>
			</view>
			<view class="padding bg-white text-left">
				<view class="solid-bottom padding padding-bottom-sm">
					<view class="flex justify-between align-center margin-bottom-xs padding-top">
						<view>
							<text class="text-xxl text-main-color"><text class="cuIcon-phone"></text></text>
							<text class="text-bold text-lg margin-lr-xs">{{data.customerPhone}}</text>
						</view>
						<button class="cu-btn line-main-color" @click="makePhoneCall(data.customerPhone)">拨打</button>
					</view>
					<view class="text-sm">
						拨打电话，按与客户约定的时间填入，完成排单，未完成排单将导致排单超时！
					</view>
				</view>
				<view class="padding">
					<view class="margin-bottom-xs">
						<view class="margin-bottom-xs">选择日期：</view>
						<picker class="relative-view" mode="date" :value="date" :start="curDate" @change="dateChange">
							<input class="radius-input" v-model="date" disabled>
								<view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view>
							</input>
						</picker>
					</view>
					<view>
						<view class="margin-bottom-xs">选择时间：</view>
						<view class="flex justify-start align-center">
							<picker class="relative-view" :class="disableTime ? 'readonlyPicker' : ''" mode="time" :value="''" :start="'08:00'" :end="'19:00'"
								@change="timeChange" @click="showTime">
								<input class="custom-input radius-input" v-model="time" disabled>
									<view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view>
								</input>
							</picker>
							<text class="margin-lr-xs">或</text>
							<picker class="relative-view" :class="!disableTime ? 'readonlyPicker' : ''" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
								@change="timeRangeChange" @click="showDuration">
								<input class="custom-input radius-input" v-model="timeRange" disabled>
									<view class="text-lg input-arrow"><text class="cuIcon-triangledownfill"></text></view>
								</input>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action margin-0 flex-sub text-black" @click="cannotArrangeTime">无法排单</view>
				<view class="action margin-0 flex-sub text-black solid-left" data-modal="showTimeArrangeModal"
					@click="hideModal">按原时间上门</view>
				<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showTimeArrangeModal"
					@click="arrangeTime">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'time-arrange',
		emits: ['showArrangeFailTime', 'editServTime'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: {}
			},
			curDate: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				date: null,
				time: null,
				timeRangeList: [],
				timeRange: null,
				timeRangeIndex: 0,
				expectTimeStart: null,
				expectTimeEnd: null,
				disableTime: false
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.timeRangeList = this.$globalData.timeRangeList;
			},
			resetData() {
				this.date = null;
				this.time = null;
				this.timeRange = null;
				this.timeRangeIndex = 0;
				this.expectTimeStart = null,
				this.expectTimeEnd = null;
			},
			dateChange(e) {
				this.date = e.detail.value;
				this.changeExpectTime();
			},
			showTime() {
				this.disableTime = false;
			},
			showDuration() {
				this.disableTime = true;
			},
			timeChange(e) {
				let time = e.detail.value;
				if (time === '00:00') {
					time = '08:00';
				}
				this.time = time;
				this.timeRange = null;
				this.changeExpectTime();
			},
			timeRangeChange(e) {
				this.timeRangeIndex = e.detail.value;
				this.timeRange = this.timeRangeList[this.timeRangeIndex];
				this.time = null;
				this.changeExpectTime();
			},
			changeExpectTime() {
				if (this.time) {
					this.expectTimeStart = this.date + ' ' + this.time + ':00';
					this.expectTimeEnd = null;
				} else if (this.timeRange) {
					let timeRangeSplit = this.$globalData.timeRangeSplit;
					let timeArr = this.timeRange.split(timeRangeSplit);
					this.expectTimeStart = this.date + ' ' + timeArr[0] + ':00';
					this.expectTimeEnd = this.date + ' ' + timeArr[1] + ':00';
				}
			},
			hideModal(e) {
				this.resetData();
				uni.$emit(this.$globalFun.HIDE_MODAL, e);
			},
			cannotArrangeTime(e) {
				this.resetData();
				this.$emit('showArrangeFailTime', e)
			},
			arrangeTime(e) {
				if (!(this.time || this.timeRange)) {
					uni.showToast({
						title: '请选择时间'
					})
					return;
				}
				// let datetime = this.date + ' ' + this.time + ':00';
				this.$emit('editServTime', this.data.orderMasterId, [this.expectTimeStart, this.expectTimeEnd], false, this.data);
				this.hideModal(e);
			},
			makePhoneCall(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum
				})
			}
		}
	}
</script>

<style scoped>
	.inline-input {
		display: inline-block;
		width: calc((100% - 48rpx)/2);
		vertical-align: middle;
	}

	.close-icon {
		position: absolute;
		right: 35rpx;
		top: 35rpx;
		z-index: 1;
	}
	
	.relative-view {
		position: relative;
	}
	
	.input-arrow {
		position: absolute;
		right: 10rpx;
		top: 25%;
	}
</style>