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="isShowBt"  @click="onShowBt" class="btn_untreated">
                            <span >加载更多消息</span>
                        </div>
                        <div v-else="">

                        </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>
                <div>
                    
                </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; margin-top:40px;">
                    <li style="font-weight:bold;font-weight:bold; color:#666666;">访问信息</li>
                    <li>IP地址：{{account.user_ip}}</li>
                    <li>来源终端：{{account.system}}-{{account.browse}}</li>
                </ul>
                <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}}</li>
                    <li>标签：{{account.label}}</li>
                    <li>昵称：{{account.nick_name}}</li>
                    <li>手机：{{account.account_phone}}</li>
                    <li>邮箱：{{account.account_email}}</li>
                    <li>地址：{{account.address}}</li>
                    <li>备注：{{account.remark}}</li>
                </ul>
                <!-- <div>
                    <span>访客备注：</span>
                    <div class="margin_t">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
                        </el-input>
                    </div>
                    <div class="bt_save margin_t">
                        <span>保存</span>
                    </div>
                </div> -->
            
            </div>
        </div>
        </div>
    </div>
</template>
<script>
import '@/css/index.css';
import { Loading } from 'element-ui';
export default {
    props:['show','uid','user_name'],
    name:'historicalRecord',
    data(){
        return{
            textarea:'',
            stateType:'',
            frce:'',
            inputValse:'',
            dataList:[],//会话记录
            alarm:'',//评价谢谢
            account:'',//用户信息
            imgsrc:'',//图片路径域 
            isShowBt:false,//显示加载按钮
            currentPage:'',//当前页数
        }
    },
    mounted() {
        this.imgsrc = window.url_https_ajax;
        if(typeof this.$store.getters.get_user_info  != 'string'){
            this.token = this.$store.getters.get_user_info.token;
        }else if(this.$store.getters.get_user_info!= ""){
            this.token = JSON.parse(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:{
        /*****************************************/
        //关闭会话详情记录
        shutDown(){
            this.dataList = [];
            this.$emit('childValue',false);
        },

        /*****************************************/
        //获取会话详情列表
        getRecordList(page,size = 10){
            Loading.service({text:'拼命加载中',background:'rgba(0, 0, 0, 0.8)'});
            let str ="historyinfo" + "customer-service" + "history" + "service";
            
            this.$http.get(this.$ports.history.historyInfo,{
            params:{
                servicelog_id:this.uid,
                currentPage: page,
                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();
                    // console.log(res.data.data);
                    this.alarm = res.data.data.alarm;
                    this.account = res.data.data.account;
                    this.currentPage = res.data.data.currentPage;
                    this.isShowBt =  res.data.data.countPage > res.data.data.currentPage ? true : false;
                    res.data.data.list.forEach(e => {
                        e.time_line = this.$public.customFormatDateTime(e.time_line);
                        e.content =JSON.parse(e.content);
                        e.content.text = this.turnFace(e.content.text);
                        this.dataList.push(e)
                    });
                    Loading.service().close()
                }
            });
        },

        /****************************/
        onShowBt(){
            this.getRecordList( this.currentPage*1 + 1);
        },
        /******************文字信息转表情******************/
        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 ;
}
.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{
    width:120px;
    line-height: 30px;
    background:#1398e08c;
    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(245,245,245,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(223,240,255,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>