6 changed files with 524 additions and 22 deletions
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<div class="content"> |
||||
|
<div class="code-content-wrap"> |
||||
|
<textarea id="NormalCodeTextarealink1" class="code" rows="1">{{ siteUrl }}/chat/index</textarea> |
||||
|
<div class="other-wrap"> |
||||
|
<a class="btn btn-blue btn-large mr10" :href="linkUrl3" target="_blank">点击体验</a> |
||||
|
<a class="btn btn-blue btn-large" href="javascript:void(0);" @click="getCopy('NormalCodeTextarealink1')"><span>复制代码</span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Alink', |
||||
|
|
||||
|
props: { |
||||
|
tokeninfo: {}, |
||||
|
siteUrl: '' |
||||
|
}, |
||||
|
computed: { |
||||
|
linkUrl1() { |
||||
|
return `${location.origin}/chat/index?token=${this.tokeninfo.token_md5}&noCanClose=1`; |
||||
|
}, |
||||
|
linkUrl2() { |
||||
|
return `${location.origin}/chat/index?token=${this.tokeninfo.token_md5}&noCanClose=1&deviceType=Mobile`; |
||||
|
}, |
||||
|
linkUrl3() { |
||||
|
return `${location.origin}/chat/index?token=${this.tokeninfo.token_md5}&noCanClose=1`; |
||||
|
} |
||||
|
}, |
||||
|
mounted() {}, |
||||
|
methods: { |
||||
|
getCopy(id) { |
||||
|
this.$emit('cgetCopy', id); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,66 @@ |
|||||
|
<template> |
||||
|
<div class="content"> |
||||
|
<p class="font-w">使用简介</p> |
||||
|
<p class="text-i">网页内快速接入客服，让网页拥有客服窗口，请把一下代码复制到网页最底部。</p> |
||||
|
<Divider /> |
||||
|
<p class="typetitle">获取代码</p> |
||||
|
|
||||
|
<div class="fenlei"> |
||||
|
<div class="code-content-wrap"> |
||||
|
<textarea id="NormalCodeTextarea1" class="code" rows="22"> |
||||
|
<script> |
||||
|
(function() { |
||||
|
_s = document.createElement('script'); |
||||
|
_s.src="{{ siteUrl }}/customerServer.js" |
||||
|
_s.onload = function(){ |
||||
|
var option = { |
||||
|
"authInit":true, |
||||
|
openUrl: '{{ siteUrl }}', |
||||
|
isShowTip: true, // 初始化成功后，界面右下角会自动创建 “联系客服按钮”， 如无需默认展示，则填写false即可,默认为true |
||||
|
mobileIcon: '', // 手机端悬浮客服图片 |
||||
|
pcIcon: '', // pc端悬浮客服图片 |
||||
|
windowStyle:'center',//默认空 右下角小弹窗， center 普通中间弹窗样式 |
||||
|
}; |
||||
|
var canCustomerServer = new initCustomerServer(option); |
||||
|
canCustomerServer.init(); |
||||
|
} |
||||
|
document.head.appendChild(_s) |
||||
|
})(); |
||||
|
</script> |
||||
|
</textarea |
||||
|
> |
||||
|
<div class="other-wrap"> |
||||
|
<a class="btn btn-blue btn-large mr10" href="javascript:void(0);" @click="jiazai">点击体验</a> |
||||
|
<a class="btn btn-blue btn-large" href="javascript:void(0);" @click="getCopy('NormalCodeTextarea1')"><span>复制代码</span></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
import { defineProps, defineEmits } from 'vue'; |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
tokeninfo?: any; |
||||
|
siteUrl?: string; |
||||
|
}>(); |
||||
|
|
||||
|
const emit = defineEmits<{ (e: 'cgetCopy', id: string): void }>(); |
||||
|
|
||||
|
function jiazai() { |
||||
|
const token = props.tokeninfo?.token_md5 || ''; |
||||
|
window.open(`${location.origin}/chat/index?token=${token}&noCanClose=1`); |
||||
|
} |
||||
|
|
||||
|
function getCopy(id: string) { |
||||
|
emit('cgetCopy', id); |
||||
|
} |
||||
|
</script> |
||||
|
<style> |
||||
|
.a { |
||||
|
display: none; |
||||
|
display: block; |
||||
|
border-radius: 8px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,255 @@ |
|||||
|
<template> |
||||
|
<div class="getCode_container"> |
||||
|
<div class="content"> |
||||
|
<el-card shadow="never"> |
||||
|
<el-collapse v-model="activeName" accordion> |
||||
|
<el-collapse-item title="超链接" name="1"> |
||||
|
<alink :tokeninfo="token" :site-url="siteUrl" @cget-copy="getCopy"></alink> |
||||
|
</el-collapse-item> |
||||
|
<el-collapse-item title="网页内嵌" name="2"> |
||||
|
<wangye :tokeninfo="token" :site-url="siteUrl" @cget-copy="getCopy"></wangye> |
||||
|
</el-collapse-item> |
||||
|
</el-collapse> |
||||
|
</el-card> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref, computed, onMounted, getCurrentInstance } from 'vue'; |
||||
|
// import { useStore } from 'vuex'; |
||||
|
// import { adminAppCustomer, appReset } from '@/api/kefu'; |
||||
|
import alink from './components/alink.vue'; |
||||
|
import wangye from './components/wangye.vue'; |
||||
|
// import kaifa from './components/kaifa'; |
||||
|
// import setting from './components/setting'; |
||||
|
|
||||
|
const activeName = ref('1'); |
||||
|
|
||||
|
const { proxy } = getCurrentInstance() as any; |
||||
|
|
||||
|
// const store = useStore(); |
||||
|
// const isMobile = computed(() => store.state.media?.isMobile); |
||||
|
// const categoryId = computed(() => store.state.userLevel?.categoryId); |
||||
|
// const labelWidth = computed(() => (isMobile.value ? undefined : 75)); |
||||
|
// const labelPosition = computed(() => (isMobile.value ? 'top' : 'left')); |
||||
|
|
||||
|
const token = ref<any>(''); |
||||
|
const canfrime = ref(false); |
||||
|
const srcUrl = ref(`${location.origin}/customerServer.js`); |
||||
|
const siteUrl = ref(`${location.origin}`); |
||||
|
const cloneTip = ref(false); |
||||
|
const canCustomerServer = ref(''); |
||||
|
|
||||
|
const linkUrl = computed(() => `${location.origin}/chat/index?token=${token.value?.token_md5}&noCanClose=1`); |
||||
|
|
||||
|
// onMounted(() => { |
||||
|
// getAdminAppCustomer(); |
||||
|
// }); |
||||
|
|
||||
|
// async function getAdminAppCustomer() { |
||||
|
// try { |
||||
|
// const mod: any = await import('@/api/kefu'); |
||||
|
// if (mod && typeof mod.adminAppCustomer === 'function') { |
||||
|
// const res: any = await mod.adminAppCustomer(); |
||||
|
// if (res.status === 200 && res.data?.list?.length) { |
||||
|
// token.value = res.data.list[0]; |
||||
|
// } |
||||
|
// } |
||||
|
// } catch (e) { |
||||
|
// // ignore if module not present |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
function resetToken() { |
||||
|
canfrime.value = true; |
||||
|
} |
||||
|
|
||||
|
// async function confirme() { |
||||
|
// if (!token.value?.id) return; |
||||
|
// try { |
||||
|
// const mod: any = await import('@/api/kefu'); |
||||
|
// if (mod && typeof mod.appReset === 'function') { |
||||
|
// const res: any = await mod.appReset(token.value.id); |
||||
|
// if (res?.status === 200) { |
||||
|
// token.value = { ...token.value, token: res.data.token }; |
||||
|
// proxy?.$Message?.success('token 已重置'); |
||||
|
// } |
||||
|
// } |
||||
|
// } catch (e) { |
||||
|
// // ignore |
||||
|
// } |
||||
|
// canfrime.value = false; |
||||
|
// } |
||||
|
|
||||
|
function cancel() { |
||||
|
canfrime.value = false; |
||||
|
} |
||||
|
|
||||
|
function getCopy(id: string) { |
||||
|
const elem = document.getElementById(id); |
||||
|
if (!elem) return; |
||||
|
const content = copyToClipboard(elem as HTMLElement); |
||||
|
if (content) cloneTip.value = true; |
||||
|
} |
||||
|
|
||||
|
function copyToClipboard(elem: HTMLElement) { |
||||
|
const targetId = '_hiddenCopyText_'; |
||||
|
let target: HTMLTextAreaElement | HTMLInputElement | null = null as any; |
||||
|
const tagName = elem.tagName; |
||||
|
const isInput = tagName === 'INPUT' || tagName === 'TEXTAREA'; |
||||
|
let origSelectionStart: number | undefined; |
||||
|
let origSelectionEnd: number | undefined; |
||||
|
|
||||
|
if (isInput) { |
||||
|
target = elem as HTMLInputElement; |
||||
|
origSelectionStart = (elem as HTMLInputElement).selectionStart as number; |
||||
|
origSelectionEnd = (elem as HTMLInputElement).selectionEnd as number; |
||||
|
} else { |
||||
|
target = document.getElementById(targetId) as HTMLTextAreaElement; |
||||
|
if (!target) { |
||||
|
target = document.createElement('textarea'); |
||||
|
target.style.position = 'absolute'; |
||||
|
target.style.left = '-9999px'; |
||||
|
target.style.top = '0'; |
||||
|
target.id = targetId; |
||||
|
document.body.appendChild(target); |
||||
|
} |
||||
|
target.textContent = elem.textContent || ''; |
||||
|
} |
||||
|
|
||||
|
const currentFocus = document.activeElement as HTMLElement | null; |
||||
|
target.focus(); |
||||
|
(target as HTMLTextAreaElement).setSelectionRange(0, (target as HTMLTextAreaElement).value.length); |
||||
|
|
||||
|
let succeed = false; |
||||
|
try { |
||||
|
succeed = document.execCommand('copy'); |
||||
|
} catch (e) { |
||||
|
succeed = false; |
||||
|
} |
||||
|
|
||||
|
if (currentFocus && typeof currentFocus.focus === 'function') { |
||||
|
currentFocus.focus(); |
||||
|
} |
||||
|
|
||||
|
if (isInput && target) { |
||||
|
(elem as HTMLInputElement).setSelectionRange(origSelectionStart as number, origSelectionEnd as number); |
||||
|
} else if (target) { |
||||
|
target.textContent = ''; |
||||
|
} |
||||
|
|
||||
|
proxy?.$Message?.success('已成功复制到粘贴板'); |
||||
|
return succeed; |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.getCode_container { |
||||
|
.content { |
||||
|
width: 100%; |
||||
|
color: #323437; |
||||
|
background: #ffffff; |
||||
|
margin-top: 18px; |
||||
|
font-size: 13px; |
||||
|
padding: 10px; |
||||
|
} |
||||
|
.font-w { |
||||
|
font-weight: 800; |
||||
|
margin: 10px 0; |
||||
|
} |
||||
|
|
||||
|
.text-i { |
||||
|
text-indent: 2em; |
||||
|
} |
||||
|
|
||||
|
.content > p { |
||||
|
margin-bottom: 6px; |
||||
|
} |
||||
|
|
||||
|
.code-content-wrap { |
||||
|
clear: both; |
||||
|
border: 1px solid #e4e4e4; |
||||
|
border-radius: 3px; |
||||
|
padding: 12px 17px; |
||||
|
background-color: #f8f8f8; |
||||
|
} |
||||
|
|
||||
|
.other-wrap { |
||||
|
margin: 4px 0; |
||||
|
text-align: right; |
||||
|
} |
||||
|
|
||||
|
.textarea { |
||||
|
border: none; |
||||
|
/* height: 40px; */ |
||||
|
width: 100%; |
||||
|
outline: 0; |
||||
|
resize: none; |
||||
|
background-color: #f8f8f8; |
||||
|
font-family: Arial; |
||||
|
color: #323437; |
||||
|
line-height: 24px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.code { |
||||
|
border: none; |
||||
|
/* height: 40px; */ |
||||
|
width: 100%; |
||||
|
outline: 0; |
||||
|
resize: none; |
||||
|
background-color: #f8f8f8; |
||||
|
font-family: Arial; |
||||
|
color: #323437; |
||||
|
line-height: 24px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
display: inline-block; |
||||
|
zoom: 1; |
||||
|
padding: 6px 16px; |
||||
|
border: 1px solid #d9dbdc; |
||||
|
border-radius: 2px; |
||||
|
line-height: 1; |
||||
|
color: #323437; |
||||
|
cursor: pointer; |
||||
|
outline: 0; |
||||
|
} |
||||
|
|
||||
|
.btn.btn-blue { |
||||
|
color: #fff; |
||||
|
background-color: #4f97e7; |
||||
|
border-color: #3085e3; |
||||
|
} |
||||
|
|
||||
|
.setting-highlight { |
||||
|
color: #f15755; |
||||
|
margin-left: 5px; |
||||
|
line-height: 30px; |
||||
|
} |
||||
|
.fenlei { |
||||
|
margin: 10px 0; |
||||
|
border: 1px solid #eee; |
||||
|
padding: 30px; |
||||
|
padding-bottom: 10px; |
||||
|
border-radius: 6px; |
||||
|
} |
||||
|
.typetitle { |
||||
|
padding: 4px 7px; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped> |
||||
|
.ivu-modal-confirm { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.modimg { |
||||
|
width: 40px !important; |
||||
|
height: 40px !important; |
||||
|
margin-right: 30px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue