uni_mattress/sleep/components/tabBar/index.vue

<template>
	<view>
		<view class="cu-bar tabbar bg-tabbar shadow foot">
			<view class="action" @click="handleToHome">
				<view class="cuIcon-cu-image"><image :src="'../../static/tabBar/' + [currentPage == 'home' ? 'homeSel' : 'home'] + '.png'"></image></view>
				<view :class="currentPage == 'home' ? 'tabbar-text-active-color' : 'tabbar-text-color'" style="margin-top:2px">首页</view>
			</view>
			<view class="action" @click="handleToReport">
				<view class="cuIcon-cu-image"><image :src="'../../static/tabBar/' + [currentPage == 'report' ? 'reportSel' : 'report'] + '.png'"></image></view>
				<view :class="currentPage == 'report' ? 'tabbar-text-active-color' : 'tabbar-text-color'" style="margin-top:2px">报告</view>
			</view>
			<view class="action" @click="handleToDiscovery">
				<view class="cuIcon-cu-image"><image :src="'../../static/tabBar/' + [currentPage == 'index' ? 'discoverSel' : 'discover'] + '.png'"></image></view>
				<view :class="currentPage == 'index' ? 'tabbar-text-active-color' : 'tabbar-text-color'" style="margin-top:2px">发现</view>
			</view>
			<view class="action"  @click="handleToMy">
				<view class="cuIcon-cu-image"><image :src="'../../static/tabBar/' + [currentPage == 'my' ? 'mySel' : 'my'] + '.png'"></image></view>
				<view :class="currentPage == 'my' ? 'tabbar-text-active-color' : 'tabbar-text-color'" style="margin-top:2px">我的</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	props: {
		currentPage: {
			type: String,
			default: 'home'
		}
	},
	computed: mapState({
		playInfo: state => state.playInfo,
		paused: state => state.paused
	}),
	data() {
		return {
			time: null,
			rotate: 0
		};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			if (!this.paused) {
				this.initRotate();
			} else {
				clearInterval(this.timer);
			}
		},
		handleToPlay() {
			uni.navigateTo({
				url: '/pages/play/index'
			});
		},

		handleToDiscovery() {
			uni.navigateTo({
				url: '/pages/tabBar/find'
			});
		},
		handleToReport() {
			uni.navigateTo({
				url: '/pages/tabBar/report'
			});
		},
		handleToMy(){
			uni.navigateTo({
				url: '/pages/tabBar/my'
			});
		},

		handleToHome(){
			uni.reLaunch({
				url: '/pages/tabBar/home'
			});
		},

		initRotate() {
			this.timer = setInterval(() => {
				this.rotate += 15;
			}, 1000);
		}
	},
	watch: {
		paused() {
			this.init();
		}
	}
};
</script>
<style lang="scss" scoped>
.music-img {
	position: absolute;
	width: 35px;
	z-index: 2;
	height: 35px;
	border-radius: 50%;
	line-height: 35px;
	font-size: 25px;
	top: -17px;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
	transition: all 1s linear;
}
</style>