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