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

<template>
	<!-- 修改时间模态框 -->
	<view class="cu-modal" :class="show?'show':''">
		<view class="cu-dialog">
			<view class="close-icon" data-modal="showEditTimeArrangeModal" @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.substring(0, 3) + "****" + data.customerPhone.substring(7)}}</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="selector" :value="timeIndex" :range="timeList"
								@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 class="padding-top-sm padding">
					<view class="flex justify-start">
						<view class="margin-right">原因选择：</view>
						<radio-group @change="changeReasonRadio">
							<label class="radio margin-right-sm">
								<radio style="transform:scale(0.7)" class="main-color" value="customer"
									:checked="true" />
								<text>客户原因</text>
							</label>
							<label class="radio">
								<radio style="transform:scale(0.7)" class="main-color" value="master" />
								<text>师傅原因</text>
							</label>
						</radio-group>
					</view>
					<view class="margin-top">
						<textarea style="width: 100%; height: 300rpx;" class="solid padding-sm" maxlength="-1" @input="inputSpecificReason"
							placeholder="具体情况(选填)"></textarea>
					</view>
				</view>
			</view>
			<view class="cu-bar bg-white solid-top">
				<view class="action margin-0 flex-sub text-black" data-modal="showEditTimeArrangeModal" @click="cannotArrangeTime">无法排单</view>
				<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="showEditTimeArrangeModal"
					@click="arrangeTime">确认</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'edit-time-arrange',
		emits: ['showArrangeFailTime', 'editServTime', 'close'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: () => {}
			},
			curDate: {
				type: String,
				default: ''
			},
			ifRollback2WS: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				date: null,
				time: null,
				timeList: [],
				timeIndex: 0,
				timeRangeList: [],
				timeRange: null,
				timeRangeIndex: 0,
				expectTimeStart: null,
				expectTimeEnd: null,
				disableTime: false
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			async loadData() {
				this.timeRangeList = this.$globalData.timeRangeList;
				this.timeList = this.$globalData.timeList;
			},
			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) {
				this.timeIndex = e.detail.value;
				this.time = this.timeList[this.timeIndex];
				this.timeRange = null;
				this.changeExpectTime();
			},
			timeRangeChange(e) {
				this.timeRangeIndex = e.detail.value;
				this.timeRange = this.timeRangeList[this.timeRangeIndex];
				this.time = null;
				this.changeExpectTime();
			},
			changeExpectTime() {
				let time = this.time != null ? this.time : this.timeRange;
				if (time != null) {
					let timeRangeSplit = this.$globalData.timeRangeSplit;
					let timeArr = time.split(timeRangeSplit);
					this.expectTimeStart = this.date + ' ' + timeArr[0] + ':00';
					this.expectTimeEnd = this.date + ' ' + timeArr[1] + ':00';
				}
			},
			hideModal(e) {
				this.resetData();
				this.$emit('close', e);
			},
			cannotArrangeTime(e) {
				this.resetData();
				this.$emit('showArrangeFailTime', e)
			},
			async arrangeTime(e) {
				if (!(this.time || this.timeRange)) {
					uni.showToast({
						title: '请选择时间'
					})
					return;
				}
				// let datetime = this.date + ' ' + (this.time || this.timeRange) + ':00';
				this.$emit('editServTime', this.data.orderDetailId, [this.expectTimeStart, this.expectTimeEnd], this.ifRollback2WS, this.data);
				this.hideModal(e);
			},
			changeReasonRadio(e) {
				this.problemPerson = e.detail.value;
			},
			inputSpecificReason(e) {
				this.specificReason = e.detail.value;
			},
			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>