提交 e40615ec 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai

机构排行个人贡献页接口字段绑定

上级 13ea2d77
<template>
<section class="hospital-ranking-wrap">
<ranking-header></ranking-header>
<ranking-header
:headBtn="headBtn"
:activeBtnType="activeBtnType"
@handleBtn="changeRanking">
</ranking-header>
<div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
<!--<div class="info info-hospital">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
<div class="info info-hospital" v-if="activeBtnType">
<img src="~/assets/img/hospital-ranking/icon-hospital.png" alt="">
<div class="content">
<div class="con main-name">高新区卫生院</div>
<div class="con main-name">{{hospitalRanking.name}}</div>
<div class="con details">
<p class="item">
<span class="label">累计排名</span>
<span class="value">105</span>
<span class="value">{{hospitalRanking.rank}}</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">105</span>
<span class="value">{{hospitalRanking.score}}</span>
</p>
</div>
</div>
</div>-->
<div class="info info-doctor">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
</div>
<div class="info info-doctor" v-else>
<img :src="contributionRanking.avatarImageUrl" alt="">
<div class="content">
<div class="con details details-d">
<p class="item">
<span class="label">累计排名</span>
<span class="value">105</span>
<span class="value">{{contributionRanking.rank}}</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">105</span>
<span class="value">{{contributionRanking.score}}</span>
</p>
</div>
<div class="con main1-name">高新区卫生院</div>
<div class="con main1-name">{{contributionRanking.hospital}}</div>
</div>
</div>
</div>
<div class="main-content">
<!--<div class="description description-h"><span>星火榜</span>排行实时刷新,部分原因存在几分钟延迟</div>-->
<div class="description description-d">排行实时刷新,部分原因存在几分钟延迟</div>
<div class="description description-h" v-if="activeBtnType"><span>{{dealRankName(hospitalRanking.hospitalType)}}</span>排行实时刷新,部分原因存在几分钟延迟</div>
<div class="description description-d" v-else>排行实时刷新,部分原因存在几分钟延迟</div>
<div class="ranking-title">
<span>TOP100</span>
<!--<span class="marginL">机构名称</span>
<span class="marginAuto">机构勤奋分</span>-->
<span class="marginL">机构成员</span>
<span class="marginAuto">贡献勤奋分</span>
<span class="marginL">{{activeBtnType?'机构名称':'机构成员'}}</span>
<span class="marginAuto">{{activeBtnType?'机构勤奋分':'贡献勤奋分'}}</span>
</div>
<div class="ranking-list">
<!--<div class="item">
<img src="~/assets/img/person-ranking/icon-silver.png" alt="" class="ranking-icon">
&lt;!&ndash;<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">&ndash;&gt;
<p class="hospital-name">这里是一个十三字的机构名字</p>
<p class="num">1053</p>
</div>-->
<div class="item">
<img src="~/assets/img/person-ranking/icon-silver.png" alt="" class="ranking-icon">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
<p class="doctor-name">这里是一个十三字的医生姓名</p>
<p class="num">1053</p>
<div class="item" v-if="activeBtnType" v-for="(itemH,index) in hospitalRanking.topRankList">
<img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
<p v-else class="icon-num" >{{index+1}}</p>
<p class="hospital-name">{{itemH.name}}</p>
<p class="num">{{itemH.score}}</p>
</div>
<div class="item" v-if="!activeBtnType" v-for="(itemD,index) in contributionRanking.topRankList">
<img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
<p v-else class="icon-num" >{{index+1}}</p>
<img :src="itemD.avatarImageUrl" alt="" class="doctor-photo">
<p class="doctor-name">{{itemD.name}}</p>
<p class="num">{{itemD.score}}</p>
</div>
</div>
<div class="footer-btn">
......@@ -81,15 +86,123 @@
title: '个人明细',
barHeight: 0,
barColor: '#fff',
headBtn: {
leftName: '机构排行榜',
rightName: '人员贡献榜'
},
activeBtnType: true, //true机构,false人员
hospitalRanking: {},
contributionRanking: {}
};
},
computed: {
},
mounted() {
this.getRankData();
},
methods: {
changeRanking() {
this.activeBtnType = !this.activeBtnType;
this.getRankData()
},
dealRankName(hospitalType) {
if(hospitalType == 0) {
return '火星榜';
} else if(hospitalType == 1) {
return '萌芽榜';
} else if(hospitalType == 2) {
return '奋进榜';
} else if(hospitalType == 3) {
return '超越榜';
}
},
dealRankIcon(index) {
if(index == 0) {
return require('../../assets/img/icon-gold.png')
} else if(index == 1) {
return require('../../assets/img/icon-silver.png')
} else if(index == 2) {
return require('../../assets/img/icon-copper.png')
}
},
getHospitalRanking() {
this.hospitalRanking = {
name: '测试医院',
rank: 3,
score: 5000,
hospitalType: 1,
topRankList: [
{
name: '测试医院',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 0,
score: 10000
},
{
name: '医院1',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 1,
score: 9343
},
{
name: '医院2',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 2,
score: 8888
},
{
name: '医院3',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 3,
score: 8200
}
],
}
},
getContributionRanking() {
this.contributionRanking = {
name: '代医生',
rank: 3,
score: 5000,
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
hospital: '测试医院',
topRankList: [
{
name: '戴医生',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 0,
score: 10000
},
{
name: '张医生',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 1,
score: 9343
},
{
name: '李医生',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 2,
score: 8888
},
{
name: '刘医生',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 3,
score: 8200
}
],
}
},
getRankData() {
if(this.activeBtnType) {
this.getHospitalRanking();
} else {
this.getContributionRanking()
}
}
},
methods: {},
};
</script>
......
......@@ -88,11 +88,11 @@
},
dealRankIcon(index) {
if(index == 0) {
return require('../../assets/img/person-ranking/icon-gold.png')
return require('../../assets/img/icon-gold.png')
} else if(index == 1) {
return require('../../assets/img/person-ranking/icon-silver.png')
return require('../../assets/img/icon-silver.png')
} else if(index == 2) {
return require('../../assets/img/person-ranking/icon-copper.png')
return require('../../assets/img/icon-copper.png')
}
},
getRankingList() {
......
......@@ -9,7 +9,7 @@
</normal-header>
<div class="prize-list" :style="{ marginTop: `${44+barHeight}Px`}">
<div class="item">
<img src="~/assets/img/person-ranking/icon-copper.png" alt="" class="ranking-icon">
<img src="~/assets/img/icon-copper.png" alt="" class="ranking-icon">
<div class="item-right">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
<div class="doctor-info">
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册