qingyiay
2023-04-17 169e9b4d59bdd763bb5bd1b5a9b092a1200e327b
pages/tabbar-page/index-tabbar/index-tabbar.vue
@@ -1,5 +1,8 @@
<template>
   <view>
      <view class="search-bar">
         <view class="icon-box" @click="messagePage"><u-icon name="chat" color="#000" size="50"></u-icon></view>
      </view>
      <customer-index v-if="roleType == 1" ref="customerIndexRef" :orderPlanDataStore="orderPlanDataStore"></customer-index>
      <freight-forwarder-index
         v-if="roleType == 2"
@@ -9,6 +12,8 @@
      ></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" :content="messageList.content" @confirm="messageconfirm"></u-modal>
   </view>
</template>
@@ -16,46 +21,68 @@
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 } from 'vuex';
import { mapState, mapMutations } from 'vuex';
import { webSocketUrl } from '@/api/request.js';
let socket = null;
export default {
   components: {
      customerIndex,
      driverIndex,
      freightForwarderIndex
   },
   computed: {
      ...mapState(['globalweighHouseCode', 'globalweigh'])
   },
   //首页下拉刷新
   onPullDownRefresh() {
      uni.showLoading({
         title: '加载中...'
      });
      // 客户获取日计划
      if (this.roleType == 1) {
         this.$reqGet('GetOrderPlan').then(res => {
            if (res.data) {
               this.orderPlanDataStore = res.data;
               uni.hideLoading();
               uni.stopPullDownRefresh();
            }
         });
      } else if (this.roleType == 2) {
         this.$reqGet('huoDaiList').then(res => {
            this.indexHuoDaiOrderPlanData = res.data;
            uni.hideLoading();
            uni.stopPullDownRefresh();
         });
         // 获取历史提煤单
      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 => {
            this.indexdriverBillOfLoadingData = res.data;
            uni.hideLoading();
            uni.stopPullDownRefresh();
            if (res.code == 0) {
               this.indexdriverBillOfLoadingData = res.data;
               this.$u.toast('加载成功');
               uni.hideLoading();
               uni.stopPullDownRefresh();
            } else {
               this.$u.toast('加载失败');
               uni.hideLoading();
               uni.stopPullDownRefresh();
            }
         });
      }
   },
@@ -82,14 +109,26 @@
         orderPlanDataStore: [],
         indexHuoDaiOrderPlanData: [],
         indexHistoryCoalData: [],
         indexdriverBillOfLoadingData: {}
         indexdriverBillOfLoadingData: {},
         messagePushShow: false,
         messageList: {},
         isconnect: false
      };
   },
   onShow() {
      this.init();
      if (!this.isconnect) {
         this.initWebsocket();
      }
      this.userAuthorization();
   },
   methods: {
      ...mapMutations(['pushMessage', 'changeWeigh', 'changeinfraredStatus']),
      messagePage() {
         uni.navigateTo({
            url: '/pages/public-page/message/message'
         });
      },
      init() {
         this.roleType = uni.getStorageSync('roleType');
         switch (this.roleType) {
@@ -151,9 +190,76 @@
               console.log('获取失败');
            }
         });
      },
      // 初始化websocket
      initWebsocket() {
         let wsUrl = `${webSocketUrl}?access_token=${uni.getStorageSync('token')}`;
         socket = uni.connectSocket({
            url: wsUrl,
            header: {
               CLIENT_TOC: 'Y'
            },
            complete: res => {
               console.log(res, 'socket结果');
               if (res.errMsg == 'connectSocket:ok') {
                  this.isconnect = true;
               }
            }
         });
         socket.onOpen(() => {
            console.log('onOpen');
         });
         // 获取服务器传来的数据,做相应处理
         socket.onMessage(res => {
            console.log('socketWeigh', res);
            if (res.data.startsWith('weigh')) {
               let nowWeighObj = JSON.parse(res.data.slice(7));
               if (this.globalweighHouseCode && nowWeighObj.eqCode == this.globalweighHouseCode) {
                  if (nowWeighObj.eqInfraredStatus) {
                     this.changeinfraredStatus(true);
                     this.changeWeigh(nowWeighObj.weigh);
                  } else {
                     this.changeinfraredStatus(false);
                     this.changeWeigh(nowWeighObj.weigh);
                  }
               }
            } else {
               this.messageList = JSON.parse(res.data.slice(5));
               this.messagePushShow = true;
            }
         });
         socket.onClose(() => {
            console.log('webSocketClose');
            this.isconnect = false;
         });
         socket.onError(err => {
            console.log('socket报错', err);
            this.$u.toast('出现错误,请重新进入该页面,重试!!');
         });
      },
      messageconfirm() {
         this.messagePushShow = false;
      }
   }
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.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);
   }
}
</style>