my_parttimerec.html 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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"
  37. :style="{'color':index==current?'#00a0ea':'','border-bottom':index==current?'4px solid #00a0ea':''}"
  38. v-for="(item,index) in column_list"
  39. @click="selected(param.columnId=item.id,current=index)">{{item.mColumnName}} </a>
  40. </div>
  41. </div>
  42. <div class="main" v-if="news_list.length>0">
  43. <div class="items" v-for="(item,index) in news_list" @click="detail(item.id)">
  44. <div class="omit">{{item.parttime_title}}</div>
  45. <div class="cn">
  46. <span class="isTop" v-show="item.isTop==1">置顶</span>
  47. <span class="dc"> {{item.work_region}}</span>
  48. <span class="dc"> {{item.parttime_date}}</span>
  49. <span class="dd">{{item.address}}</span>
  50. <span class="sps">{{item.yname}}</span>
  51. <div class="lyy">待录用</div>
  52. </div>
  53. </div>
  54. </div>
  55. <div class="no_data" v-else>
  56. <i class="icon icon-48">&#xe61a;</i><br />没有数据
  57. </div>
  58. <!--加载更多-->
  59. <div class="more">
  60. <div class="loading" v-if="loading">
  61. <span class="mui-spinner"></span>
  62. <div class="mc">加载中...</div>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. <script src="../../js/mui.min.js"></script>
  68. <script src="../../js/app.js"></script>
  69. <script src="../../js/vue.min.js"></script>
  70. <script type="text/javascript">
  71. var vm = new Vue({
  72. el: "#app",
  73. data: {
  74. news_list: [],
  75. column_list: [{
  76. mColumnName: '已报名',
  77. id: 0
  78. }, {
  79. mColumnName: '已签合同',
  80. id: 1
  81. }, {
  82. mColumnName: '已结算',
  83. id: 2
  84. }, {
  85. mColumnName: '已评价',
  86. id: 3
  87. }],
  88. param: {
  89. page: 1,
  90. id: getUser().id
  91. },
  92. current: 0,
  93. loading: false,
  94. hasMore: false,
  95. },
  96. mounted: function() {
  97. this.getData();
  98. //监听滚动加载
  99. window.addEventListener('scroll', function() {
  100. //滚动高度+内高度>=文档高度
  101. if (document.body.scrollTop + window.innerHeight + 20 >= document.body
  102. .offsetHeight) {
  103. if (vm.hasMore) {
  104. vm.loading = true;
  105. //避免重复加载
  106. vm.hasMore = false;
  107. vm.param.page++;
  108. setTimeout(function() {
  109. vm.getData()
  110. }, 1000);
  111. }
  112. }
  113. })
  114. },
  115. methods: {
  116. //获取数据
  117. getData: function() {
  118. request(urls().myparttime_rec_List, this.param, function(res) {
  119. res.list.forEach(function(item) {
  120. vm.news_list.push(item);
  121. });
  122. vm.hasMore = vm.param.page < res.total ? true : false;
  123. vm.loading = false;
  124. plus.nativeUI.closeWaiting();
  125. })
  126. },
  127. //选择栏目
  128. selected: function(columnId, index) {
  129. vm.refresh();
  130. },
  131. //详情
  132. detail: function(id) {
  133. open('detail', 'detail.html', {
  134. id: id
  135. }, 'slide-in-bottom');
  136. },
  137. //刷新
  138. refresh: function() {
  139. vm.news_list = [];
  140. vm.param.page = 1;
  141. vm.getData();
  142. }
  143. }
  144. })
  145. </script>
  146. </body>
  147. </html>