Customer-Service-Web/service/src/components/historicalRecord.vue

<template>
    <div class="row  rightAlignment">
        <div v-show="getShow" class="row init">
            <!-- 对话框 -->
            <div class="dialog">
                <div class="del " @click="shutDown">
                    <img :src="require('@/assets/img/del.png')" >
            
                </div>
                <div class="head row allAlignment center">
                
                    <!-- <div class="row allAlignment center"> -->
                        <div class="u_name">
                            <span>{{user_name}}</span>
                        </div>
                        <div v-if="getMore" class="btn_untreated" @click="getMoreList" >
                             <span>更多消息</span>
                        </div>
                        <div v-if="!getMore" class="btn_untreated_off">
                            <span>更多消息</span>
                        </div>
                    <!-- </div> -->
                </div>
                <div class="chatWindow"  > 
                    <div v-for="(item,index) in dataList " :key="index">
                        <!-- 模拟用户 -->
                        <div v-if="item.to_id.startsWith('KF')" style="padding-top:10px;">
                            <div class="title_time">
                                <span>{{item.time_line}}</span>
                            </div>
                            <div v-if="item.content.text" class=" row  wrap" >
                            <div class="left_session  item-center" v-html="item.content.text"></div> 
                            </div>
                            <div v-if="item.content.img" class="row " >
                                <div  class="left_session item-center " >
                                    <img :src="imgsrc+item.content.img" alt="">
                                </div>
                            </div>
                        </div>
                        <!-- 模拟客户 -->
                        <div v-else style="padding-top:10px;">
                            <div  class="row  rightAlignment title_time" style="width: 100%;">
                                <span>{{item.time_line}}</span>
                            </div>
                            <div v-if="item.content.text"  class="row rightAlignment">
                                <div class="right_session item-center wrap" v-html="item.content.text"></div>
                            </div>
                            <div v-if="item.content.img" class="row rightAlignment" >
                                <div class="right_session item-center ">
                                    <img :src="imgsrc+item.content.img" alt="">
                                </div>
                            </div>
                        </div>
                    <!-- 系统消息
                    <div>
                        <div class="title_time row center " style="height:50px;">
                            <span>09.30.45 由客服小王处理</span>
                        </div>
                    </div> -->
                    </div>
                </div>
                <div>
                    dadada
                </div>
                <div class="copyEditor">
                    <!-- <div>
                        <span>评价结果</span>
                    </div>
                    <div class="row ">
                        <div>
                            <img src="" alt="">
                            <div>
                                <span>{{alarm.evaluate_id == 1 ?'差评': alarm.evaluate_id == 2 ? '一般': alarm.evaluate_id == 3 ?'满意':'未评价'}}</span>
                            </div>
                        </div>
                        <div>
                            <div>
                                <span>触犯报警:</span>
                            </div>
                            <div>
                                <span v-if="alarm.verifyReturnTime == 2">回复超时</span>
                                <span v-if="alarm.cvtOvertime == 2">会话超时</span>
                                <span v-if="alarm.serverSensitive == 2">客服敏感词</span>
                                <span v-if="alarm.userSensitive == 2">用户敏感词</span>
                                <span v-if="alarm.respond == 2">未回应</span>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        
        <!-- 用户信息展示框 -->
        <div class="user_info">
            <div style=" padding: 20px;">
                <ul style="padding-inline-start:0px; margin-block-start: 0;">
                    <li style="font-weight:bold;font-weight:bold; color:#666666;">用户信息</li>
                    <li>姓名：{{account.account_name ? account.account_name : "暂无"}}</li>
                    <li>手机：{{account.account_phone ? account.account_phone : "暂无"}}</li>
                    <li>邮箱：{{account.account_email ? account.account_email : "暂无"}}</li>
                    <li>地址：{{account.address ?account.address : "暂无"}}</li>
                </ul>
                <div>
                    <span>访客备注：</span>
                    <div class="margin_t">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="account.remark">
                        </el-input>
                    </div>
                </div>
                <ul style="padding-inline-start:0px; margin-block-start:0; margin-top:40px;">
                    <li style="font-weight:bold;font-weight:bold; color:#666666;">访问信息</li>
                    <li>来源渠道：直接访问</li>
                    <li>IP地址：{{account.user_ip ?account.user_ip : "暂无"}}</li>
                    <li>来源终端：{{account.system  +"-"+ account.browse ? account.system +"-"+ account.browse : "暂无"}}</li>
                </ul>
            </div>
        </div>
        </div>
    </div>
