chore: PC杂项更新(App组件/筹码图片/更新服务/入口页/socket.io)
Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
+13
@@ -1,12 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app" @click="getLastTime">
|
<div id="app" @click="getLastTime">
|
||||||
<router-view/>
|
<router-view/>
|
||||||
|
<CustomerServiceWindow ref="csWindow" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
import CustomerServiceWindow from './components/updateService/CustomerServiceWindow.vue'
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
components: {
|
||||||
|
CustomerServiceWindow
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
routeName: null,
|
routeName: null,
|
||||||
@@ -18,6 +23,14 @@ export default {
|
|||||||
|
|
||||||
mounted: function() {
|
mounted: function() {
|
||||||
var _this=this;
|
var _this=this;
|
||||||
|
|
||||||
|
// 监听打开客服窗口的全局事件
|
||||||
|
this.$root.$on('openCustomerService', () => {
|
||||||
|
if (this.$refs.csWindow) {
|
||||||
|
this.$refs.csWindow.open();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
clearInterval(window['checkLoginTime']);
|
clearInterval(window['checkLoginTime']);
|
||||||
setTimeout(function(){
|
setTimeout(function(){
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 82 KiB |
@@ -2,11 +2,22 @@
|
|||||||
<div class="updatepwd animated bounceInUp" >
|
<div class="updatepwd animated bounceInUp" >
|
||||||
<div class="title"> {{Language.tip_service}} <button class="close-btn" @click="offPop()">◀ {{Language.close}}</button></div>
|
<div class="title"> {{Language.tip_service}} <button class="close-btn" @click="offPop()">◀ {{Language.close}}</button></div>
|
||||||
<div class="lang-set-box">
|
<div class="lang-set-box">
|
||||||
<span class="title">點擊以下圖片聯繫在線客服</span>
|
<span class="title">在线客服</span>
|
||||||
<a :href="webconfig.customerLink+'&username='+userInfo.nickname+'&nickname='+userInfo.nickname" target="_blank">
|
<div class="service-options">
|
||||||
<img class="s-code" :src="webconfig.ServerQrcode||''"></a>
|
<button class="service-btn" @click="openChatWindow">
|
||||||
|
<i class="icon">💬</i>
|
||||||
|
<span>在线聊天</span>
|
||||||
|
</button>
|
||||||
|
<a v-if="webconfig.customerLink" :href="webconfig.customerLink+'&username='+userInfo.nickname+'&nickname='+userInfo.nickname" target="_blank" class="service-btn">
|
||||||
|
<i class="icon">🔗</i>
|
||||||
|
<span>外部客服</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div v-if="webconfig.ServerQrcode" class="qrcode-section">
|
||||||
|
<span class="subtitle">扫码联系客服</span>
|
||||||
|
<img class="s-code" :src="webconfig.ServerQrcode">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
@@ -28,6 +39,13 @@ export default {
|
|||||||
this.$store.dispatch('updatemainPop',{type:'',ishow:false});
|
this.$store.dispatch('updatemainPop',{type:'',ishow:false});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
openChatWindow(){
|
||||||
|
// 关闭当前弹窗
|
||||||
|
this.offPop();
|
||||||
|
// 通过全局事件打开客服窗口(App.vue中的组件)
|
||||||
|
this.$root.$emit('openCustomerService');
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['webconfig','Language','userInfo'])
|
...mapState(['webconfig','Language','userInfo'])
|
||||||
@@ -41,8 +59,33 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.s-code{ width: 100%;}
|
.s-code{ width: 200px; margin-top: 10px;}
|
||||||
.lang-set-box{padding: 10px; min-height: 100px; text-align: center; margin-top:-35px}
|
.lang-set-box{padding: 20px; min-height: 100px; text-align: center; margin-top:-35px}
|
||||||
|
.lang-set-box .title{display: block; font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 20px;}
|
||||||
|
.lang-set-box .subtitle{display: block; font-size: 14px; color: #d9ac6b; margin-top: 20px; margin-bottom: 10px;}
|
||||||
|
|
||||||
|
.service-options{display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;}
|
||||||
|
.service-btn{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 120px;
|
||||||
|
height: 100px;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.service-btn:hover{transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.3);}
|
||||||
|
.service-btn .icon{font-size: 32px; margin-bottom: 8px;}
|
||||||
|
.service-btn span{font-size: 14px; font-weight: bold;}
|
||||||
|
|
||||||
|
.qrcode-section{margin-top: 20px;}
|
||||||
|
|
||||||
.updatepwd .btn-item.lang-btn{background: #ccc;}
|
.updatepwd .btn-item.lang-btn{background: #ccc;}
|
||||||
.updatepwd .btn-item.lang-btn.active{ color: #0a4629;
|
.updatepwd .btn-item.lang-btn.active{ color: #0a4629;
|
||||||
background-color: #00e45f;
|
background-color: #00e45f;
|
||||||
|
|||||||
@@ -12,10 +12,10 @@
|
|||||||
<img src="../common/image/entrance/electricthrow.jpg">
|
<img src="../common/image/entrance/electricthrow.jpg">
|
||||||
<span class="btn" >電投登錄入口</span>
|
<span class="btn" >電投登錄入口</span>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="item right" :class="{'hover':itemIndex==3}" @click="goUrl(2,webconfig.agentUrl)" @mouseenter="ItemHover(3)" @mouseleave="ItemHover(2)">
|
<!-- <div class="item right" :class="{'hover':itemIndex==3}" @click="goUrl(2,webconfig.agentUrl)" @mouseenter="ItemHover(3)" @mouseleave="ItemHover(2)">
|
||||||
<img src="../common/image/entrance/agent.jpg">
|
<img src="../common/image/entrance/agent.jpg">
|
||||||
<span class="btn" >代理端登錄入口</span>
|
<span class="btn" >代理端登錄入口</span>
|
||||||
</div>
|
</div> -->
|
||||||
<img class="qrcode animated slideInUp" :src="webconfig.entranceQrcode">
|
<img class="qrcode animated slideInUp" :src="webconfig.entranceQrcode">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -266,6 +266,46 @@ const mutations = {
|
|||||||
$store.dispatch("updateOneTab", { sendMode, ...data });
|
$store.dispatch("updateOneTab", { sendMode, ...data });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// 客服系统 - 连接成功
|
||||||
|
socket_chat_connected(state, data) {
|
||||||
|
console.log('[Vuex] 收到 chat.connected 事件:', data);
|
||||||
|
// 触发自定义事件,让组件可以监听
|
||||||
|
if (window.__chatConnectedCallback) {
|
||||||
|
window.__chatConnectedCallback(data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 客服系统 - 会话分配
|
||||||
|
socket_chat_session_assigned(state, data) {
|
||||||
|
console.log('[Vuex] 收到 chat.session.assigned 事件:', data);
|
||||||
|
if (window.__chatSessionAssignedCallback) {
|
||||||
|
window.__chatSessionAssignedCallback(data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 客服系统 - 新消息
|
||||||
|
socket_chat_message_new(state, data) {
|
||||||
|
console.log('[Vuex] 收到 chat.message.new 事件:', data);
|
||||||
|
if (window.__chatMessageNewCallback) {
|
||||||
|
window.__chatMessageNewCallback(data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 客服系统 - 会话结束
|
||||||
|
socket_chat_session_ended(state, data) {
|
||||||
|
console.log('[Vuex] 收到 chat.session.ended 事件:', data);
|
||||||
|
if (window.__chatSessionEndedCallback) {
|
||||||
|
window.__chatSessionEndedCallback(data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 客服系统 - 离线通知
|
||||||
|
socket_chat_offline_notice(state, data) {
|
||||||
|
console.log('[Vuex] 收到 chat.offline_notice 事件:', data);
|
||||||
|
if (window.__chatOfflineNoticeCallback) {
|
||||||
|
window.__chatOfflineNoticeCallback(data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 客服系统 - 心跳响应
|
||||||
|
socket_chat_pong(state, data) {
|
||||||
|
// 心跳响应,不需要处理
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const actions = {
|
const actions = {
|
||||||
|
|||||||
Reference in New Issue
Block a user