buy page dev

app.wxss

@@ -32,9 +32,10 @@
   position: absolute;
   top:70rpx;
   left:40rpx;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 30rpx;
+}
+.page_head_back image{  
+  width:30rpx;
+  height: 30rpx;
 }
 .page_head_w{
   padding-top: 60rpx;

common/pathmap.js

@@ -10,5 +10,6 @@ export default{
   "goodcar":"/api/good_car",
   "goodcardetail":"/api/good_car_detail",
   "storeinfo":"/api/store_info",
-  "searchcar":"/api/cars"
+  "searchcar":"/api/cars",
+  "wheres":"/api/wheres"      //筛选条件获取
 }

common/stylemap.js

@@ -0,0 +1,4 @@
+export default {
+	"headerheight":128,
+	"topsearchheight":78
+}

module/header.wxml

@@ -1,16 +1,22 @@
 <!-- 公用 用于页面顶部文字  -->
 
 <template name="header">  
-  <view class="page_head_place">
+  <view 
+    class="page_head_place"
+    style="height:{{headerheight-70}}rpx;"
+  >
     本网页由m.dyhc.com提供
   </view>
-  <view class="page_head">
+  <view 
+    class="page_head"    
+    style="height:{{headerheight}}rpx;"
+  >
     <navigator
       wx:if="{{hasback}}"
       class="page_head_back"
-      style="background-image:url(../../img/back.png)"
       open-type='navigateBack'
     >
+      <image src="../../img/back.png"/>
     </navigator>
     <view class="page_head_w">
       {{title}}

module/search/search.js

@@ -10,7 +10,6 @@ const bindSearch = function (_self){
 export const searchmodule = {
   inputBlur: function(e) {
     this.setData({
-      searchshow: false,
       searchfocus: false
     })
   },
@@ -46,6 +45,12 @@ export const searchmodule = {
         searchfocus: true
       })
     }, 500)
+  },
+  cancelSearch:function(e){
+    var _self = this;
+    this.setData({
+      searchshow: false
+    })
   }
 }
 export const linkToSearch = function (word) {

module/search/search.wxml

@@ -12,8 +12,14 @@
       搜索
     </navigator>
   </view> -->  
-  <view class="search_space"></view>
-  <view class="search {{searchshow?'search_focus':''}}">
+  <view 
+    class="search_space" 
+    style="height:{{topsearchheight}}rpx;"
+  ></view>
+  <view   
+    style="height:{{topsearchheight}}rpx;"
+    class="search {{searchshow?'search_focus':''}}"
+  >
     <view 
       class="search_input_b"
     >

pages/buy/buy.js

@@ -1,4 +1,5 @@
 import { get,post } from "../../common/request.js"
+import stylemap from "../../common/stylemap"
 import pathmap from "../../common/pathmap"
 import { retCartData } from "../../data/car"
 import bindSearch from "../../module/search/search.js"
@@ -63,7 +64,8 @@ Page({
       }
     ],
     searchdata:{
-      sortby:""
+      sortby:"",
+      price:""
     }
   },
 
