mirror of
https://gitee.com/270580156/weiyu.git
synced 2026-05-15 19:58:00 +00:00
1166 lines
61 KiB
HTML
1166 lines
61 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
|
||
<title>萝卜丝 - 智能客服</title>
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="https://cdn.kefux.com/assets/css/vendor/elementui/2.15.9/theme-chalk/index.css">
|
||
<style>
|
||
.param {
|
||
color: gray;
|
||
font-style: italic;
|
||
font-size: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body style="margin-left: 0px;">
|
||
|
||
<div id="app">
|
||
<h1 style="text-align: center;"><a href="https://www.kefux.com" target="_blank">萝卜丝智能客服</a></h1>
|
||
<h4 style="text-align: center;">让获客更简单</h4>
|
||
<h5 style="text-align: center; color: gray;">此界面内容尚处于内测阶段</h5>
|
||
<el-form ref="iconForm" label-width="280px">
|
||
<el-form-item label="对话类型">
|
||
<el-radio-group v-model="type" @change="reinit">
|
||
<el-radio label="workGroup">技能组对话</el-radio>
|
||
<el-radio label="appointed">指定一对一对话</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：type，值：workGroup, appointed</span>
|
||
</el-form-item>
|
||
<el-form-item label="技能组" v-if="type === 'workGroup'">
|
||
<el-radio-group v-model="workGroupWid" @change="onWorkGroupChange">
|
||
<el-radio v-for="workGroup in workGroups" :label="workGroup.wid">{{ workGroup.nickname }}</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：wid/workGroupWid</span>
|
||
</el-form-item>
|
||
<el-form-item label="指定客服" v-if="type === 'appointed'">
|
||
<el-radio-group v-model="agentUid" @change="reinit">
|
||
<el-radio v-for="agent in agents" :label="agent.uid">{{ agent.nickname }}</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：aid/agentUid</span>
|
||
</el-form-item>
|
||
<el-form-item label="漂浮框形状">
|
||
<el-radio-group v-model="shape" @change="reinit">
|
||
<el-radio label="round">圆形</el-radio>
|
||
<el-radio label="rectangle">长方形</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：shape</span>
|
||
</el-form-item>
|
||
<el-form-item label="语言">
|
||
<el-radio-group v-model="lang" @change="reinit">
|
||
<el-radio label="cn">汉语</el-radio>
|
||
<el-radio label="en">English</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：lang</span>
|
||
</el-form-item>
|
||
<!-- TODO: 替换icon，提供几个可选项 -->
|
||
<el-form-item label="漂浮框按钮文字" v-if="shape === 'rectangle'">
|
||
<el-input v-model="buttonText" placeholder="请输入内容" style="width: 220px;"></el-input>
|
||
<el-button size="medium" round @click="reinit">更新</el-button>
|
||
<span class="param">参数：buttonText</span>
|
||
</el-form-item>
|
||
<el-form-item label="漂浮框文字颜色" v-if="shape === 'rectangle'">
|
||
<el-color-picker v-model="buttonColor" @change="reinit"></el-color-picker>
|
||
<span class="param">参数：buttonColor</span>
|
||
</el-form-item>
|
||
<el-form-item label="漂浮框背景颜色">
|
||
<el-color-picker v-model="buttonBackground" @change="reinit"></el-color-picker>
|
||
<span class="param">参数：buttonBackground</span>
|
||
</el-form-item>
|
||
<el-form-item label="对话框标题文字颜色">
|
||
<el-color-picker v-model="bannerColor" @change="reinit"></el-color-picker>
|
||
<span class="param">参数：bannerColor</span>
|
||
</el-form-item>
|
||
<el-form-item label="对话框标题背景颜色">
|
||
<el-color-picker v-model="bannerBackground" @change="reinit"></el-color-picker>
|
||
<span class="param">参数：bannerBackground</span>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="漂浮框边框" v-if="shape === 'rectangle'">
|
||
<el-radio-group v-model="border" @change="reinit">
|
||
<el-radio label="border">有</el-radio>
|
||
<el-radio label="none">无</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item> -->
|
||
<el-form-item label="漂浮框位置">
|
||
<el-radio-group v-model="position" @change="reinit">
|
||
<el-radio label="right">右边</el-radio>
|
||
<el-radio label="left">左边</el-radio>
|
||
<!-- <el-radio label="middle">居中</el-radio> -->
|
||
</el-radio-group>
|
||
<span class="param">参数：position</span>
|
||
</el-form-item>
|
||
<!-- <el-input v-model="rightMargin" placeholder="" style="width: 150px;" @change="reinit" disabled></el-input> -->
|
||
<!-- <el-button size="medium" round @click="reinit" disabled>更新</el-button> -->
|
||
<el-form-item label="漂浮框右边距离" v-if="position === 'right'">
|
||
<el-radio-group v-model="rightMargin" @change="reinit">
|
||
<el-radio label="10">10px</el-radio>
|
||
<el-radio label="15">15px</el-radio>
|
||
<el-radio label="20">20px</el-radio>
|
||
<el-radio label="25">25px</el-radio>
|
||
<el-radio label="30">30px</el-radio>
|
||
<el-radio label="40">40px</el-radio>
|
||
<el-radio label="50">50px</el-radio>
|
||
<el-radio label="60">60px</el-radio>
|
||
<el-radio label="70">70px</el-radio>
|
||
<el-radio label="80">80px</el-radio>
|
||
<!-- <el-radio label="90">90px</el-radio> -->
|
||
<!-- <el-radio label="100">100px</el-radio> -->
|
||
</el-radio-group>
|
||
<span class="param">参数：rightMargin</span>
|
||
</el-form-item>
|
||
<el-form-item label="漂浮框左边距离" v-if="position === 'left'">
|
||
<el-radio-group v-model="leftMargin" @change="reinit">
|
||
<el-radio label="10">10px</el-radio>
|
||
<el-radio label="15">15px</el-radio>
|
||
<el-radio label="20">20px</el-radio>
|
||
<el-radio label="25">25px</el-radio>
|
||
<el-radio label="30">30px</el-radio>
|
||
<el-radio label="40">40px</el-radio>
|
||
<el-radio label="50">50px</el-radio>
|
||
<el-radio label="60">60px</el-radio>
|
||
<el-radio label="70">70px</el-radio>
|
||
<el-radio label="80">80px</el-radio>
|
||
<!-- <el-radio label="90">90px</el-radio> -->
|
||
<!-- <el-radio label="100">100px</el-radio> -->
|
||
</el-radio-group>
|
||
<span class="param">参数：leftMargin</span>
|
||
</el-form-item>
|
||
<el-form-item label="漂浮框下边距离">
|
||
<el-radio-group v-model="bottomMargin" @change="reinit">
|
||
<el-radio label="10">10px</el-radio>
|
||
<el-radio label="15">15px</el-radio>
|
||
<el-radio label="20">20px</el-radio>
|
||
<el-radio label="25">25px</el-radio>
|
||
<el-radio label="30">30px</el-radio>
|
||
<el-radio label="40">40px</el-radio>
|
||
<el-radio label="50">50px</el-radio>
|
||
<el-radio label="60">60px</el-radio>
|
||
<el-radio label="70">70px</el-radio>
|
||
<el-radio label="80">80px</el-radio>
|
||
<!-- <el-radio label="90">90px</el-radio> -->
|
||
<!-- <el-radio label="100">100px</el-radio> -->
|
||
</el-radio-group>
|
||
<span class="param">参数：bottomMargin</span>
|
||
</el-form-item>
|
||
<el-form-item label="对话框位置">
|
||
<el-radio-group v-model="positionWindow" @change="reinit">
|
||
<el-radio label="right">右边</el-radio>
|
||
<el-radio label="left">左边</el-radio>
|
||
<el-radio label="middle">居中</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：positionWindow</span>
|
||
</el-form-item>
|
||
<el-form-item label="对话窗口宽度">
|
||
<el-radio-group v-model="column" @change="reinit">
|
||
<el-radio label="one">一列</el-radio>
|
||
<el-radio label="two">两列</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：column</span>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="右侧列显示内容" v-if="isDebug && (column === 'two')">
|
||
<el-radio-group v-model="columnTwoType" @change="reinit">
|
||
<el-radio label="faq">常见问题</el-radio>
|
||
<el-radio label="contact">客服名片</el-radio>
|
||
<el-radio label="selfdefine">自定义内容</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：columnTwoType</span>
|
||
</el-form-item> -->
|
||
<el-form-item label="历史记录">
|
||
<el-radio-group v-model="history" @change="reinit">
|
||
<el-radio label="0">不显示</el-radio>
|
||
<el-radio label="1">显示</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：history</span>
|
||
</el-form-item>
|
||
<el-form-item label="机器人问题优先显示分类">
|
||
<el-radio-group v-model="v2robot" @change="reinit">
|
||
<el-radio label="0">否</el-radio>
|
||
<el-radio label="1">是</el-radio>
|
||
</el-radio-group>
|
||
<span class="param">参数：v2robot</span>
|
||
</el-form-item>
|
||
<!-- 自定义用户名、昵称、头像, TODO: 待补充说明 -->
|
||
<el-form-item label="自定义用户名">
|
||
<el-checkbox v-model="selfDefine" @change="reinit">自定义用户名、昵称、头像</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="测试用户" v-if="selfDefine">
|
||
<el-radio-group v-model="userSwitch" @change="switchTestUser">
|
||
<el-radio label="boy">测试用户1男</el-radio>
|
||
<el-radio label="girl">测试用户2女</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="用户名" v-if="selfDefine">
|
||
<el-input v-model="username" placeholder="请输入用户名" style="width: 220px;"></el-input>
|
||
<span class="param">参数：username</span>
|
||
</el-form-item>
|
||
<el-form-item label="昵称" v-if="selfDefine">
|
||
<el-input v-model="nickname" placeholder="请输入昵称" style="width: 220px;"></el-input>
|
||
<span class="param">参数：nickname</span>
|
||
</el-form-item>
|
||
<el-form-item label="头像" v-if="selfDefine">
|
||
<el-input v-model="avatar" placeholder="请输入头像网址" style="width: 220px;"></el-input>
|
||
<span class="param">参数：avatar</span>
|
||
<el-image :src="avatar" :preview-src-list="[avatar]" style="width: 40px; height: 40px;" />
|
||
</el-form-item>
|
||
<!-- 商品参数 TODO: 待补充说明-->
|
||
<el-form-item label="商品参数">
|
||
<el-checkbox v-model="showGoods" @change="reinit">商品参数</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="商品id" v-if="showGoods">
|
||
<el-input v-model="goods_id" placeholder="请输入商品id" style="width: 220px;"></el-input>
|
||
<span class="param">参数：goods_id</span>
|
||
</el-form-item>
|
||
<el-form-item label="商品标题" v-if="showGoods">
|
||
<el-input v-model="goods_title" placeholder="请输入商品标题" style="width: 220px;"></el-input>
|
||
<span class="param">参数：goods_title</span>
|
||
</el-form-item>
|
||
<el-form-item label="商品简介" v-if="showGoods">
|
||
<el-input v-model="goods_content" placeholder="请输入商品简介" style="width: 220px;"></el-input>
|
||
<span class="param">参数：goods_content</span>
|
||
</el-form-item>
|
||
<el-form-item label="商品价格" v-if="showGoods">
|
||
<el-input v-model="goods_price" placeholder="请输入商品价格" style="width: 220px;"></el-input>
|
||
<span class="param">参数：goods_price</span>
|
||
</el-form-item>
|
||
<el-form-item label="商品网址" v-if="showGoods">
|
||
<el-input v-model="goods_url" placeholder="请输入商品网址" style="width: 220px;"></el-input>
|
||
<span class="param">参数：goods_url</span>
|
||
</el-form-item>
|
||
<el-form-item label="商品图片" v-if="showGoods">
|
||
<el-input v-model="goods_imageUrl" placeholder="请输入商品图片" style="width: 220px;"></el-input>
|
||
<span class="param">参数：goods_imageUrl</span>
|
||
<el-image :src="goods_imageUrl" :preview-src-list="[goods_imageUrl]" style="width: 40px; height: 40px;" />
|
||
</el-form-item>
|
||
<el-form-item label="商品类别代码(可选)" v-if="showGoods">
|
||
<el-input v-model="goods_categoryCode" placeholder="请输入商品类别代码" style="width: 220px;"></el-input>
|
||
<span class="param">参数：goods_goods_categoryCode</span>
|
||
</el-form-item>
|
||
<!-- 弹窗 TODO: 待补充说明-->
|
||
<!-- <el-form-item label="自动弹窗">
|
||
<el-checkbox v-model="autoPop" @change="reinit">自动弹窗</el-checkbox>
|
||
<span class="param">参数：autoPop</span>
|
||
</el-form-item> -->
|
||
<!-- <el-form-item label="对话窗口导航文字颜色(暂未启用)">
|
||
<el-color-picker v-model="buttonBackground" disabled></el-color-picker>
|
||
</el-form-item> -->
|
||
<!-- <el-form-item label="对话窗口导航背景颜色(暂未启用)">
|
||
<el-color-picker v-model="buttonBackground" disabled></el-color-picker>
|
||
</el-form-item> -->
|
||
<el-form-item label="附言">
|
||
<el-checkbox v-model="showPostscript" @change="reinit">附言</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item label="附言内容" v-if="showPostscript">
|
||
<el-input type="textarea" placeholder="请输入附言内容" v-model="postscript" style="width: 600px;" @change="reinit"></el-input><br />
|
||
</el-form-item>
|
||
<el-form-item label="嵌入式窗口客服代码">
|
||
<el-input type="textarea" :autosize="{ minRows: 15, maxRows: 30}" placeholder="请输入内容" v-model="embedCode"
|
||
style="width: 600px;"></el-input>
|
||
<p>复制客服代码，放到自己网页的</body>标签前面</p>
|
||
<el-button class="copyEmbedBtn" size="medium" round :data-clipboard-text="embedCode" @click="handleOnCodeEmbedCopy">
|
||
复制客服代码</el-button>
|
||
<br /><br />
|
||
<el-input type="textarea" placeholder="请输入内容" v-model="embedOpen" style="width: 600px;"></el-input><br />
|
||
<span>打开聊天窗口代码</span><br />
|
||
<el-button size="medium" round @click="openWindowEmbed">打开聊天窗口</el-button>
|
||
<br /><br />
|
||
<el-input type="textarea" placeholder="请输入内容" v-model="hideIconCode" style="width: 600px;"></el-input><br />
|
||
<span>隐藏漂浮框代码</span><br />
|
||
<el-button size="medium" round @click="hideIcon">隐藏漂浮框</el-button>
|
||
<br /><br />
|
||
<el-input type="textarea" placeholder="请输入内容" v-model="showIconCode" style="width: 600px;"></el-input><br />
|
||
<span>显示漂浮框代码</span><br />
|
||
<el-button size="medium" round @click="showIcon">显示漂浮框</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="PC大窗口客服代码">
|
||
<el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="bigWinCode">
|
||
</el-input><br/>
|
||
<el-button class="copyBigBtn" size="medium" round :data-clipboard-text="bigWinCode" @click="handleOnCodeBigCopy">复制客服代码</el-button>
|
||
<el-button size="medium" round @click="openWindowBig">预览1</el-button>
|
||
<el-button size="medium" round @click="openWindowBig2">预览2</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="PC小窗口客服代码">
|
||
<el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="smallWinCode">
|
||
</el-input><br />
|
||
<el-button class="copySmallBtn" size="medium" round :data-clipboard-text="smallWinCode" @click="handleOnCodeSmallCopy">复制客服代码</el-button>
|
||
<el-button size="medium" round @click="openWindowSmall">预览1</el-button>
|
||
<el-button size="medium" round @click="openWindowSmall2">预览2</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="H5客服代码">
|
||
<el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="h5Code">
|
||
</el-input><br />
|
||
<el-button class="copyH5Btn" size="medium" round :data-clipboard-text="h5Code" @click="handleOnCodeH5Copy">复制客服代码</el-button>
|
||
<el-button size="medium" round @click="openH5">预览1</el-button>
|
||
<el-button size="medium" round @click="openH52">预览2</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="视频客服代码">
|
||
<el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="h5VideoCode">
|
||
</el-input><br />
|
||
<el-button class="copyH5VideoBtn" size="medium" round :data-clipboard-text="h5VideoCode" @click="handleOnCodeH5VideoCopy">复制客服代码
|
||
</el-button>
|
||
<el-button size="medium" round @click="openH5Video">预览1</el-button>
|
||
<el-button size="medium" round @click="openH5Video2">预览2</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="H5短连接">
|
||
<el-input autosize="8" type="textarea" placeholder="请输入内容" style="width: 600px;" v-model="shortCode">
|
||
</el-input><br />
|
||
<el-button size="medium" round @click="refreshShort">刷新</el-button>
|
||
<el-button class="copyShortBtn" size="medium" round :data-clipboard-text="shortCode" @click="handleOnCodeShortCopy">复制客服代码
|
||
</el-button>
|
||
<el-button size="medium" round @click="openShort">预览1</el-button>
|
||
<el-button size="medium" round @click="openShort2">预览2</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="二维码">
|
||
<div id="short_qrcode"></div>
|
||
<el-button size="medium" round @click="refreshQrcode">刷新</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- <div>形状</div> -->
|
||
<!-- <div>文字/图标</div> -->
|
||
<!-- <div>大小</div> -->
|
||
<!-- <div>位置</div> -->
|
||
<!-- <div>favicon</div> -->
|
||
<!-- <div>对话窗口打开后, 是否隐藏</div> -->
|
||
<!-- <div>提示性气泡</div> -->
|
||
<!-- <div>支持国际化</div> -->
|
||
|
||
<!-- <br> -->
|
||
<!-- <div>颜色</div> -->
|
||
<!-- <div>点击icon, 显示动作</div> -->
|
||
<!-- <div>宽、高</div> -->
|
||
<!-- <div>气泡颜色</div> -->
|
||
<!-- <div>支持国际化</div> -->
|
||
</div>
|
||
|
||
<!--萝卜丝·智能客服代码 开始 -->
|
||
<script src="js/custom.js?v=230515"></script>
|
||
<!-- <script src="./js/custom.min.js?v=230515"></script> -->
|
||
<!--./萝卜丝·智能客服代码 结束 -->
|
||
|
||
<script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/jquery/1.9.1/jquery.min.js"></script>
|
||
<script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/vue/2.5.16/vue.min.js"></script>
|
||
<script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/clipboard/2.0.10/clipboard.min.js"></script>
|
||
<script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/elementui/2.15.9/index.js"></script>
|
||
<script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/qrcode/qrcode.min.js"></script>
|
||
<script>
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data: {
|
||
// fullscreenLoading: false,
|
||
// byteDesk 属性
|
||
// style: 1, // 三个值可选：1,2,3
|
||
// border: 'none', // 'border' 或 'none'
|
||
shape: 'round', // 'round' 或 'rectangle'
|
||
//
|
||
position: 'right', // 'left' 或 'right'
|
||
rightMargin: '50',
|
||
leftMargin: '50',
|
||
bottomMargin: '50',
|
||
// 对话窗口位置
|
||
positionWindow: 'right', // 'left' 或 'right' / 'middle'
|
||
// 列
|
||
column: 'one',
|
||
// 显示两列时，右侧显示类型：常见问题、描述简介、商品、名片
|
||
columnTwoType: 'faq', // faq、description、commodity、card
|
||
history: '0',
|
||
// 对话窗口
|
||
bannerColor: '#ffffff',
|
||
bannerBackground: '#007bff',
|
||
// icon
|
||
buttonColor: '#ffffff',
|
||
buttonBackground: '#007bff',
|
||
buttonText: '在线客服',
|
||
//
|
||
// 客服参数
|
||
adminUid: '', // 201808221551193
|
||
subDomain: '', // vip
|
||
type: 'workGroup', // workGroup/appointed
|
||
workGroupWid: '', // 201807171659201
|
||
agentUid: '',
|
||
// 自定义用户名、昵称、头像
|
||
selfDefine: false,
|
||
userSwitch: "boy",
|
||
username: 'mywebuserboy', // 自定义用户名
|
||
nickname: '我是帅哥web', // 自定义昵称
|
||
avatar: 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/boy.png', // 自定义头像
|
||
// 商品参数
|
||
showGoods: false,
|
||
// goods: "0", // goods 是否显示商品信息，如果要显示，设置为goods=1，设置为其他值，则不显示商品信息
|
||
goods_id: "1", // goods_id 商品信息id，参数goods=1的情况有效
|
||
goods_title: "商品标题", // goods_title 商品信息标题，参数goods=1的情况有效
|
||
goods_content: "商品详情", // goods_content 商品信息详情，参数goods=1的情况有效
|
||
goods_price: "1000", // goods_price 商品信息价格，参数goods=1的情况有效
|
||
goods_url: "https://item.m.jd.com/product/12172344.html", // goods_url 商品信息网址，参数goods=1的情况有效
|
||
goods_imageUrl: "https://bytedesk.oss-cn-shenzhen.aliyuncs.com/images2/20230301074832", // goods_imageUrl 商品图片，参数goods=1的情况有效
|
||
goods_categoryCode: "123", // goods_categoryCode 可选，商品信息类别，参数goods=1的情况有效
|
||
// 自动弹窗，请求后台弹窗目前有点问题，暂时使用前端弹窗设置
|
||
autoPop: false,
|
||
// 机器人优先显示分类："1", 优先显示问题: "0"
|
||
v2robot: "0",
|
||
// 语言
|
||
lang: 'cn',
|
||
// 附言
|
||
showPostscript: false,
|
||
postscript: '',
|
||
//
|
||
shortCode: '',
|
||
//
|
||
agents: [],
|
||
workGroups: [],
|
||
// 本地测试环境
|
||
isDebug: true,
|
||
baseUrl: 'http://127.0.0.1:8000',
|
||
chatUrl: 'http://127.0.0.1:8887'
|
||
// 线上环境
|
||
// isDebug: false,
|
||
// baseUrl: 'https://api.bytedesk.com',
|
||
// chatUrl: 'https://chat.kefubaobao.com'
|
||
},
|
||
computed: {
|
||
bigWinCode() {
|
||
let index = 'index'
|
||
if (this.lang === 'en') {
|
||
index = 'indexen'
|
||
}
|
||
return this.chatUrl + '/chat/pc/' + index + '.html?sub=' + this.subDomain +
|
||
'&uid=' + this.adminUid +
|
||
'&wid=' + this.workGroupWid +
|
||
'&type=' + this.type +
|
||
'&aid=' + this.agentUid +
|
||
'&history=' + this.history +
|
||
'&lang=' + this.lang +
|
||
'&color=' + encodeURIComponent(this.buttonColor) +
|
||
'&background=' + encodeURIComponent(this.buttonBackground) +
|
||
'&column=' + (this.column === 'two' ? '2' : '1') +
|
||
'&v2robot=' + this.v2robot +
|
||
(this.selfDefine ?
|
||
('&selfuser=1' +
|
||
'&username=' + encodeURIComponent(this.username) +
|
||
'&nickname=' + encodeURIComponent(this.nickname) +
|
||
'&avatar=' + encodeURIComponent(this.avatar))
|
||
: '') +
|
||
(this.showGoods ?
|
||
('&goods=1' +
|
||
'&goods_id=' + encodeURIComponent(this.goods_id) +
|
||
'&goods_title=' + encodeURIComponent(this.goods_title) +
|
||
'&goods_content=' + encodeURIComponent(this.goods_content) +
|
||
'&goods_price=' + encodeURIComponent(this.goods_price) +
|
||
'&goods_url=' + encodeURIComponent(this.goods_url) +
|
||
'&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) +
|
||
'&goods_categoryCode=' + this.goods_categoryCode)
|
||
: '') +
|
||
(this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
|
||
'&p'
|
||
},
|
||
smallWinCode() {
|
||
return this.chatUrl + '/chat/pc/iframe.html?sub=' + this.subDomain +
|
||
'&uid=' + this.adminUid +
|
||
'&wid=' + this.workGroupWid +
|
||
'&type=' + this.type +
|
||
'&aid=' + this.agentUid +
|
||
'&history=' + this.history +
|
||
'&lang=' + this.lang +
|
||
'&color=' + encodeURIComponent(this.buttonColor) +
|
||
'&background=' + encodeURIComponent(this.buttonBackground) +
|
||
'&column=' + (this.column === 'two' ? '2' : '1') +
|
||
'&v2robot=' + this.v2robot +
|
||
(this.selfDefine ?
|
||
('&selfuser=1' +
|
||
'&username=' + encodeURIComponent(this.username) +
|
||
'&nickname=' + encodeURIComponent(this.nickname) +
|
||
'&avatar=' + encodeURIComponent(this.avatar))
|
||
: '' ) +
|
||
(this.showGoods ?
|
||
('&goods=1' +
|
||
'&goods_id=' + encodeURIComponent(this.goods_id) +
|
||
'&goods_title=' + encodeURIComponent(this.goods_title) +
|
||
'&goods_content=' + encodeURIComponent(this.goods_content) +
|
||
'&goods_price=' + encodeURIComponent(this.goods_price) +
|
||
'&goods_url=' + encodeURIComponent(this.goods_url) +
|
||
'&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) +
|
||
'&goods_categoryCode=' + this.goods_categoryCode)
|
||
: '') +
|
||
(this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
|
||
'&p'
|
||
},
|
||
h5Code() {
|
||
let index = 'index'
|
||
if (this.lang === 'en') {
|
||
index = 'indexen'
|
||
}
|
||
return this.chatUrl + '/chat/h5/' + index + '.html?sub=' + this.subDomain +
|
||
// '&uid=' + this.adminUid +
|
||
'&wid=' + this.workGroupWid +
|
||
'&type=' + this.type +
|
||
'&aid=' + this.agentUid +
|
||
'&history=' + this.history +
|
||
'&lang=' + this.lang +
|
||
'&v2robot=' + this.v2robot +
|
||
(this.selfDefine ?
|
||
('&selfuser=1' +
|
||
'&username=' + encodeURIComponent(this.username) +
|
||
'&nickname=' + encodeURIComponent(this.nickname) +
|
||
'&avatar=' + encodeURIComponent(this.avatar))
|
||
: '') +
|
||
(this.showGoods ?
|
||
('&goods=1' +
|
||
'&goods_id=' + encodeURIComponent(this.goods_id) +
|
||
'&goods_title=' + encodeURIComponent(this.goods_title) +
|
||
'&goods_content=' + encodeURIComponent(this.goods_content) +
|
||
'&goods_price=' + encodeURIComponent(this.goods_price) +
|
||
'&goods_url=' + encodeURIComponent(this.goods_url) +
|
||
'&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) +
|
||
'&goods_categoryCode=' + this.goods_categoryCode)
|
||
: '') +
|
||
(this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
|
||
'&p'
|
||
},
|
||
h5VideoCode() {
|
||
return this.chatUrl + '/chat/h5/video.html?sub=' + this.subDomain +
|
||
// '&uid=' + this.adminUid +
|
||
'&wid=' + this.workGroupWid +
|
||
'&type=' + this.type +
|
||
'&aid=' + this.agentUid +
|
||
'&history=' + this.history +
|
||
'&lang=' + this.lang +
|
||
'&v2robot=' + this.v2robot +
|
||
(this.selfDefine ?
|
||
('&selfuser=1' +
|
||
'&username=' + encodeURIComponent(this.username) +
|
||
'&nickname=' + encodeURIComponent(this.nickname) +
|
||
'&avatar=' + encodeURIComponent(this.avatar))
|
||
: '') +
|
||
(this.showGoods ?
|
||
('&goods=1' +
|
||
'&goods_id=' + encodeURIComponent(this.goods_id) +
|
||
'&goods_title=' + encodeURIComponent(this.goods_title) +
|
||
'&goods_content=' + encodeURIComponent(this.goods_content) +
|
||
'&goods_price=' + encodeURIComponent(this.goods_price) +
|
||
'&goods_url=' + encodeURIComponent(this.goods_url) +
|
||
'&goods_imageUrl=' + encodeURIComponent(this.goods_imageUrl) +
|
||
'&goods_categoryCode=' + this.goods_categoryCode)
|
||
: '') +
|
||
(this.showPostscript ? '&postscript=' + encodeURIComponent(this.postscript) : '') +
|
||
'&p'
|
||
},
|
||
embedCode() {
|
||
return '<!--萝卜丝·智能客服代码 开始 -->\n' +
|
||
'<script src="https://cdn.kefux.com/chat/pc/js/custom.min.js?v=20220902"><' + '/script>\n' +
|
||
'<script>\n' +
|
||
' byteDesk.start("' + this.lang + '", {\n' +
|
||
' shape: "' + this.shape + '",\n' +
|
||
' column: "' + this.column + '",\n' +
|
||
' history: "' + this.history + '",\n' +
|
||
' autoPop: ' + this.autoPop + ',\n' +
|
||
' v2robot: "' + this.v2robot + '",\n' +
|
||
' position: "' + this.position + '",\n' +
|
||
' margin: "' + (this.position === 'left' ? this.leftMargin : this.rightMargin) + '",\n' +
|
||
' bottomMargin: "' + this.bottomMargin + '",\n' +
|
||
' positionWindow: "' + this.positionWindow + '",\n' +
|
||
' bannerBackground: "' + this.bannerBackground + '",\n' +
|
||
' bannerColor: "' + this.bannerColor + '",\n' +
|
||
' buttonColor: "' + this.buttonColor + '",\n' +
|
||
' buttonBackground: "' + this.buttonBackground + '",\n' +
|
||
' buttonText: "' + this.buttonText + '",\n' +
|
||
// 客服参数
|
||
' adminUid: "' + this.adminUid + '",\n' +
|
||
' subDomain: "' + this.subDomain + '",\n' +
|
||
' type: "' + this.type + '",\n' +
|
||
' workGroupWid: "' + this.workGroupWid + '",\n' +
|
||
' agentUid: "' + this.agentUid + '",\n' +
|
||
// 自定义用户名、昵称、头像
|
||
(this.selfDefine ?
|
||
(' selfuser: "1", \n' +
|
||
' username: "' + ( this.selfDefine ? this.username : '') + '",\n' +
|
||
' nickname: "' + ( this.selfDefine ? this.nickname : '') + '", \n' +
|
||
' avatar: "' + ( this.selfDefine ? this.avatar : '') + '",\n') : "") +
|
||
(this.showPostscript ? ' postscript: "' + encodeURIComponent(this.postscript) + '",\n' : '') +
|
||
// 传递商品参数
|
||
(this.showGoods ?
|
||
(' goods: "1",\n' +
|
||
' goods_id: "' + this.goods_id + '",\n' +
|
||
' goods_title: "' + this.goods_title + '",\n' +
|
||
' goods_content: "' + this.goods_content + '",\n' +
|
||
' goods_price: "' + this.goods_price + '",\n' +
|
||
' goods_url: "' + this.goods_url + '",\n' +
|
||
' goods_imageUrl: "' + this.goods_imageUrl + '",\n' +
|
||
' goods_categoryCode: "' + this.goods_categoryCode + '",\n')
|
||
: '') +
|
||
'});\n ' +
|
||
'<' + '/script>\n' +
|
||
'<!--./萝卜丝·智能客服代码 结束 -->'
|
||
},
|
||
embedOpen() {
|
||
return 'byteDesk.startWithoutIcon()';
|
||
},
|
||
hideIconCode() {
|
||
return 'byteDesk.hideIcon()'
|
||
},
|
||
showIconCode() {
|
||
return 'byteDesk.showIcon()'
|
||
}
|
||
},
|
||
watch: {
|
||
buttonColor(newVal, oldVal) {
|
||
// console.log(`buttonColor changed: ${newVal}`);
|
||
// var icon = document.getElementById("byte_desk-start");
|
||
// icon.style.setProperty('background-color', newVal);
|
||
this.reinit()
|
||
},
|
||
buttonBackground(newVal, oldVal) {
|
||
// console.log(`buttonBackground changed: ${newVal}`);
|
||
// var icon = document.getElementById("byte_desk-start");
|
||
// icon.style.setProperty('background-color', newVal);
|
||
this.reinit()
|
||
},
|
||
h5Code(newVal, oldVal) {
|
||
this.getShortUrl(newVal)
|
||
},
|
||
shortCode(newVal, oldVal) {
|
||
this.refreshQrcode()
|
||
},
|
||
lang(newVal, oldVal) {
|
||
// console.log(newVal, oldVal)
|
||
if (newVal === 'en') {
|
||
this.buttonText = 'Live Chat'
|
||
} else {
|
||
this.buttonText = '在线客服'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
init() {
|
||
if (this.agentUid === '' || this.workGroupWid === '') {
|
||
return
|
||
}
|
||
//
|
||
byteDesk.start(this.lang, {
|
||
// style: this.style, // 三个值可选：1,2,3
|
||
// border: this.border,
|
||
shape: this.shape,
|
||
column: this.column,
|
||
history: this.history,
|
||
autoPop: this.autoPop,
|
||
v2robot: this.v2robot,
|
||
position: this.position,
|
||
margin: (this.position === 'left' ? this.leftMargin : this.rightMargin),
|
||
bottomMargin: this.bottomMargin,
|
||
positionWindow: this.positionWindow,
|
||
bannerBackground: this.bannerBackground,
|
||
bannerColor: this.bannerColor,
|
||
buttonColor: this.buttonColor,
|
||
buttonBackground: this.buttonBackground,
|
||
buttonText: this.buttonText,
|
||
// 客服参数
|
||
adminUid: this.adminUid,
|
||
subDomain: this.subDomain,
|
||
type: this.type,
|
||
workGroupWid: this.workGroupWid,
|
||
agentUid: this.agentUid,
|
||
// 自定义用户名、昵称、头像
|
||
selfuser: (this.selfDefine ? "1" : "0"),
|
||
username: (this.selfDefine ? this.username : ''),
|
||
nickname: (this.selfDefine ? this.nickname : ''),
|
||
avatar: (this.selfDefine ? this.avatar : ''),
|
||
// 传递商品参数
|
||
goods: (this.showGoods ? "1" : "0"),
|
||
goods_id: this.goods_id,
|
||
goods_title: this.goods_title,
|
||
goods_content: this.goods_content,
|
||
goods_price: this.goods_price,
|
||
goods_url: this.goods_url,
|
||
goods_imageUrl: this.goods_imageUrl,
|
||
goods_categoryCode: this.goods_categoryCode,
|
||
//
|
||
postscript: this.showPostscript ? this.postscript : ''
|
||
});
|
||
},
|
||
|
||
reinit() {
|
||
console.log('reinit')
|
||
//
|
||
byteDesk.removeDOMElements()
|
||
this.init()
|
||
},
|
||
|
||
onWorkGroupChange(newWid) {
|
||
console.log('newWid:', newWid)
|
||
for (let i = 0; i < this.workGroups.length; i++) {
|
||
const wg = this.workGroups[i];
|
||
if (wg.wid == newWid) {
|
||
this.workGroup = this.workGroups[i];
|
||
console.log('onWorkGroupChange:', this.workGroup)
|
||
}
|
||
}
|
||
let app = this
|
||
if (app.workGroup.workCode != null && app.workGroup.workCode != undefined) {
|
||
app.lang = app.workGroup.workCode.lang
|
||
app.shape = app.workGroup.workCode.shape
|
||
app.buttonText = app.workGroup.workCode.buttonText
|
||
app.buttonColor = app.workGroup.workCode.buttonColor
|
||
app.buttonBackground = app.workGroup.workCode.buttonBackground
|
||
app.bannerColor = app.workGroup.workCode.bannerColor
|
||
app.bannerBackground = app.workGroup.workCode.bannerBackground
|
||
app.position = app.workGroup.workCode.position
|
||
app.rightMargin = app.workGroup.workCode.rightMargin
|
||
app.leftMargin = app.workGroup.workCode.leftMargin
|
||
app.bottomMargin = app.workGroup.workCode.bottomMargin
|
||
app.positionWindow = app.workGroup.workCode.positionWindow
|
||
app.column = app.workGroup.workCode.column
|
||
app.history = app.workGroup.workCode.history
|
||
app.v2robot = app.workGroup.workCode.v2robot
|
||
}
|
||
// TODO: 保存
|
||
// TODO: 显示新技能组参数
|
||
// this.getPrechatSettings()
|
||
//
|
||
this.reinit()
|
||
},
|
||
|
||
getAllAgents() {
|
||
var app = this
|
||
$.ajax({
|
||
url: this.baseUrl + "/visitor/api/agent/all",
|
||
contentType: "application/json; charset=utf-8",
|
||
type: "get",
|
||
data: {
|
||
uid: this.adminUid,
|
||
client: 'web'
|
||
},
|
||
success: function (response) {
|
||
console.log("get all agents success:", response);
|
||
//
|
||
app.agents = response.data
|
||
for (let i = 0; i < app.agents.length; i++) {
|
||
let user = app.agents[i]
|
||
if (user.robot || user.username === 'bytedesk_notification') {
|
||
app.agents.splice(i, 1)
|
||
}
|
||
}
|
||
app.agentUid = app.agents[0].uid
|
||
// console.log('agentUid:', app.agentUid)
|
||
app.init()
|
||
},
|
||
error: function (error) {
|
||
console.log("get all agents error:", error);
|
||
}
|
||
});
|
||
},
|
||
|
||
getAllWorkGroups() {
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
//
|
||
var app = this
|
||
$.ajax({
|
||
url: this.baseUrl + "/visitor/api/workGroup/all",
|
||
contentType: "application/json; charset=utf-8",
|
||
type: "get",
|
||
data: {
|
||
uid: this.adminUid,
|
||
client: 'web'
|
||
},
|
||
success: function (response) {
|
||
loading.close();
|
||
console.log("get all workGroup success:", response);
|
||
//
|
||
app.workGroups = response.data
|
||
app.workGroupWid = app.workGroups[0].wid
|
||
// console.log('workGroupWid:', app.workGroupWid)
|
||
if (app.workGroups[0].workCode != null && app.workGroups[0].workCode != undefined) {
|
||
app.lang = app.workGroups[0].workCode.lang
|
||
app.shape = app.workGroups[0].workCode.shape
|
||
app.buttonText = app.workGroups[0].workCode.buttonText
|
||
app.buttonColor = app.workGroups[0].workCode.buttonColor
|
||
app.buttonBackground = app.workGroups[0].workCode.buttonBackground
|
||
app.bannerColor = app.workGroups[0].workCode.bannerColor
|
||
app.bannerBackground = app.workGroups[0].workCode.bannerBackground
|
||
app.position = app.workGroups[0].workCode.position
|
||
app.rightMargin = app.workGroups[0].workCode.rightMargin
|
||
app.leftMargin = app.workGroups[0].workCode.leftMargin
|
||
app.bottomMargin = app.workGroups[0].workCode.bottomMargin
|
||
app.positionWindow = app.workGroups[0].workCode.positionWindow
|
||
app.column = app.workGroups[0].workCode.column
|
||
app.history = app.workGroups[0].workCode.history
|
||
app.v2robot = app.workGroups[0].workCode.v2robot
|
||
}
|
||
app.init()
|
||
},
|
||
error: function (error) {
|
||
console.log("get all workGroup error:", error);
|
||
}
|
||
});
|
||
},
|
||
|
||
getBaseUrl() {
|
||
if (this.isDebug) {
|
||
return
|
||
}
|
||
let app = this
|
||
$.ajax({
|
||
url: this.baseUrl + "/visitor/api/wechatUrl",
|
||
contentType: "application/json; charset=utf-8",
|
||
type: "get",
|
||
data: {
|
||
client: 'web'
|
||
},
|
||
success: function (response) {
|
||
|
||
app.chatUrl = 'https://' + response.data.url
|
||
// const ip = response.data.ip
|
||
},
|
||
error: function (error) {
|
||
console.log("get all workGroup error:", error);
|
||
}
|
||
});
|
||
},
|
||
|
||
getShortUrl(url) {
|
||
//
|
||
if (this.workGroupWid === '' || this.agentUid === '') {
|
||
return
|
||
}
|
||
var app = this
|
||
$.ajax({
|
||
url: this.baseUrl + "/url/to/short",
|
||
contentType: "application/json; charset=utf-8",
|
||
type: "get",
|
||
data: {
|
||
url: url,
|
||
uid: this.adminUid,
|
||
client: 'web'
|
||
},
|
||
success: function (response) {
|
||
// console.log("get short url success:", response.data);
|
||
if (app.isDebug) {
|
||
app.shortCode = app.baseUrl + "/chat/" + response.data
|
||
// app.shortCode = "http://url.chainsnow.com/chat/" + response.data
|
||
} else {
|
||
// app.shortCode = app.chatUrl + "/chat/" + response.data
|
||
app.shortCode = "http://url.chainsnow.com/chat/" + response.data
|
||
}
|
||
//
|
||
// app.$message({
|
||
// message: 'H5短连接生成成功',
|
||
// type: 'success'
|
||
// });
|
||
},
|
||
error: function (error) {
|
||
console.log("get short url error:", error);
|
||
app.$message.error('H5短连接生成错误');
|
||
}
|
||
});
|
||
},
|
||
|
||
getPrechatSettings() {
|
||
//
|
||
if (this.workGroupWid === '' || this.type !== 'workGroup') {
|
||
return
|
||
}
|
||
// var app = this
|
||
// $.ajax({
|
||
// url: this.baseUrl + "/visitor/api/prechat/settings",
|
||
// contentType: "application/json; charset=utf-8",
|
||
// type: "get",
|
||
// data: {
|
||
// wid: this.workGroupWid,
|
||
// client: 'web'
|
||
// },
|
||
// success: function (response) {
|
||
// console.log("getPrechatSettings success:", response);
|
||
// let workGroup = response.data
|
||
// if (response.status_code === 200 && workGroup.workCode != null) {
|
||
// app.lang = workGroup.workCode.lang
|
||
// app.shape = workGroup.workCode.shape
|
||
// app.buttonText = workGroup.workCode.buttonText
|
||
// app.buttonColor = workGroup.workCode.buttonColor
|
||
// app.buttonBackground = workGroup.workCode.buttonBackground
|
||
// app.bannerColor = workGroup.workCode.bannerColor
|
||
// app.bannerBackground = workGroup.workCode.bannerBackground
|
||
// app.position = workGroup.workCode.position
|
||
// app.rightMargin = workGroup.workCode.rightMargin
|
||
// app.leftMargin = workGroup.workCode.leftMargin
|
||
// app.bottomMargin = workGroup.workCode.bottomMargin
|
||
// app.positionWindow = workGroup.workCode.positionWindow
|
||
// app.column = workGroup.workCode.column
|
||
// app.history = workGroup.workCode.history
|
||
// app.v2robot = workGroup.workCode.v2robot
|
||
// }
|
||
// },
|
||
// error: function (error) {
|
||
// console.log("getPrechatSettings error:", error);
|
||
// }
|
||
// });
|
||
},
|
||
|
||
// 嵌入式窗口预览
|
||
openWindowEmbed() {
|
||
// console.log('openWindowEmbed')
|
||
// 自定义漂浮框，调用此函数打开嵌入式窗口
|
||
byteDesk.startWithoutIcon()
|
||
},
|
||
|
||
hideIcon() {
|
||
// 隐藏漂浮框
|
||
byteDesk.hideIcon()
|
||
},
|
||
|
||
showIcon() {
|
||
//
|
||
byteDesk.showIcon()
|
||
},
|
||
|
||
// 客服大窗口预览1
|
||
openWindowBig() {
|
||
window.open(this.bigWinCode)
|
||
},
|
||
|
||
// 客服大窗口预览2
|
||
openWindowBig2() {
|
||
window.open(this.bigWinCode, "", "height=800, width=800, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
|
||
},
|
||
|
||
// 客服小窗口预览1
|
||
openWindowSmall() {
|
||
window.open(this.smallWinCode)
|
||
},
|
||
|
||
// 客服小窗口预览2
|
||
openWindowSmall2() {
|
||
window.open(this.smallWinCode, "", "height=800, width=800, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
|
||
},
|
||
|
||
// h5预览1
|
||
openH5() {
|
||
window.open(this.h5Code)
|
||
},
|
||
|
||
// h5预览2
|
||
openH52() {
|
||
window.open(this.h5Code, "", "height=500, width=400, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
|
||
},
|
||
|
||
// h5视频预览1
|
||
openH5Video() {
|
||
window.open(this.h5VideoCode)
|
||
},
|
||
|
||
// h5视频预览2
|
||
openH5Video2() {
|
||
window.open(this.h5VideoCode, "", "height=500, width=400, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
|
||
},
|
||
|
||
refreshShort() {
|
||
this.getShortUrl(this.h5Code)
|
||
},
|
||
|
||
// short预览1
|
||
openShort() {
|
||
window.open(this.shortCode)
|
||
},
|
||
|
||
// short预览2
|
||
openShort2() {
|
||
window.open(this.shortCode, "", "height=500, width=400, top=50, left=50, toolbar=no, menubar=no,scrollbars = no, resizable = no, location = no, status = no")
|
||
},
|
||
|
||
// 复制嵌入式客服代码
|
||
handleOnCodeEmbedCopy() {
|
||
// console.log('embedcode copy')
|
||
var clipboard = new ClipboardJS('.copyEmbedBtn')
|
||
clipboard.on('success', e => {
|
||
this.$message.success('复制成功')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
clipboard.on('error', e => {
|
||
// 不支持复制
|
||
this.$message.error('该浏览器不支持自动复制')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
},
|
||
|
||
// 复制大窗口客服代码
|
||
handleOnCodeBigCopy() {
|
||
// console.log('codebig copy')
|
||
var clipboard = new ClipboardJS('.copyBigBtn')
|
||
clipboard.on('success', e => {
|
||
this.$message.success('复制成功')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
clipboard.on('error', e => {
|
||
// 不支持复制
|
||
this.$message.error('该浏览器不支持自动复制')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
},
|
||
|
||
// 复制小窗口客服代码
|
||
handleOnCodeSmallCopy() {
|
||
// console.log('codesmall copy')
|
||
var clipboard = new ClipboardJS('.copySmallBtn')
|
||
clipboard.on('success', e => {
|
||
this.$message.success('复制成功')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
clipboard.on('error', e => {
|
||
// 不支持复制
|
||
this.$message.error('该浏览器不支持自动复制')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
},
|
||
|
||
// 复制h5客服代码
|
||
handleOnCodeH5Copy() {
|
||
// console.log('codeh5 copy')
|
||
var clipboard = new ClipboardJS('.copyH5Btn')
|
||
clipboard.on('success', e => {
|
||
this.$message.success('复制成功')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
clipboard.on('error', e => {
|
||
// 不支持复制
|
||
this.$message.error('该浏览器不支持自动复制')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
},
|
||
|
||
// 复制视频客服代码
|
||
handleOnCodeH5VideoCopy() {
|
||
// console.log('codeh5video copy')
|
||
var clipboard = new ClipboardJS('.copyH5VideoBtn')
|
||
clipboard.on('success', e => {
|
||
this.$message.success('复制成功')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
clipboard.on('error', e => {
|
||
// 不支持复制
|
||
this.$message.error('该浏览器不支持自动复制')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
},
|
||
|
||
// 复制short客服代码
|
||
handleOnCodeShortCopy() {
|
||
// console.log('codeh5 copy')
|
||
var clipboard = new ClipboardJS('.copyShortBtn')
|
||
clipboard.on('success', e => {
|
||
this.$message.success('复制成功')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
clipboard.on('error', e => {
|
||
// 不支持复制
|
||
this.$message.error('该浏览器不支持自动复制')
|
||
// 释放内存
|
||
// clipboard.destroy()
|
||
e.clearSelection();
|
||
})
|
||
},
|
||
|
||
switchTestUser (newValue) {
|
||
// console.log('switchTestUser:' + newValue)
|
||
if (newValue === 'boy') {
|
||
this.username = 'mywebuserboy'
|
||
this.nickname = '我是帅哥web'
|
||
this.avatar = 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/boy.png'
|
||
} else {
|
||
this.username = 'mywebusergirl'
|
||
this.nickname = '我是美女web'
|
||
this.avatar = 'https://bytedesk.oss-cn-shenzhen.aliyuncs.com/avatars/girl.png'
|
||
}
|
||
this.reinit()
|
||
},
|
||
|
||
getUrlParam(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
|
||
var r = window.location.search.substr(1).match(reg); //匹配目标参数
|
||
if (r != null) return decodeURIComponent(r[2]);
|
||
return null; //返回参数值
|
||
},
|
||
|
||
refreshQrcode() {
|
||
if (document.getElementById('short_qrcode')) {
|
||
// 防止生成多张图片
|
||
document.getElementById('short_qrcode').innerHTML = ''
|
||
}
|
||
this.$nextTick(function () {
|
||
this.qrcode()
|
||
})
|
||
},
|
||
//
|
||
qrcode() {
|
||
new QRCode('short_qrcode', {
|
||
text: this.shortCode,
|
||
width: 300,
|
||
height: 300,
|
||
colorDark: '#000000',
|
||
colorLight: '#ffffff',
|
||
correctLevel: QRCode.CorrectLevel.H
|
||
})
|
||
},
|
||
},
|
||
mounted() {
|
||
//
|
||
this.adminUid = this.getUrlParam('uid')
|
||
this.subDomain = this.getUrlParam('sub')
|
||
// console.log('uid:', this.uid, ' sub:', this.subDomain)
|
||
//
|
||
this.getAllAgents()
|
||
this.getAllWorkGroups()
|
||
this.getBaseUrl()
|
||
// 初始化
|
||
// this.init()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<!-- 反馈对话框开始 -->
|
||
<!-- <script type="text/javascript" src="https://cdn.kefux.com/assets/js/vendor/jquery/1.9.1/jquery.min.js"></script>
|
||
<script src="./js/feedback.js?1.0"></script>
|
||
<script src="./js/html2canvas.js?1.0"></script>
|
||
<link rel="stylesheet" href="./css/feedback.css?1.0" />
|
||
<script type="text/javascript">
|
||
$.feedback({
|
||
ajaxURL: 'http://127.0.0.1/visitor/api/upload/image',
|
||
html2canvasURL: './js/html2canvas.js',
|
||
onClose: function () {
|
||
window.location.reload();
|
||
}
|
||
});
|
||
</script> -->
|
||
<!-- 反馈对话框结束 -->
|
||
|
||
|
||
</body>
|
||
|
||
</html> |