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>
			
			<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"
				@click="bannerClick"
				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">
				
				<swiper class="swiper-box" 
				:autoplay="true" 
				:duration="500">
					<swiper-item v-for="(item, index) in actorList" 
					style="background-color: #fff;border-radius: 20rpx;
					padding: 20rpx;"
					:key="index">
						<view class="swiper-item">
							<image
							class="logo"
							:src="item.logo" 
							mode="aspectFill" />
							<view class="swiper-item-content">
								<view class="left">
									<view class="title">
										{{ item.name }}
									</view>
									<view class="info-from">
										<text>{{ item.userId }}</text>
										<text style="margin-left: 30rpx;">{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}</text>
									</view>
								</view>
								<view class="right">
									查看
								</view>
							</view>
						</view>
					</swiper-item>
				</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"/>
		
		<showPrivacyAgreement
		ref="showPrivacy">
		</showPrivacyAgreement>
		
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import postList from '@/components/post/postList.vue'
	import showPrivacyAgreement from '@/components/config/showPrivacyAgreement.vue'
	export default {
		components : {
			tabber,
			postList,
			showPrivacyAgreement,
		},
		data() {
			return {
				banner : [],
				actorList : [],
				postList : [],
				trends : [],
				queryParams: {
					pageNo: 1,
					pageSize: 10
				},
				total : 0,
			}
		},
		computed : {
		},
		//滚动到屏幕底部
		onReachBottom() {
			console.log("======首页滑动到底部触发====")
			let total = this.queryParams.pageNo * this.queryParams.pageSize
			if(total < this.total){
				this.queryParams.pageSize += 10
				this.indexGetTrendsPage(res => {
					this.trends.push(...res.result.records)
				})
			}
		},
		onShow() {
			this.getData()
			this.queryParams.pageNo = 1
			this.indexGetTrendsPage(res => {
				this.trends = res.result.records
			})
		},
		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
					}
				})
			},
			indexGetTrendsPage(fn){
				this.$api('indexGetTrendsPage', 
				this.queryParams, res => {
					if(res.code == 200){
						// fn && fn(res)
						this.trends = res.result.records
						this.total = res.result.total
					}
				})
			},
			bannerClick(index){
				console.log(index);
				uni.navigateTo({
					url: '/pages_mine/publish/competition'
				})
			}
		}
	}
</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;
				margin-bottom: 30rpx;
				margin-top: 30rpx;
				font-size: 30rpx;
				&>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;
				}
			}
			.ACTORS{
				.swiper-item{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					image{
						width: 450rpx;
						height: 180rpx;
					}
					.swiper-item-content{
						margin-top: 15rpx;
						display: flex;
						width: 80%;
						.left{
							.title{
								font-weight: 900;
								font-size: 30rpx;
							}
							.info-from{
								font-size: 26rpx;
								color: #777;
							}
						}
						.right{
							background: $uni-linear-gradient-color;
							color: #fff;
							padding: 0 40rpx;
							font-size: 28rpx;
							margin-left: auto;
							border-radius: 15rpx;
							height: 60rpx;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>