UI整体修改

components/catalog-filter/index.wxml

 <!--components/search-filter/index.wxml-->
 <wxs src="../../pages/common.wxs" module="common"></wxs>
 <view class='filter-wrapper' catchtouchmove="true">
+
+  
+
   <i-row i-class='row-filter'>
     <!-- 地区筛选 -->
-    <i-col span="11" i-class="col-class">
+    <i-col span="12" i-class="col-class">
       <view class="filter-item">
         <text class="{{filter_idx==1?'active':''}}" catchtap='filterTap' data-idx="1">{{selected_titles.region}}</text>
         <image class="search-icon" src="/images/icon-down-select{{filter_idx==1?'ed':''}}.png"></image>
       </view>
     </i-col>
     
-    <i-col span="2" i-class="col-class">
-      <view class="vdivider">
-      </view>
-    </i-col>
-
     <!-- 排序筛选 -->
-    <i-col span="11" i-class="col-class">
-      <view class="filter-item">
+    <i-col span="12" i-class="col-class">
+      <view class="filter-item" style='position:relative;'>
+        <view class='vdivider'></view>
         <text class="{{filter_idx==2?'active':''}}" catchtap='filterTap' data-idx="2">{{selected_titles.order}}</text>
         <image class="search-icon" src="/images/icon-down-select{{filter_idx==2?'ed':''}}.png"></image>
       </view>
     </i-col>
   </i-row>
+
   <view catchtap='closeFilter' class='filter-content-wrapper' wx:if="{{filter_idx>0}}" catchtouchmove='true'>
     <view class="row-content" catchtap='preventEvent'>
       <scroll-view class="scroll-view" scroll-y="true" style="width: 100%;height: 100%;">

components/catalog-filter/index.wxss

@@ -192,8 +192,9 @@
 }
 
 .vdivider{
-  margin-top: 30rpx;
   height: 60rpx;
+  background: #ccc;
   width: 1px;
-  background:#ccc;
+  position: absolute;
+  left: 0px;
 }
\ No newline at end of file

pages/guide/index.js

@@ -2,6 +2,9 @@
 import api from '../../utils/Api.js'
 import Config from '../../utils/Config.js'
 import Schedule from '../../utils/Schedule.js'
