liujiankang
/
static


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>妈妈的三行情书</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<style>
			/*loading*/
			.loading{width: 100%;height:100%;position: fixed;top: 0;padding-top: 50%; left: 0;background: rgba(0,0,0,0.8);z-index: 999;}
			.loading-bj{background: url(images/loading.png);width: 20px;height: 20px;background-size: 20px;margin: 0.3rem auto 0;animation:rotateIn 1s .2s linear infinite;-moz-animation:rotateIn 1s .2s linear infinite;-webkit-animation:rotateIn 1s .2s linear infinite;}
			.loading p{color:#fff;opacity: .7; font-size: 12px;text-align: center;margin-top: 0.1rem;}
			.message-box {position: relative;}
			.message-box.box-shadow{padding: 15px;background: #f9e6ec;}
			.message-box>img {width: 100%;}
			#textarea {position: absolute;top: 38%;width: 58%;left: 21%;line-height: 2.2;padding: 0 1%;border: 0;margin-bottom: 0; background-color: transparent;font-size: 1rem;word-break: break-all;overflow: hidden;}	
			#textarea::-webkit-input-placeholder {color: #ccc;font-size: 0.8rem;}
			.user-middle {position: absolute;left: 16%;top: 7.6%;width: 84%;text-align: left;}
			.message-box .user-middle img {width: 18%;display: block;}
			.message-box .user-name {overflow: hidden;white-space: nowrap;font-size: 1rem;}
			.my-btn-save {background: #dd6a8c;color: #fff;width: 200px;height: 50px;border: 0;line-height: 50px;border-radius: 50px;top: 0 !important; padding:0 12px !important; font-size: 1rem;display: none;}
			.my-btn-save:active {color: #fff;}
			.my-nav-l {position: absolute;left: 0;top: 22.4%;width: 15%;background: rgba(255,255,255,.7);padding:1rem .5rem;}
			.my-nav-l>li {border: 2px solid transparent;border-radius: 5px;overflow: hidden;margin: 1px 0;}
			.my-nav-l>li.active {border: 2px solid #dd6a8c;}
			.my-nav-l>li img {width: 100%;display: block;}
			.btn-nav {position: absolute;left: 4%;top: 73%;color: #dd6a8c;}
			.txt-tips{text-align: right;position: absolute;top: 65%;right:20%;font-size: .8rem;}
		</style>
		<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
		<script>
		//屏蔽分享
		document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
			WeixinJSBridge.call('hideOptionMenu');
		});
		</script>
	</head>

	<body style="background: #fff;">
		<div class="loading covers">
			<div class="loading-bj"></div>
			<p>正在加载...</p>
		</div>
		<div class="mui-content" style="background: #fff;">
			<div class="message-box">
				<img id="bg-p" src="images/2019050703.jpg" />
				<div class="user-middle">
					<div class="user-head">
						<!--头像-->
						<img id="headDiv" src="https://img.zcool.cn/community/01460b57e4a6fa0000012e7ed75e83.png@1280w_1l_2o_100sh.webp">
					</div>
					<div class="user-name" id="userNickname"></div>
				</div>
				<div class="btn-nav">
					<span class="iconfont icon-shouqi"></span>
				</div>
				<ul class="my-nav-l">
					<li name="1">
						<img src="images/2019050701.png" />
					</li>
					<li name="2">
						<img src="images/2019050702.png" />
					</li>
					<li name="3" class="active">
						<img src="images/2019050703.png" />
					</li>
					<li name="4">
						<img src="images/2019050704.png" />
					</li>
					<li name="5">
						<img src="images/2019050705.png" />
					</li>
				</ul>
				<textarea placeholder="“当我变成了你的那天，你的付出，我才终于懂了”" rows="4" maxlength="104" id="textarea"></textarea>
				<div class="txt-tips">还可输入52字</div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab mui-text-center" style="background: transparent;border: 0;box-shadow: 0 0 0 0;height: 65px;">
			<button class="mui-btn my-btn-save">生成专属情书</button>
		</nav>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.1.min.js"></script>
		<script src="js/main.js"></script>
	</body>
	<script>
//ajax loading
$(window).ajaxStart(function(){
    $(".covers").show();
});
$(window).ajaxStop(function(){
    $(".covers").hide();
});
		$(document).on('tap', '.btn-nav', function() {
			if($(this).find(".icon-zhankai").length > 0) {
				$(this).html('<span class="iconfont icon-shouqi"></span>');
				$(".my-nav-l").show();
			} else {
				$(this).html('<span class="iconfont icon-zhankai"></span>');
				$(".my-nav-l").hide();
			}
		});
		$(document).on('tap', '.my-nav-l>li', function() {
			$(this).addClass("active").siblings().removeClass("active");
			$("#bg-p").prop("src", 'images/201905070' + $(this).attr("name") + '.jpg');
		});
		//保存
		$(document).on('tap', '.my-btn-save', function() {
			var texts = $("#textarea").val(),
				bg = $(".my-nav-l .active").attr("name");
			if(!/^[A-Za-z0-9_\[\]\【\】\｛\｝\{\}\(\)\（\）\《\》\<\>\,\，/\s\.\`\。\、\！\!\~\·\@\#\￥\$\%\^\…\&\—\/\_\：\:\；\;\‘\’\'\'\"\"\“\”\？\?\-\=\|\*\+\-\u4e00-\u9fa5]{1,104}$/.test(texts)) {
				if($("#textarea").val().replace(/[ \r\n]/g, "") == '') {
					mui.alert("请填写文字，不能全部为空!");
				} else {
					mui.alert("仅支持中文、英文、数字、标点符号!");
				}
			} else {
				if($("#textarea").val().replace(/[ \r\n]/g, "") == '') {
					mui.alert("请填写文字，不能全部为空!");
				} else {
					if(strlen(texts) > 104) {
						mui.alert("文字长度不能超过52个！");
					} else {
						var btnArray = ['取消', '确认'];
				mui.confirm('每个ID仅限参与一次，请再次确认', '温馨提示', btnArray, function(e) {
					if (e.index == 1) {
						$(".covers p").text("生成中，请稍候...");
						$(".loading").css("opacity", "1").show();
						$.ajax(base_path + '/moth_movable/save_movable?dates=' + new Date().getTime(), {
							data: {
								mothMovaText: texts,
								mothMovaBackType: bg
							},
							dataType: 'json',
							xhrFields: {
								withCredentials: true
							},
							crossDomain: true,
							type: 'post',
							async: false,
							timeout: 15000,
							success: function(dt) {
								if(dt.isRedirect) {
									location.href = dt.redirectURL;
								} else {
									console.log(dt)
									if(dt.resultCode == "200") {
										$(".loading").hide().css("opacity", "0");
										location.reload();
									} else {
										$(".loading").hide().css("opacity", "0");
										mui.alert(dt.message);
									}
								}
							},
							error: function(xhr, type, errorThrown) {
								console.log(xhr);
								$(".loading").hide().css("opacity", "0");
								mui.alert("保存数据失败！网络错误");
							}
						});
					} else {
						//取消
						$(".loading").hide().css("opacity", "0");
					}
				})
						
					}
				}
			}
		});

		//用中文分号替换英文分号、中英文逗号或者回车
		function ReplaceSeperator(mobiles) {
			var i;
			var result = "";
			var c;
			for(i = 0; i < mobiles.length; i++) {
				c = mobiles.substr(i, 1);
				if(c == ";" || c == "," || c == "，" || c == "\n")
					result = result + "\n";
				else if(c != "\r")
					result = result + c;
			}
			return result;
		}

		function strlen(str) {
			var len = 0;
			for(var i = 0; i < str.length; i++) {
				var c = str.charCodeAt(i);
				//单字节加1   
				if((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
					len++;
				} else {
					len += 2;
				}
			}
			return len;
		}
		//实时监听文本框字数
		document.getElementById("textarea").addEventListener("input", function() {
			if(strlen(this.value) > 0) {
				$(".my-btn-save").show();
				if(strlen(this.value)<=104){
					$('.txt-tips').css("color","#333").text('还可输入'+parseInt((104-strlen(this.value))/2)+'字');
				}else{
					$('.txt-tips').css("color","#f00").text('超出'+parseInt((strlen(this.value)-104)/2)+'字');
				}
				//mui.alert("字符长度不能超过104字节！");
			}else{
				$(".my-btn-save").hide();
			}
		});
		function get_moth(){
			$.ajax(base_path + '/moth_movable/get_moth?dates=' + new Date().getTime(), {
				data: {},
				dataType: 'json',
				xhrFields: {
					withCredentials: true
				},
				crossDomain: true,
				type: 'post',
				async: false,
				timeout: 15000,
				success: function(dt) {
					if(dt.isRedirect) {
						location.href = dt.redirectURL;
					} else {
						if(dt.resultCode == "200") {
							if(dt.status) {
								$("body").css("background","#f9e6ec");
								$(".message-box").addClass("box-shadow").html('<img src="http://w.iamberry.com/watero/' + dt.data.mothMovaImgUrl + '"><div class="mui-text-center mui-content-padded" style="color: #da4b79;">长按图片保存分享</div><h6 class="mui-text-center">在法律许可范围内本次活动最终解释权归爱贝源所有</h6>');
							}
						} else {
							if(dt.status == false) {
								$("#headDiv").prop('src', dt.data.userHead);
								$("#userNickname").text(decodeURI(dt.data.userNickname));
							}
						}
					}
				},
				error: function(xhr, type, errorThrown) {
					console.log(xhr);
					mui.alert("读取数据失败！网络错误");
				}
			});
		}
		mui.ready(function() {
			$("#textarea").css({
				"font-size": ".95rem",
				"line-height": $("#textarea").width() / 7.0 + "px"
			});
			get_moth();
			$(".loading").hide().css("opacity", "0"); //隐藏（正在加载...）
		});
	</script>

</html>