搜索模块完善

f1543d2b · 汪睦雄 · bf7ad3e3 · f1543d2b · f1543d2b · f1543d2b
Commit f1543d2b authored Sep 27, 2018 by 汪睦雄
19 changed files
--- a/app.json
+++ b/app.json
@@ -13,7 +13,9 @@
    "pages/me/collection/index",
    "pages/guide/index",
    "pages/guide/detail/index",
-    "components/navs/index"
+    "components/navs/index",
+    "pages/search/search/search",
+    "pages/search/list/list"
  ],
  "window": {
    "backgroundTextStyle": "light",

--- a/components/project-item/index.js
+++ b/components/project-item/index.js
+// components/project-item/index.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    projectItem: {
+      type: Object
+    }
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+  }
+})
--- a/components/project-item/index.json
+++ b/components/project-item/index.json
+{
+  "component": true,
+  "usingComponents": {}
+}
\ No newline at end of file
--- a/components/project-item/index.wxml
+++ b/components/project-item/index.wxml
+<!--components/project-item/index.wxml-->
+<view class="project-item">
+  <image class="prj-poster" src="{{projectItem.poster==''?'/images/personal_center/info_background.png':projectItem.poster}}" mode="scaleToFill"></image>
+  <view class="prj-info">
+    <text class='ptitle'>{{projectItem.title}}</text>
+    <view class="ptags">
+      <text wx-if="{{projectItem.type=='1'}}">限{{projectItem.sign_limits}}组</text>
+      <text wx-if="{{projectItem.type=='2'}}">可预约</text>
+      <text class='tags'>{{projectItem.tags}}</text>
+    </view>
+    <view class="pactivity" wx-if="{{projectItem.type=='1'}}">
+      <view class="price-wrapper">
+        <text class="price">￥{{projectItem.price}}</text>
+        <text class="vip_price">￥{{projectItem.vip_price}}</text>
+        <image class="ic_vip_price" src='/images/icon_vip_price.png'></image>
+      </view>
+      <text class="endtime">{{projectItem.sign_endtime_str}}</text>
+    </view>
+    <view class="pshop" wx-if="{{projectItem.type=='2'}}">
+      <text class="address">{{projectItem.location}}</text>
+      <text class="shop">{{projectItem.sign_endtime_str}}</text>
+    </view>
+  </view>
+</view>
\ No newline at end of file
--- a/components/project-item/index.wxss
+++ b/components/project-item/index.wxss
+/* components/project-item/index.wxss */
+.project-item {
+  padding: 20rpx 30rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: 1px solid rgb(230, 230, 230);
+}
+.prj-poster {
+  width: 260rpx;
+  height: 190rpx;
+  border-radius: 2rpx;
+  margin-right: 30rpx;
+}
+.prj-info {
+  width: 430rpx;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.prj-info .ptitle {
+  padding-top: 10rpx;
+  font-size: 28rpx;
+  color: rgb(51, 51, 51);
+  margin-bottom: 23rpx;
+}
+.prj-info .ptags {
+  display: flex;
+  width: 100%;
+  font-size: 24rpx;
+  color: rgb(153, 153, 153);
+  margin-bottom: 70rpx;
+}
+.prj-info .ptags .tags {
+  width: 75%;
+  margin-left: 20rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.prj-info .pactivity {
+  width: 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.prj-info .pactivity .price {
+  font-size: 34rpx;
+  color: rgb(255, 68, 0);
+}
+.prj-info .pactivity .vip_price {
+  font-size: 24rpx;
+  color: rgb(60, 54, 29);
+}
+.prj-info .pactivity .ic_vip_price {
+  margin-left: 4rpx;
+  height: 10px;
+  width: 15px;
+}
+.prj-info .pactivity .endtime {
+  font-size: 24rpx;
+  color: rgb(43, 163, 215);
+  border: 1px solid rgb(43, 163, 215);
+  height: 42rpx;
+  line-height: 42rpx;
+  padding: 0 10rpx;
+  border-radius: 2px;
+  max-width: 70px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.prj-info .pshop {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+.prj-info .pshop .address {
+  font-size: 24rpx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: rgb(153, 153, 153);
+}
+.prj-info .pshop .shop {
+  color: white;
+  padding: 0rpx 12rpx;
+  font-size: 24rpx;
+  line-height: 36rpx;
+  height: 36rpx;
+  background: #2691cd;
+  border-radius: 18rpx;
+}
--- a/components/search-filter/index.wxss
+++ b/components/search-filter/index.wxss
@@ -128,12 +128,18 @@
 }
 .tag-btn-wrapper > button.cancel {
-  border: 1px solid #eee;
+  border: 1px solid #ddd;
  color: rgb(102, 102, 102);
  margin-right: 30rpx;
 }
+.tag-btn-wrapper > button.cancel::after{
+  display: none;
+}
 .tag-btn-wrapper > button.ensure {
  border: 1px solid rgb(43, 163, 215);
  color: rgb(43, 163, 215);
 }
+.tag-btn-wrapper > button.ensure::after{
+  display: none;
+}
\ No newline at end of file
--- a/pages/search/index.js
+++ b/pages/search/index.js
@@ -159,5 +159,14 @@ Page({
      filters: _filters
    })
    wx.startPullDownRefresh()
+  },
+  /**
+   * 去搜索页面
+   */
+  gotoSearch: function(){
+    wx.navigateTo({
+      url: '/pages/search/search/search',
+    })
  }
 })
\ No newline at end of file
--- a/pages/search/index.json
+++ b/pages/search/index.json
@@ -3,6 +3,7 @@
  "enablePullDownRefresh": true,
  "usingComponents": {
    "search-filter": "/components/search-filter/index",
+    "project-item": "/components/project-item/index",
    "more": "/components/more/index"
  }
 }
