From b158a9a85078d57a0e660aba680f6ad88da7ab6a Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期四, 07 十一月 2024 11:39:01 +0800
Subject: [PATCH] ll
---
h5/pages/staff/vehicle/shinei.vue | 609 +++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 437 insertions(+), 172 deletions(-)
diff --git a/h5/pages/staff/vehicle/shinei.vue b/h5/pages/staff/vehicle/shinei.vue
index de4c175..35d1c20 100644
--- a/h5/pages/staff/vehicle/shinei.vue
+++ b/h5/pages/staff/vehicle/shinei.vue
@@ -1,172 +1,437 @@
-<template>
- <view class="main_app">
- <view class="app_header">
- <view class="item" @click="isShowCar = true">
- <text v-if="false">xx</text>
- <text v-else class="placeholder9">閫夋嫨杞﹁締</text>
- <u-icon name="arrow-down" color="#999999" />
- </view>
- <view class="item" @click="isShowDate = true">
- <text v-if="param.aa">{{ param.aa }}</text>
- <text v-else class="placeholder9">閫夋嫨鏃ユ湡</text>
- <u-icon name="arrow-down" color="#999999" />
- </view>
- </view>
- <!-- -->
- <view class="time_list">
- <view class="item" v-for="item,i in timeList" :key="i">{{ item.time }}</view>
- </view>
- <!-- -->
- <view class="main_footer">
- <view class="df_ac">
- <view>宸查�夋嫨锛�</view>
- <view class="sel_time">xxxxxx</view>
- </view>
- <view class="btns">
- <view class="left">
- <view class="item" v-for="item in colorOptions" :key="item.name">
- <view class="box" :style="{ background: item.color }"></view>
- <view class="">{{ item.name }}</view>
- </view>
- </view>
- <view class="sub" @click="$jump('/pages/staff/vehicle/apply')">纭棰勭害</view>
- </view>
- </view>
- <!-- -->
- <!-- 閫夋嫨杞﹁締 -->
- <u-picker keyName="name" :show="isShowCar" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
- <!-- 鏃ユ湡 -->
- <u-datetime-picker :show="isShowDate" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDate = false" mode="date"></u-datetime-picker>
- </view>
-</template>
-
-<script>
-import dayjs from 'dayjs'
-export default {
- data() {
- return {
- isShowCar: false,
- isShowDate: false,
- param: {},
-
- minDate: '',
- carList: [[{ name: 'aa', value: '11' }]],
- timeList: [
- { time: '08:30-09:00' },
- { time: '08:30-09:00' },
- { time: '08:30-09:00' },
- { time: '08:30-09:00' },
- ],
-
- colorOptions: [
- { color: '#279BAA', name: '宸查�夋嫨' },
- { color: '#F7F7F7', name: '鍙绾�' },
- { color: '#cccccc', name: '涓嶅彲棰勭害' },
- ]
- };
- },
- created(){
- this.minDate = new Date().getTime()
- },
- methods: {
- confirmDate(e) {
- console.log(e.value);
- this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
- this.isShowDate = false
- },
- seletedCar(e) {
- console.log(e.value);
- this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
- this.isShowDate = false
- }
- }
-};
-</script>
-
-<style lang="scss">
-.main_app {
- .app_header {
- display: flex;
- align-items: center;
- margin: 0 -15rpx;
- .item {
- width: 330rpx;
- height: 72rpx;
- margin: 15rpx;
- padding: 0 30rpx;
- border-radius: 36rpx;
- border: 1rpx solid #e5e5e5;
- display: flex;
- align-items: center;
- justify-content: space-between;
- align-items: center;
- }
- }
- .main_footer{
- position: absolute;
- width: 100%;
- left: 0;
- bottom: 0;
- padding: 20rpx 30rpx 84rpx;
- box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
- .sel_time{
- color: #279BAA;
- }
- .btns{
- margin-top: 10rpx;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .left{
- display: flex;
- .item{
- display: flex;
- align-items: center;
- margin-right: 20rpx;
- .box{
- margin-right: 10rpx;
- width: 32rpx;
- height: 32rpx;
- }
- }
- }
- .sub{
- width: 184rpx;
- height: 72rpx;
- line-height: 72rpx;
- text-align: center;
- background: #279BAA;
- box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
- border-radius: 36rpx;
- font-size: 30rpx;
- color: #FFFFFF;
- }
- }
- }
- .time_list{
- display: flex;
- justify-content: space-between;
- padding: 30rpx 0;
- flex-wrap: wrap;
- .item{
- width: 220rpx;
- height: 80rpx;
- line-height: 80rpx;
- text-align: center;
- background: #F7F7F7;
- border-radius: 4rpx;
- margin-bottom: 24rpx;
- font-size: 30rpx;
- }
- .active{
- background-color: #279BAA;
- color: #fff;
- }
- .disable{
- background-color: #cccccc;
- color: #999999;
- }
- }
-
-}
-</style>
+<template>
+ <view class="main_app">
+ <view class="app_header">
+ <view class="item" @click="isShowCar = true">
+ <text v-if="param.carCode">{{ param.carCode }}</text>
+ <text v-else class="placeholder9">閫夋嫨杞﹁締</text>
+ <u-icon name="arrow-down" color="#999999" />
+ </view>
+ <view class="item" @click="showDate">
+ <text v-if="param.queryDate">{{ param.queryDate }}</text>
+ <text v-else class="placeholder9">閫夋嫨鏃ユ湡</text>
+ <u-icon name="arrow-down" color="#999999" />
+ </view>
+ </view>
+ <!-- pastFlag -->
+ <view class="time_list">
+ <view class="item" :class="{
+ disable: item.pastFlag,
+ active: item.checked == '1',
+ hasSub: item.carUseBookId,
+ }" @click="datetimeClick(item, i)" v-for="(item, i) in timeList" :key="i">
+ {{ item.startHours }}-{{ item.endHours }}
+ </view>
+ </view>
+ <!-- -->
+ <view class="main_footer">
+ <view class="df_ac">
+ <view>宸查�夋嫨锛�</view>
+ <view class="sel_time">{{ selDatetime }}</view>
+ </view>
+ <view class="df_ac red">
+ {{selPastDatetime}}
+ </view>
+ <view class="btns">
+ <view class="left">
+ <view class="item" v-for="item in colorOptions" :key="item.name">
+ <view class="box" :style="{ background: item.color }"></view>
+ <view class="">{{ item.name }}</view>
+ </view>
+ </view>
+ <view class="sub" @click="onSubmit">纭棰勭害</view>
+ </view>
+ </view>
+ <!-- -->
+ <!-- 閫夋嫨杞﹁締 -->
+ <u-picker keyName="code" :show="isShowCar" :columns="carsList" @confirm="seletedCar"
+ @cancel="isShowCar = false"></u-picker>
+ <!-- 鏃ユ湡 -->
+ <u-datetime-picker ref="startPick" :show="isShowDate" :minDate="minDate" @confirm="confirmDate"
+ @cancel="isShowDate = false" mode="date"></u-datetime-picker>
+ <!-- 璇︽儏 -->
+ <u-popup :show="isShowDetail" :round="12" mode="bottom" @close="isShowDetail = false">
+ <view class="detail_modal">
+ <view class="title">杞﹁締棰勭害鎯呭喌</view>
+ <view class="h1">{{ activeInfo.carCode }}</view>
+ <view class="line">
+ <view class="label">棰勮鐢ㄨ溅鏃舵</view>
+ <view class="value" v-if="activeInfo.startTime">{{ activeInfo.startTime.slice(5, 16) }} -
+ {{ activeInfo.endTime.slice(5, 16) }}
+ </view>
+ </view>
+ <view class="line">
+ <view class="label">鐩殑鍦�</view>
+ <view class="value">{{ activeInfo.addr }}</view>
+ </view>
+ <view class="line">
+ <view class="label">涔樿溅浜烘暟</view>
+ <view class="value" v-if="activeInfo.memberIds">{{ activeInfo.memberIds.split(",").length }}浜�</view>
+ </view>
+ <view class="line">
+ <view class="label">鐢ㄨ溅浜嬬敱</view>
+ <view class="value">{{ activeInfo.content || "" }}</view>
+ </view>
+ <view class="line">
+ <view class="label">鐢宠浜�</view>
+ <view class="value">{{ activeInfo.memberName }}
+ <text class="primaryColor ml12">{{
+ activeInfo.memberPhone
+ }}</text>
+ </view>
+ </view>
+ <view class="btn" @click="isShowDetail = false">鍏抽棴</view>
+ </view>
+ </u-popup>
+ </view>
+</template>
+
+<script>
+ import dayjs from 'dayjs'
+ import {
+ getCarsList,
+ carCanReservationDate,
+ carUseBookDetail
+ } from '@/api'
+ export default {
+ data() {
+ return {
+ isShowCar: false,
+ isShowDate: false,
+ param: {},
+ isShowDetail: false,
+ activeInfo: {},
+
+ minDate: '',
+ carsList: [
+ [{
+ name: 'aa',
+ value: '11'
+ }]
+ ],
+ timeList: [],
+ selDatetime: '',
+ selPastDatetime: '',
+
+ colorOptions: [{
+ color: this.$store.state.primaryColor,
+ name: '宸查�夋嫨'
+ },
+ {
+ color: '#F7F7F7',
+ name: '鍙绾�'
+ },
+ {
+ color: '#cccccc',
+ name: '涓嶅彲棰勭害'
+ },
+ ]
+ }
+ },
+ onLoad() {
+ this.minDate = new Date().getTime() - (6 * 24 * 60 * 60 * 1000)
+ this.initData()
+ },
+ methods: {
+ onSubmit() {
+ const {
+ param
+ } = this
+ const selTimeList = this.timeList.filter(i => i.checked == '1')
+ if (selTimeList.length == 0) {
+ return uni.showToast({
+ title: '璇峰厛閫夋嫨鐢ㄨ溅鏃堕棿娈�',
+ icon: 'none'
+ })
+ }
+ const obj = {
+ carCode: param.carCode,
+ carId: param.carId,
+ startTime: selTimeList[0].startTime,
+ endTime: selTimeList[selTimeList.length - 1].endTime,
+ dateDay: param.queryDate,
+ type: '0'
+ }
+ uni.navigateTo({
+ url: `/pages/staff/vehicle/apply?carCode=${obj.carCode}&carId=${obj.carId}&startTime=${obj.startTime}&endTime=${obj.endTime}&dateDay=${obj.dateDay}&type=${obj.type}`
+ })
+ // this.$jump('/pages/staff/vehicle/apply')
+ },
+ showDate() {
+ this.isShowDate = true
+ if (!this.param.queryDate) {
+ this.$refs.startPick.innerValue = new Date().getTime()
+ }
+ },
+ datetimeClick(item, index) {
+ if (item.carUseBookId) {
+ this.getDetail(item.carUseBookId)
+ return
+ }
+ if (item.isUse == '1') return
+ const {
+ timeList
+ } = this
+ const selTimeList = timeList.filter(i => i.checked == '1')
+ if (selTimeList.length === 0) {
+ this.timeList.forEach((ite, i) => {
+ if (i === index) {
+ ite.checked = '1'
+ this.$forceUpdate()
+ }
+ })
+ } else {
+ const findIndex = selTimeList.findIndex(i => i.index === index)
+ console.log('findIndex', findIndex)
+ if (findIndex === -1) {
+ const startNum = index - selTimeList[0].index
+ const endNum = index - selTimeList[selTimeList.length - 1].index
+ if (startNum == 1 || startNum == -1 || endNum == 1 || endNum == -1) {
+ console.log('鐩搁偦')
+ item.checked = true
+ this.$forceUpdate()
+ } else {
+ return uni.showToast({
+ title: '璇烽�夋嫨鐩搁偦鐨勬椂闂存',
+ icon: 'none'
+ })
+ }
+ } else {
+ if (index === selTimeList[0].index || index === selTimeList[selTimeList.length - 1].index) {
+ item.checked = false
+ this.$forceUpdate()
+ } else {
+ return uni.showToast({
+ title: '璇峰厛鍙栨秷鏈�澶栧眰鐨勬椂闂存',
+ icon: 'none'
+ })
+ }
+
+ }
+ }
+ const selTimeLists = this.timeList.filter(i => i.checked == '1')
+ // console.log('selTimeList', selTimeList);
+ if (selTimeLists.length === 0) {
+ this.selDatetime = ''
+ this.selPastDatetime = ''
+ } else {
+ let pastList = selTimeLists.filter(i => i.pastFlag)
+ if (pastList.length > 0) {
+ this.selPastDatetime = '褰撳墠閫夋嫨鍖呭惈宸茬粡杩囧幓鏃堕棿锛岃纭鍚庡啀鎻愪氦锛�'
+ } else {
+ this.selPastDatetime = ''
+ }
+ this.selDatetime = this.param.queryDate.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[
+ selTimeLists.length - 1].endHours
+ }
+ },
+ getDetail(id) {
+ carUseBookDetail(
+ id
+ ).then(res => {
+ this.activeInfo = res.data
+ this.isShowDetail = true
+ })
+ },
+ confirmDate(e) {
+ this.param.queryDate = dayjs(e.value).format('YYYY-MM-DD')
+ this.isShowDate = false
+ if (this.param.carId && this.param.queryDate) {
+ this.gettimes()
+ }
+ },
+ initData() {
+ getCarsList({
+ type: 0
+ }).then(res => {
+ this.carsList = [res.data]
+ })
+ },
+ gettimes() {
+ const {
+ param
+ } = this
+ carCanReservationDate({
+ dateDay: param.queryDate,
+ carId: param.carId
+ }).then(res => {
+ if (res.code === 200) {
+ this.timeList = res.data || []
+ this.timeList.forEach((i, j) => {
+ i.checked = '0',
+ i.index = j
+ // if (dayjs().format('YYYY-MM-DD') == param.queryDate) {
+ // let endTime = new Date(i.endTime).getTime()
+ // let nowTime = new Date().getTime()
+ i.pastFlag = new Date().getTime() > new Date(i.startTime).getTime()
+ // if (endTime < nowTime) {
+ // i.isUse = 1
+ // }
+ // }
+ })
+ }
+ })
+ },
+ seletedCar(e) {
+ const item = e.value[0]
+ this.$set(this.param, 'carCode', item.code)
+ this.$set(this.param, 'carId', item.id)
+ if (this.param.carId && this.param.queryDate) {
+ this.gettimes()
+ }
+ this.isShowCar = false
+ }
+ }
+ };
+</script>
+
+<style lang="scss">
+ .main_app {
+ .app_header {
+ display: flex;
+ align-items: center;
+ margin: 0 -15rpx;
+
+ .item {
+ width: 330rpx;
+ height: 72rpx;
+ margin: 15rpx;
+ padding: 0 30rpx;
+ border-radius: 36rpx;
+ border: 1rpx solid #e5e5e5;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ align-items: center;
+ }
+ }
+
+ .main_footer {
+ position: absolute;
+ width: 100%;
+ left: 0;
+ bottom: 0;
+ padding: 20rpx 30rpx 84rpx;
+ box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
+
+ .sel_time {
+ color: $uni-color-primary;
+ }
+
+ .btns {
+ margin-top: 10rpx;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .left {
+ display: flex;
+
+ .item {
+ display: flex;
+ align-items: center;
+ margin-right: 20rpx;
+
+ .box {
+ margin-right: 10rpx;
+ width: 32rpx;
+ height: 32rpx;
+ }
+ }
+ }
+
+ .sub {
+ 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;
+ }
+ }
+ }
+
+ .time_list {
+ display: flex;
+ padding: 30rpx 0 240rpx;
+ flex-wrap: wrap;
+
+ .item {
+ width: 220rpx;
+ height: 80rpx;
+ line-height: 80rpx;
+ text-align: center;
+ background: #f7f7f7;
+ border-radius: 4rpx;
+ margin-bottom: 24rpx;
+ font-size: 30rpx;
+ margin-right: 15rpx;
+
+ &:nth-of-type(3n) {
+ margin-right: 0;
+ }
+ }
+
+ .disable {
+ background: #f7f7f7;
+ color: #cccccc;
+ }
+
+ .active {
+ background-color: $uni-color-primary;
+ color: #fff;
+ }
+
+ .hasSub {
+ color: #999999;
+ background: #cccccc;
+ }
+ }
+ }
+
+ .detail_modal {
+ padding: 40rpx 30rpx;
+
+ .title {
+ text-align: center;
+ font-weight: 600;
+ font-size: 32rpx;
+ margin-bottom: 40rpx;
+ }
+
+ .h1 {
+ font-weight: 600;
+ font-size: 32rpx;
+ margin-bottom: 30rpx;
+ }
+
+ .line {
+ display: flex;
+ margin-bottom: 20rpx;
+
+ .label {
+ width: 180rpx;
+ color: #888888;
+ }
+
+ .value {
+ color: #333333;
+ }
+ }
+
+ .btn {
+ margin-top: 230rpx;
+ width: 690rpx;
+ height: 88rpx;
+ line-height: 88rpx;
+ text-align: center;
+ background: $uni-color-primary;
+ border-radius: 44rpx;
+ font-weight: 600;
+ font-size: 32rpx;
+ color: #ffffff;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3