@@ -72,7 +74,9 @@ Page({
    */
   onLoad: function (options) {
     bindSearch(this);
+    this.setData(stylemap);
     var searchdata = Object.assign(this.data.searchdata,{keys:options.keys||""});
+    this.getWheres();
     this.getList(this.data.searchdata);
   },
   transformSearchData:function(searchdata){
@@ -86,6 +90,29 @@ Page({
     delete para.sortby;
     return para;
   },
+  //获取筛选信息
+  getWheres:function(){
+    var _self = this;
+    get(pathmap.wheres, {
+    }, function (json) {
+      var brandlist = {};
+      json.data.brandlist = []
+      for(var i = 65; i < 91; 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);
+        }
+      })
+      for(var name in brandlist){
+        json.data.brandlist.push(brandlist[name]);
+      }
+      _self.setData({
+        wheres: json.data
+      })
+    })
+  },
   getList:function(searchdata){
     var _self = this;
     var para = this.transformSearchData(searchdata);
@@ -128,6 +155,15 @@ Page({
     })
     this.getList(searchdata);
   },
+  changePrice:function(e){
+    var el = e.currentTarget;
+    var id = el.dataset.id;
+    var searchdata = Object.assign(this.data.searchdata,{price:id});
+    this.setData({
+      selectbar:""
+    })
+    this.getList(searchdata);
+  },
   loadLikeCar:function(){
     var _self = this;
     if(!this.data.like){

pages/buy/buy.wxml

@@ -48,20 +48,70 @@
         </block>
       </view>
     </view>
+    <!--筛选价格模块-->
+    <view 
+      class="price_c"
+      style="height: {{selectbar=='price'?windowh:'0'}}rpx;"
+    >
+      <view class="price_list">
+        <view 
+            class="price_item {{searchdata.price == ''?'price_item_active':''}}" 
+            data-id=""
+            bindtap="changePrice"
+          >
+            不限价格
+          </view>
+        <block wx:for="{{wheres.price}}" wx:key="price_id">
+          <view 
+            class="price_item {{searchdata.price == item.price_id?'price_item_active':''}}" 
+            data-id="{{item.price_id}}"
+            bindtap="changePrice"
+          >
+            {{item.price_name}}
+          </view>
+        </block>
+      </view>
+    </view>
   </view>
+  <!--筛选品牌模块-->
+  <scroll-view
+    class="brandw_c"
+    style="height:{{windowh}}rpx; {{selectbar=='brand'?'left:0rpx;':''}}"
+  >
+    <view      
+      style="height:{{headerheight}}rpx;"
+    ></view>
+    <view 
+      class="brandw_title"
+      style="height:{{headerheight}}rpx;"
+    >
+      <image 
+        class="brandw_back" 
+        src="../../img/back.png"
+        bindtap="brandBack"
+      />
+      <view class="brandw_title_w">品牌</view>
+    </view>
+    <view class="brandw_list">
+      <view class="brandw_t_line">热门品牌</view>
+      <block wx:for="{{wheres.brandlist}}">
+        
+      </block>
+    </view>
+  </scroll-view>
   <view wx:if="{{list.length>0}}" class="cart_list">
     <block wx:for="{{list}}" wx:key="id">
       <template is="caritem" data="{{car:item}}"/>
     </block>
   </view>
-  <view wx:else class="you_may_like">
+  <view wx:else class="you_may_like">    
+    <view class="nocar_w">没有相关结果，可以试试其他条件</view>
+    <view class="nocar_back">查看所有好车</view>
     <view class="recommend">
       <view class="recommend_t">
         <image class="recommend_img" src="../../img/like.png"/>
       </view>
     </view>
-    <view class="nocar_w">没有相关结果，可以试试其他条件</view>
-    <view class="nocar_back">查看所有好车</view>
     <view class="like_cart_c">
       <block wx:for="{{like}}" wx:key="id">
         <template is="caritem" data="{{car:item}}"/>

pages/buy/buy.wxss

@@ -39,6 +39,9 @@
 .filter_nav_item_active .filter_nav_switch{
 	transform: rotate(180deg);
 }
+
+
+/****************排序条件***************/
 .sortby_c{
 	overflow: hidden;
 	transition: all 0.5s;
@@ -63,11 +66,75 @@
 	float:right;
 	margin:30rpx 15rpx 0rpx; 
 }
+/****************间隔区间***************/
+.price_c{
+	overflow: hidden;
+	transition: all 0.5s;
+	background-color: rgba(56, 55, 53, 0.2);
+}
+.price_list{
+	background: white;
+	padding-left:38rpx;
+	padding-bottom: 30rpx;
+	display: flex;
+	justify-content:flex-start;
+	flex-wrap:wrap;
+}
+.price_item{
+	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;
+}
+.price_item_active{
+	background: rgba(255, 230, 0, 0.1);
+	border:1px solid #FFE600;
+}
 
+/****************品牌筛选条件***************/
+.brandw_c{
+	position: fixed;
+	top:0rpx;
+	left:100%;
+	width: 100%;
+	background: white;
+	z-index:101;
+	transition: all 0.5s;
+}
+.brandw_title{
+	background-color:#fede18;
+	height:128rpx;
+	position: fixed;
+	z-index:100;
+	top:0rpx;
+	width: 100%;
+}
+.brandw_back{
+	width:30rpx;
+	height: 30rpx;
+	position: absolute;
+	top:70rpx;
+	left:40rpx;
+}
+.brandw_title_w{
+	padding-top: 60rpx;
+	font-size: 36rpx;
+	height: 44rpx;
+	line-height: 44rpx;
+	text-align: center;
+}
 
 /*******like*******/
 .nocar_w{
-	mrgin-top:55rpx;
+	margin-top:55rpx;
 	height: 39rpx;
 	line-height: 39rpx;
 	color: rgba(56, 55, 53, 1);
@@ -75,14 +142,15 @@
 	text-align: center;
 }
 .nocar_back{
+	width:280rpx;
 	height: 68rpx;
 	border-radius: 6rpx;
 	line-height: 68rpx;
 	color: rgba(56, 55, 53, 1);
 	font-size: 26rpx;
 	text-align: center;
-
-
+	background:linear-gradient(90deg,#FFD800,#FFE600);
+	margin:40rpx auto;
 }
 .recommend{
   margin-top:20rpx;

pages/index/index.js

@@ -1,6 +1,7 @@
 //index.js
 //获取应用实例
 import {get} from "../../common/request.js"
+import stylemap from "../../common/stylemap"
 import pathmap from "../../common/pathmap"
 import { retCartData} from "../../data/car"
 import bindSearch from "../../module/search/search.js"
@@ -17,6 +18,7 @@ Page({
   },
   onLoad: function () {
     var _self = this;
+    this.setData(stylemap);
     this.loadBanner();
     this.loadGoodCar();
     this.loadRecommendedCar();