瀏覽代碼

根据ui 更改页面结构

liguorui 6 年之前
父節點
當前提交
eb4b14950c

+ 1 - 1
app.js

@@ -34,6 +34,6 @@ App({
     // })
   },
   globalData: {
-    serverpath:"http://api.jasonre.cn"
+    serverpath:"https://api.jasonre.cn"
   }
 })

+ 2 - 1
app.json

@@ -9,6 +9,7 @@
     "backgroundTextStyle":"light",
     "navigationBarBackgroundColor": "#fede18",
     "navigationBarTitleText": "第一好车",
-    "navigationBarTextStyle":"black"
+    "navigationBarTextStyle":"black",
+    "navigationStyle":"custom"
   }
 }

+ 57 - 0
app.wxss

@@ -7,3 +7,60 @@
   justify-content: space-between;
   box-sizing: border-box;
 } 
+/***********header************/
+.page_head{
+  background-color:#fede18;
+  height:128rpx;
+  position: relative;
+}
+.page_head_back{
+  width:30rpx;
+  height: 30rpx;
+  position: absolute;
+  top:70rpx;
+  left:40rpx;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 30rpx;
+}
+.page_head_w{
+  padding-top: 60rpx;
+  font-size: 36rpx;
+  height: 44rpx;
+  line-height: 44rpx;
+  text-align: center;
+}
+
+/*************footer***************/
+.page_footer_place{
+  height: 98rpx;
+}
+.page_footer{
+  height: 98rpx;
+  position: fixed;
+  bottom: 0rpx;
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+  background-color: white;
+}
+.page_footer_item{
+  flex: 1;
+}
+.page_footer_navs{
+  width:50rpx;
+  margin:0px auto;
+}
+.page_footer_navs image{
+  display: block;
+  width:38rpx;
+  height: 38rpx;
+  margin:10px auto 0px;
+}
+.page_footer_w{
+  height: 36rpx;
+  line-height: 36rpx;
+  color: rgba(33, 36, 37, 1);
+  font-size: 24rpx;
+  text-align: center;
+}

二進制
img/back.png


二進制
img/footer_buy.png


二進制
img/footer_buy_active.png


二進制
img/footer_home.png


二進制
img/footer_home_active.png


二進制
img/footer_my.png


二進制
img/footer_my_active.png


二進制
img/footer_sell.png


二進制
img/footer_sell_active.png


img/assess.png → img/home_assess.png


img/buy.png → img/home_buy.png


img/loan.png → img/home_loan.png


img/sell.png → img/home_sell.png


+ 65 - 0
module/footer.wxml

@@ -0,0 +1,65 @@
+<template name="footer">
+  <view class="page_footer_place"></view>
+  <view class="page_footer">
+    <view class="page_footer_item">
+      <navigator 
+        class='page_footer_navs'
+        url="{{local==0?'':'../../pages/index/index'}}"
+      >
+        <image
+          src="../../img/footer_home{{local==0?'_active':''}}.png"
+        />
+        <view
+          class='page_footer_w'
+        >
+          首页
+        </view>
+      </navigator>
+    </view>
+    <view class="page_footer_item">
+      <navigator 
+        class='page_footer_navs'
+        url="../../pages/buy/buy"
+      >
+        <image
+          src="../../img/footer_buy{{local==1?'_active':''}}.png"
+        />
+        <view
+          class='page_footer_w'
+        >
+          买车
+        </view>
+      </navigator>
+    </view>
+    <view class="page_footer_item">
+      <navigator 
+        class='page_footer_navs'
+        url="../../pages/sell/sell"
+      >
+        <image
+          src="../../img/footer_sell{{local==2?'_active':''}}.png"
+        />
+        <view
+          class='page_footer_w'
+        >
+          卖车
+        </view>
+      </navigator>
+    </view>
+    <view class="page_footer_item">
+      <navigator 
+        class='page_footer_navs'
+        url="../../pages/my/my"
+      >
+        <image
+          src="../../img/footer_home{{local==3?'_active':''}}.png"
+        />
+        <view
+          class='page_footer_w'
+        >
+          我的
+        </view>
+      </navigator>
+    </view>
+  </view>
+</template>

