w-front-end / select_good · Files

<template>
    <div class="search-box">
            
        <!-- nav -->
        <div class="nav" :style="'padding-top: ' + ($parent.top.value) + 'px'">

            <!-- 搜索组件 -->
            <search-com ref="searchCom" @confirm="doConfirm" @cancel="doCancel" @clearInput="clearInput"
                :searchs="searchs">
            </search-com>
        </div>

        <!-- pl占位 -->
        <div class="pl" :style="'padding-top: ' + ($parent.top.value) + 'px'"></div>

        <!-- 搜索历史 -->
        <search-history v-if="!goodsLists.list.length && !darenLists.list.length && !foodLists.list.length" @jump="doConfirm" @clear="clearSearchHistoryArr"
            :searchHistoryArr="searchHistoryArr">
        </search-history>

        <!-- 整页搜索 开始 -->

        <div class="pages-box">

            <div class="infinite-box" infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" :infinite-scroll-disabled="paging.loading" :infinite-scroll-distance="paging.distance">

                <!-- 搜索结果-商品 -->
                <list-com v-if="displayPage.value == displayPage.status.ALL || displayPage.value == displayPage.status.GOODS" @jump="toDetail" @primary="toShop"
                    :lists="goodsLists">

                    <!-- 标题 -->
                    <text-title-box slot="title" @more="more"
                        :titles="titles.goods">
                    </text-title-box>
                </list-com>

                <!-- 搜索结果-达人 -->
                <list-com v-if="displayPage.value == displayPage.status.ALL || displayPage.value == displayPage.status.DAREN" @jump="toDarenProfile" @primary="fansShop"
                    :lists="darenLists">

                    <!-- 标题 -->
                    <text-title-box slot="title" @more="more"
                        :titles="titles.daren">
                    </text-title-box>
                </list-com>

                <!-- 搜索结果-美食 -->
                <list-com v-if="displayPage.value == displayPage.status.ALL || displayPage.value == displayPage.status.FOOD" @jump="toFood"
                    :lists="foodLists">

                    <!-- 标题 -->
                    <text-title-box slot="title" @more="more"
                        :titles="titles.food">
                    </text-title-box>
                </list-com>
            </div>
        </div>

        <!-- 整页搜索 结束 -->

    </div>
</template>

