Bläddra i källkod

微信红包前端演示版本

caiweigan 6 år sedan
incheckning
eba234b36f
15 ändrade filer med 10977 tillägg och 0 borttagningar
  1. 155 0
      .gitignore
  2. 1 0
      MP_verify_t0CEshv8FW7gu42t.txt
  3. BIN
      images/banner.png
  4. BIN
      images/bar-icon.png
  5. BIN
      images/close-btn.png
  6. BIN
      images/detail-btn.png
  7. BIN
      images/pic01.jpg
  8. BIN
      images/qrcode.jpg
  9. 97 0
      images/style.css
  10. 26 0
      index.html
  11. 83 0
      js/global.js
  12. 206 0
      js/index.js
  13. 10253 0
      js/jquery-3.2.1.js
  14. 19 0
      qrcode.html
  15. 137 0
      register.html

+ 155 - 0
.gitignore

@@ -0,0 +1,155 @@
+# DIY
+target/
+
+# svn
+.svn/
+# Linux System
+*~
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# Windows System
+# Windows image file caches
+Thumbs.db
+ehthumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# OSX System
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Eclipse
+*.pydevproject
+.metadata
+.gradle
+bin/
+tmp/
+*.tmp
+*.bak
+*.swp
+*~.nib
+local.properties
+.settings/
+.loadpath
+
+# Eclipse Core
+.project
+
+# External tool builders
+.externalToolBuilders/
+
+# Locally stored "Eclipse launch configurations"
+*.launch
+
+# CDT-specific
+.cproject
+
+# JDT-specific (Eclipse Java Development Tools)
+.classpath
+
+# Java annotation processor (APT)
+.factorypath
+# PDT-specific
+.buildpath
+# sbteclipse plugin
+.target
+# TeXlipse plugin
+.texlipse
+# JetBrains
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio
+*.iml
+## Directory-based project format:
+.idea/
+# if you remove the above rule, at least ignore the following:
+# User-specific stuff:
+# .idea/workspace.xml
+# .idea/tasks.xml
+# .idea/dictionaries
+# Sensitive or high-churn files:
+# .idea/dataSources.ids
+# .idea/dataSources.xml
+# .idea/sqlDataSources.xml
+# .idea/dynamic.xml
+# .idea/uiDesigner.xml
+# Gradle:
+# .idea/gradle.xml
+# .idea/libraries
+# Mongo Explorer plugin:
+# .idea/mongoSettings.xml
+## File-based project format:
+*.ipr
+*.iws
+## Plugin-specific files:
+# IntelliJ
+/out/
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+# JIRA plugin
+atlassian-ide-plugin.xml
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+# JAVA
+*.class
+# Mobile Tools for Java (J2ME)
+.mtj.tmp/
+# Package Files #
+*.jar
+*.war
+*.ear
+# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
+hs_err_pid*
+#Maven
+target/
+**/target/
+pom.xml.tag
+pom.xml.releaseBackup
+pom.xml.versionsBackup
+pom.xml.next
+release.properties
+dependency-reduced-pom.xml
+buildNumber.properties
+.mvn/timing.properties
+logs/

+ 1 - 0
MP_verify_t0CEshv8FW7gu42t.txt

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

BIN
images/banner.png


BIN
images/bar-icon.png


BIN
images/close-btn.png


BIN
images/detail-btn.png


BIN
images/pic01.jpg


BIN
images/qrcode.jpg


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 97 - 0
images/style.css


+ 26 - 0
index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
+    <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>
+    <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="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="js/index.js"></script>
+
+</head>
+
+<body>
+<div>金额:<span id="reward"></span>元</div>
+<button id="receiveReward">点击领取</button>
+</body>
+</html>

+ 83 - 0
js/global.js

