script.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. var getNode = function(id){
  2. return document.getElementById(id)
  3. }
  4. var yuyue = getNode("yuyue") // 预约按钮
  5. var share = getNode("share") // 分享按钮
  6. var modal = getNode("zy-h5-modal") // 预约弹框
  7. var modalZz = getNode("zy-h5-fix-z") // 弹框遮罩层
  8. var submitModal = getNode("submitModal") // 提交预约
  9. var canselModal = getNode("canselModal") // 取消预约
  10. var userPhone = getNode("userPhone") // 预约手机号
  11. var joinerNum = getNode("joinerNum") // 参与人数
  12. var store = getNode("store") // 门店
  13. var address = getNode("address") // 地址
  14. var tel = getNode("tel") // 电话
  15. var upScroll = getNode("upScroll") // 参与人信息 外层盒子
  16. var upScrollO = getNode("upScroll-o") // 参与人信息 盒子1
  17. var upScrollT = getNode("upScroll-t") // 参与人信息 盒子2
  18. var storeId = getQueryString('orgId') || 0 // 门店id
  19. var companyId = ''
  20. // test, 测试 local、dev:本地开发环境 pre :预发布 pro:生产
  21. if(baseType == 'test'){
  22. var reqUrl = 'http://192.168.16.100:9110/saas/clz/'
  23. }else if(baseType == 'local'){
  24. var reqUrl = 'http://192.168.16.104:9110/saas/clz/'
  25. }else if(baseType == 'dev'){
  26. var reqUrl = 'http://192.168.16.104:9110/saas/clz/'
  27. }else if(baseType == 'pre'){
  28. var reqUrl = 'http://md.test.zyucgj.com/saas/clz/'
  29. }else if(baseType == 'pro'){
  30. var reqUrl = 'http://md.chelingzhu.com/saas/clz/'
  31. }
  32. // 隐藏预约弹框
  33. var closeYy = function (){
  34. userPhone.value = ''
  35. modal.style.display = 'none'
  36. modalZz.style.display = 'none'
  37. }
  38. window.onload = function(){
  39. if(staticHtmlPath){ // 发布
  40. onLoading() // 加载中
  41. checkActiveValid()
  42. }else{ // 预览
  43. getActivityData() // 获取活动信息
  44. }
  45. // 校验活动是否还在进行
  46. function checkActiveValid(){
  47. $.ajax({
  48. url: reqUrl + 'zycar-mgr/active/checkActiveValid/' + activeId,
  49. type: 'get',
  50. header: { contentType: 'application/json;charset=UTF-8' },
  51. // 设置的是请求参数
  52. data: {},
  53. dataType: 'json',
  54. success: function (res) {
  55. if(res.status == 200){
  56. if(res.data){
  57. getActivityData() // 获取活动信息
  58. }else{
  59. alert('该活动已经结束!')
  60. }
  61. }
  62. }
  63. })
  64. }
  65. // 获取活动信息
  66. function getActivityData(){
  67. // 获取活动信息 (海报和门店二维码)
  68. $.ajax({
  69. url: reqUrl + 'active/findActiveAttach/' + activeId,
  70. type: 'get',
  71. header: { contentType: 'application/json;charset=UTF-8' },
  72. // 设置的是请求参数
  73. data: {},
  74. dataType: 'json',
  75. success: function (res) {
  76. if(res.status == 200){
  77. const data = res.data
  78. if(staticHtmlPath){ // 发布
  79. const joinerNumVal = parseInt(data.initBuyNum) + parseInt(data.joinerNum)
  80. joinerNum.innerHTML = joinerNumVal
  81. $('.zy-h5-store-info').show()
  82. }
  83. // 根据门店id处理对应页面展示
  84. if(storeId){ // 门店端发布活动会传有门店id参数
  85. // 获取门店信息
  86. $.ajax({
  87. url: reqUrl + 'cross/store/' + storeId,
  88. type: 'get',
  89. header: { contentType: 'application/json;charset=UTF-8' },
  90. // 设置的是请求参数
  91. data: {},
  92. dataType: 'json',
  93. success: function (result) {
  94. if(result.status == 200){
  95. const data = result.data
  96. store.innerHTML = data.name || ''
  97. let addrCityName = data.addrCityName || ''
  98. let addrDistrictName = data.addrDistrictName || ''
  99. let addrDetail = data.addrDetail || ''
  100. address.innerHTML = addrCityName + addrDistrictName + addrDetail
  101. tel.innerHTML = data.managerMobile
  102. document.getElementById("tel-link").href = 'tel:' + data.managerMobile
  103. companyId = data.companyId
  104. joinerList(companyId) // 参与人列表数据
  105. }
  106. },
  107. })
  108. }else{ // 运营端发布活动无门店id参数
  109. joinerList() // 参与人列表数据
  110. }
  111. if(staticHtmlPath){ // 发布
  112. // 关闭加载状态
  113. document.getElementById('foo').style.display = 'none'
  114. modalZz.style.display = 'none'
  115. // 不是微信端打开的页面
  116. if(!browser.versions.weixin){
  117. document.querySelector('.zy-h5-bf-bar').style.display = 'none'
  118. document.querySelector('.zy-h5-fx-bar').style.display = 'none'
  119. }else{
  120. document.querySelector('.zy-h5-bf-bar').style.display = 'flex'
  121. document.querySelector('.zy-h5-fx-bar').style.display = 'block'
  122. }
  123. }
  124. }
  125. },
  126. })
  127. }
  128. // 加载中
  129. function onLoading(){
  130. // 隐藏参与和分享按钮
  131. document.querySelector('.zy-h5-bf-bar').style.display = 'none'
  132. document.querySelector('.zy-h5-fx-bar').style.display = 'none'
  133. modalZz.style.display = 'block' // 遮罩层
  134. var opts = {
  135. lines: 9, // The number of lines to draw
  136. length: 0, // The length of each line
  137. width: 10, // The line thickness
  138. radius: 15, // The radius of the inner circle
  139. corners: 1, // Corner roundness (0..1)
  140. rotate: 0, // The rotation offset
  141. color: '#2979ff', // #rgb or #rrggbb
  142. speed: 1, // Rounds per second
  143. trail: 60, // Afterglow percentage
  144. shadow: false, // Whether to render a shadow
  145. hwaccel: false, // Whether to use hardware acceleration
  146. className: 'spinner', // The CSS class to assign to the spinner
  147. zIndex: 2e9, // The z-index (defaults to 2000000000)
  148. top: 'auto', // Top position relative to parent in px
  149. left: 'auto' // Left position relative to parent in px
  150. };
  151. var target = document.getElementById('foo');
  152. var spinner = new Spinner(opts).spin(target);
  153. }
  154. // 打开预约弹框
  155. yuyue.onclick = function(){
  156. modal.style.display = 'block'
  157. modalZz.style.display = 'block'
  158. }
  159. // 关闭预约弹框
  160. canselModal.onclick = function(){
  161. closeYy()
  162. }
  163. // 提交预约
  164. submitModal.onclick = function(){
  165. // 提交代码到后台
  166. var mobile = userPhone.value
  167. if(mobile==''){
  168. alert("请输入手机号码");
  169. return false;
  170. }
  171. if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))){
  172. alert("手机号码错误,请重填");
  173. return false;
  174. }
  175. const obj = JSON.stringify({
  176. "joinerMobile": mobile, // 参与手机号
  177. "activeId": activeId, // 活动id
  178. "tenantId": storeId, // 门店id
  179. "companyId": companyId // 公司id
  180. })
  181. // 立即参与
  182. $.ajax({
  183. url: reqUrl + 'active/signUp',
  184. type: 'post',
  185. contentType: 'application/json;charset=UTF-8',
  186. // 设置的是请求参数
  187. data: obj,
  188. dataType: 'json',
  189. success: function (res) {
  190. if(res.status == 200){
  191. closeYy()
  192. }
  193. alert(res.message)
  194. }
  195. })
  196. }
  197. // 分享
  198. share.onclick = function(){
  199. if(storeId){
  200. window.location.href = 'http://static.chelingzhu.com/active/poster.html?id=' + activeId + '&reqUrl=' + reqUrl + '&orgId=' + storeId
  201. }else{
  202. window.location.href = 'http://static.chelingzhu.com/active/poster.html?id=' + activeId + '&reqUrl=' + reqUrl
  203. }
  204. }
  205. // 门店活动统计(参与者轮播)
  206. function joinerList(companyId){
  207. let obj = JSON.stringify({
  208. activeId: activeId, // 活动id
  209. tenantId: storeId, // 门店id
  210. companyId: companyId, // 公司id
  211. status: 9 // 9是假数据的标识
  212. })
  213. // 获取门店信息
  214. $.ajax({
  215. url: reqUrl + 'cross/active/joinerByActive/1/1000',
  216. type: 'post',
  217. contentType: 'application/json;charset=UTF-8',
  218. // 设置的是请求参数
  219. data: obj,
  220. dataType: 'json',
  221. success: function (res) {
  222. if(res.status == 200){
  223. const data = res.data.list
  224. let html = ''
  225. for(let i = 0; i < data.length; i++){
  226. html += `<li class="info-con">
  227. <p class="qg-people">${data[i].joinerMobile}</p>
  228. <p class="qg-state">抢购成功</p>
  229. </li>`
  230. }
  231. document.getElementById("scroll-con").innerHTML = html
  232. // 参与人信息 向上滚动
  233. data.length > 0 ? upDownScroll() : ''
  234. }
  235. },
  236. })
  237. }
  238. // 上下滚动
  239. function upDownScroll(){
  240. var scrollTimer
  241. $("#scroll").hover(function(){
  242. clearInterval(scrollTimer)
  243. }, function() {
  244. scrollTimer = setInterval(function() {
  245. scrollContent($("#scroll"))
  246. }, 2000)
  247. }).trigger("mouseout")
  248. }
  249. function scrollContent(obj) {
  250. var $self = obj.find("ul:first")
  251. var lineHeight = $self.find("li:first").height() //获取行高
  252. $self.animate({
  253. "margin-top": -lineHeight + "px"
  254. }, 1000, function() {
  255. $self.css({
  256. "margin-top": "0px"
  257. }).find("li:first").appendTo($self) //appendTo能直接移动元素而不是复制,被appendto的元素位置发生变化
  258. })
  259. }
  260. }
  261. // 正则获取地址栏参数
  262. function getQueryString(name) {
  263. let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i")
  264. let r = window.location.search.substr(1).match(reg)
  265. if (r != null) {
  266. return unescape(r[2])
  267. }
  268. return null
  269. }