From 2bc4a739db642494accbf5be1fa55793f4652f44 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 10 三月 2025 15:31:16 +0800
Subject: [PATCH] ll
---
h5/pages/staff/vehicle/shiwai.vue | 588 +++++++++++++++++++++++++++++++++++++---------------------
1 files changed, 373 insertions(+), 215 deletions(-)
diff --git a/h5/pages/staff/vehicle/shiwai.vue b/h5/pages/staff/vehicle/shiwai.vue
index aab042f..a042bd0 100644
--- a/h5/pages/staff/vehicle/shiwai.vue
+++ b/h5/pages/staff/vehicle/shiwai.vue
@@ -1,236 +1,394 @@
<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.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '璇烽�夋嫨' }}</text>
- <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
- </view>
+ <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="showDate">
+ <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">
+ <view class="df_sb">
+ <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>
- <view class="line">
- <view class="label">
- <text>*</text>
- <text>棰勮鐢ㄨ溅鏃舵</text>
- </view>
- <view class="value" @click="isShowDate = true">
- <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '璇烽�夋嫨' }}</text>
- <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
- </view>
- </view>
- </view>
- <view class="have_info">
- <view class="tit">鎮ㄧ敵璇风殑鐢ㄨ溅鏃舵宸叉湁杞﹁締棰勭害</view>
- <view class="content">
- <view class="card">鐨朅1212</view>
- <view class="line">
- <text>鐢ㄨ溅鏃舵</text>
- <text>111111</text>
- </view>
- <view class="line">
- <text>鐩殑鍦�</text>
- <text>111111</text>
- </view>
- <view class="line">
- <text>涔樿溅浜烘暟</text>
- <text>111111</text>
- </view>
- <view class="line">
- <text>鐢ㄨ溅浜嬬敱</text>
- <text>111111</text>
- </view>
- <view class="line">
- <text>鐢宠浜�</text>
- <text>111111</text>
- </view>
- </view>
- </view>
- <view class="main_footer">
- <text>宸查�夋嫨锛�</text>
- <text class="sel">132123</text>
- <text class="btn" @click="$jump('/pages/staff/vehicle/apply')">纭棰勭害</text>
- </view>
- <!-- -->
- <!-- 閫夋嫨杞﹁締 -->
- <u-picker
- keyName="name"
- :show="isShowCar"
- @close="isShowCar = false"
- :closeOnClickOverlay="true"
- :columns="carList"
- @confirm="seletedCar"
- @cancel="isShowCar = false"
- ></u-picker>
+ <view class="red">{{placeStr}}</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="datetime"
+ :show="isShowDate"
+ :filter="timeFilter"
+ title="寮�濮嬫椂闂�"
+ :minDate="minDate"
+ @close="isShowDate = false"
+ :closeOnClickOverlay="true"
+ @confirm="seletedDate"
+ @cancel="isShowDate = false"
+ /> -->
<u-datetime-picker
- mode="datetime"
- keyName="name"
- :show="isShowDate"
- :filter="timeFilter"
- @close="isShowDate = false"
- :closeOnClickOverlay="true"
- @confirm="seletedDate"
- @cancel="isShowDate = false"
- />
- <uni-datetime-picker
- v-model="datetimerange"
- type="datetimerange"
- start="2021-3-20 12:00:00"
- end="2021-6-20 20:00:00"
- rangeSeparator="鑷�"
- />
- </view>
+ mode="datetime"
+ :show="isShowDate"
+ ref="startPick"
+ title="寮�濮嬫椂闂�"
+ :formatter="formatter"
+ :minDate="minDate"
+ @close="isShowDate = false"
+ :closeOnClickOverlay="true"
+ @confirm="seletedDate"
+ @cancel="isShowDate = false"
+ />
+ <u-datetime-picker
+ mode="datetime"
+ :show="isShowEndDate"
+ title="缁撴潫鏃堕棿"
+ :formatter="formatter"
+ :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,
- carList: [],
- datetimeOp: []
- };
- },
- methods: {
- seletedCar() {},
- seletedDate() {
- this.isShowDate = false;
- },
- timeFilter(mode, options) {
- if (mode === 'minute') {
- return options.filter(option => option === '00' || option === '30');
+ data() {
+ return {
+ param: {},
+ isShowCar: false,
+ isShowDate: false,
+ isShowEndDate: false,
+ carsList: [],
+ info: [],
+
+ minDate: '',
+ placeStr: ''
+ }
+ },
+ onLoad() {
+ // this.minDate = new Date(dayjs().format('YYYY-MM-DD HH:mm') + ':00').getTime()
+ this.minDate = new Date().getTime() - (6 * 24 * 60 * 60 * 1000)
+ this.initData()
+ uni.setStorageSync('vehicleAppForm', {})
+ },
+ methods: {
+ formatter(type, value) {
+ if (type === 'year') {
+ return `${value}骞碻
}
- return options;
- }
- }
+ if (type === 'month') {
+ return `${value}鏈坄
+ }
+ if (type === 'day') {
+ return `${value}鏃
+ }
+ if (type === 'hour') {
+ return `${value}鏃禶
+ }
+ if (type === 'minute') {
+ return `${value}鍒哷
+ }
+ return value
+ },
+ showDate() {
+ this.isShowDate = true
+ if (!this.param.startTime) {
+ this.$refs.startPick.innerValue = new Date().getTime()
+ }
+ },
+ 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()
+ }
+ console.log(e);
+ if(new Date(this.param.startTime).getTime() < new Date().getTime() - 60 * 1000){
+ this.placeStr = '褰撳墠閫夋嫨鍖呭惈宸茬粡杩囧幓鏃堕棿锛岃纭鍚庡啀鎻愪氦锛�'
+ }else{
+ this.placeStr = ''
+ }
+ 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 {
- .tit {
- color: #ed4545;
- margin: 40rpx 0 24rpx;
- }
- .content {
- background: #f7f7f7;
- border-radius: 16rpx;
- padding: 30rpx 30rpx 10rpx;
- .card {
- margin-bottom: 30rpx;
- font-weight: 500;
- 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;
- }
- }
- }
- }
+ 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%;
- }
- }
- }
+ .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: absolute;
- width: 100%;
- left: 0;
- 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: #279baa;
- box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
- border-radius: 36rpx;
- font-size: 30rpx;
- color: #ffffff;
+ position: fixed;
+ width: 100%;
+ left: 0;
+ background-color: #fff;
+ bottom: 0;
+ padding: 20rpx 30rpx 62rpx;
+ box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
+
+ .df_sb{
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
- .sel {
- color: #279baa;
- flex: 1;
+ .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>
--
Gitblit v1.9.3