exchange.html 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. {template 'common/header'}
  2. <style media="all" type="text/css">
  3. ul,li {padding:0; margin:0; border:0;}
  4. body{background:#d2e6e9; padding-bottom:63px;}
  5. .scroll-container .list-group {list-style:none; padding:0; margin:0; width:100%; text-align:left;}
  6. .scroll-container .list-group .list-group-item{border:none; background:#d2e6e9;}
  7. .scroll-container .list-group .list-group-item .con{background:#ffffff; width:280px; margin:0 auto;}
  8. .scroll-container .list-group .list-group-item .list-hd{padding:5px 20px;}
  9. .scroll-container .list-group .list-group-item .list-hd h5{font-weight:bold; margin-bottom:2px; font-size:16px; color:#444444;}
  10. .scroll-container .list-group .list-group-item .list-hd p{color:#b8b8b9;}
  11. .scroll-container .list-group .list-group-item .list-con img{display:block; width:90%; margin:0 auto;}
  12. .scroll-container .list-group .list-group-item .list-con .derpn{padding:10px 10px 0 10px; border-top:1px dotted rgb(204, 204, 204); margin-top:10px;display:none;}
  13. .scroll-container .list-group .list-group-item .list-ft{width:290px; background: transparent url('resource/images/ft-bg.png') no-repeat 0 0; background-size: 100% auto; height: 44px; line-height: 48px; overflow: hidden; position:relative; left:-5px; top:5px; padding:0 0 0 15px;}
  14. .scroll-container .list-group .list-group-item .list-ft b{color: #56c6d6; font-size: 30px; margin-right:5px;}
  15. .scroll-container .list-group .list-group-item .list-ft .btns{width:105px; text-align:center; font-size:18px; color:#ffffff; line-height:44px;}
  16. .scroll-container .list-group .list-group-item .list-ft .btns a{color:#ffffff;}
  17. .scroll-container .load-more{padding:10px;text-align:center;font-size:1em;}
  18. .btn-group-top-box{padding:10px 0; border-bottom:1px solid #a5d7de; font-family:Helvetica, Arial, sans-serif; text-align:center; width:100%;}
  19. .btn-group-top{overflow:hidden;}
  20. .btn-group-top .btn{ -webkit-box-shadow:none; box-shadow:none; border-color:#5ac5d4; color:#5ac5d4; background:#d1e5e9; padding:6px;}
  21. .btn-group-top .btn:hover{color:#FFF; background:#addbe1;}
  22. .btn-group-top .btn.active{color:#FFF; background:#5ac5d4;}
  23. .btn.use{background:#56c6d6; color:#FFF; border:0; border-radius:4px;}
  24. .pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus{background-color:#5ac5d4; border-color:#5ac5d4;}
  25. .pagination>li>a, .pagination>li>span{color:#5ac5d4; border:1px solid #a5d7de;}
  26. </style>
  27. <div class="btn-group-top-box">
  28. <div class="btn-group btn-group-top">
  29. <a href="{php echo url('activity/exchange', array('dtype' => '1'))}" class="btn btn-default {if ($dtype == 1) || ($dtype == 0)}active{/if}">折扣券</a>
  30. <a href="{php echo url('activity/exchange', array('dtype' => '2'))}" class="btn btn-default {if $dtype == 2}active{/if}">代金券</a>
  31. <a href="{php echo url('activity/exchange', array('dtype' => '3'))}" class="btn btn-default {if $dtype == 3}active{/if}">实体物品</a>
  32. <!--a href="{php echo url('activity/exchange', array('dtype' => '5'))}" class="btn btn-default {if $dtype == 5}active{/if}">活动参与次数</a-->
  33. </div>
  34. </div>
  35. <div class="scroll-container ng-cloak" ng-controller="exchangeCtrl">
  36. <div class="wrapper">
  37. <ul class="list-group" >
  38. <li class="list-group-item" ng-repeat="entry in entries">
  39. <div class="con">
  40. <div class="list-hd">
  41. <h5>{{entry.title}}({{entry.credittype_cn}})</h5>
  42. <p>有效期至{{entry.endtime}}</p>
  43. </div>
  44. <div class="list-con">
  45. <img src="{{entry.thumb}}">
  46. <div class="derpn">
  47. {{entry.description}}
  48. </div>
  49. </div>
  50. <div class="list-ft">
  51. <div class="pull-left">{{entry.credit_cn}}:<b>{{entry.credit}}</b></div>
  52. <div class="pull-right btns"><a href="{{entry.url}}">立即兑换</a></div>
  53. </div>
  54. </div>
  55. </li>
  56. </ul>
  57. </div>
  58. </div>
  59. <script type="text/javascript">
  60. require(['angular', 'iscroll'], function(angular, iScroll){
  61. $(function(){
  62. var elm = $('.scroll-container');
  63. var myScroll = new iScroll(elm[0], {});
  64. angular.module('app', []).controller('exchangeCtrl', function($scope, $http){
  65. $scope.more = {
  66. loading: false
  67. };
  68. $scope.entries = {php echo json_encode($list)};
  69. $scope.load = function(){
  70. if($scope.more.loading) {
  71. return;
  72. }
  73. $scope.more.loading = true;
  74. var page = parseInt($("#page").attr('title')) + 1;
  75. $("#page").attr('title', page);
  76. var params = {page:page};
  77. $http.post(location.href, params).success(function(dat){
  78. if($.isArray(dat)) {
  79. $.each(dat, function(){
  80. $scope.entries.push(this);
  81. });
  82. myScroll.refresh();
  83. } else if(dat == 'dataempty') {
  84. }
  85. $scope.more.loading = false;
  86. }).error(function(){
  87. $scope.more.loading = false;
  88. });
  89. }
  90. });
  91. angular.bootstrap(document, ['app']);
  92. $('.con').click(function(){
  93. var description = $(this).find('.derpn').text();
  94. if (description.indexOf('<') >= 0) {
  95. $(this).find('.derpn').html(description);
  96. }
  97. $(this).find('.derpn').slideToggle(500);
  98. });
  99. });
  100. });
  101. </script>
  102. {template 'common/toolbar'}
  103. {template 'common/footer'}