Customer-Service-Web/chat-wap/src/components/index.vue

<template>
  <div>
    <!-- 聊天 -->
    <div class="service" v-if="!knowledge">
      <!-- 头部信息 -->
      <div class="header row allAlignment item-center">
        <div class="row item-center" @click="leftShow = true">
          <img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png">
          <p>{{service_info.name}}</p>
        </div>
        <div class="row">
          <img class="icon" v-if="selNum > chatNum" style="width:.34rem;height:.34rem;" src="@/assets/Service2.png">
          <img class="icon" style="width:.34rem;height:.34rem" @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png">
          <!-- <img class="icon" style="margin-right:0;" src="@/assets/Service4.png"> -->
        </div>
      </div>
      <div class="main" id="main">

        <!-- ********************************************************** -->
        <!-- 机器人聊天板块 -->
        <div v-if="!link_success">
          <!-- 系统欢迎语 -->
          <div v-if="welcome.length >0" v-for="(itme,i) in  welcome" :key="'w'+i">
            <div class="row allAlignment" style="margin-top:.3rem;">
              <div class="HeadPortrait row center">
                <img :src="require('@/assets/user2.png')">
              </div>
              <div class="messageWindow dialogueA col-w">
                <div class="customerService left">{{itme}}</div>
              </div>
            </div>
          </div>

          <!-- 系统消息下拉选择 -->
          <div class="artificial" v-if="problem.length > 0">
            <div  class="row item-center allAlignment" style="height:.75rem;border-bottom:.01rem solid #EEE;" 
            v-for="(item,index) in problem" :key="index" @click="pushMessage(item.robot_content)">
                <span>{{item.robot_name}}</span>
                <img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
              </div>
              <div class="row item-center" style="height:.72rem;">
                <p>以上问题都不是</p>
                <div style="color:#5EA0F7;padding-left:.1rem;" @click="connectionService">转人工客服</div>
              </div>
          </div>

          <!-- 和机器人会话 -->
          <div v-for="(item,i) in robot" :key="'r'+i">
            <!-- 系统提示语 -->
            <div v-if="item.type==1001 " class="artificial" >
              <div class="row item-center" style="padding-left:.2rem;height:.72rem;">
                <p>您的问题小智无法回答请:</p>
                <div style="color:#5EA0F7;padding-left:.1rem;" @click="connectionService">转人工客服</div>
              </div>
            </div>
            <!-- 和机器人会话互动 -->
            <div v-else-if="item.type == 'service' || item.type == 'user'"  class="row allAlignment" style="margin-top:.3rem;">
              <div class="HeadPortrait row center">
                <img v-if="item.type == 'service'" :src="require('@/assets/user2.png')">
              </div>
              <div class="messageWindow dialogueA col-w" :style="item.type == 'user'?'text-align: right;':''">
                <div v-if="item.type == 'service'" class="customerService left">{{item.content.text}}</div>
                <div v-if="item.type == 'user'" class="user right imgSrc">
                  <yd-lightbox  v-if="item.content.img" style="display:inline-block"  class="row rightAlignment box-img">
                    <yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
                  </yd-lightbox>
                  <span v-else >{{item.content}}</span>
                </div>
              </div>
              <div class="HeadPortrait row center">
                <img v-if="item.type == 'user'" :src="user.headPortraitSrc?user.headPortraitSrc:require('@/assets/user1.png')">
              </div>
            </div>
            <!-- 转人工分组 -->
            <div class="artificial" v-if="item.type == 'artificial_service' ">
              <div  @click="turnArtificial(items.id)" v-for="(items,indexs) in item.content" :key="'r'+indexs" class="row item-center allAlignment" style="height:.75rem;border-bottom:.01rem solid #EEE;">
                <p>
                  人工客服:
                  <span style="color:#5EA0F7;padding-left:.1rem;">{{items.name}}</span>
                </p>
                <img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
              </div>
            </div>
          </div>
        </div>

        <!-- ********************************************************** -->
        <!-- 人工会话模版 -->
        <div v-if="link_success" v-for="(item,index) in chat" :key="index">
          <!-- 客服会话 -->
          <div v-if="item.type == 'service'" >
            <div class="row allAlignment" style="margin-top:.3rem;">
              <div class="HeadPortrait row center">
                <img :src="require('@/assets/user2.png')" >
              </div>
              <div class="messageWindow dialogueA col-w" >
                <div class="customerService left imgSrc">
                   <yd-lightbox  v-if="item.content.img" style="display:inline-block"  class="row rightAlignment">
                    <yd-lightbox-img :src=" img_http + item.content.img"></yd-lightbox-img>
                  </yd-lightbox>
                  <span v-else>{{item.content.text}}</span>
                </div>
              </div>
              <div class="HeadPortrait row center">
    
              </div>
            </div>
          </div>

          <!-- 用户会话 -->
          <div v-if="item.type == 'user'" >
            <div class="row allAlignment" style="margin-top:.3rem;">
              <div class="HeadPortrait row center">
              
              </div>
              <div class="messageWindow dialogueA col-w" style="text-align: right;" >
                <div class="user right imgSrc">
                  <yd-lightbox v-if="item.content.img" style="display:inline-block"  class="row rightAlignment">
                    <yd-lightbox-img :src="img_http+item.content.img"></yd-lightbox-img>
                  </yd-lightbox>
                  <span v-else>{{item.content.text}}</span>
                </div>
              </div>
              <div class="HeadPortrait row center">
                <img  :src="require('@/assets/user1.png')">
              </div>
            </div>
          </div>
        </div>
          
          <!-- 常规系统消息 -->
          <!-- <div class="row center" v-if="hintSwitch.serviceOffline">
            <div class="btn">
              当前客服不在线，如需帮助请
              <span
                class="click"
                style="display: inline-block;margin-left:.1rem;"
                @click="flag = true"
              >留言</span>
            </div>
          </div>
          <div class="row center" v-if="hintSwitch.queue">
            <div class="btn">
              当前客服较忙，需要排队
              <span class="click" style="display: inline-block;margin-left:.1rem;">第25位</span> 请稍候，如需取消等待请
              <span
                class="click"
                style="display: inline-block;margin-left:.1rem;"
                @click="flag = true,hintSwitch.queue = false"
              >留言</span>
            </div>
          </div>
          <div class="row center" v-if="hintSwitch.serviceOn">
            <div class="btn">请注意，当前客服已连接</div>
          </div>
          <div class="row center" v-if="hintSwitch.serviceOff">
            <div class="btn">当前客服已中断连接</div>
          </div>
          <div class="row center" v-if="hintSwitch.connection">
            <span class="btn">已联系人工客服</span>
          </div>
          <div class="row center" v-if="hintSwitch.evaluateOnOff">
            <div class="btn">
              您好，您此次的评价为
              <span
                class="click"
                style="display: inline-block;margin-left:.1rem;"
              >{{evaluateBox.txt}}</span>
            </div>
          </div>
          <div class="row center" v-if="hintSwitch.welcome">
            <div class="btn">欢迎来到客服服务中心</div>
          </div>
          <div class="row center" v-if="hintSwitch.SessionTimeout">
            <div class="btn">您好，我们长时间没有收到您的回复，稍后将自动结束本次会话</div>
          </div>
          <div class="row center" v-if="hintSwitch.inSessionTimeout">
            <div class="btn">您好，未能收到您的回复，本次对话将自动结束 如需继续咨询请 重新连接客服</div>
          </div>
          <div class="row center" v-if="hintSwitch.serviceSessionTimeout">
            <div class="btn">正在查询中，请稍等</div>
          </div>
          <div class="row center" v-if="hintSwitch.talkTime">
            <div class="btn">后台返回的时间戳</div>
          </div> -->



          <!-- 人工客服系统通知 -->
          <!-- <div class="artificial">
            <div
              class="row item-center allAlignment"
              style="height:.75rem;border-bottom:.01rem solid #EEE;"
            >
              <p>
                人工客服
                <span style="color:#5EA0F7;padding-left:.1rem;">红红</span>
              </p>
              <img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
            </div>
            <div
              class="row item-center allAlignment"
              style="height:.75rem;border-bottom:.01rem solid #EEE;"
            >
              <p>
                人工客服
                <span style="color:#5EA0F7;padding-left:.1rem;">妞妞</span>
              </p>
              <img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
            </div>
            <div
              class="row item-center allAlignment"
              style="height:.75rem;border-bottom:.01rem solid #EEE;"
            >
              <p>
                人工客服
                <span style="color:#5EA0F7;padding-left:.1rem;">菲菲</span>
              </p>
              <img style="width:.3rem;height:.3rem;" src="@/assets/addright.png">
            </div>
          </div> -->

          <!-- 评价通知 -->
          <!-- <div class="evaluate row center wrap" v-if="evaluateShow">
            <p style="width:100%;margin-top:.15rem;" class="row center">欢迎你的咨询，请对我们的服务做出评价</p>
            <button class="evaluateBtn" style="margin-bottom:.2rem;" @click="bottomShow = true">评价</button>
          </div> -->
          <div v-if="box_height" style="height:65px">

          </div>
      </div>
      <!-- 中间弹窗登录 -->
      <yd-popup
        v-model="centerShow"
        position="center"
        width="6.9rem"
        height="8rem"
        :masker-opacity=".2"
      >
        <div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
          <img
            @click="centerShow = false"
            style="width: 0.32rem;height: 0.32rem;"
            src="@/assets/Service5.png"
          >
        </div>
        <div class="row center" style="font-size:.56rem;">
          <p style="color:#F04992;">HX</p>
          <span style="color:#5EA0F7;">669</span>
        </div>
        <input class="loginInput" type="text" placeholder="姓名">
        <input class="loginInput" type="text" placeholder="手机号">
        <input class="loginInput" type="email" placeholder="邮箱地址">
        <div class="row" style="margin:0 .2rem;">
          <input class="loginInput" placeholder="输入验证码" type="text" style="margin:.5rem 0 0 0;">
          <p
            @click="initialLoginCode"
            class="row center"
            style="width:100%;height:.8rem;margin-top:.5rem;background:#F1E1E0;border-radius: .1rem;margin-left:.2rem;font-size:.3rem;color:#666;"
          >{{loginCode}}</p>
        </div>
        <div class="row center sub" style="margin:.5rem .2rem .2rem .2rem;">登录</div>
      </yd-popup>

      <!-- 底部弹窗评价 -->
      <yd-popup v-model="bottomShow" position="bottom" height="6.5rem" :masker-opacity=".2">
        <div class="row rightAlignment" style="padding-top:.2rem;padding-right:.2rem;">
          <img
            @click.stop="bottomShow = false"
            style="width: 0.32rem;height: 0.32rem;"
            src="@/assets/Service5.png"
          >
        </div>
        <div style="color:#666;text-align: center;font-size:.28rem;">感谢您的咨询，请对我们的服务做出评价</div>
        <div style="height:2.3rem;" class="row allAlignment evaluatebtn">
          <div style="width:33%;height:100%;">
            <div class="row wrap center" @click="evaluateClick('satisfaction','满意',1)">
              <img
                style="width:.66rem;height:.66rem;"
                :src="evaluateBox.grade=='satisfaction'?require('@/assets/evaluate1a.png'):require('@/assets/evaluate1.png')"
              >
              <p>满意</p>
            </div>
          </div>
          <div style="width:33%;height:100%;" @click="evaluateClick('ordinary','一般',2)">
            <div class="row wrap center">
              <img
                style="width:.66rem;height:.66rem;"
                :src="evaluateBox.grade=='ordinary'?require('@/assets/evaluate2a.png'):require('@/assets/evaluate2.png')"
              >
              <p>一般</p>
            </div>
          </div>
          <div style="width:33%;height:100%;" @click="evaluateClick('noSatisfaction','不满意',3)">
            <div class="row wrap center">
              <img
                style="width:.66rem;height:.66rem;"
                :src="evaluateBox.grade=='noSatisfaction'?require('@/assets/evaluate3a.png'):require('@/assets/evaluate3.png')"
              >
              <p>不满意</p>
            </div>
          </div>
        </div>
        <div class="evaluateBox">
          <textarea placeholder="评价备注" v-model="evalArea"></textarea>
        </div>
        <div class="row center sub" @click="evaluateEsc">确定</div>
      </yd-popup>

      <!-- 左侧弹窗客服信息 -->
      <yd-popup v-model="leftShow" position="left" width="4.8rem" :masker-opacity=".2">
        <div class="leftHader row item-center">
          <img @click="leftShow = false" class="icon" src="@/assets/Service4.png">
          <p style="color:#FFF;font-size:.34rem;">{{service.serviceCode+service.jobNum}}</p>
        </div>
        <div>
          <div class="leftMain-top row">
            <div>
              <p>
                <!-- 客服名字 -->
                <span>姓名:</span>
                {{service_info.name}}
              </p>
              <p>
                <!-- 客服工号 -->
                <span>工号:</span>
                {{service_info.job_name}}
              </p>
              <p>
                <!-- 客服性别 -->
                <span>性别:</span>
                保密
              </p>
              <p>
                <!-- 客服职务 -->
                <span>职务:</span>
                咨询服务
              </p>
            </div>
            <div class="row center">
              <img style="width:1.8rem;height:1.8rem;"
                :src="img_http + service_info.avatar" >
            </div>
          </div>
          <div class="leftMain-chenter"
            style="padding:0 .3rem;margin-top:.3rem;padding-bottom:.6rem;border-bottom:.01rem solid #ddd;"
          >
            <!-- 客服个性签名 -->
            <span>个性签名：</span>
            {{service_info.signature}}
          </div>
          <!-- 广告图 -->
          <div class="leftMain-bottom row center"  style="padding:0 .3rem;margin-top:.6rem;">
            <a :href="'http://'+advertisement.advertisement_url"   target="_blank"  rel="noopener noreferrer"  >
              <img style="width:4.2rem;height:7rem;" :src="img_http+advertisement.advertisement_img">
            </a>
          </div>
        </div>
      </yd-popup>
      <!-- 底部输入框 -->
      <div class="footer row wrap" id='input_box'>
        <!-- <textarea
          class="input row item-center"
          style="-webkit-user-select:auto;user-select:auto;-o-user-select:auto;-ms-user-select:auto;border-bottom:.01rem solid #ddd"
          contenteditable="true"
          v-model="text_info"
          :rows="inputNum"
          @focus="inputShow($event)"
          @keydown="inputNumFun()"
          placeholder="请输入你的问题："
        ></textarea> -->
        <yd-cell-group>
          <yd-cell-item>
              <yd-textarea slot="right" contenteditable="true" v-model="text_info" :rows="inputNum" @keydown="inputNumFun()" placeholder="请输入你的问题：" maxlength="100"></yd-textarea>
          </yd-cell-item>
        </yd-cell-group>
        <div class="send row item-center" style="border-bottom:.01rem solid #ddd">
          <img
            :src="meme?require('@/assets/faceActive.png'):require('@/assets/face.png')"
            @click="faceClick"
            style="width:.48rem;height:.48rem"
          >
          <input type="file" id="file" @change="uploadIMG" accept="image/jpeg,image/jpg,image/png,image/svg" style="display:none">
          <label for="file">
            <img src="@/assets/imge.png" style="width:.46rem;height:.42rem">
          </label>
          <div
            @click="send()"
            style="color:#ccc;border:.02rem solid #ddd;width:1rem;height:.66rem;border-radius:.1rem;"
            :style="text_info.length>0?'background:#5EA0F7;color:fff;':''"
            class="row center"
          >发送</div>
        </div>
        <!-- 表情包 -->
        <div v-show="meme" class="memeBox">
          <yd-slider autoplay="0" :loop="false">
            <yd-slider-item>
              <div>
                <ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
                  <li v-for="(item,index) in frceArr" :key="index" v-show="index<15">
                    <img
                      class="memeImg"
                      :src="require(`@/assets/${index}.gif`)"
                      @click="memeImg(index)"
                    >
                  </li>
                </ul>
              </div>
            </yd-slider-item>
            <yd-slider-item>
              <div>
                <ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
                  <li v-for="(item,index) in frceArr" :key="index" v-show="index>15&&index<=30">
                    <img
                      class="memeImg"
                      :src="require(`@/assets/${index}.gif`)"
                      @click="memeImg(index)"
                    >
                  </li>
                </ul>
              </div>
            </yd-slider-item>
            <yd-slider-item>
              <div>
                <ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
                  <li v-for="(item,index) in frceArr" :key="index" v-show="index>30&&index<=45">
                    <img
                      class="memeImg"
                      :src="require(`@/assets/${index}.gif`)"
                      @click="memeImg(index)"
                    >
                  </li>
                </ul>
              </div>
            </yd-slider-item>
            <yd-slider-item>
              <div>
                <ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
                  <li v-for="(item,index) in frceArr" :key="index" v-show="index>45&&index<=60">
                    <img
                      class="memeImg"
                      :src="require(`@/assets/${index}.gif`)"
                      @click="memeImg(index)"
                    >
                  </li>
                </ul>
              </div>
            </yd-slider-item>
            <yd-slider-item>
              <div>
                <ul style="width:100%;padding-bottom:.3rem;" class="row average wrap">
                  <li v-for="(item,index) in frceArr" :key="index" v-show="index>60">
                    <img
                      class="memeImg"
                      :src="require(`@/assets/${index}.gif`)"
                      @click="memeImg(index)"
                    >
                  </li>
                </ul>
              </div>
            </yd-slider-item>
          </yd-slider>
        </div>
      </div>
    </div>
    <!-- 留言知识库 -->
    <div v-if="knowledge">
      <!-- 接收返回消息 -->
        <knowledgeLibrary @returnIndex="returnIndex" :currentTime="currentTime" />
    </div>
  </div>
