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

<template>
  <div>
    <!-- 聊天 -->
    <div class="service" v-if="!knowledge">
      <!-- 头部信息 -->
      <div class="header row allAlignment item-center">

        <div class="row item-center" v-if="!link_success">
          <img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png" @click="leftShow = true">
          <img class="logo" :src="img_http + logo" alt="">
          <p>{{service_info.name}}</p>
          <span style="margin-left: 5px;"><img src="@/assets/on_icon.png" alt=""></span>
        </div>
        <div class="row item-center" v-else>
          <img class="icon" style="margin-right:.2rem;" src="@/assets/Service1.png" @click="leftShow = true">
          <img class="logo" :src="img_http + logo" alt="">
          <p>{{service_info.name}}</p>
          <span v-if="service_on" style="margin-left: 5px;"><img src="@/assets/on_icon.png" alt=""></span>
          <span v-if="!service_on" style="margin-left: 5px;"><img src="@/assets/off_icon.png" alt=""></span>
        </div>

        <div class="row">
          <yd-button v-if="isExit" color="#fff" bgcolor="#1d57dd" class="exit" size="mini" type="primary"
                     @click.native="is_exit()">退出聊天
          </yd-button>
          <img class="icon-msg" v-show=" (chat.length -1) > chatNum " @click="is_show_evaluate()" src="@/assets/Service2.png">
          <!--<img class="icon-msg"  @click="is_show_evaluate()" src="@/assets/Service2.png">-->
          <img class="icon-msg" @click="knowledge = true,flag = false" src="@/assets/leaveSwitch.png" v-if="!isExit">
        </div>
      </div>
      <div class="main" id="main">

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

          <!-- 系统消息下拉选择 -->
          <div class="artificial" v-if="problem.length > 0 && welcome.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 == 'error'" class="row allAlignment"
                 style="margin-top:.3rem;">
              <div class="HeadPortrait row center">
                <img v-if="item.type == 'error'" :src="require('@/assets/headAdvent.png')">
              </div>
              <div class="messageWindow dialogueA col-w">
                <!-- <div v-if="item.type == '1001'" class="customerService left"
                   v-html="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> -->
                <div v-if="item.type == 'error'" class="customerService left">{{item.content.text}}
                  <div style="color:#5EA0F7;padding-left:.1rem;cursor:pointer;" @click="connectionService">转人工客服</div>
                </div>
                <!-- </div> -->
              </div>
              <div class="HeadPortrait row center">
                <img v-if="item.type == 'user'"
                     :src="require('@/assets/timg.jpg') ">
              </div>
            </div>


            <!-- 和机器人会话互动 -->
            <div v-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/headAdvent.png')">
              </div>
              <div class="messageWindow dialogueA col-w"
                   :style="item.type == 'user'?'text-align: right;':''">
                <div v-if="item.type == 'service'" class="customerService left"
                     v-html="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>
                  <div v-else v-html="item.content"></div>
                </div>
              </div>
              <div class="HeadPortrait row center">
                <img v-if="item.type == 'user'"
                     :src="require('@/assets/timg.jpg') ">
              </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">
          <!--历史消息-->
          <div v-if="showHistory" v-for="item in hisSviceChat">
            <!-- 客服信息 -->
            <div v-if="item.from_id.startsWith('KF')">
              <div style="width: 100%;text-align: center;">
                <span v-if="item.time_line">{{item.time_line}}</span>
              </div>
              <div class="row allAlignment" style="margin-top:.3rem;margin-top: 0.3rem;">
                <div class="HeadPortrait row center">
                  <img v-if="service_info.avatar == '' " :src="avatar_imgs">
                  <img v-if="service_info.avatar != ''"
                       :src="img_http + service_info.avatar ? img_http + service_info.avatar : 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>
                    <div v-html="item.content.text" v-else></div>
                  </div>
                </div>
                <div class="HeadPortrait row center">

                </div>
              </div>
            </div>
            <!-- 用户信息 -->
            <div v-else>
              <div style="width: 100%;text-align: center;margin-top: 0.3rem;">
                <span v-if="item.time_line">{{item.time_line}}</span>
              </div>
              <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-html="item.content.text" v-else></span>
                  </div>
                </div>
                <div class="HeadPortrait row center">
                  <img :src="require('@/assets/timg.jpg') ">
                </div>
              </div>
            </div>
          </div>

          <div v-for="(item,index) in chat" :key="index">

            <!-- 历史消息 -->
            <div class="promptBox" v-if="item.type == 'historyMsg'">
              <div class="prompt help">
                <span>{{historyMsgtext}}</span>
              </div>
            </div>
            <!-- 客服会话 -->
            <div v-if="item.type == 'service'">
              <div style="width: 100%;text-align: center;margin-top: 0.3rem;">
                <span v-if="item.time ">{{item.time}}</span>
              </div>
              <div class="row allAlignment" style="margin-top:.3rem;">
                <div class="HeadPortrait row center">
                  <img id="123" v-if="service_info.avatar == '' " :src="avatar_imgs">
                  <img id="321" v-if="service_info.avatar != '' "
                       :src="img_http + service_info.avatar ? img_http + service_info.avatar : img_http + service_info.avatar">
                </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>
                    <div v-html="item.content.text" v-else></div>
                  </div>
                </div>
                <div class="HeadPortrait row center">

                </div>
              </div>
            </div>

            <!-- 用户会话 -->
            <div v-if="item.type == 'user'">
              <div style="width: 100%;text-align: center;margin-top: 0.3rem;">
                <span v-if="item.time">{{item.time}}</span>
              </div>
              <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-html="item.content.text" v-else>{{item.content.text}}</span>
                  </div>
                </div>
                <div class="HeadPortrait row center">
                  <img v-if="item.type == 'user'"
                       :src="require('@/assets/timg.jpg') ">
                </div>
              </div>
            </div>

            <!-- 常规系统消息评价 -->
            <div class="row center " v-if="item.type== 'system' ">
              <div class="column item-center "
                   style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0;"
                   v-if="item.content.state  =='getEvaluate' && !haveEvaluation ">
                <p class="row center wrap">{{item.content.text}}</p>
                <button class="evaluateBtn" style="margin-top:.2rem;" @click="is_show_evaluate()">评价
                </button>
              </div>

              <div class="column item-center"
                   style="margin: 0.3rem 0; background: #fff; width:100% ;padding: 0.1rem 0.5rem;"
                   v-if="item.content.state  == 'closeInform' ">
                <p class="row center wrap">{{item.content.text}}</p>
              </div>


            </div>
          </div>
        </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, evaluateState = 100" 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(1)">
              <img style="width:.66rem;height:.66rem;"
                   :src="evaluateState =='1'?require('@/assets/evaluate1a.png'):require('@/assets/evaluate1.png')">
              <p>满意</p>
            </div>
          </div>
          <div style="width:33%;height:100%;" @click="evaluateClick(2)">
            <div class="row wrap center">
              <img style="width:.66rem;height:.66rem;"
                   :src="evaluateState =='2'?require('@/assets/evaluate2a.png'):require('@/assets/evaluate2.png')">
              <p>一般</p>
            </div>
          </div>
          <div style="width:33%;height:100%;" @click="evaluateClick(3)">
            <div class="row wrap center">
              <img style="width:.66rem;height:.66rem;"
                   :src="evaluateState =='3'?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">
          <img class="logo" :src="img_http + logo" alt="">
          <p style="color:#FFF;font-size:.34rem;">{{service_info.name}}</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;" v-if="service_info.avatar == ''" :src="avatar_imgs">
              <img style="width:1.8rem;height:1.8rem;" v-if="service_info.avatar != ''"
                   :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'>
        <!-- @keydown="inputNumFun()" -->
        <textarea
          id="textarea"
          v-model.trim="text_info"
          placeholder="请输入你的问题："
          maxlength="100"
        >
				</textarea>

        <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>
    <!-- 发送消息音频提示 -->
    <audio id="send" src="../../static/send.wav"></audio>
    <!-- 接收消息音频提示 -->
    <audio id="receive" src="../../static/receive.wav"></audio>
  </div>
