E_Chuchu/components/Yl_HeadNav/index.js

const getHeight = require("../../utils/GetRheRemainingHeight");
Component({
    options: {
        addGlobalClass: true
    },
    properties: {
        styleType: {
            type: String,
            value: "default", //默认样式
        },
        sort: Array, //排序规则列表
        search: Boolean, //是否开启搜索
        list: { //功能列表
            type: Array,
            value: [{
                label: "全部",
                icon: "icon-webxialaxuanxiangjiantou",
                color: "",
                width: "",
                id: "1"
            }, {
                label: "排序",
                icon: "icon-shengxu",
                color: "",
                width: "",
                id: "sort"
            }, {
                label: "筛选",
                icon: "icon-shaixuan",
                color: "",
                width: "",
                id: "filtrate"
            }]
        },
        condition: String, //搜索内容
        onClick: Function,
        startUsing: Boolean, //启用搜索
        onSearch: Function, //搜索回调
        record: { //记录历史
            type: Boolean,
            value: true
        },
        placeholder: {
            type: String,
            value: "搜索商品"
        },
        isFilter: {
            type: Boolean,
            value: false
        }
    },
    data: {
        sortShow: false,
        reversed: 0, //是否翻转
        condition: "",
        history: [], //搜索历史
        showHistory: false,
        listHeight: null,
    },
    lifetimes: {
        attached() {
            if (wx.getStorageSync('SearchHistory')) this.setData({
                history: wx.getStorageSync('SearchHistory')
            })
        },
        ready() {
            getHeight.getHeight('.Yl_head', this).then(res => this.setData({
                listHeight: res - 80
            }));
        }
    },
    methods: {
        /* 排序 */
        sortClick(e) {
            const {
                name
            } = e.target.dataset;
            if (name == 'confirm') {
                let sort = this.data.sort.find(v => v.sorted == 1),
                    i = this.data.list.findIndex(v => v.id == 'sort');
                this.setData({
                    [`list[${i}].label`]: sort.sortname,
                    [`list[${i}].icon`]: sort.reversed == 1 ? 'icon-jiangxu1' : 'icon-shengxu',
                })
                let pages = getCurrentPages(),
                    page = pages[pages.length - 1];
                page.setData({
                    "content.sort": this.data.sort
                });
                page.getList(true);
            };
            this.setData({
                sortShow: false
            })
        },
        sortClose() {
            this.setData({
                sortShow: false
            })
        },
        /* 设置排序规则 */
        handleSort(e) {
            const {
                id
            } = e.currentTarget.dataset;
            this.setData({
                sort: this.data.sort.map(v => {
                    v.sorted = v.sortid == id ? 1 : 0
                    return v;
                })
            });
        },
        /* 设置升序和倒叙 */
        handleReversed(e) {
            let {
                id
            } = e.currentTarget.dataset;
            if (this.data.reversed == id) return;
            this.setData({
                reversed: id,
                sort: this.data.sort.map(v => {
                    v.reversed = id;
                    return v;
                })
            });
        },
        onClick(e) {
            const {
                item
            } = e.currentTarget.dataset;
            if (item.id == "sort") {
                //排序
                this.setData({
                    sortShow: true
                })
            } else if (item.id == "filtrate") {
                let page = getCurrentPages()[getCurrentPages().length - 1].selectComponent("#Filtrate");
                if (page) {
                    page.setData({
                        show: true
                    })
                } else {
                    this.triggerEvent("onClick", item)
                }

            } else {
                this.triggerEvent("onClick", item)
            }
        },
        onChick1(e) {
            const {
                id
            } = e.currentTarget.dataset;
            if (id == "sort") {
                //排序
                this.setData({
                    sortShow: true
                })
            } else if (id == "filtrate") {
                let page = getCurrentPages()[getCurrentPages().length - 1].selectComponent("#Filtrate");
                if (page) page.setData({
                    show: true
                })
            }
        },
        /* 开启关闭搜索 */
        clickSearch() {
            this.setData({
                startUsing: !this.data.startUsing
            });
            setTimeout(this.setListHeight, 400)
        },
        /* 搜索 */
        confirmSearch(e) {
            if (this.data.condition == e.detail.value) return;
            this.setData({
                condition: e.detail.value
            })
            this.triggerEvent("onSearch", e.detail.value)
        },
        /* 开始搜索 */
        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);
        }
    }
})