分离在线预订

@@ -52,6 +52,7 @@
         "pages/book/b_invitation",
         "pages/book/b_invitation",
         "pages/book/b_desk",
         "pages/book/b_desk",
         "pages/book/b_addnew",
         "pages/book/b_addnew",
+        "pages/book/online_update",
         "pages/book/b_sms",
         "pages/book/b_sms",
         "pages/book/b_setting",
         "pages/book/b_setting",
         "pages/book/setting/index",
         "pages/book/setting/index",

+// pages/book/b_addnew.js
+import util from '../../../utils/util';
+import comm from '../../../utils/bookCommon';
+import App from '../../../utils/api';
+const {regeneratorRuntime} = global
+const formTpl = {
+  rid: '',
+  date: 0,
+  time: 0,
+  //pnum_str:'1-4',
+  pnum: 6,
+  tabid: 0,
+
+  rname: '',
+  phone: '',
+  sex: 1,
+  cusdem: '',
+
+  tid: [],
+
+}
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    dateStr: [],
+    form: JSON.parse(JSON.stringify(formTpl)),
+    tables: [],
+    grand: [
+      {
+        sex: 1,
+        grand_title: '先生',
+        isselect: true
+      },
+      {
+        sex: 2,
+        grand_title: '女士',
+        isselect: false
+      },
+      {
+        sex: 3,
+        grand_title: '公司',
+        isselect: false
+      }
+    ],
+    buttonhide: true,
+
+    calendarMaskLoad: false,
+    calendarMask: false,
+    dayStyle: [
+      {month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'},
+      {month: 'current', day: new Date().getDate(), color: 'white', background: '#AAD4F5'}
+    ],
+    timePickerArray: [
+      [],
+      [],
+      [],
+    ],
+    timePickerIndex: [0, 0, 0],
+    tablesLength: 0,
+
+    timePickerMask: false,
+    pnumInputFocus: false,
+    pageMarginBottom: 0,
+    speciallist: [],
+    calendar: {
+      nextNum: 0,
+    },
+    defDtime: ['', '12:00', '18:30'],
+    hasUseDefDtime: true,
+    CustomRemark:[],
+    CustomRemarkMoreMask:false,
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  reserve_id: '',
+  checkedTables:{},//已选中的桌子集合
+  year:util.unixtoTime(new Date() / 1000,'YYYY'),
+  onLoad: async function (options) {
+    this.options=options
+    this.initLoad(options)
+    this.getCustomRemark();
+  },
+  async initLoad(options = {}){
+    let nt = new Date() / 1000;
+    let speciallist = [
+      {date: util.unixtoTime(nt, 'YYYY-MM-DD'), background: '', text: '今 天'},
+      {date: util.unixtoTime(nt + 86400, 'YYYY-MM-DD'), background: '', text: '明 天'},
+      {date: util.unixtoTime(nt + 86400 * 2, 'YYYY-MM-DD'), background: '', text: '后 天'},
+    ];
+    this.reserve_id = options.id || '';
+    let rev_time=parseInt(nt)
+    if(options.hasQuick==1){
+      let rdate=options.ddate.split('-')
+      if(rev_time<rdate[0] || rev_time>rdate[1]){
+        rev_time=rdate[0]
+      }
+    }
+    await this.setDateStr(rev_time);
+    this.sellerid = util.cache('enter_params')['seller_id'];
+    let timePickerArray = await comm.getDayTimeSpace();
+    //判断hasUseDefDtime
+    let hasUseDefDtime = true;
+    let mmii = util.unixtoTime(rev_time, 'HH:II');
+    console.log('initLoad',mmii,this.data.defDtime[this.data.form.time],this.data.defDtime)
+    console.log('initLoad',mmii > this.data.defDtime[this.data.form.time])
+    if (mmii > this.data.defDtime[this.data.form.time]) {
+      hasUseDefDtime = false;
+    }
+    this.setData({
+      timePickerArray: timePickerArray,
+      speciallist: speciallist,
+      hasUseDefDtime: hasUseDefDtime,
+    })
+    if (this.reserve_id > 0) {
+      this.initModify(this.reserve_id);
+    } else if(options.hasQuick==1){
+      this.initQuick(options);
+    } else {
+      this.getTables();
+    }
+  },
+  /**
+   *
+   * @param d
+   *
+   */
+  async setDateStr(d = new Date() / 1000){
+    this.year=util.unixtoTime(d,'YYYY');
+    let ns = new Date() / 1000;
+    let dateStr = [
+      util.unixtoTime(ns, 'MM-DD `DAY/周WW`'),
+      util.unixtoTime(parseInt(ns) + 86400, 'MM-DD `DAY/周WW`'),
+    ];
+    //let dateStr=this.data.dateStr;
+    let nowStr = util.unixtoTime(d, 'MM-DD `DAY/周WW`')
+    let form = this.data.form;
+
+    let timeObj = await comm.getTimeSpaceIndexData(d);
+    //form.time=await comm.getTimeSpaceIndex(d);
+    form.time = timeObj.timeIndex;
+
+    let ind = dateStr._indexOf(nowStr);
+    if (ind > -1) {
+      form.date = ind
+    } else {
+      dateStr.push(nowStr.substr(0, 5));
+      form.date = 2;
+    }
+    let timePickerIndex = this.data.timePickerIndex;
+    timePickerIndex[timeObj.timeIndex] = timeObj.timeMatchIndex;
+    let obj = {
+      dateStr: dateStr,
+      form: form,
+      timePickerIndex: timePickerIndex,
+      timeOpt: timeObj.timeOpt,
+    };
+    this.setData(obj)
+    return obj;
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+    //if(!this.reserve_id || util.cache('tableid').length>0){
+    //if (util.cache('tableid').length > 0) {
+      this.getTables();
+    //}
+    setTimeout(() => {
+      this.setData({
+        calendarMaskLoad: true,
+      })
+    }, 1000);
+    this.conditionInfo()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  selectedValue(e){
+    console.log(e);
+    let key = util.attr(e, 'key');
+    let val;
+    let sobj = {};
+    if (key == 'date') {
+      this.year=util.unixtoTime(new Date() / 1000,'YYYY');
+    }
+    if (e.type == 'input' || e.type == 'confirm') {
+      val = util.val(e);
+      if (key == 'phone') {
+        var that = this;
+        if (e.detail.value != '' && e.detail.value.length >= 3) {
+          App.Reserve.GetReserveUser(
+            {
+              keywords: e.detail.value,
+              sid: this.sellerid
+            }
+          ).then(function (json) {
+            if (json.ret == 200 && json.data.length > 0) {
+              that.setData({
+                searchlist: json.data
+              })
+            } else {
+              that.setData({
+                searchlist: null
+              })
+            }
+          })
+        } else {
+          this.setData({
+            searchlist: null
+          })
+        }
+      }
+      if (key == 'pnum') {
+        sobj.pnumInputFocus = true;
+      }
+    } else {
+      val = util.attr(e, 'value');
+    }
+    if (key == 'time') {
+      if (this.data.timeOpt[val]) return;
+    }
+    if ((key == 'time' && this.data.form.time == val) || (key == 'date' && this.data.form.date == val)) {
+      if (util.attr(e, 'display') != 'block') {
+        return;
+      }
+    }
+    let form = this.data.form;
+
+    if (key == 'tid') {
+      let ts = this.data.tables;
+      if (ts[val].isselect) {
+        ts[val].isselect = false;
+        form.tid.remove(ts[val].id);
+        delete this.checkedTables[ts[val].id]
+      } else {
+        ts[val].isselect = true;
+        form.tid.push(ts[val].id);
+        this.checkedTables[ts[val].id]=ts[val].name
+      }
+      sobj.tables = ts;
+    } else {
+      form[key] = val;
+    }
+    console.log('ts', sobj.tables,this.checkedTables);
+    //console.log(e.type,key,val,form);
+    sobj.form = form;
+    sobj.buttonhide = this.data.buttonhide;
+    if (form.tid.length > 0 && form.rname.length > 0) {
+      sobj.buttonhide = false;
+    }else{
+      sobj.buttonhide = true;
+    }
+    let displayTimes = false;
+    if (key == 'time') {
+      if (util.attr(e, 'display') == 'block') {
+        displayTimes = true;
+        sobj.timePickerMask = true;
+      }
+    }
+    if ('date,time,pnum,pnum_str,tabid'.indexOf(key) > -1) {
+      if (!displayTimes) {
+        //sobj.form.tid = []; //切换日期时间清空桌位
+        //sobj.buttonhide = true;
+        this.getTables();
+      }
+      if (key == 'date') {
+        let xtime = util.unixtoTime(new Date() / 1000, 'YYYY-' + (this.data.dateStr[val].substr(0, 5)) + ' HH:II:SS');
+        this.setDateStr(util.timetouUnix(xtime));
+      }
+    }
+    //判断hasUseDefDtime
+    if ((key == 'time' || key == 'date') && !sobj.timePickerMask) {
+      sobj.hasUseDefDtime = true
+    }
+    if (this.data.form.date == 0) {//
+      let mmii = util.unixtoTime(new Date() / 1000, 'HH:II');
+      if (mmii > this.data.defDtime[key == 'time' ? val : this.data.form.time]) {
+        sobj.hasUseDefDtime = false;
+      }
+    }
+    this.setData(sobj)
+  },
+  async getTables(){
+    let form = this.data.form;
+    let tableid = util.cache('tableid');
+    console.log('getTables-tableid', tableid.length, this.reserve_id);
+    //if (tableid.length < 1 && this.reserve_id) {
+    if (tableid.length < 1) {
+      tableid = this.data.form.tid;
+    }
+    console.log('getTables-tableid', tableid, tableid.length);
+    try {
+      let rdate = await comm.getTimeSpace(this.data.dateStr[this.data.form.date], this.data.form.time,null,null,this.year);
+      console.log('rdate', this.data.dateStr[this.data.form.date], rdate);
+      App.Reserve.GetTableList({
+        sid: util.cache('enter_params')['seller_id'],
+        //pnum_str:form.pnum_str,
+        pnum: form.pnum,
+        rdate: rdate,
+        tid: form.tabid,
+        rid: this.reserve_id,
+      }).then(res => {
+        let tables = [];
+        let tablesLength = 0;
+        if (tableid.length > 0) {
+          let toastTables={...this.checkedTables}
+          let resData=res.data.slice(1,res.data.length);
+          console.log('resData',resData)
+          resData.forEach(p => {
+            //if(tables.length>=3) return true;
+            p.list.forEach(t => {
+              delete toastTables[t.id]
+              tablesLength++;
+              if (tables.length >= 3) return true;
+              if (tableid._indexOf(t.id) > -1) {
+                t.isselect = true;
+                tables.push(t);
+              }
+            })
+          })
+          console.log('toastTables',toastTables,this.data.form.tid,this.checkedTables);
+          //清理已选中的桌位
+          let toastTablesInfo=[];
+          let tid=this.data.form.tid
+          Object.keys(this.checkedTables).forEach(ckid=>{
+            if(toastTables[ckid]){
+              delete this.checkedTables[ckid]
+              tid.remove(ckid);
+              toastTablesInfo.push(toastTables[ckid]);
+            }
+          })
+          if(toastTablesInfo.length>0){
+            this.setData({
+              [`form.tid`]:tid,
+            })
+            util.toast(toastTablesInfo.toString()+'已被占用啦','none');
+          }
+          wx.removeStorage({key: 'tableid'})
+        }
+        console.log('tables-first',tables);
+        if(tables.length<1){
+          tablesLength=0;
+          let fortids=[];
+          res.data.forEach((p,ri) => {
+            p.list.forEach(t => {
+              if(fortids._indexOf(t.id)<0) {
+                tablesLength++;
+                tables.push(t);
+                fortids.push(t.id);
+              }
+            })
+          })
+          if (tables.length >= 3) {
+            tables = tables.slice(0, 3);
+          }
+        }
+        this.tablesLength = tablesLength;
+        this.setData({
+          tables: tables,
+          tablesLength: tablesLength
+        })
+        this.conditionInfo();
+      })
+    } catch (e) {
+      this.setData({
+        tables: []
+      })
+    }
+  },
+  async formsubmit(){
+    if (this.data.buttonhide) return;
+    try {
+      let d_stimestr = this.data.timePickerArray[this.data.form.time][this.data.timePickerIndex[this.data.form.time]];
+      let d_rdate = await comm.getTimeSpace(this.data.dateStr[this.data.form.date],
+        this.data.form.time, d_stimestr,null,this.year);
+      let stimestr = this.data.timePickerArray[this.data.form.time][this.data.timePickerIndex[0]];
+      let rdate = await comm.getTimeSpace(this.data.dateStr[this.data.form.date],
+        this.data.form.time, stimestr,null,this.year);
+      console.log('stimestr', stimestr, this.data.form.time, this.data.timePickerIndex);
+      console.log('rdate', rdate);
+      this.setData({
+        buttonhide: true,
+      })
+      let form = JSON.parse(JSON.stringify(this.data.form));
+      console.log('typeof form.tid', typeof form.tid);
+      if (typeof form.tid == 'object') {
+        let tid = new Set(form.tid);//tid 去重
+        form.tid = [...tid].toString();
+      }
+      if (!form.tid) {
+        return util.toast('请选择桌子', 'none');
+      }
+      if (!form.rname) {
+        return util.toast('请填写预订人', 'none');
+      }
+      form.sid = this.sellerid;
+      form.rdate = rdate
+
+      try {
+        let enter_params = util.cache('enter_params');
+        let sc = (await App.Reserve.SellerInfo(enter_params)).data
+        let note_openid = enter_params.seller_openid;
+        let note_name = sc.seller_user.nick_name || sc.seller_user.nickname;
+        form.note_openid = note_openid || '';
+        if (form.rid) {//修改时传递uid
+          form.note_openid = enter_params.manager_id || '';
+        }
+        form.note_name = note_name || '';
+      } catch (e) {}
+
+      form.ddate = d_rdate.substr(0, 10);
+      if (this.data.hasUseDefDtime && this.data.form.time > 0) {//转为默认时间
+        let ddateStr = util.unixtoTime(form.ddate, "YYYY-MM-DD " + this.data.defDtime[this.data.form.time] + ":00");
+        form.ddate = util.timetouUnix(ddateStr);
+      }
+      App.Reserve.SetReserveInfo(form).then(res => {
+        if (res.ret == 200) {
+          this.getCustomRemark()
+          let _id = (res.data.id || res.data)
+          this.setData({
+            form: JSON.parse(JSON.stringify(formTpl)),
+            tables: [],
+            timePickerIndex: [0, 0, 0],
+          })
+          this.initLoad();
+          this.checkedTables={};
+          App.Reserve.Detail({rid: _id, openid: ''}, 'clear')
+          wx.navigateTo({
+            url: util.http_build_query({id:_id,tplid:1},'b_invitation'),
+          });
+        } else {
+          util.toast(res.msg, 'none')
+        }
+      })
+    } catch (e) {
+    }
+  },
+  selectphone: function (e) {
+    this.data.form.phone = e.detail.phone;
+    this.data.form.rname = e.detail.rname;
+    this.data.form.cusdem = e.detail.cusdem;
+    var form = this.data.form
+    this.data.form.sex = e.detail.sex;
+    this.setData({
+      form: this.data.form,
+      searchlist: null
+    })
+    this.conditionInfo();
+  },
+  calendarShow(){
+    this.setData({
+      calendarMask: true
+    })
+  },
+  dateChange(event){
+    console.log(event);
+    //let cktime=util.timetouUnix(event.detail.year+'/'+event.detail.month+'/'+event.detail.day)
+    let cktime = util.timetouUnix(event.detail.date)
+    this.year=event.detail.date.substr(0, 4);
+    console.log('this.year',this.year);
+    let day0 = parseInt(new Date(new Date().setHours(0, 0, 0, 0)) / 1000);
+    // if (cktime < day0) {
+    //   util.toast('请选择有效日期', 'none');
+    //   return;
+    // }
+    let clickDay = event.detail.date.substr(8, 2);
+    let changeDay = `dayStyle[1].day`;
+    let changeBg = `dayStyle[1].background`;
+    this.setData({
+      [changeDay]: clickDay,
+      [changeBg]: "#84e7d0",
+      //[`form.tid`]: [], //切换日期时间清空桌位
+      //buttonhide: true,
+    })
+    console.log('cktime',cktime,util.unixtoTime(cktime,'YYYY-MM-DD'))
+    this.setDateStr(cktime == day0 ? new Date() / 1000 : cktime)
+    this.calendarClose();
+    setTimeout(res=>{
+      this.getTables();
+    },10)
+
+  },
+  calendarClose(){
+    this.setData({
+      calendarMask: false,
+      timePickerMask: false,
+    })
+  },
+  async  selectdesk(){
+    let rdate = await comm.getTimeSpace(this.data.dateStr[this.data.form.date], this.data.form.time,null,null,this.year);
+    console.log(this.data.form)
+    wx.navigateTo({
+      url: 'b_desk?rdate=' + rdate + '&tid=' + this.data.form.tabid
+      //+'&pnum_str='+this.data.form.pnum_str
+      + '&pnum=' + this.data.form.pnum
+      + '&checked_tids=' + this.data.form.tid
+      + '&rid=' + this.reserve_id
+    })
+  },
+  conditionInfo: function () {
+    var form = this.data.form
+    if (form.tid.length > 0 && form.rname.length > 0) {
+      this.data.buttonhide = false;
+    }
+    this.setData({
+      buttonhide: this.data.buttonhide
+    })
+  },
+  /**
+   * 选中时间区域
+   */
+  bindTimePickerChange(e){
+    let timeIndex = util.attr(e, 'timeIndex');
+    if (timeIndex < 0) return;
+    let timePickerIndex = this.data.timePickerIndex;
+    //timePickerIndex[timeIndex]=util.val(e);
+    timePickerIndex[timeIndex] = util.attr(e, 'val');
+
+    console.log(e, timeIndex, util.attr(e, 'val'));
+    this.setData({
+      timePickerIndex: timePickerIndex,
+      hasUseDefDtime: false,
+    })
+  },
+  /**
+   * 修改初始化
+   */
+  async initModify(id){
+    try {
+      let res = await App.Reserve.Detail({rid: id, openid: ''});
+
+      console.log('initModify', res);
+      //设置日期
+      let obj = await this.setDateStr(res.data.ddate);
+      //设置时间
+      let nd = util.unixtoTime(res.data.ddate, 'HH:II');
+      let timePickerIndex = this.data.timePickerIndex
+      console.log('initModify-', this.data.timePickerArray, obj.form.time, nd)
+      this.data.timePickerArray[obj.form.time].forEach((dd, ii) => {
+        console.log('initModify-', nd, dd)
+        if (nd == dd) {
+          timePickerIndex[obj.form.time] = ii;
+          return true;
+        }
+      })
+
+      console.log('initModify-timePickerIndex', timePickerIndex);
+      //obj.form.pnum_str=res.data.pnum_str;
+      obj.form.pnum = res.data.pnum || 6;
+      obj.form.rname = res.data.rname;
+      obj.form.phone = res.data.phone || "";
+      obj.form.sex = res.data.sex;
+      obj.form.cusdem = res.data.cusdem;
+      obj.form.rid = id;
+      obj.form.tid = [];
+      let tablesed = [];
+      res.data.tables.forEach((t, ti) => {
+        obj.form.tid.push(t.id)
+        if (ti >= 3) return;
+        t.isselect = true
+        t["isselected"] = 1
+        tablesed.push(t);
+        this.checkedTables[t.id]=t.name;
+      })
+      this.setData({
+        timePickerIndex: timePickerIndex,
+        form: obj.form,
+        //tablesed:tablesed,
+        hasUseDefDtime: false,
+      })
+      setTimeout(() => {
+        this.getTables();
+      }, 300)
+
+    } catch (e) {
+      console.log('initModify', e)
+    }
+  },
+  pnumInputFocusEvent(e){
+    console.log(e);
+    this.setData({
+      pnumInputFocus: 'focus' == e.type
+    })
+  },
+  inputFocusTime: 0,
+  blurTime: 0,
+  inputFocus(e){
+    console.log(e, this.inputFocusTime);
+    return;
+    if (e.timeStamp > this.inputFocusTime) {
+      this.inputFocusTime = e.timeStamp;
+      if (e.type == 'focus' && this.data.pageMarginBottom == 0) {
+        this.setData({
+          pageMarginBottom: 300
+        })
+        setTimeout(res => {
+          this.pageScrollToBottom();
+        }, 100)
+      } else {
+        if (this.blurTime > 5) {
+          this.blurTime = 0;
+          this.setData({
+            pageMarginBottom: 0
+          })
+        } else {
+          setTimeout(res => {
+            this.blurTime += 1;
+            this.inputFocus(e);
+          }, 300)
+        }
+
+      }
+
+    }
+  },
+  pageScrollToBottom: function () {
+    wx.createSelectorQuery().select('#j_page').boundingClientRect(function (rect) {
+      // 使页面滚动到底部
+      wx.pageScrollTo({
+        scrollTop: rect.bottom
+      })
+    }).exec()
+  },
+  gotoday(e){
+    this.setData({
+      [`calendar.nextNum`]: 0
+    })
+  },
+  nextMonth(e){
+    this.setData({
+      [`calendar.nextNum`]: this.data.calendar.nextNum + 1
+    })
+  },
+  prevMonth(e){
+    this.setData({
+      [`calendar.nextNum`]: this.data.calendar.nextNum - 1
+    })
+  },
+  /**
+   * 快速预订初始化
+   * tid
+   * tname
+   * ddate
+   * pnum
+   */
+  async initQuick(options){
+    try {
+      console.log('initQuick', options);
+      this.checkedTables[options.tid]=options.tname
+      this.year=util.unixtoTime(options.ddate.substr(0,10),'YYYY');
+      let form=this.data.form
+      form.tid=[options.tid]
+      this.setData({
+        form: form,
+      })
+      setTimeout(() => {
+        this.getTables();
+      }, 300)
+    } catch (e) {
+      console.log('initQuick', e)
+    }
+  },
+  getCustomRemark(){
+    App.User.GetCustomRemark({
+      uid:util.cache('enter_params')['manager_id'],
+    }).then(res=>{
+      let CustomRemark=[];
+      res.data.forEach(r=>{
+        if(r.often_use){
+          CustomRemark.push(r);
+        }
+      })
+      this.setData({
+        CustomRemark:CustomRemark,
+      })
+    })
+  },
+  oftenUse(e){
+    let id=util.attr(e,'id');
+    let val=util.attr(e,'value');
+    let CustomRemark=this.data.CustomRemark;
+    let form=this.data.form;
+    CustomRemark.forEach(r=>{
+      if(id==r.id){
+        if(r.active){
+          form.cusdem=form.cusdem.replace(val+'、','')
+        }
+        r.active=!r.active
+        if(r.active){
+          form.cusdem+=val+'、'
+        }
+      }
+    })
+    this.setData({
+      CustomRemark:CustomRemark,
+      form:form,
+    })
+    this.conditionInfo()
+  },
+  CustomRemarkMore(){
+    this.setData({
+      CustomRemarkMoreMask:!this.data.CustomRemarkMoreMask
+    })
+  }
+})

