huangjingfen/pro_v3.5.1_副本/view/uniapp/pages/discover/discoverSearch/index.vue

<template>
	<view :style="colorStyle">
		<view class="gradient-box">
			<view class="flex-between-center">
				<view class="search-box flex-y-center pl-24 pr-20">
					<text class="iconfont icon-ic_search fs-32 text--w111-999"></text>
					<input type="text" v-model="params.keyword" placeholder="请输入关键词" class="fs-26 ml-16 flex-1" />
					<text class="iconfont icon-ic_close2 fs-28 text--w111-999 pl-20" v-if="params.keyword" @tap="clearWord"></text>
				</view>
				<text class="fs-26 pl-24" @tap="getSearch">搜索</text>
			</view>
			<view class="flex-y-center">
				<scroll-view scroll-x="true" scroll-with-animation :scroll-into-view="intoindex" class="white-nowrap vertical-middle w-676 pl-30" show-scrollbar="false">
					<view class="inline-block mr-52">
						<view class="flex-y-center h-100 fs-28" :class="{ 'cate-active': cateActive == '' }" @tap="changeCate(-1, '')">全部</view>
					</view>
					<view class="inline-block mr-52" v-for="(item, index) in topicList" :key="index" :id="'sort' + index">
						<view class="flex-y-center h-100 fs-28" :class="{ 'cate-active': cateActive == item.id }" @tap="changeCate(index, item.id)">{{ item.name }}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="px-20" v-if="contentList.length">
			<waterfallsFlow :wfList="contentList" @onFlowLike="flowLike"></waterfallsFlow>
		</view>
		<view class="px-20" v-if="contentList.length == 0 && !loading">
			<emptyPage
				:title="params.keyword ? '无搜索结果,换个词试试吧' : '暂无内容，去看点别的吧～'"
				:src="params.keyword ? '/statics/images/noSearch.gif' : '/statics/images/empty-box.gif'"
			></emptyPage>
		</view>
		<home></home>
	</view>
</template>

<script>
import colors from "@/mixins/color";
import { communityListApi, getTopicApi } from "@/api/community.js";
import waterfallsFlow from "@/components/discoverWaterfall/WaterfallsFlow.vue";
import emptyPage from '@/components/emptyPage.vue';
export default {
	data() {
		return {
			keyword:'',
			cateActive:'',
			topicList:[],
			contentList:[],
			noMore:false,
			loading: false,
			intoindex:'',
			params:{
				page:1,
				limit:20,
				topic_id:'', //话题
				keyword:'',
				is_interest:0, //是否关注
			},
		};
	},
	components:{
		waterfallsFlow,
		emptyPage
	},
	mixins: [colors],
	provide() {
		return {
			flowLike: this.flowLike
		}
	},
	onPageScroll(object) {
		uni.$emit('scroll');
	},
	onLoad() {
		this.getTopic();
		this.getList();
	},
	methods:{
		clearWord(){
			this.params.keyword = ''
		},
		changeCate(index,id){
			this.cateActive = id;
			this.$nextTick(()=>{
				this.intoindex = 'sort' + index;
			})
			this.params.page = 1;
			this.params.topic_id = id;
			this.contentList = [];
			this.noMore = false;
			this.getList();
		},
		getSearch(){
			this.params.page = 1;
			this.contentList = [];
			this.noMore = false;
			this.getList();
		},
		getTopic(){
			getTopicApi().then(res=>{
				this.topicList = res.data;
			})
		},
		getList(){
			if (this.noMore) return;
			this.noMore = true;
			this.loading = true
			communityListApi(this.params).then(res=>{
				let list = res.data;
				let noMore = list.length < this.params.limit;
				this.contentList = this.contentList.concat(list);
				this.params.page++;
				this.noMore = noMore;
			}).finally(()=>{
				this.loading = false
			})
		},
		flowLike(data){
			let index = this.contentList.findIndex(item=> data.id == item.id);
			this.contentList[index].is_like = data.status;
			if(data.status == 1){
				this.contentList[index].like_num++;
			}else{
				this.contentList[index].like_num--;
			}
		},
	},
	onReachBottom() {
		this.getList()
	}
}
</script>

<style lang="scss">
.gradient-box {
	width: 750rpx;
	height: 182rpx;
	background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
	padding: 20rpx 30rpx 0;
	.search-box {
		width: 614rpx;
		height: 64rpx;
		background: #f3f3f3;
		border-radius: 32rpx;
	}
}
.cate-active {
	font-weight: 500;
	font-size: 34rpx;
	color: var(--view-theme);
	position: relative;
	&:after {
		content: '';
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 14rpx;
		width: 64rpx;
		height: 5rpx;
		background: var(--view-theme);
		border-radius: 4rpx;
	}
}
</style>