+ 16 - 0
module/header.wxml

@@ -0,0 +1,16 @@
+<!-- 公用 用于页面顶部文字  -->
+
+<template name="header">
+  <view class="page_head">
+    <navigator
+      wx:if="{{hasback}}"
+      class="page_head_back"
+      style="background-image:url(../../img/back.png)"
+      open-type='navigateBack'
+    >
+    </navigator>
+    <view class="page_head_w">
+      {{title}}
+    </view>
+  </view>
+</template>

+ 8 - 2
module/search/search.wxml

@@ -1,8 +1,14 @@
+<!-- 公用 用于页面顶部搜索框  -->
 
   <view class="search">
     <navigator 
-      style='background-image:url(../../img/search.png)'
       class="search_input" 
       url="../../pages/search/search"
-    >搜索</navigator>
+    >
+      <image
+        src='../../img/search.png'
+        class="search_input_icon" 
+      />
+      搜索
+    </navigator>
   </view>

+ 10 - 4
module/search/search.wxss

@@ -3,18 +3,24 @@
   display: block;
   height: 78rpx;
   background: #fede18;
+  overflow: hidden;
 }
 .search_input{
   height: 52rpx;
   width:674rpx;
-  margin: 0px auto;
+  margin: 13rpx auto 0rpx;
   background: white;
   border-radius: 10rpx;
   text-align: center;
   line-height: 52rpx;
   color: rgba(183, 183, 183, 1);
   font-size: 24rpx;
-  background-position: 270rpx 14rpx;
-  background-size:30rpx;
-  background-repeat:no-repeat;
+  position: relative;
+}
+.search_input_icon{
+  width:22rpx;
+  height:22rpx;
+  position: absolute;
+  top:15rpx;
+  left:285rpx;
 }

+ 4 - 2
pages/index/goodcar.wxml

@@ -1,7 +1,9 @@
 <template name="goodcar">
   <view class="goodcar">
-    <view class="goodcar_t" style="background-image:url(../../img/goodcar.png)">
-    </view>
+    <image 
+      class="goodcar_t" 
+      src="../../img/goodcar.png"
+     />
     <swiper 
       class='banner_g' 
       autoplay='true' 

+ 5 - 1
pages/index/index.js

@@ -41,8 +41,12 @@ Page({
       offset: 0,
       limit:3
     }, function (json) {
+      var list = json.data.list;
+      if(list.length==1){
+        list = list.concat(list,list);
+      }
       _self.setData({
-        goodcars: json.data.list
+        goodcars: list
       })
     })
   },

+ 14 - 4
pages/index/index.wxml

@@ -1,16 +1,22 @@
 <!--index.wxml-->
+<import src="../../module/header.wxml"/>
+<import src="../../module/footer.wxml"/>
 <import src="banner.wxml"/>
 <import src="goodcar.wxml"/>
 <import src="cardetail.wxml"/>
 <import src="likecardetail.wxml"/>
 <view class="conent">
+  <template 
+    is="header" 
+    data="{{title:'第一好车'}}"
+  />
   <include src="../../module/search/search.wxml"/>
   <template is="banner" data="{{banner:banner}}"/>
   <view class="nav_list">
     <view class="nav_item">
       <navigator class="nav_item_link" url="">
         <view class="nav_item_img">
-          <image src="../../img/buy.png"/>
+          <image src="../../img/home_buy.png"/>
         </view>
         <view class="nav_item_t">我要买车</view>
       </navigator>
@@ -18,7 +24,7 @@
     <view class="nav_item">
       <navigator class="nav_item_link" url="">
         <view class="nav_item_img">
-          <image src="../../img/sell.png"/>
+          <image src="../../img/home_sell.png"/>
         </view>
         <view class="nav_item_t">我要卖车</view>
       </navigator>
@@ -26,7 +32,7 @@
     <view class="nav_item">
       <navigator class="nav_item_link" url="">
         <view class="nav_item_img">
-          <image src="../../img/assess.png"/>
+          <image src="../../img/home_assess.png"/>
         </view>
         <view class="nav_item_t">我要估价</view>
       </navigator>
