<template>
|
<view class="main_app">
|
<view class="main_wrap">
|
<!-- -->
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>选择车辆</text>
|
</view>
|
<view class="value" @click="isShowCar = true">
|
<text
|
class="mr6"
|
:style="{ color: param.carCode ? '#000000' : '#999999' }"
|
>{{ param.carCode ? param.carCode : "请选择" }}</text
|
>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>预计用车时段</text>
|
</view>
|
<view class="value" @click="isShowDate = true">
|
<text
|
class="mr6"
|
:style="{ color: param.startTime ? '#000000' : '#999999' }"
|
>
|
<template v-if="param.startTime">
|
{{ param.startHours }}至{{ param.endHours }}
|
</template>
|
<template v-else> 请选择 </template>
|
</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view class="have_info" v-if="info && info.length > 0">
|
<view class="tit">您申请的用车时段存在以下预约信息，无法预约</view>
|
<view class="content" v-for="(item, i) in info" :key="i">
|
<view class="card">{{ item.carCode }}</view>
|
<view class="line">
|
<text>用车时段</text>
|
<text>
|
{{ item.startTime.slice(5, 16) }}至{{
|
item.endTime.slice(5, 16)
|
}}</text
|
>
|
</view>
|
<view class="line">
|
<text>目的地</text>
|
<text>{{ item.addr }}</text>
|
</view>
|
<view class="line">
|
<text>乘车人数</text>
|
<text>{{ item.memberIds.split(",").length }}人</text>
|
</view>
|
<view class="line">
|
<text>用车事由</text>
|
<text>{{ item.content }}</text>
|
</view>
|
<view class="line">
|
<text>申请人</text>
|
<text>{{ item.memberName }} {{ item.memberMobile }}</text>
|
</view>
|
</view>
|
</view>
|
<view class="main_footer">
|
<text>已选择：</text>
|
<text class="sel" v-if="param.startTime"
|
>{{ param.startHours }}至{{ param.endHours }}</text
|
>
|
<text class="btn" :class="{disable: info && info.length > 0}" @click="onSubmit">确认预约</text>
|
</view>
|
<!-- -->
|
<!-- 选择车辆 -->
|
<u-picker
|
keyName="code"
|
:show="isShowCar"
|
@close="isShowCar = false"
|
:closeOnClickOverlay="true"
|
:columns="carsList"
|
@confirm="seletedCar"
|
@cancel="isShowCar = false"
|
></u-picker>
|
<!-- <u-datetime-picker
|
mode="datetime"
|
:show="isShowDate"
|
:filter="timeFilter"
|
title="开始时间"
|
:minDate="minDate"
|
@close="isShowDate = false"
|
:closeOnClickOverlay="true"
|
@confirm="seletedDate"
|
@cancel="isShowDate = false"
|
/> -->
|
<u-datetime-picker
|
mode="datetime"
|
:show="isShowDate"
|
title="开始时间"
|
:minDate="minDate"
|
@close="isShowDate = false"
|
:closeOnClickOverlay="true"
|
@confirm="seletedDate"
|
@cancel="isShowDate = false"
|
/>
|
<u-datetime-picker
|
mode="datetime"
|
:show="isShowEndDate"
|
title="结束时间"
|
:minDate="new Date(param.startTime || null).getTime()"
|
@close="endtimeClose"
|
:closeOnClickOverlay="true"
|
@confirm="seletedEndDate"
|
@cancel="endtimeClose"
|
/>
|
</view>
|
</template>
|
|
<script>
|
import { getCarsList, carUseBookList } from '@/api'
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
param: {},
|
isShowCar: false,
|
isShowDate: false,
|
isShowEndDate: false,
|
carsList: [],
|
info: [],
|
|
minDate: ''
|
}
|
},
|
onLoad() {
|
this.minDate = new Date(dayjs().format('YYYY-MM-DD HH:mm') + ':00').getTime()
|
console.log('minDate', this.minDate);
|
this.initData()
|
},
|
methods: {
|
onSubmit() {
|
const { param, info } = this
|
if (info.length > 0) return
|
if (!param.startTime) return uni.showToast({
|
title: '请先选择用车时间段',
|
icon: 'none'
|
})
|
if (!param.carId) return uni.showToast({
|
title: '请选择车辆',
|
icon: 'none'
|
})
|
const obj = {
|
carCode: param.carCode,
|
carId: param.carId,
|
startTime: param.startTime,
|
endTime: param.endTime,
|
type: '1'
|
}
|
uni.navigateTo({
|
url: `/pages/staff/vehicle/apply?carCode=${obj.carCode}&carId=${obj.carId}&startTime=${obj.startTime}&endTime=${obj.endTime}&type=${obj.type}`
|
})
|
// this.$jump('/pages/staff/vehicle/apply')
|
},
|
getInfo() {
|
const { param } = this
|
carUseBookList({
|
carId: param.carId,
|
startTime: param.startTime,
|
endTime: param.endTime,
|
}).then(res => {
|
if (res.code == 200) {
|
this.info = res.data
|
}
|
})
|
},
|
seletedCar(e) {
|
const item = e.value[0]
|
this.$set(this.param, 'carCode', item.code)
|
this.$set(this.param, 'carId', item.id)
|
this.isShowCar = false
|
if (this.param.carId && this.param.startTime) {
|
this.getInfo()
|
}
|
},
|
seletedDate(e) {
|
this.param.startTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
this.param.startHours = dayjs(e.value).format('MM-DD HH:mm')
|
console.log(this.param.startTime)
|
this.isShowDate = false
|
this.isShowEndDate = true
|
},
|
seletedEndDate(e) {
|
this.param.endTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
|
this.param.endHours = dayjs(e.value).format('MM-DD HH:mm')
|
console.log(this.param.endTime)
|
this.isShowEndDate = false
|
if (this.param.carId && this.param.startTime) {
|
this.getInfo()
|
}
|
this.$forceUpdate()
|
},
|
endtimeClose() {
|
this.param.endTime = ''
|
this.param.startTime = ''
|
this.isShowEndDate = false
|
},
|
timeFilter(mode, options) {
|
if (mode === 'minute') {
|
return options.filter(option => option === '00' || option === '30' || option === '60')
|
}
|
return options
|
},
|
initData() {
|
getCarsList({
|
type: 0
|
}).then(res => {
|
this.carsList = [res.data]
|
})
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.have_info {
|
padding: 0 0 200rpx;
|
.tit {
|
color: #ed4545;
|
margin: 40rpx 0 24rpx;
|
}
|
.content {
|
background: #f7f7f7;
|
border-radius: 16rpx;
|
padding: 30rpx 30rpx 10rpx;
|
margin-bottom: 20rpx;
|
.card {
|
margin-bottom: 30rpx;
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
background: #f7f7f7;
|
padding: 0;
|
}
|
.line {
|
display: flex;
|
margin-bottom: 20rpx;
|
text {
|
&:nth-of-type(1) {
|
width: 150rpx;
|
color: #888888;
|
}
|
&:nth-of-type(2) {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
.main_wrap {
|
.line {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #e5e5e5;
|
padding: 30rpx 0;
|
.label {
|
font-size: 30rpx;
|
font-weight: 400;
|
text {
|
&:nth-child(1) {
|
color: #e42d2d;
|
margin-right: 4rpx;
|
}
|
}
|
}
|
.value {
|
flex: 1;
|
height: 100%;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
input {
|
width: 100%;
|
height: 100%;
|
text-align: right;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
.upload_line {
|
padding: 30rpx 0;
|
textarea {
|
margin-top: 12rpx;
|
width: 100%;
|
height: 180rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
.adduser_list_item_ipt1_upload {
|
margin-top: 24rpx;
|
width: 120rpx;
|
height: 120rpx;
|
border: 2rpx solid #e5e5e5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
.main_footer {
|
position: fixed;
|
width: 100%;
|
left: 0;
|
background-color: #fff;
|
bottom: 0;
|
padding: 20rpx 30rpx 84rpx;
|
box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.btn {
|
width: 184rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: $uni-color-primary;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
|
border-radius: 36rpx;
|
font-size: 30rpx;
|
color: #ffffff;
|
}
|
.sel {
|
color: $uni-color-primary;
|
flex: 1;
|
}
|
.disable{
|
background: #CCCCCC;
|
}
|
}
|
</style>
|
