{"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"]}]}