index.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. {extend name="layout/layout" /}
  2. {block name="title"}{$res.aname}{/block}
  3. {block name="css"}
  4. <!-- 这里引入css -->
  5. <link href="{:client_asset('/css/frontend/common.css')}" rel="stylesheet" type="text/css">
  6. <link href="{:client_asset('/css/frontend/classify.css')}" rel="stylesheet" type="text/css">
  7. <style type="text/css">
  8. html,
  9. body {
  10. background-color: {$res.bgcolor};
  11. }
  12. .a_banner{
  13. overflow: hidden;
  14. }
  15. .a_info_box{
  16. margin: 0 auto .1rem;
  17. padding:.17rem .16rem;
  18. width: 2.41rem;
  19. height: .94rem;
  20. background: url({$res.payimage}) no-repeat 0 0/100% 100%;
  21. box-sizing: border-box;
  22. }
  23. .a_info_text{
  24. text-align: center;
  25. overflow: hidden;
  26. }
  27. .a_info_text strong
  28. {
  29. font-size: .18rem;
  30. color: {$res.paycolor};
  31. line-height: .3rem;
  32. white-space: nowrap;
  33. }
  34. .a_info_text span{
  35. font-size: .18rem;
  36. color: {$res.paycolor};
  37. line-height: .3rem;
  38. white-space: nowrap;
  39. }
  40. .a_info_text span{
  41. margin-left: .1rem;
  42. }
  43. .a_time{
  44. overflow: hidden;
  45. margin: 0 auto .1rem;
  46. text-align: center;
  47. font-size: .13rem;
  48. color: {$res.atimecolor};
  49. line-height: .24rem;
  50. }
  51. .re_but_box{
  52. overflow: hidden;
  53. display: block;
  54. text-align: center;
  55. }
  56. .re_but_box a{
  57. margin: 0;
  58. padding: 0;
  59. border: 0;
  60. display:inline-block;
  61. height: .36rem;
  62. font-size: 0;
  63. }
  64. .re_but_box a img{
  65. margin: 0;
  66. padding: 0;
  67. border: 0;
  68. display: block;
  69. height: .36rem;
  70. width: auto;
  71. }
  72. .a_pay_text{
  73. overflow: hidden;
  74. margin: .16rem .16rem .24rem;
  75. }
  76. .a_pay_text h3{
  77. font-size: .15rem;
  78. color: {$res.warningcolor};
  79. line-height: .3rem;
  80. }
  81. .a_pay_text {
  82. font-size: .13rem;
  83. color: {$res.warningcolor};
  84. line-height: .24rem;
  85. }
  86. .a_pop_up{
  87. display:none;
  88. position: fixed;
  89. left: 0;
  90. top: 0;
  91. right: 0;
  92. bottom: 0;
  93. background-color: rgba(0,0,0,.8);
  94. white-space: nowrap;
  95. text-align: center;
  96. }
  97. .a_pop_up_box,
  98. .a_pop_jgb{
  99. overflow: hidden;
  100. display: inline-block;
  101. vertical-align: middle;
  102. white-space: normal;
  103. }
  104. .a_pop_jgb{
  105. margin-left: -1px;
  106. height: 100%;
  107. width: 1px;
  108. }
  109. .a_pop_up_box{
  110. min-width: 2.6rem;
  111. padding: .3rem .2rem;
  112. background-color: #fff;
  113. border-radius: .1rem;
  114. box-sizing: border-box;
  115. }
  116. .a_pop_up_box strong{
  117. display: block;
  118. text-align: center;
  119. font-size: .18rem;
  120. color: #414141;
  121. line-height: .3rem;
  122. }
  123. .a_pop_up_box span{
  124. display: block;
  125. text-align: center;
  126. font-size: .13rem;
  127. color: #414141;
  128. line-height: .3rem;
  129. }
  130. .a_pop_up_box a{
  131. display: block;
  132. margin: .1rem .2rem;
  133. background-color: #ff2f10;
  134. font-size: .14rem;
  135. color: #fff;
  136. line-height: .4rem;
  137. border-radius: .06rem;
  138. }
  139. .vry_sry{
  140. display:none;
  141. position: fixed;
  142. left: 0;
  143. top: 0;
  144. right: 0;
  145. bottom: 0;
  146. z-index: 1000;
  147. overflow: hidden;
  148. background-color: rgba(0,0,0,.7);
  149. font-size: 0;
  150. text-align: center;
  151. white-space: nowrap;
  152. box-sizing: border-box;
  153. }
  154. .vry_sry a,
  155. .vry_sry span{
  156. display: inline-block;
  157. *display: inline;
  158. *zoom:1;
  159. vertical-align: middle;
  160. }
  161. .vry_sry span{
  162. overflow: hidden;
  163. margin-left: -1px;
  164. height: 100%;
  165. width: 1px;
  166. }
  167. .vry_sry a{
  168. height: 3.13rem;
  169. width: 3.1rem;
  170. background: url(/assets/img/frontend/activity/btn3.png) no-repeat 0 0;
  171. background-size: 3.1rem 3.13rem;
  172. }
  173. .js_loading strong{
  174. padding: .1rem .1rem .1rem .8rem;
  175. position:fixed;
  176. top:50%;
  177. left: .6rem;
  178. right: .6rem;
  179. z-index: 199;
  180. margin: -.3rem auto;
  181. height: .7rem;
  182. font-size:.16rem;
  183. color:#fff;
  184. line-height: .5rem;
  185. background:rgba(0,0,0,0.7) url({:client_asset('/img/frontend/icon/oval.svg')}) no-repeat .2rem center;
  186. background-size: .4rem .4rem;
  187. box-sizing: border-box;
  188. border-radius: .08rem;
  189. }
  190. .js_loading{
  191. display: none;
  192. position: fixed;
  193. left: 0;
  194. right: 0;
  195. top: 0;
  196. bottom: 0;
  197. z-index: 100;
  198. background-color: rgba(0,0,0,.3);
  199. }
  200. /*弹出框*/
  201. .bind_alert_box, .bind_alert_box2{
  202. display: none;
  203. position:fixed;
  204. left:0;
  205. top:0;
  206. right:0;
  207. bottom:0;
  208. padding:20px 0;
  209. overflow:hidden;
  210. background-color:rgba(0,0,0,0.5);
  211. text-align:center;
  212. font-size:0;
  213. z-index:3000;
  214. }
  215. .bind_alert_main,
  216. .bind_alert_height{
  217. display:inline-block;
  218. *display:inline;
  219. *zoom:1;
  220. vertical-align:middle;
  221. }
  222. .bind_alert_height{
  223. height:100%;
  224. overflow:hidden;
  225. width:1px;
  226. margin-left:-10px;
  227. }
  228. .bind_alert_main{
  229. overflow:hidden;
  230. width:240px;
  231. background-color:#fff;
  232. border-radius:6px;
  233. font-size:14px;
  234. -moz-box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
  235. -webkit-box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
  236. box-shadow:0 0 10px 0px rgba(0,0,0,0.3);
  237. }
  238. .bind_alert_off{
  239. float: right;
  240. width: 26px;
  241. height: 26px;
  242. background:#fff url(/assets/img/frontend/icon/cha_icon_2.png) no-repeat center center;
  243. background-size: 13px 13px;
  244. border-radius: 26px;
  245. margin: 0 0 10px;
  246. }
  247. .alert_tit{
  248. margin: 20px 40px;
  249. text-align:center;
  250. overflow:hidden;
  251. }
  252. .alert_tit_clear{
  253. margin:5px 5px 0 0;
  254. float:right;
  255. width:30px;
  256. height:30px;
  257. background:url(/images/icons/cha_icon_2.png) no-repeat center center;
  258. background-size:18px auto;
  259. }
  260. .alert_tit h2{
  261. margin:0 40px;
  262. overflow:hidden;
  263. height:40px;
  264. font-size:16px;
  265. color:#808080;
  266. text-align:center;
  267. line-height:40px;
  268. }
  269. .alert_tit h3{
  270. margin-top:10px;
  271. padding-left:22px;
  272. display:inline-block;
  273. *display:inline;
  274. *zoom:1;
  275. overflow:hidden;
  276. height:30px;
  277. background:url(/images/icons/warning_icon_2.png) no-repeat 0 center;
  278. background-size:18px auto;
  279. font-size:16px;
  280. color:#333;
  281. text-align:center;
  282. line-height:30px;
  283. }
  284. .alert_text{
  285. padding:10px;
  286. }
  287. .alert_txt_c{
  288. font-size:14px;
  289. color:#808080;
  290. text-align:left;
  291. line-height:20px;
  292. }
  293. .alert_but_box{
  294. border-top:1px solid #d8d8d8;
  295. overflow:hidden;
  296. }
  297. .alert_but_box a{
  298. display:block;
  299. box-sizing:border-box;
  300. }
  301. .alert_but_1{
  302. height:46px;
  303. font-size:15px;
  304. color:#77a4ff;
  305. text-align:center;
  306. line-height:46px;
  307. }
  308. </style>
  309. {/block}
  310. {block name="zepto"}
  311. <!-- 这是zepto插件 -->
  312. {/block}
  313. {block name="menu"}{/block}
  314. {block name="main"}
  315. <div class="a_banner"><img src="{$res.bgimage}" /></div>
  316. <div class="a_info_box">
  317. <div class="a_info_text"><strong>充值{$res.money|floatval}元</strong><span>{$res.warning1}</span></div>
  318. <div class="a_info_text"><strong>{$res.warning2}</strong></div>
  319. </div>
  320. <div class="a_time">活动时间:{$res.starttime|date="Y-m-d H:i",###} 至 {$res.endtime|date="Y-m-d H:i",###}</div>
  321. <div class="re_but_box">
  322. {if $isGiveAct}
  323. <img class="img_give_act" data-api-url="{:url('index/activity/getActGiveMoney',['act_id'=>$res.activity_id,'res_id'=>$res.id])}" src="{$res.bannerimage}" />
  324. {else /}
  325. <a href="javascript:;" data-goods-id="{$res.id}" data-goods-aid="{$res.activity_id}" data-money="{$res.money|floatval}" data-goods-category="{res.classify}"><img src="{$res.bannerimage}" /></a>
  326. {/if}
  327. </div>
  328. <div class="js_loading"><strong>正在加载</strong></div>
  329. <input type="hidden" value="{:$recent_url}" class="js_recent_url">
  330. <div class="a_pay_text">
  331. <h3>温馨提示</h3>
  332. {$res.warning}
  333. </div>
  334. {if condition="$aid eq 100"}
  335. <div class="vry_sry" {notempty name="$isRange"}style="display:block;"{/notempty}>
  336. <a href="javascript:;"></a>
  337. <span></span>
  338. </div>
  339. <input type="hidden" id="tourl" value="{:urlencode($toUrl)}" />
  340. {else /}
  341. <input type="hidden" id="tourl" value="{:urlencode($toUrl)}" />
  342. <div class="a_pop_up" {notempty name="$isend"}style="display:block;"{/notempty}>
  343. <div class="a_pop_up_box">
  344. <strong>活动已结束</strong>
  345. <span>敬请期待下次活动</span>
  346. <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
  347. </div>
  348. <div class="a_pop_jgb"></div>
  349. </div>
  350. <div class="a_pop_up" {notempty name="$is_max_end"}style="display:block;"{/notempty}>
  351. <div class="a_pop_up_box">
  352. <strong>您已达到参与最大次数</strong>
  353. <span>敬请期待下次活动</span>
  354. <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
  355. </div>
  356. <div class="a_pop_jgb"></div>
  357. </div>
  358. <div class="a_pop_up" {notempty name="$needWait"}style="display:block;"{/notempty}>
  359. <div class="a_pop_up_box">
  360. <strong>活动即将开始</strong>
  361. <span>距离开始时间:{notempty name="$lastTime"}{$lastTime}{/notempty}</span>
  362. <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
  363. </div>
  364. <div class="a_pop_jgb"></div>
  365. </div>
  366. <div class="a_pop_up" {notempty name="$isRange"}style="display:block;"{/notempty}>
  367. <div class="a_pop_up_box">
  368. <strong>抱歉,您不符合活动要求</strong>
  369. <span>敬请期待下次活动</span>
  370. <a href="{:urlencode($toUrl)}" class="client-url">去看书</a>
  371. </div>
  372. <div class="a_pop_jgb"></div>
  373. </div>
  374. {/if}
  375. <div class="bind_alert_box2" id="clear_alert_box2">
  376. <div class="bind_alert_main">
  377. <a href="javascript:;" class="bind_alert_off"></a>
  378. <div class="alert_tit">
  379. <h2>领取成功</h2>
  380. {if isset($the_max_time)}<span>最多可领取{$the_max_time}次</span>{/if}
  381. </div>
  382. <div class="alert_but_box">
  383. <a href="javascript:;" class="alert_but_1">去看书</a>
  384. </div>
  385. </div>
  386. <div class="bind_alert_height"></div>
  387. </div>
  388. <input type="hidden" id="choose_pay_method" name="choose_url" value="{:buildAppUrl('dialog', ['url' => '/clientweb/index/paymethodselect?goods_id='.$goods_id.'&aid='.$aid])}">
  389. {/block}
  390. {block name="js"}
  391. <script>
  392. var isLogin ="{$is_login ? '1' : '0'}";
  393. $(function () {
  394. $(document).on("click", ".re_but_box" ,function () {
  395. if (isLogin == '0') {
  396. if (window.cps !== undefined) {
  397. window.cps.checkToLogin('{}', "dialogPayMethod");
  398. }
  399. } else {
  400. dialogPayMethod();
  401. }
  402. });
  403. });
  404. //拉起支付
  405. function dialogPayMethod() {
  406. var url = decodeURIComponent($("#choose_pay_method").val());
  407. if (window.cps !== undefined) {
  408. //关闭
  409. window.cps.dismissDialogWebView();
  410. var urlJsonStr = JSON.stringify({"uri":url});
  411. window.cps.toAppPage(urlJsonStr);
  412. }
  413. }
  414. </script>
  415. {/block}