w-front-end / select_good · Files

<template>
	<div class="search-page">
		
		<!-- 容器 -->
		<div class="container">
			
			<!-- 主体区域 -->
			<div class="main-box">
						
				<!-- 导航栏容器 -->
				<div class="nav-container" :style="'padding-top: ' + $parent.top.value + 'px'">
					
					<!-- 导航栏 -->
					<nav-search-bar ref="navSearchBar" @back="back" @doSearch="doSearch" @clearInput="clearInput" @exceptions="exceptions"
						:navs="navsSearch">
					</nav-search-bar>
				</div>
				
				<!-- nav-pl -->
				<div class="nav-pl" :style="'padding-top: ' + $parent.top.value + 'px'"></div>

				<!-- 滚动组件 -->
				<div class="scroll-warp">
					
					<!-- 主内容浮动区域 -->
					<div class="section-box">
						
						<!-- 搜索组件框 -->
						<div class="section">
							
							<!-- 判断列表数组是否有数据，有再显示 -->
							<template v-if="lists && lists.length">
								
								<!-- 上拉加载 -->
			                    <van-list class="list-container" v-model="tabs.loading" :finished="tabs.finished" finished-text="~没有更多了~" @load="loadMore">
									
									<!-- 列表项 -->
									<div class="list-item" v-for="(item, index) in lists" :key="index">
										
										<!-- 商品样式 III 列表 -->
										<goods-item-i-i-i @jump="toDetail" @primary="primary"
											:item="item">
											
											<!-- 角标 -->
											<div class="discount-flag" slot="flag" v-if="item.is_gh != '1'">
												非工会选品
											</div>
										</goods-item-i-i-i>
									</div>
								</van-list>
							</template>
							
							<!-- 没有搜索数据 -->
							<template v-else-if="tabs && tabs.keyword && initialized">
								
								<!-- 未找到您搜索的内容 -->
								<div class="no-data">
									
									<!-- 图片 -->
									<img src="https://wjj.ys2.cnliveimg.com/769/img_new/1659946355366.png" class="icon-empty" />
									
									<!-- 提示文字 -->
									<div class="text">搜索结果为空～</div>
								</div>
							</template>
							
							<!-- 未搜索时，显示历史搜索 -->
							<template v-else>
								
								<!-- 历史搜索区块 -->
								<div class="his-box" v-if="searchHistoryArr && searchHistoryArr.length">
								
									<!-- 标题 -->
									<div class="title-box">
										<div class="title">历史搜索</div>
									</div>
									
									<!-- 历史搜索结果 -->
									<div class="item-box">
										<div class="item" v-for="(item, index) in searchHistoryArr" :key="index" @click="doSearch(item)">
											{{item}}
										</div>
									</div>
									
									<!-- 清除历史搜索结果 -->
									<div class="clear-his" @click="clearSearchHistoryArr">清除搜索历史</div>
								</div>
							</template>
						</div>
					</div>
					
					<!-- 安全底部距离 -->
					<div class="safe-area-inset-bottom"></div>
				</div>
			</div>
		</div>
		
		<!-- 回到顶部按钮 -->
        <goto-top
            :top="parseInt(150)">
        </goto-top>
	</div>
</template>

