new_app/pages/index/index.vue

<template>
	<view class="indexStyle">
		<image src="@/static/index/indexbh.png" mode="">
		</image>
		<view class="indexStyleTwo">
			<image src="@/static/logo.png" mode=""></image>
			<view @tap="moreVideo">
				<image src="@/static/sosuo.png" style="height: 34rpx;width: 34rpx;" mode=""></image>
				点击搜索更多好剧
			</view>
		</view>

		<template v-if="datas.noticeList.length > 0 ">
			<view class="gongao">
				<view class="gongaoicon">
					公告
				</view>
				<swiper :autoplay="true" :vertical="true" :interval="4000" :circular="true" :indicator-dots="false"
					class="swiperstyle">
					<swiper-item @tap='goMsg(item.url)' v-for="(item, index) in datas.noticeList" :key="index">
						<view style="height: 80rpx;line-height: 80rpx;">{{ item.title }}</view>
					</swiper-item>
				</swiper>
			</view>
		</template>
	</view>
	<view class="navTop">
		<view :style="datas.active == 1 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('', 1)">
			最新
		</view>
		<view :style="datas.active == 2 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('1', 2)">
			排行
		</view>
		<view :style="datas.active == 3 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('2', 3)">
			最热
		</view>
		<view :style="datas.active == 4 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('1', 4)">
			剧情
		</view>
		<view :style="datas.active == 5 ? 'color:#ff6b7f' : ''" @tap="getrecomVideo('2', 5)">
			飙升
		</view>
	</view>
	<contentlist :list='datas.list'></contentlist>
	<!-- 	<u-image v-if="isShowMoneyPay" @click="goMsg('/me/VjgyqAzklr/VjgyqAzklr')" :src="`../../static/red-pack-new.gif`"
		style="width: 200rpx;height: 200rpx;position: fixed;right: 10rpx;bottom: 180rpx;"></u-image> -->
	<u-modal :show="datas.ruleShow" v-if="datas.isExamine==0" confirm-text="知道了" @confirm='datas.ruleShow=false'
		:title="datas.rule_title" :title-style="{ fontWeight: '700' }" confirm-color="rgb(255, 117, 129)">
		<view class="" style="padding-top: 30rpx;text-align: left;">
			<scroll-view scroll-y="true" style="max-height: 50vh;">
				<rich-text style="color:#666" :nodes="datas.rule_content"></rich-text>
			</scroll-view>
		</view>
	</u-modal>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import contentlist from './components/contentlist.vue'
	import http from '@/http/http.js'
	let datas = reactive({
		noticeList: [], //公告列表

		active: 1, // 最新、最热。。。切换顶部导航栏

		list: [], // 底部短剧内容
		page: 1, // 首页推荐分页

		ruleShow: false,
		rule_title: '', // 首页弹窗标题
		rule_content: '', // 首页弹窗内容

		//ios是否在审核 1是审核
		isExamine: uni.getStorageSync('isExamine')
	})
	onLoad(() => {
		getMsg()
		getrecomVideo()
		getPop()
	})

	onReachBottom(() => {
		++datas.page
		getrecomVideo()
	})

	// 获取弹窗信息
	function getPop() {
		http.request({
			url: 'app/announcement',
		}).then(res => {
			if (res.code == 0) {
				if (res.data && res.data.state == 1) {
					datas.ruleShow = true
					datas.rule_title = res.data.title
					datas.rule_content = res.data.content
				}
			} else {
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: 'none'
				});
			}
		})
	}
	// 搜索跳转
	function moreVideo() {
		uni.navigateTo({
			url: '/pages/index/search/index'
		});
	}
	// 公告
	function getMsg() {
		http.request({
			url: 'app/message/selectMessage',
			data: {
				page: 1,
				limit: 5,
				state: 1
			}
		}).then(res => {
			if (res.code == 0) {
				datas.noticeList = res.data.list
			} else {
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: 'none'
				});
			}
		})
	}
	//获取推荐视频
	function getrecomVideo(sort, active = 1) {
		datas.active = active
		if (sort) {
			datas.page = 1
		}
		http.request({
			url: 'app/course/selectCourse',
			data: {
				page: datas.page,
				limit: 12,
				sort: sort,
				classifyId: ''
			}
		}).then(res => {
			if (res.code == 0) {
				if (datas.page == 1) {
					datas.list = res.data.list
				} else {
					datas.list = [...datas.list, ...res.data.list]
				}
			} else {
				uni.showToast({
					title: res.msg,
					duration: 1000,
					icon: 'none'
				});
			}
		})
	}
</script>

<style lang="scss" scoped>
	.indexStyle {
		height: 555rpx;
		position: relative;

		>image {
			width: 100%;
			height: 555rpx;
			position: absolute;

		}

		.indexStyleTwo {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 88rpx 25rpx;

			>image {
				width: 187rpx;
				height: 50rpx;
			}

			>view {
				z-index: 50;
				width: 236rpx;
				line-height: 43rpx;
				background: rgba(255, 255, 255, 0.29);
				border-radius: 7rpx 7rpx 7rpx 7rpx;
				font-weight: 400;
				font-size: 21rpx;
				color: rgba(255, 255, 255, 0.85);
				display: flex;
				align-items: center;
			}
		}

		.gongao {
			position: absolute;
			bottom: 75rpx;
			left: 70rpx;
			border-radius: 21rpx 21rpx 21rpx 21rpx;
			width: 611rpx;
			height: 78rpx;
			background-color: rgba(255, 255, 255, .65);
			display: flex;
			align-items: center;
			padding: 12rpx;
			box-sizing: border-box;

			.gongaoicon {
				color: #ffffff;
				width: 98rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 25rpx;
				background-image: url('../../static/index/gonggaobg.png');
				background-size: 98rpx 50rpx;
			}

			.swiperstyle {
				height: 78rpx;
				width: 80%;
			}
		}

	}

	.navTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		>view {
			background-color: #f0f0f0;
			margin-left: 20rpx;
			padding: 6rpx 20rpx
		}
	}
</style>