backend-Tv/pages/search/search.vue

<template>
	<view>
		
		<unitv-page id="searchPage" :show="true" ref="searchPage" @back="pageBack">
			<unitv-zone id="zone1" class="zone1" :autoFous="true" down="zone3"  :item="0" :values="item1" :column="item1.length">
				<unitv-item v-for="(a,index) in item1" :item="index" :key="index" class="item">
					<input type="text" v-model="searchValue" confirm-type="search" @confirm="searchMovie" placeholder="请输入影视名称搜索" />
				</unitv-item>
			</unitv-zone>
			<unitv-zone id="zone3" class="zone3" up="zone1" :values="item3" :column="item3Length">
				<unitv-item v-for="(a,index) in item3" :item="index" :key="index" class="item" @click="clickPlayer(a)">
					<image :src="a.cover" :lazy-load="true" mode="aspectFit"></image>
				</unitv-item>
			</unitv-zone>
		</unitv-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:"",
				item1:[1],
				item3:[],
				item3Length:0
			}
		},
		onBackPress(options) {
			this.$refs.searchPage.evtBack();
			return true;
		},
		methods: {
			pageBack(e){
				console.log("按了返回");
				uni.reLaunch({
					url: '../index/index'
				});
				return true;
			},
			searchMovie(e){
				//console.log("searchMovie", this.searchValue, e);
				if(this.searchValue == '请输入影视名称' 
						|| this.searchValue == undefined 
						|| this.searchValue == ''
						|| this.searchValue == ' '
						|| this.searchValue == '  '){
					uni.showToast({
						title: '请输入影视名称后，再检索电影',
						icon:'none',
						duration: 2000
					});	
					return;
				}
				
				this.$api.post('/platCupfox/searchMovie?searchValue=' + this.searchValue, null).then(res => {
					console.log(res)
					this.item3Length = 1;
					this.item3=[res];
				})
			},
			delItem(zoneSource, index){
				// @del="delItem('zone1', index)"
				if(zoneSource == 'zone1' && index == 1){
					if(this.searchValue != null && this.searchValue != undefined && this.searchValue.length > 0){
						this.searchValue = this.searchValue.substr(0, this.searchValue.length - 1); 
					}
				}
			},
			clickPlayer(data){
				if(data.movieFlag == '1'){
					uni.navigateTo({
						url:"../player/player?id=" + data.id
					})	
				} else {
					uni.showToast({
					    title: '当前影视未解析到视频资源，无法播放',
						icon:'none',
					    duration: 2000
					});
				}
				
			}
		}
	}
</script>


<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
	}

	.zone3 {
		height: 165rpx;
		line-height: 165rpx;
		width: 100%;
		display: flex;
		white-space: nowrap;
		flex-wrap:wrap;
		margin-top: 10rpx;
		align-items: center;
		/* border: 1px solid red; */
		.item {
			width: 14%;
			/* border: 1px solid red; */
			padding: 0px 4rpx;
			margin: 5rpx 6rpx;
			text-align: center;
			display: inline-block;
			height: 165rpx;
			line-height: 165rpx;
			border-radius: 5rpx;
			background-color: #555555;
			image{
				position:relative;
				z-index: 8000;
				/* border: 1px solid green; */
				width: 100%;
				height: 100%;
			}
		}
		.item-hover{
			transform: scale(1.04);
			box-shadow: 2px 4px 6px #555555;
			animation: glow 1500ms ease-out infinite alternate;
			-webkit-transform: scale(1.04);
			-webkit-box-shadow: 2px 4px 6px #555555;
			-webkit-animation: glow 1500ms ease-out infinite alternate;
			zoom: 1.05;
			color: #000000;
			background-color: #FFFFFF;
		}
		.item-active{
			zoom:0;
		}
		
		.film-info{
			position: relative;
			z-index: 9000;
			display: inline-block;
			text-align: center;
			border: 1px solid gold;
			height: 165rpx;
			line-height: 165rpx;
			width: 100%;
			left: 0px;
			top: 0px;
			.film-title{
				position: relative;
				background-color: #FFFFFF;
				height: 70rpx;
				line-height: 70rpx;
				z-index: 9000;
				opcity:0.3;
			}
		}
		
	}
	
	.zone1 {
		height: 30rpx;
		line-height: 30rpx;
		width: 98%;
		display: flex;
		white-space: nowrap;
		margin-top: 40rpx;
		align-items: center;
		border: 1px solid red;
		.item {
			margin: -20rpx 10rpx;
			width: 60%;
			border: 1px solid green;
			text-align: center;
			display: inline-block;
			height: 22rpx;
			line-height: 22rpx;
			border-radius: 5rpx;
		}
		.item-hover{
			transform: scale(1.04);
			box-shadow: 2px 4px 6px #555555;
			animation: glow 1500ms ease-out infinite alternate;
			-webkit-transform: scale(1.04);
			-webkit-box-shadow: 2px 4px 6px #555555;
			-webkit-animation: glow 1500ms ease-out infinite alternate;
			zoom: 1.05;
			background: #FFFFFF;
			color: #000000;
		}
		.item-active{
			transform: scale(1.04);
			box-shadow: 2px 4px 6px #555555;
			animation: glow 1500ms ease-out infinite alternate;
			-webkit-transform: scale(1.04);
			-webkit-box-shadow: 2px 4px 6px #555555;
			-webkit-animation: glow 1500ms ease-out infinite alternate;
			background: #FFFFFF;
			zoom: 1;
			color: #000000;
		}
	}

</style>