restructure

content/panorama/layout/custom_game/frames/payment/payment.css

@@ -0,0 +1,287 @@
+.PaymentRoot{
+	width: 800px;
+	height: 500px;
+	background-color: #151515;
+	border-radius: 5px;
+	border: 1px solid #555;	
+}
+
+
+.line {
+	flow-children: right;
+}
+.center {
+	horizontal-align: center;
+}
+.margin-sm {
+	margin: 10px;
+}
+
+#PetInputPage,
+#InputPage,
+#HtmlPage {
+	horizontal-align: center;
+	vertical-align: middle;
+	transition-property: opacity, transform;
+	transition-duration: 0.3s;
+}
+
+#PetInputPage,
+#InputPage {
+	flow-children: down;
+}
+
+#PetInputPage .t1,
+#InputPage .t1 {
+	horizontal-align: center;
+	margin: 10px;
+}
+
+#PetInputPage .t2,
+#InputPage .t2 {
+	horizontal-align: center;
+	flow-children: right;
+}
+
+#PetTextPanel,
+#AvalonCoinPanel {
+	width: 120px;
+	background-color: #000;
+	vertical-align: middle;
+	border: 1px solid #FFED83;
+}
+
+#PetLevelText,
+#AvalonCoin{
+	width: fit-children;
+	background-color: none;
+	text-align: right;
+	text-overflow: clip;
+	horizontal-align: center;
+	border: 0;
+	transform: translateX(6px);
+	font-size: 25px;
+	min-width: 20px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+}
+
+#PetInputPage .title,
+#InputPage .title{
+	font-size: 30px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+	vertical-align: middle;
+}
+
+#PetPrePayButton,
+#PrePayButton{
+	horizontal-align: center;
+	margin: 30px;
+	flow-children: down;
+}
+
+#PetPrePayButton .title,
+#PrePayButton .title{
+	font-size: 20px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+	text-shadow: #000 0px 0px 4px 1.0;
+	margin-top: 15px;
+	margin-bottom: 15px;
+	horizontal-align: center;
+}
+
+#PetPrePayButton .pay-btn,
+#PrePayButton .pay-btn{
+	padding: 10px 15px;
+	flow-children: right;
+	border-radius: 5px;
+}
+
+#PetPrePayButton .pay-btn.alipay,
+#PrePayButton .pay-btn.alipay{
+	background-color: #108EE9;
+}
+
+#PetPrePayButton .pay-btn.wechatpay,
+#PrePayButton .pay-btn.wechatpay{
+	background-color: #3eb94e;
+	margin-left: 10px;
+}
+
+#PetPrePayButton .pay-btn Image,
+#PrePayButton .pay-btn Image{
+	width: 20px;
+	height: 20px;
+}
+
+#PetPrePayButton .pay-btn Label,
+#PrePayButton .pay-btn Label{
+	font-size: 20px;
+	color: #fff;
+	margin-left: 5px;
+}
+
+#PetPrePayButton .pay-btn.alipay:hover,
+#PrePayButton .pay-btn.alipay:hover{
+	box-shadow: #108EE9 0px 0px 4px;
+}
+
+#PetPrePayButton .pay-btn.wechatpay:hover,
+#PrePayButton .pay-btn.wechatpay:hover{
+	box-shadow: #3eb94e 0px 0px 4px;
+}
+
+#PetPrePayButton .pay-btn:active,
+#PrePayButton .pay-btn:active{
+	transform: scale3d(0.9,0.9,1);
+}
+
+#AddPetLevel,
+#AddAvalonCoin{
+	horizontal-align: center;
+	margin-top: 15px;
+	flow-children: right;
+}
+
+#AddPetLevel .btn,
+#AddAvalonCoin .btn{
+	background-color: #414141;
+	padding: 2px 4px;
+	border-radius: 5px;
+	margin: 0px 3px;
+}
+
+#AddPetLevel .btn Label,
+#AddAvalonCoin .btn Label{
+	margin-top: 3px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+}
+
+#AddPetLevel .btn:hover,
+#AddAvalonCoin .btn:hover{
+	brightness: 2;
+}
+
+#AddPetLevel .btn:active,
+#AddAvalonCoin .btn:active{
+	transform: scale3d(0.9,0.9,1);
+}
+
+/*=======================*/
+#HtmlPage {
+	flow-children: down;
+}
+
+#HtmlPage .btn{
+	background-color: #414141;
+	padding: 2px 4px;
+	border-radius: 5px;
+	margin: 0px 3px;
+	horizontal-align: center;
+}
+
+#HtmlPage .btn Label{
+	margin-top: 3px;
+	color: gradient( linear, 0% 100%, 0% 0%, from( #FFED83 ), to( #DE8B00 ) );
+}
+
+#HtmlPage .btn:hover{
+	brightness: 2;
+}
+
+#HtmlPage .btn:active{
+	transform: scale3d(0.9,0.9,1);
+}
+
+
+#Html {
+	width: 700px;
+	height: 360px;
+	background-color: #000;
+}
+
+#GoBackButton {
+	padding: 5px 15px;
+	horizontal-align: center;
+	border-radius: 3px;
+	margin-top: 10px;
+	background-color: gradient(linear, 0% 100%, 0% 0%, from(#3F0600), to(#5B0900));
+}
+#GoBackButton:hover {
+	box-shadow: #A41C00 0px 0px 5px;
+}
+#GoBackButton Label {
+	color: #fff;
+}
+
+#CloseButton {
+	width: 30px;
+	height: 30px;
+	background-image: url("s2r://panorama/images/control_icons/x_close_png.vtex");
+	background-repeat: no-repeat;
+	background-size: 100%;
+	wash-color: #eee2dd;
+	margin-top: 2px;
+	margin-right: 5px;
+	horizontal-align: right;
+	vertical-align: top;
+}
+
+#CloseButton:hover {
+	wash-color: #fac900;
+}
+
+#PageModeToggle {
+	horizontal-align: center;
+	vertical-align: top;
+	margin-top: 30px;
+}
+
+#PageModeToggle {
+	flow-children: right;
+}
+
+#PageModeToggle RadioButton {
+	margin-right: 10px;
+}
+
+#PageModeToggle RadioButton .TickBox {
+	background-color: #0000;
+	border: 2px solid #6c9fcb;
+	box-shadow: #abffff 0px 0px 0px;
+}
+
+#PageModeToggle RadioButton Label {
+	color: #EEE;
+}
+#PageModeToggle RadioButton:selected Label {
+	color: #fff;
+}
+
+#PageModeToggle RadioButton:selected .TickBox {
+	background-color: #abffff;
+	border: 2px solid #6c9fcb;
+	box-shadow: #abffff 0px 0px 6px;
+}
+
+
+#PayQrPanel {
+	width: 700px;
+	height: 360px;
+	background-color: #000;
+	horizontal-align: center;
+	vertical-align: middle;
+}
+
+#PayQrPanel Label {
+	color: #EEE;
+	font-size: 25px;
+	horizontal-align: center;
+	vertical-align: middle;
+}
+
+#PayQrImg {
+	width: 312px;
+	height: 312px;	
+	horizontal-align: center;
+	vertical-align: middle;
+}