\ No newline at end of file
--- a/pages/search/index.wxml
+++ b/pages/search/index.wxml
@@ -3,35 +3,13 @@
  <view class="search-header">
    <view class='search-wrapper'>
      <image class="search-icon" src='/images/icon_search.png'></image>
-      <view class='search-input'>关键词如地名、游泳等</view>
+      <view class='search-input'  bindtap='gotoSearch'>关键词如地名、游泳等</view>
    </view>
    <search-filter bind:filter="filterChange" />
  </view>
  <view class="projects-wrapper">
-    <view class="project-item" wx:for="{{projects}}" wx:for-index="idx" wx:for-item="item" wx:key="n.id">
+    <project-item wx:for="{{projects}}" wx:for-index="idx" wx:for-item="item" wx:key="n.id" project-item="{{item}}" />
-      <image class="prj-poster" src="{{item.poster==''?'/images/personal_center/info_background.png':item.poster}}" mode="scaleToFill"></image>
-      <view class="prj-info">
-        <text class='ptitle'>{{item.title}}</text>
-        <view class="ptags">
-          <text wx-if="{{item.type=='1'}}">限{{item.sign_limits}}组</text>
-          <text wx-if="{{item.type=='2'}}">可预约</text>
-          <text class='tags'>{{item.tags}}</text>
-        </view>
-        <view class="pactivity" wx-if="{{item.type=='1'}}">
-          <view class="price-wrapper">
-            <text class="price">￥{{item.price}}</text>
-            <text class="vip_price">￥{{item.vip_price}}</text>
-            <image class="ic_vip_price" src='/images/icon_vip_price.png'></image>
-          </view>
-          <text class="endtime">{{item.sign_endtime_str}}</text>
-        </view>
-        <view class="pshop" wx-if="{{item.type=='2'}}">
-          <text class="address">{{item.location}}</text>
-          <text class="shop">{{item.sign_endtime_str}}</text>
-        </view>
-      </view>
-    </view>
  </view>
  <more hasMore="{{hasMore}}" loading="{{loading}}" page="{{currentPage}}" />

--- a/pages/search/index.wxss
+++ b/pages/search/index.wxss
@@ -24,109 +24,10 @@
 .search-input{
  font-size: 26rpx;
  color: rgb(153, 153, 153);
-  padding-left: 10rpx;
+  padding-left: 20rpx;
-}
+  width: 90%;
-.search-input:-moz-placeholder, .search-input:-ms-input-placeholder, .search-input::-webkit-input-placeholder{
-  color: rgb(153, 153, 153);
 }
 .projects-wrapper{
  margin-top: 20rpx;
  background: white;
 }