</template>

<script>
    import "../css/index.css";
    import knowledgeLibrary from './knowledgeLibrary'
    import frce from "./frce.js";
    import avatarImgs from "./../assets/user.png"
    import defaultImgs from "./../assets/timg.jpg"

    export default {
        name: "service",
        // 模板注册
        components: {
            knowledgeLibrary
        },
        data() {
            return {
                /*-----------------------------------------------*/
                text_info: "", //输入框内容
                knowledge: false,//留言知识库开关
                leftShow: false, //左侧详细开关
                evaluateOnOff: false, //人工客服评价通知
                bottomShow: false, //底部评价弹窗开关
                meme: false, // 表情包开关
                frceArr: [], //表情包代码
                evaluateState: 100,//评价状态
                websock: null,//创建websock
                user_info: '',//用户信息
                apiToken: '',//通话调用凭证
                currentTime: '',//接口调用服务器时间
                problem: [],//机器人问题
                welcome: [],//欢迎语
                advertisement: '', //广告
                img_http: 'http://103.108.43.176:8080',//图片路径域
                //img_http:'http://192.168.2.186:8090',//图片路径域

                robot: [],//和机器人聊天临时数据
                chat: [],//人工会话
                error_num: 1001,//机器人回答超出能力之外编号
                isConnection: true,//人工分组列表开关
                //客服信息
                service_info: {
                    avatar: '/static/customer/images/robot.png',
                    job_name: '001',
                    name: '智能客服',
                    signature: ""
                },
                link_success: false,//人工链接成功
                service_on: true,
                closeByServer: false, //客服关闭会话
                serverNotOnlin: false, //客服掉线
                willOverTime: false, //超时关闭会话
                overTimeMsg: '', // 超时提示内容
                conversationId: '',//会话工单
                chatNum: 0,//触发评价按钮条件
                haveEvaluation: false,//是否已评价
                evalArea: '', //评价备注
                source: {},//来源信息
                initData: 1,//
                isTurnArtifcial: true,
                box_height: false,//苹果浏览器增加会话框高度
                logo: '',
                isExit: false,
                historyMsg: false, // 是否展示历史信息
                historyMsgtext: "", // 历史信息内容提示
                hisSviceChat: [],
                showHistory: true,
                avatar_imgs: avatarImgs,
                webTime: '',//人工会话上一次发送消息时间
                chatIndex: '',//人工会话上一次下标
                /*****************websockt心跳变量*******************/
                reconnectData: null,
                lockReconnect: false,    //避免重复连接，因为onerror之后会立即触发 onclose
                timeout: 5000,          //5s一次心跳检测
                timeoutObj: null,
                serverTimeoutObj: null,
                waitingMsg: false, // 是否显示等待排队
                serviceNotOnlineText: '',
            };
        },
        // 方法
        methods: {
            // 退出聊天
            is_exit() {
                this.socket_send(JSON.stringify({
                    type: 'kfCloseUser',
                    data: {
                        to_id: this.user_info.id,
                        kf_id: this.service_info.id,
                        group_id: this.service_info.group,
                        conversationId: this.conversationId,
                        type: 6,
                    }
                }));


                // this.websock.close()
                // this.setInit();
                // this.initWebsocket()


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

            /*******************************************/
            //初始化Websocket链接
            initWebSocket(apiToken) {
                let sock_ip = ''; // 线上
                // let sock_ip = 'ws://192.168.2.187:9101';  // 本地

                this.websock = new WebSocket("ws://103.108.43.176:9101?apiToken=" + 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() {
                console.log('我链接了');
            },

            /*******************************************/
            //连接建立失败重连
            socket_error() {
                console.log('连接建立失败重连');
                // this.initWebSocket();
                // this.setInit();
                // this.reconnect();
            },

            /*******************************************/
            //数据接收
            socket_message(e) {
                if (!e.data) return;
                const redata = JSON.parse(e.data);
                console.log(redata);
                //心跳检测
                this.heatBeat();
                //欢迎语
                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: 'error',
                            content: {text: "您的问题暂无法处理"}
                        })
                        // this.error_num++;
                    } else {
                        this.robot.push({
                            type: 'service',
                            content: {text: redata.data.content}
                        })
                    }
                    console.log(this.robot);
                    // this.automaticRolling();
                    //data
                    //this.robot =
                }


                //人工链接
                if (redata.message_type == 'connect') {
                    this.chat.splice(-1)
                    let server = {};
                    if (redata.data) {
                        server = redata.data
                    } else {
                        server = {
                            conversationId: redata.data.conversationId,
                            kf_id: redata.data.kf_id,
                            kf_name: "",
                            serverInfo: {
                                avatar: avatarImgs,
                                client_id: "",
                                group: "",
                                id: "",
                                intime: "",
                                job_name: "",
                                name: "tank",
                                signature: "",
                                status: 0,
                                task: 0,
                            }

                        }
                    }
                    this.service_on = true;
                    this.isExit = true;
                    this.link_success = true;
                    this.$dialog.loading.close();
                    this.service_info = server.serverInfo;
                    this.conversationId = server.conversationId;
                }

                // 客服掉线.
                if (redata.message_type == 'serviceoffline') {
                    this.chat.push({
                        type: 'system',
                        content: {
                            text: redata.msg,
                            state: 'closeInform',
                        }
                    })
                    this.automaticRolling();
                    this.service_on = false;
                    // let that = this;
                    // setTimeout(function () {
                    //     that.link_success = false;
                    //     that.serverNotOnlin = true;
                    //     that.closeByServer = true;
                    //     that.chat.splice(-1)
                    // },3000)

                }
                // 客服不在线请稍后再试
                if (redata.message_type == 'kfNotOnlin') {
                    this.service_on = false;
                }

                // 客服会话超时
                if (redata.message_type == 'overtime') {
                    this.willOverTime = true;
                    this.automaticRolling();
                    // this.goBack();
                    this.overTimeMsg = redata.data.content;
                }

                // 客服等待排队
                if (redata.message_type == "inqueue") {
                    this.waitingMsg = true;
                    this.automaticRolling();
                    this.waitingText = redata.content;
                }

                //人工会话回复
                if (redata.message_type == "chatMessage") {
                    // 转接的时候清除历史信息
                    // this.hisSviceChat = [];
                    // this.getHistory = false;
                    // 接收提示音
                    this.receiveAudio();
                    this.$dialog.loading.close();
                    let obj = {};
                    let isSession = false;
                    if (this.$public.isJSON(redata.data.content)) {
                        obj = JSON.parse(redata.data.content);
                        obj.text = this.turnFace(obj.text);
                        isSession = true;
                    } else {
                        obj.text = redata.data.content;
                    }

                    let thisTime = '';
                    let newTime = redata.data.time.split(':');
                    if (this.webTime) {
                        let lastTime = this.webTime.split(":");
                        if (newTime[0] == lastTime[0] && newTime[1] < (lastTime[1] + 2)) {
                            thisTime = ''
                        } else {
                            thisTime = redata.data.time;
                        }
                    } else {
                        if (isSession) {
                            thisTime = redata.data.time;
                        }
                    }
                    if (isSession) {
                        this.webTime = redata.data.time;
                    }
                    this.chat.push({
                        type: 'service',
                        time: thisTime ? thisTime : '',
                        content: obj
                    })
                    // this.setNum++;
                }
                //系统消息通知客户结束通话
                if (redata.message_type == 'closeBysever') {
                    this.setInit();
                    this.showHistory = false;
                    this.link_success = false;
                    this.isTurnArtifcial = true;
                }

                if (redata.message_type == "changeKeFuSuccess") {
                    this.$dialog.alert({
                        mes: redata.data.content
                    });
                }


                //系统消息通转人工
                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 == "getEvaluate") {
                    // this.evaluateOnOff = true;
                    // console.log( this.chat)
                    this.chat.push({
                        type: 'system',
                        content: {
                            text: redata.data.content,
                            state: 'getEvaluate',
                        }
                    })
                }

                //会话关闭前通知用户
                if (redata.message_type == 'overtime') {
                    this.chat.push({
                        type: 'system',
                        content: {
                            text: redata.data.content,
                            state: 'closeInform',
                        }
                    })
                }

                // 历史信息
                if (redata.message_type == 'toOld') {
                    // console.log(redata, '历史信息')
                    this.hisSviceChat = [];
                    let obj = redata;
                    this.historyMsgtext = obj.data.content;
                    this.chat.push({
                        type: 'historyMsg',
                        content: {
                            text: this.historyMsgtext,
                        }
                    })
                    let historyTime = '';
                    obj.data.chatLog.forEach(res => {
                        // console.log(res,'历史信息');
                        res.content = JSON.parse(res.content);
                        let time_line = this.$public.customFormatDateTime(res.time_line, '', 3);
                        // res.time_line  =
                        if (!historyTime) {
                            res.time_line = time_line
                        } else {
                            let newTime = time_line.split(':');
                            let lastTime = historyTime.split(':');
                            if (newTime[0] == lastTime[0] && newTime[1] < (lastTime[1] + 2)) {
                                res.time_line = '';
                            } else {
                                res.time_line = time_line
                            }
                        }
                        historyTime = time_line;
                        this.hisSviceChat.push(res);
                    })
                }

                //获取发送时间
                if (redata.message_type == "webTime") {
                    if (this.webTime) {
                        let newTime = redata.data.webTime.split(':');
                        let time = this.webTime.split(':');

                        if (newTime[0] * 1 > time[0] * 1) {
                            // console.log('newTime[0]')
                            this.$set(this.chat[this.chatIndex], 'time', redata.data.webTime);
                        } else if (newTime[0] * 1 == time[0] * 1 && (newTime[1] * 1 - time[1] * 1) > 2) {
                            this.$set(this.chat[this.chatIndex], 'time', redata.data.webTime);
                            // console.log('newTime[1]')
                        }
                    } else {
                        this.chat[this.chatIndex].time = redata.data.webTime;
                        // this.$set(this.chat[this.chatIndex],'time',redata.data.webTime);
                    }
                    this.webTime = redata.data.webTime
                }

                //屏幕滚动
                this.automaticRolling();
            },

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


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


            /***************************************/
            //socket重连
            reconnect() {
                if (this.lockReconnect) {       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
                    return
                }
                this.lockReconnect = true;
                this.reconnectData && clearTimeout(this.reconnectData);
                this.reconnectData = setTimeout(() => {
                    this.initWebSocket(this.apiToken);
                    //this.registered()
                    console.log('-----lail-----');
                    this.lockReconnect = false;
                }, 2000)
            },

            /*************************************/
            //心跳检测
            heatBeat() {
                this.timeoutObj && clearTimeout(this.timeoutObj);
                this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                this.timeoutObj = setTimeout(() => {
                    // console.log('发送', {type: 'ping'});
                    this.socket_send(JSON.stringify({type: 'ping'}))   //根据后台要求发送
                    this.serverTimeoutObj = setTimeout(() => {
                        // console.log('------close-------')
                        this.websock.close(); //如果 4秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
                    }, 4000);
                }, this.timeout)
            },

            /*****************************************/
            //用户匿名注册
            registered() {
                let token = localStorage.getItem('token');

                let appuid = this.$public.getQueryString('appuid');
                let tutype = this.$public.getQueryString('tutype');
                if (appuid && tutype >= 1) {
                    token = localStorage.getItem('token');
                } else if (!appuid && tutype < 1) {
                    token = localStorage.getItem('token');
                } else {
                    token = '';
                }

                let data = {
                    token: token != null ? token : '',
                    appid: this.$public.getQueryString('appid'),
                    appuid: this.$public.getQueryString('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 == 0) {
                        this.$dialog.alert({
                            mes: res.data.msg
                        });
                    } else if (res.data.code == 1) {
                        this.user_info = res.data.data;
                        // console.log(this.user_info)
                        // 游客 token
                        localStorage.setItem("token", res.data.data.token);
                        localStorage.setItem("tutype", res.data.tutype);
                        //Websocket链接

                        setTimeout(() => {
                            this.$dialog.loading.close();
                            this.initWebSocket(this.apiToken);
                        }, 2000)
                        //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(id) {
                this.group = id;
                this.$dialog.loading.open('转接中...')
                if (this.isTurnArtifcial) {
                    let data = {
                        'type': 'userInit',
                        data: {
                            'uid': this.user_info.id,
                            'name': this.user_info.name,
                            'avatar': this.user_info.avatar,
                            'group': this.group
                        }
                    }
                    this.socket_send(JSON.stringify(data));
                    this.isTurnArtifcial = false
                }
            },

            /******************************************/
            // 消息发送
            send() {
                if (this.text_info == '') return;
                let str = this.text_info;
                let formatStr = str.replace(/\n|\r\n/g, "<br>");
                let type = 'toRobot';
                let data = {};
                let obj = {
                    text: formatStr,
                    img: '',
                    type: ''
                }
                this.meme = false;
                // console.log(JSON.stringify(obj))
                //和人工发送消息
                if (this.link_success) {
                    // if(this.getHistory){
                    // 	this.getHistory = false;
                    // }
                    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.chatIndex = this.chat.length;
                    this.chat.push({
                        type: 'user',
                        time: '',
                        content: {text: this.turnFace(obj.text)}
                    })
                } else {//和机器人聊天
                    data = {
                        groups_id: '1',
                        robot_name: formatStr,
                        robotgroups_id: '1',
                    }

                    // console.log(this.turnFace(formatStr));
                    type = 'toRobot';
                    //本地存放数据
                    this.robot.push({
                        type: 'user',
                        content: this.turnFace(formatStr) //obj
                    })
                }
                this.socket_send(JSON.stringify({type, data}))
                this.text_info = '';
                this.automaticRolling();
                // console.log(data)
                this.sendAudio();
            },

            // 消息发送
            sendAudio() {
                console.log(1)
                let send = document.getElementById('send')
                send.play()
            },
            // 消息接收
            receiveAudio() {
                let receive = document.getElementById('receive')
                receive.play();
            },

            /*******************************************/
            //获取转接人工客服列表
            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];
                const isJPG = file.type == 'image/jpeg' || 'image/jpg' || 'image/png' || 'image/svg';
                const isLt2M = picavalue.size / 1000 / 1000 > 2;

                if (isLt2M) {
                    this.$dialog.notify({
                        mes: '图片过大不支持上传哦！',
                        timeout: 2000,
                    });
                } else if (!isJPG) {
                    this.$dialog.notify({
                        mes: '只能上传图片哦！',
                        timeout: 2000,
                    });
                } 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_send(JSON.stringify({type, data}))
                                self.automaticRolling();
                            }
                        })
                    });
                }
            },

            /*******************************************/
            //手机弹窗处理
            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);
                }
            },

            /******************文字信息转表情******************/
            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.frceArr.length; i++) {
                        let expText = e.slice(1, e.length - 1);
                        if (expText == this.frceArr[i]) {
                            imgsrc = '<img class="hover" src="' + require(`@/assets/${i}.gif`) + '"/>'
                            break;
                        }
                    }

                    data = data.replace(new RegExp(`\\#\\[${e.substring(2, e.length - 2)}\\]\\/`, 'g'), imgsrc);
                })
                return data;
            },


            /*******************************************/
            // 表情包开关
            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)];
            //   }
            // },

            /********************************************/
            //显示隐藏评价
            is_show_evaluate() {
                if (this.evaluateState == 100) {
                    this.bottomShow = true;
                } else {
                    if (!this.haveEvaluation) {
                        this.bottomShow = false;
                    } else {
                        this.$dialog.notify({
                            mes: '亲，您已经评价了...',
                            timeout: 5000,
                            callback: () => {
                                //console.log('我走咯！');
                            }
                        });
                    }
                }
            },

            /*******************************************/
            //切换评价状态
            evaluateClick(type) {
                // console.log(type);
                this.evaluateState = type;
            },

            /*******************************************/
            //提交评价信息
            evaluateEsc() {
                console.log();
                if (this.evaluateState != 100) {
                    this.bottomShow = false;
                    this.haveEvaluation = true; // 标识已评价
                    this.socket_send(JSON.stringify({
                        type: 'evaluate', data: {
                            evaluate_id: this.evaluateState,
                            conversationId: this.conversationId,
                            // evaluate_content:''
                        }
                    }))

                    this.$dialog.notify({
                        mes: '感谢你的评价！',
                        timeout: 2000,
                        callback: () => {
                            //console.log('我走咯！');
                        }
                    });
                } else {
                    this.$dialog.notify({
                        mes: '亲，请选择评价类型...',
                        timeout: 2000,
                        callback: () => {
                            //console.log('我走咯！');
                        }
                    });
                }
            },

            /************************************************/
            //人工聊天初始化
            setInit() {
                this.haveEvaluation = false;
                this.chat = [];
                this.evaluateState = 100;
                this.hisSviceChat = [];
                this.meme = false
                // this.frceArr = [];//表情包代码
                this.isConnection = true;
                this.isExit = false;
                this.service_info = {
                    avatar: '/static/customer/images/robot.png',
                    job_name: '001',
                    name: '智能客服',
                    signature: " "
                }
            },

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

        },

        /**
         * 视图挂载前
         */
        mounted() {
            this.source.appuid = this.$public.getQueryString('appuid');//用户标识
            this.source.appid = this.$public.getQueryString('appid');//用户来源
            this.frceArr = frce.frce;
            //console.log(this.source);
            //页面初始化获取系统时间第一步
            //console.log(this.$md5('userwordscustomer-servicewords1562169600service'));
            this.$dialog.loading.open('网络连接中...')

            this.$axios.get('api/index/index/systime?t=' + 100).then(res => {
                if (res.data.code == 1) {
                    this.logo = res.data.data.logo;
                    this.currentTime = res.data.data.time.split(' ')
                    this.currentTime[0] = (new Date(this.currentTime[0].replace(/-/g, '/')).getTime()) / 1000;

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

        destroyed() {
            this.setInit();
            this.websock.close() //离开路由之后断开websocket连接
            this.lockReconnect = true;
            clearTimeout(this.reconnectData);      //离开清除 timeout
            clearTimeout(this.timeoutObj);         //离开清除 timeout
            clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
        },
        // 计算
        computed: {
            inputmsg() {
                return this.text_info;
            }
        },
        // 监听
        watch: {},
        // 组件生命周期结束销毁阶段
        beforeDestroy() {
            this.timers = false;
        }
    };
</script>

<style scoped>
  #textarea {
    margin: 15px;
    width: 50%;
    border: none;
  }

  .logo {
    margin: 0 0.1rem;
    width: 0.4rem;
    height: 0.4rem;
  }

  /* 聊天 */
  .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;
  }

  .icon-msg {
    width: 0.32rem;
    height: 0.32rem;
    margin: 0 0.1rem;
  }

  .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 {
    vertical-align: middle;
    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;
    border-bottom: 0.01rem solid rgb(221, 221, 221);
  }

  div /deep/ .yd-textarea > textarea {
    height: 1.2rem;
    font-size: 0.28rem;
    padding-top: 0.2rem;
  }

  .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;
  }


  .promptBox {
    display: flex;
    justify-content: center;
    height: 26px;
    margin: 10px 0 10px;
    /* line-height: 26px; */
  }

  .promptBoxH {
    display: flex;
    justify-content: center;
    height: 50px;
    margin: 10px 0 10px;
    /* line-height: 26px; */
  }

  .prompt {
    line-height: 25px;
    text-align: center;
    background: #DDDDDD;
    border-radius: 30px;
    width: 140px;
    color: #FFFFFF;
    font-size: 12px;
  }

  .help {
    width: 80%;
  }

  .help .prompt {
    width: 100%;
  }

  /*
  *留言知识库
   */

</style>