</template>

<script>
import "../css/index.css";
import knowledgeLibrary from './knowledgeLibrary'
import frce from "./frce.js";
export default {
  name: "service",
  // 模板注册
  components: {
    knowledgeLibrary
  },
  data() {
    return {
      // 数据
      data: "", //常规数据
      getTime:{     //从服务器获取到的时间
        date:'',//年月日
        time:'',//时分
      },
      DialogueData: [ //对话数据
        {
          type:'service',                 //消息发送方
          content: '你要去哪里啊？',    //消息内容
        },
        {
          type:'user',
          content: '我想去泰国看人妖。',
        }
      ], 
      text_info: "", //输入框内容
      evaluate: "", //评论内容
      inputLength: 0, //输入框内容length
      inputLoginCode: "", //用户输入的登录验证码
      // 人工客服信息
      service: {
        //当前连接的客服详情信息
        name: "智能客服", //名字
        sex: "保密", //性别
        job: "咨询客服", //职务
        jobNum: "001", //工号
        signature:
          "万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！", //个性签名
        headPortraitSrc:"", //头像连接
        serviceId: "", //客服id
        serviceCode: "人工客服" //客服类型
      },
      serviceList: [{}, {}, {}], //后台推送的人工客服列表
      // 用户个人信息
      user: {
        name: "隔壁老樊", //姓名
        call: "樊先生", //称呼
        sex: "男", //性别
        userId: "", //用户id
        headPortraitSrc:
          "http://img5.imgtn.bdimg.com/it/u=2724886373,3500404552&fm=26&gp=0.jpg", //用户头像连接
        phone: "15100000000", //手机号
        email: "123456@qq.com" //邮箱
      },
      // 开关
      knowledge:false,//留言知识库开关
      inputNum: 1, //input可见行数
      leftShow: false, //左侧详细开关
      //系统提示开关集
      hintSwitch: {
        serviceOn: false, //人工客服连接
        serviceOff: false, //人工客服中断
        evaluateOnOff: false, //人工客服评价通知
        connection: false, //转人工客服
        queue: false, //人工排队等候
        serviceOffline: false, //人工客服不在线
        welcome: false, //进入系统时的欢迎语
        SessionTimeout: false, //用户会话即将超时
        inSessionTimeout: false, //用户会话已经超时
        serviceSessionTimeout: false, //客服长时间未回复安抚提示
        serviceShowmessage: false, //人工客服连接成功
        talkTime:true,//对话时间提示
      },
      bottomShow: false, //底部评价弹窗开关
      evaluateShow: true, //评价通知开关
      centerShow: false, //中间登录开关
      evaluateBox: { grade: "", txt: "",type : 1}, //评论等级
      loginCode: "", //登录时展示的验证码
      // 激活
      active: "",
      imgSrc: "",
      // 时间
      timers: true, //计时器开关
      newtime: "", //当前日期时间

      /*-----------------------------------------------*/
      meme: false, // 表情包开关
      frceArr: [], //表情包代码
      // 按钮
      websock:null,//创建websock
      user_info:'',//用户信息
      apiToken:'',//通话调用凭证
      currentTime:'',//接口调用服务器时间
      problem:[],//机器人问题
      welcome:[],//欢迎语
      advertisement:'',//广告
     // img_http:'http://103.108.43.176:8080',//图片路径域 http://192.168.2.186:8090
      img_http:'http://192.168.2.186:8090',//图片路径域 'http://103.108.43.176:8080
      robot:[],//和机器人聊天临时数据
      chat:[],//人工会话
      error_num:1001,//机器人回答超出能力之外编号
      isConnection:true,//人工分组列表开关
      //客服信息
      service_info:{
        avatar:'/static/customer/images/robot.png',
        job_name:'001',
        name:'智能客服',
        signature:"万人在线，万人赛事，告别拼爹，只拼实力！注册就送5000游戏币！"
      },
      link_success:false,//人工链接成功
      conversationId:'',//会话工单
      chatNum:'', // 留言次数
      selNum : 0, // 人工聊天返回的会话次数，自增
      evalArea : '', //评价备注
      source:{},//来源信息
      initData:1,//
      isTurnArtifcial:true,
      box_height:false,//苹果浏览器增加会话框高度
    };
  },
  // 方法
  methods: {

    /*******************************************/
    //设置token加密
    setApiToken(name,controller,time,modules){
      let txetVal = name+'customer-service'+controller+time+modules;
      let sssd = txetVal.toLowerCase();
      return this.$md5(txetVal.toLowerCase());
    },

    /*******************************************/
    //初始化Websocket链接
    initWebsocket(){
      //let apiToken = this.$md5('customer-service'+this.currentTime+window.location.origin);
      // 192.168.2.186
      let sock_ip = 'ws://192.168.2.186:9101';
      //let sock_ip ='ws://103.108.43.176:9101';
      this.websock = new WebSocket(sock_ip+"?apiToken="+this.apiToken);
      //
      //数据返回
      this.websock.onmessage = this.socket_message;
      //数据发送
      this.websock.onopen = this.socket_open;
      //重新链接
      this.websock.onerror = this.socket_error;
      //关闭链接
      this.websock.onclose = this.socket_close;
    },

    /*******************************************/
    //连接建立之后执行send方法发送数据
    socket_open(){ 
      // let actions = {"test":"12345"};
      console.log('我链接了');
      //this.socket_end(JSON.stringify(actions));
    },

    /*******************************************/
    //连接建立失败重连
    socket_error(){
      this.initWebSocket();
    },

    /*******************************************/
    //数据接收  
    socket_message(e){ 
     // console.log(e);
      if(!e.data) return;
      const redata = JSON.parse(e.data);
      console.log(redata);
      //欢迎语
      if(redata.message_type =='helloMessage'){
        this.isTurnArtifcial =true;
        if(this.initData == 1){
          this.welcome.push(redata.data.content); 
          this.welcome.push('请点击您想咨询的问题，若都不是，请在输入框直接输入'); 
        }
       
      }
      //广告语
      if(redata.message_type =='advertisement' ){
        this.advertisement = redata.data[0]
      }

      //机器人回复
      if(redata.message_type =="robotMessage"){
        // console.log(redata);
        if(redata.data.content == "error"){
          this.robot.push({
            type:this.error_num,
          })
          this.error_num ++;
        }else{
          this.robot.push({
            type:'service',
            content:{text:redata.data.content}
          })
        }
        this.automaticRolling();
        //data
        //this.robot =
      }

      //系统消息
      if(redata.message_type == 'notice'){
        this.$dialog.loading.close();
        this.isTurnArtifcial = true;
        let _this =this;
        this.$dialog.alert({mes:redata.content, callback: () => {
          this.initData =100;
          _this.$dialog.loading.open('数据加载中...');
          setTimeout(() => {
              _this.$dialog.loading.close();
              _this.registered();
          }, 2000);
        }});
      }
      //人工链接
      if(redata.message_type =='connect'){
        this.link_success = true;
        this.service_info = redata.data.serverInfo;
        this.conversationId =  redata.data.conversationId
      }

      //人工会话欢迎语
      if(redata.message_type == "chatMessage"){
        this.$dialog.loading.close();
        let obj ={};
        if (this.$public.isJSON(redata.data.content)){
          obj = JSON.parse(redata.data.content);
        }else{
          obj.text = redata.data.content;
        }
    
      //   if( content instanceof  Object ){
      //     obj = content
      //   }else{
      //     obj.text = content
      //   }
        this.chat.push({
          type:'service',
          content:obj
        })
        this.selNum++;
       }
        this.automaticRolling();  
    },

    /*******************************************/ 
    //数据发送 
    socket_end(Data){
      this.websock.send(Data);
    },


    /*******************************************/  
    //关闭
    socket_close(e){  
      console.log('断开连接',e);
      this.initData =100;
      this.link_success = false;
      this.registered();
      // this.websock.close()
    },

    /*****************************************/
    //用户匿名注册
    registered(){
      let token = localStorage.getItem('token');
      let data={
          token:token != null ? token :'',//
          appid:this.source.appid,//
          appuid:this.source.appuid,//
        }
      let obj = {
        headers: {
          "apiToken":this.setApiToken('autoReg','register',this.currentTime[0],'index')
        }
      }

      this.post('api/index/register/autoReg',data,obj).then(res=>{
        if(res.data.code ==1){
          this.user_info = res.data.data;
          localStorage.setItem("token", res.data.data.token);
          //Websocket链接
          this.initWebsocket();
          //console.log(res.data.data)
        }
      })
    },

    /******************************************/
    //获取热门问题
    getProblem(){
      let obj ={
        headers: {
            // 'Content-Type': 'application/x-www-form-urlencoded',
            "apiToken":this.setApiToken('index','robot',this.currentTime[0],'index')
        }
      }
      this.post('api/index/robot/index',{groups_id:1,robotgroups_id:1},obj).then(res=>{
          //console.log(res.data.data);
          this.problem = res.data.data;
      })
    },

    /*******************************************/
    //推送机器人消息
    pushMessage(e){
      this.robot.push({ 
        type:'service',
        content:{text:e}
      });
      this.automaticRolling();  
    },

    /*******************************************/
    //转人工
    turnArtificial(e){
      //
      this.$dialog.loading.open('转接中...')
      if(this.isTurnArtifcial){
        this.socket_end(JSON.stringify({
          type:'userInit',
          data:{
            uid:this.user_info.id,
            name:this.user_info.name,
            avatar:'',
            group:e,
          }
        }))
        this.isTurnArtifcial =false
      }
  
      //let _this =this;
      // this.$dialog.loading.open('数据加载中...');
      // setTimeout(() => {
      //   _this.$dialog.loading.close();
        
      // }, 2000);
    },

    /******************************************/
    // 消息发送
    send(){
      if(this.text_info == '') return 
      let type = 'toRobot';
      let data = {};
      let obj = {
        text:this.text_info,
        img:'',
        type:''
      }
      this.meme  =false;
      // console.log(JSON.stringify(obj))
      //和人工发送消息
      if(this.link_success){
        data = {
          from_name:this.user_info.name,
          content:JSON.stringify(obj),
          from_id:this.user_info.id,
          avatar:'',
          to_id:this.service_info.id,
          to_name:this.service_info.name,
          conversationId:this.conversationId,
        }
        type = 'chatMessage';
        this.chat.push({
          type:'user',
          content:obj
        })
      }else{//和机器人聊天  
        data={
          groups_id:'1',
          robot_name:this.text_info,
          robotgroups_id:'1',
        }
        type = 'toRobot';
        //本地存放数据
        obj.text = this.text_info
        this.robot.push({
          type:'user',
          content:this.text_info //obj
        })
      }
      //console.log(JSON.stringify({type,data}));
      this.socket_end(JSON.stringify({type,data}))
      this.text_info = '';
      this.automaticRolling();
      // console.log(data)
    },

    /*******************************************/
    //获取转接人工客服列表
    connectionService() {
      if(!this.isConnection) return 
      let obj ={
        headers: {
          "apiToken":this.setApiToken('index','groups',this.currentTime[0],'index')
        }
      }
      this.isConnection = false;
      //api
      this.get('api/index/groups/index',obj).then(res=>{
        if(res.data.code == 1){
          this.robot.push({ 
            type:'artificial_service',
            content:res.data.data
          });
          this.automaticRolling();
        }
      })
      //this.hintSwitch.connection = true; //系统提示开关激活
      // 此处为请求
    },

    /*******************************************/
    //发送消息后自动滚动高度
    automaticRolling(){
      this.$nextTick(() => {
        let msg = document.getElementById('main') // 获取对象
        let input_box = document.getElementById('input_box') // 获取对象 

        //判断是否是苹果手机自代浏览器
        if(/Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)){
          this.box_height = true; //input_box+'px';
        }

        msg.scrollTop = msg.scrollHeight // 滚动高度
        
      })
    },

    /*******************************************/
    //图片发送
    uploadIMG(e) {
      //console.log(e);
      let self = this;
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      let picavalue = files[0];
      //console.log(picavalue);
      if (picavalue.size / 1000 > 20000) {
        this.$message({
          message: "图片过大不支持上传",
          type: "warning"
        });
      } else {
        this.$public.imgPreview(picavalue, function(imgSrc,formData) {
          // let img = imgSrc;

          // 数据结构请求
          self.post('api/index/upload/uploadImg',formData).then(res=>{
            // console.log(res.data.code)
            if(res.data.code == 1){  
              let type = 'toRobot';        
              let data = {};
              let obj = {
                text:'',
                img:res.data.data.src,
                type:''
              }
              if(self.link_success){
                //和人工聊天发送图片
                data = {
                  from_name:self.user_info.name,
                  content:JSON.stringify(obj),
                  from_id:self.user_info.id,
                  avatar:'',
                  to_id:self.service_info.id,
                  to_name:self.service_info.name,
                  conversationId:self.conversationId,
                }
                type = 'chatMessage';
                //本地储存
                self.chat.push({
                  type:'user',
                  content:{img:res.data.data.src}
                });
              }else{
                //和机器发送图片
                data={
                  groups_id:'1',
                  robot_name:res.data.data.src,
                  robotgroups_id:'1',
                }
                type = 'toRobot';
                //本地储存
                self.robot.push({
                  type:'user',
                  content:{img:res.data.data.src}
                });
              }
              self.socket_end(JSON.stringify({type,data}))
            }
          })
        });
      }
    },


    /*******************************************/
    // 激活
    // 时间
    // 获取时刻时间
    newDateTime(){
      let time = new Date()
      let year = time.getFullYear();
      let month = time.getMonth();
      let date = time.getDate();
      let hours = time.getHours();
      let min = time.getMinutes();
      let getSeconds = time.getSeconds();
      this.newtime = year + '-' 
      + (month<10?'0' + month:month) + '-'
      + (date<10?"0" + date:date) + '  ' 
      + (hours<10?'0' + hours:hours) + ':' 
      + (min<10?'0' + min:min)
    },

    // /*******************************************/
    // // 基本功能
    // inputNumFun() {
    //   //input换行判断
    //   if (this.text_info.length == 0) {
    //     this.inputNum = 1;
    //   }
    //   if (this.text_info.length > this.inputLength) {
    //     if (this.text_info.length % 24 == 0) {
    //       this.inputNum++;
    //       this.inputLength = this.input.length;
    //     }
    //   } else if (this.text_info.length < this.inputLength) {
    //     if (this.text_info.length % 24 == 0) {
    //       this.inputNum--;
    //       this.inputLength = this.text_info.length;
    //     }
    //   }
    // },

    /*******************************************/
    //手机弹窗处理
    inputShow(e) {
       console.log('a')
      let ua = navigator.userAgent.toLowerCase();
      if (ua.match(/iPhone\sOS/i) == "iphone os") {
        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
       
        setTimeout(() => {
         document.body.scrollTop = document.body.scrollHeight-(nowClientHeight/2)
        }, 200);
      } else {
        setTimeout(function() {
          e.target.scrollIntoView({ behavior: "smooth", block: "end" });
        }, 100);
      }
    },

    /*******************************************/
    //评价状态
    evaluateClick(e, txt,type) {
      this.evaluateBox.grade = e;
      this.evaluateBox.txt = txt;
      this.evaluateBox.type = type
      //console.log(this.evaluateBox);
    },

    /*******************************************/
    // 表情包开关
    faceClick() {
      this.meme = !this.meme;
    },

    /*******************************************/
    //当表情被点击
    memeImg(i) {
      this.text_info = this.text_info + "#" + this.frceArr[i] + "/";
      //this.text_info = this.text_info + '<img  :src="' + require(`@/assets/${i}.gif`) +'"/>';
      console.log( this.text_info);
    },

    /*******************************************/
    //验证码
    initialLoginCode() {
      this.loginCode = "";
      for (let i = 1; i <= 4; i++) {
        this.loginCode =
          this.loginCode + frce.arr[Math.floor(Math.random() * 32)];
      }
    },

    /*******************************************/
    //评价框关闭
    evaluateEsc() {
      // 头部
      let obj = {
          headers:{
            'Content-Type' :'application/x-www-form-urlencoded',
            'apiToken' : this.setApiToken('putevaluate','evaluate',this.currTime,'index')
          }
        }
      // 参数
      let pram = {
        'evaluateId' : this.evaluateBox.type ,
        'conversationId' :'40',
        'evaluateContent' : this.evalArea
      }
      this.$axios.post('/api/index/evaluate/putEvaluate',pram,obj).then(res =>{
        if(res.data.code == 1){
        this.evaluateShow = false;
        this.bottomShow = false;
        this.hintSwitch.evaluateOnOff = true;
        }
      })            

    },

    /* ****************获取聊天次数****************** */
    getChatNum(){
      let obj = {
        headers:{
          'Content-Type' :'application/x-www-form-urlencoded',
          'apiToken' : this.setApiToken('minround','evaluate',this.currTime,'index')
        }
      }; 
      this.$axios.post('/api/index/evaluate/minRound','',obj).then(res =>{
        console.log('r1111es',res)
        if(res.data.code == 1){
          this.chatNum = res.data.data.systemconfig_data
        }
      })
    },
    // 留言知识库返回到主页
    returnIndex(data){
      this.knowledge = data
    }

  },

  /**
   * 组件挂载阶段
   */
  created() {
    this.frceArr = frce.frce;
    this.initialLoginCode();
  },

  /**
   * 视图挂载前
   */
  mounted() {
    this.source.appuid = this.$public.getQueryString('appuid');
    this.source.appid = this.$public.getQueryString('appid');
    
    //页面初始化获取系统时间第一步
    //console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
    this.get('api/index/index/systime').then(res=>{
      if(res.data.code ==1){
        this.currentTime = res.data.data.time.split(' ')
        // console.log( this.currentTime)
       this.currentTime[0] = (new Date( this.currentTime[0].replace(/-/g,'/')).getTime()) /1000;

        // console.log( this.currentTime[0] );
        this.apiToken = this.$md5('customer-service'+this.currentTime[0]+window.location.origin);
        //匿名注册
        this.registered();
        //获取机器人热门问题
        this.getProblem();
      }
    })


    let _this = this;
    let time = setInterval(time => {
      if (_this.timers) {
        _this.initialLoginCode();
      } else {
        clearInterval(time);
      }
    }, 1000 * 16);
    
  

  },
  // 计算
  computed: {
    inputmsg() {
      return this.text_info;
    }
  },
  // 监听
  watch: {},
  // 组件生命周期结束销毁阶段
  beforeDestroy() {
    this.timers = false;
  }
};
</script>

