pay-video-applet-uniapp-24-8-22/pages/index/index.vue

<template>
	<view class="content">
		
		<view class="top">
			<view class="title">
				<view class="">
					首页
				</view>
				<view class="">
					北京
					<uv-icon 
					name="arrow-down" 
					color="#fff"></uv-icon>
				</view>
			</view>
			
			<view class="search">
				<view class="icon">
					<uv-icon
					size="40rpx"
					name="search"></uv-icon>
				</view>
				<input type="text" placeholder="请输入搜索关键字..."/>
				<view class="text">
					搜索
				</view>
			</view>
			
			<view class="swipe">
				<uv-swiper 
				:list="banner"
				keyName="image"
				height="320rpx"></uv-swiper>
			</view>
		</view>
		
		<view class="box">
			<view class="box-line">
				<view class="title">
					认证演员
				</view>
				<view class="more"
				@click="$utils.navigateTo('/publish/actorList')">
					查看全部
					<uv-icon 
					size="26rpx"
					name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="ACTORS">
				<uv-swiper 
				:list="actorList"
				keyName="logo"
				height="320rpx"></uv-swiper>
			</view>
		</view>
		
		<view class="box">
			<view class="box-line">
				<view class="title">
					动态帖子
				</view>
				<view class="more" 
				@click="$utils.navigateTo('/publish/postList')">
					查看全部
					<uv-icon 
					size="26rpx"
					name="arrow-right"></uv-icon>
				</view>
			</view>
			
			<postList :list="trends"/>
		</view>
		
		<tabber :select="0"/>
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import postList from '@/components/post/postList.vue'
	export default {
		components : {
			tabber,
			postList
		},
		data() {
			return {
				banner : [],
				actorList : [],
				postList : [],
				trends : [],
			}
		},
		computed : {
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				this.$api('indexGetBanner', res => {
					if(res.code == 200){
						this.banner = res.result
					}
				})
				this.$api('indexGetActorList', res => {
					if(res.code == 200){
						this.actorList = res.result
					}
				})
				this.$api('indexGetTrendsPage', {
					pageNo : 1,
					pageSize : 10,
				}, res => {
					if(res.code == 200){
						this.trends = res.result.records
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding-bottom: 150rpx;
		.top{
			background-image: $uni-linear-gradient-bg-color;
			padding: 0 20rpx;
			padding-top: calc(var(--status-bar-height) + 20rpx);
			.title{
				display: flex;
				color: #fff;
				justify-content: space-between;
				&>view{
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.search{
				background-color: #fff;
				height: 70rpx;
				width: 100%;
				margin: 20rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				border-radius: 10rpx;
				.icon{
					margin: 0 20rpx;
				}
				input{
					
				}
				.text{
					margin-left: auto;
					margin-right: 20rpx;
				}
			}
		}
		.box{
			padding: 20rpx;
			.box-line{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				.title{
					position: relative;
					&::after{
						content: '';
						position: absolute;
						display: block;
						bottom: 0;
						left: 20rpx;
						width: 20rpx;
						height: 12rpx;
						background-color: $uni-linear-gradient-color;
					}
				}
				.more{
					display: flex;
					font-size: 24rpx;
					color: #777;
				}
			}
		}
	}
</style>