@@ -0,0 +1,83 @@
+//网关对应地址
+var api = "http://192.168.2.40:8080/api/";
+
+//租户简称
+var abbreviationName = getUrlParam("abbreviationName");
+
+//活动id
+var activityId = getUrlParam("activityId");
+
+//二维码值
+var qrCode = getUrlParam("qrCode");
+
+//当前url
+var currentUrl = location.href.split('#')[0];
+
+//获取url中的参数
+function getUrlParam(name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+    var r = window.location.search.substr(1).match(reg); //匹配目标参数
+    if(r != null){
+        return decodeURIComponent(r[2]);//路径后面的参数形式为参数名=参数值,而第一个字符为参数名,第二个为=,第三个就为参数值
+    }
+    return null;//返回参数值
+}
+
+//获取js-sdk签名
+function createJsapiSignature(url) {
+    $.ajax({
+        type : "GET",
+        url : api+"marketing/weixin/createJsapiSignature",
+        async: false,
+        data: {abbreviationName: abbreviationName, url: url},
+        dataType:"json",
+        success : function(data) {
+            wx.config({
+                beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
+                // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
+                appId: data.appId, // 必填,企业微信的corpID
+                timestamp: data.timestamp, // 必填,生成签名的时间戳
+                nonceStr: data.nonceStr, // 必填,生成签名的随机串
+                signature: data.signature,// 必填,签名,见附录1
+                jsApiList: [
+                    'checkJsApi',
+                    'openLocation',// 使用微信内置地图查看地理位置接口
+                    'getLocation' // 获取地理位置接口
+                ]
+            });
+        }
+    });
+}
+
+//获取用户位置
+function getLocation(successFun, cancelFun) {
+    wx.getLocation({
+        success : function(res) {
+            var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
+            var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
+            var speed = res.speed; // 速度,以米/每秒计
+            var accuracy = res.accuracy; // 位置精度
+            successFun(latitude,longitude);
+        },
+        cancel : function (res) {
+            if(typeof cancelFun != 'undefined' && cancelFun instanceof Function){
+                cancelFun();
+            }
+        },
+        fail : function(res) {
+            alert("获取位置失败");
+        }
+    });
+}
+
+//回首页
+function hrefIndex() {
+    location.href = api+"marketing/weixin/redirectAuthUrl?abbreviationName="+abbreviationName+"&activityId="+activityId+"&qrCode="+qrCode;
+}
+
+//拼接url
+function spliceUrl(url) {
+    return url + "abbreviationName="+abbreviationName+"&activityId="+activityId+"&qrCode="+qrCode;
+}
+
+

+ 206 - 0
js/index.js

@@ -0,0 +1,206 @@
+var oauthCode = getUrlParam("code");
+// alert("当前地址:"+currentUrl);
+var openid = null;
+
+//进入openid处理流程
+$.ajax({
+    url: api+"marketing/weixin/openidProcess",
+    async: false,
+    data: {
+        abbreviationName: abbreviationName,
+        oauthCode: oauthCode
+    },
+    success: function (res) {
+        if (res.code == 1) {
+            hrefIndex();
+        } else {
+            openid = res.data;
+        }
+    }
+});
+
+//页面结构加载完成后执行
+$(function() {
+
+    //判断活动是否过期
+    if (!activityIsExpired()) {
+        return false;
+    }
+
+    //获取并显示码对应的奖励,如果return false,就不继续向下执行
+    if (!showReward()) {
+        return false;
+    }
+
+    //绑定单击事件
+    $("#receiveReward").on("click",function () {
+        receiveReward();
+    });
+
+    //获取js-sdk签名
+    createJsapiSignature(currentUrl);
+
+    //config信息验证成功后会执行ready方法
+    wx.ready(function() {
+        getLocation(
+            function (latitude,longitude) {
+                scanRecord(latitude,longitude);
+            },
+            function () {
+                scanRecord('0.0','0.0');
+            }
+        );
+    });
+
+    //config信息验证失败后会执行error方法
+    wx.error(function(res){
+        alert("获取凭据失败:"+res);
+    });
+});
+
+//判断活动是否过期
+function activityIsExpired(){
+    var flag = true;
+    $.ajax({
+        url: api+"marketing/weixin/activityIsExpired",
+        async: false,
+        data: {
+            abbreviationName: abbreviationName,
+            activityId: activityId
+        },
+        success: function (res) {
+            //活动未开始或已结束
+            if (res.code != 0) {
+                $.toast(res.msg, "cancel");
+                flag = false;
+            }
+        }
+    })
+    return flag;
+}
+
+//获取并显示码对应的奖励
+function showReward() {
+    var flag = true;
+    $.ajax({
+        url: api+"marketing/weixin/calculateReward",
+        async: false,
+        data: {
+            abbreviationName: abbreviationName,
+            qrCode: qrCode,
+            openid: openid
+        },
+        success: function (res) {
+            if (res.code == 0) {
+                $("#reward").text(res.data);
+            //码被其他用户扫描过
+            } else if (res.code == 1){
+                $.toast(res.msg, "cancel");
+                flag = false;
+            //码对应奖励已发放
+            } else if (res.code == 2){
+                $.toast(res.msg, "cancel");
+                flag = false;
+            }
+        }
+    })
+    return flag;
+}
+
+
+//记录活动(扫码)事件
+function scanRecord(latitude,longitude) {
+    // alert("记录扫码事件");
+    $.ajax({
+        url: api+"marketing/weixin/scanRecord",
+        type: "POST",
+        data: {
+            abbreviationName: abbreviationName,
+            latitude: latitude,
+            longitude:longitude,
+            openid: openid,
+            activityId:activityId,
+            qrValue:qrCode
+        }
+    })
+}
+
+//领取奖励,如果return false,就不继续向下执行
+function receiveReward() {
+    if (!userIsSubscribeApp()) {
+        // alert("未关注");
+        location.href = "/qrcode.html";
+        return false;
+    }
+    if (!userIsRegister()) {
+        // alert("未注册");
+        var url = spliceUrl("http://ws.js-dctech.com/register.html?openid="+openid+"&");
+        location.href = url;
+        return false;
+    }
+    redpackProcess();
+}
+
+//用户是否关注公众号
+function userIsSubscribeApp() {
+    var userIsSubscribeApp;
+    $.ajax({
+        url : api+"marketing/weixin/userIsSubscribeApp",
+        async: false,
+        data: {
+            abbreviationName: abbreviationName,
+            openid: openid
+        },
+        success: function (data) {
+            userIsSubscribeApp = data;
+        }
+    })
+    return userIsSubscribeApp;
+}
+
+//用户是否注册(即含地理位置信息)
+function userIsRegister() {
+    var userIsRegister;
+    $.ajax({
+        url : api+"marketing/weixin/userIsRegister",
+        async: false,
+        data: {
+            abbreviationName: abbreviationName,
+            openid: openid
+        },
+        success: function (data) {
+            userIsRegister = data;
+        }
+    })
+    return userIsRegister;
+}
+
+//红包处理流程
+function redpackProcess() {
+    getLocation(
+        function (latitude,longitude) {
+            $.ajax({
+                url : api+"marketing/weixin/redpackProcess",
+                async: false,
+                data: {
+                    abbreviationName: abbreviationName,
+                    openid:openid,
+                    activityId:activityId,
+                    qrCode: qrCode,
+                    latitude: latitude,
+                    longitude: longitude
+                },
+                success: function (res) {
+                    if (res.code == 0) {
+                        $.toast(res.msg);
+                    } else {
+                        $.toast(res.msg, "cancel");
+                    }
+                    //TODO 跳转到对应领取成功页面
+                }
+            })
+        }
+    );
+
+
+}

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 10253 - 0
js/jquery-3.2.1.js


