206 lines
7.7 KiB
JavaScript
206 lines
7.7 KiB
JavaScript
//@ts-ignore
|
||
import qrcode from './weapp-qrcode.js';
|
||
import dayjs from 'dayjs';
|
||
export default OakComponent({
|
||
isList: false,
|
||
properties: {
|
||
url: '',
|
||
expiresAt: 0,
|
||
filename: '',
|
||
tips: '',
|
||
size: 280,
|
||
loading: false,
|
||
disableDownload: false,
|
||
onRefresh: undefined,
|
||
onDownload: undefined,
|
||
disabled: false,
|
||
color: '#000000',
|
||
bgColor: '#ffffff',
|
||
maskColor: 'rgba(255,255,255,0.96)',
|
||
maskText: '',
|
||
maskTextColor: 'rgba(0,0,0,0.88)',
|
||
mode: 'default',
|
||
},
|
||
lifetimes: {
|
||
ready() {
|
||
const { color, bgColor } = this.props;
|
||
this.getQrCodeURL(color, bgColor);
|
||
},
|
||
},
|
||
listeners: {
|
||
'color,bgColor'(prev, next) {
|
||
if (prev.color !== next.color || prev.bgColor !== next.bgColor) {
|
||
this.getQrCodeURL(next.color, next.bgColor);
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getQrCodeURL(color, bgColor) {
|
||
const { url, size } = this.props;
|
||
if (process.env.OAK_PLATFORM === 'wechatMp') {
|
||
const isBase64 = /data:image\/[\w|\W]+(;base64,)[\w|\W]*/.test(url);
|
||
if (isBase64) {
|
||
return;
|
||
}
|
||
const qrCodeURL = qrcode.drawImg(url, {
|
||
typeNumber: 4,
|
||
errorCorrectLevel: 'L',
|
||
size: size,
|
||
color,
|
||
bgColor
|
||
});
|
||
this.setState({
|
||
qrCodeURL,
|
||
});
|
||
}
|
||
},
|
||
onDownload() {
|
||
const { url } = this.props;
|
||
const { qrCodeURL } = this.state;
|
||
let base64Data = url;
|
||
if (qrCodeURL) {
|
||
base64Data = qrCodeURL;
|
||
}
|
||
const pureBase64 = base64Data.replace(/^data:image\/\w+;base64,/, '');
|
||
this.saveBase64Image(pureBase64);
|
||
},
|
||
// 保存Base64图片到相册
|
||
saveBase64Image(base64Data) {
|
||
const that = this;
|
||
const { filename } = this.props;
|
||
const name = filename || `temp_image_${Date.now()}.png`;
|
||
// 1. 定义文件路径
|
||
const filePath = `${wx.env.USER_DATA_PATH}/${name}`;
|
||
// 2. 获取文件系统管理器
|
||
const fs = wx.getFileSystemManager();
|
||
// 3. 写入临时文件
|
||
// 注意：写入前需确保Base64数据已经去掉了数据URL前缀（如"data:image/png;base64,"）
|
||
fs.writeFile({
|
||
filePath: filePath,
|
||
data: base64Data,
|
||
encoding: 'base64',
|
||
success(res) {
|
||
// 文件写入成功后，检查并保存到相册
|
||
that.checkAuthAndSave(filePath);
|
||
},
|
||
fail(err) {
|
||
// console.error('写入文件失败', err);
|
||
wx.showToast({
|
||
title: that.t('Save failed, error occurred while writing file'),
|
||
icon: 'none',
|
||
});
|
||
},
|
||
});
|
||
},
|
||
// 检查相册权限并保存
|
||
checkAuthAndSave(filePath) {
|
||
const that = this;
|
||
// 1. 检查是否已授权
|
||
wx.getSetting({
|
||
success(res) {
|
||
if (res.authSetting['scope.writePhotosAlbum']) {
|
||
// 已授权，直接保存
|
||
that.saveImageToAlbum(filePath);
|
||
}
|
||
else {
|
||
// 未授权，申请权限
|
||
wx.authorize({
|
||
scope: 'scope.writePhotosAlbum',
|
||
success() {
|
||
// 授权成功，保存
|
||
that.saveImageToAlbum(filePath);
|
||
},
|
||
fail(err) {
|
||
// console.error('授权失败', err);
|
||
// 引导用户手动开启
|
||
wx.showModal({
|
||
title: that.t('tip'),
|
||
content: that.t('You need to authorize the permission to save the album in order to save the pictures'),
|
||
showCancel: false,
|
||
success(modalRes) {
|
||
if (modalRes.confirm) {
|
||
// 打开设置页面
|
||
wx.openSetting({
|
||
success(settingRes) {
|
||
if (settingRes.authSetting['scope.writePhotosAlbum']) {
|
||
wx.showModal({
|
||
title: that.t('tip'),
|
||
content: that.t('Authorization successful'),
|
||
showCancel: false,
|
||
});
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
});
|
||
},
|
||
});
|
||
}
|
||
},
|
||
fail(err) {
|
||
// console.error('获取设置失败', err);
|
||
},
|
||
});
|
||
},
|
||
// 执行保存到相册的操作
|
||
saveImageToAlbum(filePath) {
|
||
const that = this;
|
||
wx.saveImageToPhotosAlbum({
|
||
filePath: filePath,
|
||
success(res) {
|
||
wx.showToast({
|
||
title: that.t('Save successful'),
|
||
icon: 'success',
|
||
duration: 2000,
|
||
});
|
||
},
|
||
fail(err) {
|
||
// console.error('保存到相册失败', err);
|
||
if (err.errMsg.includes('cancel')) {
|
||
return;
|
||
}
|
||
let errMsg = that.t('Save fail');
|
||
if (err.errMsg.includes('fail auth deny') ||
|
||
err.errMsg.includes('fail:auth denied')) {
|
||
errMsg = that.t('Album permission denied, please reauthorize');
|
||
}
|
||
wx.showToast({
|
||
title: errMsg,
|
||
icon: 'none',
|
||
duration: 2000,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
},
|
||
formData({ features, props }) {
|
||
const { url, expiresAt } = props;
|
||
const isBase64 = /data:image\/[\w|\W]+(;base64,)[\w|\W]*/.test(url);
|
||
let expired = false;
|
||
let expiresAtStr = '';
|
||
if (expiresAt) {
|
||
const diff = dayjs(expiresAt).diff(dayjs(), 'days');
|
||
if (diff > 0) {
|
||
expiresAtStr = dayjs(expiresAt).format('YYYY年MM月DD日 HH:mm');
|
||
expired = false;
|
||
}
|
||
else {
|
||
const diff2 = dayjs(expiresAt).diff(dayjs(), 'minutes');
|
||
expiresAtStr = dayjs(expiresAt).format('YYYY年MM月DD日 HH:mm');
|
||
if (diff2 > 0) {
|
||
expired = false;
|
||
}
|
||
else {
|
||
expired = true;
|
||
}
|
||
}
|
||
}
|
||
return {
|
||
isBase64,
|
||
expired,
|
||
expiresAtStr,
|
||
};
|
||
},
|
||
});
|