siyu_app/utils/coursePopup.js

let popupViewData = null
export function coursePopup(options = {},callBack) {
	// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
	const screenWidth = plus.screen.resolutionWidth;
	const screenHeight = plus.screen.resolutionHeight;
	//弹窗容器宽度
	const popupViewWidth = screenWidth * 0.8;
	// 弹窗容器的Padding
	const viewContentPadding = 12;
	// 弹窗容器的宽度
	const viewContentWidth = popupViewWidth - (viewContentPadding * 2);
	
	let iconWid=popupViewWidth/4.0;
	let icWidth=35;
	
	let imgWidth = viewContentWidth
	let imgHeight = viewContentWidth / 1.78
	// 弹窗容器高度
	let popupViewHeight = viewContentPadding * 2 + imgHeight + icWidth + 140;
	
	let elementList = [
		{
			tag: 'rect', //背景色
			color: '#fff',
			rectStyles:{
				radius: "8px"
			}
		},
		// 头像
		{
			src:'./static/images/ad/zsfw_icon40.png',
			id: "headimg", 
			tag: "img",
			position: {
				top: viewContentPadding + 'px',
				left: viewContentPadding + "px",
				width: icWidth+"px",
				height: icWidth +"px",
			}
		},
		// 名称
		{
			tag: 'font',
			id: 'name',
			text: "标题标题标题标题标题标题标题标题标题标题标题标题",
			textStyles: {
				size: '14px',
				color: "#222",
				verticalAlign: "middle",
				whiteSpace: "normal",
				overflow: "ellipsis",
				align: 'left'
			},
			position: {
				top: '5px',
				left: icWidth + 24 + "px",
				height: "34px",
				width: imgWidth - icWidth - 36 +  'px',
			}
		},
		// 描述
		{
			tag: 'font',
			id: 'text1',
			text: "给你分享了一个课程",
			textStyles: {
				size: '13px',
				color: "#999",
				verticalAlign: "middle",
				whiteSpace: "normal",
				overflow: "ellipsis",
				align: 'left'
			},
			position: {
				top: viewContentPadding + 10 + 'px',
				left: icWidth + 24 + "px",
				height: "34px",
				width: imgWidth - icWidth - 36 +  'px',
			}
		},
		{
			src:'https://cos.his.cdwjyyh.com/fs/20241122/0d29517f595e428989017b49e28ea437.jpg',
			id: "logo", 
			tag: "img",
			position: {
				top: viewContentPadding*2 + icWidth + 'px',
				left: viewContentPadding+ 'px',
				width: imgWidth + 'px',
				height: imgHeight + 'px',
			},
		},
		// 标题
		{
			tag: 'font',
			id: 'title',
			text: "标题标题标题标题标题标题标题标题标题标题标题标题",
			textStyles: {
				size: '16px',
				color: "#222",
				verticalAlign: "middle",
				whiteSpace: "normal",
				overflow: "ellipsis",
				align: 'left'
			},
			position: {
				top: imgHeight + icWidth + viewContentPadding*2 + 'px',
				left: "10px",
				right: "10px",
				height: "36px",
				width: imgWidth + 'px',
			}
		},
		// 描述
		{
			tag: 'font',
			id: 'desc',
			text: "描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述",
			textStyles: {
				size: '13px',
				color: "#999",
				verticalAlign: "middle",
				whiteSpace: "normal",
				overflow: "ellipsis",
				align: 'left'
			},
			position: {
				top: imgHeight + icWidth + viewContentPadding*2 + 26 + 'px',
				left: "10px",
				right: "10px",
				height: "50px",
				width: imgWidth + 'px',
			}
		},
	];
	let detailbtnEle = [{
			tag: 'rect', //背景色
			id: 'button',
			color: '#FF5C03',
			rectStyles:{
				radius: "22px",
			},
			position:{
				left:"10%",
				top: 0,
				width:"80%",
				height:"44px",
			}
		},{
			tag: 'font',
			id: 'buttontxt',
			text: "查看详情",
			textStyles: {
				size: '16px',
				color: "#fff",
				verticalAlign: "middle",
				whiteSpace: "normal",
				overflow: "ellipsis",
				align: 'center'
			},
			position: {
				left:"10%",
				top: 0,
				width:"80%",
				height:"44px",
			}
		}]
	// 弹窗遮罩层
	let maskLayer = new plus.nativeObj.View("maskLayer", { //先创建遮罩层
		top: '0px',
		left: '0px',
		height: '100%',
		width: '100%',
		backgroundColor: 'rgba(0,0,0,0.5)',
		visible: false
	});

	// 弹窗内容
	let popupView = new plus.nativeObj.View("popupView", { //创建底部图标菜单
		tag: "rect",
		top: (screenHeight - popupViewHeight - 70) / 2.0  + "px",
		left: '10%',
		height: popupViewHeight,
		width: "80%",
	});
	
	// 弹窗查看详情按钮
	let detailBtn = new plus.nativeObj.View("detailBtn", {
			tag: "rect",
			top: (screenHeight - popupViewHeight - 70) / 2.0 + imgHeight + icWidth + viewContentPadding*2 + 80 + 'px',
			left: "10%",
			width:"80%",
			height:"44px",
	});
	
	// 弹窗关闭按钮
	let closeBtnData = closeBtnDrawing();
	let closeWid=40;
	let closeBtn = new plus.nativeObj.View("closeBtn", { 
		tag: "rect",
		top: (screenHeight - (popupViewHeight+closeWid+30))*0.5 +(popupViewHeight+30) + "px",
		left: ((closeBtnData.screenWidth - closeWid) / 2) +"px",
		height: closeWid+"px",
		width: closeWid+"px",
	});
	popupView.draw(elementList);
	detailBtn.draw(detailbtnEle)
	closeBtn.draw(closeBtnData.elementList);
	
	maskLayer.show();
	popupView.show();
	detailBtn.show();
	closeBtn.show();
	detailBtn.addEventListener('click', (e) => {
		maskLayer.hide();
		popupView.hide();
		detailBtn.hide();
		closeBtn.hide();
		callBack(1);
	});
	closeBtn.addEventListener("click", function(e) {
		maskLayer.hide();
		popupView.hide();
		detailBtn.hide();
		closeBtn.hide();
	});
}

//关闭按钮绘图
function closeBtnDrawing(){
	// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
	const screenWidth = plus.screen.resolutionWidth;
	const screenHeight = plus.screen.resolutionHeight;
	//弹窗容器宽度
	const popupViewWidth = screenWidth * 0.8;
	// 弹窗容器的Padding
	const viewContentPadding = 12;
	// 弹窗容器的宽度
	const viewContentWidth = popupViewWidth - (viewContentPadding * 2);
	// 弹窗容器高度
	let closeY = viewContentPadding * 7 + 60+32;
	let elementList = [
		{
			tag: 'rect', //背景色
			color: 'rgba(255,255,255,0)',
			rectStyles:{
				radius: "0px"
			}
		},
		{
			src:'./static/images/ad/close_icon.png',
			id: "close", 
			tag: "img",
			position: {
				top: '0px',
				left: "0px",
				width: "32px",
				height: "32px",
			}
		}
	];
	return {
		popupViewHeight:32,
		popupViewWidth:popupViewWidth,
		screenWidth:screenWidth,
		screenHeight:screenHeight,
		elementList: elementList
	};
}