yixiang/pageA/search.vue

<template>
	<view class="content">
		<view class="top2">
			<u-navbar title=" " placeholder autoBack >
				<view class="u-nav-slot" slot="right">
					<u-search shape="square" v-model="keyword" :clearabled="true" :showAction="false" @search="tosearch" @clear="show = true"></u-search>
					<!-- <u-input v-model="keyword" prefixIcon="search" border="none" clearable></u-input> -->
				</view>
			</u-navbar>
		</view>
		<view class="center" v-if="show">
			<view class="title">热门话题</view>
			<view class="hot-list hflex acenter fwrap">
				<view class="hot-item" v-for="(item,index) in hotlist" :key="index">{{item.title}}</view>
			</view>
		</view>
		<view class="center" v-else>
			<view class="tabs hflex acenter">
				<u-sticky bgColor="#fff" offset-top="88" customNavHeight="44" zIndex="99">
				    <u-tabs :list="tabs" lineWidth="0" @click="tochangetabs" :scrollable="true" :current="current"
				     :inactiveStyle="{color: '#666666',fontSize: '30rpx',}"
				     :activeStyle="{color: '#00B0B0',fontWeight: 'bold',fontSize: '32rpx',}"></u-tabs>
				</u-sticky>
				
			</view>
			<swiper class="index-swiper" :circular="false" :autoplay="false" :current="current" @change="swipertotabs">
				<swiper-item>
					<view class="swiper-item">
						<view class="top">
							<view class="vflex" v-if="video_list.length>0">
								<view class="hflex acenter jbetween">
									<view class="title">精选视频</view>
									<view class="more-text">查看更多</view>
								</view>
								<view class="videos hflex acenter" >
									<video-list :type="video" :item="item" v-for="(item,index) in video_list" :key="index" @toinfo="toinfo(item)"></video-list>
								</view>
							</view>
							<view class="vflex" v-if="zixun_list.length>0">
								<view class="title">精选资讯</view>
								<view class="vflex">
									<wenzhang-info :type="info" :data="item" v-for="(item,index) in zixun_list.slice(0,3)" :key="index" @toinfo="toinfo(item)"></wenzhang-info>
									<view class="more-btn">查看更多资讯</view>
								</view>
							</view>
							<view class="vflex" v-if="wenzhang_list.length>0">
								<view class="hflex acenter jbetween">
									<view class="title">精选文章</view>
									<view class="more-text">查看更多</view>
								</view>
								<wenzhang-info :type="article" :data="item" v-for="(item,index) in wenzhang_list.slice(0,3)" :key="index" @toinfo="toinfo(item)"></wenzhang-info>
							</view>
							<view class="vflex" v-if="user_list.length>0">
								<view class="hflex acenter jbetween">
									<view class="title">用户</view>
									<view class="more-text">查看更多</view>
								</view>
								<view class="user-list">
									<u-cell-group :border="false">
										<u-cell size="large" :border="false" isLink v-for="(item,index) in user_list" :key="index">
											<view class="user hflex acenter" slot="title">
												<image :src="item.avatar" mode="aspectFill" @click="touser(item)"></image>
												<view class="vflex name">
													<text>{{item.username}}</text>
													<text>{{item.introduction}}</text>
												</view>
											</view>
										</u-cell>
									</u-cell-group>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
				<!-- 资讯 -->
				<swiper-item>
					<view class="swiper-item">
						<view class="list1" v-if="list.length>0">
							<wenzhangInfo :type="info" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></wenzhangInfo>
						</view>
						<view v-else class="empty">
							<u-empty mode="data"></u-empty>
						</view>
					</view>
				</swiper-item>
				<!-- 文章 -->
				<swiper-item>
					<view class="swiper-item">
						<view class="list1" v-if="list.length>0">
							<wenzhangInfo :type="article" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></wenzhangInfo>
						</view>
						<view v-else class="empty">
							<u-empty mode="data"></u-empty>
						</view>
					</view>
				</swiper-item>
				<!-- 视频 -->
				<swiper-item>
					<view class="swiper-item">
						<view class="list1" v-if="list.length>0">
							<wenzhangInfo :type="video" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></wenzhangInfo>
						</view>
						<view v-else class="empty">
							<u-empty mode="data"></u-empty>
						</view>
					</view>
				</swiper-item>
				<!-- 论坛 -->
				<swiper-item>
					<view class="swiper-item" v-if="list.length>0">
						<list-info :type="post" :data="item" v-for="(item,index) in list" :key="index" @toinfo="toinfo(item)"></list-info>
					</view>
					<view v-else class="empty">
						<u-empty mode="data"></u-empty>
					</view>
				</swiper-item>
				<!-- 用户 -->
				<swiper-item>
					<view class="swiper-item">
						<view class="user-list" v-if="list.length>0">
							<u-cell-group :border="false">
								<u-cell size="large" :border="false" isLink v-for="(item,index) in list" :key="index">
									<view class="user hflex acenter" slot="title">
										<image :src="item.avatar" mode="aspectFill" @click="touser(item)"></image>
										<view class="vflex name">
											<text>{{item.username}}</text>
											<text>{{item.introduction}}</text>
										</view>
									</view>
								</u-cell>
							</u-cell-group>
						</view>
						<view v-else class="empty">
							<u-empty mode="data"></u-empty>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import listInfo from '@/components/list-info/index.vue'
	import wenzhangInfo from '@/components/wenzhang-info/index.vue'
	import $api from '@/static/js/api.js'
	export default {
		components: {
			listInfo,
			wenzhangInfo,
		},
		data() {
			return {
				keyword: '',
				hotlist: [],
				tabs: [
					{
						id: 'all',
						name: '综合'
					},
					{
						id: 'info',
						name: '资讯'
					},
					{
						id: 'article',
						name: '文章'
					},
					{
						id: 'video',
						name: '视频'
					},
					{
						id: 'post',
						name: '论坛'
					},
					{
						id: 'user',
						name: '用户'
					},
				],
				scrollable: false,
				current: 0,
				list: [],
				video_list: [],
				wenzhang_list: [],
				zixun_list:[],
				user_list: [],
				page: 1,
				last_page: 1,
				show: true
			}
		},
		onLoad() {
			this.gethot()
		},
		onShow() {
			
		},
		onPullDownRefresh() {
			
		},
		onReachBottom() {
			if(this.page == this.last_page) {
				uni.$u.toast('已经到底了')
				return
			} else {
				this.page++
				this.tosearch()
			}
		},
		methods: {
			touser(item) {
				uni.navigateTo({
					url: '/pageC/otherInfo?id=' + item.id
				})
			},
			tosearch() {
				var _this = this
				_this.show = false
				$api.req({
					url: 'summary',
					method: 'GET',
					data: {
						page: _this.page,
						limit: 10,
						is_page: _this.current != 0 ? 1 : 0,
						source_type: _this.current != 0 ? _this.tabs[_this.current].id : '',
						type: _this.current == 0 ? 'group' : 'single',
						title: _this.keyword,
					}
				}, function(res) {
					if(res.code == 10000) {
						if(_this.current == 0) {
							_this.wenzhang_list = res.data.article
							_this.zixun_list = res.data.info
							_this.user_list = res.data.user
							_this.video_list = res.data.video
						} else {
							_this.list = _this.list.concat(res.data.list)
							_this.last_page = res.data.last_page
						}
						
					}
				})
			},
			/* 滑动切换tabs */
			swipertotabs(e) {
				this.current = e.detail.current
				this.page = 1
				this.last_page = 1
				this.list = []
				this.video_list = []
				this.wenzhang_list = []
				this.zixun_list = []
				this.user_list = []
				this.tosearch()
			},
			/* 点击切换tabs */
			tochangetabs(item) {
				console.log(item);
				this.current = item.index
			},
			gethot() {
				var _this = this
				$api.req({
					url: 'topic',
					method: 'GET',
					data: {
						limit:6,
						is_page: 0,
						is_recommend: 1
					}
				}, function(res) {
					if(res.code == 10000) {
						_this.hotlist = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content::v-deep {
		background: #FFFFFF;
		padding: 36rpx 24rpx;
		.center {
			.top {
				padding: 20rpx 28rpx 24rpx;
				margin-bottom: 20rpx;
				background: #fff;
				.videos {
					width: 100%;
					overflow: auto;
					// white-space: nowrap;
				}
				.title {
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					padding: 24rpx 0;
				}
				.more-btn {
					width: 100%;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
					background: #F5F5F5;
					border-radius: 12rpx;
					padding: 22rpx 0;
					text-align: center;
				}
				.more-text {
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
				.circle-item {
					// width: 100%;
					background: #F1F4F4;
					border-radius: 12rpx;
					padding: 26rpx 0 26rpx 36rpx;
					margin: 0 0 20rpx;
					.circle-img {
						width: 40rpx;
						height: 40rpx;
					}
					.circle-text {
						font-size: 28rpx;
						font-family: AppleColorEmoji;
						color: #666666;
					}
				}
			}
			.list1 {
				.list-title {
					width: 100%;
					background: #fff;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #333333;
					padding: 32rpx 0 20rpx 28rpx;
				}
			}
			.tabs {
				position: fixed;
				top: 144rpx;
				width: 100%;
				padding: 28rpx;
				background: #fff;
				z-index: 9;
				border-bottom: 1px solid #eee;
				.u-tabs__wrapper__nav__item {
					padding: 0 66rpx 0 0 !important;
				}
			}
			.index-swiper {
				padding: 144rpx 0 0;
				min-height: calc(100vh - 88rpx);
				height: 1rpx;
				.swiper-item {
					height: 100%;
					overflow: auto;
					.user-list {
						.user {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}
						}
						.name {
							text:first-child {
								font-size: 28rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								color: #333333;
							}
							text:last-child {
								font-size: 22rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #999999;
								padding-top: 8rpx;
							}
						}
					}
				}
			}
			// padding-top: 36rpx;
			.title {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
				padding-bottom: 28rpx;
			}
			.hot-list {
				width: 100%;
				.hot-item {
					background: #F5F5F5;
					border-radius: 8rpx;
					box-sizing: border-box;
					padding: 10rpx 20rpx;
					margin: 0 20rpx 24rpx 0;
				}
			}
		}
		.top2 {
			.u-nav-slot {
				width: 642rpx;
				.u-search {
					width: 642rpx;
					height: 64rpx;
					background: #F5F5F5;
					border-radius: 12rpx;
					padding: 0 20rpx !important;
					box-sizing: border-box;
				}
			}
		}
	}
</style>