sr-publicServicePlatform/component/appointment/date-source.js

(function(){
    Vue.component('date-scource', {
        template: `<section class="mt30" name="date-section">
                    <p class="c-f18">就诊日期</p>
                    <div class="div-table">
                        <div class="table-row">
                            <div class="table-cell arrow-cell"><i class="fa fa-caret-left c-f20 c-909090"></i></div>
                            <div v-for="d in planDate" class="table-cell">{{d.date}} {{d.day}}</div>
                            <div class="table-cell arrow-cell active"><i class="fa fa-caret-right c-f20 c-909090"></i></div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell c-f16 bgc-ebf4f3">上午</div>
                            <div class="table-cell active">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-fea7a8">停诊<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-f4b87f">无安排<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell"></div>
                        </div>
                        <div class="table-row">
                            <div class="table-cell c-f16 bgc-ebf4f3">下午</div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell">可预约<br/><span class="yy-tag active">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-fea7a8">停诊<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-f4b87f">无安排<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell c-909090">已满<br/><span class="yy-tag">预约</span></div>
                            <div class="table-cell"></div>
                        </div>
                    </div>
                    <p class="c-f18 mt30">就诊时间</p>
                    <div class="clearfix">
                        <div class="c-20 fl mb20">
                            <div class="source-tag active"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                        <div class="c-20 fl mb20">
                            <div class="source-tag"><span>第1号</span><span>07:30</span></div>
                        </div>
                    </div>
                    <div class="mt30 c-t-center mb50">
                        <button class="btn btn-primary">确认预约</button>
                    </div>
                </section>`,
        props: [],
        data: function(){
            return {
                planDate: [],
                selectedDate: 0,
                amData: [],
                pmData: []
            }
        },
        mounted: function(){
            var now = new Date(),
                d = new Date();
            //默认只有7天的号源
            for(i=1; i<8; i++){
                var nDate = now.getDate();
                d.setDate(nDate + i);
                var obj = {
                    date: d.format("MM月dd日"),
                    day: getWeekDay(d.getDay())
                }
                this.planDate.push(obj);
            }
            
            //获取每天上午和下午的数据
            for(i=0; i<7; i++){
                var d = this.planDate[i].date;
                
            }
        }
    });
    
    function getWeekDay(val){
        switch(val){
            case 0:
                return "周日";
                break;
            case 1:
                return "周一";
                break;
            case 2:
                return "周二";
                break;
            case 3:
                return "周三";
                break;
            case 4:
                return "周四";
                break;
            case 5:
                return "周五";
                break;
            case 6:
                return "周六";
                break;
        }
    }
})()