From 17efddc6a667670dca682bf36b51a43e99615e6d Mon Sep 17 00:00:00 2001
From: k94314517 <8417338+k94314517@user.noreply.gitee.com>
Date: 星期三, 16 十月 2024 15:59:38 +0800
Subject: [PATCH] 代码初始化
---
h5/pages/staff/vehicle/shinei.vue | 544 ++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 385 insertions(+), 159 deletions(-)
diff --git a/h5/pages/staff/vehicle/shinei.vue b/h5/pages/staff/vehicle/shinei.vue
index de4c175..5413edf 100644
--- a/h5/pages/staff/vehicle/shinei.vue
+++ b/h5/pages/staff/vehicle/shinei.vue
@@ -1,172 +1,398 @@
<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>
+ <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: {},
-
- 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
- }
- }
+ 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: 1
+ }).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: #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;
- }
- }
-
+ .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>
--
Gitblit v1.9.3