<template>
|
<div class="service-box pb-150 flex flex-col">
|
<van-nav-bar :title="$t('在线客服')" left-arrow @click-left="onClickLeft" fixed />
|
<div class="flex-1" v-if="kefu_url">
|
<iframe :src="kefu_url+'?visiter_id='+userInfo.usercode+'&visiter_name='+userInfo.username+'&visiter_id='+userInfo.usercode" width="100%" height="100%" frameborder="0"></iframe>
|
</div>
|
<div v-else class="localKefu flex-1 flex">
|
<div class="flex flex-col px-32 box-border flex-1" ref="boxScroll" style="overflow:auto;">
|
<div class="w-full py-10 text-grey text-center pt-10" @click="onMore"
|
:style="{ 'visibility': finished ? 'hidden' : 'visiable' }">
|
{{ $t('历史消息') }}</div>
|
<ul class="flex flex-col pt-20">
|
<li v-for="(item, index) in list" :key="item.id" class="flex flex-col mt-20"
|
v-if="item.delete_status == 0">
|
<p class="font-26 text-center py-20 text-grey">
|
{{ item.createtime }}</p>
|
<div class="flex" :class="item.send_receive === 'send' ? 'justify-end' : ''">
|
<template v-if="item.send_receive === 'receive'">
|
<img src="@/assets/image/assets-center/logo.jpeg" class="w-81 h-81 mr-40" />
|
<div class="responser px-50 py-35 font-30 rounded-lg font-26 chatBg">
|
<p class="break-word textColor" style="max-width: 230px;" v-if="item.type === 'text'">
|
{{ item.content }}</p>
|
<img v-else :src="item.content" class="w-200 h-200" @click="onPreview(item.content)" />
|
</div>
|
</template>
|
<div class="py-25 px-50 responser-two rounded-lg flex flex-col chatBg" v-else>
|
<img :src="`${item.content}`" class="w-200 h-200" v-if="item.type === 'img'"
|
@click="onPreview(item.content)" />
|
<p class="break-word textColor" v-else style="max-width: 230px;">{{ item.content }}
|
</p>
|
</div>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div
|
class="bottom flex justify-between h-130 items-center w-full fixed bottom-0 borderTop px-32 box-border bgBottom">
|
<van-uploader :max-size="10000 * 1024" @oversize="onOversize" :after-read="afterRead">
|
<img src="@/assets/image/service/photo.png" class="w-72 h-72" />
|
</van-uploader>
|
<input type="text" v-model="value" :placeholder="$t('请输入您的消息...')"
|
class="flex-1 mx-20 h-full border-none bgBottom textColor" />
|
<img src="@/assets/image/service/send.png" class="w-72 h-72" @click="send('text', value)" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import { _getMsg, _getUnreadMsg, _sendMsg } from '@/API/im.api'
|
import { _uploadImage,_getIdentify } from '@/API/fund.api'
|
import { Uploader, ImagePreview } from 'vant'
|
export default {
|
name: 'CustomerService',
|
components: {
|
[Uploader.name]: Uploader
|
},
|
data() {
|
return {
|
list: [],
|
value: '',
|
lastMsgId: '',
|
interval: null,
|
unread: 0,
|
finished: false, // 没有历史消息
|
currentScrollTop: 0,
|
isScrollBottom: false,
|
userid:'',
|
username:'',
|
}
|
},
|
computed: {
|
...mapGetters('home', ['kefu_url']),
|
...mapGetters({
|
userInfo: 'user/userInfo',
|
theme: 'home/theme'
|
}),
|
// kefu_url() {
|
// return `https://kf.serverspay.com/index/index/home?visiter_id=${this.visiterId}&visiter_name=${encodeURIComponent(this.visiterName)}&avatar=&business_id=${this.businessId}&groupid=${this.groupId}&special=${this.special}`;
|
// }
|
},
|
created() {
|
this.fetchList()
|
},
|
mounted() {
|
window.addEventListener('scroll', this.handleScroll, true)
|
// this.getIdentify()
|
},
|
methods: {
|
// getIdentify() {
|
// _getIdentify().then(data => {
|
// this.userid = data.id
|
// this.username = data.name
|
// })
|
// },
|
onOversize(file) {
|
console.log(file);
|
this.$toast(this.$t('文件大小不能超过10m'));
|
},
|
onPreview(url) { // 预览
|
ImagePreview([url])
|
},
|
showTime(index) { // 时间显示
|
if (index === 0) {
|
return true
|
}
|
if (index === this.list.length - 1) {
|
return false
|
}
|
if (this.list[index].createtime.split(' ')[0] === this.list[index + 1].createtime.split(' ')[1]) {
|
return false
|
}
|
},
|
afterRead(file) { // 文件上传
|
this.$toast.loading({ duration: 0 })
|
_uploadImage(file, (percent) => {
|
console.log(percent)
|
}).then(data => {
|
this.$toast.clear()
|
this.send('img', data)
|
}).catch(() => {
|
this.$toast.clear();
|
file.status = 'failed';
|
file.message = this.$t('图片上传失败');
|
})
|
},
|
fetchList(message_id = '') { // 获取消息列表
|
_getMsg({ message_id }).then(data => { // this.lastMsgId
|
if (!this.lastMsgId) {
|
this.lastMsgId = data.length && data[data.length - 1]['id']
|
}
|
if (data.length) {
|
if (message_id) { // 加载更多
|
this.lastMsgId = data[data.length - 1]['id']
|
this.list = [...data.reverse(), ...this.list]
|
} else {
|
let list = [...this.list, ...data.reverse()]
|
let hash = {};
|
list = list.reverse().reduce(function (preVal, curVal) {
|
hash[curVal.id] ? ' ' : hash[curVal.id] = true && preVal.push(curVal);
|
return preVal
|
}, []);
|
this.list = list.reverse()
|
}
|
if (this.isScrollBottom) {
|
this.$refs.boxScroll.scrollTop = this.$refs.boxScroll.scrollHeight - this.$refs.boxScroll.offsetHeight
|
}
|
// this.currentScrollTop = this.$refs.boxScroll.scrollTop;
|
this.currentScrollTop = '100';
|
if (data.length < 10) {
|
this.finished = true
|
}
|
}
|
|
// else {
|
// this.list = [{ id: '1', send_receive: 'receive', content: this.$t('你好，欢迎来到我们的数字货币平台!'), type: 'text'}]
|
// }
|
if (!message_id) {
|
this.clearInterval()
|
this.interval = setInterval(() => {
|
this.fetchList()
|
}, 1000)
|
}
|
})
|
},
|
handleScroll() {
|
if (this.$refs.boxScroll.scrollTop == this.currentScrollTop) {
|
this.isScrollBottom = true
|
} else {
|
this.isScrollBottom = false
|
}
|
},
|
onMore() { // 加载更多
|
this.fetchList(this.lastMsgId)
|
},
|
clearInterval() {
|
if (this.interval) {
|
clearInterval(this.interval)
|
this.interval = null
|
}
|
},
|
fetchUnread() { // 获取未读
|
_getUnreadMsg().then(data => {
|
this.unread = data
|
})
|
},
|
onClickLeft() { // 返回
|
this.$router.go(-1);
|
},
|
send(type = 'text', content = '') { // 发送消息, img 也当消息text
|
if (!content) {
|
this.$toast(this.$t('请输入消息内容'))
|
return
|
}
|
_sendMsg(type, content).then(data => {
|
console.log(data)
|
this.isScrollBottom = true
|
this.value = ''
|
// document.getElementById('bottom').click()
|
})
|
}
|
|
},
|
beforeDestroy() {
|
this.clearInterval()
|
},
|
activated() {
|
window.addEventListener('scroll', this.handleScroll, true)
|
},
|
deactivated() {
|
this.clearInterval()
|
window.removeEventListener('scroll', this.handleScroll)
|
},
|
destroyed() {
|
window.removeEventListener('scroll', this.handleScroll)
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.service-box {
|
width: 100%;
|
height: 100%;
|
box-sizing: border-box;
|
|
::v-deep .van-hairline--bottom::after {
|
@include themify() {
|
border-color: themed("border_color");
|
}
|
}
|
}
|
|
.break-word {
|
word-wrap: break-word;
|
white-space: pre-wrap;
|
}
|
|
.max-w-230 {
|
max-width: 230px;
|
}
|
|
.responser {
|
position: relative;
|
|
&::after {
|
content: '';
|
width: 0;
|
height: 0;
|
border-top: 10px solid transparent;
|
border-bottom: 10px solid transparent;
|
|
@include themify() {
|
border-right: 2px solid themed("chat_bg");
|
}
|
|
position: absolute;
|
left: -20px;
|
top: 20px;
|
}
|
}
|
|
.responser-two {
|
position: relative;
|
|
&::after {
|
content: '';
|
width: 0;
|
height: 0;
|
border-bottom: 10px solid transparent;
|
border-top: 10px solid transparent;
|
|
@include themify() {
|
border-left: 20px solid themed("chat_bg");
|
}
|
|
position: absolute;
|
right: -19px;
|
top: 20px;
|
}
|
}
|
|
.borderTop {
|
@include themify() {
|
border-top: 1px solid themed("border_color");
|
}
|
}
|
|
.localKefu {
|
overflow: auto;
|
padding-bottom: 40px;
|
}
|
|
.van-nav-bar--fixed {
|
position: relative !important;
|
}
|
|
.bottom {
|
margin-bottom: constant(safe-area-inset-bottom);
|
margin-bottom: env(safe-area-inset-bottom);
|
}
|
</style>
|
