Commit 002decf9 authored by 位明海-不用了's avatar 位明海-不用了

no message

parent 7302ed1b
<template>
<view class="body">
<view :class="currentPage=='recommend'?'tabs-bar2':'tabs-bar'">
<view :class="currentPage==tab.id?'tab active': 'tab'" v-for="tab in tabs"
:style="'padding-bottom:' + bottomSafePadding + 'px;'" @click="handleRedirectTo(tab)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==tab.id" class="tabs-image" :src="tab.select" mode="heightFix">
</image>
<image v-else class="tabs-image" :src="tab.unSelect" mode="heightFix"></image>
</view>
{{tab.name}}
</view>
</view>
</view>
</template>
<script>
export default {
props:{
currentPage:{
type:String,
default:'index',
},
},
data() {
return {
tabs: [{
name: "剧场",
id: "index",
select: '/static/tab/index_selected.png',
unSelect: '/static/tab/index_unselected.png',
url: "../index/index"
}, {
name: "推荐",
id: "recommend",
select: '/static/tab/promote_selected.png',
unSelect: '/static/tab/promote_unselected.png',
url: "../recommend/recommend"
}, {
name: "我的",
id: "user",
select: '/static/tab/my_selected.png',
unSelect: '/static/tab/my_unselected.png',
url: "../my/my"
}],
}
},
mounted() {
},
methods: {
handleRedirectTo(tab) {
uni.redirectTo({
url: tab.url
});
},
}
}
</script>
<style lang="scss">
.body {
height: 100%;
}
.editBar {
position: absolute;
bottom: 0;
width: 100%;
height: 110rpx;
background: white;
display: flex;
.editItem {
height: 110rpx;
line-height: 110rpx;
text-align: center;
width: 50%;
}
}
.tabs-bar2 {
display: flex;
background-color: black;
.tab {
height: 110rpx;
flex: 1;
text-align: center;
font-size: 26rpx;
font-weight: bold;
color: white;
&.active {
color: #F8425A;
}
}
}
</style>
\ No newline at end of file
<template>
<view class="body">
<view style="height: 100%;">
<indexPage v-show="currentPage==0" ref="index" />
<recommendPage v-on:showEditBarH="showEditBarH" v-on:changeBottomBarColor="changeBottomBarColor"
v-show="currentPage==1" ref="recommend" />
<userPage v-show="currentPage==2" ref="user" />
</view>
<view v-if="!isShowBlackBar" class="tabs-bar">
<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(0)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==0" class="tabs-image" src="/static/tab/index_selected.png"
mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
</view>
剧场
</view>
<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(1)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==1" class="tabs-image" src="/static/tab/promote_selected.png"
mode="heightFix"></image>
<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
</view>
推荐
</view>
<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(2)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==2" class="tabs-image" src="/static/tab/my_selected.png" mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/my_unselected.png" mode="heightFix"></image>
</view>
我的
</view>
</view>
<view v-if="isShowBlackBar" class="tabs-bar2">
<view :class="currentPage==0?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(0)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==0" class="tabs-image" src="/static/tab/index_selected.png"
mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/index_unselected.png" mode="heightFix"></image>
</view>
剧场
</view>
<view :class="currentPage == 1?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(1)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==1" class="tabs-image" src="/static/tab/promote_selected.png"
mode="heightFix"></image>
<image v-else class="tabs-image" src="/static/tab/promote_unselected.png" mode="heightFix"></image>
</view>
推荐
</view>
<view :class="currentPage == 2?'tab active': 'tab'" :style="'padding-bottom:' + bottomSafePadding + 'px;'"
@click="tabChange(2)">
<view style="margin: 16rpx 0 11rpx;">
<image v-if="currentPage==2" class="tabs-image" src="/static/tab/my_selected.png" mode="heightFix">
</image>
<image v-else class="tabs-image" src="/static/tab/my_unselected.png" mode="heightFix"></image>
</view>
我的
</view>
</view>
<view v-if="showEditBar" class="editBar" :style="'padding-bottom:' + bottomSafePadding + 'px;'">
<view class="editItem" @click="!isFullChoice?fullChoice():noChoice()">
{{!isFullChoice?'全选':'全不选'}}
</view>
<view class="editItem" @click="deleteCollect">
删除
</view>
</view>
</view>
</template>
<script>
import {
navigateTo,
alert
} from '@/utils/fun.js';
import common from '@/mixins/common';
const app = getApp();
// 首页
// import indexPage from "@/pages/index/index.vue";
// import recommendPage from "@/pages/recommend/recommend.vue";
// import userPage from "@/pages/my/my.vue";
import indexPage from "@/components/home/index.vue";
import recommendPage from "@/components/home/recommend.vue";
import userPage from "@/components/home/my.vue";
export default {
name: 'home',
mixins: [common],
components: {
indexPage,
recommendPage,
userPage
},
data() {
return {
isFirstLoad: true,
currentPage: 0,
showEditBar: false,
isFullChoice: false,
isShowBlackBar: false
}
},
onLoad(options) {
let index = options.index ?? ''
if (index != '' && index != undefined) {
this.currentPage = index
}
if (wx.setVisualEffectOnCapture) {
wx.setVisualEffectOnCapture({
visualEffect: 'hidden',
success: (res) => {
},
})
}
},
onShow() {
try {
// 在子组件重写show()代替onShow()
if (this.currentPage == 0) {
this.$refs.index.show();
} else if (this.currentPage == 1) {
// this.$refs.recommend.show();
} else if (this.currentPage == 2) {
this.$refs.user.show();
}
} catch (e) {
}
},
mounted() {
// 渲染完成 初始化首页数据
this.loadComponentData();
},
methods: {
tabChange(index) {
if (this.currentPage == index) return
this.currentPage = index;
this.loadComponentData();
},
loadComponentData() {
if (this.currentPage == 0) {
this.changeBottomBarColor(false)
this.$refs.index.show();
this.$refs.recommend.hide();
this.$refs.user.hide();
} else if (this.currentPage == 1) {
this.$refs.recommend.show();
this.$refs.index.hide();
this.$refs.user.hide();
} else if (this.currentPage == 2) {
this.changeBottomBarColor(false)
this.$refs.user.show();
this.$refs.index.hide();
this.$refs.recommend.hide();
}
},
changeBottomBarColor(b) {
this.isShowBlackBar = b
},
showEditBarH(b) {
this.showEditBar = b
this.isFullChoice = false
},
fullChoice() {
this.isFullChoice = !this.isFullChoice
this.$refs.recommend.fullChoice();
},
noChoice() {
this.isFullChoice = !this.isFullChoice
this.$refs.recommend.noChoice();
},
deleteCollect() {
this.$refs.recommend.deleteCollect();
}
}
}
</script>
<style lang="scss">
.body {
height: 100%;
}
.editBar {
position: absolute;
bottom: 0;
width: 100%;
height: 110rpx;
background: white;
display: flex;
.editItem {
height: 110rpx;
line-height: 110rpx;
text-align: center;
width: 50%;
}
}
.tabs-bar2 {
display: flex;
background-color: black;
.tab {
height: 110rpx;
flex: 1;
text-align: center;
font-size: 26rpx;
font-weight: bold;
color: white;
&.active {
color: #F8425A;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment