Kaynağa Gözat

关注公众号、注册页面重构 -cwg

caiweigan 6 yıl önce
ebeveyn
işleme
9db64e7eb3

+ 1 - 0
MP_verify_In3aMSZYTZnUEbyt.txt

@@ -0,0 +1 @@
+In3aMSZYTZnUEbyt

+ 0 - 1
MP_verify_t0CEshv8FW7gu42t.txt

@@ -1 +0,0 @@
-t0CEshv8FW7gu42t

BIN
images/board.png


BIN
images/btn.png


BIN
images/close.png


BIN
images/gray_btn.png


BIN
images/logo.png


BIN
images/newyear-scroe-bg.png


BIN
images/qrcode.jpg


+ 37 - 0
images/style.css

@@ -85,6 +85,43 @@ button,input,select,txtarea{ vertical-align:middle;}
 .c_blue {color: #336699}
 
 
+/*积分活动页*/
+.warp {width: 100%; height: 100%; background:url(newyear-scroe-bg.png) no-repeat center center;background-size: cover;}
+
+.head {height: 10%;}
+.head .logo {float: left; width: 85px; padding-top: 10px;}
+.head .txt{float: right; color: #fffeee; padding-top: 15px;}
+
+.img-title {height: 25%; width: 68%; margin: 0 auto;}
+
+.info {height: 57%; width: 76%; margin: 0 auto; background:url(board.png) no-repeat center center; background-size: contain;}
+.info .top {height: 20%; text-indent: -9999px}
+.info .txt {height: 33%;  display: table; margin: 0 auto; color: #8b0c0d; font-size: 20px; text-align: center}
+.info .ticket {height: 22%; display: table;  margin: 0 auto; color: #fc8109; text-align: center}
+.info .ticket b {font-size: 60px; font-weight: bold; color: #fc8109}
+.info .btn {height: 15%;  width: 90%; margin: 0 auto; text-align: center}
+
+.foot {height: 8%; text-align: center; color: #fff; font-size: 14px; padding-top: 15px;}
+
+
+/*活动说明*/
+.explain {background: #fff; width: 100%; height: 100%}
+.explain-title {border-bottom: 1px solid #ccc; padding: 15px 0 ; text-align: center; font-size: 18px; margin-bottom: 25px; color: #333;}
+.explain-content h1{ height: 28px;}
+.explain-content div{margin-bottom: 20px; color: #333}
+
+/*close按钮*/
+.b-close {position: absolute; right: 10px; top:10px; width: 25px; height: 25px; background: url(close.png) no-repeat}
+
+/*弹窗标题*/
+.popup-h1 {padding: 20px; font-size: 18px; color: #ff5701}
+
+
+
+
+
+
+
 
 
 

BIN
images/title.png


+ 119 - 8
index.html

@@ -6,24 +6,135 @@
     <meta content="yes" name="apple-mobile-web-app-capable">
     <meta content="black" name="apple-mobile-web-app-status-bar-style">
     <meta content="telephone=no" name="format-detection">
-    <title>活动首页</title>
+    <title></title>
     <link rel="stylesheet" type="text/css" href="images/style.css"/>
     <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
     <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
 
-    <script src="js/jquery-3.2.1.js"></script>
+    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
     <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
-    <script src="js/global.js"></script>
     <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
+    <!--<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>-->
+    <!--<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>-->
+
+    <!--<script src="http://assets.js-dctech.com/marketing-template/global.js"></script>-->
+    <!--<script src="http://assets.js-dctech.com/marketing-template/index.js"></script>-->
+    <script src="js/global.js"></script>
     <script src="js/index.js"></script>
 
 </head>
 
 <body>
-<!--<button onclick="alert(accessToken);">获取access_token</button>-->
-<!--<button onclick="localStorage.removeItem('access_token')">删除access_token</button>-->
-<!--<button onclick="alert(currentUrl)">当前页面</button>-->
-<div>金额:<span id="reward"></span>元</div>
-<button id="receiveReward">点击领取</button>
+
+<div class="warp">
+    <div class="head">
+        <div class="center">
+            <div class="logo"><img src="images/logo.png" alt=""/></div>
+            <div id="explain_popup" class="txt">活动说明</div>
+        </div>
+    </div>
+    <div class="img-title"><img src="images/title.png" alt=""/> </div>
+    <div class="info">
+        <div class="top">占位</div>
+        <div class="ticket"><b id="reward"></b><span id="unit" style="display: none">分</span></div>
+        <div id="prompt" class="txt" ></div>
+        <div id="receiveReward" class="btn"><img id="rewardBtn" src="" alt=""/></div>
+    </div>
+    <div class="foot">江苏鼎昌科技提供技术支持</div>
+
+    <div id="explain" class="weui-popup__container">
+        <div class="weui-popup__overlay"></div>
+        <div class="weui-popup__modal">
+            <div class="board-bar" style="position: relative">
+                <b class="b-close"></b>
+                <h1 class="popup-h1" style="text-align:center">活动说明</h1>
+                <div class="center">
+                    <div id="explain_content" class="explain-content">
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="mpQrcode" class="weui-popup__container">
+        <div class="weui-popup__overlay"></div>
+        <div class="weui-popup__modal">
+            <div class="board-bar" style="text-align: center; position: relative">
+                <b class="b-close"></b>
+                <h1 class="popup-h1">关注公众号领取奖励</h1>
+                <div style="width: 60%; margin: 0 auto;"><img id="mpQrcodeImg" src="" alt=""/></div>
+                <h2 style=" padding: 20px; font-size: 14px;">长按图中二维码,识别二维码<br>关注公众号</h2>
+            </div>
+        </div>
+    </div>
+
+    <div id="register" class="weui-popup__container">
+        <div class="weui-popup__overlay"></div>
+        <div class="weui-popup__modal">
+            <div class="board-bar" style="text-align: center; position: relative">
+                <b class="b-close"></b>
+                <h1 class="popup-h1">完善信息</h1>
+            </div>
+            <div class="weui-cells weui-cells_form">
+                <form id="registerForm">
+                    <div class="weui-cell ">
+                        <div class="weui-cell__hd">
+                            <label class="weui-label">手机号</label>
+                        </div>
+                        <div class="weui-cell__bd">
+                            <input name="phone" class="weui-input" type="tel">
+                        </div>
+                        <!--<div class="weui-cell__ft">-->
+                        <!--<button class="weui-vcode-btn">获取验证码</button>-->
+                        <!--</div>-->
+                    </div>
+
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label for="birthDate" class="weui-label">生日</label></div>
+                        <div class="weui-cell__bd">
+                            <input id="birthDate" name="birthDate" type="text">
+                        </div>
+                    </div>
+
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">昵称</label></div>
+                        <div class="weui-cell__bd">
+                            <input name="nickName" class="weui-input" type="text">
+                        </div>
+                    </div>
+
+                    <div class="weui-cell">
+                        <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
+
+                        <label class="weui-cell" style="padding: 0px;position: static;">
+                            <div class="weui-cell__bd weui-cells_checkbox">
+                                <input type="radio" class="weui-check" name="sex"  value="1">
+                                <i class="weui-icon-checked"></i>
+                            </div>
+                            <div class="weui-cell__bd">
+                                <p>男</p>
+                            </div>
+                        </label>
+                        <label class="weui-cell" style="padding: 0px 0px 0px 15px;position: static;">
+                            <div class="weui-cell__bd weui-cells_checkbox">
+                                <input type="radio" class="weui-check" name="sex" value="2">
+                                <i class="weui-icon-checked"></i>
+                            </div>
+                            <div class="weui-cell__bd">
+                                <p>女</p>
+                            </div>
+                        </label>
+                    </div>
+                </form>
+
+                <div class="weui-btn-area">
+                    <a class="weui-btn weui-btn_primary" style="background: #ff5500" href="javascript:" id="register_button">提交</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 </body>
 </html>

+ 13 - 22
js/global.js

@@ -28,9 +28,16 @@ redirectNoCodeUrl();
 jQuery.extend({
     authAjax: function (options) {
         var data = options.data || {};
-        data.batch = batch;
-        data.columnSort = columnSort;
-        data.qrCode = qrCode;
+
+        if (batch != null) {
+            data.batch = batch;
+        }
+        if (columnSort != null) {
+            data.columnSort = columnSort;
+        }
+        if (qrCode != null) {
+            data.qrCode = qrCode;
+        }
 
         //如果accessToken失效,重新发起静默授权
         if (accessToken == "" && (typeof(options.data) == "undefined" || options.data.oauthCode == null)) {
@@ -61,7 +68,7 @@ function redirectNoCodeUrl() {
             },
             success: function (res) {
                 localStorage.setItem("access_token", res.data.access_token);
-                location.href = res.data.redictUrl;
+                location.replace(res.data.redictUrl);
             }
         });
     }
@@ -73,7 +80,7 @@ function redirectAuthUrl(data) {
         url: api+"marketing/internal/redirectAuthUrl",
         data: data,
         success: function (res) {
-            location.href = res;
+            location.replace(res);
         }
     });
 }
@@ -131,25 +138,9 @@ function getLocation(successFun, cancelFun) {
         },
         fail : function(res) {
             $.hideLoading();
-            alert("获取位置失败");
+            $.toast("获取位置失败", "cancel");
         }
     });
 }
 
-//回活动首页
-function redirectActivityIndex() {
-    $.authAjax({
-        url: api+"marketing/internal/redirectActivityIndex",
-        async: false,
-        success: function (res) {
-            location.href = res;
-        }
-    })
-}
-
-//拼接含必需参数的url
-function spliceUrl(url) {
-    return url + "batch="+batch+"&columnSort="+columnSort+"&qrCode="+qrCode;
-}
-
 

+ 148 - 22
js/index.js

@@ -1,6 +1,9 @@
 //进入openid处理流程
 $.authAjax({
     url: api+"marketing/weixin/openidProcess"
+    // success: function () {
+    //     $.showLoading('数据加载中');
+    // }
 });
 
 //获取活动标题
@@ -25,7 +28,22 @@ $(function() {
 
     //绑定单击事件
     $("#receiveReward").on("click",function () {
-        receiveReward();
+        var img = $('#receiveReward').children("img");
+        if (img.attr("src") == "images/gray_btn.png"){
+            receiveReward();
+        }
+    });
+
+    $(".b-close").on("click",function () {
+        $.closePopup();
+    });
+
+    $("#explain_popup").on("click",function () {
+        $('#explain').popup();
+    });
+
+    $("#register_button").on("click",function () {
+        register();
     });
 
     //获取js-sdk签名
@@ -36,16 +54,25 @@ $(function() {
         getLocation(
             function (latitude,longitude) {
                 scanRecord(latitude,longitude);
+                localStorage.setItem('agreeLocation','true');
             },
             function () {
                 scanRecord('0.0','0.0');
+                localStorage.setItem('agreeLocation','false');
             }
         );
     });
 
     //config信息验证失败后会执行error方法
     wx.error(function(res){
-        alert("获取凭据失败:"+res);
+        console.log(res);
+        $.toast("获取凭据失败", "cancel");
+    });
+
+    $("#birthDate").datetimePicker({
+        times: function () {
+            return [];
+        }
     });
 });
 
@@ -58,7 +85,8 @@ function activityIsExpired(){
         success: function (res) {
             //活动未开始或已结束
             if (res.code != 0) {
-                $.toast(res.msg, "cancel");
+                $('#prompt').text(res.msg);
+                // $.hideLoading();
                 flag = false;
             }
         }
@@ -73,13 +101,21 @@ function showReward() {
         url: api+"marketing/weixin/calculateReward",
         async: false,
         success: function (res) {
-            if (res.code == 0) {
-                $("#reward").text(res.data);
-            //码对应奖励已发放
-            } else {
-                $.toast(res.msg, "cancel");
+            $('#prompt').text(res.msg);
+            $("#reward").text(res.data);
+            //二维码失效
+            if (res.code != 0) {
+                $('#rewardBtn').attr("src","images/gray_btn.png");
                 flag = false;
+            } else {
+                $('#unit').show();
+                if (res.data == 0) {
+                    $('#rewardBtn').attr("src","images/gray_btn.png");
+                } else {
+                    $('#rewardBtn').attr("src","images/btn.png");
+                }
             }
+            // $.hideLoading();
         }
     })
     return flag;
@@ -102,17 +138,20 @@ function scanRecord(latitude,longitude) {
 //领取奖励,如果return false,就不继续向下执行
 function receiveReward() {
     if (!userIsSubscribeApp()) {
-        // alert("未关注");
-        location.href = "http://ws.js-dctech.com/qrcode.html";
+        $("#mpQrcode").popup();
         return false;
     }
+
+    if (!userIsAgreeLocation()) {
+        $.alert("未能获取到位置信息,无法领取!请重新扫码参与活动");
+        return false;
+    }
+
     if (!userIsRegister()) {
-        // alert("未注册");
-        var url = spliceUrl("http://ws.js-dctech.com/register.html?");
-        location.href = url;
+        $("#register").popup();
         return false;
     }
-    redpackProcess();
+    awardProcess();
 }
 
 //用户是否关注公众号
@@ -121,16 +160,27 @@ function userIsSubscribeApp() {
     $.authAjax({
         url : api+"marketing/weixin/userIsSubscribeApp",
         async: false,
-        success: function (data) {
-            userIsSubscribeApp = data;
+        success: function (res) {
+            userIsSubscribeApp = res.data;
+            if (!userIsSubscribeApp) {
+                //读取公众号二维码
+                $('#mpQrcodeImg').attr("src",res.msg);
+            }
         }
     })
     return userIsSubscribeApp;
 }
 
+//用户是否同意地理位置授权
+function userIsAgreeLocation() {
+    var agreeLocation = localStorage.getItem('agreeLocation');
+    return agreeLocation == "true";
+}
+
 //用户是否注册(即含地理位置信息)
 function userIsRegister() {
     var userIsRegister;
+
     $.authAjax({
         url : api+"marketing/weixin/userIsRegister",
         async: false,
@@ -138,18 +188,28 @@ function userIsRegister() {
             userIsRegister = data;
         }
     })
+
+    if (!userIsRegister) {
+        //填入昵称和性别数据
+        $.authAjax({
+            url: api+"marketing/weixin/getWxUserInfo",
+            success: function (res) {
+                $('input[name="nickName"]').val(res.nickname);
+                $('input[name="sex"][value="'+res.sex+'"]').prop('checked',true);
+            }
+        });
+    }
     return userIsRegister;
 }
 
-//红包处理流程
-function redpackProcess() {
-
-    $.showLoading('红包发放中');
+//奖励处理流程
+function awardProcess() {
+    $.showLoading('奖励发放中');
 
     getLocation(
         function (latitude,longitude) {
             $.authAjax({
-                url : api+"marketing/weixin/redpackProcess",
+                url : api+"marketing/weixin/awardProcess",
                 async: false,
                 data: {
                     latitude: latitude,
@@ -159,10 +219,11 @@ function redpackProcess() {
                     $.hideLoading();
                     if (res.code == 0) {
                         $.toast(res.msg);
+                        $('#rewardBtn').attr("src","images/gray_btn.png");
+                        $("#receiveReward").unbind("click");
                     } else {
                         $.toast(res.msg, "cancel");
                     }
-                    //TODO 跳转到对应领取成功页面
                 },
                 error: function (res) {
                     $.hideLoading();
@@ -171,6 +232,71 @@ function redpackProcess() {
             })
         }
     );
+}
 
+//注册
+function register() {
+    var phone = $('input[name="phone"]').val();
+    var birthDate = $('input[name="birthDate"]').val();
+    var nickName = $('input[name="nickName"]').val();
+    var sex = $('input[name="sex"]').val();
 
+    if (phone == "") {
+        $.toptip("手机号不能为空");
+        return false;
+    } else {
+        var TEL_REGEXP = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
+        if (!TEL_REGEXP.test(phone)) {
+            $.toptip("手机号格式不正确");
+            return false;
+        }
+    }
+
+    if (birthDate == "") {
+        $.toptip("生日不能为空");
+        return false;
+    }
+
+    if (nickName == "") {
+        $.toptip("昵称不能为空");
+        return false;
+    }
+
+    if (sex == "") {
+        $.toptip("性别不能为空");
+        return false;
+    }
+
+    $.showLoading('数据提交中');
+
+    getLocation(
+        function (latitude,longitude) {
+            var arr = $("#registerForm").serializeArray();
+            arr.push({name:"latitude",value:latitude},{name:"longitude",value:longitude});
+            var json = {};
+            $.each(arr, function () {
+                json[this.name] = this.value;
+            });
+
+            $.authAjax({
+                url: api+"marketing/weixin/terminalUser",
+                type: "PUT",
+                data: {
+                    json:JSON.stringify(json)
+                },
+                success: function (data) {
+                    $.hideLoading();
+                    if (data.code == 0) {
+                        $.toast(data.msg);
+                        $.closePopup();
+                    }
+                },
+                error: function (data) {
+                    $.hideLoading();
+                    $.toast("请求失败", "cancel");
+                }
+            });
+
+        }
+    );
 }

+ 7 - 6
register.html

@@ -14,15 +14,11 @@
 		.weui-cells::before {
 			display: none;
 		}
-
 	</style>
 </head>
 
 <body>
 <div class="warp" style="background: #fff">
-	<!--<button onclick="alert(accessToken);">获取access_token</button>-->
-	<!--<button onclick="localStorage.removeItem('access_token')">删除access_token</button>-->
-	<!--<button onclick="alert(currentUrl)">当前页面</button>-->
 	<div class="weui-cells weui-cells_form" style="margin-top: 0px;">
 		<form id="registerForm">
 		<div class="weui-cell ">
@@ -88,7 +84,11 @@
 <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
 <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
 <script type="text/javascript">
-    $("#birthDate").calendar();
+    $("#birthDate").datetimePicker({
+		times: function () {
+			return [];
+        }
+	});
 
     //填入昵称和性别数据
     $.authAjax({
@@ -141,7 +141,8 @@
 
         //config信息验证失败后会执行error方法
         wx.error(function(res){
-            alert("获取凭据失败:"+res);
+            console.log(res);
+            $.toast("获取凭据失败", "cancel");
         });
 
     }