<template> <view class="bottoms"> <view class="box" @click="getgogo(1)"> <view class="imgs"> <image src="../../static/tabBar/homex.png" v-show="aindex == 1" ></image> <image src="../../static/tabBar/home.png" v-show="aindex != 1" ></image> </view> <view class="xzz" v-show="aindex == 1">首页</view> <view class="wxz" v-show="aindex != 1">首页</view> </view> <view class="box" @click="getgogo(2)" > <view class="imgs" style="position: relative;"> <view class="hongdian" v-if=" chuan != 0"> {{chuan}} </view> <image src="../../static/tabBar/noticex.png" v-show="aindex == 2"></image> <image src="../../static/tabBar/notice.png" v-show="aindex != 2"></image> </view> <view class="xzz" v-show="aindex == 2">通知</view> <view class="wxz" v-show="aindex != 2">通知</view> </view> <view class="box" @click="getgogo(3)"> <view class="imgs"> <image src="../../static/tabBar/myx.png" v-show="aindex == 3"></image> <image src="../../static/tabBar/my.png" v-show="aindex != 3"></image> </view> <view class="xzz" v-show="aindex == 3">我的</view> <view class="wxz" v-show="aindex != 3">我的</view> </view> </view> </template> <script> const innerAudioContext = uni.createInnerAudioContext(); import request from '../../utils/request'; export default{ data(){ return{ aindex:1, chuan:0, arr:[ {text:'首页'}, {text:'个人中心'}, ], } }, props:{ msg:String }, onLoad() { this.aindex = this.msg }, onShow() { }, mounted() { this.aindex = this.msg }, methods:{ dianyidain() { innerAudioContext.src = 'https://www.nuoyunr.com/lananRsc/rescue/msgV.mp3'; // 设置播放次数和计数器 const playCount = 5; let currentCount = 0; // 监听音频播放结束事件 innerAudioContext.onEnded(() => { // 播放计数加一 currentCount++; // 判断是否达到播放次数上限 if (currentCount < playCount) { // 继续播放 innerAudioContext.play(); } else { // 播放完成,可以在这里添加额外的逻辑 console.log('播放完成'); } }); // 初次播放 innerAudioContext.play(); }, msgInfo() { console.log(this.msgSocket, 'msgSocket') if (this.msgSocket) { console.log('消息回调启动成功') this.msgSocket.onMessage(res => { console.log("发出提示音"); this.dianyidain() }) } }, async getbottom(){ let data = { partnerId:uni.getStorageSync('partnerId') } let res = await request({ url:'/appInspection/news/newMsgNum', method: 'get', params:data }) if(res.code == 200){ this.chuan = res.data } }, getgogo(index){ if(index == 1){ this.aindex = index uni.reLaunch({ url:'/pages/index/newindex' }); // uni.navigateTo({ // url:'/pages/index/index' // }) } if(index == 2){ this.aindex = index uni.reLaunch({ url:'/pages/xiaoxi/notice' }) } if(index == 3){ this.aindex = index uni.reLaunch({ url:'/pages/my/my' }) } if(index == 4){ this.aindex = index uni.showToast({ title:'此功能暂未开发', icon:'none' }) } } }, beforeDestroy() { clearInterval(this.interval); }, } </script> <style scoped lang="scss"> .bottoms{ width: 100%; height: 50px; position: fixed; bottom: 0px; background: white; display: flex; justify-content: space-between; font-size: 14px; font-weight: 400; z-index: 9999999999999999999999999999999999999999999999999999999; } .box{ width: 50%; text-align: center; font-size: 12px; // background-color: white; } .hongdian{ width: 12px; height: 12px; background-color: crimson; border-radius: 50%; overflow: hidden; position: absolute; top: -5px; right: -8px; z-index: 9999; display: flex; align-items: center; justify-content: center; color: white; font-size: 2px; } .imgs{ margin: 0 auto; margin-top: 10px; width: 22px; height: 20px; image{ width: 100%; height: 100%; } } .xzz{ color: #0D2E8D; } .wxz{ color: #AAAAAA; } </style>