335 lines
7.4 KiB
JavaScript
335 lines
7.4 KiB
JavaScript
/**
|
|
* @Descripttion: app升级弹框
|
|
* @Version: 1.0.0
|
|
* @Author: leefine
|
|
*/
|
|
|
|
import config from '@/upgrade-config.js'
|
|
import upgrade from './upgrade'
|
|
|
|
const {
|
|
title = '发现新版本',
|
|
confirmText = '立即更新',
|
|
cancelTtext = '稍后再说',
|
|
confirmBgColor = '#409eff',
|
|
showCancel = true,
|
|
titleAlign = 'left',
|
|
descriAlign = 'left',
|
|
icon
|
|
} = config.upgrade;
|
|
|
|
class AppDialog {
|
|
constructor() {
|
|
this.maskEl = {}
|
|
this.popupEl = {}
|
|
this.screenHeight = 600;
|
|
this.popupHeight = 230;
|
|
this.popupWidth = 300;
|
|
this.viewWidth = 260;
|
|
this.descrTop = 130;
|
|
this.viewPadding = 20;
|
|
this.iconSize = 80;
|
|
this.titleHeight = 30;
|
|
this.textHeight = 18;
|
|
this.textSpace = 10;
|
|
this.popupContent = []
|
|
this.apkUrl = '';
|
|
}
|
|
|
|
// 显示
|
|
show(apkUrl, changelog, latestVersion = '') {
|
|
this.drawView(changelog)
|
|
this.maskEl.show()
|
|
this.popupEl.show()
|
|
this.apkUrl = apkUrl;
|
|
this.latestVersion = latestVersion || '';
|
|
}
|
|
|
|
// 隐藏
|
|
hide() {
|
|
this.maskEl.hide()
|
|
this.popupEl.hide()
|
|
}
|
|
|
|
// 绘制
|
|
drawView(changelog) {
|
|
this.screenHeight = plus.screen.resolutionHeight;
|
|
this.popupWidth = plus.screen.resolutionWidth * 0.8;
|
|
this.popupHeight = this.viewPadding * 3 + this.iconSize + 100;
|
|
this.viewWidth = this.popupWidth - this.viewPadding * 2;
|
|
this.descrTop = this.viewPadding + this.iconSize + this.titleHeight;
|
|
this.popupContent = [];
|
|
|
|
if (icon) {
|
|
this.popupContent.push({
|
|
id: 'logo',
|
|
tag: 'img',
|
|
src: icon,
|
|
position: {
|
|
top: '0px',
|
|
left: (this.popupWidth - this.iconSize) / 2 + 'px',
|
|
width: this.iconSize + 'px',
|
|
height: this.iconSize + 'px'
|
|
}
|
|
});
|
|
} else {
|
|
this.popupContent.push({
|
|
id: 'logo',
|
|
tag: 'img',
|
|
src: '_pic/upgrade.png',
|
|
position: {
|
|
top: '0px',
|
|
left: (this.popupWidth - this.iconSize) / 2 + 'px',
|
|
width: this.iconSize + 'px',
|
|
height: this.iconSize + 'px'
|
|
}
|
|
});
|
|
}
|
|
|
|
// 标题
|
|
if (title) {
|
|
this.popupContent.push({
|
|
id: 'title',
|
|
tag: 'font',
|
|
text: title,
|
|
textStyles: {
|
|
size: '18px',
|
|
color: '#333',
|
|
weight: 'bold',
|
|
align: titleAlign
|
|
},
|
|
position: {
|
|
top: this.descrTop - this.titleHeight - this.textSpace + 'px',
|
|
left: this.viewPadding + 'px',
|
|
width: this.viewWidth + 'px',
|
|
height: this.titleHeight + 'px'
|
|
}
|
|
})
|
|
} else {
|
|
this.descrTop -= this.titleHeight;
|
|
}
|
|
|
|
this.drawText(changelog)
|
|
|
|
// 取消
|
|
if (showCancel) {
|
|
const width = (this.viewWidth - this.viewPadding) / 2;
|
|
const confirmLeft = width + this.viewPadding * 2;
|
|
this.drawBtn('cancel', width, cancelTtext)
|
|
this.drawBtn('confirm', width, confirmText, confirmLeft)
|
|
} else {
|
|
this.drawBtn('confirmBox', this.viewWidth, confirmText)
|
|
}
|
|
|
|
this.drawBox(showCancel)
|
|
}
|
|
|
|
// 描述内容
|
|
drawText(changelog) {
|
|
if (!changelog) return [];
|
|
const textArr = changelog.split('')
|
|
const len = textArr.length;
|
|
let prevNode = 0;
|
|
let nodeWidth = 0;
|
|
let letterWidth = 0;
|
|
const chineseWidth = 14;
|
|
const otherWidth = 7;
|
|
let rowText = [];
|
|
|
|
for (let i = 0; i < len; i++) {
|
|
// 包含中文
|
|
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
|
|
// 包含字母
|
|
let textWidth = ''
|
|
if (letterWidth > 0) {
|
|
textWidth = nodeWidth + chineseWidth + letterWidth * otherWidth;
|
|
letterWidth = 0;
|
|
} else {
|
|
// 不含字母
|
|
textWidth = nodeWidth + chineseWidth;
|
|
}
|
|
|
|
if (textWidth > this.viewWidth) {
|
|
rowArrText(i, chineseWidth)
|
|
} else {
|
|
nodeWidth = textWidth;
|
|
}
|
|
} else {
|
|
// 不含中文
|
|
// 包含换行符
|
|
if (/\n/g.test(textArr[i])) {
|
|
rowArrText(i, 0, 1)
|
|
letterWidth = 0;
|
|
} else if (textArr[i] == '\\' && textArr[i + 1] == 'n') {
|
|
rowArrText(i, 0, 2)
|
|
letterWidth = 0;
|
|
} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {
|
|
// 包含字母数字
|
|
letterWidth += 1;
|
|
const textWidth = nodeWidth + letterWidth * otherWidth;
|
|
if (textWidth > this.viewWidth) {
|
|
const preNode = i + 1 - letterWidth;
|
|
rowArrText(preNode, letterWidth * otherWidth)
|
|
letterWidth = 0;
|
|
}
|
|
} else {
|
|
if (nodeWidth + otherWidth > this.viewWidth) {
|
|
rowArrText(i, otherWidth)
|
|
} else {
|
|
nodeWidth += otherWidth;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (prevNode < len) {
|
|
rowArrText(len, -1)
|
|
}
|
|
this.drawDesc(rowText)
|
|
|
|
function rowArrText(i, nWidth = 0, type = 0) {
|
|
const typeVal = type > 0 ? 'break' : 'text';
|
|
|
|
rowText.push({
|
|
type: typeVal,
|
|
content: changelog.substring(prevNode, i)
|
|
})
|
|
|
|
if (nWidth >= 0) {
|
|
prevNode = i + type;
|
|
nodeWidth = nWidth;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 描述
|
|
drawDesc(rowText) {
|
|
rowText.forEach((item, index) => {
|
|
if (index > 0) {
|
|
this.descrTop += this.textHeight;
|
|
this.popupHeight += this.textHeight;
|
|
}
|
|
|
|
this.popupContent.push({
|
|
id: 'content' + index + 1,
|
|
tag: 'font',
|
|
text: item.content,
|
|
textStyles: {
|
|
size: '14px',
|
|
color: '#666',
|
|
align: descriAlign
|
|
},
|
|
position: {
|
|
top: this.descrTop + 'px',
|
|
left: this.viewPadding + 'px',
|
|
width: this.viewWidth + 'px',
|
|
height: this.textHeight + 'px'
|
|
}
|
|
})
|
|
|
|
if (item.type == 'break') {
|
|
this.descrTop += this.textSpace;
|
|
this.popupHeight += this.textSpace;
|
|
}
|
|
})
|
|
}
|
|
|
|
// 按钮
|
|
drawBtn(id, width, text, left = this.viewPadding) {
|
|
let boxColor = confirmBgColor,
|
|
textColor = '#ffffff';
|
|
if (id == 'cancel') {
|
|
boxColor = '#f0f0f0';
|
|
textColor = '#666666';
|
|
}
|
|
|
|
this.popupContent.push({
|
|
id: id + 'Box',
|
|
tag: 'rect',
|
|
rectStyles: {
|
|
radius: '6px',
|
|
color: boxColor
|
|
},
|
|
position: {
|
|
bottom: this.viewPadding + 'px',
|
|
left: left + 'px',
|
|
width: width + 'px',
|
|
height: '40px'
|
|
}
|
|
})
|
|
|
|
this.popupContent.push({
|
|
id: id + 'Text',
|
|
tag: 'font',
|
|
text: text,
|
|
textStyles: {
|
|
size: '14px',
|
|
color: textColor
|
|
},
|
|
position: {
|
|
bottom: this.viewPadding + 'px',
|
|
left: left + 'px',
|
|
width: width + 'px',
|
|
height: '40px'
|
|
}
|
|
})
|
|
}
|
|
|
|
// 内容框
|
|
drawBox(showCancel) {
|
|
this.maskEl = new plus.nativeObj.View('maskEl', {
|
|
top: '0px',
|
|
left: '0px',
|
|
width: '100%',
|
|
height: '100%',
|
|
backgroundColor: 'rgba(0,0,0,0.5)'
|
|
});
|
|
|
|
this.popupEl = new plus.nativeObj.View('popupEl', {
|
|
tag: 'rect',
|
|
top: (this.screenHeight - this.popupHeight) / 2 + 'px',
|
|
left: '10%',
|
|
height: this.popupHeight + 'px',
|
|
width: '80%'
|
|
});
|
|
|
|
// 白色背景
|
|
this.popupEl.drawRect({
|
|
color: '#ffffff',
|
|
radius: '8px'
|
|
}, {
|
|
top: this.iconSize / 2 + 'px',
|
|
height: this.popupHeight - this.iconSize / 2 + 'px'
|
|
});
|
|
|
|
this.popupEl.draw(this.popupContent);
|
|
|
|
this.popupEl.addEventListener('click', e => {
|
|
const maxTop = this.popupHeight - this.viewPadding;
|
|
const maxLeft = this.popupWidth - this.viewPadding;
|
|
const buttonWidth = (this.viewWidth - this.viewPadding) / 2;
|
|
if (e.clientY > maxTop - 40 && e.clientY < maxTop) {
|
|
if (showCancel) {
|
|
// 取消：记住已跳过的版本，登录页自动检查不再弹出
|
|
if (e.clientX > this.viewPadding && e.clientX < this.viewPadding + buttonWidth) {
|
|
if (this.latestVersion) {
|
|
uni.setStorageSync('appUpdateDismissedVersion', String(this.latestVersion));
|
|
}
|
|
}
|
|
// 确定
|
|
if (e.clientX > maxLeft - buttonWidth && e.clientX < maxLeft) {
|
|
upgrade.checkOs(this.apkUrl)
|
|
}
|
|
} else {
|
|
if (e.clientX > this.viewPadding && e.clientX < maxLeft) {
|
|
upgrade.checkOs(this.apkUrl)
|
|
}
|
|
}
|
|
this.hide()
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
export default new AppDialog()
|