'首页新增聊天记录'
This commit is contained in:
@@ -234,7 +234,8 @@ import {
|
||||
getUrlByMediaID,
|
||||
setImMsgRead,
|
||||
sendToVendorV2,
|
||||
setPoiIMStatus} from '@/apis/store'
|
||||
setPoiIMStatus
|
||||
} from '@/apis/store'
|
||||
import { hideLoad } from '@/tools/loading'
|
||||
import {Decrypt,Encrypt,timeFormatDHM} from '@/tools/ase'
|
||||
import {debounce,throttle} from '@/utils/underscore'
|
||||
|
||||
951
src/pages/indexpage/cmp/chatDeatil/chatDetail.vue
Normal file
951
src/pages/indexpage/cmp/chatDeatil/chatDetail.vue
Normal file
@@ -0,0 +1,951 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-container class="chatContainer">
|
||||
<!-- {{ allUserList }} -->
|
||||
<!-- <el-aside width="600px" class="userList">
|
||||
<div v-for="(item,index) in allUserList" :key="index" class="chatItem" @click="queryDetailBut(item)"
|
||||
:style="{
|
||||
'background':item.userID === '' + currentUser.userID ? '#fff' : ''
|
||||
}">
|
||||
<el-badge :value="item.NewMessageNum" class="badge" :hidden="!item.NewMessageNum" >
|
||||
<div class="badge-box">
|
||||
<img
|
||||
:src="item.vendorID === 1 ? 'https://image.jxc4.com/image/75654ab606494a0efdb0cf7d7ad060d9.png':'https://image.jxc4.com/image/6c2f1dfd95890df8ef5e27bde15c4e7f.png'"
|
||||
alt=""
|
||||
class="badge-img" >
|
||||
</div>
|
||||
</el-badge>
|
||||
|
||||
<div class="userInfo">
|
||||
<div class="userName">
|
||||
<div v-if="item.vendorID === 1">{{item.userID !== '0' ? `【美团${item.orderDesc}】${item.userID}`:'【美团】群发消息' }}</div>
|
||||
<div v-else>{{ `【淘宝闪购】${item.userID}` }}</div>
|
||||
<div>{{ item.latestTime }}</div>
|
||||
</div>
|
||||
<div class="textMessage">{{item.latestMsg}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-aside> -->
|
||||
<el-row class="tac" style="width: 500px;">
|
||||
<el-col :span="12">
|
||||
|
||||
|
||||
<el-menu
|
||||
style="width: 500px;"
|
||||
:default-active="'1'"
|
||||
class="el-menu-vertical-demo">
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<img :src="'https://image.jxc4.com/image/75654ab606494a0efdb0cf7d7ad060d9.png'" style="width: 50px;height: 50px;"></img>
|
||||
<span style="font-size: 32px;font-weight: bold;">【美团】</span>
|
||||
</template>
|
||||
<el-menu-item-group
|
||||
v-for="(item,index) in allUserList['mt']"
|
||||
:key="index"
|
||||
:style="{
|
||||
'backgroundColor':item.userID === '' + currentUser.userID ? 'rgb(244 244 244)' : '',
|
||||
'padding-bottom':'20px',
|
||||
'border-bottom':'1px solid #eee'
|
||||
}">
|
||||
<div style="display: flex;justify-content: center;" @click="queryDetailBut(item)">
|
||||
<div style="" class="avatar">
|
||||
<!-- 头像 -->
|
||||
<img :src="'https://image.jxc4.com/image/7ab2012bd577035f641d9176cf3372ae.png'">
|
||||
</div>
|
||||
<div>
|
||||
<div class="titleText">
|
||||
{{ item.userID + `【${item.storeInfo ? item.storeInfo.name + '(' + item.storeInfo.id +')' : '' }】` }}
|
||||
</div>
|
||||
<div class="latestMsg">{{ item.latestMsg }}</div>
|
||||
</div>
|
||||
<div>{{ item.latestTime }}</div>
|
||||
</div>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="2" >
|
||||
<template slot="title">
|
||||
<img :src="'https://image.jxc4.com/image/6c2f1dfd95890df8ef5e27bde15c4e7f.png'" style="width: 50px;height: 50px;">
|
||||
<span style="font-size: 32px;font-weight: bold;">【淘宝闪购】</span>
|
||||
</template>
|
||||
<el-menu-item-group
|
||||
v-for="(item,index) in allUserList['elm']"
|
||||
:key="index"
|
||||
:style="{
|
||||
'backgroundColor':item.userID === '' + currentUser.userID ? 'rgb(244 244 244)' : '',
|
||||
'padding-bottom':'20px',
|
||||
'border-bottom':'1px solid #eee'
|
||||
}">
|
||||
<div style="display: flex;justify-content: center;" @click="queryDetailBut(item)">
|
||||
<div style="" class="avatar">
|
||||
<!-- 头像 -->
|
||||
<img :src="'https://image.jxc4.com/image/7ab2012bd577035f641d9176cf3372ae.png'">
|
||||
</div>
|
||||
<div>
|
||||
<div class="titleText">
|
||||
{{ item.userID + `【${item.storeInfo ? item.storeInfo.name + '(' + item.storeInfo.id +')' : '' }】` }}
|
||||
</div>
|
||||
<div class="latestMsg">{{ item.latestMsg }}</div>
|
||||
</div>
|
||||
<div>{{ item.latestTime }}</div>
|
||||
</div>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
<el-submenu index="3">
|
||||
<template slot="title">
|
||||
<img :src="'https://image.jxc4.com/image/884664b80ffd2eda64a4aab9f4dc402e.png'"style="width: 50px;height: 50px;">
|
||||
<span style="font-size: 32px;font-weight: bold;">【京东】</span>
|
||||
</template>
|
||||
<el-menu-item-group
|
||||
v-for="(item,index) in allUserList['jd']"
|
||||
:key="index"
|
||||
:style="{
|
||||
'backgroundColor':item.userID === '' + currentUser.userID ? 'rgb(244 244 244)' : '',
|
||||
'padding-bottom':'20px',
|
||||
'border-bottom':'1px solid #eee'
|
||||
}">
|
||||
<div style="display: flex;justify-content: center;" @click="queryDetailBut(item)">
|
||||
<div style="" class="avatar">
|
||||
<img :src="'https://image.jxc4.com/image/7ab2012bd577035f641d9176cf3372ae.png'">
|
||||
</div>
|
||||
<div>
|
||||
<div class="titleText">
|
||||
{{ item.userID + `【${item.storeInfo ? item.storeInfo.name + '(' + item.storeInfo.id +')' : '' }】` }}
|
||||
</div>
|
||||
<div class="latestMsg">{{ item.latestMsg }}</div>
|
||||
</div>
|
||||
<div>{{ item.latestTime }}</div>
|
||||
</div>
|
||||
</el-menu-item-group>
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div class="chatBox">
|
||||
<div class="chatBoxTitle" v-if="currentUser">{{ currentUser.storeInfo ? currentUser.userID + '【' + currentUser.storeInfo.name + '('+ currentUser.storeInfo.id +')' + '】' : '' }}</div>
|
||||
<div class="chatBoxCenter">
|
||||
<!-- 头像 -->
|
||||
<div v-for="(item,index) in chatDetail" :key="index"
|
||||
class="chatDetail-item"
|
||||
:style="{
|
||||
'flex-direction':item.msg_source == 1?'row-reverse':'',
|
||||
'text-align':item.msg_source == 1?'right':'',
|
||||
'margin':'20px',
|
||||
'padding':'20px',
|
||||
}">
|
||||
<div>
|
||||
<img :src="avatar(item)" mode="aspectFill" alt="" class="chatDetail-avatar" />
|
||||
</div>
|
||||
|
||||
<div :style="{
|
||||
'margin-left': item.msg_source === 1?'':'20px',
|
||||
'margin-right':item.msg_source === 1?'20px':''
|
||||
}">
|
||||
<div style="margin-bottom: 10px;"
|
||||
:style="{
|
||||
'text-align':item.msg_source === 1 ? 'right' : 'left'
|
||||
}"
|
||||
@click="jumpOrderDetail(item.order_id)"
|
||||
>
|
||||
{{ item.msg_source == 2 ? item.order_id?item.sendType.toUpperCase() + '客户(' + item.order_id +')': item.sendType.toUpperCase() + '客户':
|
||||
currentUser.storeInfo.name
|
||||
}}
|
||||
</div>
|
||||
|
||||
|
||||
<div :style="{
|
||||
'display':'flex',
|
||||
'justify-content':item.msg_source === 1?'flex-end':'flex-start'
|
||||
}">
|
||||
<!-- 聊天内容 -->
|
||||
<el-card
|
||||
:body-style="{
|
||||
padding:item.msg_type == 2 || item.msg_type == 12 ? '0': '20px'
|
||||
}"
|
||||
:style="{
|
||||
'max-width':'500px',
|
||||
'width':'fit-content',
|
||||
'display':item.msg_type == 5 && item.msg_content?'':'flex',
|
||||
'width':item.msg_type == 5 && item.msg_content?'400px':'',
|
||||
'text-align':item.msg_type == 5 && item.msg_content ? 'left' : 'center'
|
||||
}">
|
||||
|
||||
<!-- 文字 -->
|
||||
<div v-if="item.msg_type == 1 || item.msg_type == 11"
|
||||
:style="{
|
||||
'text-align':'left',
|
||||
'letter-spacing': '4px'
|
||||
}">
|
||||
{{ item.msg_content }}
|
||||
</div>
|
||||
|
||||
<!-- 图片 -->
|
||||
<el-popover
|
||||
placement="right"
|
||||
width="300"
|
||||
trigger="hover"
|
||||
v-else-if="item.msg_type == 2 || item.msg_type == 12">
|
||||
<div>
|
||||
<img :src="item.msg_content" alt="缩略图..." width="100%" />
|
||||
</div>
|
||||
<img slot="reference" :src="item.msg_content" alt="略缩图" style="width:100px;height:240px" />
|
||||
</el-popover>
|
||||
|
||||
<!-- 视频 -->
|
||||
<div v-else-if="item.msg_type == 6">
|
||||
<video width="640" height="360" controls>
|
||||
<source :src="item.msg_content" type="video/mp4">
|
||||
您的浏览器不支持视频标签。
|
||||
</video>
|
||||
</div>
|
||||
|
||||
<!-- 语音 -->
|
||||
<div v-else-if="item.msg_type == 3 || item.msg_type == 13" class="voice" >
|
||||
<audio id="myAudio" controls>
|
||||
<source :src="item.msg_content" type="audio/mpeg">
|
||||
</audio>
|
||||
</div>
|
||||
|
||||
<!-- 商品卡片 -->
|
||||
<div v-else-if="item.msg_type == 4 || item.msg_type == 14">
|
||||
skuid:{{ item.msg_content }}
|
||||
<div v-if="item.goodCard" style="margin-top: 10px;">
|
||||
<img :src="item.goodCard.img" alt="缩略图..." width="100%" />
|
||||
<span>{{ item.goodCard.name }}</span>
|
||||
</div>
|
||||
<span class="good_card" @click.stop="viewGood(item,index)">查看商品</span>
|
||||
</div>
|
||||
|
||||
<!-- 订单卡片 -->
|
||||
<template v-else-if="item.msg_type == 5 && item.msg_content">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>订单卡片</span>
|
||||
<router-link :to="'/ordermanager/' + JSON.parse(item.msg_content).order_view_id" target="_blank">
|
||||
<el-button style="float: right; padding: 3px 0" type="text" >查看详情</el-button>
|
||||
</router-link>
|
||||
</div>
|
||||
<div style="letter-spacing: 4px">
|
||||
<div> {{ JSON.parse(item.msg_content).food_desc }}</div>
|
||||
<div class="order-card">{{ JSON.parse(item.msg_content).status_desc + '...'}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 兜底 -->
|
||||
<view class="chat-text-container" v-else> 【未知信息】 </view>
|
||||
</el-card>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="chatBoxBottom">
|
||||
<!-- <div>表情符号</div> -->
|
||||
<el-input placeholder="请输入内容......" v-model="sendText" class="input-with-select" type="textarea" style="height: 100px;">
|
||||
</el-input>
|
||||
<!-- -->
|
||||
<div style="text-align: right;" >
|
||||
<el-button slot="append" type="primary" @click="sendMsg" >发送</el-button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getMyStoreInfo,
|
||||
getChatUserList,
|
||||
getChatDetail,
|
||||
setImMsgRead,
|
||||
sendToVendorV2
|
||||
} from '@/apis/store.js'
|
||||
import {Decrypt,Encrypt,timeFormatDHM} from '@/tools/ase'
|
||||
import {debounce,throttle} from '@/utils/underscore'
|
||||
import {APIGetStoresSkus} from '@/apis/APIstoreSku.js'
|
||||
import { hideLoad } from '@/tools/loading'
|
||||
export default {
|
||||
props:{
|
||||
isGetDetail:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
paramsData:[], // 参数列表
|
||||
allUserList:{
|
||||
mt:[],
|
||||
elm:[],
|
||||
jd:[]
|
||||
}, // 用户列表
|
||||
personalStore:[],
|
||||
// personalStore:[
|
||||
// {
|
||||
// id: 300252,
|
||||
// elmStoreID: "32267096348",
|
||||
// jdStoreID: "12534485",
|
||||
// mtStoreID: "12047122"
|
||||
// }
|
||||
// ],
|
||||
|
||||
userTimer:null,
|
||||
platArr:[], // 平台信息
|
||||
// isIncloud589:false,
|
||||
// isIncloud5873:false,
|
||||
sendText:'', // 发送消息的文本内容
|
||||
currentUser:'', // 当前用户
|
||||
chatDetail:[], // 当前用户的聊天记录
|
||||
isloading:false // 获取详情页是否加载
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
...mapGetters({
|
||||
// cms: 'cms',
|
||||
// vendorOrgCode: 'vendorOrgCode',
|
||||
AllplateArr: 'AllplateArr',
|
||||
}),
|
||||
},
|
||||
created(){
|
||||
this.getChatUsersList()
|
||||
// this.platInfo()
|
||||
},
|
||||
watch:{
|
||||
isGetDetail:{
|
||||
handler(val){
|
||||
if(val) this.queryDetailFirst()
|
||||
}
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
async getChatUsersList(){
|
||||
if(this.paramsData.length === 0){
|
||||
let res = await this.getPersonalUserList()
|
||||
if(res.length === 0) return
|
||||
else {
|
||||
this.paramsData = res
|
||||
this.getChatUsersList()
|
||||
}
|
||||
}else{
|
||||
this.getUser()
|
||||
this.userTimer = setInterval(() => {
|
||||
// if(this.userTimer) clearInterval(userTimer)
|
||||
this.getUser(true) // 循环第二遍不加载
|
||||
},10000)
|
||||
}
|
||||
},
|
||||
async getPersonalUserList(){
|
||||
let res = await getMyStoreInfo('1.3.5',true)
|
||||
this.personalStore = []
|
||||
let arr = []
|
||||
res.forEach(item => {
|
||||
let brr = item.vendorStoreList || []
|
||||
// this.personalStore.push({...item})
|
||||
this.personalStore.push({
|
||||
address: "四川省成都市新都区三河场江陵路市场内16-19号摊位（老向蔬菜店）",
|
||||
cityName: "成都市",
|
||||
id: 100296,
|
||||
name: "谢卫路店",
|
||||
payeeName: "向文祥",
|
||||
status: 1,
|
||||
tel1: "13658078848",
|
||||
tel2: "13658078848",
|
||||
elmStoreID:"",
|
||||
jdStoreID:"",
|
||||
mtStoreID:"7026352"
|
||||
})
|
||||
// console.log('item',item,'brr',brr)
|
||||
if(brr.length>0){
|
||||
brr.map(i => {
|
||||
if(i.vendor_id === 1 || i.vendor_id === 0 || i.vendor_id === 3){
|
||||
arr.push({
|
||||
vendorStoreID:i.vendor_store_id,
|
||||
appID:i.vendor_org_code,
|
||||
vendorID:i.vendor_id + ''
|
||||
})
|
||||
// console.log('i,99999999****',i)
|
||||
if(i.vendor_id === 1) this.personalStore[this.personalStore.length-1].mtStoreID = i.vendor_store_id
|
||||
if(i.vendor_id === 3) this.personalStore[this.personalStore.length-1].elmStoreID = i.vendor_store_id
|
||||
if(i.vendor_id === 0) this.personalStore[this.personalStore.length-1].jdStoreID = i.vendor_store_id
|
||||
// this.personalStore = [
|
||||
// {
|
||||
// id: 300252,
|
||||
// elmStoreID: "32267096348",
|
||||
// jdStoreID: "12534485",
|
||||
// mtStoreID: "12047122"
|
||||
// }
|
||||
// ]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// console.log(arr,'this.personalStore',this.personalStore)
|
||||
// return arr
|
||||
// return [{"vendorStoreID":"7290541","vendorID":"1","appID":"589"},{"vendorStoreID":"2233065983","vendorID":"3","appID":"34665"},{"vendorStoreID":"11998833","vendorID":"0","appID":"320406"}]
|
||||
return [{"vendorStoreID":"7026352","vendorID":"1","appID":"589"}]
|
||||
},
|
||||
async getUser(flag){
|
||||
let res = await getChatUserList(this.paramsData,true)
|
||||
if(JSON.stringify(res) === '{}') return
|
||||
let keys = Object.keys(res)
|
||||
this.platArr = keys
|
||||
// this.platInfo(this.platArr)
|
||||
keys.forEach(i => {
|
||||
|
||||
let userArr = i.split(':')
|
||||
// this.allUserList[userArr[0]] = {}
|
||||
this.allUserList['mt'] = []
|
||||
this.allUserList['elm'] = []
|
||||
this.allUserList['jd'] = []
|
||||
if(userArr[2] === '1'){
|
||||
// 美团
|
||||
// this.allUserList['mt'] = []
|
||||
// this.allUserList['mt'] =
|
||||
// this.allUserList[userArr[0]][userArr[1]] = []
|
||||
// console.log('paramsData,Object.keys',i.split(':'),'聊天记录',res[i])
|
||||
console.log('111111111111',this.personalStore)
|
||||
res[i].reverse().forEach(element => {
|
||||
let resData = JSON.parse(element)
|
||||
let findIndex = this.allUserList['mt'].findIndex(item => item.userID === resData.userID)
|
||||
if(findIndex === -1){
|
||||
let latestMsgHandler = this.decryptMessageText(resData,userArr[0])
|
||||
let find = this.personalStore.find(i => i.mtStoreID === userArr[1])
|
||||
this.allUserList['mt'].push({
|
||||
...resData,
|
||||
latestMsg: latestMsgHandler,
|
||||
latestTime: timeFormatDHM(+new Date(resData.latestTime * 1000)),
|
||||
originTime:resData.latestTime,
|
||||
orderInfo: {},
|
||||
orderDesc: '',
|
||||
platformID:userArr[0],
|
||||
vendorStoreID:userArr[1],
|
||||
storeInfo:find || ""
|
||||
})
|
||||
// this.currentUser = this.allUserList['mt'][0]
|
||||
// console.log('当前用户信息',this.currentUser)
|
||||
// this.queryDetailBut(this.currentUser)
|
||||
}
|
||||
})
|
||||
}else if(userArr[2] === '3'){
|
||||
// 淘宝闪购
|
||||
this.allUserList['elm'] = []
|
||||
res[i].reverse().forEach.forEach(element => {
|
||||
let resData = JSON.parse(element)
|
||||
let findIndex = this.allUserList['elm'].findIndex(item => item.payLoad.groupId === resData.payLoad.groupId)
|
||||
if(findIndex === -1){
|
||||
let latestMsgHandler = resData.latestMsg
|
||||
let find = this.personalStore.find(i => i.mtStoreID === userArr[1])
|
||||
this.allUserList['elm'].push({
|
||||
...resData,
|
||||
latestMsg: latestMsgHandler,
|
||||
latestTime: timeFormatDHM(+new Date(resData.latestTime )),
|
||||
orderInfo: {},
|
||||
orderDesc: '',
|
||||
platformID:userArr[0],
|
||||
vendorStoreID:userArr[1],
|
||||
storeInfo:find || ""
|
||||
})
|
||||
}
|
||||
})
|
||||
}else if(userArr[2] === '0'){
|
||||
// 京东
|
||||
this.allUserList['JD'][userArr[1]] = []
|
||||
res[i].reverse().forEach.forEach(element => {
|
||||
let resData = JSON.parse(element)
|
||||
let findIndex = this.allUserList[userArr[0]][userArr[1]].findIndex(item => item.payLoad.groupId === resData.payLoad.groupId)
|
||||
if(findIndex === -1){
|
||||
let latestMsgHandler = resData.latestMsg
|
||||
|
||||
this.allUserList[userArr[0]][userArr[1]].push({
|
||||
...resData,
|
||||
latestMsg: latestMsgHandler,
|
||||
latestTime: timeFormatDHM(+new Date(resData.latestTime )),
|
||||
orderInfo: {},
|
||||
orderDesc: '',
|
||||
platformID:userArr[0],
|
||||
vendorStoreID:userArr[1],
|
||||
storeInfo:find || ""
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
if(this.isGetDetail) this.queryDetailFirst(flag)
|
||||
// console.log('allUserList,,,allUserList',this.allUserList)
|
||||
},
|
||||
queryDetailFirst(flag){
|
||||
if(!this.currentUser){
|
||||
// 初始值
|
||||
if(this.allUserList['mt'].length>0) this.currentUser = this.allUserList['mt'][0]
|
||||
else if(this.allUserList['elm'].length>0) this.currentUser = this.allUserList['elm'][0]
|
||||
else if(this.allUserList['jd'].length>0) this.currentUser = this.allUserList['jd'][0]
|
||||
}
|
||||
|
||||
// this.isloading = true
|
||||
//
|
||||
// console.log('this.currentUser,聊天记录清空没',this.chatDetail)
|
||||
// debugger
|
||||
this.queryDetailBut(this.currentUser,flag)
|
||||
},
|
||||
// 解密 美团消息
|
||||
decryptMessageText(resData,platformID){
|
||||
let afterText = Decrypt(resData.latestMsg, platformID) // 解密之后的文本
|
||||
if (afterText.indexOf('[自动回复]') == -1) {
|
||||
let latestMsgHandler = ''
|
||||
try {
|
||||
JSON.parse(afterText)
|
||||
latestMsgHandler = typeof JSON.parse(afterText) === 'number' ? afterText : '【订单】'
|
||||
} catch (error) {
|
||||
if (afterText == '') {
|
||||
latestMsgHandler = '【商品】'
|
||||
} else {
|
||||
if (!(afterText.includes('https') || afterText.includes('http'))) latestMsgHandler = afterText
|
||||
else latestMsgHandler = afterText.indexOf('.amr') == -1 ? '【图片】' : '【语音】'
|
||||
}
|
||||
}
|
||||
return latestMsgHandler
|
||||
}else{
|
||||
return afterText
|
||||
}
|
||||
},
|
||||
// platInfo(){
|
||||
// // let keys = Object.keys(arr)
|
||||
// // console.log('keys',keys)
|
||||
// let platInfo = this.AllplateArr.find(item => item.key === '5873')
|
||||
// console.log(this.AllplateArr,'platInfo',platInfo)
|
||||
// // console.log('platArr',platArr,'this.AllplateArr',this.AllplateArr)
|
||||
// }
|
||||
// 查询聊天记录
|
||||
// 查询聊天详情按钮 点击用户列表
|
||||
queryDetailBut:debounce(
|
||||
function name(query,falg) {
|
||||
if(query.userID !== this.currentUser.userID) this.chatDetail = [] // 清空聊天记录
|
||||
if(this.detailTimer) clearInterval(this.detailTimer)
|
||||
console.log('query',query)
|
||||
this.currentUser = query
|
||||
// if(query.isNewCreate) {
|
||||
// this.chatDetail = []
|
||||
// this.currentUser = query
|
||||
// return
|
||||
// }
|
||||
this.queryDetailThrottle(query,falg)
|
||||
// this.detailTimer =setInterval(() => {
|
||||
// this.queryDetailThrottle(query,true)
|
||||
// },4000)
|
||||
}
|
||||
,1000,
|
||||
true
|
||||
),
|
||||
queryDetailThrottle:throttle(
|
||||
function name(query,isloading) {
|
||||
this.queryDetail(query,isloading)
|
||||
}
|
||||
),
|
||||
// 查询聊天详情
|
||||
async queryDetail(item,isloading = false){
|
||||
|
||||
// if(!(this.currentUser.userID === item.userID)){
|
||||
// console.log('你进来了吗')
|
||||
// this.chatDetail = []
|
||||
// this.currentUser = item
|
||||
// }else{
|
||||
// console.log('走的else')
|
||||
// }
|
||||
|
||||
|
||||
let payLoad = [{
|
||||
vendorStoreID:item.vendorStoreID,
|
||||
vendorID:'' + item.vendorID,
|
||||
appID:item.platformID,
|
||||
userID:item.userID
|
||||
}]
|
||||
// return
|
||||
let str = `${payLoad[0].appID}:${payLoad[0].vendorStoreID}:${payLoad[0].vendorID}:${payLoad[0].userID}`
|
||||
|
||||
let res = await getChatDetail(payLoad,isloading)
|
||||
// let res = msgInfo.chatDetail.data // 模拟聊天详情
|
||||
// console.log('查询聊天详情',res)
|
||||
// return
|
||||
// 美团
|
||||
if(item.vendorID === 1){
|
||||
|
||||
res[str].forEach(element => {
|
||||
let resData = this.jxParse(element)
|
||||
let findIndex = this.chatDetail.findIndex(item => item.msg_id === resData.msgContent.msg_id)
|
||||
if(findIndex === -1){
|
||||
// let msg_content = resData.msgContent.msg_type == 1 ? analyEmoji(Decrypt(resData.msgContent.msg_content, platformID.value)) : Decrypt(resData.msgContent.msg_content, platformID.value) // 解析emoji表情
|
||||
let msg_content = Decrypt(resData.msgContent.msg_content, payLoad[0].appID) // 解密
|
||||
if (resData.msgContent.msg_type === 4 || resData.msgContent.msg_type === 14) msg_content = resData.msgContent.app_spu_codes // 商品skuid
|
||||
this.chatDetail.push({
|
||||
sendType: resData.sendType,
|
||||
...resData.msgContent,
|
||||
msg_content,
|
||||
goodCard:''
|
||||
})
|
||||
if(resData.msgContent.msg_type === 4 || resData.msgContent.msg_type === 14) this.viewGood({app_spu_codes:msg_content},this.chatDetail.length)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
res[str].map(async (element,index) => {
|
||||
let resData = JSON.parse(element)
|
||||
if (resData.msgContent) {
|
||||
// if (resData.msgContent.payload) resData.msgContent.payLoad = resData.msgContent.payload
|
||||
let findIndex = this.chatDetail.findIndex(item => item.payLoad.msgId === resData.msgContent.payLoad.msgId) // 消息id，唯一性
|
||||
if(findIndex === -1){
|
||||
if (resData.msgContent.payload) resData.msgContent.payLoad = resData.msgContent.payload
|
||||
let msg = JSON.parse(resData.msgContent.payLoad.content)
|
||||
if (msg.text) {
|
||||
msg.text = msg.text.replace(/^["']|["']$/g, '') //正则 去掉字符串中的首尾双引号
|
||||
resData.msgContent.payLoad.contentType = 1
|
||||
}
|
||||
let messageText = ''
|
||||
if (resData.msgContent.payLoad.contentType == 1) {
|
||||
messageText = msg.text
|
||||
} else if (resData.msgContent.payLoad.contentType == 2 || resData.msgContent.payLoad.contentType == 3 || resData.msgContent.payLoad.contentType == 4) {
|
||||
// contentType为2图片、3语音、4视频时
|
||||
analyUrl({
|
||||
mediaID: msg.mediaId,
|
||||
platformShopID: '' + this.chatObj['eb'][0].vendorOrgCode
|
||||
}, index)
|
||||
messageText = msg.mediaId
|
||||
} else {
|
||||
if(resData.msgContent.payLoad.contentType == 101 && msg.type == 7){
|
||||
// 101、自定义消息-商品卡片
|
||||
analyUrl({
|
||||
mediaID: msg.data.item.id,
|
||||
platformShopID: '' + this.chatObj['eb'][0].vendorOrgCode
|
||||
}, index)
|
||||
}else if(msg.elements && msg.elements.length){
|
||||
let findItem = msg.elements.filter(item => item.elementType === 1)
|
||||
messageText = findItem && findItem.length > 0 ? JSON.parse(findItem[0].elementContent).text.replace('@商家', '') : ''
|
||||
}
|
||||
}
|
||||
|
||||
this.chatDetail.push({
|
||||
sendType: resData.sendType,
|
||||
...resData.msgContent,
|
||||
// msg_content: resData.msgContent.payLoad.contentType === 1 || resData.msgContent.payLoad.contentType === '8' ? analyEmoji(str) : str,
|
||||
msg_content: messageText,
|
||||
msg_source: resData.sendType === 'jx' ? 1 : 2,
|
||||
msg_type: resData.msgContent.payLoad.contentType === '8' ? 1 : resData.msgContent.payLoad.contentType
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
if(item.NewMessageNum) this.setImMsgRead(item) // 设置已读
|
||||
hideLoad()
|
||||
},
|
||||
// json序列化 返回的订单号为number型，会失真，不能直接调用JSON.parse
|
||||
jxParse(text) {
|
||||
let newText = text.replace(/:s*([0-9]{15,})s*(,?)/g, ': "$1" $2')
|
||||
return JSON.parse(newText)
|
||||
},
|
||||
/*************************************************
|
||||
* 查看商品
|
||||
*/
|
||||
async viewGood(rowItem,index) {
|
||||
if(this.chatDetail[index] && this.chatDetail[index].goodCard) return
|
||||
// console.log(rowItem,'goodCard,商品卡片','index',index,'obj.hasOwnProperty(key),',this.currentUser)
|
||||
const skuid = rowItem.app_spu_codes
|
||||
let data = {
|
||||
storeIDs: JSON.stringify([this.currentUser.storeInfo.id]),
|
||||
isFocus: true,
|
||||
skuIDs: [+skuid],
|
||||
offset: 0,
|
||||
pageSize: 1,
|
||||
}
|
||||
let res = await APIGetStoresSkus(data,true)
|
||||
this.chatDetail[index].goodCard = res.skuNames[0]
|
||||
},
|
||||
// 头像
|
||||
avatar(url){
|
||||
if (url.msg_source == 1) {
|
||||
return 'http://image.jxc4.com/image/70143fcf48aefe74537533f35a0a8153.jpg'
|
||||
} else {
|
||||
if (url.sendType == 'mt') {
|
||||
return 'https://image.jxc4.com/image/75654ab606494a0efdb0cf7d7ad060d9.png'
|
||||
} else {
|
||||
return 'https://image.jxc4.com/image/6c2f1dfd95890df8ef5e27bde15c4e7f.png'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 跳到订单详情
|
||||
jumpOrderDetail(orderID){
|
||||
if(orderID) window.open('#/ordermanager/' + orderID, '_blank');
|
||||
},
|
||||
// 设置消息为已读
|
||||
async setImMsgRead(item){
|
||||
if(!this.chatDetail.length) return
|
||||
let data = {
|
||||
appID: item.platformID,
|
||||
vendorStoreID: item.vendorStoreID,
|
||||
vendorID: "" + item.vendorID,
|
||||
orderID: "" + item.orderID ? item.orderID : '0',
|
||||
userID: item.userID
|
||||
}
|
||||
let form = new FormData()
|
||||
form.append('appID', data.appID)
|
||||
form.append('vendorStoreID', data.vendorStoreID)
|
||||
form.append('vendorID', data.vendorID)
|
||||
form.append('orderID', data.orderID)
|
||||
form.append('userID', data.userID)
|
||||
// await setImMsgRead(form,true)
|
||||
// let findIndex = this.allUserList.findIndex(i => i.userID === item.userID)
|
||||
// if(findIndex !== -1) this.allUserList[findIndex].NewMessageNum = 0
|
||||
},
|
||||
// 发送消息
|
||||
async sendMsg(){
|
||||
if(!this.sendText.length) return
|
||||
let message = this.sendText.replace(/\n/g, '') // 发送的消息 除去回车字符
|
||||
console.log('11111111111,,currentUser',this.currentUser)
|
||||
let data = {
|
||||
sendType: this.currentUser.vendorID === 1 ? "mt" : this.currentUser.vendorID === 3 ? "elm" : 'jd',
|
||||
app_id: this.currentUser.platformID,
|
||||
app_poi_code: this.currentUser.vendorStoreID,
|
||||
cts: Math.round(new Date().getTime() / 1000).toString(),
|
||||
// msg_content: msgData.type === 1 ? analyEmoji(msgData.msg) : msgData.msg,
|
||||
msg_content: message,
|
||||
msg_id: Math.round(new Date().getTime()).toString(),
|
||||
msg_source: 1,
|
||||
// msg_type: msgData.type, // 1文本 2 图片网址
|
||||
msg_type: 1, // 1文本 2 图片网址
|
||||
open_user_id: this.currentUser.userID,
|
||||
order_id: this.currentUser.orderID,
|
||||
app_spu_codes: ""
|
||||
}
|
||||
|
||||
this.chatDetail.push({
|
||||
...data
|
||||
}) // 添加新消息
|
||||
if(this.currentUser.isNewCreate) this.currentUser.isNewCreate = false // 更改初次创建信息，循环获取聊天详情
|
||||
// 2、滚动到底部
|
||||
|
||||
let sendMsg = {} // 发生的消息结构体
|
||||
if (this.currentUser.vendorID === 1) {
|
||||
sendMsg = {
|
||||
vendorOrgCode: this.currentUser.platformID,
|
||||
sendData: JSON.stringify({
|
||||
vendorID: this.currentUser.vendorID,
|
||||
data: {
|
||||
msg_content: Encrypt(message, this.currentUser.platformID),
|
||||
// msg_type: +Number(msgData.type),
|
||||
msg_type: 1,
|
||||
app_poi_code: "" +this.currentUser.vendorStoreID,
|
||||
msg_id: +Math.round(new Date().getTime()).toString() + 184572,
|
||||
app_id: this.currentUser.platformID,
|
||||
msg_source: 1,
|
||||
order_id: this.currentUser.orderID,
|
||||
cts: +Math.round(new Date().getTime() / 1000).toString(),
|
||||
open_user_id: +this.currentUser.userID,
|
||||
}
|
||||
})
|
||||
}
|
||||
} else if(this.currentUser.vendorID === 3){
|
||||
let chatDataItem = this.chatDetail.filter(item => item.msg_source === 2)
|
||||
sendMsg = {
|
||||
platformShopId: chatDataItem[0].platformShopId,
|
||||
subBizType: 'SEND_MESSAGE',
|
||||
bizType: 'IM',
|
||||
payload: {
|
||||
receiverIds: chatDataItem[0].payLoad.receiverIds,
|
||||
groupId: chatDataItem[0].payLoad.groupId,
|
||||
msgId: '' + Math.round(new Date().getTime()).toString() + 184572,
|
||||
contentType: '' + msgData.type, // 1-普通文本 2-图片 3-语音 4-视频 101-自定义
|
||||
// contentType: '2', // 1-普通文本 2-图片 3-语音 4-视频 101-自定义
|
||||
content: msgData.type == 1 ?
|
||||
JSON.stringify({
|
||||
text: msgData.msg
|
||||
})
|
||||
:
|
||||
JSON.stringify({
|
||||
mediaId: msgData.msg,
|
||||
fileType: 0, // 必传 int类型 0-jpg图片, 2-png图片
|
||||
size: 1 // 必传 int类型 图片大小, 单位字节, 不超过3*1024*1024
|
||||
})
|
||||
}
|
||||
}
|
||||
sendMsg = {
|
||||
vendorOrgCode: this.currentUser.platformID,
|
||||
sendData: JSON.stringify({
|
||||
vendorID: useData.vendorID,
|
||||
data: { ...sendMsg }
|
||||
})
|
||||
}
|
||||
}else if(this.currentUser.vendorID === 0){
|
||||
// 目前只支持文本 图片未测试
|
||||
let chatDataItem = this.chatDetail.filter(item => item.msg_source === 2)
|
||||
sendMsg = {
|
||||
vendorOrgCode: this.currentUser.platformID,
|
||||
sendData:JSON.stringify({
|
||||
vendorID: 0,
|
||||
storeId:this.currentUser.storeInfo.id,
|
||||
data:{
|
||||
id: '' + Math.round(new Date().getTime()).toString() + 184572 , // uuid //随机生成一个字符串
|
||||
lang: "zh_CN",
|
||||
type: "chat_message",
|
||||
from: {
|
||||
pin:chatDataItem[0].to.pin,
|
||||
app:'im.waiter', // 固定不变
|
||||
clientType:'android'
|
||||
},
|
||||
to: {
|
||||
pin:chatDataItem.from.pin,
|
||||
app:'im.customer', // 固定不变
|
||||
},
|
||||
body: {
|
||||
type:msgData.type === 1 ? "text" : "image", // 消息类型
|
||||
content:msgData.msg,
|
||||
chatinfo:{
|
||||
venderId:chatDataItem[0].body.chatinfo.venderId,
|
||||
askAllocateType:chatDataItem[0].body.chatinfo.askAllocateType,
|
||||
sid:chatDataItem[0].body.chatinfo.sid,
|
||||
source:chatDataItem[0].body.chatinfo.source
|
||||
},
|
||||
template:{
|
||||
source:'dd_msg_583984a984834b1889f853be6e449f39_e66c448b9fbe4704901925d3217081a3' // 文本固定不变 //卡片类消息必传
|
||||
},
|
||||
mt:60,
|
||||
},
|
||||
timestamp:new Date().getTime(), // 时间戳
|
||||
clientTime:new Date().getTime() // 客户端时间
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
console.log(sendMsg,'发送消息，查看内容',message)
|
||||
sendToVendorV2(sendMsg)
|
||||
// 发送成功
|
||||
this.sendText = ''
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.avatar{
|
||||
margin-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.titleText{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
width: fit-content;
|
||||
// width: 200px;
|
||||
|
||||
// display: flex;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
// .userID{
|
||||
// font-size: 16px;
|
||||
// // border: 1px solid red;
|
||||
// // width: 50px;
|
||||
// // white-space: nowrap;
|
||||
// // overflow: hidden;
|
||||
// // text-overflow: ellipsis;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
.latestMsg{
|
||||
// margin-left: 38px;
|
||||
margin-top: 10px;
|
||||
// border: 1px solid red;
|
||||
width: 300px;
|
||||
white-space: nowrap; /* 防止文本换行 */
|
||||
overflow: hidden; /* 隐藏溢出的内容 */
|
||||
text-overflow: ellipsis; /* 显示省略号来表示溢出 */
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.chatBox{
|
||||
// border:1px solid rgb(226, 226, 226);
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
// background-color: #f5f5f5;
|
||||
|
||||
.chatBoxTitle{
|
||||
// background-color: #fff;
|
||||
border-bottom: 1px solid #bdbaba;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
font-size: 38px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.chatBoxCenter{
|
||||
height: 800px;;
|
||||
// border:1px solid red;
|
||||
overflow-y: auto;
|
||||
// background-color: #f5f5f5;
|
||||
|
||||
|
||||
|
||||
|
||||
.chatDetail{
|
||||
height: 800px;
|
||||
|
||||
&-item{
|
||||
// border-bottom:1px solid #f3f3f3;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&-avatar{
|
||||
width:60px;
|
||||
height:60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.order-card{
|
||||
margin-top:10px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chatBoxBottom{
|
||||
// background-color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chatBoxBottom{
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 10px;
|
||||
|
||||
/deep/ .el-textarea__inner{
|
||||
// border-color:1px solid #024dfd !important;
|
||||
border: 1px solid #ffffff !important;
|
||||
// border-color:1px solid #024dfd !important;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-textarea__inner{
|
||||
height: 100px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -494,9 +494,9 @@
|
||||
</el-input>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane lablel="门店聊天" name="storechat">
|
||||
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="门店聊天" name="storechat">
|
||||
<ChatDetail :isGetDetail="isGetDetail"></ChatDetail>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
<el-dialog title="收益统计" :visible.sync="staticStatusShow" width="80%">
|
||||
@@ -591,6 +591,7 @@ import { APIGetInvoiceRecord,APIUploadOrderInvoice } from '@/apis/APIOrder'
|
||||
import { queryUnansweredInvoice,getMyStoreInfo,queryPlatformBalance,balanceRecharge } from '@/apis/store.js'
|
||||
import { getOrdersPost } from '@/apis/order.js'
|
||||
import CMPWaybillInfo from "@/components/ordermanager/cmp/waybillInfo.vue";
|
||||
import ChatDetail from './cmp/chatDeatil/chatDetail.vue'
|
||||
export default {
|
||||
name: 'IndexPage',
|
||||
components: {
|
||||
@@ -599,10 +600,12 @@ export default {
|
||||
staticInfo,
|
||||
CMPWaybillInfo,
|
||||
storeOrderRank,
|
||||
ChatDetail,
|
||||
jxUploadFile: () => import("@/components/cmp/uploadFile")
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isGetDetail:false,
|
||||
newFeatures: [],
|
||||
html: '',
|
||||
activeName: 'mtMerchant', // 标签页索引
|
||||
@@ -716,6 +719,13 @@ export default {
|
||||
return arr;
|
||||
},
|
||||
},
|
||||
watch:{
|
||||
activeName:{
|
||||
handler(val){
|
||||
this.isGetDetail = val && val === 'storechat' ? true : false
|
||||
}
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.$store.dispatch("getAllPlate");
|
||||
// 获取品牌
|
||||
|
||||
Reference in New Issue
Block a user