|
|
@@ -0,0 +1,267 @@
|
|
|
+<!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.data.userStatus != 2){
|
|
|
+ location.href = "watero_code.html";
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ 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>
|
