From 3e84978d39cf6399e2335f9a5b10ca144ee9f606 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 07 十一月 2024 14:28:49 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
h5/pages/staff/vehicle/shinei.vue | 835 +++++++++++++++++++++++++++++++----------------------------
1 files changed, 437 insertions(+), 398 deletions(-)
diff --git a/h5/pages/staff/vehicle/shinei.vue b/h5/pages/staff/vehicle/shinei.vue
index 35e29fe..35d1c20 100644
--- a/h5/pages/staff/vehicle/shinei.vue
+++ b/h5/pages/staff/vehicle/shinei.vue
@@ -1,398 +1,437 @@
-<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="isShowDate = true">
- <text v-if="param.queryDate">{{ param.queryDate }}</text>
- <text v-else class="placeholder9">閫夋嫨鏃ユ湡</text>
- <u-icon name="arrow-down" color="#999999" />
- </view>
- </view>
- <!-- -->
- <view class="time_list">
- <view
- class="item"
- :class="{
- disable: item.isUse == 1,
- 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="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
- :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: '',
-
- colorOptions: [
- { color: this.$store.state.primaryColor, name: '宸查�夋嫨' },
- { color: '#F7F7F7', name: '鍙绾�' },
- { color: '#cccccc', name: '涓嶅彲棰勭害' },
- ]
- }
- },
- onLoad() {
- this.minDate = new Date().getTime()
- 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')
- },
- 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 = ''
- } else {
- 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()
- 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;
- }
- }
- .active {
- background-color: $uni-color-primary;
- color: #fff;
- }
- .disable {
- background: #f7f7f7;
- color: #cccccc;
- }
- .hasSub {
- color: #fff;
- 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>
+<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