c端预定

+// components/reserve/seller-box/seller-box.js
+import util from '../../../utils/util';
+import App from '../../../utils/api';
+const {regeneratorRuntime} = global
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    seller:{
+        type:Object,
+        value:{},
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+      hasShow:false,
+      se:{},
+  },
+  attached(){
+      this.init()
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+      init(){
+          let seller=this.data.seller
+          seller.distance=parseInt(seller.distance);
+          if(seller.distance>1000){
+              seller.distance=(seller.distance/1000).toFixed(2)+'公里'
+          }else{
+              seller.distance+='米';
+          }
+          this.setData({
+              se:seller,
+          })
+      },
+      tapButton(e){
+          let type=util.attr(e,'type');
+          if(type=='oncall'){
+              if(!this.data.seller.phone){
+                  return util.toast('商家电话错误','none');
+              }
+              wx.makePhoneCall({
+                  phoneNumber:this.data.seller.phone
+              })
+          }else{
+              util.toast('请打电话预定','none');
+          }
+      },
+      lookLocation:function(){
+          wx.openLocation({
+              latitude:Number(this.data.seller.lat),
+              longitude:Number(this.data.seller.long),
+              scale:17,
+              address:this.data.seller.map_address,
+              success:function (res) {
+                  console.log(res)
+              }
+          })
+      },
+  }
+})

+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file

+<!--components/showModal/showModal.wxml-->
+<view class="seller flex-ll">
+    <view class="image">
+        <image src=""></image>
+    </view>
+    <view class="info flex-tb">
+        <view class="name Semibold">{{se.sellername}}</view>
+        <view class="text">潮汕火锅 | 距当前位置{{se.distance}}</view>
+        <view class="price flex-lr">
+            <view class="number Semibold">¥50元/人</view>
+            <view class="phone flex-ll" bindtap="tapButton" data-type="oncall">
+                <image src="http://qn.colorcun.com/custom/lite-online/image/phone.png"></image>
+                <text>预订</text>
+            </view>
+        </view>
+    </view>
+</view>
\ No newline at end of file

