From c11e89124cbccd32d00dc482fc566ec70ba9124a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=BE=81?= <zhangz@163.com>
Date: Tue, 17 May 2022 11:40:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BF=AE=E6=94=B9=E6=8E=A5=E5=8F=A3?=
 =?UTF-8?q?=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/BsChosen.vue            | 10 ++++-
 components/BsLogin.vue             |  1 +
 nuxt.config.js                     |  3 +-
 pages/account/index/message.vue    | 57 ++++-----------------------
 pages/goods/list/index.vue         | 12 +++---
 pages/index/module/TabbarFixed.vue |  1 +
 plugins/im.js                      | 62 ++++++++++++++++++++++++++++++
 store/index.js                     |  8 ++++
 8 files changed, 95 insertions(+), 59 deletions(-)
 create mode 100644 plugins/im.js

diff --git a/components/BsChosen.vue b/components/BsChosen.vue
index 1d74d0d..097ff1b 100644
--- a/components/BsChosen.vue
+++ b/components/BsChosen.vue
@@ -17,7 +17,7 @@
   </div>
 </template>
 <script>
-import { ApiGetRecommendedGoodsList } from "@/plugins/api/goods";
+import { ApiGetGoodsList } from "@/plugins/api/goods";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
 export default {
   components: { UiGoodsItem },
@@ -32,7 +32,13 @@ export default {
   methods: {
     async getRecommendedGoodsList() {
       let vm = this;
-      let res = await ApiGetRecommendedGoodsList();
+      let res = await ApiGetGoodsList({
+        length: 20,
+        pageIndex: 1,
+        name: "",
+        categoryId: "",
+        order: "",
+      });
       vm.recommendedData = res.result;
     },
   },
diff --git a/components/BsLogin.vue b/components/BsLogin.vue
index c326611..8bc8b16 100644
--- a/components/BsLogin.vue
+++ b/components/BsLogin.vue
@@ -167,6 +167,7 @@ export default {
             this.dialogVisible = false;
             this.$store.commit("setToken", result.token);
             this.$store.dispatch("getUserInfo");
+            this.$startWebSockets()
           }
         }
       });
diff --git a/nuxt.config.js b/nuxt.config.js
index c5ba8b5..57b5147 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -45,7 +45,8 @@ export default {
 		'@plugins/axiosTk.js',
 		'@plugins/vue-inject.js',
     '@/plugins/v-distpicker', 
-		'@/plugins/router'
+		'@/plugins/router', 
+		'@/plugins/im'
 	],
 
 	// Auto import components: https://go.nuxtjs.dev/config-components
diff --git a/pages/account/index/message.vue b/pages/account/index/message.vue
index e29c595..5064ecd 100644
--- a/pages/account/index/message.vue
+++ b/pages/account/index/message.vue
@@ -11,7 +11,7 @@
     <main class="main">
       <h3 class="title">消息通知</h3>
       <section class="section">
-        <div class="section__item flex" v-for="item in msgList" :key="item.id">
+        <!-- <div class="section__item flex" v-for="item in 3" :key="item.id">
           <img
             class="section__item-img"
             src="https://img1.baidu.com/it/u=3384796346,381674655&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
@@ -31,7 +31,7 @@
               }}
             </div>
           </div>
-        </div>
+        </div> -->
       </section>
     </main>
   </div>
