ezhizao_dms_app/uni_modules/lgen-upgrade/js_sdk/dialog.js

/**
 * @Descripttion: app升级弹框
 * @Version: 1.0.0
 * @Author: lgen
 */

import config from '@/lgen-config.js'
import upgrade from './Upgrade'

const {
	title='发现新版本',
	confirmText='立即更新',
	cancelTtext='稍后再说',
	confirmBgColor='#409eff',
	showCancel=true,
	titleAlign='left',
	descriAlign='left',
	icon,
	description
}=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){
		this.drawView()
		this.maskEl.show()
		this.popupEl.show()
		this.apkUrl=apkUrl;
	}
	
	// 隐藏
	hide(){
		this.maskEl.hide()
		this.popupEl.hide()
	}
	
	// 绘制
	drawView(){
		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.popupHeight-=this.iconSize/2;
			this.descrTop-=this.iconSize/2-this.textSpace;
		}
		
		// 标题
		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()

		// 取消
		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(){
		if(!description) return [];
		const textArr=description.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:description.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<maxLeft-buttonWidth-this.viewPadding){}
					// 确定
					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()