| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\mobile\\chat_list.vue?vue&type=style&index=0&id=3e277eca&lang=css","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\kefu\\mobile\\chat_list.vue","mtime":1761614939021},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\css-loader\\index.js","mtime":1761614929364},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":1761614937403},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\postcss-loader\\src\\index.js","mtime":1761614935133},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQpodG1sLA0KYm9keSB7DQogIGZvbnQtc2l6ZTogNTBweDsNCn0NCg=="},{"version":3,"sources":["chat_list.vue"],"names":[],"mappings":";AAgVA;AACA;AACA;AACA","file":"chat_list.vue","sourceRoot":"src/pages/kefu/mobile","sourcesContent":["<template>\r\n <div class=\"chat-list\">\r\n <div class=\"head-box\">\r\n <div class=\"hd\">\r\n <div class=\"left-wrappers\">\r\n <img v-lazy=\"kefuInfo.avatar\" />\r\n <div class=\"info\" v-db-click @click=\"isOnLine = !isOnLine\">\r\n <div>{{ kefuInfo.nickname }}</div>\r\n <div class=\"status\">\r\n <span class=\"doc\" :class=\"{ off: !kefuInfo.online }\"></span>\r\n <span>{{ kefuInfo.online ? '在线' : '离线' }}</span>\r\n </div>\r\n </div>\r\n <div class=\"down-wrapper\" v-show=\"isOnLine\">\r\n <div class=\"item\" v-db-click @click=\"changOnline(1)\">\r\n <span class=\"dot green\"></span>在线\r\n <span class=\"iconfont iconduihao\" v-if=\"kefuInfo.online\"></span>\r\n </div>\r\n <div class=\"item\" v-db-click @click=\"changOnline(0)\">\r\n <span class=\"dot\"></span>离线\r\n <span class=\"iconfont iconduihao\" v-if=\"!kefuInfo.online\"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-wrapper\" v-db-click @click=\"outLogin\">\r\n <div class=\"icon-box\"><span class=\"iconfont icontuichu\"></span></div>\r\n\r\n <div style=\"margin-left: 5px\">退出登录</div>\r\n </div>\r\n </div>\r\n <div class=\"tab-box\">\r\n <div\r\n class=\"tab-item\"\r\n :class=\"{ on: tabCur == item.key }\"\r\n v-for=\"(item, index) in tabList\"\r\n v-db-click\r\n @click=\"changeClass(item)\"\r\n >\r\n {{ item.title }}\r\n </div>\r\n </div>\r\n <div class=\"search-box\">\r\n <el-input v-model=\"searchTxt\" placeholder=\"搜索用户名称\" @change=\"bindSearch\" />\r\n </div>\r\n </div>\r\n <div class=\"list-box\" v-if=\"list.length > 0\">\r\n <vue-scroll ref=\"vs\" :ops=\"ops\" @load-before-deactivate=\"handleBeforeDeactivate\">\r\n <div class=\"item\" v-for=\"(item, index) in list\" :key=\"index\" v-db-click @click=\"goPage(item)\">\r\n <div class=\"left-wrappers\">\r\n <div class=\"img-box\">\r\n <img v-lazy=\"item.avatar\" />\r\n <div class=\"online\" :class=\"{ on: item.online }\"></div>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"title\">\r\n <span class=\"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 wx\">公众号</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=\"msg line1\" v-if=\"item.message_type == 1\">{{ item.message }}</div>\r\n <div class=\"msg\" v-if=\"item.message_type == 2\">[表情]</div>\r\n <div class=\"msg\" v-if=\"item.message_type == 3\">[图片]</div>\r\n <div class=\"msg\" v-if=\"item.message_type == 5\">[商品]</div>\r\n <div class=\"msg\" v-if=\"item.message_type == 6\">[订单]</div>\r\n </div>\r\n </div>\r\n <div class=\"right-wrapper\">\r\n <div class=\"time\">{{ item.update_time | toDay }}</div>\r\n <span class=\"num\" v-if=\"item.mssage_num > 0\">{{ item.mssage_num }}</span>\r\n </div>\r\n </div>\r\n <div class=\"slot-load\" slot=\"load-deactive\"></div>\r\n <div class=\"slot-load\" slot=\"load-active\">下滑加载更多</div>\r\n </vue-scroll>\r\n </div>\r\n <empty v-else status=\"3\" msg=\"暂无用户列表\"></empty>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport util from '@/libs/util';\r\nimport { Socket } from '@/libs/socket';\r\nimport { record } from '@/api/kefu.js';\r\nimport { serviceInfo } from '@/api/kefu_mobile';\r\nimport { HappyScroll } from 'vue-happy-scroll';\r\nimport { mapState, mapActions } from 'vuex';\r\nimport { getCookies } from '@/libs/util';\r\nimport empty from '../components/empty';\r\nvar mp3 = require('@/assets/video/notice.mp3');\r\nvar mp3 = new Audio(mp3);\r\nexport default {\r\n name: 'chat_list.vue',\r\n components: {\r\n HappyScroll,\r\n empty,\r\n },\r\n data() {\r\n return {\r\n ops: {\r\n vuescroll: {\r\n mode: 'slide',\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: '2px',\r\n },\r\n },\r\n list: [],\r\n page: 1,\r\n limit: 15,\r\n isScroll: true,\r\n searchTxt: '',\r\n isOpen: true,\r\n kefuInfo: {},\r\n isOnLine: false,\r\n tabCur: 0,\r\n tabList: [\r\n {\r\n key: 0,\r\n title: '用户列表',\r\n },\r\n ],\r\n wsLogin: JSON.parse(sessionStorage.getItem('wsLogin')),\r\n };\r\n },\r\n filters: {\r\n toDay: function (value) {\r\n if (!value) return '';\r\n var date = new Date(); //时间戳为10位需*1000，时间戳为13位的话不需乘1000\r\n var Y = date.getFullYear() + '-';\r\n var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';\r\n var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';\r\n var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';\r\n var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();\r\n var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();\r\n\r\n value = M + D + h + m;\r\n return value;\r\n },\r\n },\r\n created() {\r\n Promise.all([this.getKefuInfo(), this.getList()]);\r\n },\r\n mounted() {\r\n let that = this;\r\n // 监听页面刷新\r\n window.addEventListener('beforeunload', (e) => {\r\n sessionStorage.setItem('wsLogin', false);\r\n });\r\n // 获取是否登录的key\r\n this.wsLogin = JSON.parse(sessionStorage.getItem('wsLogin'));\r\n let token = getCookies('kefu_token');\r\n Socket.then((ws) => {\r\n if (!that.wsLogin && token) {\r\n ws.send({\r\n type: 'kefu_login',\r\n data: getCookies('kefu_token'),\r\n });\r\n }\r\n //用户未读消息条数更改\r\n ws.$on('transfer', (data) => {\r\n if (data.recored.id) {\r\n let status = false;\r\n for (let i = 0; i < this.list.length; i++) {\r\n if (data.recored.id == this.list[i].id) {\r\n status = true;\r\n this.$set(this.list, i, data.recored);\r\n }\r\n }\r\n if (!status) {\r\n this.list.unshift(data.recored);\r\n }\r\n }\r\n });\r\n ws.$on('mssage_num', (data) => {\r\n if (data.num > 0) {\r\n mp3.play();\r\n }\r\n if (data.recored.id) {\r\n let status = false;\r\n // for(let i =0 ;i<this.list.length;i++){\r\n // if(data.recored.id == this.list[i].id){\r\n // status = true\r\n // this.$set(this.list, i, data.recored)\r\n // break\r\n // }\r\n // }\r\n that.list.forEach((el, index, arr) => {\r\n if (data.recored.id == el.id) {\r\n status = true;\r\n if (data.recored.is_tourist == that.tabCur) {\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.tabCur) this.list.unshift(data.recored);\r\n }\r\n if (data.recored.is_tourist != this.tabCur && data.recored.id) {\r\n this.$notify.info({\r\n title: this.tabCur ? '用户发来消息啦！' : '游客发来消息啦！',\r\n });\r\n }\r\n }\r\n });\r\n // ws登录成功\r\n ws.$on('success', (data) => {\r\n sessionStorage.setItem('wsLogin', true);\r\n });\r\n });\r\n },\r\n beforeDestroy() {},\r\n methods: {\r\n ...mapActions('kefu/', ['logout', 'logoutKefu']),\r\n // 列表切换\r\n changeClass(item) {\r\n if (this.tabCur == item.key) return;\r\n this.tabCur = item.key;\r\n this.page = 1;\r\n this.list = [];\r\n this.isScroll = true;\r\n this.getList();\r\n },\r\n // 客服上下线\r\n changOnline(key) {\r\n this.kefuInfo.online = key;\r\n this.isOnLine = false;\r\n Socket.then((ws) => {\r\n let that = this;\r\n ws.send({\r\n type: 'online',\r\n data: {\r\n online: key,\r\n },\r\n });\r\n });\r\n },\r\n // 客服详细信息\r\n getKefuInfo() {\r\n serviceInfo().then((res) => {\r\n this.kefuInfo = res.data;\r\n window.document.title = `${res.data.site_name} - 消息列表`;\r\n });\r\n },\r\n getList() {\r\n if (!this.isScroll) return;\r\n record({\r\n nickname: this.searchTxt,\r\n page: this.page,\r\n limit: this.limit,\r\n is_tourist: this.tabCur,\r\n }).then((res) => {\r\n this.isScroll = res.data.length >= this.limit;\r\n this.list = this.list.concat(res.data);\r\n this.page++;\r\n setTimeout(() => {\r\n this.$refs.vs.refresh();\r\n }, 100);\r\n });\r\n },\r\n // 客服退出\r\n outLogin() {\r\n let self = this;\r\n this.$msgbox({\r\n title: '退出登录确认',\r\n message: '您确定退出登录当前账户吗？打开的标签页和个人设置将会保存。',\r\n showCancelButton: true,\r\n cancelButtonText: '取消',\r\n confirmButtonText: '确定',\r\n iconClass: 'el-icon-warning',\r\n confirmButtonClass: 'btn-custom-cancel',\r\n })\r\n .then(() => {\r\n self.logoutKefu({\r\n confirm: false,\r\n vm: self,\r\n });\r\n })\r\n .catch(() => {});\r\n },\r\n // 搜索\r\n bindSearch(e) {\r\n this.page = 1;\r\n this.list = [];\r\n this.isScroll = true;\r\n this.getList();\r\n },\r\n // 进入对话\r\n goPage(item) {\r\n this.$router.push({\r\n path: 'mobile_chat',\r\n query: {\r\n toUid: item.to_uid,\r\n nickname: item.nickname,\r\n is_tourist: this.tabCur,\r\n },\r\n });\r\n },\r\n handleBeforeDeactivate(vm, refreshDom, done) {\r\n this.getList();\r\n done();\r\n },\r\n },\r\n};\r\n</script>\r\n<style>\r\nhtml,\r\nbody {\r\n font-size: 50px;\r\n}\r\n</style>\r\n<style lang=\"scss\" scoped>\r\n.chat-list {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n height: 100%;\r\n padding-bottom: 0.15rem;\r\n background: #fff;\r\n .head-box {\r\n .hd {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 1rem;\r\n padding: 0 0.3rem;\r\n background: linear-gradient(90deg, #3875ea 0%, #1890fc 100%);\r\n .left-wrappers {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n color: #fff;\r\n font-size: 0.26rem;\r\n\r\n img {\r\n width: 0.58rem;\r\n height: 0.58rem;\r\n border-radius: 50%;\r\n }\r\n .info {\r\n margin-left: 0.12rem;\r\n .status {\r\n display: flex;\r\n align-items: center;\r\n font-size: 0.2rem;\r\n .doc {\r\n width: 0.14rem;\r\n height: 0.14rem;\r\n margin-right: 0.1rem;\r\n background-color: #27f2cb;\r\n border-radius: 50%;\r\n margin-top: 0.04rem;\r\n &.off {\r\n background: #919191;\r\n }\r\n }\r\n }\r\n }\r\n .down-wrapper {\r\n z-index: 50;\r\n position: absolute;\r\n left: 0;\r\n bottom: -1.9rem;\r\n width: 2.14rem;\r\n background: #434343;\r\n border-radius: 0.1rem;\r\n .item {\r\n display: flex;\r\n align-items: center;\r\n height: 0.8rem;\r\n padding-left: 0.3rem;\r\n border-bottom: 1px solid rgba(240, 241, 242, 0.16);\r\n font-size: 0.28rem;\r\n &:last-child {\r\n border-bottom: none;\r\n }\r\n .dot {\r\n width: 0.12rem;\r\n height: 0.12rem;\r\n margin-right: 0.16rem;\r\n border-radius: 50%;\r\n background: linear-gradient(180deg, #bcbcbc 0%, #919191 100%);\r\n &.green {\r\n background: linear-gradient(143deg, #27f2cb 0%, #14e3b4 100%);\r\n }\r\n }\r\n .iconfont {\r\n margin-left: 0.36rem;\r\n color: #b9b9b9;\r\n font-size: 0.18rem;\r\n }\r\n }\r\n }\r\n }\r\n .right-wrapper {\r\n display: flex;\r\n align-items: center;\r\n color: #fff;\r\n font-size: 0.24rem;\r\n }\r\n }\r\n .search-box {\r\n padding: 0 0.3rem 0.2rem;\r\n border-bottom: 1px solid #eceff8;\r\n ::v-deep .ivu-input {\r\n display: block;\r\n width: 100%;\r\n height: 0.68rem;\r\n background: #f5f6f9;\r\n border-radius: 0.39rem;\r\n box-sizing: border-box;\r\n font-size: 0.28rem;\r\n border-radius: 0.39rem;\r\n text-align: center;\r\n }\r\n ::v-deep .ivu-input,\r\n .ivu-input:hover,\r\n .ivu-input:focus {\r\n border: transparent;\r\n box-shadow: none;\r\n }\r\n }\r\n .tab-box {\r\n display: flex;\r\n padding: 0.2rem 0;\r\n .tab-item {\r\n flex: 1;\r\n height: 100%;\r\n line-height: 0.6rem;\r\n text-align: center;\r\n font-size: 0.3rem;\r\n &.on {\r\n color: #3875ea;\r\n }\r\n &:first-child {\r\n border-right: 1px solid #ddd;\r\n }\r\n }\r\n }\r\n }\r\n .list-box {\r\n flex: 1;\r\n overflow: hidden;\r\n .item {\r\n display: flex;\r\n justify-content: space-between;\r\n padding: 0.23rem 0.3rem;\r\n height: 1.5rem;\r\n .left-wrappers {\r\n display: flex;\r\n align-items: center;\r\n .img-box {\r\n width: 0.96rem;\r\n height: 0.96rem;\r\n position: relative;\r\n }\r\n .online {\r\n position: absolute;\r\n right: 0.1rem;\r\n bottom: 1px;\r\n width: 0.16rem;\r\n height: 0.16rem;\r\n background: linear-gradient(143deg, #bcbcbc 0%, #919191 100%);\r\n border-radius: 50%;\r\n border: 1px solid #ffffff;\r\n &.on {\r\n background: linear-gradient(143deg, #27f2cb 0%, #14e3b4 100%);\r\n }\r\n }\r\n img {\r\n width: 0.96rem;\r\n height: 0.96rem;\r\n border-radius: 50%;\r\n }\r\n .info {\r\n margin-left: 0.2rem;\r\n width: 3.5rem;\r\n height: 0.96rem;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n .title {\r\n display: flex;\r\n align-items: center;\r\n font-size: 0.3rem;\r\n .label {\r\n margin-left: 0.15rem;\r\n font-size: 0.2rem;\r\n padding: 0.05rem 0.1rem;\r\n background: rgba(56, 117, 234, 0.14);\r\n color: #3875ea;\r\n border-radius: 0.04rem;\r\n &.h5 {\r\n background: rgba(255, 162, 0, 0.18);\r\n color: #d08800;\r\n }\r\n &.wx {\r\n background: rgba(0, 186, 100, 0.14);\r\n color: #00a219;\r\n }\r\n &.pc {\r\n background: rgba(133, 64, 227, 0.14);\r\n color: #820adb;\r\n }\r\n }\r\n }\r\n .msg {\r\n font-size: 0.24rem;\r\n color: #9f9f9f;\r\n }\r\n }\r\n }\r\n .right-wrapper {\r\n height: 0.96rem;\r\n color: #9f9f9f;\r\n font-size: 0.22rem;\r\n text-align: right;\r\n .num {\r\n min-width: 0.12rem;\r\n background-color: #f74c31;\r\n color: #fff;\r\n border-radius: 0.15rem;\r\n right: 0 rpx;\r\n bottom: 0 rpx;\r\n font-size: 0.2rem;\r\n padding: 0 0.08rem;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n</style>\r\n"]}]}
|
