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/meetingSub.vue | 635 +++++++++++++++++++++++++++++++++++++--------------------
1 files changed, 408 insertions(+), 227 deletions(-)
diff --git a/h5/pages/staff/meetingSub.vue b/h5/pages/staff/meetingSub.vue
index 50305f4..f4f8d62 100644
--- a/h5/pages/staff/meetingSub.vue
+++ b/h5/pages/staff/meetingSub.vue
@@ -1,236 +1,417 @@
<template>
- <view class="main_app">
- <view class="heade_title">
- <image class="icon" src="../../static/staff/ar_left@2x.png" mode="widthFix"></image>
- <text class="date">{{ activeDate }}</text>
- <image class="icon" src="../../static/staff/ar_right@2x.png" mode="widthFix"></image>
- </view>
- <!-- -->
- <view class="meeting_list">
- <view class="item" :class="{active: i === 0}" v-for="item,i in meetingList" :key="i">
- <view class="name">{{ item.name }}</view>
- <view class="line"></view>
- </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/meetingSubOrder')">纭棰勭害</view>
- </view>
- </view>
- <!-- -->
- <u-popup :show="isShowDetail" :round="12" mode="bottom" @close="isShowDetail = false">
- <view class="detail_modal">
- <view class="title">浼氳瀹ら绾︽儏鍐�</view>
- <view class="h1">璁ㄨxxxxx閫夊瀷</view>
- <view class="line">
- <view class="label">浼氳鏃堕棿</view>
- <view class="value">00000</view>
- </view>
- <view class="line">
- <view class="label">浼氳瀹�</view>
- <view class="value">00000</view>
- </view>
- <view class="line">
- <view class="label">棰勭害浜�</view>
- <view class="value">00000</view>
- </view>
- <view class="btn" @click="isShowDetail = false">鍏抽棴</view>
- </view>
- </u-popup>
- </view>
+ <view class="main_app">
+ <view class="heade_title">
+ <image
+ class="icon"
+ src="@/static/staff/ar_left@2x.png"
+ @click="changeDate(-1)"
+ mode="widthFix"
+ ></image>
+ <text class="date">{{ activeDateCum }}</text>
+ <image
+ class="icon"
+ src="@/static/staff/ar_right@2x.png"
+ @click="changeDate(1)"
+ mode="widthFix"
+ ></image>
+ </view>
+ <!-- -->
+ <view class="meeting_list">
+ <view
+ @click="roomClick(item)"
+ class="item"
+ :class="{ active: activeRoom.roomId === item.id }"
+ v-for="(item, i) in meetingList"
+ :key="i"
+ >
+ <view class="name">{{ item.name }}</view>
+ <view class="line"></view>
+ </view>
+ </view>
+ <!-- -->
+ <view class="time_list">
+ <view
+ @click="datetimeClick(item, i)"
+ class="item"
+ :class="{
+ disable: item.isUse,
+ active: item.checked == '1',
+ hasSub: item.bookingTimeId,
+ }"
+ v-for="(item, i) in timeList"
+ :key="i"
+ >
+ {{ item.startTime }}-{{ item.endTime }}
+ </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" :class="{disable: !selDatetime}" @click="onSubmit">纭棰勭害</view>
+ </view>
+ </view>
+ <!-- -->
+ <u-popup
+ :show="isShowDetail"
+ :round="12"
+ mode="bottom"
+ @close="isShowDetail = false"
+ >
+ <view class="detail_modal">
+ <view class="title">浼氳瀹ら绾︽儏鍐�</view>
+ <view class="h1">{{ activeInfo.meetingName }}</view>
+ <view class="line">
+ <view class="label">浼氳鏃堕棿</view>
+ <view class="value" v-if="activeInfo.meetingDate">{{ activeInfo.meetingDate.slice(5) }} {{ activeInfo.meetingTime }}</view>
+ </view>
+ <view class="line">
+ <view class="label">浼氳瀹�</view>
+ <view class="value">{{ activeInfo.roomName }}</view>
+ </view>
+ <view class="line">
+ <view class="label">棰勭害浜�</view>
+ <view class="value">{{ activeInfo.bookingUserName }}</view>
+ </view>
+ <view class="btn" @click="isShowDetail = false">鍏抽棴</view>
+ </view>
+ </u-popup>
+ </view>
</template>
<script>
- export default {
- data() {
- return {
- activeDate: '2022骞�',
- isShowDetail: true,
- meetingList: [
- { name: '201浼氳瀹�' },
- { name: '201浼氳瀹�' },
- { name: '201浼氳瀹�' },
- { name: '201浼氳瀹�' },
- ],
- 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: '涓嶅彲棰勭害' },
- ]
-
- };
- }
- }
+import dayjs from 'dayjs'
+import {
+ roomsListPost,
+ getRoomUseTime,
+ meetingDetail
+} from '@/api'
+export default {
+ data() {
+ return {
+ activeRoom: {
+ yudingDate: ''
+ },
+ selDatetime: '',
+ isShowDetail: false,
+ activeInfo: {},
+ meetingList: [],
+ timeList: [],
+
+ colorOptions: [
+ { color: this.$store.state.primaryColor, name: '宸查�夋嫨' },
+ { color: '#F7F7F7', name: '鍙绾�' },
+ { color: '#cccccc', name: '涓嶅彲棰勭害' },
+ ]
+
+ }
+ },
+ computed: {
+ activeDateCum() {
+ const yudingDate = this.activeRoom.yudingDate
+ let weeks = ['鍛ㄦ棩', '鍛ㄤ竴', '鍛ㄤ簩', '鍛ㄤ笁', '鍛ㄥ洓', '鍛ㄤ簲', '鍛ㄥ叚']
+ return dayjs(yudingDate).format('YYYY骞碝鏈圖鏃�') + ' ' + weeks[dayjs(yudingDate).day()]
+ }
+ },
+ onLoad() {
+ this.activeRoom.yudingDate = dayjs().format('YYYY-MM-DD')
+ this.getRoomList()
+ },
+ methods: {
+ roomClick(item) {
+ this.$set(this.activeRoom, 'roomId', item.id)
+ this.$set(this.activeRoom, 'roomName', item.name)
+ this.$set(this.activeRoom, 'limitNum', item.limitNum)
+ this.getRoomTime()
+ },
+ onSubmit() {
+ const { activeRoom, selDatetime } = this
+ if(!selDatetime) return
+ const selTimeList = this.timeList.filter(i => i.checked == '1')
+ if (selTimeList.length == -1) {
+ return uni.showToast({
+ title: '璇峰厛閫夋嫨浼氳鏃舵',
+ icon: 'none'
+ })
+ }
+ const obj = {
+ startTime: selTimeList[0].startTime,
+ endTime: selTimeList[selTimeList.length - 1].endTime,
+ bookingTimeList: selTimeList.map(i => i.id).join(','),
+ yudingDate: activeRoom.yudingDate,
+ roomName: activeRoom.roomName,
+ limitNum: activeRoom.limitNum,
+ roomId: activeRoom.roomId,
+ }
+ setTimeout(() => {
+ this.$eventBus.$emit('meetingSub', obj)
+ }, 500)
+ uni.navigateTo({
+ url: `/pages/staff/meetingSubOrder`
+ })
+ // this.$jump('/pages/staff/vehicle/apply')
+ },
+ getRoomList() {
+ roomsListPost({}).then(res => {
+ this.meetingList = res.data || []
+ if (this.meetingList.length > 0) {
+ this.$set(this.activeRoom, 'roomId', this.meetingList[0].id)
+ this.$set(this.activeRoom, 'roomName', this.meetingList[0].name)
+ this.$set(this.activeRoom, 'limitNum', this.meetingList[0].limitNum)
+ this.getRoomTime()
+ }
+ })
+ },
+ getRoomTime() {
+ const { activeRoom } = this
+ getRoomUseTime({
+ ...activeRoom
+ }).then(res => {
+ this.timeList = res.data || []
+ this.timeList.forEach((i, j) => {
+ i.checked = '0',
+ i.index = j
+ })
+ })
+ },
+ datetimeClick(item, index) {
+ if (item.bookingTimeId) {
+ this.getDetail(item.bookingTimeId)
+ 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.activeRoom.roomName + ' | ' + selTimeLists[0].startTime + '-' + selTimeLists[selTimeLists.length - 1].endTime
+ }
+ },
+ changeDate(num) {
+ const yudingDate = this.activeRoom.yudingDate
+ if (num < 0 && yudingDate === dayjs().format('YYYY-MM-DD')) return
+ let fn = num > 0 ? 'add' : 'subtract'
+ this.activeRoom.yudingDate = dayjs(yudingDate)[fn](1, 'days').format('YYYY-MM-DD')
+ console.log('yudingDate', this.activeRoom.yudingDate)
+ this.getRoomList()
+ },
+ getDetail(id) {
+ meetingDetail({
+ id
+ }).then(res => {
+ this.activeInfo = res.data
+ this.isShowDetail = true
+ })
+ },
+ }
+}
</script>
<style lang="scss">
- .detail_modal{
- padding: 40rpx 30rpx;
- .title{
- text-align: center;
- font-weight: 500;
- font-size: 32rpx;
- margin-bottom: 40rpx;
- }
- .h1{
- font-weight: 500;
- font-size: 32rpx;
- margin-bottom: 30rpx;
- }
- .line{
- display: flex;
- margin-bottom: 20rpx;
- .label{
- width: 140rpx;
- color: #888888;
- }
- .value{
- color: #333333;
- }
- }
- .btn{
- margin-top: 230rpx;
- width: 690rpx;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- background: #279BAA;
- border-radius: 44rpx;
- font-weight: 500;
- font-size: 32rpx;
- color: #FFFFFF;
- }
- }
- .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;
- 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;
- }
- }
- .meeting_list{
- display: flex;
- padding-left: 30rpx;
- width: 720rpx;
- overflow-x: auto;
- border-bottom: 1rpx solid #E5E5E5;
- .item{
- flex-shrink: 0;
- margin-right: 60rpx;
- padding: 30rpx 0 0;
- .line{
- width: 60rpx;
- height: 4rpx;
- background-color: #fff;
- margin: 26rpx auto 0;
- }
- }
- .active{
- color: #279BAA;
- font-weight: 600;
- font-size: 30rpx;
- .line{
- width: 60rpx;
- height: 4rpx;
- background-color: #279BAA;
- margin: 26rpx auto 0;
- }
- }
- }
- .main_app{
- padding: 0;
- }
-.heade_title{
- display: flex;
- justify-content: center;
- align-items: center;
- .date{
- margin: 0 24rpx;
- font-weight: 600;
- font-size: 32rpx;
- }
- .icon{
- width: 30rpx;
- }
+.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: 140rpx;
+ 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;
+ }
+}
+.main_footer {
+ position: fixed;
+ width: 100%;
+ left: 0;
+ bottom: 0;
+ background-color: #fff;
+ 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;
+ }
+ .disable {
+ background-color: #cccccc;
+ }
+ }
+}
+.time_list {
+ display: flex;
+ padding: 30rpx 30rpx 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;
+ }
+}
+.meeting_list {
+ display: flex;
+ padding-left: 30rpx;
+ width: 720rpx;
+ overflow-x: auto;
+ border-bottom: 1rpx solid #e5e5e5;
+ .item {
+ flex-shrink: 0;
+ margin-right: 60rpx;
+ padding: 30rpx 0 0;
+ .line {
+ width: 60rpx;
+ height: 4rpx;
+ background-color: #fff;
+ margin: 26rpx auto 0;
+ }
+ }
+ .active {
+ color: $uni-color-primary;
+ font-weight: 600;
+ font-size: 30rpx;
+ .line {
+ width: 60rpx;
+ height: 4rpx;
+ background-color: $uni-color-primary;
+ margin: 26rpx auto 0;
+ }
+ }
+}
+.main_app {
+ padding: 0;
+}
+.heade_title {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ .date {
+ margin: 0 24rpx;
+ font-weight: 600;
+ font-size: 32rpx;
+ }
+ .icon {
+ width: 30rpx;
+ }
}
</style>
--
Gitblit v1.9.3