ec.uniapp-master/pages/shop/searchList.vue

<template>
	<view>
		<lf-nav title="搜索" :showIcon="true" @changeHeight="e => nav_height = e"></lf-nav>
		<view class="head">
			<u-search placeholder="请输入商品名或商户名" 
				action-text="取消" 
				v-model="value" 
				@custom="customClick"
				@search="search">
			</u-search>
		</view>
		<view>
			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="false" :current="tab_current" @change="tabChange"></u-tabs>
		</view>
		<swiper :current="tab_current" @change="swiperChange" :style="{height: autoHeight}">
			<swiper-item v-for="(tab_item, tab_index) in tab_list" :key="tab_index">
				<scroll-view :scroll-y="true" :style="{height: autoHeight}" @scrolltolower="scrolltolower">
					<view v-if="tab_index == 0">
						<shop-list :list="goods_list" ref="searchWaterfall"></shop-list>
						<!-- <lf-nocontent src="/static/images/empty.png" v-if="goods_list.length <= 0"></lf-nocontent> -->
					</view>
					<view class="scroll-content" v-else>
						<view class="shop-box" 
							v-for="(item, index) in brand_list" :key="index"
							@click="$url('/pages/shop/shopdetail?id='+ item.id)">
							<image class="shop-img" :src="item.logo"></image>
							<view class="shop-info">
								<view class="lf-line-1">{{ item.name }}</view>
								<view>{{ item.category }}</view>
							</view>
						</view>
						<lf-nocontent src="/static/images/empty.png" v-if="brand_list.length <= 0"></lf-nocontent>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import shopList from '@/components/shopList/shopList.vue';
	export default {
		components: {
			shopList
		},
		data() {
			return {
				value: '',
				tab_current: 0,
				tab_list: [{
					name: '商品'
				},{
					name: '商户'
				}],
				scrollH: 0,
				nav_height: 0,
				goods_list: [],
				brand_list: [],
				page: 1,
				isPage: true
			}
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 124rpx - 86rpx)`;
			}
		},
		onLoad(options){
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
			this.value = options.value || '';
			if(options.value){
				this.getSearchGoodsList(options.value);
				this.getSearchBrandList(options.value);
			}
		},
		methods: {
			// 点击取消，返回上一个页面
			customClick(){
				this.$toBack();
			},
			// 开始搜索
			search(value){
				if(!value || !value.trim()) return this.$msg('搜索内容不能为空');
				// 重置页面请求值
				this.page = 1;
				this.isPage = true;
				// this.$refs.searchWaterfall[0].clear();
				// 执行上一个页面的保存搜索历史
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2]; // 上个页面
				if(beforePage){
					beforePage.$vm.updateHistory(value).then(() => {
						beforePage.$vm.setHistorySearch();
					})
					this.getSearchGoodsList(value);
					this.getSearchBrandList(value);
				}else{
					this.$msg('页面路径出错，当前搜索值将不被记录搜索历史').then(() => {
						this.getSearchGoodsList(value);
						this.getSearchBrandList(value);
					})
				}
			},
			// 获取搜索商品列表
			getSearchGoodsList(value){
				uni.showLoading({
					title: '正在搜索中'
				})
				this.$http.get({
					api: 'api/store/list',
					data: {
						keyword: value,
						page: this.page
					}
				}).then(res => {
					uni.hideLoading();
					if(res.data.status){
						let goods = res.data.data || [];
						let pagination = res.data.meta.pagination;
						let isPage = pagination.current_page != pagination.total_pages;
						this.isPage = isPage;
						if(goods.length <= 0){
							this.tab_list[0].name = `商品(0)`;
							return;
						}
						
						let list = goods.map(item => {
							return {
								id: item.id,
								original_price: item.market_price,
								picture: item.img,
								pictures: [item.img],
								price: item.sell_price,
								sale: item.sale_count,
								title: item.name
							}
						})
						if(this.page == 1){
							this.goods_list = list;
						}else{
							this.goods_list.push(...list);
						}
						console.log(this.goods_list)
						this.tab_list[0].name = `商品(${this.goods_list.length})`;
					}else{
						this.$msg(res.data.message || '服务器错误，请稍后再试');
					}
				}).catch(err => uni.hideLoading());
			},
			// 获取搜索品牌列表
			getSearchBrandList(value){
				this.$http.get({
					api: 'api/brand',
					data: {
						name: value
					}
				}).then(res => {
					if(res.data.status){
						let list = res.data.data.list || [];
						this.brand_list = list;
						this.tab_list[1].name = `商户(${list.length})`;
					}else{
						this.$msg(res.data.message || '服务器错误，请稍后再试');
					}
				})
			},
			// 切换tab
			tabChange(event){
				this.tab_current = event;
			},
			// 切换swiper
			swiperChange(event){
				this.tab_current = event.detail.current;
			},
			// 商品scroll滚动到底部
			scrolltolower(){
				// 只做商品加载下一页，品牌不做
				if(this.tab_current == 0){
					if(this.isPage){
						this.page++;
						this.getSearchGoodsList(this.value);
					}else{
						this.$msg('没有更多啦~');
					}
				}else{
					this.$msg('没有更多啦~');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		padding: 30rpx 32rpx;
	}
	.scroll-content{
		padding: 30rpx 32rpx;
	}
	.shop-box{
		width: 100%;
		height: 100rpx;
		display: flex;
		&:nth-child(n+2){
			margin-top: 60rpx;
		}
		.shop-img{
			width: 100rpx;
			height: 100rpx;
			// background-color: #EEEEEE;
			border-radius: 5rpx;
			margin-right: 15rpx;
		}
		.shop-info{
			width: 570rpx;
			height: 100rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			&>view:nth-child(1){
				font-size: 36rpx;
				color: #222222;
				font-weight: bold;
			}
			&>view:nth-child(2){
				font-size: 24rpx;
				color: #777777;
			}
		}
	}
	
	// tabs 样式修改
	/deep/.u-scroll-box {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	/deep/.u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 80rpx!important;
		position: absolute;
		left: 0;
		bottom: -12rpx;
	}
	
	/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 56rpx!important;
		position: absolute;
		height: 5rpx!important;
		left: 8rpx;
		bottom: -4rpx;
	}
	
	/deep/ .u-tab-item {
		font-size: 28rpx!important;
	}
</style>