+ 19 - 0
qrcode.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
+    <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>
+    <link rel="stylesheet" type="text/css" href="images/style.css"/>
+
+</head>
+
+<body>
+<div class="warp">
+    <img src="images/qrcode.jpg">
+</div>
+</body>
+</html>

+ 137 - 0
register.html

@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
+	<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>
+	<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">
+	<style>
+		.weui-cells::before {
+			display: none;
+		}
+
+	</style>
+</head>
+
+<body>
+<div class="warp" style="background: #fff">
+	<div class="weui-cells weui-cells_form" style="margin-top: 0px;">
+		<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" href="javascript:" onclick="submit();">提交</a>
+		</div>
+	</div>
+
+</div>
+<script src="js/jquery-3.2.1.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/1.11.0/jquery.min.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 type="text/javascript">
+    $("#birthDate").calendar();
+
+    function submit() {
+        //获取js-sdk签名
+        createJsapiSignature(currentUrl);
+
+        //config信息验证成功后会执行ready方法
+        wx.ready(function() {
+            getLocation(
+                function (latitude,longitude) {
+                    var arr = $("#registerForm").serializeArray();
+                    arr.push({name:"openId",value:getUrlParam("openid")},{name:"latitude",value:latitude},{name:"longitude",value:longitude});
+                    var json = {};
+                    $.each(arr, function () {
+                        json[this.name] = this.value;
+                    });
+
+                    $.ajax({
+                        url: api+"marketing/weixin/terminalUser",
+                        type: "PUT",
+                        data: {
+                            abbreviationName:abbreviationName,
+							json:JSON.stringify(json)
+						},
+                        success: function (data) {
+                            if (data.code == 0) {
+                                $.toast(data.msg);
+                                hrefIndex();
+                            }
+                        }
+                    });
+
+                }
+            );
+        });
+
+        //config信息验证失败后会执行error方法
+        wx.error(function(res){
+            alert("获取凭据失败:"+res);
+        });
+
+
+
+
+    }
+</script>
+</body>
+</html>