PC-application/component/statistics/year-filter.js

(function(){
    Vue.component('year-filter', {
        template: '<div style="height: 400px;overflow: auto;">\
            <div class="mt10 ml10 filter-title">统计年份</div>\
            <div class="c-row ml40 mr10">\
                <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>\
            </div>\
            <div id="footer">\
                <div class="c-row btn-wrap c-border-top fr">\
                    <div class="div-foot-btn mr20" @click="resetClick">\
                        <a href="#" class="c-666 f-fs16">重置</a>\
                    </div>\
                    <div class="div-foot-btn active" @click="confirmClick">\
                        <a href="#" class="c-666 f-fs16">确定</a>\
                    </div>\
                </div>\
            </div>\
        </div>',
        props:['selectedYear'],
        data: function(){
            return {
                years: []
            }
        },
        methods: {
            chooseYear:function(year){
                this.selectedYear = year;
            },
            resetClick:function(){
                this.selectedYear = this.years[0];
            },
            confirmClick:function(){
                //触发刷新
                var vm = this;
                Vuedals.Bus.$emit('close', {
                    chooseYear: vm.selectedYear,
                });
            }
        },
        mounted: function(){
            //显示年份最低是2016年
            var now = new Date(),
                year = now.getFullYear();
            
            if(now.getMonth() >= 6){
                this.years.push(year);
            }
            for(i=year-1; i>=2016; i--){
                this.years.push(i);
            }
            
            //如果前一个页面返回的选中的年份
            if(!this.selectedYear){
                this.selectedYear = this.years[i];
            }
        }
    })
})()