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}}</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 mode="date" :value="date" :start="curDate" @change="dateChange">
							<input class="radius-input" v-model="date" disabled></input>
						</picker>
					</view>
					<view>
						<view class="margin-bottom-xs">选择时间：</view>
						<!-- <picker mode="time" :value="'08:00'" :start="'08:00'" :end="'20:00'"
							@change="timeChange">
							<input class="radius-input" v-model="time"></input>
						</picker>
						<text class="margin-lr-xs">或</text> -->
						<picker mode="selector" :value="timeRangeIndex" :range="timeRangeList"
							@change="timeRangeChange">
							<input class="radius-input" v-model="timeRange" disabled></input>
						</picker>
					</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 uni-textarea">
						<textarea class="solid padding-sm" maxlength="-1" @input="inputSpecificReason"
							placeholder="具体情况(选填)" />
					</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'],
		props: {
			show: {
				type: Boolean,
				default: false
			},
			data: {
				type: Object,
				default: {}
			},
			curDate: {
				type: String,
				default: ''
			},
			ifRollback2WS: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				date: '',
				time: '',
				timeRangeList: [],
				timeRange: '',
				timeRangeIndex: 0,
				expectTimeStart: null,
				expectTimeEnd: null
			}
		},
		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();
			},
			timeChange(e) {
				this.time = e.detail.value;
			},
			timeRangeChange(e) {
				this.timeRangeIndex = e.detail.value;
				this.timeRange = this.timeRangeList[this.timeRangeIndex];
				this.changeExpectTime();
			},
			changeExpectTime() {
				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)
			},
			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.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;
	}
</style>