<style scoped>
/* 聊天 */
.memeImg {
  width: 0.6rem;
  height: 0.6rem;
  margin: 0.15rem 0.4rem;
}
.dialogueA {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}
.dialogueB {
  padding-right: 0.3rem;
  padding-left: 0.3rem;
}
.left {
  position: relative;
  z-index: 99;
  background: #fff;
}
.left::after {
  position: absolute;
  content: "";
  display: inline-block;
  left: -0.08rem;
  top: 0.2rem;
  width: 0.125rem;
  height: 0.2rem;
  background: #fff;
  transform: skewX(30deg);
  z-index: -1;
  border-left: 0.02rem solid #dfdfdf;
  border-top: 0.02rem solid #dfdfdf;
}
.right {
  position: relative;
  z-index: 99;
  background: #5ea0f7;
  border: 0.02rem solid #5ea0f7;
}
.right::after {
  position: absolute;
  content: "";
  display: inline-block;
  right: -0.07rem;
  top: 0.2rem;
  width: 0.125rem;

  height: 0.2rem;
  background: #5ea0f7;
  transform: skewX(-30deg);
  z-index: -1;
  border-left: 0.02rem solid #5ea0f7;
  border-top: 0.02rem solid #5ea0f7;
}
.service {
  width: 100%;
  color: #555;
  font-size: 0.28rem;
  padding-top: 1rem;
  background: #f5f5f5;
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;
  height: 1rem;
  background: linear-gradient(
    90deg,
    rgba(22, 84, 209, 1) 0%,
    rgba(9, 52, 173, 1) 100%
  );
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  font-size: 0.34rem;
  color: #fff;
  padding: 0 0.3rem;
}
.main {
  height: 83vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 0.3rem;
}
.btn {
  display: inline-block;
  padding: 0 0.36rem;
  text-align: center;
  line-height: 0.4rem;
  background: rgba(221, 221, 221, 1);
  border-radius: 0.3rem;
  color: #fff;
  font-size: 0.24rem;
  max-width: 6rem;
  margin: 0 auto;
  margin-top: 0.3rem;
}
.btn .click {
  color: #5ea0f7;
}
.btnRouter {
  color: #5ea0f7;
}
.systemDialogue {
  min-height: 0.8rem;
  width: 100%;
}
.manUserDialogue {
  min-height: 1rem;
}
.manPlatformDialogue {
  min-height: 1rem;
}
.user {
  padding: 0.2rem;
  display: inline-block;
  border-radius: 0.1rem;
  font-size: 0.28rem;
  color: #fff;
}
.HeadPortrait {
  width: 1rem;
  height: 1rem;
  /* background: #ddd; */
  border-radius: 0.1rem;
}

