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 { .personal-grade-wrap {
width: 100%; .wrap-container {
/*min-height: 907px;*/ width: 100%;
background: url("../../img/stage3/personal-grade.png") no-repeat; /*min-height: 907px;*/
background-size: cover; background: url("../../img/stage3/personal-grade.png") no-repeat;
position: relative; background-size: cover;
overflow: hidden; position: relative;
img.title { overflow: hidden;
position: absolute; img.title {
top: 0; position: absolute;
left: 13.5px; top: 0;
width: 169px; left: 13.5px;
height: 26.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;
} }
.right { img.awards-grade {
margin-left: 15px; position: absolute;
.name { top: 0;
color: #FFFFFF; right: 24px;
font-weight: 700; width: 49px;
font-size: 20px; height: 59px;
line-height: 20px;
}
.hospital {
color: #FFFFFF;
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-top: 4.5px;
}
} }
} .personal-info {
.join-num { margin-top: 51.5px;
font-size: 15px; margin-left: 20px;
font-weight: 700; display: flex;
color: #fff; align-items: center;
line-height: 21px; img {
margin-top: 73px; width: 50px;
margin-left: 18.5px; height: 50px;
}
.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 { .right {
display: flex; margin-left: 15px;
.line { .name {
width: 3.5px; color: #FFFFFF;
height: 91.5px; font-weight: 700;
background: #FFFFFF; font-size: 20px;
opacity:0.53; line-height: 20px;
margin-right: 8px;
} }
.line168 { .hospital {
height: 84px; color: #FFFFFF;
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-top: 4.5px;
} }
.content { }
.label { }
color: #FFFFFF; .join-num {
font-size: 15px; font-size: 15px;
font-weight: 700; font-weight: 700;
line-height: 15px; 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 { .line168 {
color: #FFFFFF; height: 84px;
font-size: 40px;
font-weight: 700;
line-height: 40px;
margin-top: 9px;
margin-bottom: 6px;
} }
.trapezoid { .content {
position: relative; .label {
.detail-bg { color: #FFFFFF;
width: 110px; font-size: 15px;
padding-left: 5px; font-weight: 700;
border-right:5px solid transparent; line-height: 15px;
border-top:21px solid #FFF36C;
padding-right: 5px;
} }
.detail-text { .grade {
position: absolute; color: #FFFFFF;
top: 3px; font-size: 40px;
left: 5px;
color: #F7753F;
font-size: 14px;
font-weight: 700; 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; line-height: 14px;
} }
} }
.detail { }
color: #FFF36C; .marginItem {
font-size: 14px; margin-top: 30px;
line-height: 14px; margin-bottom: 30px;
}
} }
} }
.marginItem { .right {
margin-top: 30px; width: 28px;
margin-bottom: 30px; float: right;
} margin-right: 40px;
} margin-top: 24px;
.right { p {
width: 28px; color: #FFFFFF;
float: right; font-size: 28px;
margin-right: 40px; font-weight: 700;
margin-top: 24px; }
p { p:first-child {
color: #FFFFFF; margin-bottom: 25px;
font-size: 28px; }
font-weight: 700;
}
p:first-child {
margin-bottom: 25px;
} }
} }
} .task-details {
.task-details {
display: flex;
justify-content: center;
margin-top: 54.5px;
.task-item {
width: 60px;
display: flex; display: flex;
flex-flow: column;
justify-content: center; justify-content: center;
img { margin-top: 54.5px;
margin-bottom: 30px;
.task-item {
width: 60px; width: 60px;
height: 60px; display: flex;
margin-bottom: 10px; 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 { .task-item:nth-child(2) {
color: #FFFFFF; margin: 0 67.5px;
font-size: 15px;
font-weight: 700;
line-height: 20px;
text-align: center;
} }
} }
.task-item:nth-child(2) { .share-btn {
margin: 0 67.5px; 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 @@ ...@@ -11,7 +11,7 @@
<!--已登录及个人未参加--> <!--已登录及个人未参加-->
<div class="person-details" v-if="isLogin&&mainInfoType==1&&!isWeb"> <div class="person-details" v-if="isLogin&&mainInfoType==1&&!isWeb">
<div class="info"> <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="right">
<div class="name">{{mainInfo.name}}</div> <div class="name">{{mainInfo.name}}</div>
<div class="hospital">{{mainInfo.hospitalName}}</div> <div class="hospital">{{mainInfo.hospitalName}}</div>
...@@ -146,10 +146,11 @@ ...@@ -146,10 +146,11 @@
}, },
mounted() { mounted() {
this.$rocNative.appInit();
this.isWeb = this.$rocNative.isWeb;
this.getMainInfo(); this.getMainInfo();
this.shareObj.shareUrl = location.href; //微信分享链接 this.shareObj.shareUrl = location.href; //微信分享链接
/*从app获取用户信息*/ /*从app获取用户信息*/
this.$rocNative.appInit();
this.getUserInfo(); this.getUserInfo();
const _this = this const _this = this
window.__refresh = function(params) { window.__refresh = function(params) {
...@@ -168,7 +169,12 @@ ...@@ -168,7 +169,12 @@
}) })
}, },
goMyGrade() { //跳转我的成绩页 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个人 goRankList(type,hospitalType) { //跳转榜单页,type:1机构，2个人
if (type == 1) { if (type == 1) {
......
pages/awards-list/personal-grade.vue
浏览文件 @ e064e9a0
<template> <template>
<section class="personal-grade-wrap"> <section class="personal-grade-wrap">
<img src="~/assets/img/stage3/awards-title.png" alt="" class="title"> <h5header
<img src="~/assets/img/stage3/awards-icon1.png" alt="" class="awards-grade"> v-if="!isWeb"
<div class="personal-info"> title="云鹊奖2019"
<img src="https://test-file.yunqueyi.com/png/2019/9/19/1568874397547_45fff40f.png" alt=""> :isOpacity="false"
<div class="right"> :shareObj="shareObj"/>
<p class="name">赵欢</p> <div class="wrap-container" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
<p class="hospital">上海复旦大学附属中山医院</p> <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> <div class="join-num">活动总计参与人数:{{myGrades.count}}</div>
<div class="join-num">活动总计参与人数:23432334</div> <div class="grade-details">
<div class="grade-details"> <div class="left">
<div class="left"> <p class="title">{{isWeb?'TA':'您'}}的成绩:</p>
<p class="title">您的成绩:</p> <div class="item">
<div class="item"> <div class="line"></div>
<div class="line"></div> <div class="content">
<div class="content"> <p class="label">累计获得勤奋分</p>
<p class="label">累计获得勤奋分</p> <p class="grade">{{myGrades.diligence}}</p>
<p class="grade">1809987</p> <div class="trapezoid">
<div class="trapezoid"> <p class="detail-bg"></p>
<p class="detail-bg"></p> <p class="detail-text">超过{{myGrades.superCount||0}}%的医生</p>
<p class="detail-text">超过95%的医生</p> </div>
</div> </div>
</div> </div>
</div> <div class="item marginItem">
<div class="item marginItem"> <div class="line line168"></div>
<div class="line line168"></div> <div class="content">
<div class="content"> <p class="label">累计获得云鹊豆</p>
<p class="label">累计获得云鹊豆</p> <p class="grade">{{myGrades.bonus}}</p>
<p class="grade">3600</p> <div class="detail">记得去云鹊豆中心进行兑换哦</div>
<div class="detail">记得去云鹊豆中心进行兑换哦</div> </div>
</div> </div>
</div> <div class="item">
<div class="item"> <div class="line line168"></div>
<div class="line line168"></div> <div class="content">
<div class="content"> <p class="label">进每日TOP10</p>
<p class="label">进每日TOP10</p> <p class="grade">{{myGrades.userDayTop10Count}}次</p>
<p class="grade">5次</p> <div class="detail">拿奖拿到手发软 </div>
<div class="detail">拿奖拿到手发软 </div> </div>
</div> </div>
</div> </div>
<div class="right">
<p>{{rightText1}}</p>
<p>{{rightText2}}</p>
</div>
</div> </div>
<div class="right"> <div class="task-details">
<p>学无止境</p> <div class="task-item">
<p>学而不倦</p> <img src="~/assets/img/stage3/task-icon1.png" alt="">
</div> <p class="num">{{myGrades.clockCount}}次</p>
</div> <p class="name">活动打卡</p>
<div class="task-details"> </div>
<div class="task-item"> <div class="task-item">
<img src="~/assets/img/stage3/task-icon1.png" alt=""> <img src="~/assets/img/stage3/task-icon2.png" alt="">
<p class="num">13次</p> <p class="num">{{myGrades.courseCount}}门</p>
<p class="name">活动打卡</p> <p class="name"> 学习课程</p>
</div> </div>
<div class="task-item"> <div class="task-item">
<img src="~/assets/img/stage3/task-icon2.png" alt=""> <img src="~/assets/img/stage3/task-icon3.png" alt="">
<p class="num">12门</p> <p class="num">{{myGrades.inviteCount}}人</p>
<p class="name"> 学习课程</p> <p class="name">邀请好友</p>
</div> </div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon3.png" alt="">
<p class="num">500人</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>
<div class="share-btn">分享我的成绩</div>
<p class="footer-text">共同推进医防融合 齐心聚力机构发展</p>
</section> </section>
</template> </template>
<script> <script>
import { getMyGrades } from '@/service/stage3Api';
import { wxShare } from '@/configs/wxShare';
import h5header from '@/components/h5header';
export default { 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> </script>
......
service/stage3Api.js
浏览文件 @ e064e9a0
...@@ -14,4 +14,12 @@ export const getMainRank = (parmas) => { ...@@ -14,4 +14,12 @@ export const getMainRank = (parmas) => {
url: '/campaign/third/share/home/center', url: '/campaign/third/share/home/center',
params: parmas 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 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或