1

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

@@ -17,6 +17,8 @@ Page({
             bg: '/profile/static/index/banner/3.jpg',
             url: ''
         }],
+        protocolFlag : true,
+        protocolTitle : '《会议室服务协议》',
     },
 
     /**
@@ -26,6 +28,14 @@ Page({
 
     },
 
+    // 协议点击
+    protocolChange(){
+        let _this = this;
+        _this.setData({
+            protocolFlag: !_this.data.protocolFlag
+          });
+    },
+
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

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

@@ -1,4 +1,9 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index",
+    "van-field": "@vant/weapp/field/index",
+    "van-checkbox": "@vant/weapp/checkbox/index",
+    "van-checkbox-group": "@vant/weapp/checkbox-group/index"
+  },
   "navigationBarTitleText": "预约信息"
 }

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

@@ -14,7 +14,7 @@
         <view class="detailView">
             <view class="title">10人间 | B2A | 12F</view>
             <view class="itemList">
-                <view class="item" wx:for="{{12}}">#电视</view>
+                <view class="item" wx:for="{{5}}">#电视</view>
             </view>
         </view>
         <view class="priceView">
@@ -23,4 +23,64 @@
         </view>
     </view>
 
+    <!-- 内容 -->
+    <view class="contentView">
+        <view class="item">
+            <van-icon name="calendar-o" size="54rpx" />
+            <view class="time">2024-01-01</view>
+        </view>
+        <view class="item">
+            <van-icon name="clock-o" size="54rpx" />
+            <view class="time">10:00-11:00 共计1小时</view>
+        </view>
+        <view class="item">
+            <van-icon name="contact-o" size="54rpx" />
+            <view class="time">admin 10086</view>
+        </view>
+    </view>
+
+    <!-- 填写信息 -->
+    <view class="fillMsgView">
+        <view class="itemView">
+            <view class="label">会议主题</view>
+            <view class="content">
+                <van-field value="{{ username3 }}"  placeholder="请输入会议主题" input-align="right"  border="{{ false }}"/>
+            </view>
+        </view>
+        <view class="itemView">
+            <view class="label">会议服务</view>
+            <view class="content">
+                <van-icon name="arrow" size="44rpx"/>
+            </view>
+        </view>
+        <view class="itemView">
+            <view class="label">优惠券</view>
+            <view class="content">
+                <view class="coupon">5张可用</view>
+                <van-icon name="arrow" size="44rpx"/>
+            </view>
+        </view>
+        <view class="itemView">
+            <view class="label">总金额</view>
+            <view class="content">
+                <view class="price">￥200.00</view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 协议 -->
+    <view class="protocolView">
+        <van-checkbox value="{{ protocolFlag }}" bind:tap="protocolChange" icon-size="26rpx"></van-checkbox>
+        <view bind:tap="protocolChange">我已阅读并同意</view>
+        <view class="protocolTitle">{{protocolTitle}}</view>
+    </view>
+
+    <!-- 合计 -->
+    <view class="amountView">
+        <view class="priceView">
+            <view class="title">合计:</view>
+            <view class="price">￥ 200.00</view>
+        </view>
+        <view class="caseBtn">提交订单</view>
+    </view>
 </view>

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

@@ -70,8 +70,7 @@
     justify-content: space-between;
     align-items: center;
     margin: 30rpx 22rpx;
-    padding: 0 16rpx 20rpx;
+    padding: 0 16rpx;
-    border-bottom: 1px solid rgb(126, 126, 126, 0.2);
 }
 
 .meetingDetailView .detailView {
@@ -113,3 +112,100 @@
 .meetingDetailView .priceView .unit {
     font-size: 24rpx;
 }
+
+.contentView {
+    border-top: 1px solid rgb(126, 126, 126, 0.2);
+    border-bottom: 1px solid rgb(126, 126, 126, 0.2);
+    margin: 30rpx 22rpx 0;
+    padding: 20rpx 16rpx;
+}
+
+.contentView .item {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin-top: 20rpx;
+}
+
+.contentView .item:first-of-type {
+    margin-top: 0;
+}
+
+.contentView .item .time {
+    margin-left: 10rpx;
+    font-size: 26rpx;
+    line-height: 1;
+}
+
+.fillMsgView {}
+
+.fillMsgView .itemView {
+    border-bottom: 1px solid rgb(126, 126, 126, 0.2);
+    padding: 0 38rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100rpx;
+}
+
+.fillMsgView .itemView .label {
+    font-size: 28rpx;
+}
+
+.fillMsgView .itemView .content {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.fillMsgView .itemView .content .coupon {
+    font-size: 26rpx;
+    color: gray;
+}
+
+.fillMsgView .itemView .content .price {
+    font-size: 30rpx;
+}
+
+.protocolView {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 26rpx;
+    margin: 40rpx 0 50rpx;
+}
+
+.protocolTitle{
+    color: #76aef9;
+}
+
+.amountView{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 38rpx;
+}
+
+.amountView .priceView{
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.amountView .priceView .title{
+    font-size: 32rpx;
+}
+
+.amountView .priceView .price{
+    color: red;
+    font-size: 34rpx;
+}
+
+ .amountView .caseBtn{
+     border-radius: 10rpx;
+    padding: 16rpx 60rpx;
+    color: white;
+    font-size: 30rpx;
+    background: #4e96f8;
+ }