<script>
	
	// 引入组件
	import Vue from "vue";
    import { Toast, Indicator } from "mint-ui";
    import { List } from "vant";
	import navSearchBar from '@/components/navSearchBar/navSearchBar';
	import goodsItemIII from '@/components/goodsItemIII/goodsItemIII';
	import gotoTop from "@/components/gotoTop/gotoTop";
	
	Vue.use(List);

	export default {
		name: "searchPage",
		data() {
			return {
				title: '',
				statusBarHeight: 0,				// 状态栏高度
				scrollViewHeight: 0,			// scroll-view高度
				threshold: 230,					// 出现返回顶部按钮的滚动条位置
				scrollTop: 0,					// 滚动到顶部位置，用于changeTab时，滚动条滚动到顶部
				currScrollTop: 0,				// 滚动条当前位置，用于changeTab时，滚动条滚动到顶部
				CALL_STATUS: {
					INIT: "init",				// 初始化页面
					LOAD_MORE: "loadMore"		// 加载更多
				},
				navsSearch: null,				// 导航栏对象
				searchHistoryArr: [],			// 搜索历史记录数组
				tabs: {},						// tabsBar数据对象
				initialized: false,				// 已初始化过标识，默认false
				interface: 'goodsSearch',		// 列表页接口名称
				lists: []						// 列表数据
			}
		},
		components: {
			navSearchBar,
			goodsItemIII,
			gotoTop
		},
		created() {

			// 设置标题
			this.$set(this, 'title', '搜索');
			
			// 设置navs
			this.$set(this, 'navsSearch', {
				back: {
					icon: 'static/img/icon_back.png'
				},
				search: {
					icon: 'static/img/icon_search.png',
					pl: '请输入关键字',
					enabled: true
				}
			});
			
			// 初始化tabs对象
			this.setTabs();

			// 获取历史搜索结果Storage
            this.getSearchHistoryArr();
		},
		methods: {
			
			/**
			 * scroll-view组件滚动监听
			 * @param {Object} e [scroll-view滚动事件对象]
			 */
			scroll(e) {
				
				// 设置currScrollTop
				this.$set(this, 'currScrollTop', e.detail.scrollTop);
			},
			
			/**
			 * 加载更多
			 */
			loadMore() {

				// 判断是否可加载
				if (this.tabs.loadingNow === false && this.tabs.finished === false) {
					
					// 设置加载中状态
                    this.$set(this.tabs, 'loadingNow', true);

					if (this.tabs.page == 1 || this.tabs.page === undefined) {
						
						// 设置初始化页码
						this.$set(this.tabs, 'page', 1);
						
						// 初始化列表
						this.getLists(this.tabs, this.CALL_STATUS.INIT);
					} else {
						
						// 判断页面是数字再执行
						if (!isNaN(parseInt(this.tabs.page)) && this.tabs.page > 1) {

							// 加载更多
							this.getLists(this.tabs, this.CALL_STATUS.LOAD_MORE);
						}
					}
				}
			},
			
			/**
			 * 获取数据列表
			 * @param {Object} tabs [tabs对象，获取数据必要参数对象]
			 * @param {Object} CALL_STATUS [何处触发请求]
			 */
			getLists(tabs, CALL_STATUS = this.CALL_STATUS.INIT) {

				// 判断必要参数
				if (typeof tabs === 'object' && tabs.interface && tabs.page >= 1 && tabs.finished === false) {

					// 设置loading状态
					this.$set(tabs, 'loading', true);
					
					// 加载中提示
                	Indicator.open("加载中...");
					
					// 设置请求参数
					let reqParams = {
						keyword: tabs.keyword,
						uid: (this.$route.query.uid || 0),
						page: tabs.page
					};
					
					// 请求接口
					this.http('/Api/' + (this.getApiVersion().index) + '/' + tabs.interface, reqParams, this.getListsCallback, {
						method: 'POST',
						tabs,
						CALL_STATUS
					});
				}
			},
			
			/**
			 * 获取数据列表回调
			 * @param {Object} res [服务器返回数据]
			 * @param {Object} ext [扩展参数]
			 */
			getListsCallback(res, ext) {
				
				// 加载完成
                Indicator.close();

				// 如果是初始化，清空lists数据
				if (ext.CALL_STATUS === this.CALL_STATUS.INIT) {
					
					// 清空lists数据
					this.$set(this, 'lists', []);
				}
				
				// 返回处理
				if (res.code == 200) {
					
					// 解构数据
					let {data: datas} = res;
					
					/* 设置列表数据 开始 */
					
					// 判断如果有数据
					if (datas && datas.goods && datas.goods.length) {

						switch (ext.CALL_STATUS) {
							case this.CALL_STATUS.INIT:

								// 设置数据数组列表
								this.$set(this, 'lists', datas.goods);
								break;
							case this.CALL_STATUS.LOAD_MORE:

								// 追加数据数组列表
								this.$set(this, 'lists', [...this.lists, ...datas.goods]);
								break;
						}
						
						// 设置页码
						this.$set(ext.tabs, 'page', ++ext.tabs.page);
						
						// 取消Loading中状态，设置加载未完成，可以再加载更多
						this.$set(ext.tabs, 'loading', false);
						this.$set(ext.tabs, 'loadingNow', false);
						this.$set(ext.tabs, 'finished', false);
					} else {
					
						// 取消Loading中状态，设置加载已完成，不能再加载更多
						this.$set(ext.tabs, 'loading', false);
						this.$set(ext.tabs, 'loadingNow', false);
						this.$set(ext.tabs, 'finished', true);
					}
					
					/* 设置列表数据 结束 */
					
				} else if (res.code == 400) {
					
					// 获取数据列表失败
					Toast(res.message);
				} else {
					
					// 获取数据列表失败
					Toast('获取数据列表失败');
				}

				// 设置已初始化过
				this.$set(this, 'initialized', true);
			},
			
			/**
			 * 初始化tabs对象
			 * @param {String} keyword [搜索关键字，默认为空字符串]
			 */
			setTabs(keyword = '') {
				
				if (this.debug) {
					console.log('setTabs', keyword);
				}
				
				/* 初始化tabs数据 开始 */
				
				// tabsBar数据对象
				this.$set(this, 'tabs', {
					interface: this.interface,	// 列表页接口名称
					keyword: keyword,			// 搜索关键字
					page: 1,					// 页码
					loading: false,				// 加载中状态
					loadingNow: false,
					finished: false				// 全部加载完成
				});
				
				/* 初始化tabs数据 结束 */
				
				if (this.debug) {
					console.log('setTabs', this.tabs);
				}
			},
			
			/**
			 * 搜索事件监听
			 * @param {String} keyword [搜索关键字]
			 */
			doSearch(keyword) {
				
				if (this.debug) {
					console.log('doSearch', keyword);
				}
				
				// 判断必要参数
        		if (keyword && typeof keyword === 'string' && keyword.trim()) {

					// 清空列表
					this.$set(this, 'lists', []);

					// 初始化tabs对象
					this.setTabs(keyword);

					/* 记录搜搜历史 开始 */

					// 最多8个历史搜索结果
					if (this.searchHistoryArr.length >= 8) {

						// 弹出一个数据
						this.searchHistoryArr.pop();
					}

					// 向前插入搜索历史
					this.searchHistoryArr.unshift(keyword);

					// 搜索历史放入Storage中
					this.setSearchHistoryArr(keyword);

					/* 记录搜搜历史 结束 */

					// 下一周期执行
					this.$nextTick(() => {

						// 请求搜索接口
						this.getLists(this.tabs, this.CALL_STATUS.INIT);
					});
				}
			},
      	
			/**
			 * 搜索异常
			 */
			exceptions() {
				
				// 提示
        		Toast("请输入要搜索的商品");

				// 设置未初始化过
				this.$set(this, 'initialized', false);
      		},
			
			/**
			 * 清除输入框事件监听
			 */
			clearInput() {
				
				if (this.debug) {
					console.log('clearInput');
				}
				
				// 清空列表
				this.$set(this, 'lists', []);
					
				// 初始化tabs对象
				this.setTabs();

				// 设置未初始化过
				this.$set(this, 'initialized', false);
			},

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

                // 处理搜索历史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.navSearchBar.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", []);
            },
			
            /**
             * 跳转商品详情
             * @param {Object} item [数据对象]
             */
            toDetail(item) {

                // 判断App内
                if (this.isCNLive.value) {

                    // 判断通用跳转函数是否存在
                    if (typeof this.$parent.gotoDetail === 'function') {

                        // 跳转参数
                        let params = {
                            type: '2',
                            to: item.id,
                            shop_type: '3'
                        };

                        // 通用跳转
                        this.$parent.gotoDetail(params, {
                            activityCode: this.activityCode ? this.activityCode : ''		// 添加页面渠道码
                        });
                    }
                } else {

                    // App外，唤起App
                    this.openApp();
                }
            },

            /**
             * 项目按钮事件
             * @param {Object} item [数据对象]
             */
            primary(item) {

                // 跳转商品详情
                this.toDetail(item);
            },

			/**
             * 后退
             */
            back() {

                // 判断是否有处理函数
                if (typeof this.$parent.back === 'function') {

                    // 后退
                    this.$parent.back();
                } else {

                    // 后退
                    window.history.go(-1);
                }
            }
		},
		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() {
			
		}
	}
</script>

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