content/panorama/layout/custom_game/frames/payment/payment.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var PayAmount = 0;
+var Price = 0.0;
+
+var PetPayAmount = 0;
+var PetPrice = 0;
+
+var IsInQuery = false;
+var SelectedPage = 1;
+
+var BackTimeOutCount = 60;
+var EndTimeOutCount = 300;
+
+function ShowMessage(text, time, iserror, marginTop) {
+	var label = $.CreatePanel("Label", $.GetContextPanel(), "");
+	label.style["background-color"] = iserror ? "#A22C00" : "#000E";
+	label.style["color"] = iserror ? "#fff" : "#F37702";
+	label.style["padding"] = "20px";
+	label.style["font-size"] = "30px";
+	if (marginTop) label.style["margin-top"] = marginTop;
+	label.style["horizontal-align"] = "center";
+	label.style["vertical-align"] = "center";
+	label.html = true;
+	label.text = text;
+	label.DeleteAsync(time > 0 ? time : 3);
+}
+
+function PageModeSelect(type) {
+	if (type === "fairy") {
+		SelectedPage = 1;
+		$("#InputPage").visible = true;
+		$("#PetInputPage").visible = false;
+		$("#HtmlPage").visible = false;
+		$("#AvalonCoin").text = "";
+		return;
+	}
+	if (type === "pet") {
+		SelectedPage = 2;
+		$("#InputPage").visible = false;
+		$("#PetInputPage").visible = true;
+		$("#HtmlPage").visible = false;
+		$("#PetLevelText").text = "";
+		return;
+	}
+	
+}
+
+function ShowModeSelectTip(index) {		
+	$.DispatchEvent("DOTAShowTextTooltip", $("#PageModeToggle").GetChild(index), $.Localize("#pay_tip_mode" + index));	
+}
+
+function HideModeSelectTip() {
+	$.DispatchEvent("DOTAHideTextTooltip")
+}
+
+function GoBack() {	
+	$("#InputPage").visible = SelectedPage === 1;
+	$("#PetInputPage").visible = SelectedPage === 2;
+	$("#HtmlPage").visible = false;
+	$("#AvalonCoin").text = "";
+	$("#PetLevelText").text = "";
+	EndTimeOutCount = 0;
+	BackTimeOutCount = 0;
+	GameEvents.SendCustomGameEventToServer("custom_game_pay_auto_query", {});
+}
+
+function Pay( method, type ) {
+	if ((!Price || Price < 0) && (!PetPrice || PetPrice < 0)) return;
+	
+	$("#PayQrImg").SetImage("");
+	$("#InputPage").visible = false;
+	$("#PetInputPage").visible = false;
+	$("#HtmlPage").visible = true;	
+	$("#CompleteButton").visible = false;	
+	$("#GoBackButton").enabled = false;	
+
+	BackTimeOutCount = 30;
+	GoBackTimeCount();	
+
+	EndTimeOutCount = 300;
+	EndBackTimeCount()
+
+	var payType = 2;
+	if (method === "alipay") {
+		payType = 1;
+	} else if (method === "wechatpay") {
+		payType = 2;
+	}
+
+	if (type === "fairy") {
+		GameEvents.SendCustomGameEventToServer("custom_game_pay_select", {"method":payType, "amount":PayAmount, "price":Price * 100, "type": type});
+	} else if (type === "pet") {
+		GameEvents.SendCustomGameEventToServer("custom_game_pay_select", {"method":payType, "amount":PetPayAmount, "price":PetPrice * 100, "type": type});
+	}
+	
+}
+
+function GoBackTimeCount() {
+	if (BackTimeOutCount <= 0) {
+		$("#GoBackButton").enabled = true;
+		$("#GoBackButton").SetDialogVariableInt("timeout", 0)
+		$("#CompleteButton").visible = true;
+		return;
+	}
+	BackTimeOutCount--;
+	$("#GoBackButton").SetDialogVariableInt("timeout", BackTimeOutCount)	
+	$.Schedule(1, GoBackTimeCount);
+}
+
+
+function EndBackTimeCount() {
+	if (EndTimeOutCount <= 0) {	
+		return;
+	}
+	EndTimeOutCount--;
+	var m = Math.floor(EndTimeOutCount/60);
+	var s = EndTimeOutCount%60;
+	var note = m > 0 ? (m + "分") : "";
+	note += s > 0 ? (s + "秒") : "";
+	if (note === "") note = "0秒（已过期，请返回）";
+	$("#HtmlPage").SetDialogVariable("LeftTime", note);
+	$.Schedule(1, EndBackTimeCount);
+}
+
+function PayComplete() {
+	if (IsInQuery) return;
+	IsInQuery = true;
+	GameEvents.SendCustomGameEventToServer("custom_game_pay_query", {});
+}
+
+
+
+
+// 文本改变
+var AvalonCoinLock = false;
+function OnAvalonCoinChange() {
+	if (AvalonCoinLock) return;
+	AvalonCoinLock=true;
+
+	var AvalonCoin = $("#AvalonCoin");
+	var text = AvalonCoin.text;
+	var m = text.replace(/\D+/g,"");
+	var amount = parseInt(m);
+	if (amount >= 10) {
+		AvalonCoin.text = parseInt(m);
+	}
+	else {
+		amount = 0;
+		AvalonCoin.text = "";
+	}
+
+	if (amount > 0) {
+		// $("#PrePayButton").SetDialogVariable("Amount",((100 * amount / 2 - RandomInt(0, 100))/100).toFixed(2).toString());
+		if (PayAmount != amount) {
+			PayAmount = amount;		
+			Price = (100 * amount * 0.5 - RandomInt(0, 100))/100;
+			$("#PrePayButton").SetDialogVariable("Amount",Price.toString());
+			$("#HtmlPage").SetDialogVariable("Amount",Price.toString());
+		}				
+	} else {
+		PayAmount = 0;
+		Price = 0.0;
+		$("#PrePayButton").SetDialogVariable("Amount", "0");
+		$("#HtmlPage").SetDialogVariable("Amount", "0");
+	}
+	AvalonCoinLock = false;
+}
+
+// 文本改变
+var PetlevelLock = false;
+function OnPetLevelChange() {
+	if (PetlevelLock) return;
+	PetlevelLock=true;
+
+	var PetLevelText = $("#PetLevelText");
+	var text = PetLevelText.text;
+	var m = text.replace(/\D+/g,"");
+	var amount = parseInt(m);
+	if (amount > 0) {
+		PetLevelText.text = parseInt(m);
+	}
+	else {
+		amount = 0;
+		PetLevelText.text = "";
+	}
+
+	if (amount > 0) {		
+		if (PetPayAmount != amount) {
+			PetPayAmount = amount;		
+			PetPrice = (100 * amount * 30 - RandomInt(0, 100))/100;
+			$("#PetPrePayButton").SetDialogVariable("Amount",PetPrice.toString());
+			$("#HtmlPage").SetDialogVariable("Amount",PetPrice.toString());
+		}				
+	} else {
+		PetPayAmount = 0;
+		PetPrice = 0.0;
+		$("#PetPrePayButton").SetDialogVariable("Amount", "0");
+		$("#HtmlPage").SetDialogVariable("Amount", "0");
+	}
+	PetlevelLock = false;
+}
+
+function RandomInt(min, max) {
+	return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function AddAvalonCoin(num) {
+	var AvalonCoin = $("#AvalonCoin");
+	var text = AvalonCoin.text;
+	var amount = parseInt(text);
+	if (!amount || amount < 0) amount = 0;
+	if (num > 0) 
+		AvalonCoin.text = (amount + num);
+	else
+		AvalonCoin.text = "";
+}
+
+function AddPetLevel(num) {
+	var PetLevelText = $("#PetLevelText");
+	var text = PetLevelText.text;
+	var amount = parseInt(text);
+	if (!amount || amount < 0) amount = 0;
+	if (num > 0) 
+		PetLevelText.text = (amount + num);
+	else
+		PetLevelText.text = "";
+}
+
+var closeHandle = null;
+function Close() {
+	if (closeHandle) {
+		closeHandle();
+	}
+}
+
+function AvalonCoinInputFocus(){
+	// $("#PetTextPanel").SetFocus();
+}
+
+function PetInputFocus() {
+	$("#PetLevelText").SetFocus();
+}
+
+
+;(function(){
+	$("#PrePayButton").SetDialogVariable("Amount", "0");	
+	$("#HtmlPage").SetDialogVariable("Amount", "0");	
+	$("#HtmlPage").visible = false;
+	$("#AvalonCoin").enabled = false;
+	$("#InputPage").visible = SelectedPage === 1;
+	$("#PetInputPage").visible = SelectedPage === 2;
+	
+	$.GetContextPanel().OnClose = function (f) { closeHandle = f };		
+
+	GameEvents.Subscribe("thtd_pay_post", function (data){		
+		if (data.code === 1) {
+			// $("#Html").SetURL(data.url);占用性能
+			// $("#PayQrImg").SetImage(data.url);
+			$("#PayQrImg").SetImage(data.method === 1 ? "s2r://panorama/images/custom_game/qr_alipay_png.vtex" : "s2r://panorama/images/custom_game/qr_wechat_png.vtex");
+		} else {
+			// $("#Html").SetURL("https://qrcode/error.jpg");			
+			$("#PayQrImg").SetImage("");
+			ShowMessage("获取支付码失败，" + data.msg, 10, true);
+		}			
+	});	
+
+	GameEvents.Subscribe("thtd_pay_result", function (data){	
+		IsInQuery = false;
+		if (data.code === "0000") {
+			ShowMessage(data.msg, 5);
+			Game.EmitSound("Quest.Completed");
+			BackTimeOutCount = 0;
+		} else {			
+			ShowMessage(data.msg, 5, true);
+		}			
+	});	
+
+})();

content/panorama/layout/custom_game/frames/payment/payment.xml

@@ -0,0 +1,111 @@
+<root>
+	<styles>
+		<include src="s2r://panorama/styles/dotastyles.vcss_c" />
+		<include src="s2r://panorama/layout/custom_game/frames/payment/payment.vcss_c" />
+	</styles>
+	<scripts>
+		<include src="s2r://panorama/layout/custom_game/frames/payment/payment.vjs_c" />
+	</scripts>
+	<Panel class="PaymentRoot" onactivate="" >
+		<Button id="CloseButton" onactivate="Close()" />
+
+		<Panel id="PageModeToggle" >
+			<Label style="color:#fff;vertical-align: middle;" text="#td_type" />
+			<RadioButton id="fairy" selected="true" text="符卡精华" group="mode_group" onactivate="PageModeSelect('fairy')" onmouseover="ShowModeSelectTip(1)" onmouseout="HideModeSelectTip()" />
+			<RadioButton id="pet" selected="false" text="宠物等级和奖励时间" group="mode_group" onactivate="PageModeSelect('pet')" onmouseover="ShowModeSelectTip(2)" onmouseout="HideModeSelectTip()" />		
+		</Panel>
+
+		<Panel id="InputPage">
+			<!-- <Label class="t1" text="需要的符卡精华数量" /> -->
+			<Panel class="t2" hittest="false">
+				<Panel id="AvalonCoinPanel" onactivate="AvalonCoinInputFocus()">
+					<TextEntry id="AvalonCoin" maxchars="7" ontextentrychange="OnAvalonCoinChange()" />
+				</Panel>
+				<Label class="title" text="  符卡精华" />
+			</Panel>
+			<!-- 自动增加 -->
+			<Panel id="AddAvalonCoin" >
+				<Button class="btn" onactivate="AddAvalonCoin(100)">
+					<Label text="+100" />
+				</Button>
+				<Button class="btn" onactivate="AddAvalonCoin(500)">
+					<Label text="+500" />
+				</Button>
+				<Button class="btn" onactivate="AddAvalonCoin(20)">
+					<Label text="+20" />
+				</Button>
+				<Button class="btn" onactivate="AddAvalonCoin(0)">
+					<Label text="重置" />
+				</Button>
+			</Panel>
+			<!-- 支付按钮 -->
+			<Panel id="PrePayButton" >
+				<Label class="title" html="true" text="请赞助 {s:Amount} 元" />
+				<Panel class="line center">
+					<Button class="pay-btn alipay" onactivate="Pay('alipay','fairy')">
+						<Image src="s2r://panorama/images/custom_game/alipay_png.vtex" />
+						<Label text="支付宝" />
+					</Button>
+					<Button class="pay-btn wechatpay" onactivate="Pay('wechatpay','fairy')">
+						<Image src="s2r://panorama/images/custom_game/wechatpay_png.vtex" />
+						<Label text="微信" />
+					</Button>
+				</Panel>						
+			</Panel>
+		</Panel>
+
+		<Panel id="PetInputPage">
+			<Label class="t1" text="每级获得2个月的特别奖励时间" />
+			<Panel class="t2" hittest="false">
+				<Panel id="PetTextPanel" onactivate="PetInputFocus()">
+					<TextEntry id="PetLevelText" maxchars="5" ontextentrychange="OnPetLevelChange()" />
+				</Panel>
+				<Label class="title" text="  宠物等级" />
+			</Panel>
+			<!-- 自动增加 -->
+			<Panel id="AddPetLevel" >
+				<Button class="btn" onactivate="AddPetLevel(1)">
+					<Label text="+1" />
+				</Button>
+				<Button class="btn" onactivate="AddPetLevel(5)">
+					<Label text="+5" />
+				</Button>
+				<Button class="btn" onactivate="AddPetLevel(10)">
+					<Label text="+10" />
+				</Button>
+				<Button class="btn" onactivate="AddPetLevel(0)">
+					<Label text="重置" />
+				</Button>
+			</Panel>
+			<!-- 支付按钮 -->
+			<Panel id="PetPrePayButton" >
+				<Label class="title" html="true" text="请赞助 {s:Amount} 元" />
+				<Panel class="line center">
+					<Button class="pay-btn alipay" onactivate="Pay('alipay','pet')">
+						<Image src="s2r://panorama/images/custom_game/alipay_png.vtex" />
+						<Label text="支付宝" />
+					</Button>
+					<Button class="pay-btn wechatpay" onactivate="Pay('wechatpay','pet')">
+						<Image src="s2r://panorama/images/custom_game/wechatpay_png.vtex" />
+						<Label text="微信" />
+					</Button>
+				</Panel>						
+			</Panel>
+		</Panel>
+
+		<Panel id="HtmlPage" onactivate="">
+			<!-- <DOTAHTMLPanel id="Html" url="" ></DOTAHTMLPanel> -->
+			<Panel id="PayQrPanel">
+				<Label html="true" text="获取二维码中，请稍等" />	
+				<Image id="PayQrImg" src="" scaling="none" />
+			</Panel>
+			<Label class="center margin-sm" html="true" text="#sponsor_note" />	
+			<Button id="CompleteButton" class="btn" onactivate="PayComplete()">
+					<Label text="#pay_complete" />
+			</Button>		
+			<Button id="GoBackButton" onactivate="GoBack()">
+				<Label text="#pay_back_button" />
+			</Button>
+		</Panel>		
+	</Panel>
+</root>