.HeadPortrait img {
  width: 100%;
  height: 100%;
}

.icon {
  width: 0.32rem;
  height: 0.32rem;
  margin-right: 0.4rem;
}
.customerService {
  background: #ffffff;
  padding: 0.2rem;
  display: inline-block;
  border-radius: 0.1rem;
  font-size: 0.28rem;
  border: 1px solid rgba(223, 223, 223, 1);
}
.customerService {
  /* min-height: 1rem; */
}
.system {
  width: 100%;
  border: 0.01rem solid rgba(223, 223, 223, 1);
  border-radius: 0.1rem;
}
div /deep/ .yd-accordion-head {
  /* border-radius: 0.1rem; */
  border-bottom: 0.01rem solid rgb(238, 238, 238);
  padding: 0 0.2rem;
}
div /deep/ .yd-accordion-title , div /deep/ .yd-accordion-head-arrow{
  min-height: 0.8rem !important;
}

div /deep/ .yd-textarea textarea {
  -webkit-user-select: auto;
}
.footer {
  min-height: 1.2rem;
  box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
  background: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
}
.input {
  width: 60%;
  min-height: 1.2rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  border: none;
  padding-right: 0.3rem;
  padding-left: 0.3rem;
  font-size: 0.28rem;
}
.send {
  width: 40%;
  position: absolute;
  right: 0;
  top: 0;
  background: #fff;
  height: 1.2rem;
}
.memeBox {
  height: 3rem;
  width: 100%;
}
.send img {
  margin-right: 0.4rem;
}
.artificial {
  margin-top: 0.3rem;
  border: 0.01rem solid #dfdfdf;
  background: #fff;
  border-radius: 0.1rem;
  padding: 0 0.2rem;
}
div /deep/ .yd-accordion-head-arrow:after {
  border: none;
  width: 0.3rem;
  height: 0.3rem;
  background: url("../assets/addright.png") no-repeat;
  background-size: 100% 100%;
  transform: rotate(0deg);
}
div /deep/ .yd-accordion-head-arrow.yd-accordion-rotated:after {
  transform: rotate(-270deg);
}
div /deep/ .yd-accordion {
  border-radius: 0.1rem;
}
div /deep/ .yd-accordion-content {
  border-radius: 0.1rem;
}
.imgSrc img {
  width: 1.2rem;
}
.leftHader {
  height: 1rem;
  background: linear-gradient(
    90deg,
    rgba(22, 84, 209, 1) 0%,
    rgba(9, 52, 173, 1) 100%
  );
  box-shadow: 0 0.03rem 0.03rem rgba(0, 0, 0, 0.2);
  padding: 0 0.3rem;
}
.leftMain-top {
  margin-top: 0.4rem;
  font-size: 0.28rem;
  line-height: 0.45rem;
  padding: 0 0.3rem;
  color: #666;
}
.leftMain-top span {
  color: #999;
}
.leftMain-top > div {
  width: 50%;
}
.leftMain-center {
  margin-top: 0.3rem;
  color: #666;
  line-height: 0.5rem;
}
.leftMain-chenter span {
  color: #999;
  font-size: 0.28rem;
}
.evaluate {
  height: 1.7rem;
  background: #fff;
  border: 0.01rem solid #ddd;
  border-radius: 0.1rem;
  color: #666;
  margin-top: 0.3rem;
}
.evaluateBtn {
  width: 1.4rem;
  height: 0.6rem;
  border: none;
  background: #f04992;
  color: #fff;
  border-radius: 0.1rem;
}
div /deep/ .yd-popup {
  border-radius: 0.2rem 0.2rem 0 0;
}
div /deep/ .yd-popup-content {
}
.evaluatebtn > div p {
  height: 50%;
  width: 100%;
  text-align: center;
  margin-top: 0.14rem;
}
.evaluatebtn > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.evaluateBox {
  margin: 0 0.2rem;
  height: 1.5rem;
  border: 0.01rem solid #ddd;
  border-radius: 0.1rem;
  background: #f5f5f5;
}
.evaluateBox textarea {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  border: none;
  border-radius: 0.1rem;
  padding: 0.2rem;
  color: #999;
  font-size: 0.28rem;
}
.sub {
  margin: 0 0.2rem;
  background: linear-gradient(
    90deg,
    rgba(22, 84, 209, 1) 0%,
    rgba(9, 52, 173, 1) 100%
  );
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  height: 1rem;
  font-size: 0.34rem;
  color: #fff;
  border-radius: 0.1rem;
  margin-top: 0.4rem;
}
div /deep/ .yd-popup-content {
  background: #fff;
  border-radius: 0.1rem;
}
.loginInput {
  height: 0.8rem;
  border: 0.01rem solid #ddd;
  background: #f5f5f5;
  border-radius: 0.1rem;
  margin-top: 0.5rem;
  padding: 0.2rem;
  font-size: 0.28rem;
  margin: 0.2rem;
  margin-top: 0.5rem;
  width: 94%;
  color: #999;
}

