quick/pages/playlet/index.vue

<template>
	<view  :style="`height:100vh`">
		<view
			:style="{
				background: `linear-gradient(93deg, rgba(255, 220, 230, ${
					swiperIndex === 0 ? backOpacityOne : backOpacity
				}) 45%, rgba(255, 238, 195, ${
					swiperIndex === 0 ? backOpacityOne : backOpacity
				}))`
			}"
		>
			<GNavbar
				left-width="200rpx"
				backgroud-color="transparent"
				:custom-left-fn="true"
			>
				<view slot="left" class="flex-row flex-center">
					<text
						class="fs-40"
						style="color: #1a1a1a;font-weight: bold;"
					>
						某某短剧
					</text>
				</view>
			</GNavbar>
			<view class="header_tabs flex-row px-20">
				<view class="">
					<u-tabs
						:list="tabList"
						:inactive-style="{
							fontSize: '34rpx',
							color: '#666666',
							fontWeight: 500
						}"
						:current="swiperIndex"
						:active-style="{
							color: '#1A1A1A',
							fontSize: '40rpx',
							fontWeight: 'bold'
						}"
						:item-style="{
							'padding-left': 0,
							'padding-right': '50rpx'
						}"
						line-height="0"
						@click="tabsClick"
					/>
				</view>
				<view class="search" @click="navSearch">
					<view
						class="search-view flex-row"
						style="align-items: center;"
					>
						<u-icon name="/static/icon/search.png" size="24rpx" />
						<text class="search-text"> 寻找你喜欢的短剧 </text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-1">
			<swiper
				class="flex-1"
				:current="swiperIndex"
				@change="swiperChange"
			>
				<swiper-item>
					<Pursue
						ref="Pursue"
						:tab-index="swiperIndex"
						@signIn="signIn"
					/>
				</swiper-item>
				<swiper-item>
					<Recommend
						ref="Recommend"
						:tab-index="swiperIndex"
						@opacity="opacity"
					/>
				</swiper-item>
			</swiper>

			<GSignMadel ref="GSignMadel" />
		</view>
	</view>
</template>

<script>
import Recommend from './components/recommend.vue';
import Pursue from './components/pursue.vue';
import { reg } from '@/api/index.js';
export default {
	components: { Recommend, Pursue },

	data() {
		return {
			tabList: [
				{
					name: '追剧'
				},
				{
					name: '推荐'
				}
			],
			keyword: '',
			swiperIndex: 1,
			backOpacity: 1,
			backOpacityOne: 0,
			time: null,
			statusBarHeight:''
		};
	},
	computed: {
		show() {
			return this.$store.state.loading;
		}
	},
	onShow() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2 + 'rpx';
		setTimeout(() => {
			this.$showLoading(false);
		}, 1000);
		if (this.swiperIndex === 1) {
			setTimeout(() => {
				this.$refs.Recommend.getList();
			}, 500);
		} else {
			setTimeout(() => {
				this.$refs.Pursue.getList();
			}, 500);
		}
	},
	onLoad() {
		// const uid = uni.getStorageSync('uid') || '';

		// if (!uid) {
		// 	uni.login({
		// 		success: function(loginRes) {
		// 			reg({
		// 				code: loginRes.code
		// 			}).then(res => {

		// 			});
		// 		}
		// 	});
		// }
		uni.setStorageSync('uid', 3);
	},
	methods: {
		swiperChange(e) {
			const index = e.detail.current;
			if (this.swiperIndex !== index) {
				this.swiperIndex = index;
			}
		},
		tabsClick(e) {
			const index = e.index;
			if (this.swiperIndex !== index) {
				this.swiperIndex = index;
			}
		},
		navSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		signIn(e) {
			this.$refs.GSignMadel.open(e).then(() => {
				this.swiperIndex = 1;
			});
		},
		opacity(e) {
			if (this.swiperIndex === 1) {
				this.backOpacity = e;
			}
		}
	}
};
</script>

<style lang="scss">
.header_bg {
	position: fixed;
	top: -6rpx;
	left: 0;
	width: 750rpx;
	height: 614px;
	z-index: 0;
}

.header_tabs {
	height: 90rpx;
	justify-content: space-between;
	align-items: center;
	.search {
		width: 470rpx;
	}
	.search-view {
		width: 470rpx;
		height: 60rpx;
		background: #ffffff;
		padding: 0 28rpx;
		border-radius: 60rpx;
	}
	.search-text {
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
		margin-left: 16rpx;
	}
}
</style>