@@ -40,58 +40,15 @@
 import { mapState } from "vuex";
 export default {
   data() {
-    return {
-      Socket: null,
-      msgList: [],
-    };
+    return {};
   },
   computed: {
-    ...mapState(["token"]),
+    ...mapState(["token"], ["socketMsgData"]),
   },
-  mounted() {
-    let url = `ws://192.168.10.93:8090/ws?client=${this.token}&type=1`;
-    // let url = `wss://k8s-horse-gateway.mashibing.cn/ws?client=${this.token}&type=1`;
-    this.socket(url);
-  },
-  methods: {
-    socket(url) {
-      let vm = this;
-      vm.Socket = new WebSocket(url);
-      vm.Socket.onopen = () => {
-        let traceId = Math.random();
-        vm.Socket.send(
-          `{"traceId":${traceId},traceType:1,"content":{"size": 100}}`
-        );
-      };
-      vm.Socket.onclose = () => {
-        vm.Socket = null;
-      };
-      vm.Socket.onerror = () => {
-        if (vm.Socket.readyState !== 3) {
-          if (vm.reconnection > 3) {
-            // vm.$message.error("链接失败!");
-            return;
-          }
-        }
-      };
-      vm.Socket.onmessage = (e) => {
-        if (e.data == `pong`) {
-          return;
-        }
-        let msg = JSON.parse(e.data);
-        console.log("websocket收到消息", msg);
-        if (msg.traceType == 1) {
-          let traceId = Math.random();
-          let sys = msg.content.sessionVOS.find((item) => item.type != 3);
-          let str = `{"traceId":${traceId},traceType:2,"content":{"sessionId":${sys.id}}}`;
-          vm.Socket.send(str);
-        }
-        if (msg.traceType == 2) {
-          vm.msgList = msg.content;
-        }
-      };
-    },
+  mounted(){
+    console.log(`socketMsgData`,this.socketMsgData)
   },
+  methods: {},
 };
 </script>
 <style lang="scss" scoped>
diff --git a/pages/goods/list/index.vue b/pages/goods/list/index.vue
index 88982d8..e36e8ad 100644
--- a/pages/goods/list/index.vue
+++ b/pages/goods/list/index.vue
@@ -38,11 +38,11 @@
   <div v-else :class="listData && listData.length ? 'page' : ''">
     <main class="main" v-if="listData && listData.length">
       <nav class="main__nav">
-        <p class="main__nav-crumbs">
+        <!-- <p class="main__nav-crumbs">
           全部商品
           <i class="el-icon-arrow-right"></i>
-          <!-- <span v-if="levelType == 2">{{}}</span> -->
-        </p>
+          <span v-if="levelType == 2">{{}}</span>
+        </p> -->
         <div class="main__nav-sort flex flex-middle" v-if="levelType == 1">
           <span class="main__nav-sort-txt">分类 :</span>
           <span
@@ -156,10 +156,8 @@ export default {
       let res = await ApiGetCategoryTwoAndGoods({ categoryId: this.levelId });
       this.categoryOneList = res.result;
       this.getGoodsListData();
-      console.log(res);
     },
     onNavClick(i) {
-      console.log(i);
       let vm = this;
       vm.sortType = i;
       vm.navActive = i;
@@ -196,13 +194,15 @@ export default {
       if (vm.levelType == 1) {
         vm.params.categoryId = vm.categoryOneList[vm.levelActive].id;
       }
+      if(vm.params.name){
+        vm.params.categoryId = ''
+      }
       let res = await ApiGetGoodsList(vm.params);
       vm.pageloading = false;
       if (res.error) {
         vm.$message.error(res.error.message);
         return false;
       }
-      console.log(`goodListRes`, res.result);
       vm.total = res.result.total;
       vm.listData = res.result.records;
     },
diff --git a/pages/index/module/TabbarFixed.vue b/pages/index/module/TabbarFixed.vue
index 418aac8..e4a9c15 100644
--- a/pages/index/module/TabbarFixed.vue
+++ b/pages/index/module/TabbarFixed.vue
@@ -72,6 +72,7 @@ export default {
   },
   mounted() {
     this.getTabBarVisible();
+    this.$startWebSockets()
   },
   methods: {
     getTabBarVisible() {
diff --git a/plugins/im.js b/plugins/im.js
new file mode 100644
index 0000000..e88ae1a
--- /dev/null
+++ b/plugins/im.js
@@ -0,0 +1,62 @@
+import Vue from "vue";
+import { TOKEN_KEY } from "@/constants";
+
+function guid() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == "x" ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+Vue.prototype.$startWebSockets = function () {
+  console.log();
+  let token = this.$cookies.get(TOKEN_KEY);
+  if (token) {
+    let url = `wss://k8s-horse-gateway.mashibing.cn/ws?client=${token}&type=1`;
+    Vue.prototype.Socket = new WebSocket(url);
+    Vue.prototype.Socket.onopen = () => {
+      let traceId = guid();
+      Vue.prototype.Socket.send(
+        `{"traceId":${traceId},traceType:1,"content":{"size": 100}}`
+      );
+    };
+    Vue.prototype.Socket.onclose = () => {
+      Vue.prototype.Socket = null;
+    };
+    // Vue.prototype.Socket.onerror = () => {
+    //   if (Vue.prototype.Socket.readyState !== 3) {
+
+    //   }
+    // };
+    Vue.prototype.Socket.onmessage = (e) => {
+      if (e.data == `pong`) {
+        return;
+      }
+      let msg = JSON.parse(e.data);
+      console.log("websocket收到消息", msg);
+
+      // 获取会话
+      if (msg.traceType == 1) {
+        let traceId = guid();
+        let sys = msg.content.sessionVOS.find((item) => item.type != 3);
+        let str = `{"traceId":${traceId},traceType:2,"content":{"sessionId":${sys.id}}}`;
+        Vue.prototype.Socket.send(str);
+        this.$store.commit("setUnreadCount", msg.content.totalUnreadCount);
+      }
+
+      // 获取消息列表
+      if (msg.traceType == 2) {
+        this.$store.commit("setSocketMsgData", msg.content);
+      }
+
+      // 接收消息
+      if (msg.traceType == 3) {
+        let traceId = guid();
+        Vue.prototype.Socket.send(
+          `{"traceId":${traceId},traceType:1,"content":{"size": 100}}`
+        );
+      }
+    };
+  }
+};
diff --git a/store/index.js b/store/index.js
index 7c4da43..f7315b5 100644
--- a/store/index.js
+++ b/store/index.js
@@ -18,6 +18,8 @@ const state = () => ({
   seckillTabVisible: false, // 公共头是否展示秒杀tab
   cartProducts: [], // 购物车列表
   categroyData: [], // 公共页头分类数据
+  unreadCount:0, //未读消息数量
+  socketMsgData: [], //消息数据对象
 });
 const mutations = {
   setUserInfo(state, info) {
@@ -47,6 +49,12 @@ const mutations = {
   setCategroyData(state, val) {
     state.categroyData = val;
   },
+  setUnreadCount(state, val){
+    state.unreadCount = val;
+  },
+  setSocketMsgData(state, val){
+    state.socketMsgData = val;
+  }
 };
 const actions = {
   async nuxtServerInit({ state, commit, dispatch }) {