125 lines
3.6 KiB
Vue
125 lines
3.6 KiB
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.phoneNum}}</text>
|
|||
|
|
</view>
|
|||
|
|
<button class="cu-btn line-main-color">拨打</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"></input>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="margin-bottom-xs">选择时间：</view>
|
|||
|
|
<picker class="inline-input" 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 class="inline-input" mode="selector" :value="timeRangeIndex" :range="timeRangeList"
|
|||
|
|
@change="timeRangeChange">
|
|||
|
|
<input class="radius-input" v-model="timeRange"></input>
|
|||
|
|
</picker>
|
|||
|
|
</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="arrangeTime">按原时间上门</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',
|
|||
|
|
props: {
|
|||
|
|
show: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
data: {
|
|||
|
|
type: Object,
|
|||
|
|
default: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
date: '',
|
|||
|
|
curDate: '',
|
|||
|
|
time: '',
|
|||
|
|
timeRangeList: [],
|
|||
|
|
timeRange: '',
|
|||
|
|
timeRangeIndex: 0
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onReady() {
|
|||
|
|
this.loadData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
async loadData() {
|
|||
|
|
this.getCurDateAndTime();
|
|||
|
|
this.timeRangeList = await this.$api.data('timeRangeList');
|
|||
|
|
},
|
|||
|
|
getCurDateAndTime() {
|
|||
|
|
let date = new Date();
|
|||
|
|
this.curDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + " 00:00:00";
|
|||
|
|
},
|
|||
|
|
dateChange(e) {
|
|||
|
|
this.date = e.detail.value
|
|||
|
|
},
|
|||
|
|
timeChange(e) {
|
|||
|
|
this.time = e.detail.value;
|
|||
|
|
},
|
|||
|
|
timeRangeChange(e) {
|
|||
|
|
this.timeRangeIndex = e.detail.value;
|
|||
|
|
this.timeRange = this.timeRangeList[this.timeRangeIndex];
|
|||
|
|
},
|
|||
|
|
hideModal(e) {
|
|||
|
|
uni.$emit(this.$globalFun.HIDE_MODAL, e);
|
|||
|
|
},
|
|||
|
|
cannotArrangeTime(e) {
|
|||
|
|
uni.$emit(this.$globalFun.SHOW_ARRANGE_FAIL_TIME, e)
|
|||
|
|
},
|
|||
|
|
arrangeTime(e) {
|
|||
|
|
this.hideModal(e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</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>
|