zhiyu_uni_duanju/pages/index/index.vue

<template>
	<view>
		<!-- 标题栏和状态栏占位符 -->
		<!-- <view class="titleNview-placing"> </view> -->
		<sub-tabvs class="" :tabs="typetab" @change="changeIndex" :selectIndex="selecttype"
			:scrollTop="scrollTop"></sub-tabvs>
		<view class="home-header pd0_15 mt10" :style="'background: ' + mbgColor + ';'">
			<home-banner :banners="banners"></home-banner>
		</view>
		<view class="integral-mall-main plr15" style="margin-top: 30upx;">
			<view class="integal-mall-menu flex pt10 pb10">
				<view class="col2 text-center" @click="linkTo" data-link="/pages/zhuiju/index" data-type='tabbar'>
					<view>
						<!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[0]"></image> -->
						<image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/zuiju.png"></image>
					</view>
					<view class="ft14 ftw600">追剧</view>
				</view>
				<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/billboard/index">
					<view>
						<!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[2]"></image> -->
						<image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/phb.png"></image>
					</view>
					<view class="ft14 ftw600">排行</view>
				</view>
				<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/index/new/index">
					<view>
						<!-- <image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[6]"></image> -->
						<image style="width: 100rpx; height: 100rpx;" src="/static/icon/index/new.png"></image>
					</view>
					<view class="ft14 ftw600">最新</view>
				</view>
			</view>
			<view class="mt24">
				<view class="flex alcenter start mb10">
					<view class="flex alcenter">
						<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
						<text class="ft16 ftw600 cl-main ml15">{{ hotdata.subject_name }}</text>
					</view>
				</view>
				<u-scroll-list :indicator="true">
					<view v-for="(value, key) in hotdata.data" :key="key" class="box pb10 mb15"
						style="width:30%; border-radius:20rpx;margin: 6px;min-height: 100px;flex: none;"
						@click="detail(value)">
						<u--image width="100%" height="280rpx" radius="8" mode="scaleToFill" :src="value.cover_image"
							:fade="true" duration="450">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
						<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
					</view>
				</u-scroll-list>
			</view>
			<view class="mt24">
				<view class="flex alcenter start mb10">
					<view class="flex alcenter">
						<image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[0]"></image>
						<text class="ft16 ftw600 cl-main ml15">{{ givedata.subject_name }}</text>
					</view>
				</view>
				<u-scroll-list :indicator="true">
					<view v-for="(value, key) in givedata.data" :key="key" class="box pb10 mb15"
						style="width:30%; border-radius:20rpx;margin: 6px;min-height: 100px;flex: none;"
						@click="detail(value)">
						<u--image width="100%" height="280rpx" radius="8" mode="scaleToFill" :src="value.cover_image"
							:fade="true" duration="450">
							<view slot="error" style="font-size: 24rpx;">加载失败</view>
						</u--image>
						<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getMiniprogramHall
	} from '@/common/apis/index.js'
	import {
		getConfigInfo
	} from "@/common/apis/common.js";
	import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup';
	export default {
		data() {
			return {
				navLock: false,
				banners: [],
				hotdata: [],
				givedata: [],
				typetab: [{
					name: '推荐短剧',
					id: 1
				}, ],
				selecttype: 0,
				scrollTop: 0,
				type: 1,
				mbgColor: this.$mbgColor,
			}
		},
		computed: {

		},
		onPageScroll(e) {
			if (e.scrollTop > 44) {
				if (this.navLock == false) {
					this.navLock = true;
					uni.setNavigationBarColor({
						frontColor: "#000000",
						backgroundColor: "#FFFFFF",
						complete: () => {
							this.navLock = false;
						}
					});
				}
			} else {
				if (this.navLock == false) {
					this.navLock = true;
					let this_ = this
					uni.setNavigationBarColor({
						frontColor: "#000000",
						backgroundColor: this_.mbgColor,
						complete: () => {
							this.navLock = false;
						}
					});
				}
			}
		},
		onLoad(e) {
			this.settitle();
		},
		onShow() {
			this.getList();
		},
		methods: {
			async settitle() {
				let res = await getConfigInfo();
				let config = res.data;
				uni.setNavigationBarTitle({
					title: config.play_name
				});
			},
			changeIndex(index) {
				if (this.typetab[index].id) {
					this.type = this.typetab[index].id
					//this.getList(0)
				}
				console.log(this.type)
				this.selecttype = index;
			},
			getList() {
				getMiniprogramHall().then(res => {
					console.log(res, 'getMiniprogramHallgetMiniprogramHall')
					this.banners = res.data.banner
					this.hotdata = res.data.recommend[0]
					this.givedata = res.data.recommend[1]
				})
			},
			detail(value) {
				uni.navigateTo({
					url: '/pages/video/index?video_id=' + value.video_id
				})
			},
			linkTo(e) {
				console.log(e, 'linkTolinkTolinkTo')
				let link = e.currentTarget.dataset.link;
				let type = e.currentTarget.dataset.type;
				if (type == 'tabbar') {
					uni.switchTab({
						url: link
					})
				} else {
					uni.navigateTo({
						url: link
					})
				}

			},
		},
	}
</script>
<style lang="scss" scoped>
	@import "./style/index.scss"
</style>