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>
|