<!-- 可用组件：https://mp.weixin.qq.com/debug/wxadoc/dev/component/ -->
<import src="../template/template" />
<view class="detail">
  <!--carousel-->
  <template is="carousel" data="{{ imgUrls }}"></template>
  <!--restaurant-wait-info-->
  <view class="d-wait">
    <!--wait info-->
    <view wx:for="{{ waitInfo }}" wx:key="unique">
      <view class="kind">
        {{ item.kind }}
      </view>
      <view class="desk" wx:if="{{ index == 0 }}">
        {{ item.desk }}
      </view>
      <view class="desk" wx:if="{{ item.number }}">
        <text>{{ item.number }}</text>{{ item.desk }}
      </view>
      <view class="desk" wx:if="{{ !item.number && index != 0 }}">
          无需等待
      </view>
      <view class="time">
        {{ item.time }}
      </view>
    </view>
    <!--restaurant rulers-->
    <text>{{ detailRules }}</text>
  </view>
  <!--restaurant-info-->
  <view class="restaurant-info">
    <view class="top">
      <image src="{{ restaurant.img }}"></image>
      <view class="top-center">
        <text class="top-center-name">{{ restaurant.name }}</text>
        <text class="restaurant-grade {{ restaurant.grade }} iconfont icon-wuxing"></text>
      </view>
      <view class="distance">距离{{ restaurant.distance }}m</view>
    </view>
    <view class="r-i-address iconfont icon-icglobaltitlebar48iconfontmap">{{ restaurant.address }}</view>
    <view bindtap="callPhone" class="r-i-tel iconfont icon-dianhua triangle">{{ restaurant.tel }}</view>
    <view class="r-i-time iconfont icon-shijian">营业时间：{{ restaurant.time }}</view>
  </view>
</view>
<navigator open-type="redirect" url="../ordering/ordering?shopId={{ restaurant.id }}" hover-class="none" class="take-number">立即取号</navigator>

.d-wait {
  display: flex;
  flex-direction: column;
  border-bottom: 11rpx solid #eee;
}
.d-wait > view {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 1rpx solid #eee;
  line-height: 56rpx;
}
.d-wait > view .kind,
.d-wait > view .desk,
.d-wait > view .time {
  width: 33.33%;
  text-align: center;
  font-size: 24rpx;
  color: #666;
}
.d-wait > view .desk > text {
  color: #ed4d30;
}
.d-wait > view:nth-child(1) {
  background-color: #eee;
}
.d-wait > view:nth-child(1) .kind,
.d-wait > view:nth-child(1) .desk,
.d-wait > view:nth-child(1) .time {
  color: #333;
}
.d-wait > text {
  color: #999;
  font-size: 22rpx;
  line-height: 55rpx;
  padding-left: 46rpx;
}
.d-wait > text::before {
  display: inline-block;
  content: '';
  width: 8rpx;
  height: 8rpx;
  background-color: #a0a0a0;
  border-radius: 50%;
  transform: translate(-11rpx, -2rpx);
}
.restaurant-info .top {
  display: flex;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
  align-items: center;
}
.restaurant-info .top image {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}
.restaurant-info .top .top-center {
  display: flex;
  flex-direction: column;
  padding-left: 30rpx;
}
.restaurant-info .top .top-center .top-center-name {
  font-size: 26rpx;
  color: #333;
  line-height: 50rpx;
}
.restaurant-info .top .top-center .restaurant-grade {
  position: relative;
  overflow: hidden;
  font-size: 26rpx;
  color: #ccc;
}
.restaurant-info .top .distance {
  flex: 1;
  text-align: right;
  color: #999;
  font-size: 26rpx;
}
.restaurant-info .r-i-address,
.restaurant-info .r-i-tel,
.restaurant-info .r-i-time {
  line-height: 60rpx;
  border-bottom: 1rpx solid #e5e5e5;
  padding-left: 65rpx;
  font-size: 24rpx;
}
.restaurant-info .triangle::after {
  right: 30rpx;
}
.restaurant-info .r-i-address::before,
.restaurant-info .r-i-tel::before,
.restaurant-info .r-i-time::before {
  display: inline-block;
  color: #333;
  font-size: 30rpx;
  transform: translateX(-20rpx);
}
.take-number {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #ed4d30;
  color: #fff;
  font-size: 30rpx;
  font-weight: 700;
  line-height: 72rpx;
  text-align: center;
}

'use strict';

// 获取全局应用程序实例对象
// const app = getApp()

// 创建页面实例对象
Page({
  /**
   * 页面的初始数据
   */
  data: {
    title: 'detail',
    detailRules: '听到叫号请到迎宾台，过号不作废，延三桌安排',
    imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],
    waitInfo: [{
      kind: '餐桌类型',
      desk: '等待桌数',
      time: '预估时间'
    }, {
      kind: '小桌（1-2人）',
      desk: '桌',
      number: '1',
      time: '--分钟'
    }, {
      kind: '中桌（3-4人）',
      desk: '桌',
      number: '1',
      time: '--分钟'
    }, {
      kind: '大桌（5人以上）',
      desk: '桌',
      time: '--分钟'
    }],
    restaurant: {
      img: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      name: '人马科技大饭堂',
      distance: '100',
      grade: 'four-star',
      address: '汇德商业大厦501',
      tel: '1361234567895',
      time: '10:00-22:00'
    }
  },
  /**
   * 拨打电话
   */
  callPhone: function callPhone() {
    wx.makePhoneCall({
      phoneNumber: this.data.restaurant.tel
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function onLoad() {
    // TODO: onLoad
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function onReady() {
    // TODO: onReady
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function onShow() {
    // TODO: onShow
  },


  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function onHide() {
    // TODO: onHide
  },


  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function onUnload() {
    // TODO: onUnload
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function onPullDownRefresh() {
    // TODO: onPullDownRefresh
  }
});
//# sourceMappingURL=detail.js.map