123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455 |
- import api from '@/api'
- import { getLanguage, getUserOpt, setUserOpt, mobileInputBlur } from '@/util/util'
- import { mapState } from 'vuex'
- import _ from 'lodash'
- export const searchUserMixin = {
- data () {
- return {
- isSearch: false,
- searchList: null
- }
- },
- methods: {
- searchUser (e, originList) {
- let val = e.target.value.toLocaleLowerCase()
- if (!val) {
- this.isSearch = false
- return
- }
- this.searchList = originList.filter(item => {
- let inName, inNick
- let name = (item.name || item.user_name || '').toLocaleLowerCase()
- let nickName = (item.nick_name || '').toLocaleLowerCase()
- inName = name ? name.indexOf(val) > -1 : false
- inNick = nickName ? nickName.indexOf(val) > -1 : false
- return inName || inNick
- })
- this.isSearch = true
- }
- }
- }
- export const searchGroupUserMixin = {
- data () {
- return {
- showNum: 0,
- isSearchGroup: false,
- searchUserTimer: null,
- searchGroupList: []
- }
- },
- methods: {
- async searchUser (e, originList) {
- if (!e) return
- clearTimeout(this.searchUserTimer)
- this.searchUserTimer = setTimeout(async () => {
- let val = e.target.value.toLocaleLowerCase()
- let inviteType = this.inviteType
- this.isSearchGroup = true
- if (!val.trim()) {
- originList.forEach(item => {
- this.$set(item, 'isShow', true)
- })
- this.$nextTick(() => {
- this.isSearchGroup = false
- this.showNum = originList.length
- originList = this.originListCache
- })
- return
- }
-
- originList.forEach(item => {
- let inName, inNick
- let name = (item.user_name || '').toLocaleLowerCase()
- let nickName = (item.nick_name || '').toLocaleLowerCase()
- inName = name ? name.indexOf(val) > -1 : false
- inNick = nickName ? nickName.indexOf(val) > -1 : false
- this.$set(item, 'isShow', inName || inNick)
- })
- // 接口搜索
- if (!(originList.length + 1 >= this.membersNum || inviteType == 1 || inviteType == 2)) {
- await api.group.searchMember({
- group_id: this.group.groupId,
- keyword: val
- }).then(({ data }) => {
- let list = data.data
- list.forEach(item => {
- item.isChecked = false
- item.isChoosed = false
- item.isShow = true
- })
- originList = _.unionBy([...originList, ...list], 'user_id')
- })
- }
- this.searchGroupList = originList
- this.$nextTick(() => {
- this.showNum = originList.filter(item => {
- return item.isShow
- }).length
- })
- }, 200)
- }
- }
- }
- export const chatAtMixin = {
- data () {
- return {
- atInd: 0
- }
- },
- methods: {
- atPerson (name, nickName = name) {
- let el = this.$refs.chatInput
- let selectionStart = el.selectionStart
- let realStart = selectionStart - this.keyAfterAt.length
- this.inputMsg = this.inputMsg.slice(0, realStart) + `${name} ` + this.inputMsg.slice(selectionStart)
- this.atInd = 0
- el.focus()
- this.$nextTick(() => {
- el.setSelectionRange(realStart + name.length + 1, realStart + name.length + 1)
- })
- this.$store.commit('updateIsNewAt', {
- isNewAt: this.group.isNewAt,
- isNewAtFound: true
- })
- this.$store.commit('updateGroupSearchList', [])
- },
- handleUp (event) {
- if (this.atInd > 0) {
- this.atInd--
- }
- this.atShow && event.preventDefault()
- return true
- },
- handleDown (event) {
- let membersLen = this.filterMembers.length
- this.atInd < membersLen - 1 ? this.atInd++ : this.atInd = 0
- this.atShow && event.preventDefault()
- return true
- }
- }
- }
- export const chatInputMixin = {
- data () {
- return {
- selectionAfterAt: false,
- keyAfterAt: '',
- keyAfterAtTimer: '',
- lastKeyAfterAt: '',
- isIOS: !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
- isShowContextmenu: false,
- menuTop: 0,
- menuLeft: 0
- }
- },
- mounted () {
- },
- computed: {
- ...mapState([
- 'copyText'
- ]),
- filterMembers () {
- if (!this.group.groupId) return []
- let members = this.group.membersArray
- let resArr = []
- if (this.keyAfterAt !== '') {
- resArr = this.group.searchList
- } else {
- for (let k = 0; k < members.length; k++) {
- if (members[k].user_id == this.userId) continue
- resArr.push(members[k])
- }
- }
- return resArr.slice(0, 100)
- },
- atShow () {
- this.atInd = 0
- return this.selectionAfterAt && this.filterMembers.length
- }
- },
- watch: {
- keyAfterAt (val) {
- clearTimeout(this.keyAfterAtTimer)
- this.keyAfterAtTimer = setTimeout(() => {
- this.handleKeyAfterAt(val)
- }, 200)
- },
- inputMsg (val, newval) {
- this.handleSelectionChange()
- }
- },
- methods: {
- handleKeyAfterAt (val) {
- if (!this.group.groupId || val.trim() == '') return
- if (this.group.isNewAtFound) return
- if (this.group.membersArray.length < this.group.membersNum) {
- api.group.searchMember({
- group_id: this.group.groupId,
- keyword: val
- }).then(({ data }) => {
- this.$store.commit('updateGroupSearchList', data.data)
- })
- } else {
- let searchList = this.group.membersArray.filter(item => {
- let inName, inNick
- inName = item.user_name ? item.user_name.indexOf(val) > -1 : false
- inNick = item.nick_name ? item.nick_name.indexOf(val) > -1 : false
- return inName || inNick
- })
- this.$store.commit('updateGroupSearchList', searchList)
- }
- },
- getStrBeforeSelection () {
- let el = this.$refs.chatInput
- if (!el) return ''
- let selectionStart = el.selectionStart
- let prevStr = this.inputMsg.slice(0, selectionStart)
- return prevStr
- },
- getStrAfterSelection () {
- let el = this.$refs.chatInput
- if (!el) return ''
- let selectionStart = el.selectionStart
- let prevStr = this.inputMsg.slice(selectionStart)
- return prevStr
- },
- handleClick () {
- this.isShowContextmenu = false
- },
- handleLeft (event) {
- let el = this.$refs.chatInput
- let selectionStart = el.selectionStart
- if (selectionStart === 0) return true
- let prevStr = this.getStrBeforeSelection()
- let members = this.group.members
- for (let k in members) {
- let name = members[k].user_name
- let reg = new RegExp(`@${name} $`)
- if (reg.test(prevStr)) {
- event.preventDefault()
- el.setSelectionRange(selectionStart - name.length - 2, selectionStart - name.length - 2)
- return true
- }
- }
- },
- handleRight (event) {
- let el = this.$refs.chatInput
- let selectionStart = el.selectionStart
- let afterStr = this.getStrAfterSelection()
- let members = this.group.members
- for (let k in members) {
- let name = members[k].user_name
- let reg = new RegExp(`^@${name} `)
- if (reg.test(afterStr)) {
- event.preventDefault()
- el.setSelectionRange(selectionStart + name.length + 2, selectionStart + name.length + 2)
- return true
- }
- }
- return true
- },
- handleDel (event) {
- let el = this.$refs.chatInput
- let selectionStart = el.selectionStart
- if (selectionStart === 0) return
- let prevStr = this.getStrBeforeSelection()
- let members = this.group.members
- for (let k in members) {
- let name = members[k].user_name
- let reg = new RegExp(`@${name} $`)
- if (reg.test(prevStr)) {
- event.preventDefault()
- this.inputMsg = this.inputMsg.slice(0, selectionStart - name.length - 2) + this.inputMsg.slice(selectionStart)
- this.$nextTick(() => {
- el.setSelectionRange(selectionStart - name.length - 2, selectionStart - name.length - 2)
- })
- return
- }
- }
- },
- handleKeyDown (event) {
- if (this.atShow) {
- event.preventDefault()
- let item = this.filterMembers[this.atInd]
- this.atPerson(item.user_name, item.nick_name)
- return
- }
- if (event.altKey || event.ctrlKey) {
- let beforeStr = this.getStrBeforeSelection()
- let afterStr = this.getStrAfterSelection()
-
- this.inputMsg = beforeStr + '\n' + afterStr
- this.$nextTick(() => {
- this.$refs.chatInput.setSelectionRange(beforeStr.length + 1, beforeStr.length + 1)
- })
- } else {
- this.handleSend(event)
- event.preventDefault()
- }
- return true
- },
- handleFocus () {
- this.$emit('handleFocus')
- this.updateChatInputFocus(true)
- document.addEventListener('selectionchange', this.handleSelectionChange)
- if (this.isIOS) {
- setTimeout(() => {
- this.$root.$el.addEventListener('click', this.fixIOS)
- }, 0)
- }
- },
- handleBlur () {
- document.removeEventListener('selectionchange', this.handleSelectionChange)
- this.updateChatInputFocus(false)
-
- if (this.selectionAfterAt || this.isShowContextmenu) {
- setTimeout(() => {
- this.selectionAfterAt = false
- this.isShowContextmenu = false
- }, 200)
- }
- if (this.isIOS) {
- let scrollTop = document.body.scrollTop
- document.body.scrollTop = scrollTop
- this.$root.$el.removeEventListener('click', this.fixIOS)
- }
- mobileInputBlur()
- },
- handleEsc () {
- this.selectionAfterAt = false
- },
-
- handleSelectionChange () {
- let el = this.$refs.chatInput
- if (!el) return
- let selectionStart = el.selectionStart
- let selectionEnd = this.$refs.chatInput.selectionEnd
- if (selectionStart !== selectionEnd) return
- let prevStr = this.getStrBeforeSelection()
- this.selectionAfterAt = /@/.test(prevStr)
- if (this.selectionAfterAt) {
- this.keyAfterAt = prevStr.slice(prevStr.lastIndexOf('@') + 1)
- let isNewAt = this.keyAfterAt.indexOf(this.lastKeyAfterAt) < 0
- this.$store.commit('updateIsNewAt', {
- isNewAt: isNewAt,
- isNewAtFound: isNewAt ? false : this.group.isNewAtFound
- })
- if (isNewAt) this.$store.commit('updateGroupSearchList', [])
- this.lastKeyAfterAt = this.keyAfterAt
- }
- },
-
- handleContextmenu (ev) {
- if (!this.copyText) return
- this.isShowContextmenu = !this.isShowContextmenu
- if (this.isShowContextmenu) {
- this.menuTop = ev.offsetY
- this.menuLeft = ev.offsetX > 100 ? ev.offsetX - 30 : ev.offsetX
- }
- },
-
- handlePaste () {
- this.isShowContextmenu = false
- this.inputMsg += this.copyText
- },
-
- closeEmojiList () {
- this.emojiShow = false
- },
- fixIOS (event) {
- setTimeout(() => {
- if (this.$refs.chatInput === document.activeElement) {
- document.activeElement.blur()
- }
- }, 0)
- }
- }
- }
- export const addPanelSessionMixin = {
- methods: {
- addPanelSession (serverId, sessionId) {
-
- let isInSession = this.sessionList.some(v => {
- return v.session_id == sessionId
- })
- if (!isInSession) {
-
- api.user.getOtherInfo({
- target_id: serverId
- }).then(({ data }) => {
- let userInfo = data.data
- let obj = {
- cover_photo: userInfo.cover_photo,
- is_group: '0',
- name: userInfo.nick_name,
- session_id: sessionId,
- unread: 0
- }
- this.$store.commit('addSessionItem', obj)
- })
- }
- }
- }
- }
- export const changeLangMixin = {
- data () {
- return {
- curLang: getUserOpt('lang') || getLanguage()
- }
- },
- methods: {
- changeLang () {
- let changeLang = this.curLang == 'en' ? 'zh' : 'en'
- this.$i18n.locale = changeLang
- this.curLang = changeLang
-
- setUserOpt('lang', changeLang)
- }
- }
- }
|