Skip to content

Y
year-end-activitiy
提交 e064e9a0 编写于 作者: Yuanzhao.dai's avatar Yuanzhao.dai
浏览文件
操作

我的成绩页面接口对接

上级 a2c0f8de
隐藏空白字符变更
内嵌 并排
正在显示 包含 301 行增加 和 223 行删除
assets/style/awards-list/personal-grade.less
浏览文件 @ e064e9a0
.personal-grade-wrap {
width: 100%;
/*min-height: 907px;*/
background: url("../../img/stage3/personal-grade.png") no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
img.title {
position: absolute;
top: 0;
left: 13.5px;
width: 169px;
height: 26.5px;
}
img.awards-grade {
position: absolute;
top: 0;
right: 24px;
width: 49px;
height: 59px;
}
.personal-info {
margin-top: 51.5px;
margin-left: 20px;
display: flex;
align-items: center;
img {
width: 50px;
height: 50px;
.wrap-container {
width: 100%;
/*min-height: 907px;*/
background: url("../../img/stage3/personal-grade.png") no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
img.title {
position: absolute;
top: 0;
left: 13.5px;
width: 169px;
height: 26.5px;
}
.right {
margin-left: 15px;
.name {
color: #FFFFFF;
font-weight: 700;
font-size: 20px;
line-height: 20px;
}
.hospital {
color: #FFFFFF;
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-top: 4.5px;
}
img.awards-grade {
position: absolute;
top: 0;
right: 24px;
width: 49px;
height: 59px;
}
}
.join-num {
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 21px;
margin-top: 73px;
margin-left: 18.5px;
}
.grade-details {
margin-top: 10px;
margin-left: 15px;
overflow: hidden;
.left {
float: left;
.title {
color: #FFF36C;
font-size: 23px;
font-weight: 700;
line-height: 32.5px;
margin-left: 1.5px;
margin-bottom: 11px;
.personal-info {
margin-top: 51.5px;
margin-left: 20px;
display: flex;
align-items: center;
img {
width: 50px;
height: 50px;
}
.item {
display: flex;
.line {
width: 3.5px;
height: 91.5px;
background: #FFFFFF;
opacity:0.53;
margin-right: 8px;
.right {
margin-left: 15px;
.name {
color: #FFFFFF;
font-weight: 700;
font-size: 20px;
line-height: 20px;
}
.line168 {
height: 84px;
.hospital {
color: #FFFFFF;
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-top: 4.5px;
}
.content {
.label {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 15px;
}
}
.join-num {
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 21px;
margin-top: 73px;
margin-left: 18.5px;
}
.grade-details {
margin-top: 10px;
margin-left: 15px;
overflow: hidden;
.left {
float: left;
.title {
color: #FFF36C;
font-size: 23px;
font-weight: 700;
line-height: 32.5px;
margin-left: 1.5px;
margin-bottom: 11px;
}
.item {
display: flex;
.line {
width: 3.5px;
height: 91.5px;
background: #FFFFFF;
opacity:0.53;
margin-right: 8px;
}
.grade {
color: #FFFFFF;
font-size: 40px;
font-weight: 700;
line-height: 40px;
margin-top: 9px;
margin-bottom: 6px;
.line168 {
height: 84px;
}
.trapezoid {
position: relative;
.detail-bg {
width: 110px;
padding-left: 5px;
border-right:5px solid transparent;
border-top:21px solid #FFF36C;
padding-right: 5px;
.content {
.label {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 15px;
}
.detail-text {
position: absolute;
top: 3px;
left: 5px;
color: #F7753F;
font-size: 14px;
.grade {
color: #FFFFFF;
font-size: 40px;
font-weight: 700;
line-height: 40px;
margin-top: 9px;
margin-bottom: 6px;
}
.trapezoid {
position: relative;
.detail-bg {
width: 110px;
padding-left: 5px;
border-right:5px solid transparent;
border-top:21px solid #FFF36C;
padding-right: 5px;
}
.detail-text {
position: absolute;
top: 3px;
left: 5px;
color: #F7753F;
font-size: 14px;
font-weight: 700;
line-height: 14px;
}
}
.detail {
color: #FFF36C;
font-size: 14px;
line-height: 14px;
}
}
.detail {
color: #FFF36C;
font-size: 14px;
line-height: 14px;
}
}
.marginItem {
margin-top: 30px;
margin-bottom: 30px;
}
}
.marginItem {
margin-top: 30px;
margin-bottom: 30px;
}
}
.right {
width: 28px;
float: right;
margin-right: 40px;
margin-top: 24px;
p {
color: #FFFFFF;
font-size: 28px;
font-weight: 700;
}
p:first-child {
margin-bottom: 25px;
.right {
width: 28px;
float: right;
margin-right: 40px;
margin-top: 24px;
p {
color: #FFFFFF;
font-size: 28px;
font-weight: 700;
}
p:first-child {
margin-bottom: 25px;
}
}
}
}
.task-details {
display: flex;
justify-content: center;
margin-top: 54.5px;
.task-item {
width: 60px;
.task-details {
display: flex;
flex-flow: column;
justify-content: center;
img {
margin-top: 54.5px;
margin-bottom: 30px;
.task-item {
width: 60px;
height: 60px;
margin-bottom: 10px;
display: flex;
flex-flow: column;
justify-content: center;
img {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
p.num,p.name {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
}
p.num,p.name {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 20px;
text-align: center;
.task-item:nth-child(2) {
margin: 0 67.5px;
}
}
.task-item:nth-child(2) {
margin: 0 67.5px;
.share-btn {
width: 312px;
height: 49px;
background: linear-gradient(360deg,rgba(255,134,32,1) 0%,rgba(255,248,111,1) 100%);
border-radius: 32.5px;
color: #B42F00;
font-size: 21.5px;
font-weight: 700;
text-align: center;
line-height: 49px;
margin: 35px auto 23px auto;
}
.footer-text {
color: #FFF36C;
font-size: 15px;
font-weight: 700;
text-align: center;
margin-bottom: 41px;
}
}
.share-btn {
width: 312px;
height: 49px;
background: linear-gradient(360deg,rgba(255,134,32,1) 0%,rgba(255,248,111,1) 100%);
border-radius: 32.5px;
color: #B42F00;
font-size: 21.5px;
font-weight: 700;
text-align: center;
line-height: 49px;
margin: 35px auto 23px auto;
}
.footer-text {
color: #FFF36C;
font-size: 15px;
font-weight: 700;
text-align: center;
margin-bottom: 41px;
}
}
\ No newline at end of file
pages/awards-list/index.vue
浏览文件 @ e064e9a0
......@@ -11,7 +11,7 @@
<!--已登录及个人未参加-->
<div class="person-details" v-if="isLogin&&mainInfoType==1&&!isWeb">
<div class="info">
<img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="">
<img :src="myGrades.avatarImageUrl" alt="">
<div class="right">
<div class="name">{{mainInfo.name}}</div>
<div class="hospital">{{mainInfo.hospitalName}}</div>
......@@ -146,10 +146,11 @@
},
mounted() {
this.$rocNative.appInit();
this.isWeb = this.$rocNative.isWeb;
this.getMainInfo();
this.shareObj.shareUrl = location.href; //微信分享链接
/*从app获取用户信息*/
this.$rocNative.appInit();
this.getUserInfo();
const _this = this
window.__refresh = function(params) {
......@@ -168,7 +169,12 @@
})
},
goMyGrade() { //跳转我的成绩页
this.$router.push('/awards-list/personal-grade')
this.$router.push({
path: '/awards-list/personal-grade',
query: {
encyptId: this.mainInfo.encyptId
}
})
},
goRankList(type,hospitalType) { //跳转榜单页,type:1机构，2个人
if (type == 1) {
......
pages/awards-list/personal-grade.vue
浏览文件 @ e064e9a0
<template>
<section class="personal-grade-wrap">
<img src="~/assets/img/stage3/awards-title.png" alt="" class="title">
<img src="~/assets/img/stage3/awards-icon1.png" alt="" class="awards-grade">
<div class="personal-info">
<img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt="">
<div class="right">
<p class="name">赵欢</p>
<p class="hospital">上海复旦大学附属中山医院</p>
<h5header
v-if="!isWeb"
title="云鹊奖2019"
:isOpacity="false"
:shareObj="shareObj"/>
<div class="wrap-container" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
<img src="~/assets/img/stage3/awards-title.png" alt="" class="title">
<img :src="dealAwardsIcon()" alt="" class="awards-grade">
<div class="personal-info">
<img :src="myGrades.avatarImageUrl" alt="">
<div class="right">
<p class="name">{{myGrades.name}}</p>
<p class="hospital">{{myGrades.hospitalName}}</p>
</div>
</div>
</div>
<div class="join-num">活动总计参与人数:23432334</div>
<div class="grade-details">
<div class="left">
<p class="title">您的成绩:</p>
<div class="item">
<div class="line"></div>
<div class="content">
<p class="label">累计获得勤奋分</p>
<p class="grade">1809987</p>
<div class="trapezoid">
<p class="detail-bg"></p>
<p class="detail-text">超过95%的医生</p>
<div class="join-num">活动总计参与人数:{{myGrades.count}}</div>
<div class="grade-details">
<div class="left">
<p class="title">{{isWeb?'TA':'您'}}的成绩:</p>
<div class="item">
<div class="line"></div>
<div class="content">
<p class="label">累计获得勤奋分</p>
<p class="grade">{{myGrades.diligence}}</p>
<div class="trapezoid">
<p class="detail-bg"></p>
<p class="detail-text">超过{{myGrades.superCount||0}}%的医生</p>
</div>
</div>
</div>
</div>
<div class="item marginItem">
<div class="line line168"></div>
<div class="content">
<p class="label">累计获得云鹊豆</p>
<p class="grade">3600</p>
<div class="detail">记得去云鹊豆中心进行兑换哦</div>
<div class="item marginItem">
<div class="line line168"></div>
<div class="content">
<p class="label">累计获得云鹊豆</p>
<p class="grade">{{myGrades.bonus}}</p>
<div class="detail">记得去云鹊豆中心进行兑换哦</div>
</div>
</div>
</div>
<div class="item">
<div class="line line168"></div>
<div class="content">
<p class="label">进每日TOP10</p>
<p class="grade">5次</p>
<div class="detail">拿奖拿到手发软 </div>
<div class="item">
<div class="line line168"></div>
<div class="content">
<p class="label">进每日TOP10</p>
<p class="grade">{{myGrades.userDayTop10Count}}次</p>
<div class="detail">拿奖拿到手发软 </div>
</div>
</div>
</div>
<div class="right">
<p>{{rightText1}}</p>
<p>{{rightText2}}</p>
</div>
</div>
<div class="right">
<p>学无止境</p>
<p>学而不倦</p>
</div>
</div>
<div class="task-details">
<div class="task-item">
<img src="~/assets/img/stage3/task-icon1.png" alt="">
<p class="num">13次</p>
<p class="name">活动打卡</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon2.png" alt="">
<p class="num">12门</p>
<p class="name"> 学习课程</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon3.png" alt="">
<p class="num">500人</p>
<p class="name">邀请好友</p>
<div class="task-details">
<div class="task-item">
<img src="~/assets/img/stage3/task-icon1.png" alt="">
<p class="num">{{myGrades.clockCount}}次</p>
<p class="name">活动打卡</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon2.png" alt="">
<p class="num">{{myGrades.courseCount}}门</p>
<p class="name"> 学习课程</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon3.png" alt="">
<p class="num">{{myGrades.inviteCount}}人</p>
<p class="name">邀请好友</p>
</div>
</div>
<div class="share-btn" @click="share" v-if="!isWeb">分享我的成绩</div>
<p class="footer-text" v-if="!isWeb">共同推进医防融合 齐心聚力机构发展</p>
</div>
<div class="share-btn">分享我的成绩</div>
<p class="footer-text">共同推进医防融合 齐心聚力机构发展</p>
</section>
</template>
<script>
import { getMyGrades } from '@/service/stage3Api';
import { wxShare } from '@/configs/wxShare';
import h5header from '@/components/h5header';
export default {
name: "personal-grade"
name: "personal-grade",
components: {
h5header
},
data() {
return {
rightText1: '',//右侧文案
rightText2: '',//右侧文案
shareObj: wxShare,
isWeb: false
}
},
async asyncData({query}) {
const { data } = await getMyGrades({id: query.encyptId});
return {
encyptId: query.encyptId,//加密doctorId
myGrades: data
}
},
created() {
},
mounted() {
this.isWeb = this.$rocNative.isWeb;
this.shareObj.shareUrl = location.href; //微信分享链接
this.dealRightText();
},
methods: {
dealRightText() {
if(this.myGrades.superCount<=10) {
this.rightText1 = '勤学不辍';
this.rightText2 = '必有收获';
} else if(this.myGrades.superCount>=11&&this.myGrades.superCount<=40) {
this.rightText1 = '学无止境';
this.rightText2 = '不知疲倦';
} else if(this.myGrades.superCount>=41&&this.myGrades.superCount<=100) {
this.rightText1 = '学而不倦';
this.rightText2 = '可圈可点';
}
},
dealAwardsIcon() {
if(this.myGrades.superCount<=10) {
return require('../../assets/img/stage3/awards-icon3.png');
} else if(this.myGrades.superCount>=11&&this.myGrades.superCount<=40) {
return require('../../assets/img/stage3/awards-icon2.png');
} else if(this.myGrades.superCount>=41&&this.myGrades.superCount<=100) {
return require('../../assets/img/stage3/awards-icon2.png');
}
},
share() {
this.$rocNative.shareWechat(this.shareObj);
}
}
}
</script>
......
service/stage3Api.js
浏览文件 @ e064e9a0
......@@ -14,4 +14,12 @@ export const getMainRank = (parmas) => {
url: '/campaign/third/share/home/center',
params: parmas
})
}
\ No newline at end of file
}
/*我的成绩*/
export const getMyGrades = (data) => {
return request({
url: '/campaign/third/share/result',
method: 'post',
data: data
})
}
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或