play-video-app/pages/index/index.vue

<template>
	<view class="main">
		<view class="bg">
			<view class="search">
				<text>亚太视频</text>
				<u-search height="30" bgColor="#FFF" :showAction="false" placeholder="请输入剧名"
					searchIconColor="#000" v-model="keyword" @focus="toSearch"></u-search>
				
			</view>
			<view class="playlets">
				<view class="ranks">
					<u-tabs :list="tabs" @click="click" :activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-right: 15px; height: 34px;"></u-tabs>
				</view>
				<view class="rank_list">
					<view class="list-item" v-for="(item,index) in list" :key="index" @click="toPlay(item)">
						<view class="cover">
							<image class="cover_img" :src="item.thumbnail"></image>
							<view :class="`grade${index}`" class="grade">{{index+1}}</view>
							<!-- <view class="hot">
								<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '24rpx'}"></pv-icon>
								<text>12.8W</text>
							</view> -->
						</view>
						<view class="names">
							<text>{{item.name}}</text>
							<text class="ellipsis-2">{{item.description}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="play_types">
				<view class="type_item" v-for="(item,index) in typeLists" :key="index">
					<view class="title">{{item.name}}</view>
					<view class="watches">
						<view class="watch-item" v-for="(wai,ind) in item.list" :key="ind">
							<view class="cover">
								<image class="cover_img" src=""></image>
								<view class="uphot">
									<text>更新至12集</text>
									<view class="hot">
										<pv-icon name="icon-huomiao" color='#fff'
											:customStyle="{ fontSize: '26rpx'}"></pv-icon>
										<text>12.8W</text>
									</view>
								</view>
							</view>
							<view class="names">
								<text>小日子</text>
								<text>陈晓童瑶首搭守护小日子</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getServerShipCategoryList,getServerShipProgramPage,getServerShipVideoList
	} from '@/apis/index'
	export default {
		data() {
			return {
				keyword:'',
				tabs: [],
				list: [],
				typeLists: [
					// {
					// 	name: '都市逆袭',
					// 	list: [{
					// 			name: '小日子'
					// 		},
					// 		{
					// 			name: '永安梦'
					// 		},
					// 		{
					// 			name: '烈焰'
					// 		},
					// 		{
					// 			name: '目中无人'
					// 		},
					// 	]
					// },
					// {
					// 	name: '现代言情',
					// 	list: [{
					// 			name: '小日子'
					// 		},
					// 		{
					// 			name: '永安梦'
					// 		},
					// 		{
					// 			name: '烈焰'
					// 		},
					// 		{
					// 			name: '目中无人'
					// 		},
					// 	]
					// },
				]
			}
		},
		onLoad() {

		},
		methods: {
			// 跳转视频页面
			toPlay(item){
				uni.navigateTo({
					url:'/pages/play/index?id='+ item.id+'&data='+JSON.stringify(item),
				})
			},
			// 获取视频分类列表
			async getVideoList() {
				const res = await getServerShipCategoryList()
				this.tabs = res
				this.getVideoPage(res[0].id)
			},
			// 获取视频节目分页
			async getVideoPage(id) {
				let params = {
					orderByColumn: "",
					orderByAsc: true,
					pageIndex: 1,
					pageSize: 10,
					keyword: this.keyword,
					shipCategoryId: id,
				}
				const res = await getServerShipProgramPage(params)
				this.list = res.list
				console.log(res);
			},
			// 跳转搜索页
			toSearch(){
				console.log(8899);
				uni.navigateTo({
					url:'/pages/search/index'
				})
			}
			// async getList(id){
			// 	const res = await getServerShipVideoList(id)
			// 	console.log(res);
			// }
		},
		mounted() {
			this.getVideoList()
			// this.getVideoPage()
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		padding-bottom: var(--window-bottom);
		
		.bg{
			background: #3C7FFC;
			
		}
		.search {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			.search_accent{
				flex: 1;
			}
			text {
				color: #fff;
				font-weight: bold;
				margin-right: 44rpx;
			}
		}

		.playlets {
			background: linear-gradient(180deg, #FFF6DE 0%, #FFFFFF 100%);
			border-radius: 24rpx 24rpx 0 0;
			padding: 22rpx 36rpx;

			.ranks {
				margin-bottom: 20rpx;
			}

			.rank_list {
				display: flex;
				justify-content: space-between;
				.list-item {
					width: 216rpx;

					.cover {
						position: relative;

						.cover_img {
							width: 100%;
							height: 276rpx;
							border-radius: 16rpx;
							background: #3C7FFC;
						}

						.grade {
							text-align: center;
							line-height: 32rpx;
							width: 28rpx;
							height: 32rpx;
							border-radius: 8rpx;
							position: absolute;
							color: #713B03;
							font-size: 24rpx;
							font-weight: bold;
							top: 0;
							right: 0;
						}

						.grade0 {
							background: linear-gradient(90deg, #FFBB3E 0%, #FFCE1C 100%);
						}

						.grade1 {
							background: linear-gradient(90deg, #FFF2DA 0%, #FFDC5E 100%);
						}

						.grade2 {
							background: linear-gradient(90deg, #FFEBC6 0%, #FFF4CE 100%);
						}

						.hot {
							position: absolute;
							left: 12rpx;
							bottom: 8rpx;

							text {
								font-size: 24rpx;
								color: #fff;
								margin-left: 8rpx;
							}
						}
					}

					.names {
						margin-top: 35rpx;
						display: flex;
						flex-direction: column;

						text:nth-child(1) {
							color: #2A2D32;
							font-size: 28rpx;
							font-weight: 500;
							margin-bottom: 5rpx;
						}

						text:nth-child(2) {
							color: #636267;
							font-size: 24rpx;
							font-weight: 400;
						}
					}
				}
			}
		}

		.play_types {
			background: #fff;
			padding: 32rpx 36rpx 0;

			.type_item {
				.title {
					font-weight: bold;
					font-size: 36rpx;
					color: #2A2D32;
					margin-bottom: 28rpx;
				}

				.watches {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.watch-item {
						width: 336rpx;
						margin-bottom: 40rpx;

						.cover {
							position: relative;

							.cover_img {
								width: 100%;
								height: 216rpx;
								border-radius: 16rpx;
								background: #3C7FFC;
							}

							.uphot {
								padding: 12rpx;
								width: 100%;
								position: absolute;
								bottom: 0;
								left: 0;
								display: flex;
								justify-content: space-between;
								font-size: 24rpx;
								color: #FFFFFF;

								text {}

								.hot {}
							}
						}

						.names {
							margin-top: 20rpx;
							display: flex;
							flex-direction: column;

							text:nth-child(1) {
								color: #2A2D32;
								font-size: 28rpx;
								font-weight: 500;
							}

							text:nth-child(2) {
								color: #636267;
								font-size: 24rpx;
								font-weight: 400;
							}
						}
					}
				}
			}
		}
	}
</style>