+{
+  "backgroundTextStyle":"light",
+  "navigationBarBackgroundColor": "#fff",
+  "navigationBarTextStyle":"black",
+  "usingComponents": {
+    "nothingBook":"../../components/book/nothing/nothing",
+    "nav":"/components/nav/nav",
+    "tabBar":"../../components/book/tabBar/tabBar",
+    "searchList":"/components/searchlist/searchlist",
+    "calendar": "plugin://bmCalendar/calendar",
+    "board":"../../components/book/board/board",
+    "formids":"/components/formids/formids"
+  }
+}

+<!--pages/book/b_addnew.wxml-->
+<nav>录入订座信息</nav>
+<view class="page" style="margin-bottom: {{pageMarginBottom}}rpx;" id="j_page">
+    <view class="base-info">
+        <!--
+        <view class="section flex-lr date">
+            <view class="flex-rr" style="width:100%;">
+                <item class="date-item {{form.date==0?'checked':''}}"
+                      bindtap="selectedValue" data-key="date" data-value="0">
+                    <view class="date-item-text">{{dateStr[0]}}</view>
+                </item>
+                <item class="date-item {{form.date==1?'checked':''}}"
+                      bindtap="selectedValue" data-key="date" data-value="1">
+                    <view class="date-item-text">{{dateStr[1]}}</view>
+                </item>
+            </view>
+            <view class="more flex-ll" bindtap="calendarShow">
+                <view></view>
+                <view></view>
+                <view></view>
+            </view>
+        </view>
+        -->
+        <view class="section">
+            <view class="tab flex-ll">
+                <formids class="item {{form.date==0?'checked':''}}"
+                         bindtap="selectedValue" data-key="date" data-value="0">
+                    {{dateStr[0]}}
+                </formids>
+                <formids class="item {{form.date==1?'checked':''}}"
+                      bindtap="selectedValue" data-key="date" data-value="1">
+                    {{dateStr[1]}}
+                </formids>
+                <view class="item {{form.date==2?'checked':''}} flex-lr"
+                      bindtap="selectedValue" data-key="date" data-value="2" bindtap="calendarShow">
+                    <view style="width: 80%" class="item-text">{{dateStr[2]||'其他'}}</view>
+                    <image
+                            src="http://qn.colorcun.com/custom/lite-yd/image/date{{dateStr[2]?'.selected':''}}.png"
+                            style="min-width: 36rpx;width: 36rpx;height: 36rpx; margin-right: 22rpx;"></image>
+                </view>
+            </view>
+        </view>
+        <view class="section ">
+            <view class="tab flex-ll">
+                <formids class="item {{form.time==0?'checked':''}} {{timeOpt[0]}}"
+                        wx:if="{{timePickerArray[0].length>0}}"
+                      bindtap="selectedValue" data-key="time" data-value="0">
+                    <view class="picker">早市</view>
+                </formids>
+                <formids class="item {{form.time==1?'checked':''}}  {{timeOpt[1]}}"
+                         wx:if="{{timePickerArray[1].length>0}}"
+                      bindtap="selectedValue" data-key="time" data-value="1">
+                    <view class="picker">午市</view>
+                </formids>
+                <formids class="item {{form.time==2?'checked':''}}  {{timeOpt[2]}}"
+                         wx:if="{{timePickerArray[2].length>0}}"
+                      bindtap="selectedValue" data-key="time" data-value="2">
+                    <view class="picker">晚市</view>
+                </formids>
+            </view>
+        </view>
+        <view class="section" style="height: 90rpx;">
+            <view class="tab flex-lr">
+                <view class="tab flex-ll">
+                    <formids class="item-pnum {{form.pnum==item?'checked':''}}" wx:for="{{[6,7,8,9,10]}}" wx:key="pnum.key"
+                          bindtap="selectedValue" data-key="pnum" data-value="{{item}}">
+                        <view class="pnum">{{item}}</view>
+                    </formids>
+                </view>
+                <view class="tab" style="margin-left: 20rpx;">
+                    <view class="item {{form.pnum<6 || form.pnum>10?'checked':''}} flex-lr"
+                          data-key="pnum" data-value="{{form.pnum}}">
+                        <view style="width: 80%" class="pnum">
+                            <input
+                                    bindinput="selectedValue" bindconfirm="selectedValue"
+                                    bindblur="pnumInputFocusEvent"
+                                    data-key="pnum" value="{{(form.pnum<6 || form.pnum>10) || pnumInputFocus?form.pnum:''}}"
+                                    placeholder-class="placeholder-class-pnum"
+                                    maxlength="3" type="number"
+                                    placeholder="{{form.pnum<6 || form.pnum>10?form.pnum:''}} 更多"/>
+
+                        </view>
+                        <image
+                                src="http://qn.colorcun.com/custom/lite-yd/image/pnum{{form.pnum<6 || form.pnum>10?'.selected':''}}.png"
+                                style="min-width: 36rpx;width: 36rpx;height: 36rpx; margin-right: 22rpx;"></image>
+                    </view>
+                </view>
+            </view>
+        </view>
+        <!--
+        <view class="section ">
+            <view class="tab flex-ll">
+                <view class="item {{form.pnum_str=='1-4'?'checked':''}}"
+                      bindtap="selectedValue" data-key="pnum_str" data-value="1-4">
+                    4人以下
+                </view>
+                <view class="item {{form.pnum_str=='5-9'?'checked':''}}"
+                      bindtap="selectedValue" data-key="pnum_str" data-value="5-9">
+                    5～9人
+                </view>
+                <view class="item {{form.pnum_str=='10-99'?'checked':''}}"
+                      bindtap="selectedValue" data-key="pnum_str" data-value="10-99">
+                    10人以上
+                </view>
+            </view>
+        </view>
+        <view class="section ">
+            <view class="tab flex-ll">
+                <view class="item {{form.tabid=='2'?'checked':''}}"
+                      bindtap="selectedValue" data-key="tabid" data-value="2">
+                    包间
+                </view>
+                <view class="item {{form.tabid=='1'?'checked':''}}"
+                      bindtap="selectedValue" data-key="tabid" data-value="1">
+                    散台
+                </view>
+            </view>
+        </view>
+        -->
+    </view>
+
+    <view class="page-full tables">
+        <view class="page" style="margin-top: 0">
+            <view class="title flex-lr">
+                <view>可订桌位<text wx:if="{{tables.length>0}}"> ({{tablesLength}})</text></view>
+                <view class="flex-rr advice-more" bindtap="selectdesk">
+                    <view style="padding-right:20rpx;" class="gray-deep-font font26r">更多</view>
+                    <image src="http://qn.colorcun.com/custom/lite-yd/image/click.png" class="icon12-22"></image>
+                </view>
+            </view>
+            <view class="advice-desk-detail flex-rr" wx:if="{{tables.length>0}}">
+                <block wx:for="{{tablesed||tables}}" wx:key="tables.key">
+                    <board width="160" height="180" board="{{item}}"
+                           style="margin: 20rpx 0 0 20rpx"
+                           event="boardChoose" className="noBottom"
+                           data-value="{{index}}"
+                           bindtap="selectedValue"
+                           data-key="tid"></board>
+                </block>
+            </view>
+            <view class="advice-desk-detail flex-cc" wx:else="">
+                没有符合条件的桌位！
+            </view>
+        </view>
+    </view>
+    <view class="book-info">
+        <view class="book-info-single flex-lr" style="align-items:flex-start;position:relative;z-index:10;">
+            <input placeholder="客户电话" placeholder-class="gray-font font34r" class="black-font font34r" type="number" maxlength="11"
+                   bindinput="selectedValue"
+                   bindconfirm="selectedValue"
+                   data-key="phone"
+                   value="{{form.phone}}" style="color:{{reminder ? '#E14553' : '#353535'}};width:{{reminder ? 400 : 680}}rpx;" cursor-spacing="260"/>
+            <view bindtap="selectedValue" data-key="time" data-value="{{form.time}}" data-display="block" style="color:#199095">
+                <view style="font-size: 34rpx;height: 100rpx;line-height: 100rpx;" wx:if="{{hasUseDefDtime && form.time>0}}">{{defDtime[form.time]}}</view>
+                <view style="font-size: 34rpx;height: 100rpx;line-height: 100rpx;" wx:else="">{{timePickerArray[form.time][timePickerIndex[form.time]]}}</view>
+            </view>
+            <block wx:if="{{searchlist}}">
+                <searchList searchlist="{{searchlist}}" bind:selectphone="selectphone"></searchList>
+            </block>
+        </view>
+        <view class="book-info-single flex-lr" style="align-items:flex-start;">
+            <input placeholder="客户姓名（必填）" placeholder-class="gray-font font34r" class="black-font font34r"
+                   maxlength="12" style="width:450rpx;" value="{{form.rname}}"
+                   bindinput="selectedValue"
+                   bindconfirm="selectedValue"
+                   bindfocus="inputFocus"
+                   bindblur="inputFocus"
+            data-key="rname"/>
+            <view class="book-info-grand flex-rr font28r gray-deep-font">
+                <block wx:for="{{grand}}" wx:key="grand.key">
+                    <view class="book-grand flex-cc book-grand-border {{form.sex==item.sex ? 'book-grand-active white-font' : ''}}"
+                          bindtap="selectedValue"
+                          data-value="{{item.sex}}"
+                          data-key="sex">{{item.grand_title}}</view>
+                </block>
+            </view>
+        </view>
+
+        <view class="book-info-single flex-lr">
+            <input placeholder="客户要求（25字以内，选填）" placeholder-class="gray-font font34r" class="black-font font34r" maxlength="25" value="{{form.cusdem}}"
+                   bindinput="selectedValue"
+                   bindconfirm="selectedValue"
+                   bindfocus="inputFocus"
+                   bindblur="inputFocus"
+                   data-key="cusdem"/>
+            <view class="CustomRemarkMore flex-rr">
+                <view bindtap="CustomRemarkMore">快速备注</view>
+            </view>
+        </view>
+        <view wx:if="{{CustomRemark.length>0}}" class="book-info-single last" style="padding-top: 14rpx; height: 60rpx;">
+            <view class="flex-lr CustomRemark">
+                <view class="CustomRemarks">
+                    <view class="CustomRemarksView">
+                        <view class="CustomRemarkItem {{item.active?'active':''}}" wx:for="{{CustomRemark}}"
+                          bindtap="oftenUse"
+                              data-id="{{item.id}}"
+                              data-value="{{item.often_use}}">{{item.often_use}}</view>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+    <view class="page-full submit">
+        <view class="confirm-button white-font flex-vc font34r {{buttonhide==false ? 'confirm-button-active' : ''}}" bindtap="{{buttonhide==false ? 'formsubmit' : ''}}">完成预订</view>
+    </view>
+</view>
+<tabBar></tabBar>
+<view class="calendar-mask" bindtap="calendarClose"
+      style="height:{{calendarMask?'100%':0}};" wx:if="{{calendarMaskLoad}}">
+    <view style="width: 100%; height:{{calendarMask?'100%':0}};overflow: hidden;position: relative;">
+        <calendar catchtap="catchtap"
+                  isTodaybtn="{{true}}" todaybtn_txt="回到今天"
+                  custom="{{false}}"
+                  switchover="{{['上一月','下个月']}}"
+                  active-coloro="active-coloro"
+                  active-colort="active-colort"
+                  speciallist="{{speciallist}}"
+                  txt_style="txt-style"
+                  calendar-style="calendar"
+                  header-style="calendar-header"
+                  weektitle-style="weektitle-style"
+                  restcolor-style="restcolor-style"
+                  txt_type="cn-d"
+
+                  datefont-style="datefont-style"
+                  todaybtn-style="todaybtn-style"
+
+                  bindnextMonth="nextMonth"
+                  bindprevMonth="prevMonth"
+                  bindselectDate="dateChange"
+                  bindgotoday="gotoday"
+
+                  prev="{{true||calendar.nextNum>0}}"
+                  circle_show="{{false}}"
+                  closelaststyle="{{true}}"
+        ></calendar>
+    </view>
+</view>
+<view class="calendar-mask" bindtap="calendarClose"
+      style="height:100%;" wx:if="{{timePickerMask}}">
+    <view class="timePicker">
+        <view class="flex-rr">
+            <image class="close" src="http://qn.colorcun.com/custom/lite-yd/image/add-act.png" bindtap="calendarClose"></image>
+        </view>
+        <view class="flex-cc" style="margin-bottom: 56rpx; font-size: 30rpx;">
+            <view bindtap="calendarClose">{{form.time==1?'午市':form.time==2?'晚市':'早市'}}</view>
+        </view>
+        <view class="flex-ll" style="flex-wrap:wrap">
+            <view class="time-item {{timePickerIndex[form.time]==index?'checked':''}}"
+                  style="{{(index+1)%3==0?'margin-right:0;':''}}"
+                  wx:for="{{timePickerArray[form.time]}}" wx:key=""
+                  bindtap="bindTimePickerChange"
+                  data-time-index="{{form.time}}"
+                  data-val="{{index}}"
+            >{{item}}</view>
+        </view>
+    </view>
+</view>
+
+<view class="calendar-mask" bindtap="CustomRemarkMore"
+      style="height:100%;" wx:if="{{CustomRemarkMoreMask}}">
+    <view class="timePicker" catchtap="catchtap">
+        <view class="flex-rr">
+            <image class="close" src="http://qn.colorcun.com/custom/lite-yd/image/add-act.png" bindtap="CustomRemarkMore"></image>
+        </view>
+        <view class="flex-cc" style="margin-bottom: 56rpx; font-size: 30rpx;">
+            <view bindtap="calendarClose">更多标签</view>
+        </view>
+        <view class="flex-ll" style="flex-wrap:wrap;width: 110%; margin-left: -5%; max-height: 700rpx;overflow-y: auto;">
+            <view class="CustomRemarkItem {{item.active?'active':''}}" wx:for="{{CustomRemark}}"
+                  wx:if="{{item.often_use}}" bindtap="oftenUse"
+                  data-id="{{item.id}}"
+                  data-value="{{item.often_use}}">{{item.often_use}}</view>
+        </view>
+    </view>
+</view>

