修改页面效果

修改页面效果

miniprogram/pages/meeting/meetingReservation/meetingReservation.js

@@ -69,7 +69,9 @@ Page({
         list: [],
         value: null,
       },
-    }
+    },
+    showPicker: false,
+    actions: [],
   },
 
   /**
@@ -281,7 +283,7 @@ Page({
       max: maxPerNum, // 最大容纳人数
       devices: devicesArr, // 设备
       typeName: queryParam.shapeDict.value, // 形状
-      timeFormat: queryParam.timeRangeDict.value, // 预约时间格式：0 任意时间（管理员），1上午，2下午，3晚上 4 全天。值为0时，读取startTime和endTime为预约会议时间范围；其他值读取mrdate，再拼接时间为预约会议时间范围。
+      timeFormat: 1, // 预约时间格式：0 任意时间（管理员），1上午，2下午，3晚上 4 全天。值为0时，读取startTime和endTime为预约会议时间范围；其他值读取mrdate，再拼接时间为预约会议时间范围。返回值为1时；读取 am，上午  0可预约 1不可预约  pm，下午 0可预约 1不可预约  night，晚上 0可预约 1不可预约，这里默认全部为1
       mrdate: _this.data.dateStr
     }
     // 会议室列表数据
@@ -305,15 +307,83 @@ Page({
       })
     })
   },
-
+  chooseMeetingTime(e) {
-  // 会议室
+    let id = e.currentTarget.dataset.id
-  jumpMeetingRoom(e) {
+    let am = e.currentTarget.dataset.am
-    console.log('jumpMeetingRoom', e)
+    let pm = e.currentTarget.dataset.pm
-    let timeRange = this.data.queryParam.timeRangeDict.value
+    let night = e.currentTarget.dataset.night
-    timeRange = timeRange ? timeRange : 0
+    if (this.data.userDetail.roomRole == 5) {
+      // 管理员，直接进入即可，全天都可以选择
+      this.jumpMeetingRoom(id, 4, 0)
+      return
+    }
+    let cAction = []
+    if (am == 0) {
+      cAction[0] = {
+        name: '上午',
+        subname: '8:00 - 12:00',
+        range: 1,
+        status: 0,
+        id: id
+      }
+    } else {
+      cAction[0] = {
+        name: '上午',
+        subname: '8:00 - 12:00',
+        range: 1,
+        status: 1,
+        id: id
+      }
+    }
+    if (pm == 0) {
+      cAction[1] = {
+        name: '下午',
+        subname: '12:00 - 17:30',
+        range: 2,
+        status: 0,
+        id: id
+      }
+    } else {
+      cAction[1] = {
+        name: '下午（不可预约）',
+        subname: '12:00 - 17:30',
+        range: 2,
+        status: 1,
+        id: id
+      }
+    }
+    if (night == 0) {
+      cAction[2] = {
+        name: '晚上',
+        subname: '17:30 - 24:00',
+        range: 3,
+        status: 0,
+        id: id
+      }
+    } else {
+      cAction[2] = {
+        name: '晚上（不可预约）',
+        subname: '17:30 - 24:00',
+        range: 3,
+        status: 1,
+        id: id
+      }
+    }
+    this.setData({
+      showPicker: true,
+      actions: cAction
+    })
+  },
+  /**
+   * 跳转会议室详情
+   * @param {*} id 会议室id
+   * @param {*} range 会议室时间选择范围
+   * @param {*} status 是否可以预约
+   */
+  jumpMeetingRoom(id, range, status) {
     // 跳转预约详情
     wx.navigateTo({
-      url: "/pages/meeting/meetingRoom/meetingRoom?status=" + e.currentTarget.dataset.status + "&id=" + e.currentTarget.dataset.id + '&time=' + this.data.date + '&timeRange=' + timeRange + '&rId=' + this.data.rId + '&dep=' + this.data.dep + '&depId=' + this.data.depId
+      url: "/pages/meeting/meetingRoom/meetingRoom?status=" + status + "&id=" + id + '&time=' + this.data.date + '&timeRange=' + range + '&rId=' + this.data.rId + '&dep=' + this.data.dep + '&depId=' + this.data.depId
     })
   },
   callAdmin() {
@@ -322,6 +392,16 @@ Page({
       phoneNumber: num
     })
   },
+  onClosePicker() {
+    this.setData({ showPicker: false })
+  },
+  onSelectRange(event) {
+    console.log(event.detail)
+    let timeRange = event.detail.range
+    let id = event.detail.id
+    let status = event.detail.status
+    this.jumpMeetingRoom(id, timeRange, status)
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

miniprogram/pages/meeting/meetingReservation/meetingReservation.json

@@ -6,6 +6,7 @@
         "van-cell": "@vant/weapp/cell/index",
         "van-switch": "@vant/weapp/switch/index",
         "van-button": "@vant/weapp/button/index",
-        "van-notify": "@vant/weapp/notify/index"
+        "van-notify": "@vant/weapp/notify/index",
+        "van-action-sheet": "@vant/weapp/action-sheet/index"
     }
 }

