sr-publicServicePlatform/component/common/header.js

(function(){
    Vue.component('page-header', {
        template: `<div class="bgc-fff c-border-b">
            <div class="bgc-f2f2f2 c-666">
                <div class="container">
                    <div class="row ptb10">
                        <div class="col-md-6">
                            <div class="bgc-fff pl10 pr20" style="width:360px; height:30px; line-height:30px; border-radius: 15px;">
                                <img src="../../../images/icon_laba.png" width="20" style="vertical-align: super;" class="mr5">
                                <span class="c-nowrap c-909090" style="display: inline-block; width: calc(100% - 30px)">[满意度调查]您于2018年2月14日10点30分预约了上饶市第一医院眼科的门诊</span>
                            </div>
                        </div>
                        <div class="col-md-6 c-t-right c-909090" style="line-height: 30px;">
                            <span class="plr20 c-border-r " @click="login">{{loginText}}</span>
                            <span class="plr20 c-border-r " @click="download">下载APP</span>
                            <span class="plr20 " @click="logout">安全退出</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container c-birder-b">
                <div class="ui-grid ui-grid-middle">
                    <div class="ui-col-0 ptb30 pr60">
                        <img src="../../../images/LOGO.png">
                    </div>
                    <div class="ui-col-1 plr15">
                        <span v-for="(item, index) in navList" class="nav-item" :class="{'active': index==selectedNav}" @click="chooseNav(index, item.link)">{{item.text}}</span>
                    </div>
                    <div class="ui-col-0 ptb10">
                        <div class="input-group search-box">
                            <input type="text" class="form-control search-input" v-model="searchText" placeholder="请输入医院、医生姓名">
                            <span class="input-group-btn">
                                <img src="../../../images/icon_sousuo.png" width="23">
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>`,
        props: [],
        data: function(){
            return {
                loginText: '您好，请登录',
                searchText: '',
                navList: [{
                    text: "首页",
                    link: ''
                },
                {
                    text: "预约挂号",
                    link: ''
                },{
                    text: "健康档案",
                    link: ''
                },{
                    text: "我的就诊",
                    link: ''
                }],
                selectedNav: 0
            }
        },
        methods: {
            login: function(){
                //跳转到登录页面
            },
            logout: function(){
                
            },
            download: function(){
                //下载APP
            },
            chooseNav: function(val){
                this.selectedNav = val;
            }
        }
    })
})()