my_parttimeapp.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  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. .item{color: #717171!important;}
  15. .items{padding: 15px;font-size: 15px;color: #3a3939;border-bottom: 1px solid #efefef;}
  16. .items:last-child{border: 0px;}
  17. .cn{font-size: 10px;color: darkgray;padding-top: 3px;}
  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!important':'','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" >
  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. <button class="lyy" @click="detail(item)" style="float: none;" v-if="item.pstate>=1 ">查看合同</button>
  49. <div class="lyy" v-if="item.pstate=='0' && item.contract=='0'">待录用</div>
  50. <div class="lyy" @click="detail(item)" style="color: #00B5AD;" v-else-if="item.pstate=='0' && item.contract=='1'"><button class="btn">待签合同</button></div>
  51. <div class="lyy" @click="finance(item)" v-if="item.pstate=='1' && item.finance=='0'"><button class="btn">待请款</button></div>
  52. <div class="lyy" @click="finance(item)" style="color: #00B5AD;" v-if="item.pstate=='1' && item.finance=='1'"><button class="btn">请款中</button></div>
  53. <div class="lyy" @click="evaluate(item)" style="color: #00B5AD;" v-if="item.pstate=='2' && item.finance=='2'"><button class="btn">已完成待评价</button></div>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="no_data" v-else>
  58. <i class="icon icon-48">&#xe61a;</i><br />没有数据
  59. </div>
  60. <!--加载更多-->
  61. <div class="more">
  62. <div class="loading" v-if="loading">
  63. <span class="mui-spinner"></span>
  64. <div class="mc">加载中...</div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <script src="../../js/mui.min.js"></script>
  70. <script src="../../js/app.js"></script>
  71. <script src="../../js/vue.min.js"></script>
  72. <script type="text/javascript">
  73. var vm = new Vue({
  74. el: "#app",
  75. data: {
  76. news_list:[],
  77. column_list: [{mColumnName:'已报名',id:0},{mColumnName:'已签合同',id:1},{mColumnName:'已结算',id:2},{mColumnName:'已评价',id:3}],
  78. param: {page: 1,columnId:0,id:getUser().id},
  79. current: 0,
  80. loading: false,
  81. hasMore: false,
  82. },
  83. mounted: function() {
  84. this.getData();
  85. //监听滚动加载
  86. window.addEventListener('scroll', function() {
  87. //滚动高度+内高度>=文档高度
  88. if(document.body.scrollTop + window.innerHeight + 20 >= document.body.offsetHeight) {
  89. if(vm.hasMore) {
  90. vm.loading = true;
  91. //避免重复加载
  92. vm.hasMore = false;
  93. vm.param.page++;
  94. setTimeout(function() {
  95. vm.getData()
  96. }, 1000);
  97. }
  98. }
  99. })
  100. },
  101. methods: {
  102. //获取数据
  103. getData: function() {
  104. request(urls().myparttime_rapp_List, this.param, function(res) {
  105. res.list.forEach(function(item) {
  106. vm.news_list.push(item);
  107. });
  108. vm.hasMore = vm.param.page < res.total ? true : false;
  109. vm.loading = false;
  110. plus.nativeUI.closeWaiting();
  111. })
  112. },
  113. //选择栏目
  114. selected: function(columnId, index) {
  115. vm.refresh();
  116. },
  117. //详情
  118. detail: function(id) {
  119. open('detail', 'contract_detail.html', id, 'slide-in-bottom');
  120. },//详情
  121. finance: function(id) {
  122. open('finance', 'finance.html', id, 'slide-in-bottom');
  123. },
  124. evaluate: function(id) {
  125. open('evaluate', 'add_evaluate.html', id, 'slide-in-bottom');
  126. },
  127. //刷新
  128. refresh: function() {
  129. vm.news_list = [];
  130. vm.param.page = 1;
  131. vm.getData();
  132. }
  133. }
  134. })
  135. </script>
  136. </body>
  137. </html>