公共导航

components/Yl_nav/index.js

@@ -4,30 +4,27 @@ Component({
     },
     properties: {
         search: Boolean, //是否开启搜索
-        list: {
-            type: Array,
-            value: [{
-                label: "我负责的",
-                icon: "icon-webxialaxuanxiangjiantou",
-                color: "",
-                width: ""
-            }, {
-                label: "筛选",
-                icon: "icon-daoruxialajiantou",
-                color: "",
-                width: ""
-            }, {
-                label: "创建时间",
-                icon: "icon-quxiao",
-                color: "",
-                width: ""
-            }]
-        }, //功能列表
-        onSearch: Function,
-        onClick: Function
+        list: Array, //功能列表
+        condition: String, //搜索内容
+        onClick: Function,
+        startUsing: Boolean, //启用搜索
+        onSearch: Function, //搜索回调
+        record: { //记录历史
+            type: Boolean,
+            value: true
+        }
+    },
+    lifetimes: {
+        attached() {
+            if (wx.getStorageSync('SearchHistory')) this.setData({
+                history: wx.getStorageSync('SearchHistory')
+            })
+        }
     },
     data: {
-
+        condition: "",
+        history: [], //搜索历史
+        showHistory: false
     },
     methods: {
         onClick(e) {
@@ -36,8 +33,98 @@ Component({
             } = e.currentTarget.dataset;
             this.triggerEvent("onClick", item)
         },
-        handleSearch() {
-            this.triggerEvent("onSearch")
+        /* 开启关闭搜索 */
+        clickSearch() {
+            this.setData({
+                startUsing: !this.data.startUsing
+            });
+            setTimeout(this.setListHeight, 400)
+        },
+        /* 开始搜索 */
+        startSearch({
+            detail
+        }) {
+            if (this.data.condition == detail) return;
+            this.setData({
+                condition: detail
+            })
+            this.triggerEvent("onSearch", detail)
+            if (this.data.record || detail == '') {
+                let list = this.data.history;
+                if (list.findIndex(v => v == detail) == -1) {
+                    list.push(detail)
+                    this.setData({
+                        history: list
+                    });
+                    wx.setStorageSync("SearchHistory", list)
+                }
+            }
+        },
+        /* 取消搜索 */
+        endSearch() {
+            this.setData({
+                condition: ""
+            })
+            this.triggerEvent("onSearch", "")
+        },
+        /* 删除搜索历史 */
+        deleteHistory(e) {
+            let that = this;
+            wx.showModal({
+                title: '提示',
+                content: '是否删除所有搜索历史',
+                complete: ({
+                    confirm
+                }) => {
+                    if (confirm) {
+                        wx.setStorageSync("SearchHistory", [])
+                        that.setData({
+                            history: []
+                        });
+                        this.setListHeight();
+                    }
+                }
+            })
+        },
+        /* 快速搜索 */
+        clickTag(e) {
+            const {
+                name
+            } = e.currentTarget.dataset;
+            this.setData({
+                condition: name
+            });
+            this.triggerEvent("onSearch", name)
+        },
+        /* 单独删除 */
+        delteTag(e) {
+            const {
+                name
+            } = e.currentTarget.dataset;
+            this.setData({
+                history: this.data.history.filter(v => v != name)
+            });
+            wx.setStorageSync('SearchHistory', this.data.history);
+            this.setListHeight();
+        },
+        /* 设置列表高度 */
+        setListHeight() {
+            let pages = getCurrentPages();
+            if (pages[pages.length - 1].setListHeight) pages[pages.length - 1].setListHeight();
+        },
+        /* 搜索框焦点 */
+        onFocus() {
+            this.setData({
+                showHistory: true
+            });
+            setTimeout(this.setListHeight, 50);
+        },
+        /* 搜索框失焦 */
+        onBlur() {
+            this.setData({
+                showHistory: false
+            })
+            setTimeout(this.setListHeight, 50);
         }
     }
 })

components/Yl_nav/index.json

@@ -1,4 +1,6 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+        "van-transition": "@vant/weapp/transition/index"
+    }
 }

components/Yl_nav/index.scss

@@ -5,6 +5,7 @@
     background-color: #fff;
     position: sticky;
     top: 0;
+    border-bottom: 1px solid #ddd;
 
     .mian {
         flex: 1;
@@ -20,7 +21,7 @@
             font-family: PingFang SC-Regular, PingFang SC;
             color: #666666;
 
-            .iconfont{
+            .iconfont {
                 font-size: 28rpx;
                 margin-right: 4rpx;
             }
@@ -34,4 +35,33 @@
         text-align: center;
         flex-shrink: 0;
     }
+}
+
+.Yl_search {
+    height: 80rpx !important;
+    align-items: flex-start;
+}
+
+.Yl_history {
+    width: 100vw;
+    background-color: #fff;
+    box-sizing: border-box;
+    padding: 6rpx 30rpx 15rpx;
+
+    .label {
+        display: flex;
+        justify-content: space-between;
+        height: 50rpx;
+        line-height: 58rpx;
+        font-size: 24rpx;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #666666;
+
+        .iconfont {
+            display: inline-block;
+            width: 80rpx;
+            text-align: center;
+            margin-right: -30rpx;
+        }
+    }
 }

components/Yl_nav/index.wxml

@@ -5,7 +5,23 @@
             <text class="label">{{item.label}}</text>
         </navigator>
     </view>
-    <navigator wx:if="{{search}}" url="#" class="search" bindtap="handleSearch">
-        <text class="iconfont icon-websousuo" />
+    <navigator wx:if="{{search}}" class="search" url="#" bindtap="clickSearch">
+        <text class="iconfont icon-a-sousuolansousuo" style="color: {{startUsing?'var(--assist)':''}};" />
     </navigator>
-</view>
+</view>
+
+<van-transition show="{{ startUsing }}" custom-class="block">
+    <van-search custom-class='Yl_search' value="{{ condition }}" bindfocus='onFocus' bind:blur='onBlur' shape="round" placeholder="请输入搜索关键词" bind:search='startSearch' bind:clear='endSearch' />
+    <view class="Yl_history" wx:if="{{record}}">
+        <view class="label" wx:if="{{showHistory && history.length}}">
+            <text>最近搜索记录</text>
+            <!-- <text class="iconfont icon-guanlian-shanchu" style="font-size: 24rpx;" bindtap="deleteHistory" /> -->
+        </view>
+        <view class="content" wx:if="{{showHistory}}">
+            <!-- closeable -->
+            <van-tag wx:for="{{history}}" style="margin-left: 6rpx;" wx:key="item" size="medium" round data-name="{{item}}" catch:close="delteTag" catchtap="clickTag">
+                {{item}}
+            </van-tag>
+        </view>
+    </view>
+</van-transition>