美行攻略改为转让专区后在加上取消功能

components/navs/index.wxml

@@ -37,7 +37,7 @@
       <i-grid-icon i-class="nav-icon">
         <image src="/images/navs/icon_nav_6.png" />
       </i-grid-icon>
-      <i-grid-label i-class="nav-label">美行攻略</i-grid-label>
+      <i-grid-label i-class="nav-label">转让专区</i-grid-label>
     </i-grid-item>
     <i-grid-item i-class="nav-grid-item" catchtap='catalogClick' data-catalog='8' data-name='儿童教育'>
       <i-grid-icon i-class="nav-icon">

pages/guide/index.js

@@ -11,6 +11,7 @@ Page({
   data: {
     guides: [],
     iptValue: '',
+    recover: 'none',
     currentPage: 1,
     loading: true,
     hasMore: true,
@@ -128,9 +129,12 @@ Page({
     })
   },
   /* 美行攻略 的 搜索请求*/
-  searchFun: function (e) {
+  searchFun: function (e,callback) {
+    // 显示“取消”按钮
+    this.setData({ recover: "block"})
+    // 开始请求
     const p = this.data.currentPage
-    var title = e.detail.value
+    let title = e.detail.value
     api.guide.list({
       title, p
     }).then(res => {
@@ -149,5 +153,30 @@ Page({
         typeof callback == "function" && callback()
       }
     })
+  },
+  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 {
+        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)
+        })
+        typeof callback == "function" && callback()
+      }
+    })
   }
 })
\ No newline at end of file

pages/guide/index.wxml

 <!--pages/guide/index.wxml-->
-<view class='v-page'>
-  <!-- 搜索 -->
-  <form class="search_out">
-    <icon class='icon-search' type='search' size='14'></icon>
-    <input 
-      class="iptSearch" 
-      placeholder="关键词如地名、游泳等" 
-      value='{{iptValue}}' 
-      confirm-type="搜索"
-      type='text'
-      bindconfirm="searchFun"
-      bindinput='getIptValue'
-      />
-    <icon class='icon-clear' type='clear' size='14' bindtap='clearContent'></icon>
+<!-- 搜索 -->
+  <form>
+    <view class="search_out">
+      <view class='input_box'>
+        <icon class='icon-search' type='search' size='14'></icon>
+        <input 
+          class="iptSearch" 
+          placeholder="关键词如地名、游泳等" 
+          value='{{iptValue}}' 
+          confirm-type="搜索"
+          type='text'
+          bindconfirm="searchFun"
+          bindinput='getIptValue'
+          />
+        <icon class='icon-clear' type='clear' size='14' bindtap='clearContent'></icon>
+      </view>
+      <button class='recoverBnt' style="display: {{recover}};" bindtap='recoverListData'>取消</button>
+    </view>
   </form>
 
+
+<view class='v-page'>
   <view class='guides-container'>
     <view class="guide-wrapper" wx:for="{{guides}}" wx:for-item="n" wx:key="n.id" catchtap='handleGuideDetail' data-content="{{n.type=='1'?n.id:n.content}}" data-type="{{n.type}}">
       <image class='image' src="{{n.poster}}" mode='aspectFill'></image>

pages/guide/index.wxss

 /* pages/guide/index.wxss */
 
 /* 搜索*/
-.search_out{
+form{
   width: 100%;
   height: 50px;
   display: block;
+}
+.search_out{
+  width: 100%;
+  height: 50px;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
   padding: 20rpx;
   box-sizing: border-box;
-  position: relative;
   background: rgb(207, 207, 207);
 }
-.search_out .icon-search{
+.search_out .input_box{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+}
+.search_out .input_box .iptSearch{
+  width: 100%;
+  height: 30px;
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding-left: 35px;
+  padding-right: 35px;
+  background: rgb(255, 255, 255);
+  border-radius: 3px;
+  font-size: 12px;
+}
+.search_out .input_box .icon-search{
   position: absolute;
-  left: 20px;
+  left: 25rpx;
   top: calc(50% - 9px);
 }
-.search_out .icon-clear{
+.search_out .input_box .icon-clear{
   position: absolute;
-  right: 20px;
+  right: 25rpx;
   top: calc(50% - 9px);
   opacity: 0.85;
 }
-.search_out .iptSearch{
-  width: 100%;
+.search_out .recoverBnt{
+  width: 50px;
   height: 30px;
+  display: none;
+  flex-grow: 0;
+
   box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  margin: 0 auto;
-  padding-left: 32px;
-  padding-right: 32px;
-  background: rgb(255, 255, 255);
-  border-radius: 3px;
+  padding: 0;
+  margin-left: 20rpx;
   font-size: 12px;
+  line-height: 30px;
 }
 /* 搜索结束*/
 

project.config.json

@@ -38,11 +38,11 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 14,
+			"current": 0,
 			"list": [
 				{
 					"id": 0,
-					"name": "美行攻略",
+					"name": "转让专区",
 					"pathName": "pages/guide/index",
 					"query": ""
 				},

utils/Config.js

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