+/* pages/book/b_addnew.wxss */
+.page{
+  width: 90%;
+  margin: 20rpx 4% 0;
+
+}
+.base-info{
+
+}
+.section{
+  height: 110rpx;
+}
+.section .label{
+  width: 60rpx;
+  font-size: 30rpx;
+  margin-right: 38rpx;
+}
+.date{
+  color:#199095;
+  width: 100%;
+  font-size: 38rpx;
+  font-weight: bold;
+}
+.date-item{
+  width: 50%;
+}
+.date-item-text{
+  height: 60rpx;
+  line-height: 60rpx;
+  border-bottom: 4rpx solid rgba(0,0,0,0);
+  width: 200rpx;
+  text-align: center;
+  color: #666666;
+}
+.checked .date-item-text{
+  border-bottom: 4rpx solid #199095;
+  color: #199095;
+}
+.date .more{
+  width: 65rpx;
+  min-width: 65rpx;
+  height: 60rpx;
+}
+.date .more view{
+  width: 12rpx;
+  height: 12rpx;
+  border-radius: 50%;
+  margin-right: 12rpx;
+  background-color: #999;
+}
+.section .tab{
+  font-size: 34rpx;
+  color: #199095;
+}
+.section .tab .item{
+  height: 50rpx;
+  line-height: 49rpx;
+  width: 210rpx !important;
+  min-width: 210rpx !important;
+  border-radius: 10rpx;
+  border: 2rpx solid #199095;
+  margin-right: 20rpx;
+  text-align: center;
+}
+.section .tab .item .item-text,.section .tab .item .picker{
+  height: 46rpx;
+  line-height: 46rpx;
+}
+.section .tab .item .picker{
+  width:210rpx;
+  text-align: center;
+}
+.section .tab .item-pnum{
+  height: 50rpx;
+  line-height: 50rpx;
+  width: 60rpx !important;
+  min-width: 60rpx !important;
+  border-radius: 10rpx;
+  border: 2rpx solid #199095;
+  margin-right: 32rpx;
+  text-align: center;
+}
+.section .tab .item-pnum .pnum,.section .tab .item .pnum input{
+  height: 46rpx;
+  line-height: 46rpx;
+  font-size: 34rpx;
+}
+.section .tab .item:last-child{
+  margin-right: 0;
+}
+.section .tab .item-pnum:last-child{
+  margin-right: 0;
+}
+.section .tab .checked{
+  background-color:#199095;
+  color: #FEFEFE;
+  border: 2rpx solid #199095;
+}
+.section .tab .disabled{
+  background-color:#999999;
+  color: #efefef;
+  border: 2rpx solid #999999;
+}
+
+/**
+可定桌位
+ */
+.page-full{
+  width: 112%;
+  margin-left: -6%;
+  background-color: #F5F5F5;
+}
+.tables{
+  height: 314rpx;
+  font-size: 30rpx;
+}
+.tables .title{
+  padding-top: 36rpx;
+  height: 42rpx;
+  line-height: 42rpx;
+}
+.advice-desk-detail{
+  height: 220rpx;
+  width:100%;
+}
+.order-desk-info{
+  width:160rpx;
+  min-width: 160rpx;
+  height:160rpx;
+  background:#A9E3E6;
+  border:1px solid #A9E3E6;
+  border-radius:10rpx;
+  position:relative;
+  overflow:hidden;
+  margin-left:22rpx;
+}
+.desk-checked{
+  border:1px solid #199095;
+}
+.advice-desk-detail .order-desk-info:first-child{
+  margin-left:0;
+}
+.desk-active{
+  position: absolute;
+  top: -2rpx;
+  right: -2rpx;
+}
+.order-desk-type{
+  height:30rpx;
+  line-height: 30rpx;
+  background:#61A5D1;
+  position:absolute;
+  left:0;
+  top:0;
+  font-size: 26rpx;
+  padding: 0 12rpx 4rpx 8rpx;
+  border-radius: 0 16rpx 16rpx 0;
+}
+.advice-more{
+  padding:20rpx 0;
+  padding-left:30rpx;
+}
+.cut{
+  width:100%;
+  height:4px;
+  background:#efeef3;
+}
+
+
+
+/**
+预订人信息
+ */
+.book-info{
+  width:100%;
+  padding-top:20rpx;
+  margin:0 auto;
+  padding-bottom: 300rpx;
+}
+.book-info-single{
+  width:100%;
+  height:120rpx;
+  padding-top:40rpx;
+  border-bottom:1px solid #efeef3;
+}
+.book-info-single>input{
+  width:100%;
+  height:100rpx;
+}
+.book-info-grand{
+  height:50rpx;
+  border:1px solid #199095;
+  margin-top:20rpx;
+}
+.book-grand{
+  width:90rpx;
+  height:100%;
+  box-sizing:border-box;
+}
+.book-grand-active{
+  background:rgba(25,153,149,.8);
+}
+.book-grand-border{
+  border-right:1px solid #199095;
+}
+.book-grand-border:last-child{
+  border-width: 0;
+}
+.phone-reminder{
+  width:32rpx;
+  height:32rpx;
+  margin-left:20rpx;
+}
+
+
+/**
+提交按钮
+ */
+.submit{
+  position: fixed;
+  bottom: 120rpx;
+  left: 0;
+  right: 0;
+  height: 150rpx;
+  background-color: #fefefe;
+  z-index: 9;
+}
+.confirm-button{
+  width:680rpx;
+  height:85rpx;
+  background:#199095;
+  margin:42rpx auto 0;
+  border-radius:10rpx;
+  opacity:.6;
+}
+.confirm-button-active{
+  opacity:1;
+}
+
+
+@import "common/calendar.wxss";
+
+
+
+
+.placeholder-class-pnum{
+  color:#199095;
+  font-size: 34rpx;
+}
+
+.timePicker{
+  width: 80%;
+  overflow: hidden;
+  position: absolute;
+  bottom: 0;
+  border-top: 2rpx solid #ccc;
+  background-color: #FEFEFE;
+  padding: 20rpx 10% 80rpx;
+}
+.timePicker .time-item{
+  width: 150rpx;
+  height: 60rpx;
+  line-height: 60rpx;
+  font-size: 40rpx;
+  font-weight: bold;
+  color:#199095;
+  border: 2rpx solid #199095;
+  border-radius: 10rpx;
+  text-align: center;
+  margin-right: 66rpx;
+  margin-bottom: 60rpx;
+}
+.timePicker .time-item.checked{
+  background-color: #199095;
+  color:#fefefe;
+}
+.timePicker .close{
+  width: 50rpx;
+  height: 50rpx;
+  transform:rotate(45deg);
+  margin-top: -10rpx;
+  margin-right: -10%;
+}
+
+.CustomRemark{
+  line-height: 60rpx;
+  overflow: hidden;
+}
+.CustomRemarks{
+  width: 100%;
+}
+.CustomRemarksView{
+  height: 60rpx;
+  overflow: hidden;
+}
+.CustomRemarkMore{
+  width: 200rpx;
+  min-width: 200rpx;
+  color:#199095;
+  font-size: 30rpx;
+}
+.CustomRemarkItem{
+  height: 48rpx;
+  line-height: 48rpx;
+  padding: 4rpx 14rpx;
+  background-color: #F5F5F5;
+  font-size: 30rpx;
+  color: #999999;
+  border-radius: 10rpx;
+  margin-right: 20rpx;
+  float: left;
+  margin-bottom: 40rpx;
+}
+.CustomRemarkItem:last-child{
+  margin-right: 0;
+}
+.CustomRemarkMore .CustomRemarkItem{
+  padding: 4rpx 24rpx;
+}
+.book-info-single.last{
+  border-width: 0;
+}
+.CustomRemarkItem.active{
+  background-color: #6AB6B9;
+  color: #FFFFFF;
+}