fission-page.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  7. <link rel="stylesheet" href="css/weui.min.css"/>
  8. <link rel="stylesheet" href="css/weuix.min.css"/>
  9. <link rel="stylesheet" href="css/style.css?vision=1.11">
  10. <script src="js/md5.js"></script>
  11. <script src="js/vue.min.js"></script>
  12. <script src="js/zepto.min.js"></script>
  13. <script src="js/zepto.weui.min.js"></script>
  14. <script src="js/php.js"></script>
  15. <script src="js/axios.min.js"></script>
  16. <script src="js/weChatSdk.js"></script>
  17. </head>
  18. <body>
  19. <div id="myApp" class="bg-box">
  20. <img alt="" class="headImg-box" :src=headSrc>
  21. <div class="content-box">
  22. <img alt="" :src=contentSrc />
  23. </div>
  24. <div class="num-box">
  25. 已有 <span style="color: #A4404E">{{num}}</span> 人领取成功
  26. </div>
  27. <!--<img class="get-btn-box" src="image/get-free.gif" alt="" onclick="isfollowqr('http://open.weixin.qq.com/qr/code?username=hszuqiu')" />-->
  28. <img class="get-btn-box" src="image/get-free.gif" alt="" @click="goWeChat" />
  29. </div>
  30. </body>
  31. <script>
  32. const apiUrl = 'http://fission.xazhima.com/api/api.php';
  33. new Vue({
  34. el:'#myApp',
  35. data:{
  36. num:52255,
  37. headSrc:'image/headImg.png',
  38. contentSrc:"image/content-bg.png",
  39. weChatCode:'',
  40. isFollow:'0',
  41. openId:'',
  42. },
  43. methods:{
  44. goWeChat(){
  45. if(this.isFollow === '0'){
  46. location.href = 'http://mp.weixin.qq.com/mp/getmasssendmsg?__biz=MzUzOTcwMjM0OQ==#wechat_webview_type=1&wechat_redirect'
  47. }
  48. else {
  49. console.log('show share modal');
  50. wx.onMenuShareAppMessage({
  51. title: '语言训练认知图片大全', // 分享标题
  52. desc: '已有239218领取成功', // 分享描述
  53. link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  54. imgUrl: this.headSrc, // 分享图标
  55. type: 'link', // 分享类型:music | video | link,默认为:link
  56. dataUrl: '', // 如果type为:music | video,则要提供数据,默认为:空
  57. success: function(){
  58. console.log('share success')
  59. },
  60. cancel: function(){
  61. console.log('share cancel')
  62. },
  63. })
  64. }
  65. },
  66. subStrUrlCode: function () {
  67. let weChatCodeUrl = location.search; //获取url中"?"符后的字符串
  68. let theRequest = {};
  69. if (weChatCodeUrl.indexOf("?") !== -1) {
  70. let str = weChatCodeUrl.substr(1);
  71. let strS = str.split("&");
  72. for(let i = 0; i < strS.length; i ++) {
  73. theRequest[strS[i].split("=")[0]]=(strS[i].split("=")[1]);
  74. }
  75. }
  76. console.log(theRequest);
  77. return theRequest.code;
  78. },
  79. judgeLogin(){
  80. axios({
  81. method: 'post', //请求方式 有常用的有get post等
  82. url: apiUrl, //请求地址
  83. data: {
  84. method: 'login',
  85. timestamp: 11111111,
  86. sign:md5('login'+'11111111')
  87. }, //代表传过去的参数对象,
  88. transformRequest: [function(data) {
  89. let ret = '';
  90. for (let it in data) {
  91. ret += encodeURIComponent(it) + '=' +
  92. encodeURIComponent(data[it]) + '&'
  93. }
  94. return ret
  95. }], //将传参修改为formData格式 注释则为JSON格式
  96. }).then(function(rs) {
  97. if(rs.data.code === 200) {
  98. window.location.href = rs.data.msg;
  99. console.log(rs.data)
  100. }else {
  101. alert(rs.data.msg)
  102. }
  103. }).catch(function(e) {
  104. console.log(e);
  105. });
  106. },
  107. setWxConfig(param){
  108. wx.config({
  109. debug: false,
  110. appId: param.appId,
  111. timestamp: param.timestamp ,
  112. nonceStr : param.nonceStr,
  113. signature: param.signature,
  114. jsApiList: [
  115. 'imagePreview', 'chooseImage', 'uploadImage','onMenuShareAppMessage'
  116. ]
  117. });
  118. },
  119. sendCodeRequest(){
  120. let that = this , jsUrl = location.href.split('#')[0];
  121. axios({
  122. method: 'post', //请求方式 有常用的有get post等
  123. url: apiUrl, //请求地址
  124. data: {
  125. method: 'wxinfo',
  126. timestamp: 11111111,
  127. code:that.weChatCode,
  128. jsUrl:jsUrl,
  129. sign:md5('wxinfo'+'11111111')
  130. }, //代表传过去的参数对象,
  131. transformRequest: [function(data) {
  132. let ret = '';
  133. for (let it in data) {
  134. ret += encodeURIComponent(it) + '=' +
  135. encodeURIComponent(data[it]) + '&'
  136. }
  137. return ret
  138. }], //将传参修改为formData格式 注释则为JSON格式
  139. }).then(function(rs) {
  140. if(rs.data.code === 200) {
  141. that.setWxConfig(rs.data.msg.js_sign);
  142. that.headSrc = rs.data.msg.headimgurl;
  143. that.isFollow = rs.data.msg.subscribe;
  144. that.openId = rs.data.msg.openid;
  145. }else {
  146. alert(rs.data.msg)
  147. }
  148. }).catch(function(e) {
  149. console.log(e);
  150. });
  151. }
  152. },
  153. mounted(){
  154. this.weChatCode = this.subStrUrlCode();
  155. this.weChatCode ? this.sendCodeRequest() : this.judgeLogin()
  156. }
  157. })
  158. </script>
  159. </html>