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="!commoditys.list.length && !darenLists.list.length && !foodLists.list.length" @jump="doConfirm" @clear="clearSearchHistoryArr"
            :searchHistoryArr="searchHistoryArr">
        </search-history>

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

        <div class="page-all" v-if="displayPage.value == 'all'">

            <!-- 搜索结果-商品 -->
            <list-com @jump="toDetail" @primary="toShop"
                :lists="commoditys">

                <!-- 标题 -->
                <text-title-box slot="title" @more="more"
                    :titles="{
                        title: titles.commodityTitle,
                        more: true,
                        style: '2'
                    }">
                </text-title-box>
            </list-com>

            <!-- 搜索结果-达人 -->
            <list-com @jump="toDarenProfile" @primary="fansShop"
                :lists="darenLists">

                <!-- 标题 -->
                <text-title-box slot="title" @more="more"
                    :titles="{
                        title: titles.darenListTitle,
                        more: true,
                        style: '2'
                    }">
                </text-title-box>
            </list-com>

            <!-- 搜索结果-美食 -->
            <list-com @jump="toFood"
                :lists="foodLists">

                <!-- 标题 -->
                <text-title-box slot="title" @more="more"
                    :titles="{
                        title: titles.foodListTitle,
                        more: true,
                        style: '2'
                    }">
                </text-title-box>
            </list-com>
        </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: {          // 展示页面设置
                    value: "all"
                },
                pages: 0,               // 页码，点击更多是需要用到
                searchs: {              // 搜索组件配置参数
                    backgroundColor: "#FAFBFD",
                    borderColor: "#FC1541"
                },
                coordinate: {           // 经纬度定位参数
                    longitude: "0",
                    latitude: "0"
                },
                titles: {               // 板块标题
                    commodityTitle: "",
                    darenListTitle: "",
                    foodListTitle: ""
                },
                commoditys: {           // 商品数据
                    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: {

            /**
             * 全局搜索
             * @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) {
                        this.$set(this.commoditys, "list", datas.goods);
                        this.$set(this.titles, "commodityTitle", ext.keyword + "-商品");
                    }

                    // 设置达人数据
                    if (datas.shop.length) {
                        this.$set(this.darenLists, "list", datas.shop);
                        this.$set(this.titles, "darenListTitle", ext.keyword + "-达人");
                    }
                    // 设置商品数据
                    if (datas.foodsShop.length) {
                        this.$set(this.foodLists, "list", datas.foodsShop);
                        this.$set(this.foodLists, "coordinate", ext.coordinate);
                        this.$set(this.titles, "foodListTitle", ext.keyword + "-美食");
                    }

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

                } 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 [数据对象]
             */
            more(item) {



                console.log("more", item);



            },

            /**
             * 跳转商品详情
             * @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,
                        shop_type: ""
                    }

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

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

                // 判断并调用通用跳转
                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);

                    // 判断进行哪个页面的搜索
                    if (this.displayPage.value == "all") {

                        // 进行搜索
                        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.commoditys, "list", []);
                this.$set(this.titles, "commodityTitle", "");

                // 初始化达人数据
                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", "");

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

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

                // 设置会话keyword
                if (window.sessionStorage.getItem("keyword")) {
                    
                    // 设置搜索关键字
                    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);

                // 设置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() {

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

            // 判断如果有搜索关键字，进行搜索
            if (this.$refs.searchCom.getKeyword()) {

                // 搜索
                this.doConfirm(this.$refs.searchCom.getKeyword());
            }
        }
    }
</script>

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