Skip to content

Y
year-end-activitiy
提交 faef1c52 编写于 作者: tao.wu's avatar tao.wu
浏览文件
操作

Merge remote-tracking branch 'origin/dev-stage2-20191125' into dev-stage2-20191125

上级 bb9eb485 13ea2d77
隐藏空白字符变更
内嵌 并排
正在显示 包含 157 行增加 和 57 行删除
components/ranking-header.vue
浏览文件 @ faef1c52
...@@ -4,11 +4,21 @@ ...@@ -4,11 +4,21 @@
<header class="header-container"> <header class="header-container">
<img @click="goBack" src="~/assets/img/icon-back.png" alt=""> <img @click="goBack" src="~/assets/img/icon-back.png" alt="">
<div class="head-btn"> <div class="head-btn">
<div class="btn active-btn left">今日排行榜</div> <div
class="btn left"
:class="{'active-btn':activeBtnType}"
@click="headBtnClick">
{{headBtn.leftName}}
</div>
<div class="line"></div> <div class="line"></div>
<div class="btn right">累计排行榜</div> <div
class="btn right"
:class="{'active-btn':!activeBtnType}"
@click="headBtnClick">
{{headBtn.rightName}}
</div>
</div> </div>
<div class="right-btn">昨日获奖</div> <div class="right-btn" v-if="rightBtn" @click="rightBtnClick">{{rightBtn}}</div>
</header> </header>
</section> </section>
</template> </template>
...@@ -23,6 +33,12 @@ ...@@ -23,6 +33,12 @@
return '' return ''
} }
}, },
rightBtn: {
type: String,
default: function () {
return ''
}
},
backType: { backType: {
type: Number, type: Number,
default: function () { default: function () {
...@@ -40,6 +56,21 @@ ...@@ -40,6 +56,21 @@
default: function () { default: function () {
return '#ffffff' return '#ffffff'
} }
},
headBtn: {
type: Object,
default: function () {
return {
leftName: '',
rightName: ''
}
}
},
activeBtnType: {
type: Boolean,
default: function () {
return true
}
} }
}, },
data() { data() {
...@@ -54,6 +85,12 @@ ...@@ -54,6 +85,12 @@
}else { }else {
this.$rocNative.goBack() this.$rocNative.goBack()
} }
},
headBtnClick() {
this.$emit('handleBtn')
},
rightBtnClick() {
this.$emit('handleRightBtn')
} }
} }
} }
...@@ -97,6 +134,7 @@ ...@@ -97,6 +134,7 @@
padding: 0 15px; padding: 0 15px;
line-height: 30px; line-height: 30px;
color: #373839; color: #373839;
z-index: 2;
} }
.left { .left {
border-bottom-left-radius: 15px; border-bottom-left-radius: 15px;
......
pages/person-detail/index.vue
浏览文件 @ faef1c52
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
</section> </section>
</template> </template>
<script> <script>;
import NormalHeader from '@/components/normal-header'; import NormalHeader from '@/components/normal-header';
import { getPersonDetails } from '@/service/detailsAndRanking' import { getPersonDetails } from '@/service/detailsAndRanking'
export default { export default {
......
pages/person-ranking/index.less
浏览文件 @ faef1c52
...@@ -16,27 +16,36 @@ ...@@ -16,27 +16,36 @@
height: 50px; height: 50px;
border-radius: 100%; border-radius: 100%;
} }
.content { .right {
display: flex;
margin-left: 10px; margin-left: 10px;
align-items: center; .content {
.item { display: flex;
font-size: 14px; align-items: center;
.label { .item {
color: #fff; font-size: 14px;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
} }
.value { .line {
color: #FFDD58; display: inline-block;
width: 0.5px;
height: 10px;
background: #fff;
margin: 0 6px;
} }
} }
.line { p.text {
display: inline-block; color: #FFFFFF;
width: 0.5px; font-size: 12px;
height: 10px; line-height: 12px;
background: #fff; margin-top: 8px;
margin: 0 6px;
} }
} }
} }
} }
.main-content { .main-content {
......
pages/person-ranking/index.vue
浏览文件 @ faef1c52
<template> <template>
<section class="person-ranking-wrap"> <section class="person-ranking-wrap">
<ranking-header></ranking-header> <ranking-header
:rightBtn="rightBtn"
:headBtn="headBtn"
:activeBtnType="activeBtnType"
@handleBtn="changeRanking"
@handleRightBtn="handleRightBtn">
</ranking-header>
<div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}"> <div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
<div class="info"> <div class="info">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt=""> <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
<div class="content"> <div class="right">
<p class="item"> <div class="content">
<span class="label">今日排名</span> <p class="item">
<span class="value">105</span> <span class="label">{{activeBtnType?'今日':'累计'}}排名</span>
</p> <span class="value">{{rankData.rank}}</span>
<p class="line"></p> </p>
<p class="item"> <p class="line"></p>
<span class="label">今日勤奋分 </span> <p class="item">
<span class="value">105</span> <span class="label">{{activeBtnType?'今日':'累计'}}勤奋分 </span>
</p> <span class="value">{{rankData.score}}</span>
</p>
</div>
<p class="text" v-if="activeBtnType">再获得{{rankData.targetRequiredScore}}分即可上升到前{{rankData.targetRank}}名并可获得iPhone手机</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -22,32 +31,15 @@ ...@@ -22,32 +31,15 @@
<div class="ranking-title"> <div class="ranking-title">
<span>TOP100</span> <span>TOP100</span>
<span class="marginL">用户名称</span> <span class="marginL">用户名称</span>
<span class="marginAuto">今日勤奋分</span> <span class="marginAuto">{{activeBtnType?'今日':'累计'}}勤奋分</span>
</div> </div>
<div class="ranking-list"> <div class="ranking-list">
<div class="item"> <div class="item" v-for="(item,index) in rankData.topRankList">
<img src="~/assets/img/person-ranking/icon-gold.png" alt="" class="ranking-icon"> <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo"> <p v-else class="icon-num" >{{index+1}}</p>
<p class="doctor-name">张医生</p> <img :src="item.avatarImageUrl" alt="" class="doctor-photo">
<p class="num">1053</p> <p class="doctor-name">{{item.name}}</p>
</div> <p class="num">{{item.score}}</p>
<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>
<div class="item">
<img src="~/assets/img/person-ranking/icon-copper.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>
<div class="item">
<p class="icon-num">4</p>
<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> </div>
</div> </div>
<div class="footer-btn"> <div class="footer-btn">
...@@ -70,16 +62,77 @@ ...@@ -70,16 +62,77 @@
title: '个人明细', title: '个人明细',
barHeight: 0, barHeight: 0,
barColor: '#fff', barColor: '#fff',
rankList: [] rankData: {},
rightBtn: '昨日获奖',
headBtn: {
leftName: '今日排行榜',
rightName: '累计排行榜'
},
activeBtnType: true, //true今日，false累计
}; };
}, },
computed: { computed: {
}, },
mounted() { mounted() {
this.getRankingList()
},
methods: {
changeRanking() {
this.activeBtnType = !this.activeBtnType
},
handleRightBtn() {
this.$router.push({
path: '/yesterday-prize'
})
},
dealRankIcon(index) {
if(index == 0) {
return require('../../assets/img/person-ranking/icon-gold.png')
} else if(index == 1) {
return require('../../assets/img/person-ranking/icon-silver.png')
} else if(index == 2) {
return require('../../assets/img/person-ranking/icon-copper.png')
}
},
getRankingList() {
this.rankData = {
name: '戴医生',
hospital: '测试医院',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 33,
score: 1212,
targetRank: 3,
targetRequiredScore: 10,
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
}
],
}
}
}, },
methods: {},
}; };
</script> </script>
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或