| 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=style&index=0&id=40859aa5&lang=scss&scoped=true","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\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"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:DQouY2hhdExpc3Qgew0KICBkaXNwbGF5OiBmbGV4Ow0KICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOw0KICB3aWR0aDogMzIwcHg7DQogIGhlaWdodDogNzQycHg7DQogIGJvcmRlci1yaWdodDogMXB4IHNvbGlkICNlY2VjZWM7DQogIC50YWItaGVhZCB7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsNCiAgICBoZWlnaHQ6IDUwcHg7DQogICAgZmxleC1zaHJpbms6IDA7DQogICAgcGFkZGluZzogMCA1MnB4Ow0KICAgIGZvbnQtc2l6ZTogMTRweDsNCiAgICBjb2xvcjogIzAwMDAwMDsNCiAgICAuaXRlbSB7DQogICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICBjdXJzb3I6IHBvaW50ZXI7DQogICAgICAmOmFmdGVyIHsNCiAgICAgICAgZGlzcGxheTogbm9uZTsNCiAgICAgICAgY29udGVudDogJyAnOw0KICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7DQogICAgICAgIGxlZnQ6IDUwJTsNCiAgICAgICAgYm90dG9tOiAtMTVweDsNCiAgICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC01MCUpOw0KICAgICAgICBoZWlnaHQ6IDJweDsNCiAgICAgICAgd2lkdGg6IDEwMCU7DQogICAgICAgIGJhY2tncm91bmQ6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgICB9DQogICAgICAmLmFjdGl2ZSB7DQogICAgICAgIGNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnkpOw0KICAgICAgICAmOmFmdGVyIHsNCiAgICAgICAgICBkaXNwbGF5OiBibG9jazsNCiAgICAgICAgfQ0KICAgICAgfQ0KICAgIH0NCiAgfQ0KICAuc2Nyb2xsLWJveCB7DQogICAgZmxleDogMTsNCiAgICBoZWlnaHQ6IDUwMHB4Ow0KICAgIG92ZXJmbG93OiBoaWRkZW47DQogIH0NCiAgLmNoYXQtaXRlbSB7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsNCiAgICBwYWRkaW5nOiAxMnB4IDEwcHg7DQogICAgaGVpZ2h0OiA3NHB4Ow0KICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7DQogICAgYm9yZGVyLWxlZnQ6IDNweCBzb2xpZCB0cmFuc3BhcmVudDsNCiAgICBjdXJzb3I6IHBvaW50ZXI7DQogICAgJi5hY3RpdmUgew0KICAgICAgYmFja2dyb3VuZDogI2VmZjBmMTsNCiAgICAgIGJvcmRlci1sZWZ0OiAzcHggc29saWQgdmFyKC0tcHJldi1jb2xvci1wcmltYXJ5KTsNCiAgICB9DQogICAgLmF2YXRhciB7DQogICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICB3aWR0aDogNDBweDsNCiAgICAgIGhlaWdodDogNDBweDsNCiAgICAgIGltZyB7DQogICAgICAgIGRpc3BsYXk6IGJsb2NrOw0KICAgICAgICB3aWR0aDogMTAwJTsNCiAgICAgICAgaGVpZ2h0OiAxMDAlOw0KICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7DQogICAgICB9DQogICAgICAuc3RhdHVzIHsNCiAgICAgICAgcG9zaXRpb246IGFic29sdXRlOw0KICAgICAgICByaWdodDogM3B4Ow0KICAgICAgICBib3R0b206IDA7DQogICAgICAgIHdpZHRoOiA4cHg7DQogICAgICAgIGhlaWdodDogOHB4Ow0KICAgICAgICBiYWNrZ3JvdW5kOiAjNDhkNDUyOw0KICAgICAgICBib3JkZXI6IDFweCBzb2xpZCAjZmZmOw0KICAgICAgICBib3JkZXItcmFkaXVzOiA1MCU7DQogICAgICAgICYub2ZmIHsNCiAgICAgICAgICBiYWNrZ3JvdW5kOiAjOTk5OTk5Ow0KICAgICAgICB9DQogICAgICB9DQogICAgfQ0KICAgIC51c2VyLWluZm8gew0KICAgICAgd2lkdGg6IDE1NXB4Ow0KICAgICAgbWFyZ2luLWxlZnQ6IDEycHg7DQogICAgICBtYXJnaW4tdG9wOiA1cHg7DQogICAgICBmb250LXNpemU6IDE2cHg7DQogICAgICAuaGQgew0KICAgICAgICBkaXNwbGF5OiBmbGV4Ow0KICAgICAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgICAgICBjb2xvcjogcmdiYSgwLCAwLCAwLCAwLjY1KTsNCiAgICAgICAgLm5hbWUgew0KICAgICAgICAgIG1heC13aWR0aDogNjclOw0KICAgICAgICB9DQogICAgICAgIC5sYWJlbCB7DQogICAgICAgICAgbWFyZ2luLWxlZnQ6IDVweDsNCiAgICAgICAgICBjb2xvcjogIzM4NzVlYTsNCiAgICAgICAgICBmb250LXNpemU6IDEycHg7DQogICAgICAgICAgYmFja2dyb3VuZDogI2Q4ZTVmZjsNCiAgICAgICAgICBib3JkZXItcmFkaXVzOiAycHg7DQogICAgICAgICAgcGFkZGluZzogMXB4IDVweDsNCiAgICAgICAgICAmLkg1IHsNCiAgICAgICAgICAgIGJhY2tncm91bmQ6ICNmYWYxZDA7DQogICAgICAgICAgICBjb2xvcjogI2RjOWEwNDsNCiAgICAgICAgICB9DQogICAgICAgICAgJi53ZWNoYXQgew0KICAgICAgICAgICAgYmFja2dyb3VuZDogcmdiYSg2NCwgMTk0LCA3MywgMC4xNik7DQogICAgICAgICAgICBjb2xvcjogIzQwYzI0OTsNCiAgICAgICAgICB9DQogICAgICAgICAgJi5wYyB7DQogICAgICAgICAgICBiYWNrZ3JvdW5kOiByZ2JhKDEwMCwgNjQsIDE5NCwgMC4xNik7DQogICAgICAgICAgICBjb2xvcjogIzY0NDBjMjsNCiAgICAgICAgICB9DQogICAgICAgIH0NCiAgICAgIH0NCiAgICAgIC5iZCB7DQogICAgICAgIG1hcmdpbi10b3A6IDNweDsNCiAgICAgICAgZm9udC1zaXplOiAxMnB4Ow0KICAgICAgICBjb2xvcjogIzhlOTU5ZTsNCiAgICAgIH0NCiAgICB9DQogICAgLnJpZ2h0LWJveCB7DQogICAgICBwb3NpdGlvbjogcmVsYXRpdmU7DQogICAgICBmbGV4OiAxOw0KICAgICAgZGlzcGxheTogZmxleDsNCiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQogICAgICBhbGlnbi1pdGVtczogZmxleC1lbmQ7DQogICAgICBjb2xvcjogIzhlOTU5ZTsNCiAgICAgIC5udW0gew0KICAgICAgICBtYXJnaW4tcmlnaHQ6IDEycHg7DQogICAgICB9DQogICAgfQ0KICB9DQp9DQouY2hhcnQtc2Nyb2xsIHsNCiAgbWFyZ2luLXRvcDogLTEwcHg7DQp9DQo="},{"version":3,"sources":["chatList.vue"],"names":[],"mappings":";AAmSA;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;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"]}]}
|
