lanan-repair-app/components/tabBar/tabBar.vue
2024-10-23 17:59:56 +08:00

268 lines
6.6 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="bottoms">
<view class="box" :class="{active: aindex == 1}" @click="getgogo(1)">
<view class="imgs">
<image mode="aspectFit" src="@/static/icons/tabbar/home.png" v-show="aindex != 1"></image>
<image mode="aspectFit" src="@/static/icons/tabbar/home-checked.png" v-show="aindex == 1"></image>
</view>
<view class="">首页</view>
</view>
<view class="box" :class="{active: aindex == 2}" @click="getgogo(2)">
<view class="imgs">
<image mode="aspectFit" src="@/static/icons/tabbar/order.png" v-show="aindex != 2"></image>
<image mode="aspectFit" src="@/static/icons/tabbar/order-checked.png" v-show="aindex == 2"></image>
</view>
<view class="">工单</view>
</view>
<!-- <view class="box" :class="{active: aindex == 3}" @click="getgogo(3)">-->
<!-- <view class="imgs">-->
<!-- <image mode="aspectFit" src="@/static/icons/tabbar/my.png" v-show="aindex != 3"></image>-->
<!-- <image mode="aspectFit" src="@/static/icons/tabbar/my-checked.png" v-show="aindex == 3"></image>-->
<!-- </view>-->
<!-- <view class="">我的</view>-->
<!-- </view>-->
</view>
</template>
<script>
import request from '../../utils/request';
import {
getToken,getUserInfo
} from '@/utils/auth'
let innerAudioContext ='';
// #ifdef APP || H5
const jyJPush = uni.requireNativePlugin('JY-JPush');
// #endif
export default {
data() {
return {
msgSocket: this.$msgSocket,
// 是否正在播放
ifPlay:false,
aindex: 1,
msgNum: null,
identity: 'user',
nowPageInterval: null,
userInfo:{},
arr: [{
text: '首页'
},
{
text: '消息'
},
{
text: '运力'
}
]
}
},
props: {
msg: String|Number
},
onLoad() {
this.userInfo = getUserInfo();
console.log('tabbag', uni.getStorageSync('identity'));
},
onUnload() {
if (this.nowPageInterval) {
clearTimeout(this.nowPageInterval);
}
},
mounted() {
// #ifdef APP || H5
this.identity = uni.getStorageSync('identity');
// #endif
if (!this.nowPageInterval) {
this.nowPageInterval = setInterval(() => {
// console.log('this.$msgSocket: ',this.$msgSocket);
this.msgSocket = this.$msgSocket
}, 3000);
}
console.log(this.aindex);
setTimeout(() => {
this.msgInfo()
}, 2000);
this.aindex = this.msg
},
watch: {
msgSocket(newVal, oldVal) {
console.log('msgSocket值发生变化', newVal, oldVal)
this.msgInfo()
},
deep: true,
},
methods: {
dianyidain() {
if(!this.ifPlay){
console.log('执行了dianyidain');
if(innerAudioContext!=""){
try {
console.log('调用前先销毁');
innerAudioContext.stop();
innerAudioContext.destroy();
innerAudioContext="";
}catch (e){
console.log('销毁出错');
}
}
innerAudioContext = uni.createInnerAudioContext();
this.ifPlay=true
// #ifdef APP-PLUS
innerAudioContext.src = '../../static/msgV.mp3';
// #endif
// #ifndef APP-PLUS
innerAudioContext.src = 'https://www.nuoyunr.com/lananRsc/rescue/msgV.mp3';
// #endif
// 设置播放次数和计数器
const playCount = 3;
let currentCount = 0;
// 初次播放
innerAudioContext.play();
innerAudioContext.onError((err) => {
console.error('播放错误', err);
this.ifPlay=false
innerAudioContext.stop();
innerAudioContext.destroy(); // 播放错误后释放实例
});
// 监听音频播放结束事件
innerAudioContext.onEnded(() => {
// 播放计数加一
currentCount++;
// 判断是否达到播放次数上限
if (currentCount < playCount) {
// 继续播放
innerAudioContext.play();
} else {
// 播放完成,可以在这里添加额外的逻辑
console.log('播放完成');
this.ifPlay=false
//及时释放资源
innerAudioContext.stop();
innerAudioContext.destroy();
}
});
}else{
console.log('正在播放音频,拒绝播放请求');
}
},
msgInfo() {
console.log(this.msgSocket, 'msgSocket')
if (this.msgSocket) {
console.log('消息回调启动成功')
this.msgSocket.onMessage(res => {
console.log("发出提示音", res);
// this.getbottom();
this.dianyidain()
})
}
},
async getbottom() {
if (!getToken()) {
return
}
let res = await request({
url: '/announcement/announcement/getOwnNoRead',
method: 'get',
})
console.log('jitiao', res);
if (res.code == 200) {
this.msgNum = res.data
}
},
getgogo(index) {
const userInfo = getUserInfo()
if (index == 1) {
this.aindex = index
if (userInfo.roleCodes.includes("repair_warehouse")){
//跳转首页
uni.navigateTo({
url: '/pages-warehouse/home/home'
})
} else {
uni.reLaunch({
url: '/pages-home/home/home'
})
}
}
if (index == 2) {
this.aindex = index
uni.reLaunch({
url: '/pages-order/orderList/orderList'
})
}
if (index == 3) {
this.aindex = index
uni.reLaunch({
url: '/pages/my/my'
})
}
}
}
}
</script>
<style scoped lang="scss">
.bottoms {
width: 100%;
// position: fixed;
// bottom: 0px;
background: #fff;
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
padding: 12rpx 40rpx;
box-sizing: border-box;
box-shadow: 4rpx 2rpx 12rpx 0 #c3c3c3;
position: relative;
z-index: 99;
}
.box {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
color: #929292;
&.active {
color: #327DFB;
}
}
.imgs {
margin: 0 auto;
width: 50rpx;
height: 50rpx;
image {
width: 100%;
height: 100%;
}
}
.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;
}
</style>