zhiyu_uni_duanju/pages/client/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/client/tuan/zjjl">
					<view>
						<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[0]"></image>
					</view>
					<view class="ft14 ftw600">追剧</view>
				</view>
				<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/client/tuan/ss?selectIndex=3">
					<view>
						<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[2]"></image>
					</view>
					<view class="ft14 ftw600">排行</view>
				</view>
				<view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/client/tuan/ss">
					<view>
						<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[6]"></image>
					</view>
					<view class="ft14 ftw600">最新</view>
				</view>
				<!-- <view class="col2 text-center bd-left" @click="linkTo" data-link="/pages/client/tuan/ss?selectIndex=2">
					<view>
						<image style="width: 100rpx; height: 100rpx;" :src="statics.zhuico[5]"></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="mt16 card-wrapper">
					<block v-for="(value,key) in hotdata.data" :key="key">
						<view class="box card" style="width:31%; position: relative; 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="mt16 card-wrapper">
					<block v-for="(value,key) in givedata.data" :key="key">
						<view class="box card" style="width:31%; position: relative; 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>
	</view>
	<!-- <home-default :datasa="datasa"></home-default> -->
	<!-- <com-footer model="index"></com-footer> -->
	</view>
	</view>
</template>
<script>
	import {
		getMiniprogramHall
	} from '@/common/apis/index.js'
	import cellGroup from '../../uni_modules/uview-ui/libs/config/props/cellGroup';
	export default {
		data() {
			return {
				hyh: 0,
				navLock: false,
				datasa: [],
				listjq: [],
				listbz: [],
				showdyxx: true,
				dataconfig: [],
				banners: [],
				datainfo: [],
				dataindex: [],
				hotdata: [],
				givedata: [],

				typetab: [{
						name: '推荐短剧',
						id: 1
					},
					// {name:'剧情介绍',id:2},
					// {name:'剧情壁纸',id:3},
				],
				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;
						}
					});
				}
			}
		},
		onShareAppMessage(e) {

		},
		onShareTimeline(e) {

		},
		onLoad(e) {
			// uni.setStorage({//缓存配置信息
			// 	key: 'webUrl',  
			// 	data: this.configs.webUrl
			// })
			//this.getList();
		},
		onShow() {
			this.getList();
			// this.getList(1);
			// this.getList(2);
			// this.getList(3);
			let this_ = this
		},
		methods: {
			changeIndex(index) {
				if (this.typetab[index].id) {
					this.type = this.typetab[index].id
					//this.getList(0)
				}
				console.log(this.type)
				this.selecttype = index;
			},
			huanyihuan() {
				if (this.hyh < 12) {
					this.hyh = this.hyh + 3
				}
				if (this.hyh >= 12) {
					this.hyh = 0
				}
			},
			getList() {
				getMiniprogramHall().then(res => {
					console.log(res, 'getMiniprogramHallgetMiniprogramHall')
					this.banners = res.banner
					this.hotdata = res.recommend[0]
					this.givedata = res.recommend[1]
				})
				let this_ = this
				let data = {};
				// uni.request({
				// 	url: this.configs.webUrl + '/api/video/indexdata',
				// 	data: data,
				// 	success: data => {
				// 		//console.log(data.data)
				// 		uni.setStorage({ //缓存配置信息
				// 			key: 'config',
				// 			data: data.data.config
				// 		})
				// 		this.banners = data.data.config.banner
				// 		if (data.data.config.name) {
				// 			uni.setNavigationBarTitle({
				// 				title: data.data.config.name
				// 			});
				// 		}
				// 		if (data.data.config.mbgColor) {
				// 			this.mbgColor = data.data.config.mbgColor
				// 			uni.setNavigationBarColor({
				// 				frontColor: "#000000",
				// 				backgroundColor: this_.mbgColor,
				// 				complete: () => {
				// 					this.navLock = false;
				// 				}
				// 			});
				// 		}
				// 		this.listbz = data.data.listbz
				// 		this.listjq = data.data.listjq
				// 		this.datasa = data.data.new
				// 		this.hotdata = data.data.hotdata
				// 		this.givedata = data.data.givedata
				// 	},
				// 	fail: (data, code) => {}
				// });
			},
			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) {
				console.log(value)
				// if (uni.getStorageSync("userinfo")) {
				// 	fxpid = uni.getStorageSync("userinfo").id
				// }
				uni.navigateTo({
					url: '/pages/client/tuan/detail?video_id=' + value.video_id
				})
			},
			linkTo(e) {
				if (this.isLogin == false) {
					this.showLogin = true;
				} else {
					let link = e.currentTarget.dataset.link;
					uni.navigateTo({
						url: link
					})
				}
			},
			linkTosa(e) {
				let link = e.currentTarget.dataset.link;
				uni.navigateTo({
					url: link
				})
			},
			exchange(e) {
				if (this.isLogin == false) {
					this.showLogin = true;
				} else {
					let id = e.currentTarget.dataset.id;
					uni.navigateTo({
						url: '/pages/client/integral/exchange?id=' + id
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.card-wrapper {
		display: flex;
		justify-content: start;

		.card {
			margin: 10px;
		}
	}

	.home-header {
		/* height: 300rpx; */
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

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

	.integral-mall-header {
		position: relative;
		height: 320rpx;
	}

	.integral-mall-header .bg {
		width: 100%;
		height: 320rpx;
	}

	.integral-mall-header .main {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320rpx;
	}

	.swiper-integral {
		height: 32rpx;
		width: 100%;
	}

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

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

	.integral-tuan-l {
		width: 100%;
		height: 280rpx;
		background: #f2f2f2;
		border-radius: 16rpx;
	}


	.integral-mall-coupon {
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.integral-mall-coupon .top {
		padding: 0rpx 0rpx 24rpx 0rpx;
		border-bottom: 2rpx dashed #FEC675;
	}

	.integral-mall-coupon .y-l,
	.integral-mall-coupon .y-r {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx;
	}

	.integral-mall-coupon .y-l {
		left: -10rpx;
	}

	.integral-mall-coupon .y-r {
		right: -10rpx;
	}

	.integral-mall-coupon .coupon-value {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value image {
		width: 100%;
	}

	.integral-mall-coupon .coupon-value .num {
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}

	.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>