1

miniprogram/app.json

@@ -52,7 +52,8 @@
     "pages/meeting/meetingReservation/meetingReservation",
     "pages/meeting/visitorIinvitation/visitorIinvitation",
     "pages/meeting/meetingRoom/meetingRoom",
-    "pages/meeting/meetingRoom/meetingFacilities/meetingFacilities"
+    "pages/meeting/meetingRoom/meetingFacilities/meetingFacilities",
+    "pages/meeting/meetingRoom/meetingOrder/meetingOrder"
   ],
   "window": {
     "backgroundTextStyle": "light",

miniprogram/pages/meeting/meetingRoom/meetingFacilities/meetingFacilities.wxml

@@ -1,11 +1,23 @@
 <view class="containerView">
-    <!-- 设施 -->
+
+    <!-- 空间设施 -->
     <view class="facilitiesView">
         <view class="leftLineTitle">空间设施</view>
         <view class="itemView">
             <view class="singleItem" wx:for="{{10}}">
-                <van-icon name="after-sale" size="40px" />
+                <van-icon name="tv-o" size="40px" />
-                <view class="name">VIP</view>
+                <view class="name">TV</view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 免费服务 -->
+    <view class="facilitiesView">
+        <view class="leftLineTitle">免费服务</view>
+        <view class="itemView">
+            <view class="singleItem" wx:for="{{10}}">
+                <van-icon name="flower-o" size="40px" />
+                <view class="name">服务</view>
             </view>
         </view>
     </view>

miniprogram/pages/meeting/meetingRoom/meetingOrder/meetingOrder.js

@@ -0,0 +1,77 @@
+const app = getApp()
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        IMG_NAME: app.IMG_NAME,
+        bannerList: [{
+            bg: '/profile/static/index/banner/1.jpg',
+            url: ''
+        }, {
+            bg: '/profile/static/index/banner/2.jpg',
+            url: ''
+        }, {
+            bg: '/profile/static/index/banner/3.jpg',
+            url: ''
+        }],
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

miniprogram/pages/meeting/meetingRoom/meetingOrder/meetingOrder.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "navigationBarTitleText": "预约信息"
+}

miniprogram/pages/meeting/meetingRoom/meetingOrder/meetingOrder.wxml

@@ -0,0 +1,26 @@
+<view class="containerView">
+    <!-- 轮播图 -->
+    <view class="swiperView">
+        <view class="tag">会议室</view>
+        <swiper class='swiper-box' indicator-dots autoplay interval="3000" duration="1000" circular='true'>
+            <swiper-item wx:for="{{bannerList}}" wx:key="index">
+                <image class="img" src="{{IMG_NAME + item.bg}}" mode="aspectFill"></image>
+            </swiper-item>
+        </swiper>
+    </view>
+
+    <!-- 详细信息 -->
+    <view class="meetingDetailView">
+        <view class="detailView">
+            <view class="title">10人间 | B2A | 12F</view>
+            <view class="itemList">
+                <view class="item" wx:for="{{12}}">#电视</view>
+            </view>
+        </view>
+        <view class="priceView">
+            <view class="price">￥ 200.00/</view>
+            <view class="unit">半小时 起</view>
+        </view>
+    </view>
+
+</view>

miniprogram/pages/meeting/meetingRoom/meetingOrder/meetingOrder.wxss

@@ -0,0 +1,115 @@
+.containerView {
+    height: 100vh;
+    width: 100vw;
+    overflow: auto;
+    padding-bottom: 100rpx;
+    background: #ffffff;
+}
+
+.swiperView {
+    position: relative;
+}
+
+.swiperView .tag {
+    position: absolute;
+    left: 22rpx;
+    top: 20rpx;
+    background: #76aef9;
+    font-size: 28rpx;
+    color: white;
+    font-weight: bold;
+    padding: 10rpx 40rpx;
+    border-top-right-radius: 6rpx;
+    border-bottom-right-radius: 6rpx;
+    z-index: 999;
+}
+
+.swiper-box {
+    border-radius: 14rpx;
+    box-sizing: border-box;
+    height: 358rpx;
+    margin: 0 22rpx;
+    overflow: hidden;
+}
+
+.swiper-box .img {
+    width: 100%;
+    height: 100%;
+}
+
+/* 轮播小点点 */
+.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
+    margin-left: 36%;
+}
+
+.swiper-box .wx-swiper-dot {
+    width: 20rpx;
+    display: inline-flex;
+    height: 5rpx;
+    margin-left: 10rpx;
+    justify-content: space-between;
+}
+
+.swiper-box .wx-swiper-dot::before {
+    content: '';
+    flex-grow: 1;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 0rpx
+}
+
+.swiper-box .wx-swiper-dot-active::before {
+    background: #ff3333;
+}
+
+.swiper-box .wx-swiper-dot-active {
+    width: 40rpx;
+}
+
+.meetingDetailView {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 30rpx 22rpx;
+    padding: 0 16rpx 20rpx;
+    border-bottom: 1px solid rgb(126, 126, 126, 0.2);
+}
+
+.meetingDetailView .detailView {
+    flex: 1;
+    word-break: break-all;
+    margin-right: 20rpx;
+}
+
+.meetingDetailView .detailView .title {
+    font-size: 32rpx;
+}
+
+.meetingDetailView .detailView .itemList {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
+    align-items: center;
+    margin-top: 14rpx;
+    font-size: 26rpx;
+    color: gray;
+}
+
+.meetingDetailView .detailView .itemList .item {
+    margin-right: 12rpx;
+}
+
+.meetingDetailView .priceView{
+    display: flex;
+    justify-content: start;
+    align-items: flex-end;
+    line-height: 1;
+}
+
+.meetingDetailView .priceView .price{
+    font-size: 36rpx;
+    color: red;
+}
+
+.meetingDetailView .priceView .unit{
+    font-size: 24rpx;
+}

miniprogram/pages/meeting/meetingRoom/meetingRoom.js

@@ -53,6 +53,13 @@ Page({
         })
     },
 
+    // 跳转会议订单
+    jumpMeetingOrder() {
+        wx.navigateTo({
+            url: "/pages/meeting/meetingRoom/meetingOrder/meetingOrder",
+        })
+    },
+
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

miniprogram/pages/meeting/meetingRoom/meetingRoom.wxml

@@ -59,6 +59,6 @@
     </view>
 
     <!-- 预约 -->
-    <view class="reservationBtn">会议预约</view>
+    <view class="reservationBtn" bind:tap="jumpMeetingOrder">会议预约</view>
 
 </view>