@@ -34,7 +40,7 @@
     <view class="nav_item">
       <navigator class="nav_item_link" url="">
         <view class="nav_item_img">
-          <image src="../../img/loan.png"/>
+          <image src="../../img/home_loan.png"/>
           </view>
         <view class="nav_item_t">我要贷款</view>
       </navigator>
@@ -138,4 +144,8 @@
   </view>
   <view class="show_more">加载更多></view>
   <image class="bottom_banner" src="../../img/banner.png"></image>
+  <template 
+    is="footer" 
+    data="{{local:0}}"
+  />
 </view>

+ 6 - 24
pages/index/index.wxss

@@ -1,23 +1,4 @@
-/***********search************/
-.search{
-  display: block;
-  height: 78rpx;
-  background: #fede18;
-}
-.search_input{
-  height: 52rpx;
-  width:674rpx;
-  margin: 0px auto;
-  background: white;
-  border-radius: 10rpx;
-  text-align: center;
-  line-height: 52rpx;
-  color: rgba(183, 183, 183, 1);
-  font-size: 24rpx;
-  background-position: 270rpx 14rpx;
-  background-size:30rpx;
-  background-repeat:no-repeat;
-}
+@import "../../module/search/search.wxss"
 /*******topbanner*********/
 
 .conent{
@@ -102,10 +83,9 @@
   background-color:white;
 }
 .goodcar_t{
-  width:98px;
-  background-repeat:no-repeat;
-  background-position: center;
-  background-size:55rpx 55rpx;
+  width:46rpx;
+  height: 44rpx;
+  margin:27rpx 48rpx 0rpx;
 }
 .banner_g{
   position: relative;
@@ -120,6 +100,7 @@
 /*******brand*********/
 .brand{
   margin-top:16rpx;
+  overflow: hidden;
 }
 .brand_r{
   display: flex;
@@ -308,4 +289,5 @@
 .bottom_banner{
   width: 100%;
   height:240rpx;
+  display: block;
 }

+ 11 - 1
pages/search/search.js

@@ -63,8 +63,18 @@ Page({
   onShareAppMessage: function () {
   
   },
-  linkToSearch:function(e){
+  inputSearch:function(e){
+    var word = e.detail.value;
+    if(word){
+      this.linkToSearch(word);
+    }
+  },
+  tapHot:function(e){
     var word = e.target.dataset.val;
+    this.linkToSearch(word);
+  },
+  linkToSearch:function(word){
     wx.navigateTo({url:`../searchresult/searchresult?value=${word}`});
   }
+
 })

+ 13 - 3
pages/search/search.wxml

@@ -1,14 +1,24 @@
 <!--pages/search/search.wxml-->
+<import src="../../module/header.wxml"/>
 <view class="content">
+  <template 
+    is="header" 
+    data="{{title:'第一好车',hasback:true}}"
+  />
   <view class="search">
     <view 
-      class="search_input_b"
-      style='background-image:url(../../img/search.png)'  
+      class="search_input_b"  
     >
+      <image
+        class="search_input_ic"
+        src="../../img/search.png"
+      />
       <input 
         class="search_input"  
         placeholder-class="search_input_holder"
         placeholder="搜索"
+        confirm-type="搜索"
+        bindblur="inputSearch"
       />
     </view>
     <navigator
@@ -22,7 +32,7 @@
     <view class="hot_search_t">
       热门搜索
     </view>
-    <view class="hot_search_w" bindtap="linkToSearch">
+    <view class="hot_search_w" bindtap="tapHot">
       <view  class="hot_search_i" data-val = "玛莎拉蒂">
         玛莎拉蒂
       </view>

+ 8 - 3
pages/search/search.wxss

@@ -16,9 +16,14 @@
   border-radius: 10rpx;
   line-height: 52rpx;
   font-size: 24rpx;
-  background-position: 20rpx 14rpx;
-  background-size:30rpx;
-  background-repeat:no-repeat;
+  position: relative;
+}
+.search_input_ic{
+  width:22rpx;
+  height:22rpx;
+  position: absolute;
+  top:15rpx;
+  left:30rpx;
 }
 .search_input{
   margin-left:70rpx;