-.project-item{
-  padding: 20rpx 30rpx;
-  box-sizing: border-box;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  border-bottom: 1px solid rgb(230, 230, 230);
-}
-.prj-poster{
-  width: 260rpx;
-  height: 190rpx;
-  border-radius: 2rpx;
-  margin-right: 30rpx;
-}
-.prj-info{
-  width: 430rpx;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-}
-.prj-info .ptitle{
-  padding-top: 10rpx;
-  font-size: 28rpx;
-  color: rgb(51, 51, 51);
-  margin-bottom: 23rpx;
-}
-.prj-info .ptags{
-  display: flex;
-  width: 100%;
-  font-size: 24rpx;
-  color: rgb(153, 153, 153);
-  margin-bottom: 70rpx;
-}
-.prj-info .ptags .tags{
-  width: 75%;
-  margin-left: 20rpx;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.prj-info .pactivity{
-  width: 100%;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  align-items: center;
-}
-.prj-info .pactivity .price{
-  font-size: 34rpx;
-  color: rgb(255, 68, 0);
-}
-.prj-info .pactivity .vip_price{
-  font-size: 24rpx;
-  color: rgb(60, 54, 29);
-}
-.prj-info .pactivity .ic_vip_price{
-  margin-left: 4rpx;
-  height: 10px;
-  width: 15px;
-}
-.prj-info .pactivity .endtime{
-  font-size: 24rpx;
-  color: rgb(43, 163, 215);
-  border: 1px solid rgb(43, 163, 215);
-  height: 42rpx;
-  line-height: 42rpx;
-  padding: 0 10rpx;
-  border-radius: 2px;
-  max-width: 70px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.prj-info .pshop{
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-}
-.prj-info .pshop .address{
-  font-size: 24rpx;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: rgb(153, 153, 153);
-}
-.prj-info .pshop .shop{
-  color: white;
-  padding: 0rpx 12rpx;
-  font-size: 24rpx;
-  line-height: 36rpx;
-  height: 36rpx;
-  background: #2691CD;
-  border-radius: 18rpx;
-}
\ No newline at end of file
--- a/pages/search/list/list.js
+++ b/pages/search/list/list.js
+// pages/search/list/list.js
+import api from '../../../utils/Api.js'
+import Wx from '../../../utils/Wx.js'
+import Schedule from '../../../utils/Schedule.js'
+const {
+  $Toast
+} = require('../../../iview/base/index');
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    projects: [],
+    currentPage: 1,
+    loading: true,
+    hasMore: true,
+    title: '',
+    tags: []
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    let _title = options.title
+    let _tags = options.tags
+    if (_tags!=null && _tags.length>0){
+      this.setData({
+        tags: JSON.parse(_tags)
+      })
+    }
+    if (_title != null && _title.length > 0) {
+      this.setData({
+        title: _title
+      })
+    }
+    this.getListData()
+  },
+  /**
+   * 加载
+   */
+  getListData: function (callback) {
+    const p = this.data.currentPage
+    let params = {
+      p: p
+    }
+    if (this.data.tags.length > 0) {
+      params['tags'] = JSON.stringify(this.data.tags)
+    }
+    if (this.data.title.length > 0) {
+      params['title'] = this.data.title
+    }
+    // 请求数据接口
+    api.search.index(params).then(res => {
+      if (res.code) {
+        this.setData({
+          hasMore: false,
+          loading: false
+        })
+        $Toast({
+          content: res.msg,
+          type: 'error'
+        })
+      } else {
+        let _projects = this.data.projects
+        this.setData({
+          projects: _projects.concat(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()
+      }
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+  },
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+  },
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+  },
+  /**
+  * 页面相关事件处理函数--监听用户下拉动作
+  */
+  onPullDownRefresh: function () {
+    this.setData({
+      projects: [],
+      loading: true,
+      hasMore: true,
+      currentPage: 1
+    })
+    wx.showNavigationBarLoading()
+    wx.showLoading({
+      title: '加载中...',
+    })
+    new Schedule().task(this.getListData).delay(1600).task(() => {
+      wx.hideNavigationBarLoading()
+      wx.stopPullDownRefresh()
+      wx.hideLoading()
+    })
+  },
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    let that = this
+    if (that.data.loading || !that.data.hasMore) {
+      return;
+    } else {
+      let page = that.data.currentPage + 1
+      new Schedule().task(() => {
+        that.setData({
+          loading: true,
+          currentPage: page
+        })
+      }).delay(1000).task(that.getListData)
+    }
+  },
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+  }
+})
\ No newline at end of file
--- a/pages/search/list/list.json
+++ b/pages/search/list/list.json
+{
+  "navigationBarTitleText": "搜索结果",
+  "enablePullDownRefresh": true,
+  "usingComponents": {
+    "project-item": "/components/project-item/index",
+    "more": "/components/more/index",
+    "i-toast": "/iview/toast/index"
+  }
+}
\ No newline at end of file
--- a/pages/search/list/list.wxml
+++ b/pages/search/list/list.wxml
+<!--pages/search/list/list.wxml-->
+<view class="page-wrapper">
+  <view class="projects-wrapper">
+    <project-item wx:for="{{projects}}" wx:for-index="idx" wx:for-item="item" wx:key="n.id" project-item="{{item}}" />
+  </view>
+  <more hasMore="{{hasMore}}" loading="{{loading}}" page="{{currentPage}}" />
+  <i-toast id="toast" />
+</view>
\ No newline at end of file
--- a/pages/search/list/list.wxss
+++ b/pages/search/list/list.wxss
+/* pages/search/list/list.wxss */
+.page-wrapper{
+  background: white;
+}
\ No newline at end of file
--- a/pages/search/search/search.js
+++ b/pages/search/search/search.js
+// pages/search/search/search.js
+import api from '../../../utils/Api.js'
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    tags: [],
+    seltags: [],
+    title: ''
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function(options) {
+    api.search.filter().then(res => {
+      this.setData({
+        tags: res.data.tags
+      })
+    })
+  },
+  // 输入框
+  inputChnage: function(event){
+    let _title = event.detail.value
+    this.setData({
+      title: _title
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function() {
+  },
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function() {
+  },
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function() {
+  },
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function() {
+  },
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function() {
+  },
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function() {
+  },
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function() {
+  },
+  submitSearch: function(event) {
+    let tags = JSON.stringify(this.data.seltags)
+    wx.navigateTo({
+      url: '/pages/search/list/list?title=' + this.data.title + "&tags=" + tags,
+    })
+  },
+  /**
+   * 选择标签
+   */
+  selectTags: function(event) {
+    let tagIdx = event.target.dataset.idx
+    let selectedTags = this.data.seltags
+    if (selectedTags.indexOf(tagIdx) == -1) {
+      // 加入
+      selectedTags.push(tagIdx)
+    } else {
+      // 根据索引移除长度为1的数组元素
+      selectedTags.splice(selectedTags.indexOf(tagIdx), 1)
+    }
+    this.setData({
+      seltags: selectedTags
+    })
+  }
+})
\ No newline at end of file
--- a/pages/search/search/search.json
+++ b/pages/search/search/search.json
+{
+  "navigationBarTitleText": "搜索",
+  "usingComponents": {
+    "i-button": "/iview/button/index"
+  }
+}
\ No newline at end of file
--- a/pages/search/search/search.wxml
+++ b/pages/search/search/search.wxml
+<!--pages/search/search/search.wxml-->
+<wxs src="../../../pages/common.wxs" module="common"></wxs>
+<view class="page-wrapper">
+  <view class="search-header">
+    <view class='search-wrapper'>
+      <image class="search-icon" src='/images/icon_search.png'></image>
+      <input class='search-input' placeholder='关键词如地名、游泳等' bindinput="inputChnage"></input>
+    </view>
+  </view>
+  <view class="tags-wrapper">
+    <text class="title">选择标签</text>
+    <view class="tags-list">
+      <block wx:for="{{tags}}" wx:for-index="idx" wx:for-item="n" wx:key="n.id">
+        <view class="tag-item {{common.inArray(seltags, n.id)==true?'active':''}}" bindtap="selectTags" data-idx="{{n.id}}">
+          {{n.name}}
+        </view>
+      </block>
+    </view>
+  </view>
+  <view class='submitBtn'>
+    <i-button type="primary" bind:click="submitSearch" shape="circle">搜索</i-button>
+  </view>
+</view>
\ No newline at end of file
--- a/pages/search/search/search.wxss
+++ b/pages/search/search/search.wxss
+/* pages/search/search/search.wxss */
+.page-wrapper {
+}
+.search-header {
+  background: white;
+  padding-top: 14px;
+  height: 60px;
+}
+.search-wrapper {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 0px 30rpx;
+  background: rgb(247, 247, 247);
+  box-sizing: border-box;
+  border: 4rpx;
+  height: 40px;
+  padding-left: 20rpx;
+}
+.search-icon {
+  width: 31rpx;
+  height: 31rpx;
+}
+.search-input {
+  font-size: 26rpx;
+  color: black;
+  padding-left: 20rpx;
+  width: 90%;
+}
+.search-input:-moz-placeholder, .search-input:-ms-input-placeholder,
+.search-input::-webkit-input-placeholder {
+  color: rgb(153, 153, 153);
+}
+.tags-wrapper{
+  background: white;
+  padding: 0 30rpx;
+}
+.tags-wrapper .title{
+  font-weight: bold;
+  font-size: 32rpx;
+}
+.tags-list {
+  margin-top: 24rpx;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 36rpx;
+}
+.tag-item {
+  min-width: 120rpx;
+  padding: 0 10rpx 0 10rpx;
+  height: 75rpx;
+  border: 1px solid #f4f4f4;
+  color: rgb(102, 102, 102);
+  font-size: 26rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10rpx;
+  border-radius: 2rpx;
+}
+.tag-item.active {
+  color: rgb(43, 163, 215);
+  border: 1px solid rgb(43, 163, 215);
+}
+.submitBtn{
+  width:80%;
+  margin: 40rpx auto;
+}
\ No newline at end of file
--- a/project.config.json
+++ b/project.config.json
@@ -37,7 +37,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 7,
+			"current": 3,
 			"list": [
 				{
 					"id": 0,
@@ -58,9 +58,9 @@
 					"query": ""
 				},
 				{
-					"id": -1,
+					"id": 3,
 					"name": "搜索",
-					"pathName": "pages/search/index",
+					"pathName": "pages/search/search/search",
 					"query": ""
 				},
 				{