C端调整

@@ -75,6 +75,15 @@
   align-content: flex-start;
   align-content: flex-start;
   flex-flow:wrap;
   flex-flow:wrap;
 }
 }
+/*流式布局--左对齐*/
+.flex-auto-ll{
+  display:flex;
+  display:-webkit-flex;
+  justify-content:space-between;
+  align-content:space-around;
+  flex-flow:wrap;
+  align-items:stretch;
+}
 .font34r{
 .font34r{
     font-size:34rpx;
     font-size:34rpx;
 }
 }

+// components/reserve/caixi.js
+import util from '../../utils/util';
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    multiArray:{
+      type:Array,
+      value:[],
+    },
+    multiIndex:{
+      type:Array,
+      value:[],
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    hidden:true
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    hide(){
+      this.setData({
+        hidden:true,
+      })
+    },
+    active(e){
+      this.triggerEvent('active',util.attr(e,'index'));
+      this.hide();
+    },
+    show(){
+      this.setData({
+        hidden:false,
+      })
+    },
+  }
+})

+{
+  "component": true,
+  "usingComponents": {}
+}

+<!--components/reserve/caixi.wxml-->
+<cover-view class="mask" catchtap="hide" hidden="{{hidden}}">
+    <cover-view class="caixi" catchtap="">
+        <cover-view class="caixi-title flex-lr" catchtap="hide">
+            <cover-view class="close"></cover-view>
+            <cover-view class="title Semibold">选择菜系</cover-view>
+            <cover-view class="close">
+                <cover-image src="http://qn.colorcun.com/reserve/images/%E5%85%B3%20%20%E9%97%AD.png"></cover-image>
+            </cover-view>
+        </cover-view>
+        <cover-view class="caixi-view flex-auto-ll">
+            <cover-view class="item {{index==multiIndex[0]?'active':''}}"
+                        bindtap="active" data-index="{{index}}"
+                        wx:for="{{multiArray[0]}}" wx:key="multiArray.key">
+                {{item}}
+            </cover-view>
+        </cover-view>
+    </cover-view>
+</cover-view>

+/* components/reserve/caixi.wxss */
+@import "../../app.wxss";
+.caixi{
+  background-color: #fefefe;
+  position: fixed;
+  bottom: 0;
+  width: 90%;
+  border-radius: 10rpx 10rpx 0 0;
+  padding: 40rpx 5% 10rpx;
+  color: #353535;
+}
+.caixi-title{
+  height: 44rpx;
+  line-height: 44rpx;
+  font-size: 32rpx;
+  margin-bottom: 34rpx;
+}
+.close{
+  width: 32rpx;
+  height: 32rpx;
+  min-width: 32rpx;
+}
+.close cover-image{
+  width: 100%;
+  height: 100%;
+}
+.item{
+  background-color: #F0F0F9;
+  width: 150rpx;
+  height: 70rpx;
+  overflow: hidden;
+  white-space:nowrap;
+  border-radius: 4rpx;
+  line-height: 70rpx;
+  font-size: 24rpx;
+  text-align: center;
+  margin-bottom: 30rpx;
+}
+.item.active{
+  background-color: #ECC49C;
+  color:#8B5318;
+  font-weight: 900;
+}

@@ -131,7 +131,7 @@ Page({
     if(reg.test(systemInfo.system)){
     if(reg.test(systemInfo.system)){
       pt = systemInfo.statusBarHeight;
       pt = systemInfo.statusBarHeight;
       h = 44;
       h = 44;
-      this.transverseViewHeight=transverseViewHeight+20;
+      this.transverseViewHeight=transverseViewHeight+30;
     }else{
     }else{
       if(/xiaomi/i.test(systemInfo.brand)){
       if(/xiaomi/i.test(systemInfo.brand)){
         this.transverseViewHeight=transverseViewHeight+15;
         this.transverseViewHeight=transverseViewHeight+15;
@@ -690,4 +690,15 @@ Page({
     setTimeout(()=>{this.getMarkers();},0)
     setTimeout(()=>{this.getMarkers();},0)
 
 
   },
   },
+  caixiActive(e){
+    console.log('caixiActive',e);
+    this.bindMultiPickerChange({
+      detail:{
+        value:[e.detail]
+      }
+    })
+  },
+  caixiShow(){
+    this.selectComponent('#caixi').show();
+  },
 })
 })

@@ -8,6 +8,7 @@
     "getpos":"/components/userinfo/getpos",
     "getpos":"/components/userinfo/getpos",
     "sb-tr":"/components/reserve/seller-box-transverse/seller-box",
     "sb-tr":"/components/reserve/seller-box-transverse/seller-box",
     "a2l":"/components/tips/add-to-lite",
     "a2l":"/components/tips/add-to-lite",
-    "ds":"/components/tips/discount"
+    "ds":"/components/tips/discount",
+    "caixi":"/components/reserve/caixi"
   }
   }
 }
 }

@@ -28,12 +28,8 @@
     </view>
     </view>
     <view class="transverse-view">
     <view class="transverse-view">
         <view class="transverse-search flex-ll">
         <view class="transverse-search flex-ll">
-            <picker
-                    mode="multiSelector"
-                    bindchange="bindMultiPickerChange"
-                    bindcolumnchange="bindMultiPickerColumnChange"
-                    value="{{multiIndex}}"
-                    range="{{multiArray}}"
+            <view
+                    bindtap="caixiShow"
                     class="tags {{multiIndex[0]>0?'active':''}}"
                     class="tags {{multiIndex[0]>0?'active':''}}"
             >
             >
                 <view class="picker flex-lr">
                 <view class="picker flex-lr">
@@ -43,7 +39,7 @@
                     </view>
                     </view>
                     <view class="more"></view>
                     <view class="more"></view>
                 </view>
                 </view>
-            </picker>
+            </view>
             <block wx:for="{{tags}}" wx:key="tags.key">
             <block wx:for="{{tags}}" wx:key="tags.key">
                 <view class="tags {{item.active?'active':''}}"
                 <view class="tags {{item.active?'active':''}}"
                       bindtap="tagsChange"
                       bindtap="tagsChange"
@@ -86,3 +82,6 @@
 <cover-view class="tab-patch"></cover-view>
 <cover-view class="tab-patch"></cover-view>
 <ds wx:if="{{hasSetActivity}}" map="{{map}}" id="ds"></ds>
 <ds wx:if="{{hasSetActivity}}" map="{{map}}" id="ds"></ds>
 <a2l bindshow="a2lshow" bindhide="a2lshow"></a2l>
 <a2l bindshow="a2lshow" bindhide="a2lshow"></a2l>
+<caixi multiArray="{{multiArray}}" multiIndex="{{multiIndex}}"
+    bindactive="caixiActive" id="caixi"
+></caixi>

@@ -157,5 +157,7 @@
   margin-right: 0;
   margin-right: 0;
 }
 }
 .transverse-search .tags.active{
 .transverse-search .tags.active{
-  background:linear-gradient(to bottom ,#F9E2B9, #FEBF72)
+  background:linear-gradient(to bottom ,#F4DAB9,#E9BE94);
+  color:#8B5318;
+  font-weight: 900;
 }
 }