306 lines
15 KiB
HTML
306 lines
15 KiB
HTML
|
{{template "header" }}
|
|||
|
|
|
|||
|
|
<div id="deployBox" style="width:100%;height: 100%;">
|
|||
|
|
<template>
|
|||
|
|
<el-tabs v-model="tabActive" type="border-card" >
|
|||
|
|
<el-tab-pane :label="flyLang.normalModel" name="normalModel">
|
|||
|
|
<el-descriptions style="margin-bottom: 10px;" direction="vertical" :column="1" border>
|
|||
|
|
<el-descriptions-item label="通用聊天链接">
|
|||
|
|
<a v-on:click="window.open(host+'/chatIndex?kefu_id='+kefuName+'&ent_id='+entId)" style="margin-right: 10px"><{host}>/chatIndex?kefu_id=<{kefuName}>&ent_id=<{entId}></a>
|
|||
|
|
<el-button size="mini" type="primary" v-on:click="window.open(host+'/chatIndex?kefu_id='+kefuName+'&ent_id='+entId)">测试对话</el-button>
|
|||
|
|
<el-button size="mini" type="primary" v-on:click="window.open(host+'/kefu/downloadDeploy?token='+localStorage.getItem('token'))">落地页部署</el-button>
|
|||
|
|
<div>
|
|||
|
|
<p style="margin-bottom: 10px;">直连链接在微信中打开会展示提示遮罩，请下载落地页，部署在自己域名和服务器下</p>
|
|||
|
|
<p style="margin-bottom: 10px;"><{flyLang.visitorLinkQrcode}></p>
|
|||
|
|
<div style="position: relative;">
|
|||
|
|
<img :src="avator" id="qrcodeLogo2" style="top:90px;margin-top:-20px;left:90px;margin-left:-20px;position:absolute;border:2px solid #fff;display: none;width: 40px;height:40px;border-radius: 8px;">
|
|||
|
|
<div id="dynicQrImg2">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
|
|||
|
|
<el-descriptions-item label="微信授权聊天链接">
|
|||
|
|
<a style="margin-right: 10px" ><{host}>/wechatIndex?kefu_id=<{kefuName}>&ent_id=<{entId}></a>
|
|||
|
|
<el-button size="mini" type="primary" v-on:click="copyText(host+'/wechatIndex?kefu_id='+kefuName+'&ent_id='+entId)"><{flyLang.copy}></el-button>
|
|||
|
|
<br/>
|
|||
|
|
<{flyLang.wechatLinkDesc}><br/>
|
|||
|
|
<div>
|
|||
|
|
<p style="margin-bottom: 10px;"><{flyLang.wechatLinkQrcode}></p>
|
|||
|
|
<div style="position: relative;">
|
|||
|
|
<img :src="avator" id="qrcodeLogo3" style="top:90px;margin-top:-20px;left:90px;margin-left:-20px;position:absolute;border:2px solid #fff;display: none;width: 40px;height:40px;border-radius: 8px;">
|
|||
|
|
<div id="dynicQrImg3">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="API调用">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<td width="100px" align="right"><el-tag>POST</el-tag></td>
|
|||
|
|
<td style="height: 50px;padding-left: 20px"><{host}>/api/v1/<{entId}>/<{kefuName}>/robot/chat
|
|||
|
|
<el-button size="mini" type="primary" v-on:click="copyText(host+'/api/v1/'+entId+'/'+kefuName+'/robot/chat')"><{flyLang.copy}></el-button>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td width="100px" align="right"><el-tag>Content-Type</el-tag></td>
|
|||
|
|
<td style="height: 50px;padding-left: 20px">application/json</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td width="100px" align="right"><el-tag>body</el-tag></td>
|
|||
|
|
<td style="height: 50px;padding-left: 20px">
|
|||
|
|
<pre>
|
|||
|
|
{
|
|||
|
|
"visitor_id": "1",
|
|||
|
|
"content": "你好",
|
|||
|
|
"visitor_name": "测试访客"
|
|||
|
|
}
|
|||
|
|
</pre>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item :label="flyLang.paramIntro">
|
|||
|
|
<div v-html="flyLang.paramsDesc"></div>
|
|||
|
|
<div v-html="flyLang.visitorLinkDesc"></div>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
|
|||
|
|
</el-descriptions>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
<el-tab-pane :label="flyLang.dialogModel" name="dialogModel">
|
|||
|
|
|
|||
|
|
<el-descriptions style="margin-bottom: 10px;" direction="vertical" :column="1" border>
|
|||
|
|
<el-descriptions-item :label="flyLang.dialogModel">
|
|||
|
|
<{flyLang.delogDeployDesc}><a target="_blank" :href="'/deploy?siteUrl='+host+'&kefuName='+kefuName+'&entId='+entId">demo</a>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item label="code">
|
|||
|
|
<textarea class="deployLink" style="height: 360px;">
|
|||
|
|
<script type='text/javascript'>
|
|||
|
|
(function(a, b, c, d) {
|
|||
|
|
let h = b.getElementsByTagName('head')[0];let s = b.createElement('script');
|
|||
|
|
s.type = 'text/javascript';s.src = c+"/static/js/kefu-front.js";s.onload = s.onreadystatechange = function () {
|
|||
|
|
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") d(c);
|
|||
|
|
};h.appendChild(s);
|
|||
|
|
})(window, document,"<{host}>",function(u){
|
|||
|
|
KEFU.init({
|
|||
|
|
KEFU_URL:u,
|
|||
|
|
KEFU_KEFU_ID: "<{kefuName}>",
|
|||
|
|
KEFU_ENT: "<{entId}>",
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</textarea>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
<el-descriptions-item :label="flyLang.paramIntro">
|
|||
|
|
KEFU_KEFU_ID: 客服账号用户名<br>
|
|||
|
|
KEFU_ENT: 客服的商户ID<br>
|
|||
|
|
KEFU_LANG: cn 中文 ， en英文，jp日文，ru俄文，kr韩文<br>
|
|||
|
|
KEFU_SHOW_TYPES: 展示样式，0：不展示，1：普通右下角，2：圆形icon<br>
|
|||
|
|
KEFU_AUTO_OPEN: true 自动展开，false 不自动<br>
|
|||
|
|
VISITOR_ID:访客id<br>
|
|||
|
|
VISITOR_NAME:访客昵称<br>
|
|||
|
|
VISITOR_AVATOR:访客头像<br>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
</el-descriptions>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
<el-tab-pane label="微信提醒" >
|
|||
|
|
<el-descriptions direction="vertical" :column="2" border>
|
|||
|
|
<el-descriptions-item label="客服绑定微信提醒">
|
|||
|
|
<div style="display: flex;margin-bottom: 10px;">
|
|||
|
|
<img src="/static/images/wechat.png" style="width: 60px;height:60px;margin-right: 10px;"/>
|
|||
|
|
<div>
|
|||
|
|
<h4 style="margin-bottom: 5px;"><{flyLang.wechatNoticeDesc}></h4>
|
|||
|
|
<el-button @click="window.open('/wechatNotice')" size="small" type="success"><{flyLang.bind}></el-button>
|
|||
|
|
<el-button icon="el-icon-refresh" @click="getWechatOpenidList()" size="small" type="success"></el-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<el-table
|
|||
|
|
:empty-text="flyLang.nodata"
|
|||
|
|
:data="openidList"
|
|||
|
|
border
|
|||
|
|
style="width: 100%">
|
|||
|
|
<el-table-column
|
|||
|
|
prop="oauth_id"
|
|||
|
|
:label="flyLang.wechat">
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
prop="created_at"
|
|||
|
|
:label="flyLang.createTime">
|
|||
|
|
</el-table-column>
|
|||
|
|
|
|||
|
|
<el-table-column
|
|||
|
|
prop="id"
|
|||
|
|
:label="flyLang.doIt">
|
|||
|
|
<template slot-scope="scope">
|
|||
|
|
<el-button @click="deleteOauth(scope.row.oauth_id)" type="primary" size="small"><{flyLang.delete}></el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-descriptions-item>
|
|||
|
|
|
|||
|
|
</el-descriptions>
|
|||
|
|
</el-tab-pane>
|
|||
|
|
|
|||
|
|
</el-tabs>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
<script src="/static/js/chat-lang.js?v=1.0.0"></script>
|
|||
|
|
<script src="/static/js/jquery.qrcode.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var LANG=checkLang();
|
|||
|
|
new Vue({
|
|||
|
|
el: '#deployBox',
|
|||
|
|
delimiters:["<{","}>"],
|
|||
|
|
data: {
|
|||
|
|
flyLang:KEFU_LANG[LANG],
|
|||
|
|
window:window,
|
|||
|
|
host:getBaseUrl(),
|
|||
|
|
kefuId:"",
|
|||
|
|
entId:"",
|
|||
|
|
nickname:"",
|
|||
|
|
avator:"",
|
|||
|
|
kefuName:"",
|
|||
|
|
versionName:"",
|
|||
|
|
visitorQrcode:"",
|
|||
|
|
visitorUrl:"",
|
|||
|
|
wechatVisitorUrl:"",
|
|||
|
|
wechatVisitorQrcode:"",
|
|||
|
|
wechatKefuQrcode:"",
|
|||
|
|
wechatMenuUrl:"",
|
|||
|
|
systemWechatKefuQrcode:"",
|
|||
|
|
systemBussinesId:"{{.systemBussinesId}}",
|
|||
|
|
siteHost:"",
|
|||
|
|
siteName:"",
|
|||
|
|
siteDesc:"",
|
|||
|
|
contact:"",
|
|||
|
|
tel:"",
|
|||
|
|
openidList:[],
|
|||
|
|
tabActive:"normalModel",
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
|
|||
|
|
kefuInfo() {
|
|||
|
|
var _this = this;
|
|||
|
|
sendAjax("/kefu/kefuinfo","get",{},function (data) {
|
|||
|
|
if (data.code != 200) {
|
|||
|
|
window.location.href = "/ironMan/signInx";
|
|||
|
|
} else {
|
|||
|
|
var result = data.result;
|
|||
|
|
_this.kefuId = result.id;
|
|||
|
|
_this.entId = result.ent_id;
|
|||
|
|
_this.kefuName = result.name;
|
|||
|
|
_this.nickname = result.nickname;
|
|||
|
|
_this.avator = result.avator;
|
|||
|
|
_this.visitorUrl=_this.host+'/chatIndex?kefu_id='+result.name+'&ent_id='+result.ent_id;
|
|||
|
|
var visitorUrlTxt=_this.host+'/chatIndex?kefu_id='+result.name+'%26ent_id='+result.ent_id;
|
|||
|
|
_this.visitorQrcode=_this.host+"/kefu/qrcode?str="+visitorUrlTxt+"&token="+localStorage.getItem("token");
|
|||
|
|
_this.wechatMenuUrl=_this.host+'/wechatIndex?ent_id='+result.ent_id+'%26kefu_id='+result.name;
|
|||
|
|
_this.wechatVisitorQrcode=_this.host+"/kefu/qrcode?str="+_this.wechatMenuUrl+"&token="+localStorage.getItem("token");
|
|||
|
|
_this.getWechatKefuQrcode();
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#qrcodeLogo2").show();
|
|||
|
|
var info=_this.host+'/chatIndex?kefu_id='+_this.kefuName+'&ent_id='+_this.entId;
|
|||
|
|
$('#dynicQrImg2').empty().qrcode({
|
|||
|
|
text: info, // 二维码的内容
|
|||
|
|
render: "canvas", // 设置渲染方式
|
|||
|
|
width: 180, // 设置宽度: 默认256
|
|||
|
|
height: 180, // 设置高度: 默认256
|
|||
|
|
background: "#ffffff", // 背景颜色
|
|||
|
|
foreground: "#000000", // 前景颜色
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var info=_this.host+'/wechatIndex?kefu_id='+_this.kefuName+'&ent_id='+_this.entId;
|
|||
|
|
$("#qrcodeLogo3").show();
|
|||
|
|
$('#dynicQrImg3').empty().qrcode({
|
|||
|
|
text: info, // 二维码的内容
|
|||
|
|
render: "canvas", // 设置渲染方式
|
|||
|
|
width: 180, // 设置宽度: 默认256
|
|||
|
|
height: 180, // 设置高度: 默认256
|
|||
|
|
background: "#ffffff", // 背景颜色
|
|||
|
|
foreground: "#000000", // 前景颜色
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
getWechatKefuQrcode(){
|
|||
|
|
var _this=this;
|
|||
|
|
sendAjax("/wechat/showQrcode","get",{entId:this.entId,sceneName:"kf_"+this.kefuName},function(result){
|
|||
|
|
if(result.code==200){
|
|||
|
|
_this.wechatKefuQrcode=result.result.url
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
sendAjax("/wechat/showQrcode","get",{entId:this.systemBussinesId,sceneName:"kf_"+this.kefuName},function(result){
|
|||
|
|
if(result.code==200){
|
|||
|
|
_this.systemWechatKefuQrcode=result.result.url
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getWechatOpenidList(){
|
|||
|
|
var _this=this;
|
|||
|
|
sendAjax("/kefu/wechatOpenidList","get",{},function(result){
|
|||
|
|
_this.openidList=result.result
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
deleteOauth(oauthId){
|
|||
|
|
var _this=this;
|
|||
|
|
sendAjax("/kefu/delWechatOpenid","get",{"oauth_id":oauthId},function(result){
|
|||
|
|
_this.getWechatOpenidList();
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
handleTabClick(tab, event){
|
|||
|
|
let _this=this;
|
|||
|
|
if(tab.name=="wechat"){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
reqAuthcode(){
|
|||
|
|
this.$message({
|
|||
|
|
message: "开发中",
|
|||
|
|
type: 'error'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
copyText(text){
|
|||
|
|
copyText(text);
|
|||
|
|
this.$message({
|
|||
|
|
message: "success",
|
|||
|
|
type: 'success'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
mounted:function(){
|
|||
|
|
let _this=this;
|
|||
|
|
//监听页面显示隐藏
|
|||
|
|
document.addEventListener('visibilitychange', function(){
|
|||
|
|
var visibility = document.visibilityState;
|
|||
|
|
if(visibility == 'visible'){
|
|||
|
|
_this.getWechatOpenidList();
|
|||
|
|
}else if(visibility == 'hidden'){
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
created: function () {
|
|||
|
|
this.kefuInfo();
|
|||
|
|
this.getWechatOpenidList();
|
|||
|
|
let tabActive=getQuery("tab");
|
|||
|
|
if (tabActive!="") this.tabActive=tabActive;
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
{{template "setting_bottom" .}}
|