From f5fb91aa86d5ec75516de0bf23d11e6a1967d509 Mon Sep 17 00:00:00 2001
From: wtq <2394975549@qq.com>
Date: Tue, 27 Jan 2026 17:56:10 +0800
Subject: [PATCH] =?UTF-8?q?'=E9=A6=96=E9=A1=B5=E6=96=B0=E5=A2=9E=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E8=AE=B0=E5=BD=95'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../storemanager/storeMessage/index.vue       |   3 +-
 .../indexpage/cmp/chatDeatil/chatDetail.vue   | 951 ++++++++++++++++++
 src/pages/indexpage/indexPage3.vue            |  16 +-
 3 files changed, 966 insertions(+), 4 deletions(-)
 create mode 100644 src/pages/indexpage/cmp/chatDeatil/chatDetail.vue

diff --git a/src/components/storemanager/storeMessage/index.vue b/src/components/storemanager/storeMessage/index.vue
index ca690be..18ae0c5 100644
--- a/src/components/storemanager/storeMessage/index.vue
+++ b/src/components/storemanager/storeMessage/index.vue
@@ -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'
diff --git a/src/pages/indexpage/cmp/chatDeatil/chatDetail.vue b/src/pages/indexpage/cmp/chatDeatil/chatDetail.vue
new file mode 100644
index 0000000..ad39792
--- /dev/null
+++ b/src/pages/indexpage/cmp/chatDeatil/chatDetail.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/indexpage/indexPage3.vue b/src/pages/indexpage/indexPage3.vue
index fcb3887..1fc6c0f 100644
--- a/src/pages/indexpage/indexPage3.vue
+++ b/src/pages/indexpage/indexPage3.vue
@@ -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");
     // 获取品牌