修改会议室列表

app.json

 {
   "pages": [
+    "pages/meetingRoomList/meetingRoomList",
     "pages/scheduleList/scheduleList",
     "pages/index/index",
     "pages/meetingDetail/meetingDetail",
@@ -7,7 +8,6 @@
     "pages/createMeeting/createMeeting",
     "pages/outLookContact/outLookContact",
     "pages/place/place",
-    "pages/meetingRoomList/meetingRoomList",
     "pages/uploadFile/uploadFile",
     "pages/participantsDetail/participantsDetail",
     "pages/applicationDetails/applicationDetails",

components/calendar/calendar.acss

+.am-calendar {
+    background-color: #fff;
+    padding-top: 10rpx;
+}
+
+.am-calendar-months {
+    display: flex;
+    box-sizing: border-box;
+    padding: 0 200rpx;
+    align-items: center;
+    height: 76rpx;
+}
+
+.am-calendar-prev-month, .am-calendar-next-month {
+    display: flex;
+    width: 40rpx;
+    font-size: 32rpx;
+}
+
+.am-calendar-prev-month {
+    justify-content: flex-start;
+}
+
+.am-calendar-next-month {
+    justify-content: flex-end;
+}
+
+.am-calendar-arrow {
+    height: 28rpx;
+    width: 28rpx;
+    background-image: url('https://gw.alipayobjects.com/zos/rmsportal/vYcMhkfyHRIOeVXWdcPe.png');
+    background-size: 8rpx 14rpx;
+    background-position: left center;
+    background-repeat: no-repeat;
+}
+
+.am-calendar-arrow_year {
+    width: 28rpx;
+    background-repeat: no-repeat;
+}
+
+.am-calendar-arrow.next {
+    transform: rotate(180deg);
+}
+
+.am-calendar-selected-month {
+    flex: 1;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #1B263D;
+}
+
+.am-calendar-days {
+    display: flex;
+    height: 26rpx;
+    padding-top: 28rpx;
+    line-height: 26rpx;
+    box-sizing: content-box;
+}
+
+.am-calendar-day {
+    flex: 1;
+    text-align: center;
+    color: #1B263D;
+    font-size: 28rpx;
+}
+
+.am-calendar-dates {
+    display: flex;
+    flex-direction: column;
+}
+
+.am-calendar-week {
+    margin-bottom: 32rpx;
+    display: flex;
+    flex-direction: row;
+}
+
+.am-calendar-week:first-child {
+    margin-top: 32rpx;
+}
+
+.am-calendar-date-wrap {
+    position: relative;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 42rpx;
+    flex: 1;
+}
+
+.am-calendar-date {
+    text-align: center;
+    height: 23rpx;
+    line-height: 23rpx;
+    font-size: 28rpx;
+    font-family: 'Helvetica';
+    color: #1B263D;
+}
+
+.am-calendar-tag {
+    position: absolute;
+    top: 21rpx;
+    width: 42rpx;
+    overflow: hidden;
+    text-overflow: hidden;
+    white-space: nowrap;
+    color: #f5a623;
+    font-size: 10rpx;
+    font-weight: 500;
+}
+
+.am-calendar-today {
+    color: #108ee9;
+}
+
+.am-calendar-gray {
+    color: #ccc;
+}
+
+.am-calendar-selected .am-calendar-block {
+    position: absolute;
+    left: calc(50% - 20rpx);
+    top: calc(50% - 12rpx);
+    transform: translateY(-50%);
+    width: 42rpx;
+    height: 42rpx;
+    background: #309EF2;
+    border-radius: 50%;
+}
+
+.am-calendar-middle.is-range .am-calendar-block {
+    position: absolute;
+    left: 0;
+    top: calc(50% - 10rpx);
+    transform: translateY(-50%);
+    height: 42rpx;
+    background: #309EF2;
+    width: 100%;
+    border-radius: 0;
+}
+
+.am-calendar-start.is-range .am-calendar-block {
+    position: absolute;
+    left: calc(50% - 21rpx);
+    top: calc(50% - 10rpx);
+    transform: translateY(-50%);
+    width: 100%;
+    height: 42rpx;
+    background: #309EF2;
+    border-radius: 2rpx 0 0 2rpx;
+}
+
+.am-calendar-end.is-range .am-calendar-block {
+    position: absolute;
+    left: 0;
+    top: calc(50% - 10rpx);
+    transform: translateY(-50%);
+    width: calc(50% + 21rpx);
+    height: 42rpx;
+    background: #309EF2;
+    border-radius: 0 2rpx 2rpx 0;
+}
+
+.am-calendar-selected .am-calendar-block.has-tag, .am-calendar-start .am-calendar-block.has-tag, .am-calendar-middle .am-calendar-block.has-tag, .am-calendar-end .am-calendar-block.has-tag {
+    top: calc(50% - 7rpx);
+}
+
+.am-calendar-selected .am-calendar-date, .am-calendar-start .am-calendar-date, .am-calendar-middle .am-calendar-date, .am-calendar-end .am-calendar-date {
+    position: relative;
+    color: #fff;
+}
+
+.am-calendar-selected .am-calendar-tag, .am-calendar-start .am-calendar-tag, .am-calendar-middle .am-calendar-tag, .am-calendar-end .am-calendar-tag {
+    color: #fff;
+}
+
+.am-calendar-disable .am-calendar-date {
+    color: #999;
+}
\ No newline at end of file

components/calendar/calendar.axml

+<view class="am-calendar {{className}}" a:if="{{dates.length > 0}}">
+  <view class="am-calendar-months">
+    <view class="am-calendar-prev-month" onTap="onPrevYearTap" a:if="{{haveYear}}">
+      <view class="am-calendar-arrow am-calendar-arrow_year"></view>
+    </view>
+    <view class="am-calendar-prev-month" onTap="onPrevMonthTap">
+      <view class="am-calendar-arrow"></view>
+    </view>
+    <view class="am-calendar-selected-month">{{selectedYear}}年{{selectedMonth + 1}}月</view>
+    <view class="am-calendar-next-month" onTap="onNextMonthTap">
+      <view class="am-calendar-arrow next"></view>
+    </view>
+    <view class="am-calendar-next-month" onTap="onNextYearTap" a:if="{{haveYear}}">
+      <view class="am-calendar-arrow am-calendar-arrow_year next"></view>
+    </view>
+  </view>
+  <view class="am-calendar-days">
+    <block a:for="{{['日', '一', '二', '三', '四', '五', '六']}}">
+      <view class="am-calendar-day">{{item}}</view>
+    </block>
+  </view>
+  <view class="am-calendar-dates">
+    <block a:for="{{dates}}">
+      <view class="am-calendar-week">
+        <block a:for="{{item}}">
+          <view
+            class="am-calendar-date-wrap
+              {{ item.isSelected ? 'am-calendar-selected': '' }}
+              {{ item.isStart ? 'am-calendar-start': '' }}
+              {{ item.isMiddle ? 'am-calendar-middle': '' }}
+              {{ item.isEnd ? 'am-calendar-end': '' }}
+              {{ item.disable ? 'am-calendar-disable': '' }}
+              {{ type === 'range' ? 'is-range' : '' }}"
+            data-year="{{item.year}}"
+            data-month="{{item.month}}"
+            data-date="{{item.date}}"
+            onTap="onDateTap"
+          >
+            <view
+              class="am-calendar-block {{ blockType === 2 ? 'has-tag': '' }}"
+            ></view>
+            <view
+              class="am-calendar-date {{ item.isGray ? 'am-calendar-gray': '' }} {{ item.isToday ? 'am-calendar-today': ''}}"
+            >{{item.date}}</view>
+            <view class="am-calendar-tag" style="{{
+              color: item.isSelected || item.isMiddle || item.isStart || item.isEnd ? '#fff' : (item.disable ? '#999' : item.color)
+            }}">{{item.disable ? '' : item.tag}}</view>
+          </view>
+        </block>
+      </view>
+    </block>
+  </view>
+</view>
\ No newline at end of file

