qingyiay
2023-05-17 ae1aad66a165ee7253bed2127a3b53baa40c2361
pages/tabbar-page/index-tabbar/index-tabbar.vue
@@ -1,7 +1,12 @@
<template>
   <view>
   <view class="max-block">
      <view class="search-bar">
         <view class="icon-box" @click="messagePage"><u-icon name="chat" color="#000" size="50"></u-icon></view>
         <view class="icon-body">
            <view class="icon-box" @click="messagePage">
               <u-badge :isDot="true" type="error" v-if="dotShow"></u-badge>
               <u-icon name="chat" color="#fff" size="50"></u-icon>
            </view>
         </view>
      </view>
      <customer-index v-if="roleType == 1" ref="customerIndexRef" :orderPlanDataStore="orderPlanDataStore"></customer-index>
      <freight-forwarder-index
@@ -13,9 +18,10 @@
      <driver-index v-if="roleType == 3" ref="driverIndexRef" :indexdriverBillOfLoadingData="indexdriverBillOfLoadingData"></driver-index>
      <tab-bar :current="0"></tab-bar>
      <!-- 推送消息弹窗 -->
      <u-modal :show="messagePushShow" :title="messageList.title" @confirm="messageconfirm">
      <u-modal :show="messagePushShow" :title="messageList.title" @confirm="messageconfirm" confirm-text="前去查看">
         <view class="slot-content"><rich-text :nodes="messageList.content"></rich-text></view>
      </u-modal>
      <view class="white-block"></view>
   </view>
</template>
@@ -25,6 +31,7 @@
import freightForwarderIndex from '@/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue';
import { mapState, mapMutations } from 'vuex';
import { webSocketUrl } from '@/api/request.js';
let socket = null;
export default {
   components: {
@@ -33,7 +40,10 @@
      freightForwarderIndex
   },
   computed: {
      ...mapState(['globalweighHouseCode', 'globalweigh'])
      ...mapState(['globalweighHouseCode', 'globalweigh', 'globalisconnect'])
   },
   watch: {
      globalisconnect(v, oldv) {}
   },
   //首页下拉刷新
   onPullDownRefresh() {
@@ -114,19 +124,24 @@
         indexdriverBillOfLoadingData: {},
         messagePushShow: false,
         messageList: {},
         isconnect: false
         isconnect: false,
         dotShow: false
      };
   },
   onShow() {
      this.init();
      if (!this.isconnect) {
      if (!this.globalisconnect || !this.isconnect) {
         this.initWebsocket();
      }
      this.userAuthorization();
      this.messageReq();
   },
   onHide() {
      console.log('页面隐藏');
      if (!this.isconnect) {
      // this.isconnect = false;
      // this.changeisconnect(false);
      // socket.close();
      if (!this.globalisconnect || !this.isconnect) {
         this.initWebsocket();
      }
   },
@@ -136,7 +151,7 @@
      clearInterval(this.intervalId);
   },
   methods: {
      ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus']),
      ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus', 'changeisconnect']),
      messagePage() {
         uni.navigateTo({
            url: '/pages/public-page/message/message'
@@ -215,6 +230,7 @@
            complete: res => {
               console.log(res, 'socket结果');
               if (res.errMsg == 'connectSocket:ok') {
                  this.changeisconnect(true);
                  this.isconnect = true;
               }
            }
@@ -249,12 +265,10 @@
               this.messageList = JSON.parse(res.data.slice(5));
               this.messagePushShow = true;
            } else {
               console.log('websocket启动中');
            }
         });
         socket.onClose(e => {
            console.log('webSocketClose', e);
            // this.$u.toast('连接已断开,请重新进入该页面,重试!!');
            this.isconnect = false;
         });
         socket.onError(err => {
@@ -264,27 +278,63 @@
      },
      messageconfirm() {
         this.messagePushShow = false;
         uni.navigateTo({
            url: '/pages/public-page/message/message'
         });
      },
      messageReq() {
         this.$reqGet('getMessageByUser', { current: 1, size: 10 }).then(res => {
            if (res.code == 0) {
               this.messageList = res.data.records;
               this.messageList.forEach(v => {
                  if (v.status !== 1) {
                     this.dotShow = true;
                  } else {
                     this.dotShow = false;
                  }
               });
            }
         });
      }
   }
};
</script>
<style lang="scss" scoped>
.max-block {
   font-family: siYuanLight !important;
}
.white-block {
   width: 100%;
   height: vww(20);
   margin-top: vww(10);
}
.search-bar {
   height: vww(20);
   width: 96%;
   margin: vww(3) auto;
   position: relative;
   .icon-box {
      width: vww(30);
      height: vww(30);
      background-color: #eee;
      border-radius: 50%;
   position: absolute;
   top: vww(96);
   right: vww(32);
   z-index: 1;
   .icon-body {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: vww(-3);
      justify-content: flex-end;
      .icon-box {
         width: vww(30);
         height: vww(30);
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
         /deep/ .u-badge {
            position: absolute;
            left: vww(18);
            top: vww(5);
            z-index: 1;
         }
      }
   }
}
</style>