+const {
+  $Toast
+} = require('../../iview/base/index');
 
 Page({
 
@@ -10,12 +13,13 @@ Page({
    */
   data: {
     guides: [],
-    iptValue: '',
+    i_clear_show: 'none',
     recover: 'none',
     currentPage: 1,
     loading: true,
     hasMore: true,
-    i: 0
+    i: 0,
+    keyword: ''
   },
 
   /**
@@ -54,7 +58,7 @@ Page({
     wx.showLoading({
       title: '加载中...',
     })
-    new Schedule().task(this.getListData).delay(1600).task(() => {
+    new Schedule().task(this.getListData).delay(800).task(() => {
       wx.hideNavigationBarLoading()
       wx.stopPullDownRefresh()
       wx.hideLoading()
@@ -75,7 +79,7 @@ Page({
           loading: true,
           currentPage: page
         })
-      }).delay(1000).task(that.getListData)
+      }).delay(800).task(that.getListData)
     }
   },
 
@@ -100,12 +104,14 @@ Page({
       url: '/pages/webview/index?url=' + url + '&t=攻略详情',
     })
   },
-
+  // 请求接口
   getListData: function(callback) {
     const p = this.data.currentPage
-    api.guide.list({
-      p
-    }).then(res => {
+    let params = {
+      p: p,
+      title: this.data.keyword
+    }
+    api.guide.list(params).then(res => {
       if (res.code) {
         this.setData({
           hasMore: false,
@@ -122,61 +128,57 @@ Page({
       }
     })
   },
+
   /* 美行攻略 的 重置input框的文本*/
   clearContent: function () {
     this.setData({
-      iptValue: ''
+      keyword: ''
     })
+    // 开始请求接口
+    // wx.startPullDownRefresh()
   },
+
   /* 美行攻略 的 搜索请求*/
-  searchFun: function (e,callback) {
+  searchFun: function (e, callback) {
     // 显示“取消”按钮
     this.setData({ recover: "block"})
     // 开始请求
     const p = this.data.currentPage
     let title = e.detail.value
-    api.guide.list({
-      title, p
-    }).then(res => {
-      if (res.code) {
-        this.setData({
-          hasMore: false,
-          loading: false
+    if (title.trim() == '' || title.trim().length <= 0){
+      $Toast({
+        content: '关键词不能为空',
+        type: 'error'
       })
-      } else {
+      return
+    }
     this.setData({
-          guides: this.data.guides = res.data,
-          loading: false,
-          hasMore: res.data && res.data.length > 0 ? true : false,
-          currentPage: res.data && res.data.length > 0 ? p : (p - 1)
+      keyword: title
     })
-        typeof callback == "function" && callback()
+    // 开始请求接口
+    wx.startPullDownRefresh()
+  },
+
+  // 当搜索框内有内容时，显示输入框的 XX 按钮
+  iconShow: function(e){
+    if(e.detail.value == ""){
+      this.setData({ i_clear_show: "none"})
+    }else{
+      this.setData({ i_clear_show: "block"})
     }
-    })
   },
-  recoverListData: function (callback){
-    this.setData({ recover: "none" })
-    // 同时删除搜索框的内容
-    this.clearContent()
-    // 开始重新渲染数据
-    const p = this.data.currentPage
-    api.guide.list({
-      p
-    }).then(res => {
-      if (res.code) {
-        this.setData({
-          hasMore: false,
-          loading: false
-        })
-      } else {
+
+  recoverListData: function(){
+    // 点击取消按钮
     this.setData({
-          guides: this.data.guides = res.data,
+      guides: [],
+      keyword: '',
+      recover: "none",
       loading: false,
-          hasMore: res.data && res.data.length > 0 ? true : false,
-          currentPage: res.data && res.data.length > 0 ? p : (p - 1)
-        })
-        typeof callback == "function" && callback()
-      }
+      hasMore: true,
+      currentPage: 1
     })
+    // 开始请求接口
+    this.getListData()
   }
 })
\ No newline at end of file

pages/guide/index.json

@@ -3,6 +3,7 @@
   "enablePullDownRefresh": true,
   "usingComponents": {
     "i-cell": "/iview/cell/index",
+    "i-toast": "/iview/toast/index",
     "more": "/components/more/index"
   }
 }
\ No newline at end of file

pages/guide/index.wxml

@@ -3,19 +3,20 @@
   <form>
     <view class="search_out">
       <view class='input_box'>
-        <icon class='icon-search' type='search' size='14'></icon>
+        <icon class='icon-search' type='search' size='14' color="rgb(66, 66, 66)"></icon>
         <input 
           class="iptSearch" 
           placeholder="关键词如地名、游泳等" 
-          value='{{iptValue}}' 
+          value='{{keyword}}' 
           confirm-type="搜索"
           type='text'
           bindconfirm="searchFun"
           bindinput='getIptValue'
+          bindinput='iconShow'
           />
-        <icon class='icon-clear' type='clear' size='14' bindtap='clearContent'></icon>
+        <icon class='icon-clear' type='clear' style="display: {{i_clear_show}}" size='14' bindtap='clearContent'></icon>
       </view>
-      <button class='recoverBnt' style="display: {{recover}};" bindtap='recoverListData'>取消</button>
+      <text class='recoverBnt' style="display: {{recover}};" bindtap='recoverListData'>取消</text>
     </view>
   </form>
 
@@ -33,4 +34,5 @@
     </view>
   </view>
   <more hasMore="{{hasMore}}" loading="{{loading}}" page="{{currentPage}}" />
+  <i-toast id="toast" />  
 </view>
\ No newline at end of file

pages/guide/index.wxss

@@ -5,6 +5,7 @@ form{
   width: 100%;
   height: 50px;
   display: block;
+  margin-bottom: 2px;
 }
 .search_out{
   width: 100%;
@@ -16,7 +17,7 @@ form{
 
   padding: 20rpx;
   box-sizing: border-box;
-  background: rgb(207, 207, 207);
+  background: rgb(255, 255, 255);
 }
 .search_out .input_box{
   width: 100%;
@@ -33,30 +34,35 @@ form{
   margin: 0;
   padding-left: 35px;
   padding-right: 35px;
-  background: rgb(255, 255, 255);
-  border-radius: 3px;
+  background: rgb(240, 240, 240);
+  border-radius: 20px;
   font-size: 12px;
 }
 .search_out .input_box .icon-search{
   position: absolute;
   left: 25rpx;
-  top: calc(50% - 9px);
+  top: calc(50% - 7px);
 }
 .search_out .input_box .icon-clear{
   position: absolute;
   right: 25rpx;
-  top: calc(50% - 9px);
+  top: calc(50% - 7px);
   opacity: 0.85;
 }
 .search_out .recoverBnt{
-  width: 50px;
+  width: 30px;
   height: 30px;
   display: none;
   flex-grow: 0;
 
   box-sizing: border-box;
+  outline: none;
+  border: none;
+  background: none;
   padding: 0;
   margin-left: 20rpx;
+  color: rgb(6, 173, 165);
+  letter-spacing: 1px;
   font-size: 12px;
   line-height: 30px;
 }

utils/Config.js

@@ -5,7 +5,7 @@
 // }
 
 export const Config = {
-  apiPath: "https://meixzz.utools.club/api/",
+  apiPath: "http://local.picp.io/api/",
   mobPath: "https://mavaler.jqhulian.com/mob/",
   shopJoinPath: "https://mavaler.jqhulian.com/mob/Index/shopjoin"
 }