aiforge/web_src/js/components/Contributors.vue

<template>
    <div class="ui container">
        <div class="row git-user-content" >
                <h3 class="ui header">
                    <div class="ui breadcrumb" id ='contri'>
                        <a class="section" :href="url_code"> {{$t('message.code')}}</a>
                        <div class="divider"> / </div>
                        <div class="active section" >{{$t('message.contributor')}} &nbsp;({{totalNum}})</div>
                    </div>
                </h3>
                <div class="ui horizontal relaxed list">
                        <div class="item user-list-item" v-for="(contributor,i) in contributors_list_page" >
                            <a v-if="contributor.user_name" :href="AppSubUrl +'/'+ contributor.user_name"><img class="ui avatar s16 image js-popover-card" :src="contributor.rel_avatar_link"></a>
                            <a v-else :href="'mailto:' + contributor.email "><img class="ui avatar s16 image js-popover-card" :avatar="contributor.email"></a>
                            <div class="content">
                                <div class="header" >
                                    <a v-if="contributor.user_name" :href="AppSubUrl +'/'+ contributor.user_name">{{contributor.user_name}}</a>
                                    <a v-else :href="'mailto:' + contributor.email ">{{contributor.email}}</a>       
                                </div>
                                <span class="commit-btn">Commits: {{contributor.commit_cnt}}</span>
                            </div>
                        </div>
                </div>
        </div>
        
        <div class="ui container" style="margin-top:50px;text-align:center">
                <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalNum">
                </el-pagination>
        </div>
    </div>
</template>

<script type="text/javascript">
    import enLocale from 'element-ui/lib/locale/lang/en'
    import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
    import locale from 'element-ui/lib/locale'

    const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;

    export default {
    
    data() {
        return {
            url:'',
            url_infor:'',
            href_:'',
            contributors_list:[],
            contributors_list_page:[],
            currentPage:1,
            pageSize:50,
            totalNum:0,
            AppSubUrl:AppSubUrl,
        };
    },
    methods: {

        getContributorsList(){
            this.$axios.get(this.url+'/list?'+this.url_infor).then((res)=>{
                this.contributors_list = res.data.contributor_info
                this.totalNum = this.contributors_list.length
                this.contributors_list_page = this.contributors_list.slice(0,this.pageSize)
            })
        },
        handleCurrentChange(val){
            this.contributors_list_page = this.contributors_list.slice((val-1)*this.pageSize,val*this.pageSize)
        },

        getLang(){
            this.text_langName = document.getElementById("menutext_1").innerText
            if (this.text_langName == '简体中文'){
                this.$i18n.locale = 'zh'
                locale.use(zhLocale) 
            }
            else if (this.text_langName == 'English'){
                this.$i18n.locale  = 'en'
                locale.use(enLocale)
            }
        }
        
    },
    computed:{
    
    },
    watch: {

    },
    created(){
        console.log(this)
        const url = window.location.pathname;
        this.url = url;
        let strIndex = this.url.indexOf("contributors")
        this.url_code = this.url.substr(0,strIndex)
        
        this.href_ = window.location.href;
        let index = this.href_.indexOf("?")
        this.url_infor = this.href_.substring(index+1,this.href_.length)
        this.getContributorsList()
        this.text_langName='' 
        this.getLang()       
    },

    updated(){
        if(document.querySelectorAll('img[avatar]').length!==0){
            window.LetterAvatar.transform()
        }
    },
    mounted(){
        this.getLang()
    }
};
</script>

<style scoped>
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #5bb973;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li.active {
  color: #fff;
  cursor: default;
}
/deep/ .el-pagination.is-background .el-pager li:hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  background-color: #5bb973;
  color: #FFF;
}
</style>