<template>
|
<view class="main_app">
|
<view class="app_header">
|
<view class="item" @click="isShowDate = true">
|
<text v-if="param.queryDate">{{ param.queryDate }}</text>
|
<text v-else class="placeholder9">选择日期</text>
|
<u-icon class="ml12" name="arrow-down" color="#999999" />
|
</view>
|
<view class="item" @click="isShowCar = true">
|
<text>{{ param.carCode || '全部车辆' }}</text>
|
<u-icon class="ml12" name="arrow-down" color="#999999" />
|
</view>
|
</view>
|
<!-- -->
|
<view class="box_list">
|
<view
|
class="box_list_item"
|
v-for="(item, index) in dataList"
|
:key="index"
|
@click="itemDetail(item)"
|
>
|
<view class="box_list_item_head">
|
<text>{{ item.carCode }}</text>
|
<text class="loading" v-if="item.status == '0'">申请中</text>
|
<text class="grr" v-if="item.status == '1'">审批中</text>
|
<text class="grr" v-if="item.status == '2'">审批通过</text>
|
<text class="error" v-if="item.status == '3'">审批不通过</text>
|
<text class="grr" v-if="item.status == '4'">已取消</text>
|
</view>
|
<view class="box_list_item_nr">
|
<view class="box_list_item_nr_item">
|
<text>开始时间：</text>
|
<text>{{ item.startTime.slice(5, 16) }}</text>
|
</view>
|
<view class="box_list_item_nr_item">
|
<text>结束时间：</text>
|
<text>{{ item.endTime.slice(5, 16) }}</text>
|
</view>
|
<view class="box_list_item_nr_item">
|
<text>预约人：</text>
|
<text>{{ item.memberName }}</text>
|
</view>
|
<view class="box_list_item_nr_item">
|
<text>目的地：</text>
|
<text>{{ item.addr }}</text>
|
</view>
|
</view>
|
</view>
|
<view v-if="dataList.length === 0" style="text-align: center">
|
<image
|
src="@/static/empty.png"
|
style="width: 320rpx; margin: 120rpx auto 0"
|
mode="widthFix"
|
/>
|
<view class="placeholder9 fs24">暂无数据</view>
|
</view>
|
</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="date"
|
v-model="param.queryDate"
|
:show="isShowDate"
|
:minDate="minDate"
|
closeOnClickOverlay
|
@close="isShowDate = false"
|
@confirm="seletedDate"
|
@cancel="isShowDate = false"
|
/>
|
</view>
|
</template>
|
|
<script>
|
import { carUseBookPaiche, getCarsList } from '@/api'
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
isShowCar: false,
|
isShowDate: false,
|
carsList: [],
|
param: {
|
queryDate: dayjs().format('YYYY-MM-DD'),
|
// memberId: uni.getStorageSync('userInfo').memberId
|
},
|
minDate: '',
|
pagination: {
|
page: 0,
|
capacity: 6
|
},
|
total: 0,
|
dataList: [],
|
}
|
},
|
onLoad() {
|
this.minDate = new Date(dayjs().format('YYYY') + '-01-01').getTime()
|
// this.param.queryDate = dayjs().format('YYYY-MM-DD')
|
this.getList()
|
this.initData()
|
},
|
onReachBottom() {
|
console.log('onReachBottom');
|
if (this.total > this.dataList.length) {
|
this.getList()
|
}else {
|
this.showToast('暂无更多数据')
|
}
|
},
|
methods: {
|
getList() {
|
const { param, pagination } = this
|
pagination.page = pagination.page + 1
|
if (param.queryDate) {
|
param.queryStartTime = param.queryDate + ' 00:00:00'
|
param.queryEndTime = param.queryDate + ' 23:59:59'
|
}
|
carUseBookPaiche({
|
...pagination,
|
model: { ...param }
|
}).then(res => {
|
this.dataList = [...this.dataList, ...res.data.records]
|
this.total = res.data.total
|
})
|
},
|
itemDetail(item) {
|
uni.navigateTo({
|
url: `/pages/staff/vehicle/sendACarDetail?id=${item.id}`
|
})
|
},
|
seletedCar(e) {
|
const item = e.value[0]
|
this.pagination.page = 0
|
this.dataList = []
|
this.$set(this.param, 'carCode', item.code)
|
this.$set(this.param, 'carId', item.id)
|
this.isShowCar = false
|
this.getList()
|
},
|
seletedDate(e) {
|
setTimeout(() => {
|
this.param.queryDate = dayjs(e.value).format('YYYY-MM-DD')
|
this.pagination.page = 0
|
this.isShowDate = false
|
this.dataList = []
|
this.getList()
|
})
|
},
|
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 = [[{ code: '全部车辆', id: '' }, ...res.data]]
|
})
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.main_app {
|
background: #f7f7f7;
|
min-height: 100vh;
|
padding: 0;
|
}
|
.app_header {
|
display: flex;
|
align-items: center;
|
margin: 0 -15rpx;
|
background-color: #fff;
|
.item {
|
width: 360rpx;
|
height: 72rpx;
|
margin: 15rpx;
|
padding: 0 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
align-items: center;
|
}
|
}
|
.box_list {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
.box_list_item {
|
width: 100%;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.box_list_item_head {
|
width: 100%;
|
height: 100rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
|
border-radius: 8rpx 8rpx 0rpx 0rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.loading {
|
color: #4c99a8;
|
}
|
.success {
|
color: #03c68f;
|
}
|
.error {
|
color: #e0312a;
|
}
|
.grr {
|
color: #999999;
|
}
|
text {
|
&:nth-child(1) {
|
font-size: 32rpx;
|
font-weight: 600;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 26rpx;
|
font-weight: 400;
|
}
|
}
|
}
|
.box_list_item_nr {
|
padding: 30rpx;
|
width: 100%;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
.box_list_item_nr_item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
text {
|
&:nth-child(1) {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #666666;
|
}
|
&:nth-child(2) {
|
font-size: 26rpx;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
