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 + ';'">
			<view class="home-mendian flex alcenter space plr15 cl-w9" style="display: none;">
				<navigator style="width: calc(100% - 80rpx);" url="/pages/client/tuan/ss">
					<view class="flex alcenter" style="width: calc(100% - 80rpx);">
						<text class="iconfont  iconsousuo ft14 mr10"></text>
						<text class="text-over ft14" style="width: calc(100% - 60rpx);">请输入搜索内容</text>
					</view>
				</navigator>
				<text @click="saoma()" class="iconfont iconicon_saoma ft24"></text>
			</view>

			<view class="">
				<home-banner :banners="banners"></home-banner>
			</view>
		</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">
					<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>
					<!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
					<!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
					<!-- </navigator> -->
				</view>

				<view class="flex space"
					style="display:flex; flex-wrap:wrap; padding: 30upx 30upx 0px 30upx;min-height: 100px;">
					<block v-for="(value, key) in hotdata.data" :key="key">
						<view class="box pb10 mb15" style="width:31%; border-radius:20rpx;" @click="detail(value)">
							<!-- <view class="btn-mini" style="position: absolute; top: 20upx; right: 20upx; border-radius: 10upx;font-size: 18upx;width: 60upx; height: 36upx; z-index: 1;" :style="getBtnStyle">{{value.lxname}}</view> -->
							<image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
							<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
						</view>
					</block>
				</view>
			</view>
			<view class="mt24">
				<view class="flex alcenter start">
					<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>
					<!-- <navigator url="/pages/client/tuan/ss?selectIndex=1"> -->
					<!-- <view @click="huanyihuan()" class="ft14 cl-notice">换一换</view> -->
					<!-- </navigator> -->
				</view>
				<view class="flex space"
					style="display:flex; flex-wrap:wrap; padding: 30upx 30upx 0px 30upx;min-height: 100px;">
					<block v-for="(value, key) in givedata.data" :key="key">
						<view class="box pb10 mb15" style="width:31%; border-radius:20rpx;" @click="detail(value)">
							<image class="integral-mall-goods" mode="aspectFill" :src="value.cover_image"></image>
							<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{ value.name }}</view>
						</view>
					</block>
				</view>
			</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;
			},
			huanyihuan() {

			},
			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]
				})
			},
			saoma() {
				//#ifdef APP-PLUS  
				uni.scanCode({
					success: function(res) {
						if (res.result.indexOf("uid") != -1) {
							var obj = JSON.parse(res.result);
							if (obj.uid) {
								uni.navigateTo({
									url: '/pages/login/reg?uid=' + obj.uid
								})
							}
						} else {
							uni.showToast({
								title: res.result,
								icon: "none"
							});
						}
					}
				});
				//#endif

			},
			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>
	.home-header {
		/* height: 300rpx; */
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-mendian {
		width: 100%;
		height: 84rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
	}

	.integral-mall-main {
		position: relative;
		/* margin-top: -104rpx; */
	}

	.integal-mall-menu {
		width: 100%;
		height: 190rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 44px;
		box-sizing: content-box;
	}
</style>