210 lines
3.8 KiB
Vue
210 lines
3.8 KiB
Vue
<template>
|
|
<view class="flex-1">
|
|
<GLoading />
|
|
|
|
<view
|
|
class="header_tabs flex-row px-20"
|
|
:style="{
|
|
background: `linear-gradient(93deg, rgba(255, 220, 230, ${
|
|
swiperIndex === 0 ? backOpacityOne : backOpacity
|
|
}) 45%, rgba(255, 238, 195, ${
|
|
swiperIndex === 0 ? backOpacityOne : backOpacity
|
|
}))`
|
|
}"
|
|
>
|
|
<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>
|
|
|
|
<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>
|
|
</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
|
|
};
|
|
},
|
|
computed: {
|
|
show() {
|
|
return this.$store.state.loading;
|
|
}
|
|
},
|
|
onShow() {
|
|
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', res.uid );
|
|
|
|
|
|
|
|
});
|
|
|
|
}
|
|
});
|
|
}
|
|
},
|
|
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 {
|
|
z-index: 999;
|
|
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>
|