验质功能修改，websocket优化

qingyiay

2023-07-07 837c21ced9ed0aafe17a7c0c16975a1b6731eb9d

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

@@ -2,256 +2,150 @@
   <view class="max-block">
      <view class="search-bar">
         <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 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
         v-if="roleType == 2"
      <customer-index v-if="roleType == 1||roleType == 4"
         ref="customerIndexRef"
         :orderPlanDataStore="orderPlanDataStore"></customer-index>
      <freight-forwarder-index v-if="roleType == 2"
         ref="freightForwarderIndexRef"
         :indexHistoryCoalData="indexHistoryCoalData"
         :indexHuoDaiOrderPlanData="indexHuoDaiOrderPlanData"
      ></freight-forwarder-index>
      <driver-index v-if="roleType == 3" ref="driverIndexRef" :indexdriverBillOfLoadingData="indexdriverBillOfLoadingData"></driver-index>
         :indexHuoDaiOrderPlanData="indexHuoDaiOrderPlanData"></freight-forwarder-index>
      <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" confirm-text="前去查看">
         <view class="slot-content"><rich-text :nodes="messageList.content"></rich-text></view>
      <u-modal :show="messagePushShow"
         :title="messageList.title"
         @confirm="messageconfirm"
         confirm-text="前去查看">
         <view class="slot-content"><u-parse :content="messageList.content"></u-parse></view>
      </u-modal>
      <view class="white-block"></view>
      <!-- <view class="white-block"></view> -->
   </view>
</template>

