| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\kefu\\pc\\components\\chatList.vue?vue&type=script&lang=js","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\kefu\\pc\\components\\chatList.vue","mtime":1761185180103},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\babel-loader\\lib\\index.js","mtime":456789000000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQppbXBvcnQgeyBTb2NrZXQgfSBmcm9tICdAL2xpYnMvc29ja2V0JzsNCmltcG9ydCBkYXlqcyBmcm9tICdkYXlqcyc7DQppbXBvcnQgeyByZWNvcmQgfSBmcm9tICdAL2FwaS9rZWZ1JzsNCmltcG9ydCB7IEhhcHB5U2Nyb2xsIH0gZnJvbSAndnVlLWhhcHB5LXNjcm9sbCc7DQppbXBvcnQgZW1wdHkgZnJvbSAnLi4vLi4vY29tcG9uZW50cy9lbXB0eSc7DQppbXBvcnQgeyBmb3JFYWNoIH0gZnJvbSAnLi4vLi4vLi4vLi4vbGlicy90b29scyc7DQpleHBvcnQgZGVmYXVsdCB7DQogIG5hbWU6ICdjaGF0TGlzdCcsDQogIHByb3BzOiB7DQogICAgdXNlck9ubGluZTogew0KICAgICAgdHlwZTogT2JqZWN0LA0KICAgICAgZGVmYXVsdDogZnVuY3Rpb24gKCkgew0KICAgICAgICByZXR1cm4ge307DQogICAgICB9LA0KICAgIH0sDQogICAgbmV3UmVjb3JlZDogew0KICAgICAgdHlwZTogT2JqZWN0LA0KICAgICAgZGVmYXVsdDogZnVuY3Rpb24gKCkgew0KICAgICAgICByZXR1cm4ge307DQogICAgICB9LA0KICAgIH0sDQogICAgc2VhcmNoRGF0YTogew0KICAgICAgdHlwZTogU3RyaW5nLA0KICAgICAgZGVmYXVsdDogJycsDQogICAgfSwNCiAgfSwNCiAgY29tcG9uZW50czogew0KICAgIEhhcHB5U2Nyb2xsLA0KICAgIGVtcHR5LA0KICB9LA0KICB3YXRjaDogew0KICAgIHVzZXJPbmxpbmU6IHsNCiAgICAgIGhhbmRsZXIoblZhbCwgb1ZhbCkgew0KICAgICAgICBpZiAoblZhbC5oYXNPd25Qcm9wZXJ0eSgndG9fdWlkJykpIHsNCiAgICAgICAgICB0aGlzLnVzZXJMaXN0LmZvckVhY2goKGVsLCBpbmRleCkgPT4gew0KICAgICAgICAgICAgaWYgKGVsLnRvX3VpZCA9PSBuVmFsLnRvX3VpZCkgew0KICAgICAgICAgICAgICBlbC5vbmxpbmUgPSBuVmFsLm9ubGluZTsNCiAgICAgICAgICAgICAgaWYgKG5WYWwub25saW5lID09IDEpIHsNCiAgICAgICAgICAgICAgICB0aGlzLiRub3RpZnkuaW5mbyh7DQogICAgICAgICAgICAgICAgICB0aXRsZTogJ+S4iue6v+mAmuefpScsDQogICAgICAgICAgICAgICAgICBtZXNzYWdlOiBgJHtlbC5uaWNrbmFtZX3kuIrnur9gLA0KICAgICAgICAgICAgICAgIH0pOw0KICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgICAgfSk7DQogICAgICAgIH0NCiAgICAgIH0sDQogICAgICBkZWVwOiB0cnVlLA0KICAgIH0sDQogICAgc2VhcmNoRGF0YTogew0KICAgICAgaGFuZGxlcihuVmFsLCBvVmFsKSB7DQogICAgICAgIGlmIChuVmFsICE9IG9WYWwpIHsNCiAgICAgICAgICB0aGlzLm5pY2tuYW1lID0gblZhbDsNCiAgICAgICAgICB0aGlzLnBhZ2UgPSAxOw0KICAgICAgICAgIHRoaXMuaXNTY3JvbGwgPSB0cnVlOw0KICAgICAgICAgIHRoaXMudXNlckxpc3QgPSBbXTsNCiAgICAgICAgICB0aGlzLmdldExpc3QoKTsNCiAgICAgICAgfQ0KICAgICAgfSwNCiAgICAgIGRlZXA6IHRydWUsDQogICAgfSwNCiAgfSwNCiAgZGF0YSgpIHsNCiAgICByZXR1cm4gew0KICAgICAgaGRUYWJDdXI6IDAsDQogICAgICBoZFRhYjogWw0KICAgICAgICB7DQogICAgICAgICAga2V5OiAwLA0KICAgICAgICAgIHRpdGxlOiAn55So5oi35YiX6KGoJywNCiAgICAgICAgfSwNCiAgICAgIF0sDQogICAgICB1c2VyTGlzdDogW10sDQogICAgICBjdXJJZDogJycsDQogICAgICBwYWdlOiAxLA0KICAgICAgbGltaXQ6IDE1LA0KICAgICAgaXNTY3JvbGw6IHRydWUsDQogICAgICBuaWNrbmFtZTogJycsDQogICAgICBpc1NlYXJjaDogZmFsc2UsDQogICAgICBvcHM6IHsNCiAgICAgICAgdnVlc2Nyb2xsOiB7DQogICAgICAgICAgbW9kZTogJ25hdGl2ZScsDQogICAgICAgICAgZW5hYmxlOiBmYWxzZSwNCiAgICAgICAgICB0aXBzOiB7DQogICAgICAgICAgICBkZWFjdGl2ZTogJ1B1c2ggdG8gTG9hZCcsDQogICAgICAgICAgICBhY3RpdmU6ICdSZWxlYXNlIHRvIExvYWQnLA0KICAgICAgICAgICAgc3RhcnQ6ICdMb2FkaW5nLi4uJywNCiAgICAgICAgICAgIGJlZm9yZURlYWN0aXZlOiAnTG9hZCBTdWNjZXNzZnVsbHkhJywNCiAgICAgICAgICB9LA0KICAgICAgICAgIGF1dG86IGZhbHNlLA0KICAgICAgICAgIGF1dG9Mb2FkRGlzdGFuY2U6IDAsDQogICAgICAgICAgcHVsbFJlZnJlc2g6IHsNCiAgICAgICAgICAgIGVuYWJsZTogZmFsc2UsDQogICAgICAgICAgfSwNCiAgICAgICAgICBwdXNoTG9hZDogew0KICAgICAgICAgICAgZW5hYmxlOiB0cnVlLA0KICAgICAgICAgICAgYXV0bzogdHJ1ZSwNCiAgICAgICAgICAgIGF1dG9Mb2FkRGlzdGFuY2U6IDEwLA0KICAgICAgICAgIH0sDQogICAgICAgIH0sDQogICAgICAgIGJhcjogew0KICAgICAgICAgIGJhY2tncm91bmQ6ICcjMzkzMjMyJywNCiAgICAgICAgICBvcGFjaXR5OiAnLjUnLA0KICAgICAgICAgIHNpemU6ICc1cHgnLA0KICAgICAgICB9LA0KICAgICAgfSwNCiAgICB9Ow0KICB9LA0KICBmaWx0ZXJzOiB7DQogICAgdG9EYXk6IGZ1bmN0aW9uICh2YWx1ZSkgew0KICAgICAgaWYgKCF2YWx1ZSkgcmV0dXJuICcnOw0KICAgICAgcmV0dXJuIGRheWpzLnVuaXgodmFsdWUpLmZvcm1hdCgnTeaciETml6UgSEg6bW0nKTsNCiAgICB9LA0KICB9LA0KICBtb3VudGVkKCkgew0KICAgIGxldCB0aGF0ID0gdGhpczsNCiAgICBTb2NrZXQudGhlbigod3MpID0+IHsNCiAgICAgIC8v55So5oi36L2s5o6lDQogICAgICB3cy4kb24oJ3RyYW5zZmVyJywgKGRhdGEpID0+IHsNCiAgICAgICAgbGV0IHN0YXR1cyA9IGZhbHNlOw0KICAgICAgICB0aGF0LnVzZXJMaXN0LmZvckVhY2goKGVsLCBpbmRleCwgYXJyKSA9PiB7DQogICAgICAgICAgaWYgKGRhdGEucmVjb3JlZC5pZCA9PSBlbC5pZCkgew0KICAgICAgICAgICAgc3RhdHVzID0gdHJ1ZTsNCiAgICAgICAgICAgIGlmIChkYXRhLnJlY29yZWQuaXNfdG91cmlzdCA9PSB0aGF0LmhkVGFiQ3VyKSB7DQogICAgICAgICAgICAgIGxldCBvbGRWYWwgPSBkYXRhLnJlY29yZWQ7DQogICAgICAgICAgICAgIGFyci5zcGxpY2UoaW5kZXgsIDEpOw0KDQogICAgICAgICAgICAgIGlmIChpbmRleCA9PSAwKSB7DQogICAgICAgICAgICAgICAgdGhpcy4kZW1pdCgnc2V0RGF0YUlkJywgb2xkVmFsKTsNCiAgICAgICAgICAgICAgICBvbGRWYWwubXNzYWdlX251bSA9IDA7DQogICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgYXJyLnVuc2hpZnQob2xkVmFsKTsNCiAgICAgICAgICAgIH0NCiAgICAgICAgICAgIHRoaXMuJG5vdGlmeS5pbmZvKHsNCiAgICAgICAgICAgICAgdGl0bGU6ICfmgqjmnInkuIDmnaHovazmjqXmtojmga/vvIEnLA0KICAgICAgICAgICAgfSk7DQogICAgICAgICAgfQ0KICAgICAgICB9KTsNCiAgICAgICAgaWYgKCFzdGF0dXMpIHsNCiAgICAgICAgICBpZiAoZGF0YS5yZWNvcmVkLmlzX3RvdXJpc3QgPT0gdGhpcy5oZFRhYkN1cikgdGhpcy51c2VyTGlzdC51bnNoaWZ0KGRhdGEucmVjb3JlZCk7DQogICAgICAgIH0NCiAgICAgIH0pOw0KICAgICAgd3MuJG9uKCdtc3NhZ2VfbnVtJywgKGRhdGEpID0+IHsNCiAgICAgICAgaWYgKGRhdGEucmVjb3JlZC5pZCkgew0KICAgICAgICAgIGxldCBzdGF0dXMgPSBmYWxzZTsNCiAgICAgICAgICB0aGF0LnVzZXJMaXN0LmZvckVhY2goKGVsLCBpbmRleCwgYXJyKSA9PiB7DQogICAgICAgICAgICBpZiAoZGF0YS5yZWNvcmVkLmlkID09IGVsLmlkKSB7DQogICAgICAgICAgICAgIHN0YXR1cyA9IHRydWU7DQogICAgICAgICAgICAgIGlmIChkYXRhLnJlY29yZWQuaXNfdG91cmlzdCA9PSB0aGF0LmhkVGFiQ3VyKSB7DQogICAgICAgICAgICAgICAgbGV0IG9sZFZhbCA9IGRhdGEucmVjb3JlZDsNCiAgICAgICAgICAgICAgICBhcnIuc3BsaWNlKGluZGV4LCAxKTsNCiAgICAgICAgICAgICAgICBhcnIudW5zaGlmdChvbGRWYWwpOw0KICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgICAgfSk7DQogICAgICAgICAgaWYgKCFzdGF0dXMpIHsNCiAgICAgICAgICAgIGlmIChkYXRhLnJlY29yZWQuaXNfdG91cmlzdCA9PSB0aGlzLmhkVGFiQ3VyKSB0aGlzLnVzZXJMaXN0LnVuc2hpZnQoZGF0YS5yZWNvcmVkKTsNCiAgICAgICAgICB9DQogICAgICAgIH0NCiAgICAgICAgaWYgKGRhdGEucmVjb3JlZC5pc190b3VyaXN0ICE9IHRoaXMuaGRUYWJDdXIgJiYgZGF0YS5yZWNvcmVkLmlkKSB7DQogICAgICAgICAgdGhpcy4kbm90aWZ5LmluZm8oew0KICAgICAgICAgICAgdGl0bGU6IHRoaXMuaGRUYWJDdXIgPyAn55So5oi35Y+R5p2l5raI5oGv5ZWm77yBJyA6ICfmuLjlrqLlj5HmnaXmtojmga/llabvvIEnLA0KICAgICAgICAgIH0pOw0KICAgICAgICB9DQogICAgICB9KTsNCiAgICB9KTsNCiAgICB0aGlzLmJ1cy4kb24oJ2NoYW5nZScsIChkYXRhKSA9PiB7DQogICAgICB0aGlzLm5pY2tuYW1lID0gZGF0YTsNCiAgICB9KTsNCiAgICB0aGlzLmdldExpc3QoKTsNCiAgfSwNCiAgbWV0aG9kczogew0KICAgIC8v5YiH5o2iDQogICAgY2hhbmdlVGFiKGl0ZW0pIHsNCiAgICAgIGlmICh0aGlzLmhkVGFiQ3VyID09IGl0ZW0ua2V5KSByZXR1cm47DQogICAgICB0aGlzLmhkVGFiQ3VyID0gaXRlbS5rZXk7DQogICAgICB0aGlzLmlzU2Nyb2xsID0gdHJ1ZTsNCiAgICAgIHRoaXMucGFnZSA9IDE7DQogICAgICB0aGlzLnVzZXJMaXN0ID0gW107DQogICAgICB0aGlzLiRlbWl0KCdjaGFuZ2VUeXBlJywgaXRlbS5rZXkpOw0KICAgICAgdGhpcy5nZXRMaXN0KCk7DQogICAgfSwNCiAgICBnZXRMaXN0KCkgew0KICAgICAgaWYgKCF0aGlzLmlzU2Nyb2xsKSByZXR1cm47DQogICAgICByZWNvcmQoew0KICAgICAgICBuaWNrbmFtZTogdGhpcy5uaWNrbmFtZSwNCiAgICAgICAgcGFnZTogdGhpcy5wYWdlLA0KICAgICAgICBsaW1pdDogdGhpcy5saW1pdCwNCiAgICAgICAgaXNfdG91cmlzdDogdGhpcy5oZFRhYkN1ciwNCiAgICAgIH0pLnRoZW4oKHJlcykgPT4gew0KICAgICAgICBpZiAocmVzLmRhdGEubGVuZ3RoID4gMCkgew0KICAgICAgICAgIHJlcy5kYXRhWzBdLm1zc2FnZV9udW0gPSAwOw0KICAgICAgICAgIHRoaXMuaXNTY3JvbGwgPSByZXMuZGF0YS5sZW5ndGggPj0gdGhpcy5saW1pdDsNCg0KICAgICAgICAgIHRoaXMudXNlckxpc3QgPSB0aGlzLnVzZXJMaXN0LmNvbmNhdChyZXMuZGF0YSk7DQoNCiAgICAgICAgICBpZiAodGhpcy5wYWdlID09IDEgJiYgcmVzLmRhdGEubGVuZ3RoID4gMCAmJiAhdGhpcy5pc1NlYXJjaCkgew0KICAgICAgICAgICAgdGhpcy5jdXJJZCA9IHJlcy5kYXRhWzBdLmlkOw0KICAgICAgICAgICAgdGhpcy4kZW1pdCgnc2V0RGF0YUlkJywgcmVzLmRhdGFbMF0pOw0KICAgICAgICAgIH0NCiAgICAgICAgICB0aGlzLnBhZ2UrKzsNCiAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICB0aGlzLiRlbWl0KCdzZXREYXRhSWQnLCAwKTsNCiAgICAgICAgfQ0KICAgICAgfSk7DQogICAgfSwNCiAgICBjaGFydFJlYWNoQm90dG9tKCkgew0KICAgICAgdGhpcy5nZXRMaXN0KCk7DQogICAgfSwNCiAgICAvLyDpgInmi6nnlKjmiLcNCiAgICBzZWxlY3RVc2VyKGl0ZW0pIHsNCiAgICAgIGlmICh0aGlzLmN1cklkID09IGl0ZW0uaWQpIHJldHVybjsNCiAgICAgIGl0ZW0ubXNzYWdlX251bSA9IDA7DQogICAgICB0aGlzLmN1cklkID0gaXRlbS5pZDsNCiAgICAgIHRoaXMuJGVtaXQoJ3NldERhdGFJZCcsIGl0ZW0pOw0KICAgIH0sDQogICAgaGFuZGxlU2Nyb2xsKHZlcnRpY2FsLCBob3Jpem9udGFsLCBuYXRpdmVFdmVudCkgew0KICAgICAgaWYgKHZlcnRpY2FsLnByb2Nlc3MgPT0gMSkgew0KICAgICAgICB0aGlzLmdldExpc3QoKTsNCiAgICAgIH0NCiAgICB9LA0KICB9LA0KfTsNCg=="},{"version":3,"sources":["chatList.vue"],"names":[],"mappings":";AAkEA;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;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;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;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;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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;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;AACA;AACA","file":"chatList.vue","sourceRoot":"src/pages/kefu/pc/components","sourcesContent":["<template>\r\n <div class=\"chatList\">\r\n <!-- <div class=\"tab-head\">\r\n <div\r\n class=\"item\"\r\n :class=\"{ active: item.key == hdTabCur }\"\r\n v-for=\"(item, index) in hdTab\"\r\n :key=\"index\"\r\n v-db-click @click=\"changeTab(item)\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </div> -->\r\n <div class=\"scroll-box\">\r\n <vue-scroll :ops=\"ops\" @handle-scroll=\"handleScroll\" v-if=\"userList.length > 0\">\r\n <div\r\n class=\"chat-item\"\r\n v-for=\"(item, index) in userList\"\r\n :key=\"index\"\r\n :class=\"{ active: curId == item.id }\"\r\n v-db-click\r\n @click=\"selectUser(item)\"\r\n >\r\n <div class=\"avatar\">\r\n <img v-lazy=\"item.wx_avatar\" alt=\"\" />\r\n <div class=\"status\" :class=\"{ off: item.online == 0 }\"></div>\r\n </div>\r\n <div class=\"user-info\">\r\n <div class=\"hd\">\r\n <span class=\"name line1\">{{ item.nickname }}</span>\r\n <template v-if=\"item.type == 2\">\r\n <span class=\"label\">小程序</span>\r\n </template>\r\n <template v-if=\"item.type == 3\">\r\n <span class=\"label H5\">H5</span>\r\n </template>\r\n <template v-if=\"item.type == 1\">\r\n <span class=\"label wechat\">公众号</span>\r\n </template>\r\n <template v-if=\"item.type == 0\">\r\n <span class=\"label pc\">PC端</span>\r\n </template>\r\n </div>\r\n <div class=\"bd line1\">\r\n <template v-if=\"item.message_type <= 2\">{{ item.message }}</template>\r\n <template v-if=\"item.message_type == 3\">[图片]</template>\r\n <template v-if=\"item.message_type == 5\">[商品]</template>\r\n <template v-if=\"item.message_type == 6\">[订单]</template>\r\n </div>\r\n </div>\r\n <div class=\"right-box\">\r\n <div class=\"time\">{{ item.update_time | toDay }}</div>\r\n <div class=\"num\" v-if=\"item.mssage_num > 0\">\r\n <el-badge :value=\"item.mssage_num\">\r\n <a href=\"#\" class=\"demo-badge\"></a>\r\n </el-badge>\r\n </div>\r\n </div>\r\n </div>\r\n </vue-scroll>\r\n <empty v-else msg=\"暂无用户列表\" status=\"1\"></empty>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { Socket } from '@/libs/socket';\r\nimport dayjs from 'dayjs';\r\nimport { record } from '@/api/kefu';\r\nimport { HappyScroll } from 'vue-happy-scroll';\r\nimport empty from '../../components/empty';\r\nimport { forEach } from '../../../../libs/tools';\r\nexport default {\r\n name: 'chatList',\r\n props: {\r\n userOnline: {\r\n type: Object,\r\n default: function () {\r\n return {};\r\n },\r\n },\r\n newRecored: {\r\n type: Object,\r\n default: function () {\r\n return {};\r\n },\r\n },\r\n searchData: {\r\n type: String,\r\n default: '',\r\n },\r\n },\r\n components: {\r\n HappyScroll,\r\n empty,\r\n },\r\n watch: {\r\n userOnline: {\r\n handler(nVal, oVal) {\r\n if (nVal.hasOwnProperty('to_uid')) {\r\n this.userList.forEach((el, index) => {\r\n if (el.to_uid == nVal.to_uid) {\r\n el.online = nVal.online;\r\n if (nVal.online == 1) {\r\n this.$notify.info({\r\n title: '上线通知',\r\n message: `${el.nickname}上线`,\r\n });\r\n }\r\n }\r\n });\r\n }\r\n },\r\n deep: true,\r\n },\r\n searchData: {\r\n handler(nVal, oVal) {\r\n if (nVal != oVal) {\r\n this.nickname = nVal;\r\n this.page = 1;\r\n this.isScroll = true;\r\n this.userList = [];\r\n this.getList();\r\n }\r\n },\r\n deep: true,\r\n },\r\n },\r\n data() {\r\n return {\r\n hdTabCur: 0,\r\n hdTab: [\r\n {\r\n key: 0,\r\n title: '用户列表',\r\n },\r\n ],\r\n userList: [],\r\n curId: '',\r\n page: 1,\r\n limit: 15,\r\n isScroll: true,\r\n nickname: '',\r\n isSearch: false,\r\n ops: {\r\n vuescroll: {\r\n mode: 'native',\r\n enable: false,\r\n tips: {\r\n deactive: 'Push to Load',\r\n active: 'Release to Load',\r\n start: 'Loading...',\r\n beforeDeactive: 'Load Successfully!',\r\n },\r\n auto: false,\r\n autoLoadDistance: 0,\r\n pullRefresh: {\r\n enable: false,\r\n },\r\n pushLoad: {\r\n enable: true,\r\n auto: true,\r\n autoLoadDistance: 10,\r\n },\r\n },\r\n bar: {\r\n background: '#393232',\r\n opacity: '.5',\r\n size: '5px',\r\n },\r\n },\r\n };\r\n },\r\n filters: {\r\n toDay: function (value) {\r\n if (!value) return '';\r\n return dayjs.unix(value).format('M月D日 HH:mm');\r\n },\r\n },\r\n mounted() {\r\n let that = this;\r\n Socket.then((ws) => {\r\n //用户转接\r\n ws.$on('transfer', (data) => {\r\n let status = false;\r\n that.userList.forEach((el, index, arr) => {\r\n if (data.recored.id == el.id) {\r\n status = true;\r\n if (data.recored.is_tourist == that.hdTabCur) {\r\n let oldVal = data.recored;\r\n arr.splice(index, 1);\r\n\r\n if (index == 0) {\r\n this.$emit('setDataId', oldVal);\r\n oldVal.mssage_num = 0;\r\n }\r\n arr.unshift(oldVal);\r\n }\r\n this.$notify.info({\r\n title: '您有一条转接消息！',\r\n });\r\n }\r\n });\r\n if (!status) {\r\n if (data.recored.is_tourist == this.hdTabCur) this.userList.unshift(data.recored);\r\n }\r\n });\r\n ws.$on('mssage_num', (data) => {\r\n if (data.recored.id) {\r\n let status = false;\r\n that.userList.forEach((el, index, arr) => {\r\n if (data.recored.id == el.id) {\r\n status = true;\r\n if (data.recored.is_tourist == that.hdTabCur) {\r\n let oldVal = data.recored;\r\n arr.splice(index, 1);\r\n arr.unshift(oldVal);\r\n }\r\n }\r\n });\r\n if (!status) {\r\n if (data.recored.is_tourist == this.hdTabCur) this.userList.unshift(data.recored);\r\n }\r\n }\r\n if (data.recored.is_tourist != this.hdTabCur && data.recored.id) {\r\n this.$notify.info({\r\n title: this.hdTabCur ? '用户发来消息啦！' : '游客发来消息啦！',\r\n });\r\n }\r\n });\r\n });\r\n this.bus.$on('change', (data) => {\r\n this.nickname = data;\r\n });\r\n this.getList();\r\n },\r\n methods: {\r\n //切换\r\n changeTab(item) {\r\n if (this.hdTabCur == item.key) return;\r\n this.hdTabCur = item.key;\r\n this.isScroll = true;\r\n this.page = 1;\r\n this.userList = [];\r\n this.$emit('changeType', item.key);\r\n this.getList();\r\n },\r\n getList() {\r\n if (!this.isScroll) return;\r\n record({\r\n nickname: this.nickname,\r\n page: this.page,\r\n limit: this.limit,\r\n is_tourist: this.hdTabCur,\r\n }).then((res) => {\r\n if (res.data.length > 0) {\r\n res.data[0].mssage_num = 0;\r\n this.isScroll = res.data.length >= this.limit;\r\n\r\n this.userList = this.userList.concat(res.data);\r\n\r\n if (this.page == 1 && res.data.length > 0 && !this.isSearch) {\r\n this.curId = res.data[0].id;\r\n this.$emit('setDataId', res.data[0]);\r\n }\r\n this.page++;\r\n } else {\r\n this.$emit('setDataId', 0);\r\n }\r\n });\r\n },\r\n chartReachBottom() {\r\n this.getList();\r\n },\r\n // 选择用户\r\n selectUser(item) {\r\n if (this.curId == item.id) return;\r\n item.mssage_num = 0;\r\n this.curId = item.id;\r\n this.$emit('setDataId', item);\r\n },\r\n handleScroll(vertical, horizontal, nativeEvent) {\r\n if (vertical.process == 1) {\r\n this.getList();\r\n }\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.chatList {\r\n display: flex;\r\n flex-direction: column;\r\n width: 320px;\r\n height: 742px;\r\n border-right: 1px solid #ececec;\r\n .tab-head {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 50px;\r\n flex-shrink: 0;\r\n padding: 0 52px;\r\n font-size: 14px;\r\n color: #000000;\r\n .item {\r\n position: relative;\r\n cursor: pointer;\r\n &:after {\r\n display: none;\r\n content: ' ';\r\n position: absolute;\r\n left: 50%;\r\n bottom: -15px;\r\n transform: translateX(-50%);\r\n height: 2px;\r\n width: 100%;\r\n background: var(--prev-color-primary);\r\n }\r\n &.active {\r\n color: var(--prev-color-primary);\r\n &:after {\r\n display: block;\r\n }\r\n }\r\n }\r\n }\r\n .scroll-box {\r\n flex: 1;\r\n height: 500px;\r\n overflow: hidden;\r\n }\r\n .chat-item {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding: 12px 10px;\r\n height: 74px;\r\n box-sizing: border-box;\r\n border-left: 3px solid transparent;\r\n cursor: pointer;\r\n &.active {\r\n background: #eff0f1;\r\n border-left: 3px solid var(--prev-color-primary);\r\n }\r\n .avatar {\r\n position: relative;\r\n width: 40px;\r\n height: 40px;\r\n img {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n }\r\n .status {\r\n position: absolute;\r\n right: 3px;\r\n bottom: 0;\r\n width: 8px;\r\n height: 8px;\r\n background: #48d452;\r\n border: 1px solid #fff;\r\n border-radius: 50%;\r\n &.off {\r\n background: #999999;\r\n }\r\n }\r\n }\r\n .user-info {\r\n width: 155px;\r\n margin-left: 12px;\r\n margin-top: 5px;\r\n font-size: 16px;\r\n .hd {\r\n display: flex;\r\n align-items: center;\r\n color: rgba(0, 0, 0, 0.65);\r\n .name {\r\n max-width: 67%;\r\n }\r\n .label {\r\n margin-left: 5px;\r\n color: #3875ea;\r\n font-size: 12px;\r\n background: #d8e5ff;\r\n border-radius: 2px;\r\n padding: 1px 5px;\r\n &.H5 {\r\n background: #faf1d0;\r\n color: #dc9a04;\r\n }\r\n &.wechat {\r\n background: rgba(64, 194, 73, 0.16);\r\n color: #40c249;\r\n }\r\n &.pc {\r\n background: rgba(100, 64, 194, 0.16);\r\n color: #6440c2;\r\n }\r\n }\r\n }\r\n .bd {\r\n margin-top: 3px;\r\n font-size: 12px;\r\n color: #8e959e;\r\n }\r\n }\r\n .right-box {\r\n position: relative;\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-end;\r\n color: #8e959e;\r\n .num {\r\n margin-right: 12px;\r\n }\r\n }\r\n }\r\n}\r\n.chart-scroll {\r\n margin-top: -10px;\r\n}\r\n</style>\r\n"]}]}
|