</template>
<script>
import '@/css/index.css';
export default {
    props:['show','uid','user_name'],
    name:'historicalRecord',
    data(){
        return{
            textarea:'',
            stateType:'',
            frce:'',
            inputValse:'',
            dataList:[],//会话记录
            alarm:'',//评价谢谢

            // imgsrc:'http://192.168.2.186:8090'
            imgsrc:'http://kfadmin.bocai186.com',//图片路径域

            account: [],
            newpage: 1,
            getMore:true,
        }
    },
    mounted() {
        this.token = this.$store.getters.get_user_info.token;
        this.time = JSON.parse(sessionStorage.getItem("time"));
    },
    computed:{
        getShow(){
            if(this.show){
                this.getRecordList(1)
            }
            return this.show;
        },
    },
    methods:{
        getMoreList(){
            this.newpage++;
            this.getRecordList();
        },
        /*****************************************/
        //关闭会话详情记录
        shutDown(){
            this.$emit('childValue',false);
        },

        /*****************************************/
        //获取会话详情列表
        getRecordList(page,size = 10){
            let str ="historyinfo" + "customer-service" + "history" + this.time[0] + "service";
            this.get("api/service/history/historyInfo",{
            params:{
                servicelog_id:this.uid,
                currentPage: this.newpage,
                pageSize: size
            },
            headers:{
                'X-Requested-With': 'XMLHttpRequest',
                'apiToken': this.$md5(str),
                'userToken': this.token
            }
            }).then(res => {
                if(res.data.code == 1){
                    res.data.data.list = res.data.data.list.reverse();
                    this.account = res.data.data.account;
                    this.alarm = res.data.data.alarm;

                    res.data.data.list.forEach(e => {
                        e.time_line = this.$public.customFormatDateTime(e.time_line);
                        e.content = JSON.parse(e.content);
                    });
                    if(res.data.data.currentPage > res.data.data.countPage){
                        this.getMore = false;
                        return false
                    }else {
                        let newList =  res.data.data.list;
                        console.log(res.data.data)
                        newList.forEach(e=>{
                            e.content.text = this.turnFace(e.content.text);
                            //this.turnFace()
                        })
                        this.dataList =  newList.concat(this.dataList);
                    }


                }
            });
        },

        /******************文字信息转表情******************/
        turnFace(data){
            let str = data.match(/\#\[.*?\]\//g);
            let arr =Array.from(new Set(str));
            arr.forEach(e=>{
                let imgsrc = '';
                for(let i = 0 ; i < this.$frce.length ; i++){
                let expText = e.slice(1,e.length-1);
                if(expText == this.$frce[i]){
                    imgsrc = '<img class="hover" src="'+require(`@/assets/img/${i}.gif`)+'"/>'
                    break;
                }
                }
                data = data.replace(new RegExp(`\\#\\[${e.substring(2,e.length-2)}\\]\\/`,'g'),imgsrc);
            })
            return data;
        },
    }
}
</script>
<style scoped>
.init{
    font-size: 0;
    background: #FFFFFF;
    width: 855px;
    border: 1px solid #d5e5ff;
    z-index: 10 ;
    margin-top: 18px !important;
}
.del{
    /* position:fixed;*/
    top: 35vh;
    left: -31px; 
    position: relative;
    width: 32px;
    height: 60px;
    cursor:pointer;
    /* background:red; */
    /* border-radius: 50% 0 0 50%;
    border: 1px solid #d5e5ff; */
    z-index: 20;
}

.dialog{
    width: 584px;
    /* height: 100vh; */
    border: 1px solid #D5E5FF;
    border-left: 0;
    border-top: 0;
    /* background: red; */
}
.user_info{
    width: 261px;
    /* height: 100vh; */
    font-size:14px;
    color:rgba(153,153,153,1);
    font-weight:400;
}
.head{
    padding: 0 20px;
    height:50px;
    border-bottom: 1px solid #D5E5FF;
}
.chatWindow{
    height: 420px;
    font-size: 14px;
    padding: 0 10px;
    font-weight:400;
    color:rgba(102,102,102,1);
    overflow:auto
}
.copyEditor{
    font-size: 14px;
    width: 100%;
    height: 160px;
    border-top: 1px solid #D5E5FF;
}
.btn_untreated_off {
    width:70px;
    line-height: 30px;
    background: rgb(195, 195, 192);
    border-radius:5px;
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: center;
    cursor: pointer;
}
.btn_untreated{
    width:70px;
    line-height: 30px;
    background: rgb(89, 115, 255);
    border-radius:5px;
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: center;
    cursor: pointer;
}
.title_time{
    font-size:12px;
    font-weight:400;
    color:rgba(187,187,187,1);
}
.u_name{
    width:67px;
    height:20px;
    font-size:14px;
    font-family:PingFang SC;
    font-weight:bold;
    line-height:20px;
    color:rgba(102,102,102,1);
}
ul li {
    list-style: none;

    margin: 0px;
    padding:6px 0 ;
    
}
.bt_save{
    
    width:50px;
    line-height:30px;
    text-align: center;
    border:1px solid rgba(221,221,221,1);
    background:linear-gradient(180deg,rgba(245,245,245,1) 0%,rgba(238,238,238,1) 100%);
    border-radius:5px;

}
.margin_t{
    margin-top: 10px;
}
.left_session{
    border:1px solid rgba(221,221,221,1);
    margin-right: 50px;
    max-width: 100%;
    min-height: 20px;
    padding: 6px;
    background:rgba(223,240,255,1);
    border-radius:0px 10px 10px 10px;
    margin-top:6px;
}
.right_session{
    margin-top:6px;
    border:1px solid rgba(221,221,221,1);
    margin-left: 50px;
    max-width: 100%;
    min-height: 20px;
    padding: 6px;
    background:rgba(245,245,245,1);
    justify-content: flex-end;
    border-radius:10px 0px 10px 10px;
}

.key {
  width: 100%;
  position: relative;
}
.inputBtn {
  /* position: absolute;
  right: 30px;
  bottom: 10px; */
  width: 50px;
  height: 26px;
  background:rgba(221,221,221,1);
  border-radius: 5px;
  font-size: 14px;
  color: #fff;
}
.frceBox {
  position: absolute;
  top: -25.1vh;
  left: 0;
  width: 100%;
  height: 25vh;
  background: #fff;
  border-top: 1px solid #d5e5ff;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 999999;
}
.frceBox p {
  width: 50px;
  height: 50px;
}
.frce {

  /* width: 100%; */
  padding: 0.1rem 0;
  margin: 0 10px;
}
.input {
    width: 99%;
    height: 90px;
    background: #fff;
    resize: none;
    font-size: 14px;
  /* padding: 10px; */
  /* border: none; */
    border: 1px solid #D5E5FF;
    outline: none;
}

</style>