year-filter.js 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. (function(){
  2. Vue.component('year-filter', {
  3. template: '<div style="height: 400px;overflow: auto;">\
  4. <div class="mt10 ml10 filter-title">统计年份</div>\
  5. <div class="c-row ml40 mr10">\
  6. <div v-for="year in years" class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==selectedYear}" @click="chooseYear(year)"><a>{{year}}</a></div>\
  7. </div>\
  8. <div id="footer">\
  9. <div class="c-row btn-wrap c-border-top fr">\
  10. <div class="div-foot-btn mr20" @click="resetClick">\
  11. <a href="#" class="c-666 f-fs16">重置</a>\
  12. </div>\
  13. <div class="div-foot-btn active" @click="confirmClick">\
  14. <a href="#" class="c-666 f-fs16">确定</a>\
  15. </div>\
  16. </div>\
  17. </div>\
  18. </div>',
  19. props:['selectedYear',"minYear"],
  20. data: function(){
  21. return {
  22. years: []
  23. }
  24. },
  25. methods: {
  26. chooseYear:function(year){
  27. this.selectedYear = year;
  28. },
  29. resetClick:function(){
  30. this.selectedYear = this.years[0];
  31. },
  32. confirmClick:function(){
  33. //触发刷新
  34. var vm = this;
  35. Vuedals.Bus.$emit('close', {
  36. chooseYear: vm.selectedYear,
  37. });
  38. }
  39. },
  40. mounted: function(){
  41. //显示年份最低是2016年
  42. var now = new Date(),
  43. year = now.getFullYear();
  44. var minYear = 2016
  45. if(this.minYear){
  46. minYear = this.minYear
  47. }
  48. if(now.getMonth() >= 6){
  49. this.years.push(year);
  50. }
  51. for(i=year-1; i>=minYear; i--){
  52. this.years.push(i);
  53. }
  54. //如果前一个页面返回的选中的年份
  55. if(!this.selectedYear){
  56. this.selectedYear = this.years[i];
  57. }
  58. }
  59. })
  60. })()