+/* components/reserve/seller-box/seller-box.wxss */
+@import "../../../app.wxss";
+.seller{
+  height: 240rpx;
+  overflow: hidden;
+  color: #353535;
+  width: 100%;
+  border: 2rpx solid #E0E0E0;
+  border-radius: 6rpx;
+  box-shadow: 0 4rpx 8rpx 0 #E0E0E0;
+}
+.seller image{
+  width: 100%;
+  height: 100%;
+}
+.seller .image{
+  width: 268rpx;
+  height: 240rpx;
+  background-color: #4C4E4F;
+  min-width: 268rpx;
+}
+.seller .info{
+  padding: 10rpx 3%;
+  height: 220rpx;
+  width: 94%;
+}
+.seller .name{
+  font-size: 32rpx;
+}
+.seller .text{
+  font-size: 28rpx;
+  color: #999999;
+}
+.seller .price{
+  font-size: 30rpx;
+  color: #F05522;
+  height: 50rpx;
+  line-height: 50rpx;
+  width: 100%;
+}
+.seller .phone{
+  width: 140rpx;
+  height: 50rpx;
+  background:linear-gradient(to bottom, #838383, #4C4C4C);
+  border-radius: 26rpx;
+  font-size: 26rpx;
+  color: #F0CEA1;
+  line-height: 50rpx;
+}
+.seller .phone image{
+  width: 28rpx;
+  height: 26rpx;
+  margin-right: 8rpx;
+  margin-left: 24rpx;
+}
\ No newline at end of file

+export default {
+  caixi:['福建菜','日本菜','火锅','日韩料理','西餐','川湘菜','江浙菜','粤菜','西北菜','徽菜','东北菜','云贵菜','客家菜','新疆菜'],
+}
\ No newline at end of file

 // pages/reservr/index.js
 import util from '../../utils/util';
 import App from '../../utils/api';
+import DA from './data';
 const {regeneratorRuntime} = global
 const mapScale=18
+const renNum=function(){
+  let arr=[]
+  for(let i=1;i<=30;i++){
+    arr.push(i+'位')
+  }
+  return arr;
+}
 Page({
 
   /**
@@ -17,8 +25,11 @@ Page({
     },
     markers: [],
     //polygons:{},
+    sellers:[],
+    multiArray: [['不确定'].concat(renNum()), ['全部菜系'].concat(DA.caixi)],
+    multiIndex: [6, 0],
   },
-  transverseViewHeight:150,//横向滚动高度
+  transverseViewHeight:170,//横向滚动高度
   //qqmapsdk:null,
   sellers: [],
   sellersIds:[],
@@ -318,6 +329,7 @@ Page({
       }
       this.setData({
         markers: markers,
+        sellers:this.sellers,
       })
     })
 

@@ -6,6 +6,6 @@
     "formids":"/components/formids/formids",
     "nav":"/components/nav/nav",
     "showModal":"/components/showModal/showModal",
-    "seller-box":"/components/reserve/seller-box/seller-box"
+    "sb-tr":"/components/reserve/seller-box-transverse/seller-box"
   }
 }
\ No newline at end of file

@@ -17,8 +17,34 @@
     </view>
     <view class="transverse-view">
         <cover-view class="transverse-view-top"></cover-view>
-        <view class="transverse-search"></view>
-        <view class="transverse-list"></view>
+        <view class="transverse-search">
+            <picker
+                    mode="multiSelector"
+                    bindchange="bindMultiPickerChange"
+                    bindcolumnchange="bindMultiPickerColumnChange"
+                    value="{{multiIndex}}"
+                    range="{{multiArray}}"
+            >
+                <view class="picker flex-lr" style="width: 100%">
+                    <view class="input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}</view>
+                    <view class="more"></view>
+                </view>
+            </picker>
+        </view>
+        <view class="transverse-list">
+            <scroll-view
+                    scroll-x
+                    class="scroll-view_H"
+            >
+                <view class="flex-ll">
+                    <view class="seller" wx:for="{{sellers}}" wx:key="{{sellers.key}}">
+                        <sb-tr seller="{{item}}"></sb-tr>
+                    </view>
+                    <view wx:if="{{sellers.length>1}}" style="min-width: 2rpx;min-height: 40rpx;"> </view>
+                </view>
+
+            </scroll-view>
+        </view>
     </view>
 </view>
 <cover-view bindtap="moveToLocation" class="moveToLocation">

@@ -16,7 +16,7 @@
 }
 .moveToLocation{
   position: fixed;
-  bottom: 344rpx;
+  bottom: 374rpx;
   right: 20rpx;
   width: 50rpx;
   height: 50rpx;
@@ -33,11 +33,11 @@
   position: relative;
   height: 324rpx;
   width: 100%;
-  background-color: #262628;
+  background-color: #fefefe;
 }
 .transverse-view-top{
   border-radius: 20rpx 20rpx 0 0;
-  background-color: #fe0000;
+  background-color: #fefefe;
   position: absolute;
   top:-20rpx;
   left: 0;
@@ -45,12 +45,43 @@
   height: 20rpx;
 }
 .transverse-search{
-  background-color: #1AAD19;
+  background-color: #fefefe;
   height: 60rpx;
   width: 100%;
 }
 .transverse-list{
-  background-color: #199095;
+  background-color: #fefefe;
   height: 264rpx;
   width: 100%;
+}
+.transverse-list .seller{
+  margin: 16rpx 20rpx 12rpx;
+  box-sizing: content-box;
+  min-width: 710rpx;
+  width: 100%;
+}
+
+.picker{
+  border-radius: 30rpx;
+  border: 2rpx solid #E0E0E0;
+  margin: 0 20rpx;
+  height: 55rpx;
+  padding: 0 30rpx;
+  line-height: 55rpx;
+  font-size: 28rpx;
+  max-width: 650rpx;
+}
+.picker .input{
+  background-image: url("http://qn.colorcun.com/custom/lite-online/image/write.png");
+  background-repeat: no-repeat;
+  text-indent: 50rpx;
+  background-size: 30rpx 28rpx;
+  height: 30rpx;
+  line-height: 30rpx;
+}
+.picker .more{
+  background-image: url("http://qn.colorcun.com/custom/lite-online/image/more-pull.png");
+  width: 24rpx;
+  height: 12rpx;
+  min-width:24rpx;
 }
\ No newline at end of file