app-big-data/component/patientInfo/family-section.js

(function(){
    Vue.component('family-section', {
        template: '<div class="panel-box panel-box1">\
                        <h4 class="c-b5e1fc c-f16 c-t-center">家庭成员</h4>\
                        <div v-show="hasData">\
                            <div id="wrapper1" class="family-group mt10">\
                                <div id="scroller" class="clearfix">\
                                    <div v-for="member in familyMembers" class="family c-t-center mr20">\
                                        <img :src="member.photo | getPatientPhoto" class="portrait-img">\
                                        <div class="c-b5e1fc c-f14">{{member.name}}({{member.familyRelationName}})</div>\
                                    </div>\
                                </div>\
                            </div>\
                            <div class="sub-title">\
                                <div :class="preClassObj" @click="pre()"></div>\
                                <span class="c-b5e1fc c-f14">{{tabs[selectedTab].name}}</span>\
                                <div :class="nextClassObj" @click="next()"></div>\
                            </div>\
                            <div class="c-nowrap-multi-4 c-b5e1fc c-f12 lh18 mt20">{{tabs[selectedTab].content}}</div>\
                        </div>\
                        <div v-show="!hasData" class="no-result-panel">\
                            <div class="no-result-img">\
                                <img src="../images/wushuju_icon.png">\
                            </div>\
                            <div class="no-result-text">暂无绑定家庭成员</div>\
                        </div>\
                    </div>',
        props: ['patient'],
        data: function() {
            return {
                familyMembers:[],
                hasData: true,
                selectedTab: 0,
                tabs:[{
                    index: 0,
                    name: '家族病史',
                    content: '家族病史，也就是医学中常常提到的家族史。是指某一种并的患者的家庭成员（较大范围的家庭成员，不仅限于祖孙等直系亲属）中发病情况。是指某一种并的患者的家庭成员（较大范围的家庭成员，不仅限于祖孙等直系亲属）中发病情况。'
                },{
                    index: 1,
                    name: '家族病史1',
                    content: '1家族病史，也就是医学中常常提到的家族史。是指某一种并的患者的家庭成员（较大范围的家庭成员，不仅限于祖孙等直系亲属）中发病情况。是指某一种并的患者的家庭成员（较大范围的家庭成员，不仅限于祖孙等直系亲属）中发病情况。'
                },{
                    index: 2,
                    name: '家族病史2',
                    content: '2家族病史，也就是医学中常常提到的家族史。是指某一种并的患者的家庭成员（较大范围的家庭成员，不仅限于祖孙等直系亲属）中发病情况。是指某一种并的患者的家庭成员（较大范围的家庭成员，不仅限于祖孙等直系亲属）中发病情况。'
                }]
            }
        },
        mounted: function() {
            var vm = this;
            getFamilyInfo(vm);
        },
        computed: {
            preClassObj: function(){
                return {
                    'pre-icon': true,
                    'active': this.selectedTab != 0
                }
            },
            nextClassObj: function(){
                return {
                    'next-icon': true,
                    'active': this.selectedTab != (this.tabs.length - 1)
                }
            }
        },
        methods: {
            pre: function(){
                if(this.selectedTab == 0){
                    return false;
                }
                this.selectedTab --;
            },
            next: function(){
                if(this.selectedTab == (this.tabs.length - 1)){
                    return false;
                }
                this.selectedTab ++;
            }
        },
        filters: {
            getPatientPhoto: function(str){
                if(str){
                    if(str.indexOf("../") > -1){
                        return "../images/p-female.png";
                    }else{
                        return str;
                    }
                }else{
                    return "../images/p-female.png";
                }
            }
        }
    });
    
    function getFamilyInfo(vm){
        var params = {
            patient: vm.patient
        };
        patientAPI.getFamilyInfo(params).then(function(res){
            if(res.status == 200){
                vm.familyMembers = res.data;
                if(res.data.length > 0){
                    vm.hasData = true;
                }else{
                    vm.hasData = false;
                }
                var width = window.screen.width;
                $("#scroller").width(0.05 * width * res.data.length);
                new IScroll('#wrapper1', { scrollX: true, scrollY: false, mouseWheel: true });
            }else{
                console.log(res.msg);
            }
        })
    }
})()