miniprogram/pages/meeting/meetingReservation/meetingReservation.wxml

@@ -4,7 +4,7 @@
   <view class="queryView">
     <van-dropdown-menu active-color="#4e96f8">
       <!-- 时间范围 -->
-      <van-dropdown-item wx:if="{{ userDetail.roomRole != 5 }}" value="{{ queryParam.timeRangeDict.value }}" options="{{ queryParam.timeRangeDict.list }}" bind:change="dictChange" data-type="timeRangeDict" />
+      <!-- <van-dropdown-item wx:if="{{ userDetail.roomRole != 5 }}" value="{{ queryParam.timeRangeDict.value }}" options="{{ queryParam.timeRangeDict.list }}" bind:change="dictChange" data-type="timeRangeDict" /> -->
       <!-- 字典-会议室 -->
       <van-dropdown-item value="{{ queryParam.meetingTypeDict.value }}" options="{{ queryParam.meetingTypeDict.list }}" bind:change="dictChange" data-type="meetingTypeDict" />
       <!-- 字典-人数 -->
@@ -25,23 +25,22 @@
   <view class="meetingRoomView">
     <view wx:for="{{roomDataList}}">
       <view class="roomType">{{item.name}}</view>
-      <view class="meetingRoomItem" bind:tap="jumpMeetingRoom" wx:for="{{item.list}}" wx:for-item="room" wx:key="*this" data-id="{{room.id}}" data-status="{{room.status}}">
+      <view class="meetingRoomItem" bind:tap="chooseMeetingTime" wx:for="{{item.list}}" wx:for-item="room" wx:key="*this" data-id="{{room.id}}" data-am="{{room.am}}" data-pm="{{room.pm}}" data-night="{{room.night}}">
-        <view class="content" wx:if="{{ room.status === 0 || userDetail.roomRole == 5 }}">
+        <view class="content">
           <view class="title">{{room.roomNum}}</view>
+          <view class="am" wx:if="{{room.am == 0}}">上午</view>
+          <view class="am disabled" wx:if="{{room.am == 1}}">上午</view>
+          <view class="pm" wx:if="{{room.pm == 0}}">下午</view>
+          <view class="pm disabled" wx:if="{{room.pm == 1}}">下午</view>
+          <view class="night" wx:if="{{room.am == 0}}">晚上</view>
+          <view class="night disabled" wx:if="{{room.am == 1}}">晚上</view>
           <view class="priceView">
             <view class="unit">
               {{room.capacityNum}}人 {{room.typeName}}
             </view>
           </view>
         </view>
-        <view class="content disabled" wx:if="{{ room.status === 1 && userDetail.roomRole != 5 }}">
+        
-          <view class="title">{{room.roomNum}}</view>
-          <view class="priceView">
-            <view class="unit">
-              不可预约
-            </view>
-          </view>
-        </view>
         <!-- <view class="imgView">
                 <view class="title">{{room.meetingName}}</view>
                 <image class="img" src="{{IMG_NAME + room.indoorPicUrlFirst}}" mode="aspectFill" />
@@ -60,4 +59,14 @@
   </view>
   <van-notify id="van-notify" />
 
-</view>
+</view>
+
+<van-action-sheet
+  show="{{ showPicker }}"
+  actions="{{ actions }}"
+  bind:close="onClosePicker"
+  bind:cancel="onClosePicker"
+  bind:select="onSelectRange"
+  cancel-text="取消"
+  description="请选择预约时段"
+/>

miniprogram/pages/meeting/meetingReservation/meetingReservation.wxss

@@ -27,14 +27,14 @@
   position: relative;
   width: 85%;
   margin: 0px auto;
-  height: 180rpx;
+  height: 228rpx;
-  border: 1px solid #A3CDFF;
+  /* border: 1px solid #A3CDFF; */
-  background-color: #A3CDFF;
+  /* background-color: #A3CDFF; */
 }
 
 .meetingRoomView .meetingRoomItem .disabled {
-  border: 1px solid #F2F2F2;
+  /* border: 1px solid #F2F2F2; */
-  background-color: #F2F2F2;
+  background-color: #F2F2F2 !important;
 }
 
 .meetingRoomView .meetingRoomItem .content .title {
@@ -42,7 +42,18 @@
   font-weight: 700;
   color: black;
   text-align: center;
-  margin-top: 40rpx;
+  
+  /* margin-top: 40rpx; */
+}
+
+.meetingRoomView .meetingRoomItem .content .am,.meetingRoomView .meetingRoomItem .content .pm,.meetingRoomView .meetingRoomItem .content .night {
+  height: 40rpx;
+  line-height: 40rpx;
+  font-size: 20rpx;
+  color: black;
+  text-align: center;
+  background-color: #A3CDFF;
+  margin-top: 5rpx;
 }
 
 .meetingRoomView .meetingRoomItem .content .articleView {