123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687 |
- import msgItem from '@/components/msgItem'
- import emoji from '@/components/emoji'
- import chatAt from '@/components/chatAt'
- import atMe from '@/components/chatAt/atme'
- import chatPin from '@/components/chatPin'
- import toolbar from '@/components/chatInput/toolbar'
- import { mapActions, mapState, mapMutations } from 'vuex'
- import { getMiniWsUrl } from '@/util/contract.js'
- import { isMobile, lazyloadImage } from '@/util/util.js'
- import WsManager from '@/util/wsManager.js'
- import { Message } from 'element-ui'
- import ImageMin from '@/util/imageMin.js'
- import { chatAtMixin, chatInputMixin, changeLangMixin } from '@/mixins'
- import { chatCommonMixin } from '@/mixins/chat'
- import { accountLoginMixin } from '@/mixins/login'
- import { emojiList } from '@/util/emoji'
- import api from '@/api'
- import loginBox from '@/components/login/loginBox'
- export default {
- name: 'chatMini',
- mixins: [accountLoginMixin, chatAtMixin, chatInputMixin, chatCommonMixin, changeLangMixin],
- components: {
- msgItem,
- emoji,
- chatAt,
- chatPin,
- atMe,
- toolbar,
- loginBox
- },
- props: {
- width: {
- type: Number,
- default: 274
- },
- height: {
- type: Number,
- default: 390
- },
- show: {
- type: Boolean,
- default: false
- },
- groupId: [Number, String]
- },
- computed: {
- ...mapState([
- 'account',
- 'group',
- 'userId',
- 'userInfo'
- ]),
- ...mapState({
- chatInputFocus: state => state.group.chatInputFocus,
- blockList: state => state.group.blockList,
- pinMsg: state => state.group.pinMsg,
- atList: state => state.group.atList,
- chatList: state => state.group.chatList,
- unreadNums: state => state.group.unreadNums,
- sessionList: state => state.chat.sessionList,
- isJoin: state => state.group.isJoin
- }),
- avatarUrl () {
- if (/^http/.test(this.userInfo.cover_photo)) return `${this.userInfo.cover_photo}?imageview/0/w/400`
- else return this.userInfo.cover_photo
- },
- emojiMap () {
- var emojiMap = {}
- for (let i in emojiList) {
- let arr = emojiList[i]
- arr.forEach(v => {
- let names = JSON.stringify(v.names)
- let emoji = v.surrogates
- emojiMap[names] = emoji
- })
- }
- return emojiMap
- },
- linkToCreator () {
- let { creator, userId } = this.group
- let sessionId = creator > userId ? `${userId}-${creator}` : `${creator}-${userId}`
- return `${location.origin}/#/pm/${sessionId}`
- },
- isAdmin () {
- return (this.group.adminList && this.group.adminList.some(id => id == this.userId)) || this.group.creator == this.userId
- }
- },
- data () {
- return {
- loginBoxVisible: false,
- isLoadingRoom: true,
- isMobile: isMobile(),
- showChat: !!this.show,
- showEmoji: false,
- showMenuExtra: false,
- showLoginBtn: true,
- lockMore: false,
- isScrollToView: false,
- lockEnd: false,
- loading: false,
- unreadCounts: 0,
- inputMsg: '',
- atInd: 0,
- inputHeight: 18,
- enableScroll: false,
- isBottom: true,
- toolShow: false,
- chatImageArrSel: null,
- serverUnRead: 0,
- personUnRead: 0
- }
- },
- watch: {
- inputMsg (val, newval) {
- let ele = this.$refs.chatInput
- this.inputHeight = 'auto'
- this.$nextTick(() => {
- this.inputHeight = Math.max(18, Math.min(ele.scrollHeight, 75)) + 'px'
- })
- },
- chatList (val) {
- let lastVal = val[val.length - 1]
- if ((lastVal && lastVal.msg_type == 4) || this.isBottom) {
-
- this.$nextTick(this.resizeToBottom)
- }
- },
- chatInputFocus (val, newval) {
- if (this.showLoginBtn) return
- let ele = this.$refs.chatInput
- if (val) {
- if (document.activeElement !== ele) {
- this.placeEnd(ele)
- ele.focus()
- }
- } else {
- if (document.activeElement === ele) {
- ele.blur()
- }
- }
- }
- },
- async mounted () {
-
- this.initGroup({
- userId: this.userId,
- groupId: this.groupId,
- useCache: false
- })
-
- let isLogin = await this.checkLocalLogin()
- if (isLogin) {
- this.showLoginBtn = false
- await this.getUserInfo()
- }
- this.$nextTick(this.initChat)
- this.$nextTick(this.initMiniSocket)
- document.getElementById('app').addEventListener('contextmenu', e => e.preventDefault())
- document.addEventListener('paste', this.initPaste)
- document.addEventListener('drop', this.initDrop)
- document.addEventListener('dragover', this.initDragOver)
- document.body.addEventListener('click', () => {
- this.showEmoji = false
- this.showMenuExtra = false
- this.toolShow = false
- })
- },
- beforeDestroy () {
- document.removeEventListener('paste', this.initPaste)
- document.removeEventListener('drop', this.initDrop)
- document.removeEventListener('dragover', this.initDragOver)
- },
- methods: {
- ...mapMutations([
- 'initGroup',
- 'setUserId',
- 'setToken',
- 'addChatItem',
- 'updateChatInputFocus',
- 'updateGroupBlockList',
- 'updateMembers',
- 'updateGroupPinMsg',
- 'repealChatItem',
- 'clearAtList',
- 'initState',
- 'addPacketItem',
- 'addPacketTip',
- 'addUnreadNums',
- 'resetUnreadNums',
- 'addPinChatItem',
- 'setLogining'
- ]),
- ...mapActions([
- 'getUserInfo',
- 'setAccount',
- 'doGameLogin',
- 'doScatterLogout',
- 'getGroupInfo',
- 'getNewMsgFromDb',
- 'getNewMsg',
- 'getHistoryMsg',
- 'doSendMsg',
- 'doSendFile',
- 'updateSessionLastmsg'
- ]),
- handleMoreClick () {
- this.showEmoji = false
- this.toolShow = !this.toolShow
- this.checkNeedToBottom()
- },
- handleEmojiClick () {
- this.toolShow = false
- this.showEmoji = !this.showEmoji
- this.checkNeedToBottom()
- },
- checkNeedToBottom () {
- if (!this.isBottom) return
- this.$nextTick(() => {
- this.resizeToBottom()
- })
- },
- async initMiniLoginCallback () {
-
-
-
-
-
-
-
-
-
- location.reload()
- },
-
- initMiniSocket () {
- if (!window.WebSocket) {
- console.log('Error: WebSocket is not supported .')
- return
- }
- let host = getMiniWsUrl() + `?group_id=${this.groupId}`
- if (this.socket) {
- this.socket.destroy()
- this.socket = null
- }
- this.socket = new WsManager(host, {
- autoConnect: true,
- reconnection: true,
- reconnectionDelay: 2000
- })
- this.socket.on('open', res => {})
- this.socket.on('message', (data) => {
- data = JSON.parse(data)
- if (data.channel.match('chat:group')) {
- if (data.data.type === 'msg') {
- this.getNewMsg({ newMsg: true })
- if (data.data.from != this.userId) {
-
- if (!this.showChat) {
- if (this.unreadCounts === 0) {
- this.postResize(130, 50)
- }
- this.unreadCounts++
- } else {
- this.addUnreadNums()
- }
- }
- }
- if (data.data.type === 'repeal') {
- this.repealChatItem(data.data)
- }
- if (data.data.type === 'block') {
- this.updateGroupBlockList({
- type: 'add',
- id: data.data.to
- })
- }
- if (data.data.type === 'unblock') {
- this.updateGroupBlockList({
- type: 'delete',
- id: data.data.to
- })
- }
- if (data.data.type === 'join') {
- this.updateMembers(data.data.user_info)
- }
- if (data.data.type === 'pin_msg') {
- this.updateGroupPinMsg(data.data.pinMsg)
- }
- if (data.data.type === 'unpin_msg') {
- this.updateGroupPinMsg(null)
- }
- if (data.data.type === 'new_redpack') {
- this.addPacketItem(data.data)
- if (data.data.from == this.userId) {
- this.$nextTick(this.resizeToBottom)
- }
- }
- if (data.data.type === 'grab_redpack') {
- if (data.data.from == this.userId || data.data.to == this.userId) {
- this.addPacketTip(data.data)
- }
- }
- }
- })
- },
-
- async initChat () {
- this.handleToggleChat(this.show)
- this.isLoadingRoom = true
- await this.getGroupInfo()
- await this.getNewMsgFromDb()
- await this.getNewMsg()
- this.isLoadingRoom = false
-
- if (!this.showLoginBtn) {
- await this.getPmUnRead()
- }
- if (this.show) {
- this.$nextTick(this.resizeToBottom)
- }
- this.chatImageArrSel = this.$refs.scrollWrap.getElementsByTagName('img')
- },
- getPmUnRead () {
- api.session.getMiniUnRead().then(({ data }) => {
- this.personUnRead = data.data['0']
- this.serverUnRead = data.data[this.groupId] || 0
- })
- },
-
- clearPmUnread (type) {
- if (type == 1) this.serverUnRead = 0
- else this.personUnRead = 0
- },
- async handleLogout () {
- this.doScatterLogout()
- this.showLoginBtn = true
- if (self !== top) {
- localStorage.removeItem('account')
- this.postMessager.send({
- action: 'meechat:logout'
- })
- }
-
- this.$store.commit('setUserInfo', null)
-
-
-
- location.replace(location.href.replace('show=false', 'show=true'))
- },
- async handleLogout2 () {
- this.doScatterLogout()
- this.showLoginBtn = true
- },
-
- async handleLogin () {
-
- this.loginBoxVisible = true
- },
-
- resizeToBottom () {
- this.$refs.scrollWrap.scrollTop = this.$refs.msgWrap.offsetHeight
- this.resetUnreadNums()
- this.isBottom = true
- lazyloadImage({
- wrap: this.$refs.scrollWrap,
- imageArr: this.chatImageArrSel,
- derection: 'up'
- })
- },
-
- doSetRead () {
- this.resizeToBottom()
- },
-
- addEmoji (value) {
- this.inputMsg += value
- },
-
- handleScroll (e) {
- this.enableScroll = true
- e.target.focus()
-
- if (!this.group.chatList.length) {
- return
- }
-
-
-
-
- let msgWrap = this.$refs.msgWrap
- let totalHeight = msgWrap.offsetHeight
- let scrollTop = e.target.scrollTop
- if (scrollTop === 0 && !this.lockMore) {
- if (this.group.endHash !== null) {
- this.lockMore = true
- this.getHistoryMsg().then((res) => {
- if (res === 'end') {
- this.lockEnd = true
- } else {
- let scrollBottom = totalHeight - scrollTop
- this.$nextTick(() => {
- e.target.scrollTop = msgWrap.offsetHeight - scrollBottom
- this.ps && this.ps.update()
- setTimeout(() => {
- this.lockMore = false
- }, 800)
- })
- }
- })
- }
- }
-
- if (scrollTop + e.target.offsetHeight > totalHeight) {
- this.isBottom = true
- if (this.unreadNums) {
- this.resetUnreadNums()
- }
- } else {
- this.isBottom = false
- }
- lazyloadImage({
- wrap: this.$refs.scrollWrap,
- imageArr: this.chatImageArrSel,
- derection: 'up'
- })
- },
-
- async handleSend (e) {
-
- if (this.blockList.some(id => id == this.userId)) {
- Message({
- message: this.$t('chat.youAreBan'),
- type: 'error'
- })
- return
- }
-
- let _inputMsg = this.inputMsg
- let parts = _inputMsg.match(/\["[a-z0-9A-Z_]+"\]/g)
- for (let k in parts) {
- let emoji = this.emojiMap[parts[k]]
- if (emoji) {
- _inputMsg = _inputMsg.replace(parts[k], emoji)
- }
- }
- let text = _inputMsg.trim()
- if (text.length === 0) {
- Message({
- message: this.$t('chat.cannotBeEmpty'),
- type: 'warning'
- })
- return
- }
- let opt = {
- type: 0,
- msg: text
- }
-
- this.inputMsg = ''
-
- if (this.group.members[this.userId]) {
- let createTime = Date.now()
- this.addChatItem({
- from: this.userId,
- content: text,
- hash: `${createTime}`,
- timestamp: createTime,
- createTime,
- msg_type: '0',
- loading: true
- })
- opt.createTime = createTime
- await this.doSendMsg(opt)
- } else {
-
- await this.doSendMsg(opt)
- }
-
- this.$nextTick(function () {
- this.resizeToBottom()
- })
- e.preventDefault()
- return false
- },
- placeEnd (el) {
- var range = document.createRange()
- range.selectNodeContents(el)
- range.collapse(false)
- var sel = window.getSelection()
- sel.removeAllRanges()
- sel.addRange(range)
- },
- initDrop (e) {
- e.preventDefault()
- let files = Array.from(e.dataTransfer.files)
- files.forEach(file => this.handleFile(file))
- },
- initDragOver (e) {
- e.preventDefault()
- },
- initPaste (event) {
- var items = (event.clipboardData || window.clipboardData).items
- if (items && items.length) {
- Array.from(items).forEach(item => {
- let file = item.getAsFile()
- if (file) {
- this.handleFile(file)
- }
- })
- }
- },
-
- async preHandleFile (file) {
- let type = file.type
- let size = file.size
- if (type.match('video')) {
- return size > 3 * 1024 * 1024 ? Promise.reject(new Error(file)) : Promise.resolve({
- type: 2,
- res: file
- })
- } else if (type.match('audio')) {
- return size > 2 * 1024 * 1024 ? Promise.reject(new Error(file)) : Promise.resolve({
- type: 3,
- res: file
- })
- } else if (type.match('image')) {
- let image = await new ImageMin({
- file: file,
- maxSize: 1024 * 1024
- })
- return {
- type: 1,
- preview: image.base64,
- res: image.res
- }
- }
- },
-
- async handleFile (e) {
- let inputfile
- if (e.constructor === File) {
- inputfile = e
- } else {
- inputfile = e.target.files[0]
- }
- try {
- let fileInfo = await this.preHandleFile(inputfile)
- let opt = { res: fileInfo.res }
- if (this.group.members[this.userId]) {
- let createTime = Date.now()
- this.addChatItem({
- content: fileInfo.preview || '',
- from: this.userId,
- hash: `${createTime}`,
- msg_type: fileInfo.type,
- timestamp: createTime,
- res: fileInfo.res,
- loading: true,
- createTime
- })
- opt.createTime = createTime
- }
- this.doSendFile(opt)
- this.toolShow = false
- setTimeout(() => {
- this.$refs.toolbar.resetInput()
- this.resizeToBottom()
- }, 100)
- } catch (error) {
- Message({
- message: this.$t('chat.maxUploadTips'),
- type: 'warning'
- })
- }
- },
-
- handleToggleChat (flag) {
- if (flag) {
- this.showChat = true
- this.unreadCounts = 0
- this.$nextTick(() => {
- this.postResize(this.width, this.height + 16)
- this.resizeToBottom()
- })
- } else {
- this.showChat = false
- this.$nextTick(() => {
- this.postResize(56, 50)
- })
- }
- },
- postResize (width, height) {
- let request = {
- action: 'meechat:resize',
- data: {
- ch: height,
- cw: width
- }
- }
- return window.parent.postMessage(request, '*')
- },
-
- quoteMsg (msg) {
- this.inputMsg = msg
- },
- hideLoginBox () {
- this.loginBoxVisible = false
- this.setLogining(false)
- }
- }
- }
|