638 lines
14 KiB
Vue
638 lines
14 KiB
Vue
<template>
|
||
<view class="chat flex-col">
|
||
<view class="content" @tap="showEmoji = false">
|
||
<scroll-view style="height: 100%;" :scroll-y="true" :scroll-top="scrollTop" :scroll-into-view="intoView"
|
||
@scrolltoupper="scrollToupper">
|
||
<view class="loading flex row-center" v-if="pageStatus == 'loading'">
|
||
<u-loading mode="flower" size="40"></u-loading>
|
||
</view>
|
||
<view class="chat-lists">
|
||
<view class="chat-item" v-for="(item,index) in recoreds" :id="`chat-item_${item.id}`" :key="item.id"
|
||
:class="{
|
||
'right': item.from_type == 'user',
|
||
'left': item.from_type == 'kefu',
|
||
'visibility': showIndex > index
|
||
} ">
|
||
|
||
<!-- 普通聊天记录 -->
|
||
<template v-if="item.type == 1">
|
||
<!-- 时间 -->
|
||
<view class="text-center m-b-30 white" v-if="timeFormat(item,index)">
|
||
<view class="chat-tips xs">{{timeFormat(item,index)}}</view>
|
||
</view>
|
||
<view class="chat-info">
|
||
<image class="avatar" :src="$getImageUri(item.from_avatar)">
|
||
</image>
|
||
<!-- 文本 -->
|
||
<view class="text-box" v-if="item.msg_type == 1">
|
||
<rich-text :nodes="replaceEmoji(item.msg)" space="nbsp"></rich-text>
|
||
</view>
|
||
<!-- 图片 -->
|
||
<view class="image-box" v-if="item.msg_type == 2">
|
||
<image class="image" mode="widthFix" :src="$getImageUri(item.msg)"
|
||
@tap="previewImage($getImageUri(item.msg))">
|
||
</image>
|
||
</view>
|
||
<!-- 商品 -->
|
||
<view class="goods m-r-20 goods-box" v-if="item.msg_type == 3">
|
||
<view class="goods-img m-r-20">
|
||
<image style="width: 140rpx;height: 140rpx;"
|
||
:src="$getImageUri(item.goods.image)">
|
||
</image>
|
||
</view>
|
||
<view class="goods-info flex-1">
|
||
<view class="line-2">
|
||
{{item.goods.name}}
|
||
</view>
|
||
<view class="flex m-t-10 row-between">
|
||
<price-format :color="colorConfig.primary" :subscript-size="26"
|
||
:first-size="38" :second-size="26" :price="item.goods.min_price">
|
||
</price-format>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<!-- 通知类型记录 -->
|
||
<template v-else>
|
||
<view class="text-center white">
|
||
<view class="muted xs">{{item.msg}}</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="error" v-if="isError">
|
||
<view class="error-msg text-center xs">{{errorMsg}}</view>
|
||
</view>
|
||
<view id="bottom"></view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="footer" @tap="showGoods = false">
|
||
<view class="footer-input flex">
|
||
<view class="album" @tap="uploadFile">
|
||
<image class="icon" src="@/static/images/icon_album.png"></image>
|
||
</view>
|
||
<view class="input-contain flex">
|
||
<input v-model="msg" class="text-area" confirm-type="send" maxlength="-1"
|
||
@focus="scrollToBottom" @confirm="sendText" />
|
||
<image class="icon" src="@/static/images/icon_emoji.png" @tap="handleEmojiShow"></image>
|
||
</view>
|
||
<button size="sm" class="send-btn" @tap="sendText">发送</button>
|
||
</view>
|
||
<view class="emoji-wrap" :class="{'emoji-show': showEmoji}">
|
||
<scroll-view style="height:100%;" scroll-y="true">
|
||
<emoji @input="handleEmojiInput"></emoji>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="goods" v-if="showGoods">
|
||
<view class="close" @tap="showGoods = false">
|
||
<u-icon name="close-circle-fill" color="#ccc" size="40"></u-icon>
|
||
</view>
|
||
<view class="goods-img m-r-20">
|
||
<u-image width="140rpx" height="140rpx" :src="goodsInfo.image"></u-image>
|
||
</view>
|
||
<view class="goods-info flex-1">
|
||
<view class="line-2">
|
||
{{goodsInfo.name}}
|
||
</view>
|
||
<view class="flex m-t-10 row-between">
|
||
<price-format :color="colorConfig.primary" :subscript-size="26" :first-size="38" :second-size="26"
|
||
:price="goodsInfo.min_price">
|
||
</price-format>
|
||
<view class="send-btn" @tap="sendGoods">发送链接</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import Socket from '@/utils/socket'
|
||
import {
|
||
chatRecord
|
||
} from '@/api/user'
|
||
import {
|
||
getChatConfig
|
||
} from '@/api/app'
|
||
import {
|
||
getGoodsDetail
|
||
} from '@/api/store'
|
||
import {
|
||
client,
|
||
uploadFile,
|
||
getRect,
|
||
debounce
|
||
} from '@/utils/tools'
|
||
import {
|
||
timeFormatChat
|
||
} from '@/utils/date'
|
||
import {
|
||
mapMutations
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
pageStatus: 'loading',
|
||
scrollTop: '',
|
||
intoView: '',
|
||
page: 1,
|
||
msg: '',
|
||
socket: {},
|
||
kefu: {},
|
||
showEmoji: false,
|
||
recoreds: [],
|
||
errorMsg: '',
|
||
goodsInfo: {},
|
||
isError: false,
|
||
showGoods: false,
|
||
showIndex: -1
|
||
}
|
||
},
|
||
computed: {
|
||
// 设置记录
|
||
timeFormat() {
|
||
return (item, index) => {
|
||
let timeFmt = timeFormatChat(item.create_time_stamp)
|
||
if (index && item.create_time_stamp - this.recoreds[index - 1].create_time_stamp < 300 && !item
|
||
.show_time) {
|
||
timeFmt = ''
|
||
}
|
||
|
||
return timeFmt
|
||
}
|
||
},
|
||
// 表情转换
|
||
replaceEmoji() {
|
||
return (str) => str.replace(/\[em-([a-z_]+)\]/g, `<span class="em em-$1"></span>`)
|
||
},
|
||
// 获取图片域名
|
||
$getImageUri() {
|
||
return (url) => this.$store.state.app.config.base_domain + url
|
||
}
|
||
},
|
||
watch: {
|
||
kefu(val) {
|
||
if (val.id) {
|
||
this.setTitle(val.nickname)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 初始化
|
||
init() {
|
||
this.shopId = this.$Route.query.shop_id || 0
|
||
this.goodsId = this.$Route.query.goods_id
|
||
this.socket = new Socket(this.appConfig.ws_domain, {
|
||
token: this.$store.getters.token,
|
||
type: 'user',
|
||
client,
|
||
shop_id: this.shopId,
|
||
})
|
||
this.socket.addEvent('connect', () => {
|
||
this.setTitle('连接中...')
|
||
})
|
||
this.socket.addEvent('open', () => {
|
||
this.setTitle(this.kefu.nickname)
|
||
this.isError = false
|
||
})
|
||
this.socket.addEvent('message', (data) => {
|
||
|
||
switch (data.event) {
|
||
case 'login':
|
||
this.loginEvent(data.data)
|
||
break;
|
||
case 'chat':
|
||
this.chatEvent(data.data)
|
||
break;
|
||
case 'transfer':
|
||
this.transferEvent(data.data)
|
||
break;
|
||
case 'error':
|
||
this.errorEvent(data.data)
|
||
break;
|
||
|
||
}
|
||
})
|
||
this.socket.addEvent('error', (data) => {
|
||
this.setTitle('连接失败')
|
||
})
|
||
},
|
||
|
||
showTips(msg) {
|
||
if (!msg) {
|
||
setTimeout(() => {
|
||
this.$Router.replace({
|
||
path: `/bundle/pages/contact_offical/contact_offical?id=${this.shopId}`
|
||
});
|
||
}, 200)
|
||
return
|
||
}
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: msg,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.$Router.replace({
|
||
path: `/bundle/pages/contact_offical/contact_offical?id=${this.shopId}`
|
||
});
|
||
} else if (res.cancel) {
|
||
this.$Router.back()
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getConfig() {
|
||
return getChatConfig({
|
||
shop_id: this.shopId
|
||
}).then(res => {
|
||
return Promise.resolve(res)
|
||
}).catch(() => {
|
||
return Promise.reject()
|
||
})
|
||
},
|
||
// 获取数据
|
||
async getData() {
|
||
try {
|
||
const res = await this.getConfig()
|
||
if (res.code == 0) return this.showTips(res.msg)
|
||
await this.getChatRecord()
|
||
this.getGoods()
|
||
this.scrollToBottom()
|
||
if (!this.kefu.id) {
|
||
this.setTitle('客服不在线')
|
||
return
|
||
}
|
||
this.socket.connect()
|
||
} catch (e) {
|
||
|
||
}
|
||
|
||
|
||
},
|
||
getGoods() {
|
||
if (!this.goodsId) return
|
||
getGoodsDetail({
|
||
goods_id: this.goodsId
|
||
}).then(res => {
|
||
if (res.code == 1) {
|
||
this.goodsInfo = res.data
|
||
if (this.kefu.id) {
|
||
this.showGoods = true
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 图片预览
|
||
previewImage(url) {
|
||
uni.previewImage({
|
||
urls: [url]
|
||
});
|
||
},
|
||
|
||
// 上传图片
|
||
async uploadFile() {
|
||
const [error, success] = await uni.chooseImage({
|
||
count: 1
|
||
})
|
||
if (error) {
|
||
return
|
||
}
|
||
uni.showLoading({
|
||
title: '上传中...'
|
||
})
|
||
try {
|
||
const file = await uploadFile(success.tempFilePaths[0])
|
||
this.send(file.base_uri, 2)
|
||
uni.hideLoading()
|
||
} catch (e) {
|
||
this.$toast({
|
||
title: '上传失败，请稍后再试'
|
||
})
|
||
uni.hideLoading()
|
||
}
|
||
|
||
},
|
||
// 发送文本
|
||
sendText() {
|
||
if (!this.msg) return
|
||
this.send(this.msg, 1)
|
||
this.msg = ''
|
||
},
|
||
// 发送商品
|
||
sendGoods() {
|
||
this.showGoods = false
|
||
this.send(this.goodsId, 3)
|
||
},
|
||
|
||
// 获取聊天记录
|
||
async getChatRecord() {
|
||
const {
|
||
page,
|
||
pageStatus
|
||
} = this
|
||
if (pageStatus == 'finish') return
|
||
const res = await chatRecord({
|
||
shop_id: this.shopId,
|
||
page_no: page
|
||
})
|
||
if (res.code == 1) {
|
||
let toid = 0
|
||
this.page++
|
||
const {
|
||
kefu,
|
||
record
|
||
} = res.data
|
||
this.kefu = kefu
|
||
this.showIndex = record.list.length
|
||
if (this.recoreds.length) {
|
||
toid = this.recoreds[0].id
|
||
this.recoreds[0].show_time = true
|
||
}
|
||
|
||
this.recoreds.unshift(...record.list)
|
||
this.$nextTick(() => {
|
||
if (!record.more) {
|
||
this.pageStatus = 'finish'
|
||
}
|
||
this.scrollToItem(toid)
|
||
this.showIndex = -1
|
||
})
|
||
}
|
||
},
|
||
// 发送消息
|
||
send(msg, type) {
|
||
this.socket.send({
|
||
event: 'chat',
|
||
data: {
|
||
msg,
|
||
msg_type: type, // 暂定 1=>文本；2=>图片；3=>表情
|
||
to_id: this.kefu.id, // 接收人id；客服发给用户则为user_id, 用户发给客服则为kefu_id
|
||
to_type: "kefu"
|
||
}
|
||
})
|
||
},
|
||
// 显示、隐藏表情库
|
||
handleEmojiShow() {
|
||
this.showEmoji = !this.showEmoji
|
||
if (!this.showEmoji) return
|
||
setTimeout(() => {
|
||
this.scrollToBottom()
|
||
}, 300)
|
||
},
|
||
scrollToupper() {
|
||
this.getChatRecord()
|
||
},
|
||
scrollToBottom() {
|
||
this.intoView = 'bottom'
|
||
this.$nextTick(() => {
|
||
this.intoView = ''
|
||
})
|
||
},
|
||
scrollToItem(id) {
|
||
this.intoView = `chat-item_${id}`
|
||
this.$nextTick(() => {
|
||
this.intoView = ''
|
||
})
|
||
},
|
||
|
||
handleEmojiInput(val) {
|
||
this.msg = this.msg + val
|
||
},
|
||
chatEvent(data) {
|
||
this.isError = false
|
||
if (data.from_type == 'kefu') {
|
||
uni.vibrateLong({
|
||
success: function() {
|
||
console.log('success');
|
||
}
|
||
});
|
||
}
|
||
if (data.shop_id != this.shopId) {
|
||
return
|
||
}
|
||
this.recoreds.push(data)
|
||
this.$nextTick(() => {
|
||
getRect('#bottom').then(res => {
|
||
if (res.bottom < 1000) {
|
||
this.scrollToItem(data.id)
|
||
}
|
||
})
|
||
})
|
||
|
||
},
|
||
errorEvent(data) {
|
||
this.errorMsg = data.msg
|
||
this.isError = true
|
||
this.$nextTick(() => {
|
||
this.scrollToBottom()
|
||
})
|
||
},
|
||
loginEvent(data) {
|
||
// 登录成功，发送用户上线通知
|
||
this.socket.send({
|
||
event: 'user_online',
|
||
data: {
|
||
kefu_id: this.kefu.id
|
||
}
|
||
})
|
||
},
|
||
transferEvent(data) {
|
||
this.kefu = data
|
||
},
|
||
setTitle(title) {
|
||
uni.setNavigationBarTitle({
|
||
title
|
||
})
|
||
}
|
||
|
||
},
|
||
async onLoad() {
|
||
this.scrollToupper = debounce(this.scrollToupper, 500, this)
|
||
this.init()
|
||
this.getData()
|
||
},
|
||
onUnload() {
|
||
this.socket.close()
|
||
},
|
||
onReady() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
pading: 0;
|
||
height: 100%;
|
||
}
|
||
|
||
.chat {
|
||
height: 100%;
|
||
|
||
.goods {
|
||
display: flex;
|
||
position: fixed;
|
||
width: 600rpx;
|
||
right: 20rpx;
|
||
bottom: calc(120rpx + env(safe-area-inset-bottom));
|
||
border-radius: 14rpx;
|
||
background: #fff;
|
||
padding: 20rpx;
|
||
|
||
.close {
|
||
position: absolute;
|
||
left: -20rpx;
|
||
top: -20rpx;
|
||
}
|
||
|
||
.send-btn {
|
||
padding: 8rpx 22rpx;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
transition: all .3s;
|
||
flex: 1;
|
||
min-height: 0;
|
||
|
||
.loading {
|
||
padding: 20rpx;
|
||
height: 40px;
|
||
}
|
||
|
||
.chat-lists {
|
||
padding: 0 20rpx 30rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
|
||
.chat-tips {
|
||
padding: 4rpx 20rpx;
|
||
border-radius: 21rpx;
|
||
display: inline-block;
|
||
text-align: center;
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.chat-item {
|
||
padding-top: 30rpx;
|
||
|
||
&.visibility {
|
||
visibility: hidden;
|
||
}
|
||
|
||
.chat-info {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
&.right {
|
||
.chat-info {
|
||
flex-direction: row-reverse;
|
||
|
||
.text-box {
|
||
background-color: #ED5349;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.avatar {
|
||
width: 78rpx;
|
||
height: 78rpx;
|
||
border-radius: 14rpx;
|
||
flex: none;
|
||
}
|
||
|
||
.text-box {
|
||
max-width: 500rpx;
|
||
min-width: 80rpx;
|
||
background-color: #fff;
|
||
border-radius: 14rpx;
|
||
padding: 16rpx 20rpx;
|
||
margin: 0 20rpx;
|
||
word-break: break-word;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.image-box {
|
||
max-width: 300rpx;
|
||
margin: 0 20rpx;
|
||
|
||
.image {
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
.goods-box {
|
||
position: static;
|
||
width: 510rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.error {
|
||
padding: 0 30rpx 30rpx;
|
||
|
||
.error-msg {
|
||
color: #bbb;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
background: #f2f2f2;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.footer-input {
|
||
height: 100rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
}
|
||
|
||
.input-contain {
|
||
margin: 0 20rpx;
|
||
background-color: #fff;
|
||
height: 68rpx;
|
||
border-radius: 60rpx;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
padding: 0 10rpx 0 30rpx;
|
||
|
||
.text-area {
|
||
flex: 1;
|
||
height: 100rpx;
|
||
word-break: break-all;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.emoji-wrap {
|
||
height: 0;
|
||
transition: all .3s;
|
||
|
||
&.emoji-show {
|
||
height: 200px;
|
||
}
|
||
}
|
||
|
||
.send-btn {
|
||
padding: 0 25rpx;
|
||
color: #fff;
|
||
background-color: #ED5349;
|
||
border-radius: 60rpx;
|
||
}
|
||
}
|
||
</style>
|