371 lines
12 KiB
Vue
371 lines
12 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);
|
||
}
|
||
// DOM加载完成后，创建纯前端聊天窗口（无任何Dify残留）
|
||
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
|
||
// 修复语法错误：l0 → 10
|
||
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: {
|
||
/**
|
||
* 纯前端聊天机器人（无Dify依赖）
|
||
*/
|
||
createIndependentChatbot() {
|
||
console.log('创建纯前端聊天窗口...');
|
||
|
||
// 1. 移除所有旧的Dify相关元素（彻底清理残留）
|
||
document.querySelectorAll('[id^="dify-"]').forEach(el => el.remove());
|
||
|
||
// 2. 创建聊天按钮
|
||
const chatBtn = document.createElement('div');
|
||
chatBtn.id = 'independent-chat-btn';
|
||
chatBtn.style = `
|
||
width: 56px; height: 56px; border-radius: 50%; background: #1C64F2;
|
||
position: fixed; bottom: 30px; right: 30px; 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.15);
|
||
`;
|
||
chatBtn.innerText = '💬';
|
||
document.body.appendChild(chatBtn);
|
||
|
||
// 3. 创建聊天窗口
|
||
const chatWindow = document.createElement('div');
|
||
chatWindow.id = 'independent-chat-window';
|
||
chatWindow.style = `
|
||
width: 360px; height: 520px; border-radius: 12px; background: white;
|
||
position: fixed; bottom: 100px; right: 30px; z-index: 999998;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,0.15); display: none;
|
||
flex-direction: column; overflow: hidden;
|
||
`;
|
||
document.body.appendChild(chatWindow);
|
||
|
||
// 3.1 标题栏
|
||
const chatHeader = document.createElement('div');
|
||
chatHeader.style = `
|
||
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: 20px;">×</span>
|
||
`;
|
||
chatWindow.appendChild(chatHeader);
|
||
|
||
// 3.2 聊天内容区
|
||
const chatContent = document.createElement('div');
|
||
chatContent.style = `
|
||
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);
|
||
|
||
// 3.3 输入区
|
||
const chatInputArea = document.createElement('div');
|
||
chatInputArea.style = `
|
||
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 = `
|
||
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 = `
|
||
margin-left: 12px; padding: 6px 16px; background: #1C64F2;
|
||
color: white; border: none; border-radius: 18px; cursor: pointer;
|
||
font-size: 14px;
|
||
`;
|
||
chatInputArea.appendChild(chatInput);
|
||
chatInputArea.appendChild(sendBtn);
|
||
chatWindow.appendChild(chatInputArea);
|
||
|
||
// 4. 绑定事件
|
||
let isShow = false;
|
||
chatBtn.onclick = () => {
|
||
isShow = !isShow;
|
||
chatWindow.style.display = isShow ? 'flex' : 'none';
|
||
};
|
||
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';
|
||
}
|
||
});
|
||
|
||
// 5. 发送消息逻辑
|
||
const sendMessage = () => {
|
||
const msg = chatInput.value.trim();
|
||
if (!msg) return;
|
||
// 显示用户消息
|
||
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%;">
|
||
${msg}
|
||
</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%;">
|
||
已收到您的问题："${msg}"，我们会尽快回复！
|
||
</div>
|
||
</div>
|
||
`);
|
||
chatContent.scrollTop = chatContent.scrollHeight;
|
||
}, 800);
|
||
};
|
||
sendBtn.onclick = sendMessage;
|
||
chatInput.onkeydown = (e) => e.key === 'Enter' && 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;
|
||
}
|
||
</style> |