描述:展厅

miniprogram/api/meeting/exhibition.js

@@ -0,0 +1,40 @@
+import {
+    request
+} from '../selfRequest';
+
+
+// 展厅列表
+export function showroomListRq() {
+    return request({
+        url: '/api/showroom/list',
+        method: "post",
+    });
+}
+
+// 展厅详情
+export function showroomDetailRq(id) {
+    return request({
+        url: '/api/showroom/get/' + id,
+        method: "get",
+    });
+}
+
+
+// 查询展厅能否预约
+export function selectFreeShowRoomRq(data) {
+    return request({
+        url: '/api/showroom/selectFreeShowRoom',
+        method: "post",
+        data
+    });
+}
+
+// 查询展厅已经预约的记录
+export function appointmentRecordRq(data) {
+    return request({
+        url: '/api/showroom/appointmentRecord',
+        method: "post",
+        data
+    });
+}
+

miniprogram/app.json

@@ -65,7 +65,11 @@
         "pages/meeting/visitorIinvitation/list/list",
         "pages/meeting/visitorIinvitation/add/add",
         "pages/meeting/visitorIinvitation/detail/detail",
-        "pages/meeting/visitorIinvitation/indexBar/indexBar"
+        "pages/meeting/visitorIinvitation/indexBar/indexBar",
+        "pages/meeting/exhibition/list/list",
+        "pages/meeting/exhibition/detail/detail",
+        "pages/meeting/exhibition/booked/booked",
+        "pages/meeting/exhibition/order/order"
     ],
     "window": {
         "backgroundTextStyle": "light",

miniprogram/pages/index/index.js

@@ -92,7 +92,7 @@ Page({
             {
                 name: "展厅预约",
                 img: "/profile/static/index/menu-ztyy.png",
-                path: ""
+                path: "/pages/meeting/exhibition/list/list"
             },
             {
                 name: "访客预约",

miniprogram/pages/meeting/exhibition/booked/booked.js

@@ -0,0 +1,222 @@
+const app = getApp()
+
+import Notify from '@vant/weapp/notify/notify';
+
+import {
+    appointmentRecordRq,
+    selectFreeShowRoomRq
+} from "../../../../api/meeting/exhibition.js"
+
+
+import {
+    selfFormatTimeYMDHMS,
+    selfFormatTimeYMDH
+} from "../../../../utils/util.js"
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        id: null,
+        minTime: null,
+        maxTime: null,
+        endMaxTime: null,
+        startTime: null,
+        endTime: null,
+        showTime: false,
+        dataList: [],
+        filterTime(type, options) {
+            if (type === 'minute') {
+                return options.filter((option) => option == '00');
+            }
+            return options;
+        },
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        console.log('onLoad', options);
+        // 获取传递参数
+        this.setData({
+            ...options
+        })
+        // 初始化时间
+        this.initParamTime()
+    },
+
+    // 初始化时间
+    initParamTime() {
+        let maxTime = new Date();
+        maxTime.setFullYear(maxTime.getFullYear() + 3)
+        this.setData({
+            maxTime: maxTime.getTime()
+        })
+        this.setEndMaxTime(this.data.startTime)
+        // 设置最小时间
+        this.setMinTime()
+    },
+
+    // 设置最小时间
+    setMinTime() {
+        let minTime = new Date(selfFormatTimeYMDH(new Date()) + ':00:00').getTime()
+        this.setData({
+            minTime,
+            startTime: minTime
+        })
+    },
+
+    // 指定天的最后一秒
+    setEndMaxTime(time) {
+        let endMaxTime = new Date(new Date(time).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
+        this.setData({
+            endMaxTime: endMaxTime
+        })
+    },
+
+    // 选择-开始时间
+    onInputStartTime(event) {
+        this.setData({
+            startTime: event.detail,
+        });
+        this.setEndMaxTime(event.detail)
+    },
+
+    // 选择-结束时间
+    onInputEndTime(event) {
+        let _this = this;
+        this.setData({
+            endTime: event.detail,
+        });
+    },
+
+    // 预约时间
+    reservationTime() {
+        this.setData({
+            showTime: true
+        })
+    },
+
+    // 确认时间
+    confirmTime() {
+        let _this = this;
+        let id = _this.data.id;
+        let startTime = _this.data.startTime;
+        let endTime = _this.data.endTime;
+        let paramUrl = "?id=" + id + "&startTime=" + selfFormatTimeYMDHMS(startTime) + "&endTime=" + selfFormatTimeYMDHMS(endTime);
+
+        // 预约时间不能小于1小时
+        if ((1000 * 60 * 60) > (endTime - startTime)) {
+            Notify({
+                type: 'danger',
+                message: '预约时间不能小于1小时',
+                duration: 1000,
+                selector: '#notify',
+            });
+            return
+        }
+
+        // 查询展厅能否预约
+        selectFreeShowRoomRq({
+            "id": id,
+            "startTime": selfFormatTimeYMDHMS(startTime),
+            "endDate": selfFormatTimeYMDHMS(endTime)
+        }).then(res => {
+            console.log('selectFreeShowRoomRq', res);
+            // 可以预约
+            if (res.code == 0) {
+                wx.navigateTo({
+                    url: "/pages/meeting/exhibition/order/order" + paramUrl,
+                })
+                _this.setData({
+                    showTime: false
+                })
+            } else { // 不能预约
+                Notify({
+                    type: 'danger',
+                    message: res.msg,
+                    duration: 1000,
+                    selector: '#notify',
+                });
+            }
+        })
+    },
+
+    // 取消时间
+    cancelTime() {
+        this.setData({
+            showTime: false
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+        console.log('onShow');
+        let _this = this;
+        appointmentRecordRq({
+            "showroomId": _this.data.id
+        }).then(res => {
+            console.log('appointmentRecordRq', res);
+            let dataList = res.data;
+            dataList.map(item => {
+                item.nowDate = item.nowDate.substring(0, 10);
+                item.reservations = item.reservations.map(record => {
+                    record.startTime = record.startTime.substring(11)
+                    record.endDate = record.endDate.substring(11)
+                    return record;
+                })
+                return item
+            })
+            _this.setData({
+                dataList
+            })
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

miniprogram/pages/meeting/exhibition/booked/booked.json

@@ -0,0 +1,8 @@
+{
+    "usingComponents": {
+        "van-datetime-picker": "@vant/weapp/datetime-picker/index",
+        "van-popup": "@vant/weapp/popup/index",
+        "van-notify": "@vant/weapp/notify/index"
+    },
+    "navigationBarTitleText": "展厅预约"
+}

miniprogram/pages/meeting/exhibition/booked/booked.wxml

@@ -0,0 +1,38 @@
+<view class="containerView public">
+
+    <view class="dataView">
+        <!-- 标题 -->
+        <view class="leftLineTitle">展厅预约情况</view>
+        <!-- 预约列表 -->
+        <view class="itemVIew" wx:for="{{dataList}}" wx:for-item="item" wx:key="*this">
+            <view class="item">{{item.nowDate}}</view>
+            <view class="itemTimeView" wx:for="{{item.reservations}}" wx:for-item="record" wx:key="*this">
+                <view class="time">{{record.startTime}}~{{record.endDate}}</view>
+                <view class="status">已预约</view>
+            </view>
+        </view>
+    </view>
+
+    <!-- 预约时间 -->
+    <view class="submitBtn" bind:tap="reservationTime">预约时间</view>
+
+    <!-- 选择时间 -->
+    <view class="selfPop" wx:if="{{showTime}}">
+        <view class="labelView">
+            <view class="leftLineTitle">请选择开始时间</view>
+        </view>
+        <van-datetime-picker  type="datetime" value="{{ startTime }}" min-date="{{ minTime }}" max-date="{{ maxTime }}" bind:input="onInputStartTime" bind:confirm="confirmTime" bind:cancel="cancelTime" confirm-button-text="" cancel-button-text="" 
+        filter="{{ filterTime }}"/>
+
+        <view class="labelView">
+            <view class="leftLineTitle">请选择结束时间</view>
+            <view class="enter" bind:tap="confirmTime">确定</view>
+        </view>
+        <van-datetime-picker  type="datetime" value="{{ endTime }}" min-date="{{ startTime }}" max-date="{{ endMaxTime }}" bind:input="onInputEndTime" bind:confirm="confirmTime" 
+        confirm-button-text="" cancel-button-text="" bind:cancel="cancelTime" filter="{{ filterTime }}"/>
+    </view>
+
+    <!-- 消息提示 -->
+    <van-notify id="notify" />
+
+</view>

miniprogram/pages/meeting/exhibition/booked/booked.wxss

@@ -0,0 +1,66 @@
+.containerView.public {
+    padding-bottom: 300rpx;
+}
+
+.dataView {
+    padding: 20rpx;
+}
+
+.itemVIew {
+    box-shadow: rgba(153,134,134,0.2) 0px 0px 4px 0px;
+    padding: 0 20rpx;
+    margin-top: 40rpx;
+}
+
+.itemVIew .item,
+.itemVIew .itemTimeView {
+    padding: 30rpx 0;
+    background-image: linear-gradient(to right, rgb(126, 126, 126, 0.1), rgb(126, 126, 126, 0.1), transparent 100%);
+    background-size: 20rpx 2rpx;
+    background-repeat: repeat-x;
+}
+
+.itemVIew .item {
+    color: #f1bb6b;
+    font-size: 30rpx;
+}
+
+.itemVIew .itemTimeView {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 28rpx;
+}
+
+.itemVIew .itemTimeView .status {
+    color: #b3b3b3;
+}
+
+.submitBtn {
+   z-index: 0;
+}
+
+.selfPop{
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background: #ffffff;
+    transition: 1s all;
+}
+
+.selfPop .labelView{
+    box-sizing: border-box;
+    padding: 20rpx 34rpx 20rpx 20rpx;
+    background: #f5f7fa;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.selfPop .labelView .enter{
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #4e96f8;
+}

miniprogram/pages/meeting/exhibition/detail/detail.js

@@ -0,0 +1,131 @@
+const app = getApp()
+
+import {
+    selectCoordinateRq
+} from "../../../../api/meeting/meetingRoom.js"
+import {
+    showroomDetailRq
+} from "../../../../api/meeting/exhibition.js"
+
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        IMG_NAME: app.IMG_NAME,
+        id: null,
+        detail: {},
+        bannerList: [],
+        mapData: {}
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        let _this = this;
+        console.log('onLoad', options);
+        _this.setData({
+            ...options
+        })
+        showroomDetailRq(_this.data.id).then(res => {
+            console.log('showroomDetailRq', res);
+            _this.setData({
+                detail: res,
+                bannerList: [res.indoorPicUrl]
+            })
+        })
+        // 获取地址信息
+        _this.getAddress()
+    },
+
+    // 获取地址信息
+    getAddress() {
+        let _this = this;
+        selectCoordinateRq().then(res => {
+            _this.setData({
+                address: res,
+                mapData: {
+                    latitude: res.lat,
+                    longitude: res.lng,
+                    markers: [{
+                        id: 1,
+                        latitude: res.lat,
+                        longitude: res.lng,
+                        title: res.address,
+                    }]
+                },
+            })
+        })
+    },
+
+    // 打开地图
+    openMap(e) {
+        console.log('openMap', e);
+        let _this = this;
+        wx.openLocation({
+            name: _this.data.address.address,
+            latitude: _this.data.address.lat,
+            longitude: _this.data.address.lng,
+        })
+    },
+
+    // 跳转-预约
+    jumpBooked() {
+        let id = this.data.id;
+        wx.navigateTo({
+            url: "/pages/meeting/exhibition/booked/booked?id=" + id,
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

miniprogram/pages/meeting/exhibition/detail/detail.json

@@ -0,0 +1,6 @@
+{
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    },
+    "navigationBarTitleText": "展厅"
+}

miniprogram/pages/meeting/exhibition/detail/detail.wxml

@@ -0,0 +1,47 @@
+<view class="containerView public">
+    <!-- 轮播图 -->
+    <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}}" mode="aspectFill"></image>
+        </swiper-item>
+    </swiper>
+
+    <!-- 会议室详细信息 -->
+    <view class="roomView">
+        <!-- 类型信息 -->
+        <view class="typeView">
+            <view class="typeItem">
+                <view class="name">所在楼层</view>
+                <view class="value">{{detail.buildingName}}</view>
+            </view>
+            <view class="typeItem">
+                <view class="name">空间面积</view>
+                <view class="value">{{detail.renArea}}m</view>
+            </view>
+            <view class="typeItem">
+                <view class="name">办公面积</view>
+                <view class="value">{{detail.area}}m</view>
+            </view>
+        </view>
+
+        <!-- 文字内容 -->
+        <view class="content">{{detail.content ? detail.content : ''}}</view>
+    </view>
+
+
+    <!-- 价格 -->
+    <view class="priceView">
+        <view class="leftLineTitle">价格</view>
+        <view class="content">￥免费</view>
+    </view>
+
+    <!-- 地图 -->
+    <view class="mapView">
+        <view class="leftLineTitle">空间周边</view>
+        <map class="myMap" latitude="{{mapData.latitude}}" longitude="{{mapData.longitude}}" markers="{{mapData.markers}}" show-location bindtap="openMap"></map>
+    </view>
+
+    <!-- 预约 -->
+    <view class="submitBtn" bind:tap="jumpBooked">展厅预约</view>
+
+</view>

miniprogram/pages/meeting/exhibition/detail/detail.wxss

@@ -0,0 +1,142 @@
+.containerView.public {
+    padding-bottom: 200rpx;
+}
+
+.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;
+}
+
+.roomView {
+    margin-top: 30rpx;
+}
+
+.roomView .typeView {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 30rpx;
+}
+
+.roomView .typeView .typeItem {
+    text-align: center;
+}
+
+.roomView .typeView .typeItem .name {
+    font-size: 28rpx;
+    color: gray;
+}
+
+.roomView .typeView .typeItem .value {
+    margin-top: 10rpx;
+    font-size: 26rpx;
+    font-weight: bold;
+    color: black;
+}
+
+.roomView .content {
+    margin: 40rpx 20rpx 0;
+    font-size: 26rpx;
+}
+
+.roomView .contentSwichBtn {
+    border: 1px solid rgb(202, 202, 202);
+    border-radius: 6rpx;
+    margin: 20rpx;
+    padding: 14rpx;
+    text-align: center;
+    font-size: 28rpx;
+}
+
+.facilitiesView {
+    margin: 50rpx 20rpx;
+}
+
+.facilitiesView .itemView {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.facilitiesView .itemView .singleItem {
+    box-sizing: border-box;
+    width: 25%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 30rpx;
+}
+
+.facilitiesView .itemView .singleItem .img {
+    width: 70rpx;
+    height: 70rpx;
+}
+
+.facilitiesView .itemView .singleItem .name {
+    margin-top: 16rpx;
+    width: 150rpx;
+    text-align: center;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    word-break: break-all;
+    white-space: nowrap;
+}
+
+.priceView {
+    margin: 20rpx;
+}
+
+.priceView .content {
+    margin: 30rpx 20rpx;
+    font-size: 32rpx;
+    color: #c3c3c3;
+}
+
+.mapView {
+    margin: 50rpx 20rpx;
+}
+
+.mapView .myMap {
+    margin-top: 30rpx;
+    width: 100%;
+    height: 500rpx;
+}
+

miniprogram/pages/meeting/exhibition/list/list.js

@@ -0,0 +1,103 @@
+const app = getApp()
+import {
+    showroomListRq
+} from "../../../../api/meeting/exhibition.js"
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        IMG_NAME: app.IMG_NAME,
+        dataList: [],
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        // 页面初始化 options为页面跳转所带来的参数
+        wx.setNavigationBarTitle({
+            title: options.name
+        })
+        // 初始化数据
+        this.initData();
+    },
+
+    // 初始化数据
+    initData() {
+        let _this = this;
+        // 获取数据
+        this.getDateList()
+    },
+
+    // 获取数据
+    getDateList() {
+        let _this = this;
+        // 列表数据
+        showroomListRq().then(res => {
+            console.log('showroomListRq', res);
+            _this.setData({
+                dataList: res.data
+            })
+        })
+    },
+
+    // 跳转-详情
+    jumpDetail(e) {
+        console.log('jumpDetail', e);
+        wx.navigateTo({
+            url: "/pages/meeting/exhibition/detail/detail?id=" + e.currentTarget.dataset.id,
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

miniprogram/pages/meeting/exhibition/list/list.json

@@ -0,0 +1,9 @@
+{
+    "usingComponents": {
+        "van-dropdown-menu": "@vant/weapp/dropdown-menu/index",
+        "van-dropdown-item": "@vant/weapp/dropdown-item/index",
+        "van-cell": "@vant/weapp/cell/index",
+        "van-switch": "@vant/weapp/switch/index",
+        "van-button": "@vant/weapp/button/index"
+    }
+}

miniprogram/pages/meeting/exhibition/list/list.wxml

@@ -0,0 +1,22 @@
+<view class="containerView public">
+
+    <!-- 会议室列表 -->
+    <view class="meetingRoomView">
+        <view class="meetingRoomItem" bind:tap="jumpDetail" wx:for="{{dataList}}" wx:for-item="item" wx:key="*this" data-id="{{item.id}}">
+            <view class="content">
+                <view class="title">{{item.capacityNum}}人间 | {{item.roomName}} | {{item.buildingName}}</view>
+                <view class="propOpen"></view>
+                <view class="priceView">
+                    <view class="price">￥免费</view>
+                    <!-- <text decode>&nbsp;</text> -->
+                    <!-- <view class="unit"> {{room.duration}}小时 起</view> -->
+                </view>
+                <view class="propOpen"></view>
+            </view>
+            <view class="imgView">
+                <view class="title">展厅</view>
+                <image class="img" src="{{IMG_NAME + item.indoorPicUrl}}" mode="aspectFill" />
+            </view>
+        </view>
+    </view>
+</view>

miniprogram/pages/meeting/exhibition/list/list.wxss

@@ -0,0 +1,97 @@
+.queryView {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+}
+
+.meetingRoomView {
+    padding: 30rpx 30rpx;
+}
+
+.meetingRoomView .meetingRoomItem {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 30rpx;
+    padding-bottom: 30rpx;
+    border-bottom: 1px solid rgb(126, 126, 126, 0.3);
+}
+
+.meetingRoomView .meetingRoomItem .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: flex-start;
+    height: 180rpx;
+}
+
+.meetingRoomView .meetingRoomItem .content .title {
+    font-size: 32rpx;
+    color: black;
+}
+
+.meetingRoomView .meetingRoomItem .content .articleView {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin-top: 18rpx;
+}
+
+.meetingRoomView .meetingRoomItem .content .articleView .article {
+    font-size: 28rpx;
+    color: gray;
+    margin-left: 10rpx;
+}
+
+.meetingRoomView .meetingRoomItem .content .articleView .article:first-child {
+    margin-left: 0;
+}
+
+
+.meetingRoomView .meetingRoomItem .content .propOpen {
+    flex: 1;
+}
+
+.meetingRoomView .meetingRoomItem .content .priceView {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+}
+
+.meetingRoomView .meetingRoomItem .content .priceView .price {
+    font-size: 32rpx;
+    color: #c3c3c3;
+}
+
+.meetingRoomView .meetingRoomItem .content .priceView .unit {
+    font-size: 24rpx;
+    color: gray;
+}
+
+
+.meetingRoomView .meetingRoomItem .imgView {
+    position: relative;
+    width: 320rpx;
+    height: 180rpx;
+}
+
+.meetingRoomView .meetingRoomItem .imgView .title {
+    position: absolute;
+    left: 0;
+    top: 16rpx;
+    background: #76aef9;
+    font-size: 24rpx;
+    color: white;
+    font-weight: bold;
+    padding: 8rpx 30rpx;
+    border-top-right-radius: 6rpx;
+    border-bottom-right-radius: 6rpx;
+}
+
+.meetingRoomView .meetingRoomItem .imgView .img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10rpx;
+}

miniprogram/pages/meeting/exhibition/order/order.js

@@ -0,0 +1,189 @@
+const app = getApp()
+
+import Dialog from '@vant/weapp/dialog/dialog';
+import Notify from '@vant/weapp/notify/notify';
+
+import {
+    showroomDetailRq
+} from "../../../../api/meeting/exhibition.js"
+
+import {
+    meetingRoomDetailRq,
+    getCustomerTicketRq,
+    calculateMeetingRoomAmountRq,
+    saveMeetingRecordRq
+} from "../../../../api/meeting/meetingRoom.js"
+
+import {
+    selfFormatTimeYMD,
+    selfFormatTimeHM,
+    twoTimeInterval
+} from "../../../../utils/util.js"
+
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        IMG_NAME: app.IMG_NAME,
+        protocolFlag: true,
+        protocolTitle: '《展厅服务协议》',
+        id: null,
+        bannerList: [],
+        detail: {},
+        userData: {},
+        startTime: null,
+        endTime: null,
+        selectDay: null,
+        selectCountTime: null,
+       
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        console.log('onLoad', options);
+        let selectCountTime = selfFormatTimeHM(options.startTime) + "-" + selfFormatTimeHM(options.endTime) + ' 共计' + twoTimeInterval(options.startTime, options.endTime)
+        this.setData({
+            ...options,
+            userData: wx.getStorageSync('user'),
+            selectDay: selfFormatTimeYMD(options.startTime),
+            selectCountTime
+        })
+        // 详细信息
+        this.getDetail();
+    },
+
+    // 详细信息
+    getDetail() {
+        let _this = this;
+        showroomDetailRq(this.data.id).then(res => {
+            _this.setData({
+                detail: res,
+                bannerList: [res.indoorPicUrl]
+            })
+        })
+    },
+
+    // 主题修改监听
+    titleChange(event) {
+        this.setData({
+            title: event.detail
+        })
+    },
+
+    // 协议点击
+    protocolChange() {
+        let _this = this;
+        _this.setData({
+            protocolFlag: !_this.data.protocolFlag
+        });
+    },
+
+    // 跳转协议
+    jumpProtocol() {
+        let _this = this;
+        wx.navigateTo({
+            url: "/pages/meeting/meetingRoom/meetingProtocol/meetingProtocol?title=" + _this.data.protocolTitle,
+        })
+    },
+
+    // 提交订单
+    submitCase() {
+        let _this = this
+        // 参数校验
+        if (!_this.data.title) {
+            // 错误提示
+            Notify({
+                type: 'danger',
+                message: '请输入会议主题!'
+            });
+            return;
+        }
+        if (!_this.data.protocolFlag) {
+            // 错误提示
+            Notify({
+                type: 'danger',
+                message: `请同意${_this.data.protocolTitle}!`
+            });
+            return;
+        }
+
+        saveMeetingRecordRq({
+            "roomContentId": _this.data.meetingRoomId,
+            "userId": _this.data.userData.id,
+            "ticketId": _this.data.couponId,
+            "customerId": _this.data.userData.icsCustomerId,
+            "title": _this.data.title,
+            "startTime": _this.data.startTime,
+            "endDate": _this.data.endTime,
+            "orderMoney": _this.data.totalAmount,
+        }).then(res => {
+            console.log('saveMeetingRecordRq', res);
+            if (res.code == 0) {
+                wx.redirectTo({
+                    url: "/pages/meeting/pay/waitPay/waitPay?id=" + res.reservationId,
+                })
+            } else {
+                // 错误提示
+                Notify({
+                    type: 'danger',
+                    message: res.msg
+                });
+            }
+        })
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+        console.log('onShow');
+        
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

miniprogram/pages/meeting/exhibition/order/order.json

@@ -0,0 +1,10 @@
+{
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index",
+    "van-field": "@vant/weapp/field/index",
+    "van-dialog": "@vant/weapp/dialog/index",
+    "van-notify": "@vant/weapp/notify/index",
+    "van-checkbox": "@vant/weapp/checkbox/index"
+  },
+  "navigationBarTitleText": "预约信息"
+}

miniprogram/pages/meeting/exhibition/order/order.wxml

@@ -0,0 +1,62 @@
+<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}}" mode="aspectFill"></image>
+            </swiper-item>
+        </swiper>
+    </view>
+
+    <!-- 详细信息 -->
+    <view class="meetingDetailView">
+        <view class="detailView">
+            <view class="title">{{detail.capacityNum}}人间 | {{detail.roomName}} | {{detail.buildingName}}</view>
+        </view>
+        <view class="priceView">
+            <view class="price">￥免费</view>
+        </view>
+    </view>
+
+    <!-- 内容 -->
+    <view class="contentView">
+        <view class="item">
+            <van-icon name="calendar-o" size="54rpx" />
+            <view class="time">{{selectDay}}</view>
+        </view>
+        <view class="item">
+            <van-icon name="clock-o" size="54rpx" />
+            <view class="time">{{selectCountTime}}</view>
+        </view>
+        <view class="item">
+            <van-icon name="contact-o" size="54rpx" />
+            <view class="time">{{userData.username}} {{userData.mobile}}</view>
+        </view>
+    </view>
+
+    <!-- 填写信息 -->
+    <view class="fillMsgView">
+        <view class="itemView">
+            <view class="label">会议主题</view>
+            <view class="content">
+                <van-field value="{{ title }}" placeholder="请输入会议主题" input-align="right" border="{{ false }}"  bind:change="titleChange"/>
+            </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" bind:tap="jumpProtocol">{{protocolTitle}}</view>
+    </view>
+
+    <!-- 合计 -->
+    <view class="submitBtn">立即预约</view>
+
+    <!-- 提示 -->
+    <van-dialog id="van-dialog" />
+    <!-- 提示 -->
+    <van-notify id="van-notify" />
+</view>

miniprogram/pages/meeting/exhibition/order/order.wxss

@@ -0,0 +1,223 @@
+.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: 1;
+}
+
+.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;
+}
+
+.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: 28rpx;
+    color: #c3c3c3;
+}
+
+.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 .coupon.select {
+    color: black;
+}
+
+.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: center;
+}
+
+.amountView .priceView .title {
+    font-size: 32rpx;
+}
+
+.amountView .priceView .price {
+    color: red;
+    font-size: 34rpx;
+}
+
+.amountView .priceView .describe {
+    color: red;
+    font-size: 28rpx;
+    margin-left: 6rpx;
+}
+
+.amountView .caseBtn {
+    border-radius: 10rpx;
+    padding: 16rpx 60rpx;
+    color: white;
+    font-size: 30rpx;
+    background: #4e96f8;
+}
+
+