{"remainingRequest":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/childComps/DetailChat.vue?vue&type=style&index=0&id=6772d8db&scoped=true&lang=css&","dependencies":[{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/src/views/detail/childComps/DetailChat.vue","mtime":1620200658246},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/css-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/postcss-loader/src/index.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/Users/linhuakun/Downloads/coderlhk/big bar/bigbar-start/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgojY2hhdCB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIGhlaWdodDogMTAwdmg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y1ZjVmNTsKfQoubmF2LWJhciB7CiAgdG9wOiAwcHg7CiAgcG9zaXRpb246IGFic29sdXRlOwogIHdpZHRoOiAxMDAlOwogIGJhY2tncm91bmQtY29sb3I6ICNkZjM4MzI7CiAgZm9udC13ZWlnaHQ6IDUwMHB4OwogIGNvbG9yOiAjZmZmOwogIGJveC1zaGFkb3c6IDFweCBzb2xpZCAjMzMzOwp9Ci5iYWNrIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgd2lkdGg6IDMwcHg7CiAgaGVpZ2h0OiAzMHB4OwogIGxlZnQ6IDEwcHg7CiAgdG9wOiA1MCU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGUoMCwgLTUwJSk7Cn0KLmNvbnRlbnQgewogIGxlZnQ6IDA7CiAgcmlnaHQ6IDA7CiAgdG9wOiA0NHB4OwogIGJvdHRvbTogNDRweDsKICBvdmVyZmxvdzogaGlkZGVuOwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKfQoKLnNob3djb21tZW50IHsKICBwb3NpdGlvbjogZml4ZWQ7CiAgZGlzcGxheTogZmxleDsKICBib3R0b206IDA7CiAgd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiA0NHB4OwogIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7Cn0KCi8qIC5zaG93Y29tbWVudCAud2FycCB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBwb3NpdGlvbjogcmVsYXRpdmU7CiAgd2lkdGg6IDcwJTsKICB0b3A6IDUwJTsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZSgwLCAtNTAlKTsKICBib3JkZXItcmFkaXVzOiA1MHB4OwogIGxlZnQ6IDUlOwogIGhlaWdodDogMzBweDsKfQoKLnNob3djb21tZW50IC53YXJwIHsKICAgIGNvbG9yOiAjMzMzOwogIGZvbnQtd2VpZ2h0OiA0MDA7Cn0gKi8KCi5zaG93Y29tbWVudCBpbnB1dCB7CiAgd2lkdGg6IDcwJTsKICBwYWRkaW5nOiAwIDIwcHg7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIGhlaWdodDogMjVweDsKICBib3JkZXI6IG5vbmU7CiAgdG9wOiA1MCU7CiAgbGVmdDogNDAlOwogIHRyYW5zZm9ybTogdHJhbnNsYXRlKC01MCUsIC01MCUpOwogIGJvcmRlci1yYWRpdXM6IDMwcHg7Cn0KCi5zaG93Y29tbWVudCBzcGFuIHsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgbWFyZ2luOiBhdXRvIGF1dG87CiAgY29sb3I6ICMzMzM7Cn0KLm1pbmllbnRlciB7CiAgbWFyZ2luLXRvcDogNXB4OwogIGZvbnQtc2l6ZTogMTBweDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgY29sb3I6ICM1NTU7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQoubWluZW1zZyB7CiAgbWFyZ2luLXRvcDogMTBweDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICMzMzM7CiAgZm9udC13ZWlnaHQ6IDQwMDsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtZGlyZWN0aW9uOiByb3ctcmV2ZXJzZTsKfQoubWluZW1zZyBpbWcgewogIHdpZHRoOiA0MHB4OwogIGhlaWdodDogNDBweDsKICBib3JkZXItcmFkaXVzOiA1MCU7Cn0KCi5taW5lbXNnIC5taW5lLWJvdHRvbSB7CiAgdGV4dC1hbGlnbjogcmlnaHQ7Cn0KCi5taW5lbXNnIC5taW5lLWJvdHRvbSAubXNnIHsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgbWFyZ2luOiAzcHggM3B4OwogIHBhZGRpbmc6IDVweCA1cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjsKICBib3JkZXItcmFkaXVzOiAxMHB4OwogIGZvbnQtc2l6ZTogMThweDsKfQoubWluZW1zZyAubWluZS1ib3R0b20gLm5hbWVmb250IHsKICB0ZXh0LWFsaWduOiByaWdodDsKICBmb250LXNpemU6IDEycHg7CiAgY29sb3I6ICM5OTk7CiAgZm9udC13ZWlnaHQ6IDQwMDsKfQoubWluZW1zZyAubWluZS1ib3R0b20gLm5hbWVmb250IHNwYW4gewogIHRleHQtYWxpZ246IHJpZ2h0OwogIGZvbnQtc2l6ZTogMTBweDsKICBjb2xvcjogIzk5OTsKICBmb250LXdlaWdodDogNDAwOwp9Cgoub3RoZXJtc2cgewogIGRpc3BsYXk6IGZsZXg7CiAgbWFyZ2luLXRvcDogMTBweDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICMzMzM7Cn0KLm90aGVybXNnIGltZyB7CiAgd2lkdGg6IDQwcHg7CiAgaGVpZ2h0OiA0MHB4OwogIGJvcmRlci1yYWRpdXM6IDUwJTsKfQoKLm90aGVybXNnIC5taW5lLWJvdHRvbSB7CiAgdGV4dC1hbGlnbjogbGVmdDsKfQoKLm90aGVybXNnIC5taW5lLWJvdHRvbSAubXNnIHsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgcGFkZGluZzogM3B4IDNweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmOwogIGJvcmRlci1yYWRpdXM6IDEwcHg7CiAgZm9udC1zaXplOiAxOHB4Owp9Ci5vdGhlcm1zZyAubWluZS1ib3R0b20gLm5hbWVmb250IHsKICBmb250LXNpemU6IDEycHg7CiAgY29sb3I6ICM5OTk7CiAgZm9udC13ZWlnaHQ6IDQwMDsKICBmb250LXNpemU6IDEycHg7Cn0KLm90aGVybXNnIC5taW5lLWJvdHRvbSAubmFtZWZvbnQgc3BhbiB7CiAgZm9udC1zaXplOiAxMHB4OwogIGNvbG9yOiAjOTk5OwogIGZvbnQtd2VpZ2h0OiA0MDA7CiAgZm9udC1zaXplOiAxMHB4Owp9Cg=="},{"version":3,"sources":["DetailChat.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"DetailChat.vue","sourceRoot":"src/views/detail/childComps","sourcesContent":["<template>\n  <div id=\"chat\">\n    <NavBar class=\"nav-bar\">\n      <div slot=\"left\" class=\"back\" @click=\"backClick\">\n        <img src=\"@/assets/img/home/back.svg\" alt=\"\" />\n      </div>\n      <div slot=\"center\" class=\"title\">在线聊天({{ num }})</div>\n    </NavBar>\n    <Scroll\n      class=\"content\"\n      ref=\"scroll\"\n      :probe-type=\"3\"\n      :pull-up-load=\"true\"\n      @pullingUp=\"loadMore\"\n      @pullingDown=\"pullingDown\"\n    >\n      <ul>\n        <li v-for=\"(item, index) in lists\" :key=\"'message' + index\">\n          <div v-if=\"item.size == 0\" class=\"minienter\">\n            {{ item.name }}进入群聊\n          </div>\n          <div v-else-if=\"item.size == 3\" class=\"minienter\">\n            {{ item.name }}退出群聊\n          </div>\n          <div v-else-if=\"item.size == 1\" class=\"minemsg\">\n            <div><img :src=\"getAvatar(item.uid)\" alt=\"\" /></div>\n            <div class=\"mine-bottom\">\n              <div class=\"namefont\">\n                {{ item.name }} <span>{{ formdata(item.date) }} </span>\n              </div>\n              <div class=\"msg\">{{ item.message }}</div>\n            </div>\n          </div>\n          <div v-else class=\"othermsg\">\n            <div><img :src=\"getAvatar(item.uid)\" alt=\"\" /></div>\n            <div class=\"mine-bottom\">\n              <div class=\"namefont\">\n                {{ item.name }} <span>{{ formdata(item.date) }} </span>\n              </div>\n              <div class=\"msg\">{{ item.message }}</div>\n            </div>\n          </div>\n        </li>\n      </ul>\n    </Scroll>\n    <div class=\"showcomment\">\n      <input type=\"text\" maxlength=\"20\" v-model=\"message\" @blur=\"forbidMove()\" />\n      <span @click=\"send()\">发送</span>\n    </div>\n  </div>\n</template>\n\n<script>\nimport NavBar from \"@/components/common/navbar/NavBar\";\nimport Scroll from \"@/components/common/Scroll/Scroll.vue\";\n\nexport default {\n  name: \"DetailChat\",\n  components: {\n    NavBar,\n    Scroll\n  },\n  data() {\n    return {\n      content: \"\",\n      message: \"\",\n      lists: [],\n      ws: {},\n      name: \"\",\n      num: 0,\n      isshow: true,\n      isme: false,\n      roomid: 1,\n      uid: \"\",\n      handle: {},\n      token: \"\"\n    };\n  },\n  updated() {},\n  created() {\n    this.token = window.localStorage.getItem(\"token\");\n    if (!this.token) {\n      this.$router.push(\"/login\");\n    }\n  },\n  methods: {\n    forbidMove() {\n      document.querySelector(\"输入框Dom\").scrollIntoView(false);\n    },\n    formdata(date) {\n      return this.$moment(date).fromNow();\n    },\n    getAvatar(uid) {\n      return \"http://47.108.153.30:8001/users/\" + uid + \"/avatar\";\n    },\n    backClick() {\n      this.ws.close();\n      this.$router.back();\n    },\n    loadMore() {\n      this.$refs.scroll.refresh();\n    },\n    pullingDown() {\n      this.pullingdown = true;\n      setTimeout(() => {\n        this.pullingdown = false;\n        this.$refs.scroll.finishPullDown();\n      }, 300);\n    },\n    init() {\n      this.ws = new WebSocket(\"ws://47.108.153.30:8002/\");\n      this.ws.onopen = this.onOpen;\n      this.ws.onmessage = this.onMessage;\n      this.ws.onclose = this.onClose;\n      this.ws.onerror = this.onError;\n    },\n    enter() {\n      if (this.name.trim() === \"\") {\n        this.$router.push(\"/login\");\n      }\n      this.init();\n      this.isShow = false;\n    },\n    onOpen: function() {\n      // console.log('open:' + this.ws.readyState);\n      //ws.send('Hello fro,m client!')\n      // 发起鉴权请求\n      //this.ws.send(JSON.stringify({\n      //  event: 'auth',\n      //  message: //'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIx//MjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNT//E2MjM5MDIyfQ.//XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o'\n      //}))\n      this.ws.send(\n        JSON.stringify({\n          event: \"enter\",\n          message: this.name,\n          roomid: this.roomid,\n          uid: this.uid,\n          date: new Date()\n        })\n      );\n    },\n    onMessage: function(event) {\n      // 当用户未进入聊天室，则不接收消息\n      if (this.isShow) {\n        return;\n      }\n      // 接收服务端发送过来的消息\n      var obj = JSON.parse(event.data);\n      switch (obj.event) {\n        case \"enter\":\n          // 当有一个新的用户进入聊天室\n          obj.size = 0;\n          this.lists.push(obj);\n          break;\n        case \"out\":\n          obj.size = 3;\n          this.lists.push(obj);\n          break;\n        case \"heartbeat\":\n          // this.checkServer(); // timeInterval + t\n          // 可以注释掉以下心跳状态，主动测试服务端是否会断开客户端的连接\n          this.ws.send(\n            JSON.stringify({\n              event: \"heartbeat\",\n              message: \"pong\"\n            })\n          );\n          break;\n        default:\n          if (obj.name !== this.name) {\n            obj.size = 2;\n            // 接收正常的聊天\n            this.lists.push(obj);\n          }\n      }\n      this.num = obj.num;\n      this.$nextTick(() => {\n        let Lis = document.querySelectorAll(\"li\"); // 查找所有li元素\n        if (\n          Lis[Lis.length - 1].offsetTop + 49 >\n          this.$refs.scroll.$el.clientHeight\n        ) {\n          const height =\n            Lis[Lis.length - 1].offsetTop +\n            49 -\n            this.$refs.scroll.$el.clientHeight;\n          this.$refs.scroll.scrollTo(0, -height, 100);\n          this.$refs.scroll.refresh();\n        }\n      }, 0);\n    },\n    onClose() {\n      // 当链接主动断开的时候触发close事件\n      this.ws.close();\n    },\n    onError() {\n      // 当连接失败时，触发error事件\n      // 连接失败之后，1s进行断线重连！\n      var _this = this;\n      setTimeout(function() {\n        _this.init();\n      }, 1000);\n    },\n    // 发送消息\n    send() {\n      var minemsg = {\n        name: this.name,\n        message: this.message,\n        size: 1,\n        date: new Date(),\n        uid: this.uid\n      };\n      this.lists.push(minemsg);\n      this.$nextTick(() => {\n        let Lis = document.querySelectorAll(\"li\"); // 查找所有li元素\n        if (\n          Lis[Lis.length - 1].offsetTop + 49 >\n          this.$refs.scroll.$el.clientHeight\n        ) {\n          const height =\n            Lis[Lis.length - 1].offsetTop +\n            49 -\n            this.$refs.scroll.$el.clientHeight;\n          this.$refs.scroll.scrollTo(0, -height, 100);\n          this.$refs.scroll.refresh();\n        }\n      }, 0);\n      this.ws.send(\n        JSON.stringify({\n          event: \"message\",\n          message: this.message,\n          name: this.name,\n          uid: this.uid,\n          date: new Date()\n        })\n      );\n      this.message = \"\";\n    },\n    checkServer: function() {\n      var _this = this;\n      clearTimeout(this.handle);\n      this.handle = setTimeout(function() {\n        _this.onClose();\n        setTimeout(function() {\n          _this.init();\n        }, 1000);\n        // 设置1ms的时延，调试在服务器测未及时响应时，客户端的反应\n      }, 30000 + 1000);\n    }\n  },\n  mounted() {\n    this.name = window.localStorage.getItem(\"name\");\n    this.uid = window.localStorage.getItem(\"userId\");\n    var othis = this;\n    othis.enter();\n  }\n};\n</script>\n\n<style scoped>\n#chat {\n  position: relative;\n  height: 100vh;\n  background-color: #f5f5f5;\n}\n.nav-bar {\n  top: 0px;\n  position: absolute;\n  width: 100%;\n  background-color: #df3832;\n  font-weight: 500px;\n  color: #fff;\n  box-shadow: 1px solid #333;\n}\n.back {\n  position: relative;\n  width: 30px;\n  height: 30px;\n  left: 10px;\n  top: 50%;\n  transform: translate(0, -50%);\n}\n.content {\n  left: 0;\n  right: 0;\n  top: 44px;\n  bottom: 44px;\n  overflow: hidden;\n  position: absolute;\n}\n\n.showcomment {\n  position: fixed;\n  display: flex;\n  bottom: 0;\n  width: 100%;\n  height: 44px;\n  background-color: #f0f0f0;\n}\n\n/* .showcomment .warp {\n  background-color: #fff;\n  position: relative;\n  width: 70%;\n  top: 50%;\n  transform: translate(0, -50%);\n  border-radius: 50px;\n  left: 5%;\n  height: 30px;\n}\n\n.showcomment .warp {\n    color: #333;\n  font-weight: 400;\n} */\n\n.showcomment input {\n  width: 70%;\n  padding: 0 20px;\n  position: relative;\n  height: 25px;\n  border: none;\n  top: 50%;\n  left: 40%;\n  transform: translate(-50%, -50%);\n  border-radius: 30px;\n}\n\n.showcomment span {\n  display: inline-block;\n  margin: auto auto;\n  color: #333;\n}\n.minienter {\n  margin-top: 5px;\n  font-size: 10px;\n  text-align: center;\n  color: #555;\n  font-weight: 400;\n}\n.minemsg {\n  margin-top: 10px;\n  font-size: 18px;\n  color: #333;\n  font-weight: 400;\n  display: flex;\n  flex-direction: row-reverse;\n}\n.minemsg img {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n\n.minemsg .mine-bottom {\n  text-align: right;\n}\n\n.minemsg .mine-bottom .msg {\n  display: inline-block;\n  margin: 3px 3px;\n  padding: 5px 5px;\n  background-color: #fff;\n  border-radius: 10px;\n  font-size: 18px;\n}\n.minemsg .mine-bottom .namefont {\n  text-align: right;\n  font-size: 12px;\n  color: #999;\n  font-weight: 400;\n}\n.minemsg .mine-bottom .namefont span {\n  text-align: right;\n  font-size: 10px;\n  color: #999;\n  font-weight: 400;\n}\n\n.othermsg {\n  display: flex;\n  margin-top: 10px;\n  font-size: 18px;\n  color: #333;\n}\n.othermsg img {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n\n.othermsg .mine-bottom {\n  text-align: left;\n}\n\n.othermsg .mine-bottom .msg {\n  display: inline-block;\n  padding: 3px 3px;\n  background-color: #fff;\n  border-radius: 10px;\n  font-size: 18px;\n}\n.othermsg .mine-bottom .namefont {\n  font-size: 12px;\n  color: #999;\n  font-weight: 400;\n  font-size: 12px;\n}\n.othermsg .mine-bottom .namefont span {\n  font-size: 10px;\n  color: #999;\n  font-weight: 400;\n  font-size: 10px;\n}\n</style>\n"]}]}