onecric_h5/pages/Live/search.vue

<!-- 搜索 -->
<template>
	<view class="" style="overflow: hidden;">
		<view class="select-head">
			<u-navbar leftText="" bgColor="transparent" leftIconColor="#fff" :titleStyle="{color:'#fff'}" :fixed="false"
				leftIconSize="48" :autoBack="true">
				<view class="navBar-search flex" slot="center">
					<u--input :placeholder="$t('live.serch')" 
						prefixIcon="search" 
						color="#333"
						border="none" 
						v-model="value"
						fontSize="28rpx"
						:customStyle="{borderRadius:'50px',padding:'4px 12px',background:'#F5F5F5'}"
						prefixIconStyle="font-size: 30px;color:#999"></u--input>
				</view>
				<view class="flex size28 cfff" slot="right">
					<view class="" @click="submit()">
						{{$t('live.searchbtn')}}
					</view>
					<!-- <navigator url="" open-type="navigateBack">
						Cancel
					</navigator> -->
				</view>
			</u-navbar>
		</view>
		<view class="main">
			<u-row justify="space-between" class="mg-tp42">
				<text class="size32 c3 Bold">{{$t('live.Historytyps')}}</text>
				<view class="flex" @click="setEmpty()">
					<image src="../../static/image/live/delete.png" mode="aspectFit" class="delete-icon mg-rt8"></image>
					<text class="szie24 c6">{{$t('live.Emptybtn')}}</text>
				</view>
			</u-row>
			<view class="list mg-tp26">
				<!-- :class="{actives:searchHistory.indexOf(item) !== -1}" -->
				<view class="list-item" v-for="(item,index) in searchHistory" :key="index" @click="submit(1,item)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="search-title">
			<!-- Related Live -->
			{{ $t('live.lab41') }}
		</view>
		<view class="detail-video-list flex">
			<view class="detail-video-li" v-for="(item,index) in list" :key="index" @click="$toUrl(`./live-detail?id=${item.live_id}&ID=${item.id}`)">
				<image class="detail-video-li-logo" :src="item.thumb" mode="aspectFill"></image>
				<view class="detail-video-content ">
					<view class="detail-video-title text-clamp2">
						{{item.title}}
					</view>
					<view class="detail-video-right flex">
						<image class="detail-video-content-logo" :src="item.avatar" mode="aspectFill"></image>
						<view class="detail-video-info flex">
							<text  class="text-clamp">{{item.user_nickname}}</text>
							<image src="/static/images/competition/detail-hot.png" mode=""></image>
							<!-- <view>{{item.heat}}</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 新闻资讯 -->
		<view class="search-title">
			<!-- Related Headlines -->
			{{ $t('live.lab42') }}
		</view>
		<view class="detail-article" v-if="obj.headlinesList.length != 0">
			<view class="detail-article-li flex" @click="$toUrl('../News/news-detail?id=' + item.id)" v-for="(item,index) in obj.headlinesList" :key="index">
				<!-- <view class="text-clamp2">
					{{item.title}}
					
				</view> -->
				<view class="list-li-left">
					<view class="list-li-left-nav text-clamp2">{{item.title}}</view>
					<view class="list-li-left-bot flex-start">
						<!-- <text :style="{color:index == 0?'#CC374A':'#999'}">置顶</text> -->
						<text style="color:#CC374A;width: 90rpx;" v-if="item.is_top == 1">Top</text>
						<view class="flex-start"  style="width: 90rpx;" v-if="item.comment_count != 0">
							<image src="/static/image/news/topic11.png" mode="aspectFill"></image>
							<text>{{item.comment_count}}</text>
						</view>
						<text>{{item.addtime}}</text>
					</view>
				</view>
				
				<u--image :showLoading="true" class="list-li-logo" radius="12" :src="item.img" width="240rpx" height="136rpx"></u--image>
			</view>
		</view>
		
		<!-- 圈子 -->
		<view class="search-title">
			<!-- Related Posts -->
			{{ $t('live.lab43') }}
		</view>
		<view class="u-demo-block__content" v-if="obj.circleList.length != 0">
			<view class="album" @click="$toUrl('../News/community-detail?id=' + item.id)" v-for="(item,index) in obj.circleList" :key="index">
				<view class="album_top flex-start">
					<image class="logo" :src="item.avatar" mode=""></image>
					<view class="">
						<u--text :text="item.user_nickname" bold size="32"></u--text>
						<u--text margin="6px 0 0 0" color="#999" size="26" :text="item.addtime"></u--text>
					</view>
				</view>
				<!-- <view class="nav font28 text-clamp3" :ref="'text'+index" :style="{'-webkit-line-clamp':lunIndex == index?'initial':3}">
					{{item.title}}
				</view> -->
				<mote-lines-divide :line="3" @click.stop="" :expandText="$t('news.full')" :foldHint="$t('news.collapsed')">
				        {{item.title}}
				</mote-lines-divide>
				<!-- <view class="more" :style="{display:getLength(index)?'none':''}" @click.stop="setLunIndex(index)">
					Full text
				</view> -->
				<!-- <view class="album__content">
					<u-album multipleSize="200" space="16" :urls="item.img"></u-album>
				</view> -->
				<view class="album__content" v-if="item.is_flie_type == 0">
					<u-album multipleSize="200" space="16" :urls="item.img"></u-album>
				</view>
				<view class="album__content" v-else >
					<image v-if="item.video[0]" :src="item.video[0].img+'?vframe/jpg/offset/0'" style="width: 100%;" mode=""></image>
					<image class="play" src="/static/image/match/play.png" mode=""></image>
				</view>
				
				<view class="flex tabbar">
					<view class="">
						<image src="/static/image/news/topic2.png" mode=""></image>
						<u--text color="#999" size="24" :text="item.favorites"></u--text>
					</view>
					<view class="">
						<image src="/static/image/news/topic7.png" mode=""></image>
						<u--text color="#999" size="24" :text="item.comment"></u--text>
					</view>
					<view class="">
						<image src="/static/image/news/topic6.png" mode=""></image>
						<u--text color="#999" size="24" :text="item.click"></u--text>
					</view>
				</view>
				
			</view>
		</view>
		
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:'',
				list:[],
				obj:{
					circleList:[],
					headlinesList:[]
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			submit(type,item) {
				if(type == 1) {
					this.value = item
				}
				uni.$u.http.get('/api/Search/index',{params:{name:this.value}}).then(res=>{
					this.obj = res;
					this.list = res.liveList;
					if(type != 1) {
						let history = this.searchHistory
						history.push(this.value)
						this.$common.set('searchHistory',history)
						this.value = ''
					}
				}).catch(res=>{})
				
				
			},
			setEmpty() {
				this.searchHistory = []
				
			}
		},
		computed: {
			info() {
				return this.$store.state.info
			},
			isLogin() {
				return this.$store.state.isLogin
			},
			searchHistory: {
				get() {
					return this.$common.get('searchHistory') || []
				},
				set(val) {
					console.log(val);
					return this.$common.del('searchHistory')
				}
				
			}
			
		},
		
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F3F3F7;
	}
	.search-title {
		font-weight: bold;
		padding: 20rpx;
	}
	
	.detail-video-list {
		flex-wrap: wrap;
		margin: 0 24rpx;
	}
	.detail-video-li {
		overflow: hidden;
		margin-top: 20rpx;
		
		width: calc(50% - 9rpx);
		border-radius: 12rpx;
		background-color: white;
	
		.detail-video-li-logo {
			width: 100%;
			height: 176rpx;
			display: block;
		}
	
		.detail-video-content {
			padding: 16rpx;
		
			.detail-video-content-logo {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}
		
			.detail-video-title {
				width: 99%;
				height: 80rpx;
				color: #333;
				font-size: 28rpx;
			}
		}
		
		.detail-video-info {
			font-size: 24rpx;
			flex: 1;
			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		
			text {
				flex: 1;
				width: 100rpx;
				color: #9193B4;
		
			}
		
			view {
				
				color: #999;
			}
		}
	}
	
	.select-head {
		position: sticky;
		top: 0;
		z-index: 99;
		background-color: $color1;

		.navBar-search {
			width: 70vw;
			padding: 18rpx 24rpx;
			margin-left: -32rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 24rpx;
			}
		}

		.select-tab {
			padding: 0 28rpx;
			margin-top: 20rpx;
		}
	}

	.main {
		padding: 0 24rpx;

		.delete-icon {
			width: 24rpx;
			height: 24rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;

			.list-item {
				text-align: center;
				line-height: 52rpx;
				// width: 124rpx;
				padding: 4rpx 10rpx;
				height: 52rpx;
				margin-bottom: 20rpx;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2px solid #ccc;
				color: #333;
				margin-right: 22rpx;
			}

			.actives {
				border: 2rpx solid #DC3C23;
				color: #DC3C23;
			}
		}
	}
	.detail-video-right {
		flex: 1;
		min-width: 100px;
	}
	
	.detail-article {
		margin: 24rpx 24rpx;
		padding: 0 24rpx;
		// border-top: 20rpx solid #f7f7f7;
		// padding-bottom: 120rpx;
		background-color: white;
		.list-li {
		
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F0F0F0;
		}
		.detail-article-title {
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			padding-top: 32rpx;
			
		}
		.detail-article-li {
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F0F0F0;
			.list-li-left {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				height: 136rpx;
			
				image {
					width: 28rpx;
					height: 24rpx;
					margin-right: 8rpx;
				}
			
				.list-li-left-nav {
					color: #333;
					font-size: 32rpx;
					align-self: flex-start;
				}
			}
			
			.list-li-left-bot {
				width: 95%;
				font-size: 24rpx;
				// margin: 0 auto;
				margin-left: 20rpx;
				align-self: flex-end;
			
				text {
					color: #999;
					// margin-right: 32rpx;
				}
			
				view {
					text {
						color: #999;
					}
				}
			}
			.list-li-logo {
			
				width: 242rpx;
				height: 136rpx;
				margin-left: 32rpx;
				border-radius: 12rpx;
			}
		}
	}

	/* 圈子 */
	.album {
		margin-top: 20rpx;
		padding: 32rpx 24rpx;
		border-radius: 12rpx;
		background-color: white;
		.logo {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.nav {
			padding-top: 20rpx;
		}
		.album__content {
			position: relative;
			margin-top: 30rpx;
			image {
				border-radius: 10rpx;
			}
			.play {
				position: absolute;
				top: 40%;
				left: 50%;
				margin-left: -60rpx;
				width: 80rpx;
				height: 80rpx;
				
			}
		}
		.tabbar {
			margin-top: 22rpx;
			padding: 0 22rpx;
			image {
				width: 48rpx;
				height: 48rpx;
			}
			view {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}
		}
	}
</style>