Skip to content

S
SuperMan
Commit acf39998 authored by youjie's avatar youjie
Browse files
Options

优化智能客服按钮

parent 2d70f934
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 5 deletions
index.html
View file @ acf39998
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<script src="/static/UE/ueditor.all.js"></script> <script src="/static/UE/ueditor.all.js"></script>
<script src="/static/UE/lang/zh-cn/zh-cn.js"></script> <script src="/static/UE/lang/zh-cn/zh-cn.js"></script>
<script src="/static/UE/ueditor.parse.min.js"></script> <script src="/static/UE/ueditor.parse.min.js"></script>
<script> <!-- <script>
window.difyChatbotConfig = { window.difyChatbotConfig = {
token: 'RrfZrrXKACVg4HpB', token: 'RrfZrrXKACVg4HpB',
baseUrl: 'http://dify.oytour.com' baseUrl: 'http://dify.oytour.com'
...@@ -42,17 +42,23 @@ ...@@ -42,17 +42,23 @@
src="http://dify.oytour.com/embed.min.js" src="http://dify.oytour.com/embed.min.js"
id="RrfZrrXKACVg4HpB" id="RrfZrrXKACVg4HpB"
defer> defer>
</script> </script> -->
<title></title> <title></title>
</head> </head>
<style> <style>
#dify-chatbot-bubble-button { /* #dify-chatbot-bubble-button {
background-color: #1C64F2 !important; background-color: #1C64F2 !important;
position: fixed!important;
right: -29px!important;
transition: right 1s;
}
#dify-chatbot-bubble-button:hover {
right: 5px!important;
} }
#dify-chatbot-bubble-window { #dify-chatbot-bubble-window {
width: 24rem !important; width: 24rem !important;
height: 40rem !important; height: 40rem !important;
} } */
</style> </style>
<body> <body>
......
src/App.vue
View file @ acf39998
...@@ -12,11 +12,16 @@ ...@@ -12,11 +12,16 @@
<div class="showMyCareer" v-if="showCareer"> <div class="showMyCareer" v-if="showCareer">
<mycareer :show-close="true" :uid="careerId" @close="closeCareer"></mycareer> <mycareer :show-close="true" :uid="careerId" @close="closeCareer"></mycareer>
</div> </div>
<customerService v-show="showCustomerService" @close="showCustomerService=false"/>
<img @click="showCustomerService=!showCustomerService"
class="customerServiceButton"
src="./assets/img/kefu1.png" alt=""/>
</div> </div>
</template> </template>
<script> <script>
var sUserAgent = navigator.userAgent; var sUserAgent = navigator.userAgent;
if ( if (
sUserAgent.indexOf("Android") > -1 || sUserAgent.indexOf("Android") > -1 ||
...@@ -35,6 +40,7 @@ ...@@ -35,6 +40,7 @@
} }
import chosenOpenMode from "./components/commonPage/chosenOpenMode"; import chosenOpenMode from "./components/commonPage/chosenOpenMode";
import mycareer from "./components/champion/mycareer"; import mycareer from "./components/champion/mycareer";
import customerService from './components/commonPage/customerService/index';
import { import {
clearInterval clearInterval
} from "timers"; } from "timers";
...@@ -42,7 +48,8 @@ ...@@ -42,7 +48,8 @@
name: "App", name: "App",
components: { components: {
chosenOpenMode, chosenOpenMode,
mycareer mycareer,
customerService
}, },
watch: { watch: {
'window.location.ancestorOrigins': { 'window.location.ancestorOrigins': {
...@@ -83,6 +90,7 @@ ...@@ -83,6 +90,7 @@
careerId: 0, careerId: 0,
isRed: false, isRed: false,
typeSystem: 0, typeSystem: 0,
showCustomerService: false,
}; };
}, },
methods: { methods: {
...@@ -425,5 +433,18 @@ ...@@ -425,5 +433,18 @@
.colorRed{ .colorRed{
color: red; color: red;
} }
.customerServiceButton{
width: 48px;
height: auto;
position: fixed;
right: -26px;
bottom: 20px;
z-index: 33;
transition: right .5s;
cursor: pointer;
}
.customerServiceButton:hover{
right: 3px;
}
</style> </style>
src/components/commonPage/customerService/index.vue 0 → 100644
View file @ acf39998
<template>
<div class="dialogPptistVisible-box" style="width: 100%;height: 100%;">
<div style="position: relative;width: 800px;">
<span style="opacity: 0;">1</span>
<div class="item">
<div class="itemBox">
<i class="el-icon-close" style="color: #E95252; font-size: 20px;" @click="close()"></i>
</div>
</div>
</div>
<iframe id="myTemplateUrl" name="myTemplateUrl" :src="Url" class="TemplateIframe">
</iframe>
</div>
</template>
<script>
export default {
// props: ['Url'],
data() {
return {
dialogPptistVisible: false,
userInfo: {},
TemplateUrl: '',
TemplateUrlImg: '',
isPostMessage: false,
isPostMessageImg: false,
Url: 'http://dify.oytour.com/chatbot/RrfZrrXKACVg4HpB',
}
},
watch: {
// Url: {
// handler: function (val, oldVal) {
// if (document.all.myTemplateUrl) {
// if (this.Url && this.Url != '') {
// document.all.myTemplateUrl.src = this.Url + `&t=${new Date().getTime()}`
// }
// }
// },
// deep: true,
// immediate: true
// },
},
mounted() {
},
methods: {
close() {
this.$emit('close')
}
}
}
</script>
<style scoped>
.dialogPptistVisible-box {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
}
.closePptist-box {
position: fixed;
z-index: 1001;
left: 0;
right: 0;
top: 0;
height: 30px;
background: #fff;
border-bottom: 1px solid #eee;
}
.closePptist {
padding: 0 30px;
text-align: right;
margin: auto;
position: relative;
}
.closePptist i {
display: inline-block;
padding: 5px 10px;
font-size: 20px;
position: absolute;
right: 20px;
cursor: pointer;
}
.TemplateIframe {
border: none;
width: 800px;
height: 600px;
background: rgb(243, 246, 251);
z-index: 1002;
border-radius: 10px;
}
.item{
position: absolute;
right: -40px;
top: -10px;
z-index: 99;
}
.itemBox{
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
text-align: center;
line-height: 33px;
cursor: pointer;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment