liguorui %!s(int64=7) %!d(string=hai) anos
pai
achega
7c5ebdc218
Modificáronse 6 ficheiros con 472 adicións e 15 borrados
  1. 2 1
      app.js
  2. 2 1
      common/pathmap.js
  3. 74 4
      pages/buy/buy.js
  4. 247 7
      pages/buy/buy.wxml
  5. 146 1
      pages/buy/buy.wxss
  6. 1 1
      pages/index/index.wxml

+ 2 - 1
app.js

@@ -35,7 +35,8 @@ App({
     // })
     wx.getSystemInfo({
       success:function(res) {
-        _self.globalData.windowh = res.windowHeight*2
+        _self.globalData.scale = 750/res.windowWidth;
+        _self.globalData.windowh = res.windowHeight*_self.globalData.scale;
       }
     });
   },

+ 2 - 1
common/pathmap.js

@@ -11,5 +11,6 @@ export default{
   "goodcardetail":"/api/good_car_detail",
   "storeinfo":"/api/store_info",
   "searchcar":"/api/cars",
-  "wheres":"/api/wheres"      //筛选条件获取
+  "wheres":"/api/wheres",      //筛选条件获取
+  "series":"/api/car_series"  //获取车系信息
 }

+ 74 - 4
pages/buy/buy.js

@@ -65,7 +65,13 @@ Page({
     ],
     searchdata:{
       sortby:"",
-      price:""
+      price:"",
+      car_age:"",
+      mileage:"",
+      transmission:"",
+      displacement:"",
+      emission:"",
+      colour:""
     }
   },
 
@@ -74,7 +80,8 @@ Page({
    */
   onLoad: function (options) {
     bindSearch(this);
-    this.setData(stylemap);
+    var initialheight = (app.globalData.windowh-300)/26;
+    this.setData(Object.assign({initialheight:initialheight},stylemap));
     var searchdata = Object.assign(this.data.searchdata,{keys:options.keys||""});
     this.getWheres();
     this.getList(this.data.searchdata);
@@ -98,15 +105,25 @@ Page({
       var brandlist = {};
       json.data.brandlist = []
       for(var i = 65; i < 91; i++){
-        brandlist[String.fromCharCode(i)];
+        brandlist[String.fromCharCode(i)] = [];
       }
       json.data.brand.forEach(function(item){
         if(Object.prototype.toString.call(brandlist[item.initial])=="[object Array]"){
           brandlist[item.initial].push(item);
         }
       })
+      var inith = 504;
+      var scale = app.globalData.scale;
       for(var name in brandlist){
-        json.data.brandlist.push(brandlist[name]);
+        var l = brandlist[name].length;
+        if(l>0){
+          json.data.brandlist.push({
+            initial:name,
+            list:brandlist[name],
+            top:inith/scale
+          });          
+          inith = inith+45+l*79;
+        }
       }
       _self.setData({
         wheres: json.data
@@ -177,5 +194,58 @@ Page({
         })
       })
     }
+  },
+  scrollInit:function(e){
+    var init = e.currentTarget.dataset.init;
+    this.setData({
+      scrolltoinit:init
+    })
+  },
+  getBrandDetail:function(e){
+    var _self = this;
+    var brand = e.currentTarget.dataset.brand;
+    get(pathmap.series, {
+      brand_id:brand.brand_id
+    }, function (json) {
+      var list = retCartData(json.data.list)
+      _self.setData({
+        serieslist: json.data
+      })
+    })
+  },
+  brandScroll:function(e) {
+    //this.setData({ brandScrollTop: e.detail.scrollTop })
+    var scrollinit = "";
+    var list = this.data.wheres.brandlist;
+    for(var i=0,l=list.length;i<l;i++){
+      if(e.detail.scrollTop<list[i].top){
+        scrollinit = list[i].initial;
+        break;
+      }
+    }
+    this.setData({scrollinit:scrollinit})
+  },
+  filterBack:function(){
+    this.setData({selectbar:""})
+  },
+  getMoreFilter:function(e){
+    var info = e.currentTarget.dataset;
+    var obj = {};
+    obj[info.type]=info.value;
+    this.setData({searchdata:Object.assign(this.data.searchdata,obj)})
+  },
+  resetFilter:function(){
+    this.setData({searchdata:Object.assign(this.data.searchdata,{      
+      car_age:"",
+      mileage:"",
+      transmission:"",
+      displacement:"",
+      emission:"",
+      colour:""
+    })})
+  },
+  moreSearch:function(){    
+    this.setData({selectbar:""})
+    this.getList(this.data.searchdata);
   }
 })

+ 247 - 7
pages/buy/buy.wxml

@@ -2,10 +2,14 @@
 <import src="../../module/header.wxml"/>
 <import src="../../module/footer.wxml"/>
 <import src="../../module/caritem/caritem.wxml"/>
-<scroll-view class="conent">
- <template 
-    is="header" 
-    data="{{title:'我要买车'}}"
+<scroll-view 
+  class="conent"
+  style="height:{{windowh}}rpx;"
+  scroll-y="{{selectbar==''?'true':'false'}}"
+>
+  <template 
+    is="header"
+    data="{{title:'我要买车',headerheight:headerheight}}"
   />
   <include src="../../module/search/search.wxml"/>
   <view class="filter_space"></view>
@@ -76,7 +80,10 @@
   <!--筛选品牌模块-->
   <scroll-view
     class="brandw_c"
-    style="height:{{windowh}}rpx; {{selectbar=='brand'?'left:0rpx;':''}}"
+    style="{{selectbar=='brand'?'left:0rpx;':''}}"
+    scroll-into-view ="{{scrolltoinit}}"
+    bindscroll="brandScroll"
+    scroll-y=true
   >
     <view      
       style="height:{{headerheight}}rpx;"
@@ -88,15 +95,248 @@
       <image 
         class="brandw_back" 
         src="../../img/back.png"
-        bindtap="brandBack"
+        bindtap="filterBack"
       />
       <view class="brandw_title_w">品牌</view>
     </view>
     <view class="brandw_list">
       <view class="brandw_t_line">热门品牌</view>
+      <view class="brandw_hotlist">
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+        <view class="brandw_hotlist_item">
+          <view class="brandw_hotitem_img" style="background-image:url(../../img/brand.png)"></view>
+          <view class="brandw_hotitem_name">11111</view>
+        </view>
+      </view>
+
+      <view class="brandw_t_line">不限品牌</view>
       <block wx:for="{{wheres.brandlist}}">
-        
+        <view class="brandw_binitial" id="{{item.initial}}">
+          {{item.initial}}
+        </view>
+        <block wx:for="{{item.list}}" wx:for-item="branditem">
+          <view 
+            class="brandw_bitem"
+            bindtap="getBrandDetail"
+            data-brand="{{branditem}}"
+          >
+            <view
+              class="brandw_bimg"
+              style="background-image:url(../../img/brand.png)"
+            />
+            <view class="brandw_bname">{{branditem.brand_name}}</view>
+          </view>
+        </block>
       </block>
+      <view
+        class="brand_serieslist"
+        style="height: {{windowh-headerheight}}rpx"
+      >
+
+        <block
+          wx:for="{{serieslist}}"
+        >
+          <view class="brand_series_i">
+            
+          </view>          
+        </block>
+      </view>
+      <view 
+        class="brand_initail_c"
+        style="display: {{selectbar=='brand'?'block':'none'}}"
+      >
+        <view 
+          class="brand_initail_i {{scrollinit==item.initial?'brand_initail_active':''}}" 
+          wx:for="{{wheres.brandlist}}"
+          style="height:{{initialheight}}rpx"
+          bindtap="scrollInit"
+          data-init = "{{item.initial}}"
+        >
+          {{item.initial}}
+        </view>
+      </view>
+    </view>
+  </scroll-view>
+
+ <!--  更多筛选条件 -->
+
+  <scroll-view
+    class="more_c"
+    style="{{selectbar=='more'?'left:0rpx;':''}}"
+    scroll-y=true
+  >
+    <view      
+      style="height:{{headerheight}}rpx;"
+    ></view>
+    <view 
+      class="brandw_title"
+      style="height:{{headerheight}}rpx;"
+    >
+      <image 
+        class="brandw_back" 
+        src="../../img/back.png"
+        bindtap="filterBack"
+      />
+      <view class="brandw_title_w">更多筛选</view>
+    </view>
+    <view class="wheres_more_i">
+      <view class="more_n">车龄</view>
+      <view class="more_list">
+        <view
+          class="more_detail_i {{searchdata.car_age==''?'more_detail_active':''}}"
+          data-type="car_age"
+          data-value=""
+          bindtap="getMoreFilter"
+        >不限</view>
+        <view 
+          wx:for="{{wheres.car_age}}"
+          class="more_detail_i {{searchdata.car_age==item.car_age_id?'more_detail_active':''}}"          
+          data-type="car_age"
+          data-value="{{item.car_age_id}}"
+          bindtap="getMoreFilter"
+        >
+          {{item.car_age_name}}
+        </view>
+      </view>
+    </view>
+    <view class="wheres_more_i">
+      <view class="more_n">里程</view>
+      <view class="more_list">
+        <view
+          class="more_detail_i {{searchdata.mileage==''?'more_detail_active':''}}"
+          data-type="mileage"
+          data-value=""
+          bindtap="getMoreFilter"
+        >不限</view>
+        <view 
+          wx:for="{{wheres.mileage}}"
+          class="more_detail_i {{searchdata.mileage==item.mileage_id?'more_detail_active':''}}"          
+          data-type="mileage"
+          data-value="{{item.mileage_id}}"
+          bindtap="getMoreFilter"
+        >
+          {{item.mileage_name}}
+        </view>
+      </view>
+    </view>
+    <view class="wheres_more_i">
+      <view class="more_n">变数箱</view>
+      <view class="more_list">
+        <view
+          class="more_detail_i {{searchdata.transmission==''?'more_detail_active':''}}"
+          data-type="transmission"
+          data-value=""
+          bindtap="getMoreFilter"
+        >不限</view>
+        <view 
+          wx:for="{{wheres.transmission}}"
+          class="more_detail_i {{searchdata.transmission==item.transmission_id?'more_detail_active':''}}"          
+          data-type="transmission"
+          data-value="{{item.transmission_id}}"
+          bindtap="getMoreFilter"
+        >
+          {{item.transmission_name}}
+        </view>
+      </view>
+    </view>
+    <view class="wheres_more_i">
+      <view class="more_n">排量</view>
+      <view class="more_list">
+        <view
+          class="more_detail_i {{searchdata.displacement==''?'more_detail_active':''}}"
+          data-type="displacement"
+          data-value=""
+          bindtap="getMoreFilter"
+        >不限</view>
+        <view 
+          wx:for="{{wheres.displacement}}"
+          class="more_detail_i {{searchdata.displacement==item.displacement_id?'more_detail_active':''}}"          
+          data-type="displacement"
+          data-value="{{item.displacement_id}}"
+          bindtap="getMoreFilter"
+        >
+          {{item.displacement_name}}
+        </view>
+      </view>
+    </view>
+    <view class="wheres_more_i">
+      <view class="more_n">排放标准</view>
+      <view class="more_list">
+        <view
+          class="more_detail_i {{searchdata.emission==''?'more_detail_active':''}}"
+          data-type="emission"
+          data-value=""
+          bindtap="getMoreFilter"
+        >不限</view>
+        <view 
+          wx:for="{{wheres.emission}}"
+          class="more_detail_i {{searchdata.emission==item.emission_id?'more_detail_active':''}}"          
+          data-type="emission"
+          data-value="{{item.emission_id}}"
+          bindtap="getMoreFilter"
+        >
+          {{item.emission_name}}
+        </view>
+      </view>
+    </view>
+    <view class="wheres_more_i">
+      <view class="more_n">颜色</view>
+      <view class="more_list">
+        <view 
+          wx:for="{{wheres.colour}}"
+          class="more_detail_i {{searchdata.colour==item.colour_id?'more_detail_active':''}}"          
+          data-type="colour"
+          data-value="{{item.colour_id}}"
+          bindtap="getMoreFilter"
+        >
+          {{item.colour_name}}
+        </view>
+      </view>
+    </view>
+    <view class="more_bts">
+      <view 
+        class="more_bt_reset"
+        bindtap="resetFilter"
+        >重置</view>
+      <view 
+        bindtap="moreSearch"
+        class="more_bt_check"
+      >查看车源</view>
     </view>
   </scroll-view>
   <view wx:if="{{list.length>0}}" class="cart_list">

+ 146 - 1
pages/buy/buy.wxss

@@ -105,6 +105,7 @@
 	top:0rpx;
 	left:100%;
 	width: 100%;
+	height: 100%;
 	background: white;
 	z-index:101;
 	transition: all 0.5s;
@@ -131,7 +132,151 @@
 	line-height: 44rpx;
 	text-align: center;
 }
-
+.brandw_t_line{
+	height: 58rpx;
+	line-height: 58rpx;
+	background-color: rgba(242, 242, 245, 1);
+	color: rgba(56, 55, 53, 1);
+	font-size: 22rpx;
+	text-indent: 38rpx;
+}
+.brandw_hotlist{
+	padding: 0rpx 40rpx;
+	display: flex;
+	background: white;
+	flex-wrap: wrap;
+}
+.brandw_hotlist_item{
+	width:134rpx;
+	height: 159rpx;
+}
+.brandw_hotitem_img{
+	width: 70rpx;
+	height: 70rpx;
+	background-size: 70rpx;
+	background-repeat: no-repeat;
+	background-position: center;
+	margin:30rpx auto 0rpx;
+}
+.brandw_hotitem_name{
+	height: 33rpx;
+	line-height: 33rpx;
+	color: rgba(56, 55, 53, 1);
+	font-size: 22rpx;
+	text-align: center;
+}
+.brandw_binitial{
+	left: 0px;
+	top: 562px;
+	width: 750px;
+	height: 44rpx;
+	line-height: 44rpx;
+	border: 1rpx solid rgba(235, 235, 235, 1);
+	color:#FFE600;
+	font-size: 24rpx;
+	text-indent: 48rpx;
+}
+.brandw_bitem{
+	left: 0px;
+	line-height: 78rpx;
+	height: 78rpx;
+	border: 1rpx solid rgba(235, 235, 235, 1);
+}
+.brandw_bimg{
+	height: 60rpx;
+	width:60rpx;
+	float:left;
+	margin:10px 38rpx 0rpx;
+	background-repeat: no-repeat;
+	background-size: 60rpx;
+	background-position: center;
+}
+.brandw_bname{
+	display: inline;
+	margin-left:20rpx;
+	color: rgba(56, 55, 53, 1);
+	font-size: 26rpx;
+}
+.brand_initail_c{	
+	position: fixed;
+	bottom: 90rpx;
+	right:5rpx;
+}
+.brand_initail_i{
+	color:#383735;
+	font-size: 22rpx;
+	width: 35rpx;
+	text-align: center;
+}
+.brand_initail_active{
+	border-radius: 17rpx;
+	background-color: #FFE600;
+}
+/**********筛选条件更多************/
+.more_c{
+	position: fixed;
+	top:0rpx;
+	left:100%;
+	width: 100%;
+	height: 100%;
+	background: white;
+	z-index:101;
+	transition: all 0.5s;
+}
+.wheres_more_i{
+	margin-top:20rpx;
+}
+.more_n{
+	height: 42rpx;
+	line-height: 42rpx;
+	color: rgba(56, 55, 53, 1);
+	font-size: 28rpx;
+	text-indent: 38rpx;
+	font-family: NotoSansHans-Regular;
+}
+.more_list{
+	background: white;
+	padding-left:38rpx;
+	padding-bottom: 30rpx;
+	display: flex;
+	justify-content:flex-start;
+	flex-wrap:wrap;
+}
+.more_detail_i{
+	margin-top:20rpx;
+	margin-right: 22rpx;
+	border-radius: 6rpx;
+	height: 80rpx;
+	line-height: 80rpx;
+	width: 210rpx;
+	font-size:24rpx;
+	background-color: white;
+	color: rgba(56, 55, 53, 1);
+	background-color: rgba(248, 248, 250, 1);
+	border:1px solid rgba(248, 248, 250, 1);
+	text-align: center;
+}
+.more_detail_active{
+	background: rgba(255, 230, 0, 0.1);
+	border:1px solid #FFE600;
+}
+.more_bts{
+	margin-top:48rpx;
+	line-height: 98rpx;
+	color: rgba(56, 55, 53, 1);
+	font-size: 30rpx;
+	text-align: center;
+	display: flex;
+}
+.more_bt_reset{
+	border-top:1px solid #EBEBEB;
+	width: 240rpx;
+}
+.more_bt_check{
+	flex: 1;
+	border-top:1px solid #FFD800;
+	background: linear-gradient(270deg,#FFD800,#FFE600);
+}
 /*******like*******/
 .nocar_w{
 	margin-top:55rpx;

+ 1 - 1
pages/index/index.wxml

@@ -10,7 +10,7 @@
 >
   <template 
     is="header" 
-    data="{{title:'第一好车'}}"
+    data="{{title:'第一好车',headerheight:headerheight}}"
   />
   <include src="../../module/search/search.wxml"/>
   <template is="banner" data="{{banner:banner}}"/>