You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
441 lines
12 KiB
441 lines
12 KiB
// pages/qrcode/index.js
|
|
const API = require('../../utils/api.js');
|
|
|
|
Page({
|
|
data: {
|
|
qrCodeUrl: '', // 二维码图片URL
|
|
userInfo: {
|
|
projectName: '未登录',
|
|
name: '未登录',
|
|
phoneNumber: '未登录'
|
|
},
|
|
imageLoading: false,
|
|
imageError: false
|
|
},
|
|
|
|
onLoad: function (options) {
|
|
// 页面加载时的初始化逻辑
|
|
console.log('二维码页面加载，options:', options);
|
|
|
|
// 检查是否是通过内部按钮进入的
|
|
// 如果不是内部进入（即通过分享图片进入），则重定向到首页
|
|
if (!options.from || options.from !== 'internal') {
|
|
console.log('非内部进入，重定向到首页');
|
|
wx.redirectTo({
|
|
url: '/pages/index/index'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 加载用户信息
|
|
this.loadUserInfo();
|
|
},
|
|
|
|
onShow: function () {
|
|
// 页面显示时的逻辑
|
|
// 重新加载用户信息，确保信息是最新的
|
|
this.loadUserInfo();
|
|
},
|
|
|
|
// 加载用户信息
|
|
loadUserInfo: function () {
|
|
// 从本地存储获取用户信息
|
|
const userInfo = wx.getStorageSync('userInfo') || {};
|
|
const phoneNumber = userInfo.phoneNumber || wx.getStorageSync('phoneNumber') || '';
|
|
|
|
if (phoneNumber) {
|
|
// 使用全局缓存方法获取业务员信息
|
|
const appInstance = getApp();
|
|
appInstance.getPersonnelInfo(phoneNumber).then(res => {
|
|
console.log('查询personnel表结果:', res);
|
|
if (res && res.success && res.data && res.data.length > 0) {
|
|
const personnelInfo = res.data[0];
|
|
this.setData({
|
|
userInfo: {
|
|
projectName: personnelInfo.projectName || '未提供',
|
|
name: personnelInfo.name || '未提供',
|
|
phoneNumber: phoneNumber
|
|
}
|
|
});
|
|
} else {
|
|
// 如果查询失败，使用本地存储的用户信息
|
|
this.setData({
|
|
userInfo: {
|
|
projectName: '未提供',
|
|
name: userInfo.nickName || userInfo.name || '未提供',
|
|
phoneNumber: phoneNumber
|
|
}
|
|
});
|
|
}
|
|
}).catch(err => {
|
|
console.error('查询personnel表失败:', err);
|
|
// 如果查询失败，使用本地存储的用户信息
|
|
this.setData({
|
|
userInfo: {
|
|
projectName: '未提供',
|
|
name: userInfo.nickName || userInfo.name || '未提供',
|
|
phoneNumber: phoneNumber
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
// 如果没有电话号码，提示用户登录
|
|
wx.showToast({
|
|
title: '请先登录',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
|
|
// 生成二维码的函数
|
|
generateQRCode: function () {
|
|
// 设置图片加载状态
|
|
this.setData({
|
|
imageLoading: true,
|
|
imageError: false
|
|
});
|
|
|
|
// 生成包含会话ID的URL
|
|
const sessionId = 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
|
|
// 获取用户信息
|
|
const { userInfo } = this.data;
|
|
let inviterName = userInfo.name || '';
|
|
let inviterPhone = userInfo.phoneNumber || '';
|
|
let inviterProjectName = userInfo.projectName || '';
|
|
|
|
// 构建邀请URL，包含会话ID和邀请者信息
|
|
const inviteUrl = `http://8.137.125.67:3008/certificate.html?sessionId=${encodeURIComponent(sessionId)}&inviter=${encodeURIComponent(inviterName)}&inviterPhone=${encodeURIComponent(inviterPhone)}&inviterProjectName=${encodeURIComponent(inviterProjectName)}`;
|
|
|
|
// 使用api.qrserver.com生成二维码
|
|
const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodeURIComponent(inviteUrl)}`;
|
|
|
|
console.log('生成的二维码URL:', qrCodeUrl);
|
|
|
|
// 更新二维码图片
|
|
this.setData({
|
|
qrCodeUrl: qrCodeUrl
|
|
}, () => {
|
|
console.log('二维码URL已更新:', this.data.qrCodeUrl);
|
|
// 显示成功提示
|
|
wx.showToast({
|
|
title: '邀请二维码生成成功！',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
});
|
|
},
|
|
|
|
// 图片加载成功事件
|
|
onImageLoad: function () {
|
|
console.log('二维码图片加载成功');
|
|
this.setData({
|
|
imageLoading: false,
|
|
imageError: false
|
|
});
|
|
},
|
|
|
|
// 图片加载失败事件
|
|
onImageError: function (e) {
|
|
console.error('二维码图片加载失败:', e);
|
|
this.setData({
|
|
imageLoading: false,
|
|
imageError: true
|
|
});
|
|
wx.showToast({
|
|
title: '二维码图片加载失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
},
|
|
|
|
// 长按二维码保存到相册
|
|
onQRCodeLongPress: function () {
|
|
const { qrCodeUrl } = this.data;
|
|
|
|
if (!qrCodeUrl) {
|
|
wx.showToast({
|
|
title: '请先生成二维码',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 显示加载提示
|
|
wx.showLoading({
|
|
title: '保存中...',
|
|
mask: true
|
|
});
|
|
|
|
// 下载图片到本地临时文件
|
|
wx.downloadFile({
|
|
url: qrCodeUrl,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
// 创建 canvas 绘制带有提示文字和边框的图片
|
|
this.createQRCodeWithFrame(res.tempFilePath);
|
|
} else {
|
|
wx.hideLoading();
|
|
console.error('下载图片失败，状态码:', res.statusCode);
|
|
wx.showToast({
|
|
title: '下载图片失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
wx.hideLoading();
|
|
console.error('下载图片失败:', err);
|
|
wx.showToast({
|
|
title: '保存失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 绘制带有边框和提示文字的二维码图片
|
|
drawQRCodeWithFrame: function (qrCodePath, callback) {
|
|
// 创建 canvas 上下文
|
|
const ctx = wx.createCanvasContext('shareCanvas');
|
|
|
|
// 设置 canvas 尺寸
|
|
const canvasWidth = 375;
|
|
const canvasHeight = 450;
|
|
|
|
// 绘制背景
|
|
ctx.setFillStyle('#ffffff');
|
|
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
|
|
|
|
// 绘制外边框
|
|
ctx.setStrokeStyle('#4CAF50');
|
|
ctx.setLineWidth(10);
|
|
ctx.strokeRect(25, 25, canvasWidth - 50, canvasHeight - 50);
|
|
|
|
// 绘制标题
|
|
ctx.setFontSize(24);
|
|
ctx.setFillStyle('#4CAF50');
|
|
ctx.setTextAlign('center');
|
|
ctx.fillText('合格证二维码', canvasWidth / 2, 80);
|
|
|
|
// 绘制副标题
|
|
ctx.setFontSize(16);
|
|
ctx.setFillStyle('#66BB6A');
|
|
ctx.fillText('扫描二维码填写合格证信息', canvasWidth / 2, 110);
|
|
|
|
// 绘制二维码图片
|
|
const qrSize = 200;
|
|
const qrX = (canvasWidth - qrSize) / 2;
|
|
const qrY = 140;
|
|
ctx.drawImage(qrCodePath, qrX, qrY, qrSize, qrSize);
|
|
|
|
// 绘制底部提示文字
|
|
ctx.setFontSize(14);
|
|
ctx.setFillStyle('#999999');
|
|
ctx.fillText('四川又鸟蛋贸易有限公司', canvasWidth / 2, 370);
|
|
ctx.fillText('技术支持', canvasWidth / 2, 395);
|
|
|
|
// 绘制完成
|
|
ctx.draw(false, () => {
|
|
// 将 canvas 转换为图片
|
|
wx.canvasToTempFilePath({
|
|
canvasId: 'shareCanvas',
|
|
success: (res) => {
|
|
callback(null, res.tempFilePath);
|
|
},
|
|
fail: (err) => {
|
|
callback(err, null);
|
|
}
|
|
});
|
|
});
|
|
},
|
|
|
|
// 长按二维码保存到相册
|
|
onQRCodeLongPress: function () {
|
|
const { qrCodeUrl } = this.data;
|
|
|
|
if (!qrCodeUrl) {
|
|
wx.showToast({
|
|
title: '请先生成二维码',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 显示加载提示
|
|
wx.showLoading({
|
|
title: '保存中...',
|
|
mask: true
|
|
});
|
|
|
|
// 下载图片到本地临时文件
|
|
wx.downloadFile({
|
|
url: qrCodeUrl,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
// 绘制带有边框和提示文字的二维码图片
|
|
this.drawQRCodeWithFrame(res.tempFilePath, (err, tempFilePath) => {
|
|
if (err) {
|
|
wx.hideLoading();
|
|
console.error('canvas 转换为图片失败:', err);
|
|
wx.showToast({
|
|
title: '保存失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 保存图片到相册
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: tempFilePath,
|
|
success: () => {
|
|
wx.hideLoading();
|
|
wx.showToast({
|
|
title: '保存成功',
|
|
icon: 'success',
|
|
duration: 2000
|
|
});
|
|
},
|
|
fail: (err) => {
|
|
wx.hideLoading();
|
|
console.error('保存图片到相册失败:', err);
|
|
|
|
// 检查是否是权限问题
|
|
if (err.errMsg.includes('auth deny')) {
|
|
wx.showModal({
|
|
title: '保存失败',
|
|
content: '需要相册权限才能保存二维码，请在设置中开启',
|
|
confirmText: '去设置',
|
|
cancelText: '取消',
|
|
success: (modalRes) => {
|
|
if (modalRes.confirm) {
|
|
wx.openSetting({
|
|
success: (settingRes) => {
|
|
console.log('设置结果:', settingRes);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
wx.showToast({
|
|
title: '保存失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
wx.hideLoading();
|
|
console.error('下载图片失败，状态码:', res.statusCode);
|
|
wx.showToast({
|
|
title: '下载图片失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
wx.hideLoading();
|
|
console.error('下载图片失败:', err);
|
|
wx.showToast({
|
|
title: '保存失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 分享二维码
|
|
shareQRCode: function () {
|
|
const { qrCodeUrl } = this.data;
|
|
|
|
if (!qrCodeUrl) {
|
|
wx.showToast({
|
|
title: '请先生成二维码',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 显示加载提示
|
|
wx.showLoading({
|
|
title: '准备分享...',
|
|
mask: true
|
|
});
|
|
|
|
// 下载图片到本地临时文件
|
|
wx.downloadFile({
|
|
url: qrCodeUrl,
|
|
success: (res) => {
|
|
if (res.statusCode === 200) {
|
|
// 绘制带有边框和提示文字的二维码图片
|
|
this.drawQRCodeWithFrame(res.tempFilePath, (err, tempFilePath) => {
|
|
if (err) {
|
|
wx.hideLoading();
|
|
console.error('canvas 转换为图片失败:', err);
|
|
wx.showToast({
|
|
title: '分享失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
return;
|
|
}
|
|
|
|
wx.hideLoading();
|
|
// 打开分享面板
|
|
wx.showShareImageMenu({
|
|
path: tempFilePath,
|
|
success: () => {
|
|
console.log('分享成功');
|
|
},
|
|
fail: (err) => {
|
|
console.error('分享失败:', err);
|
|
wx.showToast({
|
|
title: '分享失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
});
|
|
} else {
|
|
wx.hideLoading();
|
|
console.error('下载图片失败，状态码:', res.statusCode);
|
|
wx.showToast({
|
|
title: '下载图片失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
wx.hideLoading();
|
|
console.error('下载图片失败:', err);
|
|
wx.showToast({
|
|
title: '分享失败，请重试',
|
|
icon: 'none',
|
|
duration: 2000
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
// 跳转到二维码合集页面
|
|
goToQrCollection: function () {
|
|
wx.redirectTo({
|
|
url: '/pages/collection/index?from=internal'
|
|
});
|
|
}
|
|
|
|
});
|