rtim/utils/vipPop.js

export function vipPop(options = {}, callBack) {
	// 以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
	const screenWidth = plus.screen.resolutionWidth;
	const screenHeight = plus.screen.resolutionHeight;
	//弹窗容器宽度
	const popupViewWidth = uni.upx2px(590);
	// 弹窗容器的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 = uni.upx2px(636);

	let elementList = [{
			tag: 'rect', //背景色
			color: 'rgba(0,0,0,0)',
			rectStyles: {
				radius: "8px"
			}
		},
		// 背景
		{
			src: './static/images/ad/vip_bg.png',
			id: "vip_bg",
			tag: "img",
			position: {
				top: uni.upx2px(80) + "px",
				left: "0px",
				width: "100%",
				height: uni.upx2px(556) + "px",
			}
		},
		{
			src: './static/images/ad/vip_img.png',
			id: "vip_img",
			tag: "img",
			position: {
				top: - uni.upx2px(0) + "px",
				left: (popupViewWidth - uni.upx2px(256)) / 2 + "px",
				width: uni.upx2px(256) + "px",
				height: uni.upx2px(210) + "px",
			}
		},
		{
			src: './static/images/ad/vip_title.png',
			id: "vip_title",
			tag: "img",
			position: {
				top: uni.upx2px(204) + "px",
				left: (popupViewWidth - uni.upx2px(264)) / 2 + "px",
				width: uni.upx2px(264) + "px",
				height: uni.upx2px(68) + "px",
			}
		},
		{
			tag: 'font',
			id: 'text1',
			text: options.alert,
			textStyles: {
				size: uni.upx2px(72) + "px",
				color: "#EB772A",
				whiteSpace: "normal",
				overflow: "ellipsis",
				align: 'center',
				weight: 'bold'
			},
			position: {
				top: uni.upx2px(6) + "px"
			}
		},
		{
			tag: 'font',
			id: options.alert1,
			text: "有效期至2025-07-27",
			textStyles: {
				size: uni.upx2px(28) + "px",
				color: "#757575",
				whiteSpace: "normal",
				overflow: "ellipsis",
				align: 'center',
			},
			position: {
				top: uni.upx2px(96) + "px",
			}
		},
	];
	let detailbtnEle = [{
		tag: 'rect', //背景色
		color: 'rgba(0,0,0,0)'
	},{
			src: './static/images/ad/watch_class_button.png',
			id: "watch_class_button",
			tag: "img",
			position: {
				top: "0px",
				left: "0px",
				width: '100%',
				height: '100%',
			}
	}]
	// 弹窗遮罩层
	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 + uni.upx2px(484) + "px",
		left: (screenWidth - uni.upx2px(414)) / 2 + "px",
		width: uni.upx2px(414) + "px",
		height: uni.upx2px(119) + "px",
	});
	// 弹窗关闭按钮
	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();
	detailBtn.addEventListener('click', (e) => {
		maskLayer.hide();
		popupView.hide();
		detailBtn.hide();
		closeBtn.hide();
		callBack(1);
	});
	closeBtn.show();
	closeBtn.addEventListener("click", function(e) {
		maskLayer.hide();
		popupView.hide();
		detailBtn.hide();
		closeBtn.hide();
	});
	setTimeout(function(){
		maskLayer.hide();
		popupView.hide();
		detailBtn.hide();
		closeBtn.hide();
	},3000)
}

//关闭按钮绘图
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
	};
}