rtim/utils/couponPop.js

export function couponPop(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(748);

	let elementList = [{
			tag: 'rect', //背景色
			color: 'rgba(0,0,0,0)',
			rectStyles: {
				radius: "8px"
			}
		},
		{
			src: './static/images/ad/gift_img_head.png',
			id: "gift_img_head",
			tag: "img",
			position: {
				top: "0px",
				left: (popupViewWidth - uni.upx2px(312)) / 2 + "px",
				width: uni.upx2px(312) + "px",
				height: uni.upx2px(120) + "px",
			}
		},
		{
			tag: 'rect', //背景色
			id: "body",
			color: '#fff',
			rectStyles: {
				radius: uni.upx2px(28) + "px",
			},
			position: {
				top: uni.upx2px(120) + "px",
				left: "0px",
				width: "100%",
				height: popupViewHeight - uni.upx2px(120) + "px",
			}
		},
		// 背景
		{
			src: './static/images/ad/wzj_bg.png',
			id: "wzj_bg",
			tag: "img",
			position: {
				top: uni.upx2px(120) + "px",
				left: "0px",
				width: "100%",
				height: popupViewHeight - uni.upx2px(120) + "px",
			}
		},
		// 新客专享
		{
			src: './static/images/ad/new_customer_bg.png',
			id: "new_customer_bg",
			tag: "img",
			position: {
				top: uni.upx2px(120) + "px",
				left: (popupViewWidth - uni.upx2px(288)) / 2 + "px",
				width: uni.upx2px(288) + "px",
				height: uni.upx2px(72) + "px",
			}
		},
		{
			src: './static/images/ad/wz_txt.png',
			id: "wz_txt",
			tag: "img",
			position: {
				top: uni.upx2px(476) + "px",
				left: (popupViewWidth - uni.upx2px(354)) / 2 + "px",
				width: uni.upx2px(354) + "px",
				height: uni.upx2px(57) + "px",
			}
		},
		{
			src: './static/images/ad/consultation_voucher_img.png',
			id: "consultation_voucher_img",
			tag: "img",
			position: {
				top: uni.upx2px(216) + "px",
				left: (popupViewWidth - uni.upx2px(280)) / 2 + "px",
				width: uni.upx2px(313) + "px",
				height: uni.upx2px(261) + "px",
			}
		}
	];
	let detailbtnEle = [{
		tag: 'rect', //背景色
		color: 'rgba(0,0,0,0)'
	},{
			src: './static/images/ad/consultation_button.png',
			id: "consultation_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(595) + "px",
		left: (screenWidth - uni.upx2px(415)) / 2 + "px",
		width: uni.upx2px(415) + "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
	};
}