<script>

    // 引入组件
    import { Toast, Indicator } from "mint-ui";
    import searchCom from "@/components/searchCom/searchCom";
    import searchHistory from "@/components/searchHistory/searchHistory";
    import textTitleBox from "@/components/textTitleBox/textTitleBox";
    import listCom from "@/components/listCom/listCom";

    export default {
        name: 'search',
        data () {
            return {
                title: "",
                searchHistoryArr: [],   // 搜索历史数组
                displayPage: {          // 展示页面设置：all：全部分类；goods：商品单页列表；daren：达人单页列表；food：美食单页列表；
                    value: "all",
                    status: {
                        ALL: "all",
                        GOODS: "goods",
                        DAREN: "daren",
                        FOOD: "food"
                    }
                },
                paging: {               // 分页参数，点击更多时需要用到
                    loading: true,
                    page: 0,
                    distance: 50
                },
                searchs: {              // 搜索组件配置参数
                    backgroundColor: "#FAFBFD",
                    borderColor: "#FC1541"
                },
                coordinate: {           // 经纬度定位参数
                    longitude: 0,
                    latitude: 0,
                    location: false
                },
                titles: {               // 板块标题
                    goods: {
                        title: "",
                        more: false,
                        style: '2'
                    },
                    daren: {
                        title: "",
                        more: false,
                        style: '2'
                    },
                    food: {
                        title: "",
                        more: false,
                        style: '2'
                    }
                },
                goodsLists: {           // 商品数据
                    style: "4",
                    backgroundColor: "#FFFFFF",
                    list: []
                },
                darenLists: {           // 达人数据
                    style: "daren-list",
                    backgroundColor: "#FFFFFF",
                    list: []
                },
                foodLists: {            // 美食数据
                    style: "5",
                    backgroundColor: "#FFFFFF",
                    list: []
                }
            }
        },
        components: {
            searchCom,
            searchHistory,
            textTitleBox,
            listCom
        },
        created() {

            // 设置标题
            this.$set(this, "title", "搜索");
        },
        methods: {

            /**
             * 上拉加载
             */
            loadMore() {

                // 调用更多函数，处理loadMore逻辑
                this.more();
            },

            /**
             * 更多
             * @param {String} status [显示哪个列表的状态编码]
             */
            more(status = "") {

                // 设置展示的页面状态编码
                if (status) {
                    this.$set(this.displayPage, "value", status);
                }

                // 获取keyword/初始化页码
                let keyword = window.sessionStorage.getItem("keyword") || this.$refs.searchCom.getKeyword();
                this.$set(this.paging, "page", ++this.paging.page);

                // 根据displayPage的value，判断调用哪个单页面
                switch (this.displayPage.value) {
                    case this.displayPage.status.GOODS:     // 商品搜素

                        // 商品搜素
                        this.goodsSearch(keyword);
                        break;
                    case this.displayPage.status.DAREN:     // 达人搜素

                        // 达人搜素
                        this.darenSearch(keyword);
                        break;
                    case this.displayPage.status.FOOD:      // 美食搜素

                        // 美食搜素
                        this.foodsSearch(keyword);
                        break;
                }
            },

            /**
             * 初始化页面
             */
            initPage() {

                // 定位执行完成，设置定位成功标识参数
                this.$set(this.coordinate, "location", true);

                // 设置搜索历史和会话搜索关键字
                this.getSearchHistoryArr();

                this.$nextTick(() => {

                    // 判断如果有搜索关键字，进行搜索
                    if (this.$refs.searchCom.getKeyword()) {
    
                        // 搜索
                        this.doConfirm(this.$refs.searchCom.getKeyword());
                    }
                })
            },
            
            /**
             * 获取用户定位坐标回调
             * @param {Object} position [坐标数据对象]
             */
            positionCallback(position) {

                // 判断是否有GPS坐标转换高德坐标函数
                if (typeof this.$parent.helper === "object" && typeof this.$parent.helper.GPS === "object") {

                    let marsCoordinates = this.$parent.helper.GPS.wgs84ToGcj02(position.coords.latitude, position.coords.longitude);

                    // 设置经纬度定位参数(火星坐标)
                    this.$set(this.coordinate, "longitude", marsCoordinates.lon);
                    this.$set(this.coordinate, "latitude", marsCoordinates.lat);
                }

                // 定位执行完成，设置定位成功标识参数
                this.$set(this.coordinate, "location", true);

                // 根据实际状况，调用获取数据接口，
                this.initPage();
            },

            /**
             * 获取用户定位坐标(error)回调
             * @param {Object} positionError [错误信息对象]
             */
            positionErrorCallback(positionError) {

                // 定位出错提示
                switch(positionError.code) {
                    case positionError.PERMISSION_DENIED:
                        // Toast("用户拒绝定位");
                        break;
                    case positionError.POSITION_UNAVAILABLE:
                        // Toast("无权获取当前位置");
                        break;
                    case positionError.TIMEOUT:
                        // Toast("定位请求超时");
                        break;
                    case positionError.UNKNOWN_ERROR:
                        // Toast("未知定位错误");
                        break;
                }

                // 定位执行完成，设置定位成功标识参数
                this.$set(this.coordinate, "location", true);

                // 根据实际状况，调用获取数据接口，
                this.initPage();
            },

            /**
             * 全局搜索
             * @param {String} keyword [搜索关键字]
             */
            globalSearch(keyword) {

                // 加载中提示
                Indicator.open("搜索中...");

                // 获取证书请求接口
                this.http("/Api/" + this.getApiVersion().index + "/globalSearch", {
                    keyword: keyword,
                    uid: this.getStore("uid"),
                    longitude: this.coordinate.longitude,
                    latitude: this.coordinate.latitude
                }, this.globalSearchCallback, {
                    method: "POST",
                    keyword,
                    coordinate: this.coordinate
                });
            },

            /**
             * 全局搜索回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            globalSearchCallback(res, ext) {

                // 加载完成
                Indicator.close();

                // 返回处理
                if (res.code == 200) {

                    // 初始化搜素结果数据
                    this.initSearchData();

                    // 解构数据
                    let { data: datas } = res;

                    /* 获取全局搜索数据 开始 */

                    // 设置商品数据
                    if (datas.goods.length) {

                        // 替换标题中的keyword
                        this.keywordHigh(datas.goods, ext.keyword);

                        // 设置数据
                        this.$set(this.goodsLists, "list", datas.goods);
                        this.$set(this.titles.goods, "title", ext.keyword + "-商品");
                        this.$set(this.titles.goods, "more", this.displayPage.status.GOODS);
                    }

                    // 设置达人数据
                    if (datas.shop.length) {

                        // 替换标题中的keyword
                        this.keywordHigh(datas.shop, ext.keyword);

                        // 设置数据
                        this.$set(this.darenLists, "list", datas.shop);
                        this.$set(this.titles.daren, "title", ext.keyword + "-达人");
                        this.$set(this.titles.daren, "more", this.displayPage.status.DAREN);
                    }

                    // 设置美食数据
                    if (datas.foodsShop.length) {

                        // 替换标题中的keyword
                        this.keywordHigh(datas.foodsShop, ext.keyword);

                        // 设置数据
                        this.$set(this.foodLists, "list", datas.foodsShop);
                        this.$set(this.foodLists, "coordinate", ext.coordinate);
                        this.$set(this.titles.food, "title", ext.keyword + "-美食");
                        this.$set(this.titles.food, "more", this.displayPage.status.FOOD);
                    }

                    /* 获取全局搜索数据 结束 */

                    // 设置全部分类搜索
                    this.displayPage.value = this.displayPage.status.ALL;

                    // 初始化分页页码为0
                    this.$set(this.paging, "page", 0);
                } else if (res.code == 400) {

                    // 搜索失败
                    Toast(res.message);
                } else {

                    // 搜索失败
                    Toast("搜索失败");
                }
            },

            /**
             * 商品搜索
             * @param {String} keyword [搜索关键字]
             */
            goodsSearch(keyword) {

                // 加载中
                this.$set(this.paging, "loading", true);

                // 加载中提示
                Indicator.open("搜索中...");

                // 获取证书请求接口
                this.http("/Api/" + this.getApiVersion().index + "/goodsSearch", {
                    keyword: keyword,
                    uid: this.getStore("uid"),
                    page: this.paging.page
                }, this.pagingSearchCallback, {
                    method: "POST",
                    keyword
                });
            },

            /**
             * 达人搜索
             * @param {String} keyword [搜索关键字]
             */
            darenSearch(keyword) {

                // 加载中
                this.$set(this.paging, "loading", true);

                // 加载中提示
                Indicator.open("搜索中...");

                // 获取证书请求接口
                this.http("/Api/" + this.getApiVersion().index + "/darenSearch", {
                    keyword: keyword,
                    uid: this.getStore("uid"),
                    page: this.paging.page
                }, this.pagingSearchCallback, {
                    method: "POST",
                    keyword
                });
            },

            /**
             * 美食搜索
             * @param {String} keyword [搜索关键字]
             */
            foodsSearch(keyword) {

                // 加载中
                this.$set(this.paging, "loading", true);

                // 加载中提示
                Indicator.open("搜索中...");

                // 获取证书请求接口
                this.http("/Api/" + this.getApiVersion().index + "/foodsSearch", {
                    keyword: keyword,
                    uid: this.getStore("uid"),
                    longitude: this.coordinate.longitude,
                    latitude: this.coordinate.latitude,
                    page: this.paging.page
                }, this.pagingSearchCallback, {
                    method: "POST",
                    keyword,
                    coordinate: this.coordinate
                });
            },

            /**
             * 分页搜索统一处理回调
             * @param {object} res [服务器返回数据]
             * @param {object} ext [扩展参数]
             */
            pagingSearchCallback(res, ext) {

                // 加载完成
                Indicator.close();

                // 返回处理
                if (res.code == 200) {

                    // 解构数据
                    let { data: datas } = res;

                    /* 获取搜索数据 开始 */

                    // 判断搜索类型
                    switch (this.displayPage.value) {
                        case this.displayPage.status.GOODS:     // 商品搜素

                            // 设置商品数据
                            if (datas.goods.length) {

                                // 替换标题中的keyword
                                this.keywordHigh(datas.goods, ext.keyword);

                                // 判断数据处理方式
                                if (this.paging.page > 1) {    // 追加数据
                                    this.$set(this.goodsLists, "list", [...this.goodsLists.list, ...datas.goods]);
                                } else {    // 初始化数据
                                    this.$set(this.goodsLists, "list", datas.goods);
                                    this.$set(this.titles.goods, "more", false);
                                }

                                // 设置还有需要加载的内容
                                this.$set(this.paging, "loading", false);
                            } else {

                                // 没有需要加载的内容，停止上拉加载
                                this.$set(this.paging, "loading", true);
                            }
                            break;
                        case this.displayPage.status.DAREN:     // 达人搜素

                            // 设置达人数据
                            if (datas.shop.length) {

                                // 替换标题中的keyword
                                this.keywordHigh(datas.shop, ext.keyword);

                                // 判断数据处理方式
                                if (this.paging.page > 1) {
                                    this.$set(this.darenLists, "list", [...this.darenLists.list, ...datas.shop]);
                                } else {
                                    this.$set(this.darenLists, "list", datas.shop);
                                    this.$set(this.titles.daren, "more", false);
                                }

                                // 设置还有需要加载的内容
                                this.$set(this.paging, "loading", false);
                            } else {

                                // 没有需要加载的内容，停止上拉加载
                                this.$set(this.paging, "loading", true);
                            }
                            break;
                        case this.displayPage.status.FOOD:     // 美食搜素

                            // 设置美食数据
                            if (datas.foodsShop.length) {

                                // 替换标题中的keyword
                                this.keywordHigh(datas.foodsShop, ext.keyword);

                                // 判断数据处理方式
                                if (this.paging.page > 1) {
                                    this.$set(this.foodLists, "list", [...this.foodLists.list, ...datas.foodsShop]);
                                } else {
                                    this.$set(this.foodLists, "list", datas.foodsShop);
                                    this.$set(this.titles.food, "more", false);
                                    this.$set(this.foodLists, "coordinate", ext.coordinate);
                                }

                                // 设置还有需要加载的内容
                                this.$set(this.paging, "loading", false);
                            } else {

                                // 没有需要加载的内容，停止上拉加载
                                this.$set(this.paging, "loading", true);
                            }
                            break;
                    }

                    /* 获取搜索数据 结束 */
                    
                } else if (res.code == 400) {

                    // 搜索失败
                    Toast(res.message);
                } else {

                    // 搜索失败
                    Toast("搜索失败");
                }
            },

            /**
			 * 关注/取消关注达人
             * @param {object} item [数据对象]
			 */
			fansShop(item) {

				// 判断必要参数
				if (item.id && this.getStore("uid")) {
					
					// 加载中提示
                    Indicator.open("加载中...");
					
					// 请求接口
					this.http("/Api/" + (this.getApiVersion().dynamic) + "/fansShop", {
						id: item.id,
						uid: this.getStore("uid")
					}, this.fansShopCallback, {
                        method: "POST",
                        item
					});
				}
			},
			
			/**
			 * 关注/取消关注达人回调
			 * @param {object} res [服务器返回数据]
			 * @param {object} ext [扩展参数]
			 */
			fansShopCallback(res, ext) {
                
                // 加载完成
                Indicator.close();

				// 返回处理
				if (res.code == 200) {
					
					// 解构数据
					let {data: datas} = res;
					
					// 设置关注状态
					if (ext.item.is_fans == "0") {
						
						// 关注按钮状态切换
						this.$set(ext.item, "is_fans", "1");
                        
                        // 粉丝数增减处理
						this.$set(ext.item, "fans_count", parseInt(ext.item.fans_count) + 1);

						// 关注达人成功
						Toast("关注成功");
					} else {
						
						// 关注按钮状态切换
						this.$set(ext.item, "is_fans", "0");
						
						// 粉丝数增减处理
						this.$set(ext.item, "fans_count", parseInt(ext.item.fans_count) - 1);
						
						// 关注达人成功
						Toast("已取关");
					}
				} else if (res.code == 400) {
					
					// 关注/取消关注达人失败
					Toast(res.data.message);
				} else {
					
					// 关注/取消关注达人失败
					Toast("关注/取消关注失败");
				}
			},

            /**
             * 跳转商品详情
             * @param {object} item [数据对象]
             */
            toDetail(item) {

                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 构造跳转参数
                    let options = {
                        type: "2",
                        to: item.id,
                        shop_type: item.shop_type
                    }

                    // 调用通用跳转
                    this.$parent.gotoDetail(options);
                }
            },

            /**
             * 进入店铺
             * @param {object} item [数据对象]
             */
            toShop(item) {

                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 构造跳转参数
                    let options = {
                        type: "5",
                        to: item.shop_url + "&from=redirect",
                        shop_type: ""
                    }

                    // 调用通用跳转
                    this.$parent.gotoDetail(options);
                }
            },

            /**
             * 进入达人个人主页
             * @param {object} item [数据对象]
             */
            toDarenProfile(item) {

                // 全部跳转H5达人相关页面，达人个人主页连接
                if (item.id) {
                    window.location.href = (this.mode == "prod") ? "https://managemall.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.id + "&from=redirect" : "https://wjjshop.cnlive.com/html/preferred-library/1/#/pages/darenProfile/darenProfile?id=" + item.id + "&from=redirect";
                }

                // // 判断并调用通用跳转
                // if (typeof this.$parent.gotoDetail === "function") {

                //     // 构造跳转参数
                //     let options = {
                //         type: "24",
                //         to: item.id,
                //         shop_type: ""
                //     }

                //     // 调用通用跳转
                //     this.$parent.gotoDetail(options);
                // }
            },

            /**
             * 进入美食
             * @param {object} item [数据对象]
             */
            toFood(item) {

                // 判断并调用通用跳转
                if (typeof this.$parent.gotoDetail === "function") {

                    // 判断是否有item.location参数
                    if (item.location) {

                        // 调用通用跳转
                        this.$parent.gotoDetail(item.location);
                    }
                }
            },

            /**
             * 搜索
             * @param {String} keyword [搜索关键字]
             */
            doConfirm(keyword) {

                // 判断搜索关键字
                if (keyword && typeof keyword === "string") {

                    // 设置搜索结果
                    this.setSearchHistoryArr(keyword);

                    // 进行搜索
                    this.globalSearch(keyword);
                } else if (keyword === "") {

                    // 和清空input同操作
                    this.clearInput();
                }
            },

            /**
             * 搜索框取消按钮，销毁WebView
             */
            doCancel() {

                // 判断destroy函数是否存在
                if (typeof this.$parent.destroy === "function") {
                    this.$parent.destroy();
                } else {

                    // 后退
                    window.history.go(-1);
                }
            },

            /**
             * 清空input
             */
            clearInput() {

                // 传空字符串，清空会话搜索关键字
                this.setSearchHistoryArr("");

                // 清空搜索结果数据
                this.initSearchData();
            },

            /**
             * 初始化搜索结果数据
             */
            initSearchData() {

                /* 初始化搜索对象数据 开始 */

                // 初始化商品数据
                this.$set(this.goodsLists, "list", []);
                this.$set(this.titles, "goodsListTitle", "");

                // 初始化达人数据
                this.$set(this.darenLists, "list", []);
                this.$set(this.titles, "darenListTitle", "");

                // 初始化商品数据
                this.$set(this.foodLists, "list", []);
                this.$set(this.foodLists, "coordinate", null);
                this.$set(this.titles, "foodListTitle", "");

                /* 初始化搜索对象数据 结束 */
                
            },

            /**
             * 搜索结果关键字title高亮
             * @param {Object} o [目标对象]
	         * @param {String} keyword [关键字]
             */
            keywordHigh(o, keyword) {

                // 判断是否有字符串替换工具函数
                if (typeof this.$parent.helper === "object" && typeof this.$parent.helper.objectStringReplaceAll === "function") {
                    this.$parent.helper.objectStringReplaceAll(o, "title", keyword, "<span class='k'>" + keyword + "</span>");
                }
            },

            /**
             * 获取历史搜索结果Storage
             */
            getSearchHistoryArr() {

                // 设置会话keyword
                if (window.sessionStorage.getItem("keyword")) {
                    
                    this.$nextTick(() => {

                        // 设置搜索关键字
                        this.$refs.searchCom.setKeyword(window.sessionStorage.getItem("keyword"));
                    });
                }

                // 处理搜索历史Storage数组
                if (window.localStorage.getItem("searchHistoryArr")) {
                    
                    // 获取搜索历史数组
                    this.$set(this, "searchHistoryArr", window.localStorage.getItem("searchHistoryArr").split(","));
                }
            },

            /**
             * 设置历史搜索结果Storage
             * @param {String} keyword [搜索关键字]
             */
            setSearchHistoryArr(keyword) {

                // 设置会话keyword
                window.sessionStorage.setItem("keyword", keyword);

                this.$nextTick(() => {

                    // 设置input值，通过历史记录搜索时，会用到
                    this.$refs.searchCom.setKeyword(keyword);
                });

                // 处理搜索历史Storage数组
                if (!window.localStorage.getItem("searchHistoryArr")) {
                    window.localStorage.setItem("searchHistoryArr", "");
                }

                // 判断keyword是否有值
                if (keyword) {

                    // 数组压栈
                    this.searchHistoryArr.unshift(keyword);

                    // 数组去重
                    this.$set(this, "searchHistoryArr", Array.from(new Set(this.searchHistoryArr)));

                    // 判断数组大小，最多存8个
                    if (this.searchHistoryArr.length > 8) {
                        
                        // 循环弹出数组多余元素
                        for (let i = this.searchHistoryArr.length; i > 8 ; i--) {
                            this.searchHistoryArr.pop();
                        }
                    }

                    // 将数组信息序列化，存入Storage中
                    window.localStorage.setItem("searchHistoryArr", this.searchHistoryArr.join(","));
                }
            },

            /**
             * 清空搜索历史
             */
            clearSearchHistoryArr() {

                // 清除搜索历史Storage数组
                if (window.localStorage.getItem("searchHistoryArr")) {
                    window.localStorage.setItem("searchHistoryArr", "");
                }

                // 清除searchHistoryArr数组
                this.$set(this, "searchHistoryArr", []);
            }
        },
        head: {
            title () {
                return {
                    inner: this.title
                }
            }
        },
        watch: {

            // 设置页面标题
            title(newVal) {
                if (this.$store.state.browser.toLowerCase() == "qq" && this.$store.state.deviceType.toLowerCase() == "iphone") {
                    this.$iFrame.insertIFrame(newVal);
                } else {
                    this.$emit("updateHead");
                }
            }
        },
        mounted() {

            // 获取用户定位坐标
            if (typeof this.$parent.helper === "object" && typeof this.$parent.helper.getLocation === "function") {

                // 获取用户定位坐标
                this.$parent.helper.getLocation(this.positionCallback, this.positionErrorCallback, this.initPage);
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style rel="stylesheet/less" lang='less' scoped>
    @import "search";
</style>