<script>
import customerIndex from '@/pages/customer-page/customer-index/customer-index.vue';
import driverIndex from '@/pages/driver-page/driver-index/driver-index.vue';
import freightForwarderIndex from '@/pages/freight-forwarder-page/freightForwarder-index/freightForwarder-index.vue';
import { mapState, mapMutations } from 'vuex';
import { webSocketUrl } from '@/api/request.js';
   import customerIndex from '@/pages/customer-page/customer-index/customer-index.vue';
   import driverIndex from '@/pages/driver-page/driver-index/driver-index.vue';
   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: {
      customerIndex,
      driverIndex,
      freightForwarderIndex
   },
   computed: {
      ...mapState(['globalweighHouseCode', 'globalweigh', 'globalisconnect'])
   },
   watch: {
      globalisconnect(v, oldv) {}
   },
   //首页下拉刷新
   onPullDownRefresh() {
      uni.showLoading({ title: '加载中...' });
      // 获取历史提煤单
      if (this.roleType == 1 || this.roleType == 2) {
         this.$reqGet('getJhOrderPlanDataPage', { current: 1, size: 10 }).then(res => {
            if (res.data.records) {
               this.indexHistoryCoalData = res.data.records;
               uni.hideLoading();
               uni.stopPullDownRefresh();
            } else {
               this.$u.toast('加载失败');
            }
         });
      }
      // 客户获取日计划
      if (this.roleType == 1) {
         this.$reqGet('GetOrderPlan').then(res => {
            if (res.data) {
               this.orderPlanDataStore = res.data;
               this.$u.toast('加载成功');
               uni.hideLoading();
               uni.stopPullDownRefresh();
            } else {
               this.$u.toast('加载失败');
            }
         });
      } else if (this.roleType == 2) {
         this.$reqGet('huoDaiList').then(res => {
            if (res.data) {
               this.indexHuoDaiOrderPlanData = res.data;
               this.$u.toast('加载成功');
               uni.hideLoading();
               uni.stopPullDownRefresh();
            } else {
               this.$u.toast('加载失败');
            }
         });
      } else if (this.roleType == 3) {
         this.$reqGet('qiangDanList').then(res => {
            if (res.code == 0) {
               this.indexdriverBillOfLoadingData = res.data;
               this.$u.toast('加载成功');
               uni.hideLoading();
               uni.stopPullDownRefresh();
            } else {
               this.$u.toast('加载失败');
               uni.hideLoading();
               uni.stopPullDownRefresh();
            }
         });
      }
   },
   onLoad() {
      // 开启双人通话
      wx.setEnable1v1Chat({
         enable: true,
         backgroundType: 1,
         minWindowType: 2,
         success() {
            console.log('开启双人通话成功');
         },
         fail() {
            console.log('开启双人通话失败');
         },
         complete() {
            console.log('开启双人通话成功Complete');
         }
      });
   },
   data() {
      return {
         roleType: null,
         orderPlanDataStore: [],
         indexHuoDaiOrderPlanData: [],
         indexHistoryCoalData: [],
         indexdriverBillOfLoadingData: {},
         messagePushShow: false,
         messageList: {},
         isconnect: false,
         dotShow: false
      };
   },
   onShow() {
      this.init();
      if (!this.globalisconnect || !this.isconnect) {
         this.initWebsocket();
      }
      this.userAuthorization();
      this.messageReq();
   },
   onHide() {
      console.log('页面隐藏');
      // this.isconnect = false;
      // this.changeisconnect(false);
      // socket.close();
      if (!this.globalisconnect || !this.isconnect) {
         this.initWebsocket();
      }
   },
   onUnload() {
      console.log('页面卸载');
      socket.close();
      clearInterval(this.intervalId);
   },
   methods: {
      ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus', 'changeisconnect']),
      messagePage() {
         uni.navigateTo({
            url: '/pages/public-page/message/message'
         });
   let socket = null;
   export default {
      components: {
         customerIndex,
         driverIndex,
         freightForwarderIndex
      },
      init() {
         this.roleType = uni.getStorageSync('roleType');
         switch (this.roleType) {
            case 1:
               console.log('customerIndexRef');
               this.$nextTick(() => {
                  this.$refs.customerIndexRef.init();
               });
               break;
            case 2:
               console.log('freightForwarderIndexRef');
               this.$nextTick(() => {
                  this.$refs.freightForwarderIndexRef.init();
               });
               break;
            case 3:
               console.log('driverIndexRef');
               this.$nextTick(() => {
                  this.$refs.driverIndexRef.init();
               });
               break;
            default:
               break;
         }
      computed: {
         ...mapState(['globalweighHouseCode', 'globalweigh', 'globalisconnect', 'globalSocket', 'websocketData',
            'globalIntervalId'
         ])
      },
      // 要求用户授权相机/麦克风权限
      userAuthorization() {
         wx.getSetting({
            success(res) {
               // wx.startRecord();
               console.log('success');
               if (!res.authSetting['scope.record'] || !res.authSetting['scope.camera']) {
                  if (!res.authSetting['scope.camera']) {
                     wx.authorize({
                        scope: 'scope.camera',
                        success() {
                           // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
                           console.log('授权成功');
                        },
                        fail() {
                           console.log('授权失败');
                        }
                     });
                  } else if (!res.authSetting['scope.record']) {
                     wx.authorize({
                        scope: 'scope.record',
                        success() {
                           // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
                           console.log('授权成功');
                        },
                        fail: () => {
                           console.log('授权失败');
                        }
                     });
                  }
      //首页下拉刷新
      onPullDownRefresh() {
         uni.showLoading({ title: '加载中...' });
         // 获取历史提煤单
         if (this.roleType == 1 || this.roleType == 2) {
            this.$reqGet('getJhOrderPlanDataPage', { current: 1, size: 10 }).then(res => {
               if (res.data.records) {
                  this.indexHistoryCoalData = res.data.records;
                  uni.hideLoading();
                  uni.stopPullDownRefresh();
               } else {
                  this.$u.toast('加载失败');
               }
            });
         }
         // 客户获取日计划
         if (this.roleType == 1 || this.roleType == 4) {
            this.$reqGet('GetOrderPlan').then(res => {
               if (res.data) {
                  this.orderPlanDataStore = res.data;
                  this.$u.toast('加载成功');
                  uni.hideLoading();
                  uni.stopPullDownRefresh();
               } else {
                  this.$u.toast('加载失败');
               }
            });
         } else if (this.roleType == 2) {
            this.$reqGet('huoDaiList').then(res => {
               if (res.data) {
                  this.indexHuoDaiOrderPlanData = res.data;
                  this.$u.toast('加载成功');
                  uni.hideLoading();
                  uni.stopPullDownRefresh();
               } else {
                  this.$u.toast('加载失败');
               }
            });
         } else if (this.roleType == 3) {
            this.$reqGet('qiangDanList').then(res => {
               if (res.code == 0) {
                  this.indexdriverBillOfLoadingData = res.data;
                  this.$u.toast('加载成功');
                  uni.hideLoading();
                  uni.stopPullDownRefresh();
               } else {
                  this.$u.toast('加载失败');
                  uni.hideLoading();
                  uni.stopPullDownRefresh();
               }
            });
         }
      },
      onLoad() {
         // 开启双人通话
         wx.setEnable1v1Chat({
            enable: true,
            backgroundType: 1,
            minWindowType: 2,
            success() {
               console.log('开启双人通话成功');
            },
            fail() {
               console.log('获取失败');
               console.log('开启双人通话失败');
            },
            complete() {
               console.log('开启双人通话成功Complete');
            }
         });
      },
      // 初始化websocket
      initWebsocket() {
         let wsUrl = `${webSocketUrl}?access_token=${uni.getStorageSync('token')}`;
         socket = uni.connectSocket({
            url: wsUrl,
            header: {
               CLIENT_TOC: 'Y'
      data() {
         return {
            roleType: null,
            orderPlanDataStore: [],
            indexHuoDaiOrderPlanData: [],
            indexHistoryCoalData: [],
            indexdriverBillOfLoadingData: {},
            messagePushShow: false,
            messageList: {
               title: '',
               content: "",
            },
            complete: res => {
               console.log(res, 'socket结果');
               if (res.errMsg == 'connectSocket:ok') {
                  this.changeisconnect(true);
                  this.isconnect = true;
               }
            }
         });
         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('message', res);
            if (res.data.startsWith('weigh')) {
               let nowWeighObj = JSON.parse(res.data.slice(7));
            isconnect: false,
            dotShow: false,
            appHide: false
         };
      },
      watch: {
         '$store.state.websocketData'(v) {
            console.log(v, '接受的ws数据');
            if (v.startsWith('weigh')) {
               let nowWeighObj = JSON.parse(v.slice(7));
               if (this.globalweighHouseCode && nowWeighObj.eqCode == this.globalweighHouseCode) {
                  if (nowWeighObj.eqInfraredStatus) {
                     this.changeinfraredStatus(true);
@@ -261,80 +155,174 @@
                     this.changeWeigh(nowWeighObj.weigh);
                  }
               }
            } else if (res.data.startsWith('msg')) {
               this.messageList = JSON.parse(res.data.slice(5));
            } else if (v.startsWith('msg')) {
               function removeTags(str) {
                  return str.replace(/<\/?[^>]+>/gi, '');
               }
               this.messageList = JSON.parse(v.slice(5));
               this.messageList = {
                  ...this.messageList,
                  title: this.messageList.title.slice(0, 8) + '...',
                  content: removeTags(this.messageList.content).trim().slice(0, 8) + '...'
               }
               this.messagePushShow = true;
            } else {
            } else {}
         }
      },
      onShow() {
         this.init();
         if (this.globalisconnect) {
            this.$store.dispatch('websocketInit')
            this.changeisconnect(false)
            this.changeisLogin(true)
            console.log(this.globalisconnect, 'index的ws数据’');
         }
         this.userAuthorization();
         this.messageReq();
      },
      onUnload() {
         console.log('页面卸载');
         this.$store.dispatch('websocketOnClose')
         clearInterval(this.globalIntervalId);
         this.changeisconnect(true)
      },
      methods: {
         ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus', 'changeisconnect', 'websocketInit',
            'changeisLogin'
         ]),
         messagePage() {
            uni.navigateTo({
               url: '/pages/public-page/message/message'
            });
         },
         init() {
            this.roleType = uni.getStorageSync('roleType');
            switch (this.roleType) {
               case 1:
                  console.log('customerIndexRef');
                  this.$nextTick(() => {
                     this.$refs.customerIndexRef.init();
                  });
                  break;
               case 2:
                  console.log('freightForwarderIndexRef');
                  this.$nextTick(() => {
                     this.$refs.freightForwarderIndexRef.init();
                  });
                  break;
               case 3:
                  console.log('driverIndexRef');
                  this.$nextTick(() => {
                     this.$refs.driverIndexRef.init();
                  });
                  break;
               case 4:
                  console.log('customerIndexRef');
                  this.$nextTick(() => {
                     this.$refs.customerIndexRef.init();
                  });
                  break;
               default:
                  break;
            }
         });
         socket.onClose(e => {
            console.log('webSocketClose', e);
            this.isconnect = false;
         });
         socket.onError(err => {
            console.log('socket报错', err);
            this.$u.toast('出现错误，请重新进入该页面，重试！！');
         });
      },
      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.map(v => {
                  if (v.status !== 1) {
                     this.dotShow = true;
                  } else {
                     this.dotShow = false;
         },
         // 要求用户授权相机/麦克风权限
         userAuthorization() {
            wx.getSetting({
               success(res) {
                  // wx.startRecord();
                  console.log('授权相机/麦克风权限success');
                  if (!res.authSetting['scope.record'] || !res.authSetting['scope.camera']) {
                     if (!res.authSetting['scope.camera']) {
                        wx.authorize({
                           scope: 'scope.camera',
                           success() {
                              // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
                              console.log('授权成功');
                           },
                           fail() {
                              console.log('授权失败');
                           }
                        });
                     } else if (!res.authSetting['scope.record']) {
                        wx.authorize({
                           scope: 'scope.record',
                           success() {
                              // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
                              console.log('授权成功');
                           },
                           fail: () => {
                              console.log('授权失败');
                           }
                        });
                     }
                  }
               });
            }
         });
               },
               fail() {
                  console.log('获取失败');
               }
            });
         },
         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;
                  let filtermessage = this.messageList.filter(v => v.status == 0);
                  this.dotShow = filtermessage.length > 0;
               }
            });
         }
      }
   }
};
   };
</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%;
   position: absolute;
   top: vww(96);
   right: vww(32);
   z-index: 1;
   .icon-body {
      position: relative;
      display: flex;
      justify-content: flex-end;
      .icon-box {
         width: vww(30);
         height: vww(30);
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
<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%;
      position: absolute;
      top: vww(96);
      right: vww(32);
      z-index: 1;

      .icon-body {
         position: relative;
         /deep/ .u-badge {
            position: absolute;
            left: vww(18);
            top: vww(5);
            z-index: 1;
         display: flex;
         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>
</style>