修改

app.json

@@ -1,6 +1,6 @@
 {
   "pages": [
-    "pages/book/book",
+    "pages/venue/venue",
     "pages/index/index",
     "pages/broadcast/broadcast",
     "pages/activityDialog/activityDialog",
@@ -11,12 +11,12 @@
     "pages/heritage/heritage",
     "pages/broadcastDetail/broadcastDetail",
     "pages/venueDetail/venueDetail",
+    "pages/book/book",
     "pages/register/register",
     "pages/login/login",
     "pages/newVolunteerActivity/newVolunteerActivity",
     "pages/newTeam/newTeam",
     "pages/volunteerTeam/volunteerTeam",
-    "pages/venue/venue",
     "pages/cultureDetail/cultureDetail",
     "pages/activitySign/activitySign",
     "pages/activityDetail/activityDetail",

pages/book/book.js

@@ -1,3 +1,6 @@
+var app = getApp();
+//util.js 工具类
+var util = require('../../utils/util.js'); 
 // pages/book/book.js
 Page({
 
@@ -5,23 +8,239 @@ Page({
    * 页面的初始数据
    */
   data: {
-    checkOrder: false
+    checkOrder: false,
+    venuesInfoId: '',
+    selectVenuesProject:'',
+    venuesProjectList: [],
+    projectDetail:{},
+    bookingOrderDateList:[],
+    bookingOrderDate: '',
+    selectGround:'',
+    groundList:[],
+    itemTimeList:[],
+    mySelectItem:[],
+    totalPrice:'0',
+    phoneNumber:'',
+    smsCode:''
   },
+
+  //保存
+  saveBookingInfo: function(){
+    console.log(this.data.phoneNumber);
+  },
+
+  /**
+   * 获取项目列
+   */
+  listVenuesProject: function(){
+    var self = this;
+    app.restAjax.get(app.restAjax.path('{venueUrl}/app/venuesproject/listprojectinforelease/{venuesInfoId}',
+      [app.venueUrl,self.data.venuesInfoId]), {}, null, 
+      function(code,data){
+        self.setData({
+          venuesProjectList: data
+        });
+        if(self.data.venuesProjectList.length > 0){
+          self.setData({
+            selectVenuesProject: self.data.venuesProjectList[0].venuesProjectId
+          });
+          self.getVenuesProjectDetail();
+          self.getItemTimeList();
+        };
+      },function(code,data){
+        app.dialog.msg(data.msg);
+      }
+    );
+  },
+
+  //获取项目详情信息
+  getVenuesProjectDetail: function(){
+    var self = this;
+    app.restAjax.get(app.restAjax.path('{venueUrl}/app/venuesproject/getvenuesprojectdetailrelease/{venuesProjectId}',
+      [app.venueUrl,self.data.selectVenuesProject]), {}, null, 
+      function(code,data){
+        self.setData({
+          projectDetail:data.data
+        });
+        // console.log(self.data.projectDetail);
+      },function(code,data){
+        app.dialog.msg(data.msg);
+      }
+    );
+  },
+
+  //获取预订时刻表
+  getItemTimeList: function(){
+    var self = this;
+    if(self.data.selectVenuesProject == ''){
+      return false;
+    }
+    app.restAjax.get(app.restAjax.path('{venueUrl}/app/booking/listgrouninfoanditemrelease/{venuesProjectId}',
+      [app.venueUrl,self.data.selectVenuesProject]), {}, null, 
+      function(code,data){
+        if(data.data.length > 0 ){
+          self.setData({
+            groundList: data.data,
+            selectGround:data.data[0].groundInfoId,
+            itemTimeList:data.data[0].groundItemList
+          });
+        } else {
+          self.setData({
+            groundList: [],
+            selectGround:'',
+            itemTimeList:[]
+          });
+        }
+        self.checkSelectType();
+        // console.log(data.data);
+      },function(code,data){
+        app.dialog.msg(data.msg);
+      }
+    );
+  },
+
+  //用户点选时刻
+  selectItemTime: function(options){
+    var obj = options.currentTarget.dataset;
+    if(obj.data.checked == '0'){
+      var item = {
+        bookingOrderDate: this.data.bookingOrderDate,
+        timeStr: obj.data.timeStr,
+        timeEnd: obj.data.timeEnd,
+        groundName: obj.data.groundName,
+        groundItemId: obj.data.groundItemId,
+        price: obj.data.price
+      }
+      var mySelectItem = this.data.mySelectItem;
+      mySelectItem.push(item)
+      this.setData({
+        mySelectItem :mySelectItem
+      })
+    }
+    if(obj.data.checked == '1'){
+      var self = this;
+      var mySelectItem = self.data.mySelectItem;
+      for(var i = 0; i < mySelectItem.length; i++){
+        if(mySelectItem[i]['groundItemId'] == obj.data.groundItemId && mySelectItem[i]['bookingOrderDate'] == self.data.bookingOrderDate){
+          mySelectItem.splice(i,1);
+          self.setData({
+            mySelectItem: mySelectItem
+          })
+          break;
+        }
+      }
+    }
+    this.checkSelectType();
+    this.checkPrice();
+  },
+
+  //切换当前选择项目
+  changeProject: function(options){
+    var venuesProjectId = options.currentTarget.dataset.id;
+    if(this.data.selectVenuesProject == venuesProjectId){
+      return false;
+    };
+    this.setData({
+      selectVenuesProject: venuesProjectId,
+      mySelectItem: []
+    });
+    this.getVenuesProjectDetail();
+    this.getItemTimeList();
+    this.getBookingDate()
+    this.setData({
+      mySelectItem:[],
+      totalPrice : 0
+    });
+  },
+
+  //切换场地
+  changeGround: function(options){
+    var groundInfoId = options.currentTarget.dataset.id;
+    var index = options.currentTarget.dataset.index;
+    var groundList = this.data.groundList;
+    this.setData({
+      selectGround: groundInfoId,
+      itemTimeList: groundList[index].groundItemList
+    })
+    this.checkSelectType();
+  },
+
+   //判断已选择的状态
+   checkSelectType: function(){
+    var self = this;
+    self.data.itemTimeList.forEach(element =>{
+      element['checked'] = '0';
+      self.data.mySelectItem.forEach(my =>{
+        if(element['groundItemId'] == my['groundItemId'] && self.data.bookingOrderDate == my['bookingOrderDate']){
+          element['checked'] = '1';
+        }
+      })
+    });
+    // console.log(self.data.itemTimeList);
+    self.setData({
+      itemTimeList: self.data.itemTimeList
+    })
+  },
+
+  //预订日期
+  getBookingDate: function(){
+    var dateList = [];
+    var day = new Date();
+    day.setTime(day.getTime() + 24*60*60*1000)
+    dateList.push(util.formatDate(day));
+    day.setTime(day.getTime() + 24*60*60*1000)
+    dateList.push(util.formatDate(day));
+    day.setTime(day.getTime() + 24*60*60*1000)
+    dateList.push(util.formatDate(day));
+    this.setData({
+      bookingOrderDate: dateList[0],
+      bookingOrderDateList: dateList
+    })
+  },
+  
+  //切换日期
+  changeDate: function(options){
+    this.setData({
+      bookingOrderDate: options.currentTarget.dataset.date
+    })
+    this.checkSelectType();
+  },
+
+  //计算金额
+  checkPrice: function(){
+    var total = 0;
+    this.data.mySelectItem.forEach(element=>{
+      total = total + Number(element['price']);
+    })
+    this.setData({
+      totalPrice: total
+    })
+  },
+
   doCheckOrder: function () {
+    if(this.data.mySelectItem.length == 0){
+      return false;
+    }
     this.setData({
       checkOrder: true
     })
   },
+
   closeCheckOrder: function () {
     this.setData({
       checkOrder: false
     })
   },
+
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    this.setData({
+      venuesInfoId: options.venuesInfoId
+    });
+    this.listVenuesProject();
+    this.getBookingDate();
   },
 
   /**

pages/book/book.wxml

@@ -1,94 +1,34 @@
 <view class="top-select">
-  <view class="select-box active">
+  <view class="select-box {{item.venuesProjectId == selectVenuesProject ? 'active' :''}}" wx:for="{{venuesProjectList}}" wx:key="index" 
+    bindtap="changeProject" data-id="{{item.venuesProjectId}}">
     <image src="../../images/selected-l.png" class="select-l"></image>
-    篮球
+    {{item.projectName}}
-    <image src="../../images/selected-r.png" class="select-r"></image>
-  </view>
-  <view class="select-box">
-    <image src="../../images/selected-l.png" class="select-l"></image>
-    篮球
-    <image src="../../images/selected-r.png" class="select-r"></image>
-  </view>
-  <view class="select-box">
-    <image src="../../images/selected-l.png" class="select-l"></image>
-    篮球
     <image src="../../images/selected-r.png" class="select-r"></image>
   </view>
 </view>
 <view class="venue-info">
-  <view class="title">营业时间：</view>
+  <view class="title">简介：</view>
-  <view class="content">暂无信息</view>
+  <view class="content">{{projectDetail.projectDescription}}</view>
-  <view class="title">项目描述：</view>
-  <view class="content">暂无信息</view>
-  <view class="title">场地设置：</view>
-  <view class="content">暂无信息</view>
 </view>
 <view class="date">
   <view class="date-container">
-    <view class="date-box active">2020-01-01</view>
+    <view class="date-box {{item == bookingOrderDate? 'active' : ''}}" wx:for="{{bookingOrderDateList}}" wx:key="index" bindtap="changeDate" data-date="{{item}}">{{item}}</view>
-    <view class="date-box">2020-01-01</view>
-    <view class="date-box">2020-01-01</view>
   </view>
 </view>
 <view class="ground">
   <view class="ground-container">
-    <view class="ground-box active">
+    <view class="ground-box {{item.groundInfoId == selectGround? 'active' : ''}}" wx:for="{{groundList}}" wx:key="index" 
+      bindtap="changeGround" data-index="{{index}}" data-id="{{item.groundInfoId}}">
       <image src="../../images/selected-l.png" class="left"></image>
-      场地1
+      {{item.groundName}}
-      <image src="../../images/selected-r.png" class="right"></image>
-    </view>
-    <view class="ground-box">
-      <image src="../../images/selected-l.png" class="left"></image>
-      场地1
-      <image src="../../images/selected-r.png" class="right"></image>
-    </view>
-    <view class="ground-box">
-      <image src="../../images/selected-l.png" class="left"></image>
-      场地1
       <image src="../../images/selected-r.png" class="right"></image>
     </view>
   </view>
 </view>
 <view class="time">
-  <view class="time-box selected">
+  <view class="time-box {{item.checked == '1'? 'selected' : ''}}" wx:for="{{itemTimeList}}" wx:key="index" bindtap="selectItemTime" data-data="{{item}}" data-index="{{index}}">
-    <view>2020-01-01</view>
+    <view>{{item.timeStr}}-{{item.timeEnd}}</view>
-    <view>12:00-13:00</view>
+    <view>{{item.price == '0' ? '免费' : item.price + '元'}}</view>
-    <view>15元</view>
-  </view>
-  <view class="time-box">
-    <view>2020-01-01</view>
-    <view>12:00-13:00</view>
-    <view>15元</view>
-  </view>
-  <view class="time-box">
-    <view>2020-01-01</view>
-    <view>12:00-13:00</view>
-    <view>15元</view>
-  </view>
-  <view class="time-box">
-    <view>2020-01-01</view>
-    <view>12:00-13:00</view>
-    <view>15元</view>
-  </view>
-  <view class="time-box">
-    <view>2020-01-01</view>
-    <view>12:00-13:00</view>
-    <view>15元</view>
-  </view>
-  <view class="time-box">
-    <view>2020-01-01</view>
-    <view>12:00-13:00</view>
-    <view>15元</view>
-  </view>
-  <view class="time-box">
-    <view>2020-01-01</view>
-    <view>12:00-13:00</view>
-    <view>15元</view>
-  </view>
-  <view class="time-box">
-    <view>2020-01-01</view>
-    <view>12:00-13:00</view>
-    <view>15元</view>
   </view>
 </view>
 <view class="bottom">
@@ -96,22 +36,22 @@
     <view class="row">
       <view class="row-title">手机号：</view>
       <view class="row-input">
-        <input placeholder="请输入手机号"></input>
+        <input placeholder="请输入手机号" model:value="{{phoneNumber}}"></input>
       </view>
     </view>
     <view class="row">
       <view class="row-title">验证码：</view>
       <view class="row-input">
-        <input placeholder="请输入验证码" class="code-input"></input>
+        <input placeholder="请输入验证码" class="code-input" model:value="{{smsCode}}"></input>
         <view class="get-code">获取验证码</view>
       </view>
     </view>
   </view>
   <view class="pay-book">
     <view class="pay" bindtap="doCheckOrder">
-      订单金额：10元
+      订单金额：{{totalPrice == '0'? '-' : totalPrice + '元'}}
     </view>
-    <view class="book">
+    <view class="book" bindtap="saveBookingInfo">
       预定
     </view>
   </view>
@@ -120,34 +60,14 @@
   <view class="order-container">
     <view class="order-title">订单信息</view>
     <view class="order">
-      <view class="order-box">
+      <view class="order-box" wx:for="{{mySelectItem}}" wx:key="index">
         <view class="top">
-          <view>2020-01-01</view>
+          <view>{{item.bookingOrderDate}}</view>
-          <view>12:00-13:00</view>
+          <view>{{item.timeStr}}-{{item.timeEnd}}</view>
         </view>
         <view class="bottom-info">
-          <view>场地1</view>
+          <view>{{item.groundName}}</view>
-          <view>15元</view>
+          <view>{{item.price == '0' ? '免费' : item.price + '元'}}</view>
-        </view>
-      </view>
-      <view class="order-box">
-        <view class="top">
-          <view>2020-01-01</view>
-          <view>12:00-13:00</view>
-        </view>
-        <view class="bottom-info">
-          <view>场地1</view>
-          <view>15元</view>
-        </view>
-      </view>
-      <view class="order-box">
-        <view class="top">
-          <view>2020-01-01</view>
-          <view>12:00-13:00</view>
-        </view>
-        <view class="bottom-info">
-          <view>场地1</view>
-          <view>15元</view>
         </view>
       </view>
     </view>

pages/venueDetail/venueDetail.js

@@ -13,9 +13,7 @@ Page({
     venuesDetail:{},
     venuesProjectList: [],
     swiperImg:[],
-    venueCharge: '',
+    venueCharge: ''
-    selectVenuesProject: '',
-    selectVenuesProjectDetail: {}
   },
 
   //场馆详情接口
@@ -43,54 +41,6 @@ Page({
     );
   },
 
-  //获取项目列表
-  listVenuesProject: function(){
-    var self = this;
-    app.restAjax.get(app.restAjax.path('{venueUrl}/app/venuesproject/listprojectinforelease/{venuesInfoId}', [app.venueUrl, self.data.venuesInfoId]), {}, null ,
-      function(code,data){
-        self.setData({
-          venuesProjectList: data
-        });
-        if(self.data.venuesProjectList.length > 0){
-          self.setData({
-            selectVenuesProject: self.data.venuesProjectList[0].venuesProjectId
-          });
-          self.getVenuesProjectDetail();
-        };
-      }, function(code, data){
-        app.dialog.msg(data.msg);
-      }
-    );
-  },
-
-  //切换当前选择项目
-  changeVenuesProject: function(options){
-    var venuesProjectId = options.currentTarget.dataset.id;
-    if(this.data.selectVenuesProject == venuesProjectId){
-      return false;
-    };
-    this.setData({
-      selectVenuesProject: venuesProjectId
-    });
-    this.getVenuesProjectDetail();
-  },
-
-  //获取项目详情信息
-  getVenuesProjectDetail: function(){
-    var self = this;
-    app.restAjax.get(app.restAjax.path('{venueUrl}/app/venuesproject/getvenuesprojectdetailrelease/{selectVenuesProject}',
-      [app.venueUrl, self.data.selectVenuesProject]), {}, null, 
-      function(code,data){
-        console.log(data);
-        self.setData({
-          selectVenuesProjectDetail: data.data
-        });
-      }, function(code,data){
-        app.dialog.msg(data.msg);
-      }
-    );
-  },
-
   //场馆地图导航
   showMap: function(options){
     var dataObj = options.currentTarget.dataset
@@ -102,6 +52,12 @@ Page({
     });
   },
 
+  goBooking: function(){
+    wx.navigateTo({
+      url: '../book/book?venuesInfoId=' + this.data.venuesInfoId,
+    })
+  },
+
   /**
    * 生命周期函数--监听页面加载
    */
@@ -110,7 +66,6 @@ Page({
       venuesInfoId: options.venuesInfoId
     });
     this.getVenuesDetail();
-    this.listVenuesProject();
   },
 
   /**

pages/venueDetail/venueDetail.wxml

@@ -24,20 +24,6 @@
     温馨提示：{{venuesDetail.bookingTips}}
   </view>
 </view>
-<!-- 项目列表 -->
-<view wx:if="{{venuesProjectList.length > 0}}">
-  <view class="selecet-tab">
-    <view class="tab-btn {{selectVenuesProject == item.venuesProjectId ? 'active' : ''}}" 
-      wx:for="{{venuesProjectList}}" wx:key="index" bindtap="changeVenuesProject" data-id="{{item.venuesProjectId}}">{{item.projectName}}</view>
-  </view>
-  <view class="tab-info">
-    <view class="tab-content">
-      <view class="info-title">项目介绍：</view>
-      <view class="info-content">{{selectVenuesProjectDetail.projectDescription}}</view>
-    </view>
-  </view>
-</view>
-<!---->
 <view class="venue-other">
   <view class="other-container">
     <view class="other-title">场馆服务：</view>
@@ -51,6 +37,13 @@
   <!-- <view class="intro-content"></view> -->
   <rich-text nodes="{{venuesDetail.venueDescription}}"></rich-text>
 </view>
-<view class="book-btn">
+<view class="book-btn" wx:if="{{venueCharge == 'arrive'}}">
-  <view class="btn">预定</view>
+  <view class="btn" bindtap="showMap" data-latitude="{{venuesDetail.latitude}}" data-longitude="{{venuesDetail.longitude}}"
+   data-venuename="{{venuesDetail.venueName}}" data-venueposition="{{venuesDetail.venuePosition}}">直接到场</view>
+</view>
+<view class="book-btn" wx:if="{{venueCharge == 'booking'}}">
+  <view class="btn" bindtap="goBooking">场次预订</view>
+</view>
+<view class="book-btn" wx:if="{{venueCharge == 'ticket'}}">
+  <view class="btn" bindtap="goBooking">门票预订</view>
 </view>