/* 留言 */
.leave-header {
  height: 1rem;
  background: linear-gradient(
    90deg,
    rgba(22, 84, 209, 1) 0%,
    rgba(9, 52, 173, 1) 100%
  );
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 0.34rem;
  padding: 0 0.3rem;
}
.leave-main {
  height: 10rem;
  background: #f5f5f5;
  font-size: 0.28rem;
  padding: 0.3rem 0.3rem 0.2rem 0.3rem;
}
.leave-main > div {
  height: 1.3rem;
  margin-bottom: 0.2rem;
}
.leave-main > div input {
  height: 0.8rem;
  border: 0.01rem solid #ddd;
  border-radius: 0.1rem;
  background: #fff;
  padding: 0.2rem;
  width: 100%;
  margin-top: 0.1rem;
}
.leave-main-txt {
  background: #fff;
  padding: 0.2rem;
  border: 0.01rem solid #ddd;
  border-radius: 0.1rem;
}
.imgMsg {
  height: 1.5rem;
  padding: 0 0.2rem;
  margin-top: 0.1rem;
  font-size: 0.24rem;
  background: #fff;
  border: 0.01rem solid #ddd;
  border-radius: 0.1rem;
}
.yd-cell-box{
  width: 60%;
  min-height: 1.2rem;

    border: none;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
 
}
div /deep/ .yd-textarea>textarea{
  box-sizing: border-box;
  height: auto;
  min-height:1.2rem;
  font-size: 0.28rem;
  padding-top: 0.4rem;
}
.yd-textarea{
  padding: 0;
}
.yd-cell-box{
  margin: 0;
}
.yd-cell-item{
  padding: 0;
}
div /deep/ .yd-cell:after{
  height: 0;
}
div /deep/ .yd-textarea-counter{
  display: none;
}

/* 
*留言知识库
 */

</style>