my_parttimerec.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>我的招聘</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7. <link href="../../css/mui.min.css" rel="stylesheet" />
  8. <link href="../../css/menu.min.css" rel="stylesheet" />
  9. <style>
  10. .top{position: fixed;width: 100%;z-index: 666;top:-1px ; background-color: white;overflow: hidden;box-shadow: 0 1px 6px #ccc;}
  11. .ui.secondary.pointing.menu{overflow:auto;border-bottom:0px;margin-top: 65px;}
  12. .ui.secondary.pointing.menu::-webkit-scrollbar {display:none}
  13. .main{margin-top: 115px;background-color: white;}
  14. .items{padding: 15px;font-size: 15px;color: #3a3939;border-bottom: 1px solid #efefef;}
  15. .items:last-child{border: 0px;}
  16. .cn{font-size: 10px;color: darkgray;padding-top: 3px;}
  17. .dc{}
  18. .isTop{color: red;font-weight: bold;}
  19. .icon{font-size: 48px;display: block;}
  20. .no_data{line-height:20px;}
  21. .dd{padding-left: 20px;}
  22. .sps{background: #00B5AD;padding: 1px 6px;border-radius: 3px;color: white;text-align: center;margin-left: 20px;}
  23. .lyy{float: right;margin-top: -20px;font-size: 15px;color: orange;}
  24. [v-cloak] {display: none;}
  25. </style>
  26. </head>
  27. <body>
  28. <div id="app" v-cloak>
  29. <div class="mui-content">
  30. <div class="top">
  31. <header class="mui-bar mui-bar-nav">
  32. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  33. <h1 class="mui-title">我的招聘</h1>
  34. </header>
  35. <div class="ui secondary pointing menu">
  36. <a class="item" :style="{'color':index==current?'#00a0ea':'','border-bottom':index==current?'4px solid #00a0ea':''}" v-for="(item,index) in column_list" @click="selected(param.columnId=item.id,current=index)">{{item.mColumnName}} </a>
  37. </div>
  38. </div>
  39. <div class="main" v-if="news_list.length>0">
  40. <div class="items" v-for="(item,index) in news_list" @click="detail(item.id)">
  41. <div class="omit">{{item.parttime_title}}</div>
  42. <div class="cn">
  43. <span class="isTop" v-show="item.isTop==1">置顶</span>
  44. <span class="dc"> {{item.work_region}}</span>
  45. <span class="dc"> {{item.parttime_date}}</span>
  46. <span class="dd">{{item.address}}</span>
  47. <span class="sps">{{item.yname}}</span>
  48. <div class="lyy">待录用</div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="no_data" v-else>
  53. <i class="icon icon-48">&#xe61a;</i><br />没有数据
  54. </div>
  55. <!--加载更多-->
  56. <div class="more">
  57. <div class="loading" v-if="loading">
  58. <span class="mui-spinner"></span>
  59. <div class="mc">加载中...</div>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <script src="../../js/mui.min.js"></script>
  65. <script src="../../js/app.js"></script>
  66. <script src="../../js/vue.min.js"></script>
  67. <script type="text/javascript">
  68. var vm = new Vue({
  69. el: "#app",
  70. data: {
  71. news_list:[],
  72. column_list: [{mColumnName:'已报名',id:0},{mColumnName:'已签合同',id:1},{mColumnName:'已结算',id:2},{mColumnName:'已评价',id:3}],
  73. param: {page: 1,id:getUser().id},
  74. current: 0,
  75. loading: false,
  76. hasMore: false,
  77. },
  78. mounted: function() {
  79. mui.plusReady(function() {
  80. vm.getData();
  81. })
  82. //监听滚动加载
  83. window.addEventListener('scroll', function() {
  84. //滚动高度+内高度>=文档高度
  85. if(document.body.scrollTop + window.innerHeight + 20 >= document.body.offsetHeight) {
  86. if(vm.hasMore) {
  87. vm.loading = true;
  88. //避免重复加载
  89. vm.hasMore = false;
  90. vm.param.page++;
  91. setTimeout(function() {
  92. vm.getData()
  93. }, 1000);
  94. }
  95. }
  96. })
  97. },
  98. methods: {
  99. //获取数据
  100. getData: function() {
  101. request(urls().myparttime_rec_List, this.param, function(res) {
  102. res.list.forEach(function(item) {
  103. vm.news_list.push(item);
  104. });
  105. vm.hasMore = vm.param.page < res.total ? true : false;
  106. vm.loading = false;
  107. plus.nativeUI.closeWaiting();
  108. })
  109. },
  110. //选择栏目
  111. selected: function(columnId, index) {
  112. vm.refresh();
  113. },
  114. //详情
  115. detail: function(id) {
  116. open('detail', 'detail.html', {id: id}, 'slide-in-bottom');
  117. },
  118. //刷新
  119. refresh: function() {
  120. vm.news_list = [];
  121. vm.param.page = 1;
  122. vm.getData();
  123. }
  124. }
  125. })
  126. </script>
  127. </body>
  128. </html>