Browse Source

供需我的需求搜索

zhaoxiaohai 3 years ago
parent
commit
bbed2d1fdf

+ 2 - 0
README.md

@@ -46,6 +46,8 @@
 
 ​	My_selectTime -- 选择时间
 
+​	My_pageReachBottom -- 上拉触底加载动画
+
 # 缓存
 
 ​	userData -- 用户基本数据 -- 保存数据:index-用户列表下标,token,fisadministrator--是否主账号,tagentsid,tenterpriseid,userid

+ 2 - 1
app.json

@@ -50,7 +50,8 @@
         "van-tabs": "@vant/weapp/tabs/index",
         "van-action-sheet": "@vant/weapp/action-sheet/index",
         "My_Checkbox": "/components/My_Checkbox/index",
-        "My_navBar": "/components/My_navBar/index"
+        "My_navBar": "/components/My_navBar/index",
+        "My_pageReachBottom": "/components/My_pageReachBottom/index"
     },
     "window": {
         "backgroundTextStyle": "light",

+ 26 - 0
components/My_pageReachBottom/index.js

@@ -0,0 +1,26 @@
+// components/My_pageReachBottom/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        loadMore: {
+            type: Boolean,
+            value: false
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

+ 7 - 0
components/My_pageReachBottom/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-divider": "@vant/weapp/divider/index",
+        "van-loading": "@vant/weapp/loading/index"
+    }
+}

+ 4 - 0
components/My_pageReachBottom/index.wxml

@@ -0,0 +1,4 @@
+<view wx:if="{{!loadMore}}" style="display: flex; justify-content: center; align-items: center;">
+    <van-loading size="18px" color="#4BBECF"> 玩命加载中...</van-loading>
+</view>
+<van-divider wx:else contentPosition="center">我也是有底线的</van-divider>

+ 1 - 0
components/My_pageReachBottom/index.wxss

@@ -0,0 +1 @@
+/* components/My_pageReachBottom/index.wxss */

+ 108 - 2
pages/tabbar-pages/supplyAndDemand/index.js

