样式全面修改，所有页面焕然一新

qingyiay

2023-05-05 79993be468244e6cc16ce9c1d7e8736bd359c600

 pages/tabbar-page/index-tabbar/index-tabbar.vue

@@ -1,7 +1,9 @@
<template>
   <view>
      <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-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,7 +15,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" :content="messageList.content" @confirm="messageconfirm"></u-modal>
      <u-modal :show="messagePushShow" :title="messageList.title" @confirm="messageconfirm">
         <view class="slot-content"><rich-text :nodes="messageList.content"></rich-text></view>
      </u-modal>
      <view class="white-block"></view>
   </view>
</template>

@@ -122,6 +127,17 @@
      }
      this.userAuthorization();
   },
   onHide() {
      console.log('页面隐藏');
      if (!this.isconnect) {
         this.initWebsocket();
      }
   },
   onUnload() {
      console.log('页面卸载');
      socket.close();
      clearInterval(this.intervalId);
   },
   methods: {
      ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus']),
      messagePage() {
@@ -208,10 +224,19 @@
         });
         socket.onOpen(() => {
            console.log('onOpen');
            this.intervalId = setInterval(() => {
               socket.send({
                  data: JSON.stringify({ type: 'ping' }),
                  success(e) {
                     console.log(e, '发送心跳成功');
                  }
               });
            }, 30000);
         });

         // 获取服务器传来的数据，做相应处理
         socket.onMessage(res => {
            console.log('socketWeigh', res);
            console.log('message', res);
            if (res.data.startsWith('weigh')) {
               let nowWeighObj = JSON.parse(res.data.slice(7));
               if (this.globalweighHouseCode && nowWeighObj.eqCode == this.globalweighHouseCode) {
@@ -223,13 +248,16 @@
                     this.changeWeigh(nowWeighObj.weigh);
                  }
               }
            } else {
            } else if (res.data.startsWith('msg')) {
               this.messageList = JSON.parse(res.data.slice(5));
               this.messagePushShow = true;
            } else {
               console.log('websocket启动中');
            }
         });
         socket.onClose(() => {
            console.log('webSocketClose');
         socket.onClose(e => {
            console.log('webSocketClose', e);
            // this.$u.toast('连接已断开，请重新进入该页面，重试！！');
            this.isconnect = false;
         });
         socket.onError(err => {
@@ -245,21 +273,30 @@
</script>

<style lang="scss" scoped>
.white-block {
   width: 100%;
   height: vww(50);
   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%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: vww(-3);
   position: fixed;
   top: vww(96);
   right: vww(32);
   z-index: 1;
   .icon-body {
      position: relative;
      .icon-box {
         width: vww(30);
         height: vww(30);
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         position: absolute;
         right: vww(-3);
      }
   }
}
</style>