463 lines
14 KiB
Vue
463 lines
14 KiB
Vue
<script>
|
||
import auth from 'common/js/auth.js';
|
||
import colorList from 'common/js/style_color.js'
|
||
import { Weixin } from 'common/js/wx-jssdk.js';
|
||
|
||
export default {
|
||
mixins: [auth],
|
||
onLaunch: function(options) {
|
||
// 处理uniacid存储
|
||
if(options.query.uniacid){
|
||
uni.setStorageSync('uniacid', options.query.uniacid);
|
||
}
|
||
uni.hideTabBar();
|
||
|
||
// #ifdef MP
|
||
const updateManager = uni.getUpdateManager();
|
||
updateManager.onCheckForUpdate(() => {});
|
||
updateManager.onUpdateReady((res) => {
|
||
uni.showModal({
|
||
title: '更新提示',
|
||
content: '新版本已经准备好，是否重启应用？',
|
||
success(res) {
|
||
if (res.confirm) updateManager.applyUpdate();
|
||
}
|
||
});
|
||
});
|
||
updateManager.onUpdateFailed(() => {});
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
if (uni.getSystemInfoSync().platform == 'ios') {
|
||
uni.setStorageSync('initUrl', location.href);
|
||
}
|
||
this.$nextTick(() => {
|
||
this.createIndependentChatbot();
|
||
});
|
||
// #endif
|
||
|
||
// 网络状态监听
|
||
uni.onNetworkStatusChange((res) => {
|
||
if (!res.isConnected) {
|
||
uni.showModal({
|
||
title: '网络失去链接',
|
||
content: '请检查网络链接',
|
||
showCancel: false
|
||
});
|
||
}
|
||
});
|
||
|
||
// 初始化store
|
||
this.$store.dispatch('init');
|
||
|
||
// 批量同步store数据
|
||
const storeKeys = [
|
||
{key: 'themeStyle', mutation: 'setThemeStyle', handler: (v) => colorList[v]},
|
||
{key: 'addonIsExist', mutation: 'setAddonIsExist'},
|
||
{key: 'defaultImg', mutation: 'setDefaultImg'},
|
||
{key: 'siteInfo', mutation: 'setSiteInfo'},
|
||
{key: 'globalStoreConfig', mutation: 'setGlobalStoreConfig'},
|
||
{key: 'globalStoreInfo', mutation: 'setGlobalStoreInfo'},
|
||
{key: 'defaultStoreInfo', mutation: 'setDefaultStoreInfo'},
|
||
{key: 'servicerConfig', mutation: 'setServicerConfig'},
|
||
{key: 'copyright', mutation: 'setCopyright'},
|
||
{key: 'mapConfig', mutation: 'setMapConfig'},
|
||
{key: 'token', mutation: 'setToken'},
|
||
{key: 'memberInfo', mutation: 'setMemberInfo'}
|
||
];
|
||
storeKeys.forEach(item => {
|
||
const value = uni.getStorageSync(item.key);
|
||
if (value) {
|
||
const data = item.handler ? item.handler(value) : value;
|
||
this.$store.commit(item.mutation, data);
|
||
}
|
||
});
|
||
|
||
// 会员信息存在时同步购物车
|
||
if (uni.getStorageSync('memberInfo')) {
|
||
this.$store.dispatch('getCartNumber');
|
||
}
|
||
|
||
// #ifdef H5
|
||
if (!uni.getStorageSync('memberInfo')) {
|
||
this.getAuthInfo();
|
||
}
|
||
if (this.$store.state.token) {
|
||
this.$api.sendRequest({
|
||
url: '/api/member/info',
|
||
success: (res) => {
|
||
if (res.code >= 0) {
|
||
this.$store.commit('setMemberInfo', res.data);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-ALIPAY
|
||
if (options.query?.m) uni.setStorageSync('source_member', options.query.m);
|
||
// #endif
|
||
},
|
||
onShow: function(options) {
|
||
// #ifdef MP
|
||
this.getAuthInfo();
|
||
if (this.$store.state.token) {
|
||
this.$api.sendRequest({
|
||
url: '/api/member/info',
|
||
success: (res) => {
|
||
if (res.code >= 10) {
|
||
this.$store.commit('setMemberInfo', res.data);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-ALIPAY
|
||
if (options.query?.m) uni.setStorageSync('source_member', options.query.m);
|
||
// #endif
|
||
},
|
||
onHide: function() {},
|
||
methods: {
|
||
// 安全的 HTML 转义（防止 XSS）
|
||
htmlEncode(str) {
|
||
if (typeof str !== 'string') return '';
|
||
return str
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, ''');
|
||
},
|
||
|
||
createIndependentChatbot() {
|
||
console.log('创建响应式智能客服窗口...');
|
||
|
||
// 清除已存在的元素
|
||
document.querySelectorAll('[id^="independent-chat-"]').forEach(el => el.remove());
|
||
|
||
// ========== 按钮 ==========
|
||
const chatBtn = document.createElement('div');
|
||
chatBtn.id = 'independent-chat-btn';
|
||
chatBtn.innerHTML = '💬';
|
||
chatBtn.style.cssText = `
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
position: fixed;
|
||
bottom: calc(180px + env(safe-area-inset-bottom, 0px));
|
||
right: 0px;
|
||
z-index: 999999;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
font-size: 24px;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
||
background: linear-gradient(135deg, #ff9a9e, #fad0c4, #a1c4fd, #c2e9fb, #d4fc79, #96e6a1);
|
||
background-size: 300% 300%;
|
||
animation: rainbowPulse 4s ease infinite;
|
||
user-select: none;
|
||
-webkit-user-drag: none;
|
||
`;
|
||
document.body.appendChild(chatBtn);
|
||
|
||
// ========== 聊天窗口 ==========
|
||
const chatWindow = document.createElement('div');
|
||
chatWindow.id = 'independent-chat-window';
|
||
chatWindow.style.cssText = `
|
||
position: fixed;
|
||
z-index: 999998;
|
||
border-radius: 12px;
|
||
background: white;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
||
display: none;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
`;
|
||
document.body.appendChild(chatWindow);
|
||
|
||
// 头部
|
||
const chatHeader = document.createElement('div');
|
||
chatHeader.style.cssText = `
|
||
height: 50px;
|
||
background: #1C64F2;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 16px;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
`;
|
||
chatHeader.innerHTML = `<span>智能客服</span><span id="close-chat-window" style="cursor:pointer;font-size:24px;">×</span>`;
|
||
chatWindow.appendChild(chatHeader);
|
||
|
||
// 内容区
|
||
const chatContent = document.createElement('div');
|
||
chatContent.style.cssText = `
|
||
flex: 1;
|
||
padding: 16px;
|
||
overflow-y: auto;
|
||
background: #f9fafb;
|
||
`;
|
||
chatContent.innerHTML = `
|
||
<div style="display:flex;margin-bottom:16px;">
|
||
<div style="width:36px;height:36px;border-radius:50%;background:#1C64F2;color:white;display:flex;align-items:center;justify-content:center;margin-right:8px;">🤖</div>
|
||
<div style="background:white;padding:8px 12px;border-radius:8px;max-width:70%;">您好！有什么可以帮到您的吗？</div>
|
||
</div>
|
||
`;
|
||
chatWindow.appendChild(chatContent);
|
||
|
||
// 输入区
|
||
const chatInputArea = document.createElement('div');
|
||
chatInputArea.style.cssText = `
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 16px;
|
||
border-top: 1px solid #eee;
|
||
`;
|
||
const chatInput = document.createElement('input');
|
||
chatInput.type = 'text';
|
||
chatInput.placeholder = '请输入您的问题...';
|
||
chatInput.style.cssText = `
|
||
flex: 1;
|
||
height: 36px;
|
||
padding: 0 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 18px;
|
||
outline: none;
|
||
font-size: 14px;
|
||
`;
|
||
const sendBtn = document.createElement('button');
|
||
sendBtn.innerText = '发送'; // 横排文字
|
||
sendBtn.style.cssText = `
|
||
margin-left: 12px;
|
||
padding: 6px 16px;
|
||
background: #1C64F2;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 18px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
white-space: nowrap; /* 防止换行 */
|
||
text-align: center; /* 居中 */
|
||
line-height: 1.5; /* 调整高度 */
|
||
`;
|
||
chatInputArea.appendChild(chatInput);
|
||
chatInputArea.appendChild(sendBtn);
|
||
chatWindow.appendChild(chatInputArea);
|
||
|
||
// ========== 响应式尺寸控制 ==========
|
||
const updateWindowSize = () => {
|
||
const isMobile = window.innerWidth <= 768;
|
||
if (isMobile) {
|
||
chatWindow.style.width = 'calc(90vw - 40px)';
|
||
chatWindow.style.maxWidth = '400px';
|
||
chatWindow.style.height = '70vh';
|
||
chatWindow.style.maxHeight = '600px';
|
||
chatWindow.style.right = '5vw';
|
||
chatWindow.style.bottom = 'calc(86px + env(safe-area-inset-bottom, 0px))';
|
||
} else {
|
||
chatWindow.style.width = '360px';
|
||
chatWindow.style.height = '520px';
|
||
chatWindow.style.maxWidth = 'none';
|
||
chatWindow.style.maxHeight = 'none';
|
||
chatWindow.style.right = '20px';
|
||
chatWindow.style.bottom = '86px';
|
||
}
|
||
chatContent.style.maxHeight = 'calc(100% - 110px)';
|
||
};
|
||
|
||
// 初始化并监听窗口变化
|
||
updateWindowSize();
|
||
window.addEventListener('resize', updateWindowSize);
|
||
|
||
// ========== 交互逻辑 ==========
|
||
let isShow = false;
|
||
const toggleChat = () => {
|
||
isShow = !isShow;
|
||
chatWindow.style.display = isShow ? 'flex' : 'none';
|
||
if (isShow) {
|
||
updateWindowSize(); // 确保旋转/切换后尺寸正确
|
||
chatInput.focus();
|
||
}
|
||
};
|
||
|
||
chatBtn.onclick = toggleChat;
|
||
document.getElementById('close-chat-window').onclick = () => {
|
||
isShow = false;
|
||
chatWindow.style.display = 'none';
|
||
};
|
||
|
||
document.addEventListener('click', (e) => {
|
||
if (!chatBtn.contains(e.target) && !chatWindow.contains(e.target)) {
|
||
isShow = false;
|
||
chatWindow.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
// 发送消息
|
||
const sendMessage = () => {
|
||
const msg = chatInput.value.trim();
|
||
if (!msg) return;
|
||
const safeMsg = this.htmlEncode(msg);
|
||
chatContent.insertAdjacentHTML('beforeend', `
|
||
<div style="display:flex;margin-bottom:16px;justify-content:flex-end;">
|
||
<div style="background:#1C64F2;color:white;padding:8px 12px;border-radius:8px;max-width:70%;">
|
||
${safeMsg}
|
||
</div>
|
||
<div style="width:36px;height:36px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;margin-left:8px;">👤</div>
|
||
</div>
|
||
`);
|
||
chatInput.value = '';
|
||
chatContent.scrollTop = chatContent.scrollHeight;
|
||
setTimeout(() => {
|
||
chatContent.insertAdjacentHTML('beforeend', `
|
||
<div style="display:flex;margin-bottom:16px;">
|
||
<div style="width:36px;height:36px;border-radius:50%;background:#1C64F2;color:white;display:flex;align-items:center;justify-content:center;margin-right:8px;">🤖</div>
|
||
<div style="background:white;padding:8px 12px;border-radius:8px;max-width:70%;">
|
||
已收到您的问题："${safeMsg}"，我们会尽快回复！
|
||
</div>
|
||
</div>
|
||
`);
|
||
chatContent.scrollTop = chatContent.scrollHeight;
|
||
}, 800);
|
||
};
|
||
|
||
sendBtn.onclick = sendMessage;
|
||
chatInput.onkeydown = (e) => {
|
||
if (e.key === 'Enter') {
|
||
e.preventDefault();
|
||
sendMessage();
|
||
}
|
||
};
|
||
|
||
console.log('响应式智能客服窗口创建完成');
|
||
},
|
||
|
||
getAuthInfo() {
|
||
// #ifdef H5
|
||
if (this.$util.isWeiXin()) {
|
||
this.$util.getUrlCode(urlParams => {
|
||
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams.source_member);
|
||
if (urlParams.code === undefined) {
|
||
this.$api.sendRequest({
|
||
url: '/wechat/api/wechat/authcode',
|
||
data: { redirect_url: location.href, scopes: 'snsapi_userinfo' },
|
||
success: (res) => res.code >= 0 && (location.href = res.data)
|
||
});
|
||
} else {
|
||
this.$api.sendRequest({
|
||
url: '/wechat/api/wechat/authcodetoopenid',
|
||
data: { code: urlParams.code },
|
||
success: (res) => {
|
||
if (res.code >= 0) {
|
||
const data = {};
|
||
res.data.openid && (data.wx_openid = res.data.openid);
|
||
res.data.unionid && (data.wx_unionid = res.data.unionid);
|
||
res.data.userinfo && Object.assign(data, res.data.userinfo);
|
||
this.authLogin(data);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
// #endif
|
||
// #ifdef MP
|
||
this.getCode(data => this.authLogin(data, 'authOnlyLogin'));
|
||
// #endif
|
||
},
|
||
authLogin(data, type = 'authLogin') {
|
||
uni.getStorageSync('source_member') && (data.source_member = uni.getStorageSync('source_member'));
|
||
uni.setStorageSync('authInfo', data);
|
||
this.$api.sendRequest({
|
||
url: type === 'authLogin' ? '/api/login/auth' : '/api/login/authonlylogin',
|
||
data,
|
||
success: (res) => {
|
||
if (res.code >= 0) {
|
||
this.$store.commit('setToken', res.data.token);
|
||
this.getMemberInfo();
|
||
this.$store.dispatch('getCartNumber');
|
||
}
|
||
}
|
||
});
|
||
},
|
||
shareConfig() {
|
||
this.$api.sendRequest({
|
||
url: '/wechat/api/wechat/share',
|
||
data: { url: window.location.href },
|
||
success: (res) => {
|
||
if (res.code === 0) {
|
||
const wxJS = new Weixin();
|
||
wxJS.init(res.data.jssdk_config);
|
||
const share_data = JSON.parse(JSON.stringify(res.data.share_config.data));
|
||
share_data && wxJS.setShareData({
|
||
title: share_data.title,
|
||
desc: share_data.desc,
|
||
link: share_data.link,
|
||
imgUrl: this.$util.img(share_data.imgUrl)
|
||
}, res => console.log(res));
|
||
res.data.share_config.permission.hideOptionMenu
|
||
? wxJS.weixin.hideOptionMenu()
|
||
: wxJS.weixin.showOptionMenu();
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getMemberInfo() {
|
||
this.$api.sendRequest({
|
||
url: '/api/member/info',
|
||
success: (res) => res.code >= 0 && this.$store.commit('setMemberInfo', res.data)
|
||
});
|
||
}
|
||
},
|
||
watch: {
|
||
$route: {
|
||
handler(newName, oldName) {
|
||
this.$util.isWeiXin() && this.shareConfig();
|
||
},
|
||
immediate: true
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import './common/css/main.scss';
|
||
@import './common/css/iconfont.css';
|
||
@import './common/css/icondiy.css';
|
||
@import './common/css/icon/extend.css';
|
||
|
||
page {
|
||
background: #f4f6fa;
|
||
}
|
||
body {
|
||
padding-bottom: 80px !important;
|
||
}
|
||
|
||
/* 聊天窗口滚动条美化 */
|
||
#independent-chat-window div::-webkit-scrollbar {
|
||
width: 4px;
|
||
}
|
||
#independent-chat-window div::-webkit-scrollbar-thumb {
|
||
background: #ddd;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* 彩虹动画 */
|
||
@keyframes rainbowPulse {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* 强制固定定位，防止被其他样式干扰 */
|
||
#independent-chat-btn,
|
||
#independent-chat-window {
|
||
position: fixed !important;
|
||
}
|
||
</style> |