@@ -1,9 +1,16 @@
+import {
+    ApiModel
+} from "../../../utils/api";
+const _Http = new ApiModel();
 Page({
-
     /**
      * 页面的初始数据
      */
     data: {
+        searchFocus: false, //我的需求搜索框焦点
+        searchText: "", //我的需求搜索内容
+        pageNumber: 1, //获取第几页
+        pageTotal: 2, //全部分页数量
         active: 0, //tabs 选中下标
         swiperBannerList: [{
             id: "001",
@@ -56,6 +63,7 @@ Page({
     onLoad: function (options) {
 
     },
+    /* 宫格区点击事件 */
     gridJumpPage(even) {
         const {
             name
@@ -74,6 +82,104 @@ Page({
      */
     onShow: function () {
         this.getTabBar().init();
+        //获取所有信息
+        this.getSupplyAndDemand();
+    },
+    /* 获取供需列表 */
+    getSupplyAndDemand() {
+        let ftype = "",
+            condition = ""
+        _Http.basic({
+            "accesstoken": wx.getStorageSync('userData').token,
+            "classname": "customer.supplyanddemand.supplyanddemand",
+            "method": "query_supplyanddemandList",
+            "content": {
+                "getdatafromdbanyway": true,
+                "pageNumber": 1,
+                "pageSize": 20,
+                "where": {
+                    "condition": condition, //模糊搜索
+                    "ftype": ftype, //数据类型
+                    "fissupply": "" // 0需 1供
+                }
+            }
+        }).then(res => {
+            console.log(res)
+        })
+    },
+    /* tabs切换 */
+    tabsChange(even) {
+        const {
+            title
+        } = even.detail;
+        this.setData({
+            active: even.detail.index
+        })
+        /* 初始化分页 */
+        this.InitializeDataPaging();
+        if (title == '我的需求') return this.myNeed();
+    },
+    /* 我的需求 */
+    myNeed() {
+        //全部加载完成退出请求
+        if (this.data.pageTotal < this.data.pageNumber) return;
+        _Http.basic({
+            "accesstoken": wx.getStorageSync('userData').token,
+            "classname": "customer.supplyanddemand.supplyanddemand",
+            "method": "query_mysupplyanddemandList",
+            "content": {
+                "getdatafromdbanyway": true,
+                "pageNumber": this.data.pageNumber,
+                "pageSize": 20,
+                "where": {
+                    "condition": this.data.searchText,
+                    "ftype": "",
+                    "fissupply": "0"
+                }
+            }
+        }).then(res => {
+            console.log(res);
+            this.PageDemanding(res.pageTotal)
+        })
+    },
+    /* 我的需求搜索框获得焦点 */
+    needSearchFocus() {
+        this.setData({
+            searchFocus: true
+        })
+    },
+    /* 我的需求搜索框失去焦点 */
+    needSearchBlur(e) {
+        const {
+            value
+        } = e.detail;
+        //数据比较,防止重复查询
+        if (value == this.data.searchText) return this.setData({
+            searchFocus: false,
+        });
+        let searchText = "";
+        if (value != "") searchText = value;
+        this.setData({
+            searchFocus: false,
+            searchText
+        })
+        this.InitializeDataPaging();
+        this.myNeed();
+    },
+    /* 初始化分页数据 */
+    InitializeDataPaging() {
+        this.setData({
+            pageTotal: 2,
+            pageNumber: 1
+        })
+    },
+    /* 分页 */
+    PageDemanding(pageTotal) {
+        let pageNumber = this.data.pageNumber + 1;
+        this.setData({
+            pageTotal,
+            pageNumber
+        })
     },
 
     /**
@@ -101,7 +207,7 @@ Page({
      * 页面上拉触底事件的处理函数
      */
     onReachBottom: function () {
-
+        if (this.data.active == 2) this.myNeed(); //我的需求
     },
 
     /**

+ 12 - 1
pages/tabbar-pages/supplyAndDemand/index.wxml

@@ -10,7 +10,7 @@
 </view>
 <!-- tabs切换栏 -->
 <view class="tabs_box">
-    <van-tabs active="{{ active }}" custom-class="tabs-custom-class" tab-active-class="tabs-active-class" ellipsis="{{false}}" line-width="30px" color="#4DC2D4" title-active-color="#4DC2D4" swipeable>
+    <van-tabs active="{{ active }}" bind:change="tabsChange" custom-class="tabs-custom-class" tab-active-class="tabs-active-class" ellipsis="{{false}}" line-width="30px" color="#4DC2D4" title-active-color="#4DC2D4" swipeable>
         <view style="height: 10rpx;"></view>
         <van-tab title="所有信息">
             <!-- 宫格 -->
@@ -50,6 +50,14 @@
             </My_SupplyAndDemandItemBox>
         </van-tab>
         <van-tab title="我的需求">
+            <!-- 搜索 -->
+            <view class="my-need-search">
+                <input class="my-need-search-input {{searchFocus?'my-need-search-inputfocus':''}}" placeholder="搜索关键字" type="text" bindfocus="needSearchFocus" bindblur="needSearchBlur" />
+                <view class="my-need-search-but">
+                    <van-icon name="search" />
+                </view>
+            </view>
+            <!-- 列表 -->
             <My_SupplyAndDemandItemBox wx:for="{{5}}" title="【窗帘布】各位老板看下有以下面料的联系" time="2021-11-10 14:23:43">
                 <!-- 下架按钮插槽 -->
                 <view slot="soldOutBut">
@@ -73,4 +81,7 @@
 </view>
 <!-- 右侧吸附按钮 -->
 <My_adsorbRight></My_adsorbRight>
+<!-- 触底展示 -->
+<My_pageReachBottom loadMore="{{pageTotal<pageNumber}}"></My_pageReachBottom>
+<!-- 安全距离 -->
 <view style="height: 34px;"></view>

+ 39 - 1
pages/tabbar-pages/supplyAndDemand/index.wxss

@@ -19,7 +19,46 @@
     border-radius: 15rpx;
 }
 
+/* 我的需求搜索框 */
+.my-need-search {
+    display: flex;
+    width: 702rpx;
+    height: 60rpx;
+    border-radius: 6rpx;
+    margin: 10rpx auto 20rpx;
+}
+
+.my-need-search-input {
+    flex: 1;
+    height: 100%;
+    line-height: 100%;
+    text-align: center;
+    background-color: #FFFFFF;
+    color: rgba(0, 0, 0, 0.4);
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-right: 0;
+    border-radius: 6rpx 0px 0px 6rpx;
+    padding-left: 20rpx;
+    margin-left: 10rpx;
+    box-sizing: border-box;
+}
+
+.my-need-search-inputfocus {
+    border: 2px solid #4DC2D4;
+    color: rgba(0, 0, 0, 0.7);
+}
 
+.my-need-search-but {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 128rpx;
+    height: 100%;
+    font-size: 34rpx;
+    color: #FFFFFF;
+    background: #4DC2D4;
+    border-radius: 0px 6rpx 6rpx 0px;
+}
 
 /* 宫格区域盒子 */
 .grid_box {
@@ -94,5 +133,4 @@
 /* 正在对接按钮 */
 .butt-joint {
     background: linear-gradient(180deg, #D3D3D3 0%, #A7A8A8 100%) !important;
-
 }