首页 发现 帮助
注册 登录
caiweigan
/
weixin-h5
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

微信红包前端演示版本

caiweigan 6 年之前
当前提交
eba234b36f
共有 15 个文件被更改，包括 10977 次插入 和 0 次删除
合并视图 显示文件统计
  1. 155 0
      .gitignore
  2. 1 0
      MP_verify_t0CEshv8FW7gu42t.txt
  3. 二进制
      images/banner.png
  4. 二进制
      images/bar-icon.png
  5. 二进制
      images/close-btn.png
  6. 二进制
      images/detail-btn.png
  7. 二进制
      images/pic01.jpg
  8. 二进制
      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

二进制
images/banner.png
查看文件


二进制
images/bar-icon.png
查看文件


二进制
images/close-btn.png
查看文件


二进制
images/detail-btn.png
查看文件


二进制
images/pic01.jpg
查看文件


二进制
images/qrcode.jpg
查看文件


文件差异内容过多而无法显示
+ 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 跳转到对应领取成功页面
 
+                }
 
+            })
 
+        }
 
+    );
 
+
 
+
 
+}

文件差异内容过多而无法显示
+ 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>