components/calendar/calendar.json

+{
+  "component": true
+}
\ No newline at end of file

pages/meetingRoomList/meetingRoomList.acss

@@ -157,26 +157,34 @@
 .reserveRoomLocation {
   color: rgba(25, 31, 37, 0.56);
 }
-.reserveRoomTimeBar{
+
+.reserveRoomTimeBar {
   overflow: hidden;
+  margin-top: 12rpx;
 }
+
 .reserveRoomTimeBarBg {
   width: 100%;
   display: flex;
-  margin-top: 32rpx;
-  border: 1px solid rgba(25, 31, 37, 0.08);
   box-sizing: border-box;
+  flex-wrap: wrap;
+  flex-direction: column;
+  height: 60rpx;
 }
 
 .reserveRoomTimeBarBg>view {
-  flex: 1;
-  height: 32rpx;
-  border-right: 1px solid #ffffff;
+  height: 24rpx;
+  width: 24rpx;
+  border-radius: 2rpx;
   box-sizing: border-box;
+  margin-top: 6rpx;
+  margin-right: 6rpx;
+  background: #F3F6FA;
+  border: 1px solid rgba(27, 38, 61, 0.10);
 }
 
-.reserveRoomTimeBarBg>view:nth-of-type(48) {
-  border-right: none !important;
+.reserveRoomTimeBarBg>view:nth-of-type(47), .reserveRoomTimeBarBg>view:nth-of-type(48) {
+  margin-right: 0;
 }
 
 .preemption {
@@ -184,15 +192,18 @@
 }
 
 .expired {
-  background: #EDEDEE;
+  background: url(../../assests/cancel.png) center /100% 100% !important;
+  border: 1px solid rgba(27, 38, 61, 0.04) !important;
 }
 
 .reservation {
-  background: #FFFFFF;
+  background: #F3F6FA !important;
+  border: 1px solid rgba(27, 38, 61, 0.10) !important;
 }
 
 .occupied {
-  background: #3296FA;
+  background: rgba(48, 112, 242, 0.28) !important;
+  border: 1rpx solid rgba(27, 38, 61, 0.10) !important;
 }
 
 .reserveRoomTimeBarNum {
@@ -203,6 +214,7 @@
 }
 
 .reserveRoomTimeBarNum>view {
+  text-align: center;
   flex: 1;
 }
 
@@ -222,20 +234,17 @@
 
 .modalContent {
   width: 100%;
-  height: 838rpx;
-  background: #FFFFFF;
-  border-radius: 19rpx 19rpx 0 0;
-  box-shadow: 0 -2px 20px 0 rgba(25, 31, 37, 0.12);
+  height: 732rpx;
 }
 
 .modalHeader {
-  height: 104rpx;
-  line-height: 104rpx;
-  font-size: 34rpx;
-  display: flex;
+  height: 44rpx;
+  line-height: 44rpx;
+  font-size: 32rpx;
   padding: 0 32rpx;
+  text-align: right;
+  color: #3070F2;
   box-sizing: border-box;
-  border-bottom: 1px solid rgba(25, 31, 37, 0.12);
 }
 
 .modalHeader>view {
@@ -258,8 +267,9 @@
   font-size: 30rpx;
   text-align: center;
   display: flex;
-  height: 104rpx;
-  line-height: 104rpx;
+  height: 100rpx;
+  align-items: center;
+  justify-content: center;
 }
 
 .changeDay>view {
@@ -285,7 +295,7 @@
   display: flex;
   align-items: center;
   font-size: 24rpx;
-  color: rgba(25,31,37,0.56);
+  color: rgba(25, 31, 37, 0.56);
 }
 
 .OccupyTimeList>view:nth-of-type(1) {
@@ -395,7 +405,6 @@
 
 .roomScrollView {
   height: 100vh;
-  padding-top: 96rpx;
   box-sizing: border-box;
   position: relative;
 }
@@ -404,56 +413,66 @@
   font-size: 24rpx;
   margin-right: 8rpx;
 }
+
 .occupiedStatus {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.noRoom{
+
+.noRoom {
   position: absolute;
   left: 0;
   top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  width:100%;
-  height:100%;
+  width: 100%;
+  height: 100%;
 }
-.noRoom>view{
+
+.noRoom>view {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
-.noRoomTip{
+
+.noRoomTip {
   margin-top: 32rpx;
   font-size: 30rpx;
-  color: rgba(25,31,37,0.56);
+  color: rgba(25, 31, 37, 0.56);
 }
-.modalFooter{
-  height: 120rpx;
-  line-height: 120rpx;
-  font-size: 26rpx;
-  color: #3296FA;
-  letter-spacing: -0.63px;
-  padding-left: 32rpx;
-  width: 100%;
-  box-sizing: border-box;
+
+.modalTimeSlot {
+  height: 44rpx;
+  font-family: DINAlternate-Bold;
+  font-size: 32rpx;
+  text-align: center;
+  color: #1B263D;
 }
+
 ::-webkit-scrollbar {
   width: 0;
   height: 0;
   color: transparent;
 }
-.beOverdue .iconxuanzhong2{
-  color: rgba(25,31,37,0.12);
+
+.beOverdue .iconicon_Agreed1 {
+  color: rgba(25, 31, 37, 0.12);
   font-size: 40rpx;
 }
-.checked .iconxuanzhong2{
+
+.checked .iconicon_Agreed1 {
   color: #3296FA;
   font-size: 40rpx;
 }
-.Unchecked .iconweigouxuan{
-  color: rgba(25,31,37,0.12);
+
+.Unchecked .iconicon_uncheck {
+  color: rgba(25, 31, 37, 0.12);
   font-size: 40rpx;
 }
+.calendarTip{
+  font-size: 24rpx;
+  color: rgba(25,31,37,.56)
+}
\ No newline at end of file

pages/meetingRoomList/meetingRoomList.axml

@@ -8,46 +8,22 @@
         <text class="iconfont iconxialakuang"></text>
       </view>
     </view>
-    <view class="searchLocation">
-      <view onTap="changeLocation">
-        {{search.locationName}}            
   </view>
-      <view class="xialakuangSize">
-        <text class="iconfont iconxialakuang"></text>
-      </view>
-    </view>
-  </view>
-  <!-- <view class="searchHeader2">
-    <scroll-view scroll-x='{{true}}' scroll-left='{{100}}' scroll-into-view='searchList'>
-      <view a:for="{{equipFacilityList}}" class="equipFacilityList" onTap="changeSearchEquipFacility" data-id='{{item.id}}'>
-        <view class="selectListcheck">
-          <text class="iconfont iconxuanzhong2" a:if="{{search.equipFacilityIds.indexOf(item.id) !== -1}}"></text>
-          <text class="iconfont iconweigouxuan" a:elif="{{search.equipFacilityIds.indexOf(item.id) === -1}}"></text>
-        </view>
-        <view>
-          {{item.name}}
-        </view>
-      </view>
-    </scroll-view>
-  </view> -->
-</view>
-<scroll-view scroll-y="{{canScroll}}" class="roomScrollView">
+  <scroll-view scroll-y="{{canScroll}}" class="roomScrollView">
     <view class="reserveMeeting">
       <view class="meetingRoomContent" a:for="{{reserveRoomList}}" data-roomid="{{item.meetingRoomId}}" data-roomname="{{item.meetingRoomFullName}}" onTap="changeRoomTime">
         <view class="roomMessage">
           <view class="reserveRoomMsg">
             <view class="reserveRoomTitle">
-            {{item.meetingRoomFullName}}
+            {{item.name}}
             </view>
             <view class="reserveRoomEquipFacility" a:if="{{item.equipFacilityNames.length>0}}">
-            <text class="locationIcon iconfont iconshebei"></text><text a:for="{{item.equipFacilityNames}}" a:if="{{item2 !== null}}" a:for-item="item2" a:for-index="index2">{{item2}}{{index2 === item.equipFacilityNames.length-1 ? '' : '/'}}</text>
+              <text class="locationIcon iconfont iconicon_app1"></text>
+              <text a:for="{{item.equipFacilityNames}}" a:if="{{item2 !== null}}" a:for-item="item2" a:for-index="index2">{{item2}}{{index2 === item.equipFacilityNames.length-1 ? '' : '/'}}</text>
             </view>
-          <view class="reserveRoomNumAndLocation" style="{{item.equipFacilityNames.length === 0 ? 'margin-bottom:42rpx' : ''}}">
+            <view class="reserveRoomNumAndLocation">
               <view class="reserveRoomNum">
-              <text class="locationIcon iconfont iconcanhuiren"></text>{{item.capacityNum}}
-            </view>
-            <view class="reserveRoomLocation">
-              <text class="locationIcon iconfont icondingwei1"></text>{{item.locationName}}
+                <text class="locationIcon iconfont iconicon_attender"></text>{{item.capacityNum}}
               </view>
             </view>
           </view>
@@ -79,49 +55,37 @@
         <view class="noRoomTip">当前暂无会议室</view>
       </view>
     </view>
-</scroll-view>
-<view a:if="{{isShowModal}}" class="modal">
-  <view class="modalContent">
+  </scroll-view>
+  <popup show="{{isShowModal}}" onClose="onCancel" position="bottom">
+    <view a:if="{{!isShowCalendar}}" class="modalContent">
       <view class="modalHeader">
-      <view data-type="0" onTap="onCancel">
-        取消
-      </view>
-      <view data-type="1" onTap="onDetermine">
-        确定
+        <text onTap="onDetermine">确定</text>
       </view>
+      <view class="modalTimeSlot">
+        <text a:if="{{!modalFooter.startTime || !modalFooter.endTime}}">请选择会议时间</text>
+        <text a:if="{{modalFooter.startTime && modalFooter.endTime}}">{{modalFooter.startTime}}至{{modalFooter.isOneDay ? modalFooter.endTime.substr(11,16):modalFooter.endTime}} 共{{modalFooter.allMinutes}}分钟</text>
       </view>
       <view class="changeDay">
-      <view class="{{dataNum == '0' ? 'dataNumSelected' : ''}}" onTap="chooseDate" data-num="0">{{search.time.replace(/-/g,".")}}</view>
-      <view class="{{dataNum == '1' ? 'dataNumSelected' : ''}}" onTap="chooseDate" data-num="1">{{tomorrowTime}}</view>
-      <view class="{{dataNum == '2' ? 'dataNumSelected' : ''}}" onTap="chooseDate" data-num="2">{{afterTomorrowTime}}</view>
-      <!-- <view onTap="selectDate">自定义</view> -->
+        <view class="{{dataNum == '0' ? 'dataNumSelected' : ''}}" onTap="chooseDate" data-num="0">{{TimeSlot.todayTime.split('/')[1]}}月{{TimeSlot.todayTime.split('/')[2]}}日</view>
+        <view class="{{dataNum == '1' ? 'dataNumSelected' : ''}}" onTap="chooseDate" data-num="1">{{TimeSlot.tomorrowTime.split('/')[1]}}月{{TimeSlot.tomorrowTime.split('/')[2]}}日</view>
+        <view class="{{dataNum == '2' ? 'dataNumSelected' : ''}}" onTap="chooseDate" data-num="2">{{TimeSlot.afterTomorrowTime.split('/')[1]}}月{{TimeSlot.afterTomorrowTime.split('/')[2]}}日</view>
+        <view class="{{dataNum == '3' ? 'dataNumSelected' : ''}}" onTap="chooseDate" data-num="3">自定义日期</view>
       </view>
-    <scroll-view scroll-y='{{true}}' class="modalOccupyTimeSlot" onScroll="modalScroll" scroll-into-view="{{toThisTime}}">
+      <scroll-view scroll-y='{{true}}' class="modalOccupyTimeSlot" scroll-into-view="{{toThisTime}}">
         <view class="OccupyTimeList" a:for="{{modalList}}" data-index="{{index}}" onTap="onChangeModalTime" id="{{item.reserveStartTime.substr(11,15)}}">
-        <!-- <view data-status="{{item.reserveStatus}}" data-index="{{index}}">
-          <timecheckmodal
-            startTime="{{meetingTime.startTime}}"
-            endTime="{{meetingTime.endTime}}"
-            date="{{meetingTime.date}}"
-            sectionStartTime="{{item.reserveStartTime}}"
-            sectionEndTime="{{item.reserveEndTime}}"
-            onselectTime="{{onselectTime}}"
-          >
-          </timecheckmodal>
-        </view> -->
           <view>
             <view a:if="{{item.status==='BeOverdue'}}" class="beOverdue">
-            <text class="iconfont iconxuanzhong2"></text>
+              <text class="iconfont iconicon_Agreed1"></text>
             </view>
             <view a:elif="{{item.status==='Uncheck'}}" class="Unchecked">
-            <text class="iconfont iconweigouxuan"></text>
+              <text class="iconfont iconicon_uncheck"></text>
             </view>
             <view a:elif="{{item.status==='checked'}}" class="checked">
-            <text class="iconfont iconxuanzhong2"></text>
+              <text class="iconfont iconicon_Agreed1"></text>
             </view>
           </view>
           <view>
-          <view>{{item.reserveStartTime.substr(10,15)}} ~ {{item.reserveEndTime.substr(10,15)}} </view>
+            <view>{{item.reserveStartTime.substr(10,15)}} ~ {{item.reserveEndTime.substr(10,15)}}</view>
             <view class="expiredStatus" a:if="{{item.reserveStatus === 'expired'}}">
             已过期
             </view>
@@ -131,18 +95,13 @@
           </view>
         </view>
       </scroll-view>
-    <view class="modalFooter">
-      <text a:if="{{!modalFooter.startTime || !modalFooter.endTime}}">会议时间：请选择会议时间</text>
-      <text a:if="{{modalFooter.startTime && modalFooter.endTime}}">会议时间：{{modalFooter.startTime}}至{{modalFooter.isOneDay ? modalFooter.endTime.substr(11,16):modalFooter.endTime}} 共{{modalFooter.allMinutes}}分钟</text>
-    </view>
-  </view>
-</view>
-<lable-tree
-  a:if="{{isShowLableModal}}"
-  areTreeList="{{lableTreeList}}"
-  locationName="{{location.name}}"
-  locationId="{{location.id}}"
+    </view>
+    <view a:else>
+      <view class="calendarTip">
+        自定义时间
+      </view>
+      <calendar type="single" haveYear="{{false}}" selectedDate="{{meetingTime.date}}" onSelect="handleSelect" onMonthChange="onMonthChange" onYearChange="onYearChange" onSelectHasDisableDate="onSelectHasDisableDate" />
+    </view>
+  </popup>
+  <lable-tree a:if="{{isShowLableModal}}" areTreeList="{{lableTreeList}}" locationName="{{location.name}}" locationId="{{location.id}}" isShow="{{isShowLableModal}}" onPropsCS="onPropsCS">
+  </lable-tree>
\ No newline at end of file
-  isShow="{{isShowLableModal}}"
-  onPropsCS="onPropsCS"
->
-</lable-tree>
\ No newline at end of file

pages/meetingRoomList/meetingRoomList.json

 {
   "usingComponents": {
-        "timecheckmodal": "../../components/timeCheckModal/timeCheckModal",
-        "lable-tree": "../../components/selectArea/selectArea"
+    "popup": "../../components/popup/index",
+    "calendar": "../../components/calendar/calendar"
   },
   "defaultTitle": "所有会议室"
 }