shop_uniapp/pages/goods_search/goods_search.vue

<template>
	<view class="goods-search flex-col">
		<view class="header-wrap">
			<view class="search">
				<u-search v-model="keyword" @focus="showHistory = true" :focus="showHistory" @search="onSearch" @clear="clearList"  @change="getShop"
					bg-color="#F4F4F4"></u-search>
			</view>
			<sort-nav v-model="sortConfig" v-show="!showHistory"></sort-nav>
		</view>
		
		<view v-show="showHistory" class="search-content bg-white">
			<scroll-view :scroll-y="true" style="height: 100%">
				<view v-if="hotList.length" class="search-words">
					<view class="title">热门搜索</view>
					<view class="words flex flex-wrap">
						<view v-for="(item, index) in hotList" :key="index"
							class="item br60  m-r-20 m-b-20 lighter sm line-1" @tap="onChangeKeyword(item)">{{item}}</view>
					</view>
				</view>
				<view v-if="historyList.length" class="search-words">
					<view class="title flex row-between">
						<view>历史搜索</view>
						<view class="xs muted m-r-20" style="padding: 10rpx 20rpx" @tap="clearSearchFun">清空</view>
					</view>
					<view class="words flex flex-wrap">
						<view v-for="(item, index) in historyList" :key="index"
							class="item br60  m-r-20 m-b-20 lighter sm line-1" @tap="onChangeKeyword(item)">{{item}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="content">
			<mescroll-uni  v-if="!isCate" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:up="upOption" :down="{auto: false}" :fixed="false">
				<view class="goods-list">
					<view v-show="sortConfig.goodsType == 'double'" class="double">
						<goods-list type="double" :list="goodsList" :price-type="price_type"></goods-list>
					</view>
					<view v-show="sortConfig.goodsType == 'one'" class="one">
						<goods-list :list="goodsList" type="one" :price-type="price_type"></goods-list>
					</view>
				</view>
			</mescroll-uni>
			<view class="list" v-if="isCate">
				<view class="search-block" v-for="(item, index) in list" :key="index">
					<view class="flex search-list" @click="toPage(item.id)">
						<u-icon name="search" size="24"></u-icon>
						<view class="m-l-10">{{item.name}}</view>
					</view>
				</view>
				<view v-if="list == ''" class="m-t-10 bold text-center">{{tip}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsList,
		getSearchpage,
		clearSearch,
		searchGoods
	} from '@/api/store';
	import {
		mapGetters
	} from 'vuex';
	import {
		loadingType
	} from '@/utils/type';
	import {
		getRect,
		trottle
	} from '@/utils/tools';

	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					auto: false,
					empty: {
						icon: `${this.$aliOSS}uniapp/goods_null.png`,
						tip: "暂无商品",
					}
				},
				keyword: '',
				status: loadingType.LOADING,
				page: 1,
				sortConfig: {
					goodsType: 'double',
					priceSort: '',
					saleSort: '',
				},
				goodsList: [],
				showHistory: false,
				hotList: [],
				historyList: [],
				price_type: 0,
				showList: false,
				list: [],
				tip: '',
				isCate: false
			};
		},

		watch: {
			keyword(value, old) {
				if (!value && !this.id) {
					this.showHistory = true
				}
			},
			showHistory(value) {
				if (value) {
					this.getSearchpageFun();
				}
			},
			'sortConfig.saleSort'() {
				this.onSearch()
			},
			'sortConfig.priceSort'() {
				this.onSearch()
			}
		},

		onLoad(options) {
			this.onSearch = trottle(this.onSearch, 500, this);
			this.init(options);
		},

		computed: {
			...mapGetters(['sysInfo'])
		},
		methods: {
			downCallback() {
				this.onRefresh()
			},
			upCallback(page) {
				let pageNum = page.num;
				let pageSize = page.size;
				let {
					goodsList,
					keyword,
					sortConfig: {
						priceSort,
						saleSort,
					}
				} = this;
				const params = {
					page_size: pageSize,
					page_no: pageNum,
					platform_cate_id: this.type == 1 ? this.id : '',
					brand_id: this.type == 0 ? this.id : '',
					keyword,
					sort_by_price: priceSort,
					sort_by_sales: saleSort,
					p_id: this.$store.getters.hasPid,
					set: this.$store.getters.hasSetId
				}
				getGoodsList(params).then(({
					data
				}) => {
					if (page.num == 1) this.goodsList = [];
					this.price_type = data.set_price_type;
					let curPageData = data.lists;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					this.goodsList = this.goodsList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			onChange(e) {
				this.keyword = e.value
			},

			clearSearchFun() {
				clearSearch().then(res => {
					if (res.code == 1) {
						this.getSearchpageFun();
					}
				});
			},
			init(option) {
				const {
					id,
					name,
					type
				} = this.$Route.query
				this.type = type
				if (id) {
					uni.setNavigationBarTitle({
						title: name
					});
					this.id = id;
					this.$nextTick(() => {
						this.onRefresh()
					})
				} else {
					uni.setNavigationBarTitle({
						title: '商品搜索'
					});
					this.showHistory = true
				}
			},
			getSearchpageFun() {
				getSearchpage().then(res => {
					if (res.code == 1) {
						let {
							history_lists,
							hot_lists
						} = res.data;
						this.hotList = hot_lists
						this.historyList = history_lists
					}
				});
			},
			onClear() {
				if (this.id) {
					this.onRefresh();
				}
			},
			onSearch() {
				this.$nextTick(() => {
					if (this.isCate) {
						searchGoods({shop_name: this.keyword}).then((res) => {
							if (res.code == 1) {
								this.list = res.data
								if (res.data == '') {
									this.tip = '没有搜索到相关商品'
								}
							}
							uni.hideLoading()
						})
					} else {
						this.onRefresh()
					}
				})
			},
			onRefresh() {
				this.goodsList = []
				this.mescroll.resetUpScroll();
			},

			onChangeKeyword(item) {
				this.keyword = item
				this.showHistory = false
				this.onRefresh();
			},
			
			clearList() {
				this.showList = false
			},
			
			getShop(e) {
				// TODO 搜索展现出商品列表, 暂时隐藏  u-searh @change="getShop"
				let shop_name = e
				uni.showLoading({
					title: '搜索中',
					mask: true
				})
				this.isCate = true
				setTimeout(() => {
					searchGoods({shop_name}).then((res) => {
						if (res.code == 1) {
							this.list = res.data
							if (res.data == '') {
								this.tip = '没有搜索到相关商品'
							}
						}
						uni.hideLoading()
					})
					uni.hideLoading()
				}, 200)
			},
			
			toPage(id) {
				this.showList = false
				uni.navigateTo({
					url: '/pages/goods_details/goods_details?id=' + id
				})
			}
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		padding: 0;
	}
	.goods-search {
		height: 100%;
		position: relative;
		.header-wrap {
			position: relative;
			z-index: 999;
			.search {
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.03);
				position: relative;
				z-index: 1;
			}
		}
		.search-content {
			position: absolute;
			width: 100%;
			height: 100%;
			padding-top: 100rpx;
			z-index: 100;
			.search-words {
				padding-left: 24rpx;
				padding-bottom: 20rpx;
			
				.title {
					padding: 26rpx 0;
				}
			
				.words {
					.item {
						line-height: 52rpx;
						height: 52rpx;
						padding: 0 24rpx;
						background-color: #F5F5F5;
					}
				}
			}
		}

		.content {
			flex: 1;
			min-height: 0;

			.goods-list {
				overflow: hidden;
			}
		}
		
		.list {
			width: 100%;
			height: 100%;
			background-color: #fff;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 101;
			margin-top: 100rpx;
			overflow: auto;
			
			.search-list {
				margin: 0 40rpx;
				padding: 24rpx 0 20rpx;
				position: relative;
				
				view {
					width: 90%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			
			.search-list::after {
				content: '';
				border-bottom: 1px solid rgb(222, 222, 222);
				position: absolute;
				width: 100%;
				margin: 60rpx 0;
				top: 20rpx;
			}
		}
	}
</style>