@aochuang/client-sdk 1.0.278

package/components/chat-panel/chat-panel-chats.vue

@@ -0,0 +1,674 @@
+<template>
+  <div class="sdk-panel-panel-chats" :class="{'is-show-nearest': showNearest}">
+    <div class="sdk-panel-panel-chats__main" ref="main" @scroll="handlePanelScroll">
+      <chat-panel-loading
+        v-if="reloading"
+      ></chat-panel-loading>
+      <chat-panel-empty
+        v-else-if="isEmpty"
+      ></chat-panel-empty>
+      <template v-else>
+        <chat-panel-increment
+          :loading="loadHistorying"
+          :complete="loadHistoryEnd"
+          :show-load-more="loadHistoryNum <= 1"
+          :range-load="innerEnableRangeLoad"
+          :complete-text="loadCompleteText"
+          @load="handleIncrementLoadMore"
+          @range="handleIncrementRangeMore"
+        ></chat-panel-increment>
+        <template v-if="dataType === 'array'">
+          <chat-panel-chat
+            v-for="item in data"
+            :key="'chat_' + item[keyField]"
+            :dir="handleisSenderMethod(item) ? 'right' : 'left'"
+            :class="handleChatClassMethod(item)"
+            :id="item[keyField]"
+            :item="item"
+            :render-control="renderControl"
+            :fetch-user-method="fetchUserMethod"
+            :ref="'chat_' + item[keyField]"
+            :show-context-btn="showContextBtn"
+            :msg-time-field="msgTimeField"
+            @view-context="handleViewContextClick(item)"
+            @contextmenu="handleChatContextMenu(item, $event)"
+          >
+            <template slot="chat" slot-scope="scope">
+              <slot name="chat" v-bind="scope"></slot>
+            </template>
+            <template slot-scope="scope" slot="chat-foot">
+              <slot name="chat-foot" v-bind="scope"></slot>
+            </template>
+            <template slot-scope="scope" slot="chat-append">
+              <slot name="chat-append" v-bind="scope"></slot>
+            </template>
+          </chat-panel-chat>
+        </template>
+        <template v-else>
+          <template v-for="day in data">
+            <template
+              v-for="milliseconds in day"
+            >
+              <template
+                v-for="item in milliseconds"
+              >
+                <chat-panel-chat
+                  :key="'chat_' + item[keyField]"
+                  :dir="handleisSenderMethod(item) ? 'right' : 'left'"
+                  :class="handleChatClassMethod(item)"
+                  :id="item[keyField]"
+                  :item="item"
+                  :render-control="renderControl"
+                  :fetch-user-method="fetchUserMethod"
+                  :ref="'chat_' + item[keyField]"
+                  :show-context-btn="showContextBtn"
+                  :msg-time-field="msgTimeField"
+                  @view-context="handleViewContextClick(item)"
+                  @contextmenu="handleChatContextMenu(item, $event)"
+                >
+                  <template slot="chat" slot-scope="scope">
+                    <slot name="chat" v-bind="scope"></slot>
+                  </template>
+                  <template slot-scope="scope" slot="chat-foot">
+                    <slot name="chat-foot" v-bind="scope"></slot>
+                  </template>
+                  <template slot-scope="scope" slot="chat-append">
+                    <slot name="chat-append" v-bind="scope"></slot>
+                  </template>
+                </chat-panel-chat>
+              </template>
+            </template>
+          </template>
+        </template>
+      </template>
+    </div>
+    <div
+      class="sdk-panel-panel-chats__nearest"
+      v-if="showNearest"
+    >
+      <chat-panel-nearest
+        :empty="loadNearestEnd"
+        :loading="loadNearesting"
+        :reloading="reloading"
+        @load="handleNearestLoadMore"
+        @reload="handleNearestReload"
+      ></chat-panel-nearest>
+    </div>
+    <div
+      class="sdk-panel-panel-chats__new"
+      v-if="newMessageData && newMessageData.length"
+      @click="handleNewMessageClick"
+    >
+      <span class="sdk-chat-panel-nearest__button-text">有<b>{{ newMessageData.length }}</b>条新消息</span>
+    </div>
+  </div>
+</template>
+<script>
+import ChatPanelChat from './chat-panel-chat'
+import ChatPanelLoading from './chat-panel-loading'
+import ChatPanelIncrement from './chat-panel-increment'
+import ChatPanelNearest from './chat-panel-nearest'
+import ChatPanelEmpty from './chat-panel-empty'
+import { isElementInParentViewport } from './util'
+
+export default {
+  name: 'SdkChatPanelChats',
+  components: {
+    ChatPanelEmpty,
+    ChatPanelChat,
+    ChatPanelLoading,
+    ChatPanelNearest,
+    ChatPanelIncrement
+  },
+  props: {
+    keyField: {
+      type: String,
+      default: 'id'
+    },
+    // 没有pageSize的时候证明不需要分页加载
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    data: {
+      type: [Array, Object]
+    },
+    startDate: {
+      type: Number
+    },
+    endDate: {
+      type: Number
+    },
+    renderControl: {
+      type: Function
+    },
+    fetchUserMethod: {
+      type: Function
+    },
+    fetchDataMethod: {
+      type: Function
+    },
+    chatClassMethod: {
+      type: Function
+    },
+    isSenderMethod: {
+      type: Function
+    },
+    enableRangeLoad: {
+      type: Boolean,
+      default: true
+    },
+    loadCompleteText: {
+      type: String
+    },
+    showContextBtn: {
+      type: Boolean,
+      default: false
+    },
+    contextChatId: {
+      type: String
+    },
+    msgTimeField: {
+      type: String,
+      default: 'wechatTime'
+    },
+    enableDefaultDateRange: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    autoLoad: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      showNearest: false,
+      innerPageSize: this.pageSize,
+      loadHistoryNum: 0,
+      loadHistoryEnd: true,
+      loadHistorying: false,
+      loadNearestEnd: false,
+      loadNearesting: false,
+      reloading: this.loading,
+      viewerReady: false,
+      viewerImageId: null,
+      fetchDateRange: {
+        beginTime: null,
+        endTime: null
+      },
+      /**
+       * 主要是为了处理查看上下文时候记录，用户点击查看上下文按钮的时候，外面传contextChat进来，reload之后这个contextChat会没有，但是组件内部要记录一下，后面加载最近的逻辑要根据keepContextChat进行判断
+       * 正常的reload不需要展示最近加载按钮，只有从上下文或者查看制定消息的才需要，或者搜索的时候
+      */
+      keepContextChatId: null,
+      /**
+       * 新消息数据
+       * 当前滚动位置对应的后面的未查看消息相当于是新消息 
+       */ 
+      newMessageData: []
+    }
+  },
+  created () {
+    if (this.autoLoad) {
+      this.reloadChatData()
+    }
+  },
+  computed: {
+    dataType () {
+      return Array.isArray(this.data) ? 'array' : 'object'
+    },
+    firstMsgItem () {
+      if (!this.data) {
+        return
+      }
+      if (Array.isArray(this.data)) {
+        return this.data[0]
+      }
+      const keys = Object.keys(this.data)
+      const firstDayKey = keys[0]
+      if (!this.data[firstDayKey]) {
+        return
+      }
+      const millisecondsKeys = Object.keys(this.data[firstDayKey])
+      const firstMillisecondsKey = millisecondsKeys[0]
+      if (!this.data[firstDayKey][firstMillisecondsKey]) {
+        return
+      }
+      return this.data[firstDayKey][firstMillisecondsKey][0]
+    },
+    lastMsgItem () {
+      if (!this.data) {
+        return
+      }
+      if (Array.isArray(this.data)) {
+        return this.data[this.data.length - 1]
+      }
+      const keys = Object.keys(this.data)
+      const lastDayKey = keys[keys.length - 1]
+      if (!this.data[lastDayKey]) {
+        return
+      }
+      const millisecondsKeys = Object.keys(this.data[lastDayKey])
+      const lastMillisecondsKey = millisecondsKeys[millisecondsKeys.length - 1]
+      if (!this.data[lastDayKey][lastMillisecondsKey]) {
+        return
+      }
+      return this.data[lastDayKey][lastMillisecondsKey][this.data[lastDayKey][lastMillisecondsKey].length - 1]
+    },
+    isEmpty () {
+      return !this.firstMsgItem
+    },
+    innerEnableRangeLoad () {
+      // 不开启分页加载就不是范围加载
+      if (!this.pageSize) {
+        return false
+      }
+      if (!this.enableRangeLoad) {
+        return false
+      }
+      if (this.startDate && this.endDate) {
+        if (this.fetchDateRange && this.fetchDateRange.endTime && this.fetchDateRange.beginTime) {
+          if (this.fetchDateRange.beginTime <= this.startDate && this.endDate >= this.fetchDateRange.endTime) {
+            return false
+          }
+        }
+      }
+      return true
+    }
+  },
+  watch: {
+    loading () {
+      this.reloading = this.loading
+    },
+    lastMsgItem (newVal, oldVal) {
+      if (!newVal || !oldVal || newVal.id === oldVal.id) {
+        return
+      }
+      this.handleCheckScrollLastMessage()
+    }
+  },
+  methods: {
+    handleNewMessageClick () {
+      if (this.newMessageData && this.newMessageData.length) {
+        this.scrollTo(this.newMessageData[0][this.keyField])
+      }
+    },
+    handleCheckScrollLastMessage () {
+      if (this._disabledCheckScrollLastMessage) {
+        return
+      }
+      // 检查滚动到最后一条消息
+      // 这里需要注意，如果当前面板已经有滚动距离，且大于1个屏幕高的时候，只提醒有新消息，不滚动到最后一条消息
+      if (this.$refs.main.scrollTop < this.$refs.main.scrollHeight - this.$refs.main.clientHeight * 3) {
+        if (this.lastMsgItem && !this.newMessageData.some(v => v.id === this.lastMsgItem.id)) {
+          this.newMessageData.push(this.lastMsgItem)
+        }
+      } else {
+        this.scrollToBottom()
+      }
+    },
+    handleisSenderMethod (item) {
+      if (!this.isSenderMethod) {
+        return
+      }
+      return this.isSenderMethod({
+        item
+      })
+    },
+    handleChatContextMenu (item, evt) {
+      this.$emit('chat-contextmenu', item, evt)
+    },
+    handleViewContextClick (item) {
+      this.$emit('view-context', {
+        chat: item
+      })
+    },
+    handleChatClassMethod (item) {
+      if (typeof this.chatClassMethod === 'function') {
+        return this.chatClassMethod(item)
+      }
+    },
+    handlePanelScroll () {
+      this.checkNewMessageData()
+      // 加载更多消息
+      if (this.loadHistoryEnd || this.reloading || !this.$refs.main) {
+        return
+      }
+      if (this.$refs.main.scrollTop <= 0) {
+        this.loadHistorying = true
+        const relativeItem = this.firstMsgItem
+        if (relativeItem) {
+          this.fetchDateRange.endTime = relativeItem[this.msgTimeField]
+          this.fetchDateRange.beginTime = this.fetchDateRange.endTime - (1 * 1000 * 60 * 60 * 24 * 30)
+        }
+        if (this.startDate && this.fetchDateRange.beginTime && this.startDate > this.fetchDateRange.beginTime) {
+          this.fetchDateRange.beginTime = this.startDate
+        }
+        this.loadMoreChatData({
+          upward: true,
+          relativeItem
+        }).then((rs) => {
+          this.loadHistorying = false
+          if (this.innerPageSize) {
+            // 历史消息加载完毕
+            this.loadHistoryEnd = rs.length < this.innerPageSize
+          } else {
+            this.loadHistoryEnd = true
+          }
+        }, () => {
+          this.loadHistorying = false
+        })
+      }
+    },
+    handleIncrementRangeMore () {
+      this.loadHistorying = true
+      this.loadHistoryEnd = false
+      const relativeItem = this.firstMsgItem
+      if (relativeItem) {
+        this.fetchDateRange.endTime = relativeItem[this.msgTimeField]
+        this.fetchDateRange.beginTime = this.fetchDateRange.endTime - (1 * 1000 * 60 * 60 * 24 * 30)
+      }
+      if (this.startDate && this.fetchDateRange.beginTime && this.startDate > this.fetchDateRange.beginTime) {
+        this.fetchDateRange.beginTime = this.startDate
+      }
+      this.loadMoreChatData({
+        upward: true,
+        relativeItem
+      }).then((rs) => {
+        this.loadHistorying = false
+        // 历史消息加载完毕
+        if (this.innerPageSize) {
+          // 历史消息加载完毕
+          this.loadHistoryEnd = rs.length < this.innerPageSize
+        } else {
+          this.loadHistoryEnd = true
+        }
+      }, () => {
+        this.loadHistorying = false
+      })
+    },
+    handleIncrementLoadMore () {
+      this.loadHistorying = true
+      const relativeItem = this.firstMsgItem
+      if (relativeItem) {
+        this.fetchDateRange.endTime = relativeItem[this.msgTimeField]
+        this.fetchDateRange.beginTime = this.fetchDateRange.endTime - (1 * 1000 * 60 * 60 * 24 * 30)
+      }
+      if (this.startDate && this.fetchDateRange.beginTime && this.startDate > this.fetchDateRange.beginTime) {
+        this.fetchDateRange.beginTime = this.startDate
+      }
+      this.loadMoreChatData({
+        upward: true,
+        relativeItem
+      }).then((rs) => {
+        this.loadHistorying = false
+        if (this.innerPageSize) {
+          // 历史消息加载完毕
+          this.loadHistoryEnd = rs.length < this.innerPageSize
+        } else {
+          this.loadHistoryEnd = true
+        }
+      }, () => {
+        this.loadHistorying = false
+      })
+    },
+    handleNearestReload () {
+      this.reloadChatData()
+    },
+    handleNearestLoadMore () {
+      this.loadNearesting = true
+      const relativeItem = this.lastMsgItem
+      if (relativeItem) {
+        this.fetchDateRange.beginTime = relativeItem[this.msgTimeField] 
+        this.fetchDateRange.endTime = this.fetchDateRange.beginTime + (1 * 1000 * 60 * 60 * 24 * 30)
+      }
+      if (this.startDate && this.fetchDateRange.beginTime && this.startDate > this.fetchDateRange.beginTime) {
+        this.fetchDateRange.beginTime = this.startDate
+      }
+      this._disabledCheckScrollLastMessage = true
+      this.loadMoreChatData({
+        upward: false,
+        relativeItem: this.lastMsgItem
+      }, true).then((rs) => {
+        if (!rs || !rs.length && this.fetchDateRange.endTime > Date.now()) {
+          this.loadNearestEnd = true
+        }
+        this.loadNearesting = false
+      }, () => {
+        this.loadNearesting = false
+      }).finally(() => {
+        this.$nextTick(() => {
+          this._disabledCheckScrollLastMessage = false
+        })
+      })
+    },
+    checkNewMessageData () {
+      // 标记新消息已读
+      if (!this.newMessageData || !this.newMessageData.length) {
+        return
+      }
+      // 如果滚动条滚动到了这条消息，就从新消息里面移除掉
+      const cloneNewMessageData = [].concat(this.newMessageData)
+      cloneNewMessageData.some((message, index) => {
+        const $chatEl = Array.isArray(this.$refs['chat_' + message[this.keyField]]) ? this.$refs['chat_' + message[this.keyField]][0] : null
+        if (!$chatEl) {
+          return
+        }
+        if (!isElementInParentViewport($chatEl.$el, this.$refs.main)) {
+          return
+        }
+        this.newMessageData.splice(index, 1)
+      })
+    },
+    scrollTo (id) {
+      if (!id) {
+        return
+      }
+      this.$nextTick(() => {
+        const chatId = `chat_${id}`
+        if (this.$refs[chatId] && this.$refs[chatId][0]) {
+          if (!this.$refs.main) {
+            return
+          }
+          this.$refs.main.scrollTop = this.$refs[chatId][0].$el.offsetTop - this.$refs[chatId][0].$el.clientHeight
+        }
+      })
+    },
+    scrollToBottom () {
+      this.$nextTick(() => {
+        if (!this.$refs.main) {
+          return
+        }
+        this.$refs.main.scrollTop = this.$refs.main.scrollHeight + this.$refs.main.clientHeight
+      })
+    },
+    checkNearest ({ lastItem }) {
+      // 搜索场景
+      if (!!this.endDate) {
+        return false
+      }
+      // 点击查看上下文需要外面传过来，并且reload的时候才缓存一下的值，主要是解决只有查看上下文才展示
+      if (!this.keepContextChatId) {
+        return false
+      }
+      if (!this.fetchDateRange) {
+        return false
+      }
+      return this.fetchDateRange.beginTime < Date.now()
+    },
+    reloadChatData () {
+      const filters = {
+        firstLoad: true
+      }
+      this.loadNearestEnd = false
+      // 是否启用reload的时候默认生成时间范围，主要是客服端不需要默认的时间范围，但是管理端查看好友/群的聊天记录的时候又需要，因为后端说管理端会关连多个客服，不传时间后端不好处理
+      if (this.enableDefaultDateRange) {
+        this.fetchDateRange.endTime = this.endDate || Date.now()
+        if (this.startDate) {
+          this.fetchDateRange.endTime = this.endDate || Date.now()
+          if ((this.fetchDateRange.endTime - this.startDate) > 1000 * 60 * 60 * 24 * 30) {
+            this.fetchDateRange.beginTime = this.fetchDateRange.endTime - 1000 * 60 * 60 * 24 * 30
+          } else {
+            this.fetchDateRange.beginTime = this.startDate
+          }
+        } else {
+          this.fetchDateRange.beginTime = this.fetchDateRange.endTime - (1 * 1000 * 60 * 60 * 24 * 30)
+        }
+      } else {
+        // 因为后端需要分段加载，不能一次给太大的日期范围，所以每次最多30天加载
+        if (this.startDate && this.endDate) {
+          this.fetchDateRange.endTime = this.endDate || Date.now()
+          if ((this.fetchDateRange.endTime - this.startDate) > 1000 * 60 * 60 * 24 * 30) {
+            this.fetchDateRange.beginTime = this.fetchDateRange.endTime - 1000 * 60 * 60 * 24 * 30
+          } else {
+            this.fetchDateRange.beginTime = this.startDate
+          }
+        } else {
+          // 不传，后端会自己处理，这样可以防止最新消息没有加载的问题
+          this.fetchDateRange.beginTime = null
+          this.fetchDateRange.endTime = null
+        }
+      }
+      this.keepContextChatId = this.contextChatId
+      // 清除新消息数据
+      this.newMessageData = []
+      const ps = new Promise((resolve, reject) => {
+        if (this.reloading) {
+          return reject()
+        }
+        this.reloading = true
+        return this.loadChatData(filters).then((rs) => {
+          this.reloading = false
+          // 滚动到最底部
+          this.scrollToBottom()
+          if (this.innerPageSize) {
+            if (!this.increment || this.loadHistoryNum > 1) {
+              // 历史消息加载完毕
+              this.loadHistoryEnd = rs.length < this.innerPageSize
+            }
+          } else {
+            this.loadHistoryEnd = true
+          }
+          if (this.checkNearest) {
+            this.showNearest = !!this.checkNearest({
+              lastItem: this.lastMsgItem
+            })
+            if (!this.showNearest) {
+              this.keepContextChatId = null
+            }
+          }
+          this.$emit('loaded', {
+            data: rs
+          })
+          resolve(rs)
+        }, (err) => {
+          this.reloading = false
+          reject(err)
+        })
+      })
+      if (!this.inited) {
+        this.inited = true
+        ps.then(() => {
+          this.$emit('initloaded')
+        })
+      }
+      return ps
+    },
+    loadMoreChatData (filters, isDown) {
+      return this.loadChatData(filters).then((rs) => {
+        if (rs && rs.length) {
+          // 上滚动才定位到最后一个加载的数据
+          if (!isDown) {
+            const scrollToId = (rs[rs.length - 1] || {})[this.keyField]
+            this.scrollTo(scrollToId)
+          }
+        }
+        if (this.checkNearest) {
+          this.showNearest = !!this.checkNearest({
+            lastItem: this.lastMsgItem
+          })
+          if (!this.showNearest) {
+            this.keepContextChatId = null
+          }
+        }
+        if (!isDown) {
+          this.loadHistoryNum++
+        }
+        this.$emit('loaded', {
+          data: rs
+        })
+        return rs
+      })
+    },
+    loadChatData (filters) {
+      return new Promise((resolve, reject) => {
+        const rangeLoadFilter = {}
+        // if (this.enableRangeLoad) {
+        rangeLoadFilter.endTime = this.fetchDateRange.endTime
+        rangeLoadFilter.beginTime = this.fetchDateRange.beginTime
+        // }
+        this.fetchDataMethod(Object.assign({
+          upward: true,
+          pageSize: this.innerPageSize
+        }, filters, rangeLoadFilter)).then((rs) => {
+          resolve(rs)
+        }, (err) => {
+          reject(err)
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="less">
+.sdk-panel-panel-chats{
+  height: 100%;
+  position: relative;
+  &.is-show-nearest{
+    .sdk-panel-panel-chats__main{
+      padding-bottom: 72px;
+    }
+  }
+}
+.sdk-panel-panel-chats__main{
+  height: 100%;
+  box-sizing: border-box!important;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding: 9px 0 24px 0;
+  position: relative;
+}
+.sdk-panel-panel-chats__nearest{
+  position: absolute;
+  top: calc(~'100% - 72px');
+  right: 18px;
+  z-index: 3;
+}
+.sdk-panel-panel-chats__new{
+  position: absolute;
+  top: calc(~'100% - 44px');
+  right: 18px;
+  z-index: 3;
+  background-color: rgba(255, 255, 255, .95);
+  box-shadow: 0 0 3px rgba(0,0,0,.1);
+  border-radius: 15px;
+  cursor: pointer;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 12px;
+  transition: color .25s;
+  color: #666;
+  &:hover {
+    color: #4387ff;
+  }
+  b {
+    color: #4387ff;
+    margin: 0 2px;
+  }
+}
+</style>

package/components/chat-panel/chat-panel-empty.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="sdk-chat-panel-empty">
+    <div class="sdk-chat-panel-empty__icon">
+      <ui-icon name="weixinqun-line" :size="72"></ui-icon>
+    </div>
+    <div class="sdk-chat-panel-empty__text">
+      暂无数据
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'SdkChatPanelEmpty'
+}
+</script>
+<style lang="less">
+.sdk-chat-panel-empty{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.sdk-chat-panel-empty__icon{
+  color: #ccc;
+}
+.sdk-chat-panel-empty__text{
+  color: #aaa;
+  font-size: 14px;
+  margin-top: 6px;
+}
+</style>