566 lines
26 KiB
JavaScript
566 lines
26 KiB
JavaScript
(function (vc) {
|
||
vc.extends({
|
||
el: '#nav',
|
||
data: {
|
||
nav: {
|
||
moreNoticeUrl: '/#/pages/common/noticeManage',
|
||
langs: [{
|
||
name: '中文',
|
||
lang: 'zh-cn'
|
||
}, {
|
||
name: '繁体',
|
||
lang: 'cn'
|
||
}, {
|
||
name: 'english',
|
||
lang: 'en'
|
||
}, {
|
||
name: 'ខ្មែរ',
|
||
lang: 'Khmer'
|
||
}],
|
||
langName: 'Language',
|
||
_currentCommunity: '',
|
||
communityInfos: [],
|
||
storeTypeCd: '',
|
||
catalogs: [],
|
||
},
|
||
loginInfo: {
|
||
logo: '',
|
||
username: '',
|
||
passwd: '',
|
||
validateCode: '',
|
||
errorInfo: '',
|
||
areaId: '86', // 存储选中的国区号值（字符串类型）
|
||
areas: [], // 存储所有国区号选项数据（与addOwner一致
|
||
|
||
},
|
||
// APK下载配置
|
||
appDownloads: {
|
||
owner: {
|
||
name: vc.i18n('业主端应用', 'login'),
|
||
url: '/install/ownerApp.apk', // APK文件路径
|
||
fileName: 'ownerApp.apk'
|
||
},
|
||
property: {
|
||
name: vc.i18n('物业端应用', 'login'),
|
||
url: '/install/propertyApp.apk', // APK文件路径
|
||
fileName: 'propertyApp.apk'
|
||
}
|
||
},
|
||
imgUrlPrefix: '', // 从后端获取的域名前缀
|
||
qrCodeReady: false, // 标记QRCode库是否加载完成
|
||
selectedAreaLabel: '',
|
||
selectedLang: 'zh-cn',
|
||
},
|
||
mounted: function () {
|
||
this._initSysInfo();
|
||
this.initLang();
|
||
},
|
||
|
||
_initEvent: function () {
|
||
$that.$on('errorInfoEvent', function (_errorInfo) {
|
||
$that.loginInfo.errorInfo = _errorInfo;
|
||
console.log('errorInfoEvent 事件被监听', _errorInfo)
|
||
});
|
||
$that.$on('validate_code_component_param_change_event', function (params) {
|
||
for (var tmpAttr in params) {
|
||
$that.loginInfo[tmpAttr] = params[tmpAttr];
|
||
}
|
||
});
|
||
vc.on('login', 'doLogin', function () {
|
||
$that.doLogin();
|
||
})
|
||
|
||
layui.use('form', function () {
|
||
var form = layui.form;
|
||
form.on('select(langSelect)', function (data) {
|
||
console.log('LayUI 捕获到的语言选择值：', data.value);
|
||
const selectedLang = $that.nav.langs.find(lang => lang.lang === data.value);
|
||
if (selectedLang) {
|
||
$that._changeLang(selectedLang);
|
||
} else {
|
||
console.error('未找到匹配的语言：', data.value);
|
||
}
|
||
});
|
||
form.render('select');
|
||
});
|
||
|
||
// 新增：监听 Layui 国区号下拉框的选择事件（通过 lay-filter="areaCodeSelect" 定位）
|
||
layui.form.on('select(areaCodeSelect)', function (data) {
|
||
// data.value：Layui 捕获到的选中值（即 item.statusCd，如 95）
|
||
// data.elem：当前下拉框元素
|
||
console.log('Layui 捕获到的国区号选择值：', data.value);
|
||
|
||
// 关键：手动将 Layui 选中值赋值给 Vue 的 loginInfo.areaId
|
||
$that.loginInfo.areaId = data.value;
|
||
|
||
// 验证赋值结果（确保 Vue 数据已更新）
|
||
console.log('Vue loginInfo.areaId 赋值后：', $that.loginInfo.areaId);
|
||
});
|
||
},
|
||
|
||
_initMethod: function () {
|
||
$that.clearCacheData();
|
||
$that._loadSysInfo();
|
||
|
||
console.log('开始初始化语言设置');
|
||
console.log('开始初始化语言设置111111111111111111111111111111111111');
|
||
$that.initLang();
|
||
|
||
// 初始化语言设置（在页面加载完成后设置select）
|
||
// $that.initLangSelect();
|
||
|
||
// 通过前端方法获取地址前缀
|
||
$that.imgUrlPrefix = $that._getCurrentUrlPrefix();
|
||
console.log("动态获取的地址前缀：", $that.imgUrlPrefix);
|
||
// 加载国区号字典（与addOwner逻辑完全一致）
|
||
vc.getDict(
|
||
'international_area_code_dictionary',
|
||
'link_area_type',
|
||
function (_data) {
|
||
// 关键修改：用$set强制Vue检测数组变化
|
||
$that.$set($that.loginInfo, 'areas', _data);
|
||
$that.$nextTick(() => {
|
||
console.log("DOM更新完毕，可以交互了");
|
||
layui.form.render('select');
|
||
});
|
||
console.log("国区号字典加载成功：", _data);
|
||
if (_data && _data.length > 0) {
|
||
$that.loginInfo.areaId = _data[0].statusCd;
|
||
const defaultItem = _data[0];
|
||
$that.selectedAreaLabel = `+${defaultItem.statusCd} (${defaultItem.name})`;
|
||
}
|
||
},
|
||
function (err) {
|
||
console.error("国区号字典加载失败：", err);
|
||
}
|
||
);
|
||
if (window.QRCode) {
|
||
console.log("qrcode.js加载成功");
|
||
$that.qrCodeReady = true; // 标记库已就绪
|
||
} else {
|
||
console.error("qrcode.js未加载，请检查路径是否正确");
|
||
$that.qrCodeReady = false;
|
||
}
|
||
|
||
},
|
||
|
||
watch: {
|
||
'loginInfo.areaId': function (newVal) {
|
||
const matched = this.loginInfo.areas.find(item => item.statusCd === newVal);
|
||
this.selectedAreaLabel = matched
|
||
? `+${matched.statusCd} (${matched.name})`
|
||
: '';
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
_initSysInfo: function () {
|
||
let sysInfo = vc.getData("java110SystemInfo");
|
||
let _that = this;
|
||
if (!sysInfo) {
|
||
setTimeout(function () {
|
||
sysInfo = vc.getData("java110SystemInfo");
|
||
_that.logo = sysInfo.systemSimpleTitle;
|
||
}, 2000);
|
||
return;
|
||
}
|
||
this.logo = sysInfo.systemSimpleTitle;
|
||
},
|
||
initLang: function () {
|
||
let _lang = vc.getData('JAVA110-LANG');
|
||
console.log('从 localStorage 读取的语言:', _lang);
|
||
|
||
// 如果没有有效语言或语言不在列表中，设置默认值
|
||
if (!_lang || typeof _lang !== 'object' || !_lang.lang || !this.nav.langs.find(lang => lang.lang === _lang.lang)) {
|
||
_lang = {
|
||
name: '中文',
|
||
lang: 'zh-cn'
|
||
};
|
||
vc.saveData('JAVA110-LANG', _lang);
|
||
console.log('未找到有效语言，保存默认语言:', _lang);
|
||
}
|
||
|
||
// 设置 Vue 数据
|
||
this.nav.langName = _lang.name;
|
||
this.selectedLang = _lang.lang;
|
||
console.log('同步 Vue 数据:', {langName: this.nav.langName, selectedLang: this.selectedLang});
|
||
|
||
// 确保 Layui 渲染正确的选中值
|
||
this.$nextTick(() => {
|
||
layui.use('form', function () {
|
||
var form = layui.form;
|
||
form.val('langForm', {
|
||
langSelect: _lang.lang
|
||
});
|
||
form.render('select');
|
||
console.log('LayUI 下拉框渲染完成，选中值:', _lang.lang);
|
||
});
|
||
});
|
||
},
|
||
_changeLang: function (_lang) {
|
||
console.log('切换语言:', _lang);
|
||
vc.saveData('JAVA110-LANG', _lang);
|
||
console.log('保存后 localStorage:', vc.getData('JAVA110-LANG'));
|
||
|
||
// 更新 Vue 数据
|
||
this.nav.langName = _lang.name;
|
||
this.selectedLang = _lang.lang;
|
||
console.log('更新 Vue 数据:', {langName: this.nav.langName, selectedLang: this.selectedLang});
|
||
|
||
// 使用原生 DOM 设置 select 值
|
||
this.$nextTick(() => {
|
||
layui.use('form', function () {
|
||
var form = layui.form;
|
||
var select = document.querySelector('select[name="langSelect"]');
|
||
if (select) {
|
||
select.value = _lang.lang;
|
||
} else {
|
||
console.error('未找到 langSelect 元素');
|
||
}
|
||
form.render('select');
|
||
console.log('LayUI 下拉框更新，选中值:', _lang.lang);
|
||
});
|
||
|
||
setTimeout(() => {
|
||
console.log('测试刷新');
|
||
location.reload();
|
||
}, 100);
|
||
});
|
||
},
|
||
onLangChange: function () {
|
||
const selectedLang = this.nav.langs.find(lang => lang.lang === this.selectedLang);
|
||
if (selectedLang) {
|
||
this._changeLang(selectedLang);
|
||
}
|
||
},
|
||
onAreaInputChange(event) {
|
||
const inputVal = event.target.value;
|
||
|
||
// 匹配输入的文本是否存在于下拉项中
|
||
const matched = this.loginInfo.areas.find(
|
||
item => inputVal === `+${item.statusCd} (${item.name})`
|
||
);
|
||
|
||
if (matched) {
|
||
this.loginInfo.areaId = matched.statusCd; // 设置提交用的真实值
|
||
} else {
|
||
this.loginInfo.areaId = ''; // 未匹配则清空
|
||
}
|
||
|
||
console.log('输入变更，选中areaId:', this.loginInfo.areaId);
|
||
},
|
||
|
||
clearCacheData: function () {
|
||
//todo anfioo
|
||
|
||
let lang = vc.getData('JAVA110-LANG');
|
||
let sys = vc.getData('sysInfo');
|
||
|
||
vc.clearCacheData();
|
||
vc.saveData("JAVA110-LANG", lang);
|
||
vc.saveData("_sysInfo", sys);
|
||
},
|
||
|
||
_loadSysInfo: function () {
|
||
var param = {
|
||
params: {
|
||
sys: 'HC'
|
||
}
|
||
}
|
||
vc.http.get(
|
||
'login',
|
||
'getSysInfo',
|
||
param,
|
||
function (json, res) {
|
||
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
|
||
if (res.status != 200) {
|
||
console.log("加载系统信息失败");
|
||
vc.saveData("_sysInfo", {logo: 'HC'});
|
||
vc.copyObject(json, $that.loginInfo);
|
||
return;
|
||
}
|
||
vc.copyObject(JSON.parse(json), $that.loginInfo);
|
||
//保存到浏览器
|
||
vc.saveData("_sysInfo", JSON.parse(json));
|
||
},
|
||
function (errInfo, error) {
|
||
console.log('请求失败处理');
|
||
vc.saveData("_sysInfo", {logo: 'HC'});
|
||
vc.copyObject(json, $that.loginInfo);
|
||
$that.loginInfo.errorInfo = errInfo;
|
||
});
|
||
},
|
||
// 新增：获取当前页面地址前缀的工具方法
|
||
_getCurrentUrlPrefix: function () {
|
||
const {protocol, hostname, port} = window.location;
|
||
// 拼接基础前缀（协议+主机名）
|
||
let prefix = `${protocol}//${hostname}`;
|
||
// 若有非默认端口（http默认80/https默认443），则拼接端口
|
||
if (port && !(protocol === 'http:' && port === '80') && !(protocol === 'https:' && port === '443')) {
|
||
prefix += `:${port}`;
|
||
}
|
||
return prefix;
|
||
},
|
||
|
||
|
||
// 新增：URL拼接工具方法（处理斜杠问题）
|
||
_joinUrl: function (prefix, path) {
|
||
// 如果前缀为空，直接返回路径
|
||
if (!prefix) return path;
|
||
// 如果路径为空，直接返回前缀
|
||
if (!path) return prefix;
|
||
// 去除前缀末尾的斜杠
|
||
const cleanPrefix = prefix.replace(/\/$/, '');
|
||
// 去除路径开头的斜杠
|
||
const cleanPath = path.replace(/^\//, '');
|
||
// 拼接（中间加一个斜杠）
|
||
return `${cleanPrefix}/${cleanPath}`;
|
||
},
|
||
|
||
|
||
doLogin: function () {
|
||
// 验证国区号（改为areaId）
|
||
if (!vc.notNull($that.loginInfo.areaId)) {
|
||
vc.toast(vc.i18n('请选择国区号', 'login'));
|
||
return;
|
||
}
|
||
if (!vc.notNull($that.loginInfo.username)) {
|
||
vc.toast(vc.i18n('用户名不能为空', 'login'));
|
||
return;
|
||
}
|
||
if (!vc.notNull($that.loginInfo.passwd)) {
|
||
vc.toast(vc.i18n('密码不能为空', 'login'));
|
||
return;
|
||
}
|
||
if (!vc.notNull($that.loginInfo.validateCode)) {
|
||
vc.toast(vc.i18n('验证码不能为空', 'login'));
|
||
return;
|
||
}
|
||
// 拼接国区号（areaId）和用户名
|
||
let loginParam = JSON.parse(JSON.stringify($that.loginInfo));
|
||
// 核心修改：使用areaId拼接（与字段名保持一致）
|
||
loginParam.username = $that.loginInfo.areaId + $that.loginInfo.username;
|
||
|
||
// 2. 关键修改：给 loginInfo 新增 statusCd 字段，值等于 areaId（与后端字段名匹配）
|
||
$that.loginInfo.statusCd = $that.loginInfo.areaId;
|
||
|
||
vc.http.post(
|
||
'login',
|
||
'doLogin?version=2.0',
|
||
JSON.stringify($that.loginInfo), {
|
||
emulateJSON: true
|
||
},
|
||
function (json, res) {
|
||
//vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
|
||
let _json = JSON.parse(json);
|
||
if (_json.code != 0) {
|
||
vc.toast(_json.msg);
|
||
return;
|
||
}
|
||
let _data = _json.data;
|
||
vc.emit('initData', 'loadCommunityInfo', {
|
||
url: '/',
|
||
loginUsers: _data
|
||
});
|
||
},
|
||
function (errInfo, error) {
|
||
console.log('请求失败处理');
|
||
vc.toast(errInfo);
|
||
$that.loginInfo.errorInfo = errInfo;
|
||
});
|
||
},
|
||
_doRegister: function () {
|
||
vc.jumpToPage('/user.html#/pages/frame/register');
|
||
},
|
||
|
||
// 1. 提取独立的二维码生成函数（复用你提供的逻辑，路径写死为百度）
|
||
generateQRCode: function (container, url, size = 80) {
|
||
const qrContent = url;
|
||
// 1. 检查容器是否存在（container 是外层 div）
|
||
if (!container) {
|
||
console.error('二维码生成失败：容器不存在');
|
||
return;
|
||
}
|
||
// 2. 清空容器，动态创建 canvas 元素（关键步骤）
|
||
container.innerHTML = '';
|
||
// 创建 canvas 元素
|
||
const canvas = document.createElement('canvas');
|
||
// 将 canvas 放入容器 div 中
|
||
container.appendChild(canvas);
|
||
// 检查容器是否存在、qrcode库是否就绪
|
||
if (!$that.qrCodeReady) {
|
||
console.error('二维码生成失败：qrcode.js 未加载');
|
||
return;
|
||
}
|
||
// 设置canvas尺寸（适配容器）
|
||
canvas.width = size;
|
||
canvas.height = size;
|
||
|
||
// 调用qrcode.js生成二维码（复用你提供的配置）
|
||
QRCode.toCanvas(canvas, qrContent, {
|
||
width: size,
|
||
margin: 1,
|
||
color: {
|
||
dark: "#000000",
|
||
light: "#ffffff"
|
||
}
|
||
}, function (error) {
|
||
if (error) {
|
||
console.error('生成二维码失败:', error)
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
// 2. 物业端APP下载弹窗（使用新的generateQRCode函数）
|
||
directDownload: function () {
|
||
var content = '<div style="padding: 20px; text-align: center;">' +
|
||
'<p style="margin-bottom: 20px;">' + vc.i18n('请选择要安装的方式', 'login') + '</p>' +
|
||
'<div style="display: flex; justify-content: center; align-items: center; gap: 80px;">' +
|
||
// 二维码区域
|
||
'<div style="text-align: center;">' +
|
||
'<p style="margin-bottom: 10px;">' + vc.i18n('扫描二维码下载', 'login') + '</p>' +
|
||
'<div class="qr-app-option" data-app="property" style="text-align: center; cursor: pointer;">' +
|
||
'<div class="qr-container" style="width: 80px; height: 80px; margin: 0 auto 10px; border: 1px solid #eee;"></div>' +
|
||
'<span>' + vc.i18n('物业端应用', 'login') + '</span>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
// 按钮区域
|
||
'<div style="text-align: center;">' +
|
||
'<p style="margin-bottom: 10px;">' + vc.i18n('点击下载', 'login') + '</p>' +
|
||
'<button class="layui-btn layui-btn-normal download-app-btn" data-app="property" style="margin-bottom: 10px;">' + vc.i18n('物业端APP下载', 'login') + '</button>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
|
||
var index = layer.open({
|
||
type: 1,
|
||
title: vc.i18n('请选择要安装的方式', 'login'),
|
||
area: ['400px', '300px'],
|
||
content: content,
|
||
success: function (layero, index) {
|
||
//获取物业端应用的完整下载URL
|
||
var appType = 'property';
|
||
var appInfo = $that.appDownloads[appType];
|
||
var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
|
||
|
||
// 调用新的二维码生成函数（尺寸80px）
|
||
var qrContainer = layero.find('.qr-container')[0];
|
||
$that.generateQRCode(qrContainer, fullDownloadUrl, 80);
|
||
|
||
// 按钮点击事件（保留原下载逻辑）
|
||
layero.find('.download-app-btn').on('click', function () {
|
||
var appType = $(this).data('app');
|
||
$that.downloadApp(appType);
|
||
layer.close(index);
|
||
});
|
||
layero.find('.qr-app-option').on('click', function () {
|
||
var appType = $(this).data('app');
|
||
var appInfo = $that.appDownloads[appType];
|
||
var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
|
||
// 传递固定的百度链接作为二维码内容
|
||
$that.showQrCode(appType, fullDownloadUrl);
|
||
layer.close(index);
|
||
});
|
||
}
|
||
});
|
||
},
|
||
|
||
// 3. 业主端APP下载弹窗（使用新的generateQRCode函数）
|
||
showQrOptions: function () {
|
||
var content = '<div style="padding: 20px; text-align: center;">' +
|
||
'<p style="margin-bottom: 20px;">' + vc.i18n('请选择要安装的方式', 'login') + '</p>' +
|
||
'<div style="display: flex; justify-content: center; align-items: center; gap: 80px;">' +
|
||
// 二维码区域
|
||
'<div style="text-align: center;">' +
|
||
'<p style="margin-bottom: 10px;">' + vc.i18n('扫描二维码下载', 'login') + '</p>' +
|
||
'<div class="qr-app-option" data-app="owner" style="text-align: center; cursor: pointer;">' +
|
||
'<div class="qr-container" style="width: 80px; height: 80px; margin: 0 auto 10px; border: 1px solid #eee;"></div>' +
|
||
'<span>' + vc.i18n('业主端应用', 'login') + '</span>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
// 按钮区域
|
||
'<div style="text-align: center;">' +
|
||
'<p style="margin-bottom: 10px;">' + vc.i18n('点击下载', 'login') + '</p>' +
|
||
'<button class="layui-btn layui-btn-normal download-app-btn" data-app="owner" style="margin-bottom: 10px;">' + vc.i18n('业主端APP下载', 'login') + '</button>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
var index = layer.open({
|
||
type: 1,
|
||
title: vc.i18n('请选择要安装的方式', 'login'),
|
||
area: ['400px', '300px'],
|
||
content: content,
|
||
success: function (layero, index) {
|
||
// 获取业主端应用的完整下载URL
|
||
var appType = 'owner';
|
||
var appInfo = $that.appDownloads[appType];
|
||
var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
|
||
// 调用新的二维码生成函数（尺寸80px）
|
||
var qrContainer = layero.find('.qr-container')[0];
|
||
$that.generateQRCode(qrContainer, fullDownloadUrl, 80);
|
||
|
||
// 按钮点击事件
|
||
layero.find('.download-app-btn').on('click', function () {
|
||
var appType = $(this).data('app');
|
||
$that.downloadApp(appType);
|
||
layer.close(index);
|
||
});
|
||
layero.find('.qr-app-option').on('click', function () {
|
||
var appType = $(this).data('app');
|
||
var appInfo = $that.appDownloads[appType];
|
||
var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
|
||
// 传递固定的百度链接作为二维码内容
|
||
$that.showQrCode(appType, fullDownloadUrl);
|
||
layer.close(index);
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 4. 大尺寸二维码弹窗（使用新的generateQRCode函数）
|
||
showQrCode: function (appType, apkUrl) {
|
||
var appInfo = $that.appDownloads[appType];
|
||
// 弹窗内容（显示链接）
|
||
var content = '<div style="text-align: center; padding: 20px;">' +
|
||
'<h3>' + appInfo.name + '</h3>' +
|
||
'<div class="large-qr-container" style="width: 200px; height: 200px; margin: 15px auto; border: 1px solid #eee;"></div>' +
|
||
'<p style="color: #333; margin-bottom: 15px;">' + vc.i18n('请使用手机扫描二维码下载', 'login') + '</p>' +
|
||
'<p style="color: #999; font-size: 14px;">' + vc.i18n('链接地址:', 'login') + ' ' + apkUrl + '</p>' +
|
||
'</div>';
|
||
|
||
var index = layer.open({
|
||
type: 1,
|
||
title: appInfo.name + ' - ' + vc.i18n('扫码访问', 'login'),
|
||
area: ['350px', '450px'],
|
||
content: content,
|
||
success: function (layero, index) {
|
||
// 调用新的二维码生成函数（尺寸200px，大尺寸）
|
||
var largeQrContainer = layero.find('.large-qr-container')[0];
|
||
$that.generateQRCode(largeQrContainer, apkUrl, 200);
|
||
}
|
||
});
|
||
},
|
||
|
||
// 下载应用方法
|
||
downloadApp: function (appType) {
|
||
var appInfo = $that.appDownloads[appType];
|
||
var fullDownloadUrl = $that._joinUrl($that.imgUrlPrefix, appInfo.url);
|
||
|
||
// 创建隐藏的下载链接并触发点击
|
||
var link = document.createElement('a');
|
||
link.href = fullDownloadUrl;
|
||
link.download = appInfo.fileName;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
|
||
// 关闭弹窗
|
||
layer.closeAll();
|
||
},
|
||
},
|
||
_destroyedMethod: function () {
|
||
console.log("登录页面销毁调用");
|
||
}
|
||
});
|
||
})(window.vc);
|