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

Merge branch 'release' into dev-stage3-20191212

# Conflicts:
#	package-lock.json
#	service/index.js
@import './common.scss';
@import 'common.less';
//定位
.relative{
......
此差异已折叠。
此差异已折叠。
@import './global.scss';
@import 'global.less';
$blue: #3190e8;
$bc: #e4e4e4;
$fc:#fff;
......
.remind-success{
width: 300px;
border-radius: 3px;
.van-dialog__header{
font-size:18px;
color:rgba(51,51,51,1);
line-height:18px;
padding-top: 30px;
.remind-success {
width: 300px;
.van-dialog__header {
font-size: 18px;
color: rgba(51, 51, 51, 1);
line-height: 18px;
padding-top: 30px;
}
.van-dialog__content {
.van-dialog__message {
padding: 14px 24px 30px 24px;
text-align: left;
font-size: 14px;
color: rgba(103, 104, 105, 1);
line-height: 21px;
span {
font-size: 14px;
color: #449284;
line-height: 21px;
}
}
.van-dialog__content{
.van-dialog__message{
padding: 14px 24px 30px 24px;
text-align: left;
font-size:14px;
color:rgba(103,104,105,1);
line-height:21px;
span{
font-size:14px;
color:#449284;
line-height:21px;
}
}
}
.van-dialog__footer {
.van-dialog__cancel {
.van-button__text {
font-size: 17px;
color: rgba(151, 152, 153, 1);
line-height: 24px;
}
}
.van-dialog__footer{
.van-dialog__cancel{
.van-button__text{
font-size:17px;
color:rgba(151,152,153,1);
line-height:24px;
}
}
.van-dialog__confirm{
.van-button__text{
font-size:17px;
color:rgba(68,146,132,1);
line-height:24px;
}
}
.van-dialog__confirm {
.van-button__text {
font-size: 17px;
color: rgba(68, 146, 132, 1);
line-height: 24px;
}
}
}
}
.version-toast{
width: 320px;
.van-dialog__header{
font-size:18px;
color:rgba(51,51,51,1);
line-height:18px;
padding-top: 30px;
.version-toast {
width: 320px;
.van-dialog__header {
font-size: 18px;
color: rgba(51, 51, 51, 1);
line-height: 18px;
padding-top: 30px;
}
.van-dialog__content {
.van-dialog__message {
font-size: 14px;
color: rgba(103, 104, 105, 1);
line-height: 21px;
}
.van-dialog__content{
.van-dialog__message{
font-size:14px;
color:rgba(103,104,105,1);
line-height:21px;
}
}
.van-dialog__footer {
border: .5px solid rgba(0, 0, 0, .3);
.van-dialog__cancel {
.van-button__text {
font-size: 17px;
color: rgba(151, 152, 153, 1);
line-height: 24px;
}
}
.van-dialog__footer{
border: .5px solid rgba(0,0,0,.3);
.van-dialog__cancel{
.van-button__text{
font-size:17px;
color:rgba(151,152,153,1);
line-height:24px;
}
}
.van-dialog__confirm{
.van-button__text{
font-size:17px;
color:rgba(68,146,132,1);
line-height:24px;
}
}
.van-dialog__confirm {
.van-button__text {
font-size: 17px;
color: rgba(68, 146, 132, 1);
line-height: 24px;
}
}
}
}
.wx-share-wrap {
.van-count-down {
line-height: 45px;
right: 20px;
position: absolute;
}
}
\ No newline at end of file
<template>
<section class="footer-btn-wrap">
<div class="footer-btn" :style="{height: `${50+homeIndicatorHeight}` + 'Px'}">
<div class="btn" @click="handlerMethod">{{btnText}}</div>
</div>
</section>
</template>
<script>
export default {
name: "footer-button",
props: {
btnText: {
type: String,
default: () => {
return '确定'
}
},
btnType: {
type: Boolean,
default: () => {
return true
}
}
},
methods: {
handlerMethod() {
if(this.btnType) {
this.$router.push('/activityPage')
} else {
this.$emit('sureBtn')
}
}
}
}
</script>
<style lang="less" scoped>
.footer-btn-wrap {
.footer-btn {
width: 100%;
min-height: 50Px;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
background: #fff;
.btn {
width: 345px;
height: 40Px;
margin: 5Px auto;
line-height: 40Px;
text-align: center;
background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius: 20Px;
color: #FFFFFF;
font-weight: 700;
font-size: 15px;
}
}
}
</style>
\ No newline at end of file
......@@ -3,12 +3,14 @@ header{
position: fixed;
left: 0;
top: 0;
z-index: 100;
z-index: 300;
.status{
width: 100%;
}
.head-wrap{
width: 100%;
height: 44Px;
line-height: 44Px;
box-sizing: border-box;
padding: 0 20px 0 16px;
display: flex;
......
<template>
<header>
<div class="status" :class="{'bgfff': isScroll}" :style="{height: statusBarHeight + 'px', background: bgColor}"></div>
<div class="head-wrap" :class="{'bgfff': isScroll}" :style="{height: titleHeight + 'px'}">
<div class="status" :class="{'bgfff': isScroll}" :style="{height: statusBarHeight + 'Px', background: bgColor}"></div>
<!-- <div class="head-wrap" :class="{'bgfff': isScroll}" :style="{height: titleHeight + 'px'}"> -->
<div class="head-wrap" :class="{'bgfff': isScroll}">
<img @click="goBack" :src="leftIcon">
<span v-if="isScroll">{{title}}</span>
<img @click="goShare" :src="rightIcon">
......@@ -18,6 +19,10 @@
export default {
name: 'h5header',
props: {
isOpacity: { // 是否需要透明背景
type: Boolean,
default: true
},
scrollVal: { // 实际滚动的距离
type: Number,
default: 25
......@@ -42,7 +47,15 @@
setedScroll: { // 是否使用外部父组件的scroll事件
type: Boolean,
default: false
}
},
isCheckAuth: { // 是否校驗權限
type: Boolean,
default: false
},
isStageTwoHomePage: { // 是否是二期主页面
type: Boolean,
default: false
},
},
data(){
return {
......@@ -55,6 +68,7 @@
}
},
mounted(){
this.isScroll = !this.isOpacity;
this.setHeaderHeight();
if(!this.setedScroll){
this.scrollHandleOwn();
......@@ -63,35 +77,59 @@
watch: {
scrollVal(val){
this.setScrollHandle(val);
}
},
isScroll(val){
if(val){
this.leftIcon = leftimg2;
this.rightIcon = rightimg2;
}
}
},
methods: {
// 从APP获取电池栏高度并设置高度
setHeaderHeight(){
// this.statusBarHeight = 20 * window.devicePixelRatio; // 给一个默认值,20 * 2
// this.titleHeight = 44 * window.devicePixelRatio; // title高度默认是44px
this.$rocNative.getStatusBarHeight().then(res=>{
const dpr = window.devicePixelRatio;
if(this.$rocNative.isIOS){
this.statusBarHeight = res.statusBarHeight * dpr;
this.titleHeight = this.titleHeight * dpr;
// this.statusBarHeight = res.statusBarHeight * dpr;
// this.titleHeight = this.titleHeight * dpr;
this.statusBarHeight = res.statusBarHeight;
}else{
this.bgColor = '#ccc';
this.statusBarHeight = res.statusBarHeight / dpr;
}
this.$emit('getHeaderHeight', this.statusBarHeight + 44);
})
},
goBack(){
this.$sendBuriedData({
component_tag: `301#301002`
});
if(this.isStageTwoHomePage){
this.$sendBuriedData({
component_tag: `302#302002`
});
}else{
this.$sendBuriedData({
component_tag: `301#301002`
});
}
this.$rocNative.goBack();
},
goShare(){
this.$sendBuriedData({
component_tag: `301#301001`
});
this.$rocNative.shareWechat(this.shareObj);
if(this.isStageTwoHomePage){
this.$sendBuriedData({
component_tag: `302#302001`
});
}else{
this.$sendBuriedData({
component_tag: `301#301001`
});
}
if(this.isCheckAuth){
this.$emit('checkAuth', ()=>{
this.$rocNative.shareWechat(this.shareObj);
})
}else{
this.$rocNative.shareWechat(this.shareObj);
}
},
// 默认滚动事件
scrollHandleOwn(){
......@@ -103,22 +141,28 @@
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
const heightVal = imgHeight1 + imgHeight2 + imgHeight3;
// const heightVal = imgHeight1 + imgHeight2 + imgHeight3;
const scrollVal = bodyScrollTop || documentScrollTop;
this.setScrollHandle(scrollVal);
}
},
// 交互事件
setScrollHandle(instval){
if (instval >= this.baseShowHeight) {
this.isScroll = true;
this.leftIcon = leftimg2;
this.rightIcon = rightimg2;
} else {
this.isScroll = false;
this.leftIcon = leftimg1;
this.rightIcon = rightimg1;
}
if(this.isOpacity){
if (instval >= this.baseShowHeight) {
this.isScroll = true;
this.leftIcon = leftimg2;
this.rightIcon = rightimg2;
} else {
this.isScroll = false;
this.leftIcon = leftimg1;
this.rightIcon = rightimg1;
}
}else{
this.isScroll = true;
this.leftIcon = leftimg2;
this.rightIcon = rightimg2;
}
}
}
}
......
<template>
<section class="header-section" >
<div class="navBar" :style="{height: `${statusBarHeight}Px`,backgroundColor: statusBarColor}"></div>
<header class="header-container">
<img @click="goBack" src="~/assets/img/icon-back.png" alt="">
{{title}}
<div class="btn-right" v-if="rightText" @click="rightBtnClick">{{rightText}}</div>
</header>
</section>
</template>
<script>
export default {
name: "normal-header",
props: {
title: {
type: String,
default: function () {
return ''
}
},
rightText: {
type: String,
default: function () {
return ''
}
},
backType: {
type: Number,
default: function () {
return 1
}
},
},
data() {
return {}
},
methods: {
goBack() {
if (this.backType == 1) {
this.$router.go(-1)
} else if(this.backType == 2) {
this.$emit('selfGoBack')
}else {
this.$rocNative.goBack()
}
},
rightBtnClick() {
this.$emit('handleRightBtn')
}
}
}
</script>
<style lang="less" scoped>
.header-section {
width: 100%;
position: fixed;
top: 0;
z-index: 2;
.navBar {
background: #CCCCCC;
}
.header-container {
width: 100%;
height: 44Px;
background: #ffffff;
color: #333333;
font-size: 18px;
/*display: flex;
align-items: center;*/
line-height: 44Px;
text-align: center;
position: relative;
img {
display: block;
width: 25px;
height: 25px;
position: absolute;
left: 13px;
top: 9px
}
/* .title {
margin: 0 auto;
}*/
.btn-right {
position: absolute;
right: 14.5px;
bottom: 13px;
font-size: 13px;
line-height: 14px;
color: #373839;
}
}
}
</style>
\ No newline at end of file
<template>
<section class="header-section" >
<div class="navBar" :style="{height: `${statusBarHeight}Px`,backgroundColor: statusBarColor}"></div>
<header class="header-container">
<img @click="goBack" src="~/assets/img/icon-back.png" alt="">
<div class="head-btn">
<div
class="btn left"
:class="{'active-btn':activeBtnType}"
@click="headBtnClick(true)">
{{headBtn.leftName}}
</div>
<div class="line"></div>
<div
class="btn right"
:class="{'active-btn':!activeBtnType}"
@click="headBtnClick(false)">
{{headBtn.rightName}}
</div>
</div>
<div class="right-btn" v-if="rightBtn" @click="rightBtnClick">{{rightBtn}}</div>
</header>
</section>
</template>
<script>
export default {
name: "normal-header",
props: {
title: {
type: String,
default: function () {
return ''
}
},
rightBtn: {
type: String,
default: function () {
return ''
}
},
backType: {
type: Number,
default: function () {
return 1
}
},
headBtn: {
type: Object,
default: function () {
return {
leftName: '',
rightName: ''
}
}
},
activeBtnType: {
type: Boolean,
default: function () {
return true
}
}
},
data() {
return {}
},
methods: {
goBack() {
if (this.backType == 1) {
this.$router.go(-1)
} else if(this.backType == 2) {
this.$emit('selfGoBack')
}else {
this.$rocNative.goBack()
}
},
headBtnClick(val) {
this.$emit('handleBtn', val)
},
rightBtnClick() {
this.$emit('handleRightBtn')
}
}
}
</script>
<style lang="less" scoped>
.header-section {
width: 100%;
position: fixed;
top: 0;
z-index: 2;
.navBar {
background: #CCCCCC;
}
.header-container {
width: 100%;
height: 44Px;
background: #ffffff;
color: #333333;
font-size: 18px;
display: flex;
align-items: center;
line-height: 44Px;
position: relative;
img {
width: 25px;
height: 25px;
position: absolute;
left: 13px;
top: 10px;
}
.head-btn {
width: 193px;
height: 30px;
display: flex;
margin: 0 auto;
.btn {
padding: 0 15px;
font-size: 13px;
font-weight: 700;
height: 30px;
text-align: center;
line-height: 31px;
color: #373839;
position: relative;
}
.btn:after {
position: absolute;
content: " ";
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 200%;
height:200%;
border: 1PX solid #C7C8C9;
//border-radius: 40px;
color: #C7C8C9;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
}
.left {
border-bottom-left-radius: 15px;
border-top-left-radius: 15px;
}
.right {
border-bottom-right-radius: 15px;
border-top-right-radius: 15px;
}
.left:after {
border-bottom-left-radius: 40px;
border-top-left-radius: 40px;
border-right: none;
}
.right:after{
border-bottom-right-radius: 40px;
border-top-right-radius: 40px;
border-left: none;
}
.active-btn {
background: #F8F9FA;
}
.line {
width: 0.5px;
height: 31px;
background: #C7C8C9;
}
}
.right-btn {
color: #373839;
font-size: 13px;
position: absolute;
right: 14.5px;
}
}
}
</style>
\ No newline at end of file
......@@ -43,7 +43,7 @@ export default {
</script>
<style lang="scss" scoped>
@import '../assets/style/mixin.scss';
@import '../assets/style/mixin.less';
.top-title-new{
//height:px2rem(45px);
line-height:px2rem(25px);
......
export const wxShare = {
shareUrl: '',
title1: '您的好友邀请您领取医学课程',
title2: '参与云鹊奖活动,领取免费课程,赢取iphone11等丰厚奖品',
shareImageUrl: 'https://file.yunqueyi.com/h5/nzhd19/share2.png'
}
\ No newline at end of file
......@@ -53,6 +53,14 @@ module.exports = {
src: '~/plugins/vueComponent',
ssr: false
},
{
src: '~plugins/vue-infinite-scroll',
ssr: false
},
{
src: '~plugins/mixins',
ssr: false
}
],
/*
** Nuxt.js modules
......
此差异已折叠。
此差异已折叠。
.hospital-ranking-wrap {
position: relative;
.info-container {
width: 100%;
height: 130px;
background: url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
background-size: cover;
overflow: hidden;
.info {
display: flex;
align-items: center;
padding: 0 15px;
margin-top: 20px;
img {
width: 50px;
height: 50px;
border-radius: 100%;
}
.content {
display: flex;
margin-left: 10px;
flex-flow: column;
align-items: flex-start;
.main-name {
color: #fff;
font-size: 18px;
font-weight: 700;
}
.main1-name {
color: #fff;
font-size: 12px;
margin-top: 8px;
}
.details {
display: flex;
align-items: center;
margin-top: 8px;
.item {
font-size: 14px;
font-weight: 700;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
}
}
.details-d {
margin-top: 0;
}
.line {
display: inline-block;
width: 0.5px;
height: 10px;
background: #fff;
margin: 0 6px;
}
}
.not-join {
margin-left: 10px;
.main-name {
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 14px;
}
.details {
color: #fff;
font-size: 12px;
line-height: 12px;
margin-top: 8px;
}
}
}
}
.main-content {
width: 100%;
border-radius: 20px 20px 0px 0px;
position: absolute;
top: 90px;
background: #fff;
.description {
height: 40px;
line-height: 40px;
color: #FD6037;
font-size: 13px;
display: flex;
align-items: center;
span {
display: inline-block;
color: #373839;
font-size: 16px;
font-weight: 700;
margin: 0 6px 0 20px;
}
}
.description-d {
justify-content: center;
}
.ranking-title {
display: flex;
align-items: center;
height: 40px;
background: #FFF7F2;
color: #979899;
font-size: 14px;
padding: 0 25px 0 13px;
margin-bottom: 3px;
.marginL {
margin-left: 11px;
}
.marginAuto {
margin-left: auto;
}
}
.ranking-list {
padding: 0 25px;
.item {
display: flex;
align-items: center;
padding: 13.5px 0;
.ranking-icon {
width: 25px;
height: 30px;
}
.icon-num {
width: 25px;
color: #373839;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.doctor-photo {
width: 35px;
height: 35px;
border-radius: 100%;
margin-left: 25px;
}
.doctor-name {
color: #333333;
font-size: 16px;
font-weight: 700;
margin-left: 10px;
width: 130px;
}
.hospital-name {
color: #333333;
font-size: 16px;
font-weight: 700;
margin-left: 25px;
width: 200px;
}
.num {
color: #373839;
font-weight: 700;
font-size: 18px;
margin-left: auto;
}
}
}
}
.no-more {
height: 62px;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 84px;
height: 1px;
background:#F7F7F7;
}
.text {
color: #BEC2CC;
font-size: 13px;
margin: 0 8px;
}
}
.no-data {
margin-top: 112px;
img {
width: 150px;
height: 150px;
display: block;
margin: 0 auto;
}
p {
color: #999999;
font-size: 15px;
line-height: 21px;
margin-top: 5px;
margin-bottom: 30px;
text-align: center;
}
.button {
color: #fff;
font-size: 15px;
font-weight: 700;
width: 180px;
height: 45px;
line-height: 45px;
text-align: center;
background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius: 22.5px;
margin: 0 auto;
}
}
.textOverflow {
width: 285px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
}
\ No newline at end of file
<template>
<section class="hospital-ranking-wrap">
<ranking-header
:headBtn="headBtn"
:activeBtnType="activeBtnType"
@handleBtn="changeRanking">
</ranking-header>
<div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
<div class="info info-hospital" v-if="activeBtnType">
<img src="~/assets/img/hospital-ranking/icon-hospital.png" alt="">
<div class="content" v-if="hospitalRanking.score">
<div class="con main-name textOverflow">{{hospitalRanking.name}}</div>
<div class="con details">
<p class="item">
<span class="label">累计排名</span>
<span class="value">{{hospitalRanking.rank}}</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">{{hospitalRanking.score}}</span>
</p>
</div>
</div>
<div class="not-join" v-else>
<div class="con main-name textOverflow">{{hospitalRanking.name}}</div>
<div class="con details">您的机构还未参与活动</div>
</div>
</div>
<div class="info info-doctor" v-else>
<img :src="contributionRanking.avatarImageUrl" alt="">
<div class="content" v-if="contributionRanking.score">
<div class="con details details-d">
<p class="item">
<span class="label">累计排名</span>
<span class="value">{{contributionRanking.rank}}</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">{{contributionRanking.score}}</span>
</p>
</div>
<div class="con main1-name">{{contributionRanking.hospital}}</div>
</div>
<div class="not-join" v-else>
<div class="con main-name">您还未参加活动</div>
<div class="con details">赶快参加为您的机构争取荣誉吧</div>
</div>
</div>
</div>
<div class="main-content" v-if="!noContributionRanking">
<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">{{activeBtnType?'机构名称':'机构成员'}}</span>
<span class="marginAuto">{{activeBtnType?'机构勤奋分':'贡献勤奋分'}}</span>
</div>
<div class="ranking-list" :style="{marginBottom: `${50+homeIndicatorHeight}` + 'Px'}">
<div class="item" v-if="activeBtnType" v-for="(itemH,indexH) in topRankListH" :key="indexH">
<img v-if="indexH<=2" :src="dealRankIcon(indexH)" alt="" class="ranking-icon">
<p v-else class="icon-num" >{{indexH+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,indexD) in topRankListC" :key="indexD">
<img v-if="indexD<=2" :src="dealRankIcon(indexD)" alt="" class="ranking-icon">
<p v-else class="icon-num" >{{indexD+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 class="no-more" v-if="activeBtnType&&topRankListH.length>=10">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
<div class="no-more" v-if="!activeBtnType&&topRankListC.length>=10">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
</div>
<div class="main-content" v-if="noContributionRanking">
<div class="no-data">
<img src="~/assets/img/icon-nodata.png" alt="">
<p>您的机构还没有人参加活动</p>
<div class="button" @click="goInActivity">立即参加</div>
</div>
</div>
<footer-button
v-if="!noContributionRanking"
:btnText="btnText"
:btnType="btnType">
</footer-button>
</section>
</template>
<script>
import RankingHeader from '@/components/ranking-header';
import FooterButton from '@/components/footer-button';
import { getContributionRanking, getHospitalRanking} from '@/service/detailsAndRanking'
export default {
name: 'hospital-ranking',
components: {
RankingHeader,
FooterButton
},
data() {
return {
showPop: false,
title: '个人明细',
headBtn: {
leftName: '机构排行榜',
rightName: '人员贡献榜'
},
activeBtnType: true, //true机构,false人员
hospitalRanking: {},
topRankListH: [],//机构排行
contributionRanking: {},
topRankListC: [], //贡献排行
btnText: '助力机构 创造佳绩',
btnType: true,
noContributionRanking: false //是否有人员贡献榜单数据
};
},
computed: {
},
mounted() {
this.getRankData();
},
methods: {
goInActivity() {
this.$router.push('/activityPage')
},
changeRanking(val) {
this.activeBtnType = val;
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.noContributionRanking = false;
getHospitalRanking().then(res => {
if(res.code == '000000') {
this.hospitalRanking = res.data;
this.topRankListH = res.data.topRankList
}
})
},
getContributionRanking() {
getContributionRanking().then(res => {
if(res.code == '000000') {
this.contributionRanking = res.data;
this.topRankListC = res.data.topRankList
if(this.contributionRanking.topRankList.length) {
this.noContributionRanking = false;
} else {
this.noContributionRanking = true;
}
}
})
},
getRankData() {
if(this.activeBtnType) {
this.getHospitalRanking();
} else {
this.getContributionRanking()
}
}
},
};
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
<template>
<section class="index-wrap">
<div id="imgHeight1">
<img src="../assets/img/img1.png"/>
<img src="../assets/img/img2.png"/>
<img src="../assets/img/img3.png"/>
</div>
<div class="wrap-join" id="imgHeight2">
<div class="wrap-count">
<div>
<h1>2394847</h1>
<h5>已参与人数</h5>
</div>
<div>
<h1>23948</h1>
<h5>已参与机构</h5>
</div>
</div>
</div>
<div class="btn-appoint btn-app-share" id="imgHeight3" @click="setRemind"><img src="../assets/img/btn_appoint.png"/>
</div>
<div>
<img src="../assets/img/img6.png"/>
<img src="../assets/img/img7.png"/>
<img src="../assets/img/img8.png"/>
<img src="../assets/img/img9.png"/>
<img src="../assets/img/img10.png"/>
</div>
<div class="btn-share btn-app-share"><img src="../assets/img/btn_share.png"/></div>
<div class="rule-show">
<img src="../assets/img/rule_title.png"/>
<div class="rule-bg">
<section>
<h1>每日任务,攒勤奋分</h1>
<p><span>比赛时间:</span>2019.12.16 10:00-2019.12.30 00:00</p>
<p><span>医生机构:</span>根据机构内注册医生的勤奋分总额排名,活动结束后机构榜单指定名次可获得云鹊豆,榜单第一可获得云鹊机构奖荣誉。</p>
<p><span>医生个人:</span>完成每日学习任务可积攒勤奋分和云鹊豆,每日个人排行榜前十可获得相应实物奖品,个人累计排行第一获得云鹊勤奋之星荣誉、iphone11(64G)一台及云鹊豆奖品。</p>
</section>
<section class="margin-top-20">
<h1>公布排名</h1>
<p><span>公布时间:</span>2019.12.30 10:00-2020.1.5</p>
<p>公布个人获奖名单和机构获奖名单</p>
</section>
<div class="line"></div>
<div class="btn-rule">查看规则详情</div>
</div>
<img class="bird" src="../assets/img/bird.png">
</div>
<div v-if="showFixed" @click="setRemind" class="fix-btn">
<div>开赛时提醒我</div>
</div>
</section>
</template>
<script>
// import { Toast } from 'vant';
// import { mapMutations } from 'vuex'
// import request from '@/service/api';
import {remind, getRemindStatus, checkHospitalStatus} from '@/service';
// import popAll from '../components/popAll.vue';
// import { getBaseMainUrl, getCookie, delCookie, setCookie } from '../utils/index';
const cookies = require('cookie-universal')();
const token = '3D093CC8931C4F73A938CD8939E1A640';
export default {
head() {
return {
title: '云鹊医-赋能基层医生',
};
},
async asyncData({query}) {
const {data} = await getRemindStatus(token);
console.log('服务端', data)
const remindStatus = data;
return {
remindStatus
}
},
data() {
return {
showFixed: false,
}
},
created() {
},
mounted() {
console.log('愉悦状态', this.remindStatus)
this.scrollHandle();
},
methods: {
// 处理滚动按钮悬浮事件
scrollHandle() {
const _self = this;
const imgHeight1 = document.getElementById('imgHeight1').offsetHeight;
const imgHeight2 = document.getElementById('imgHeight2').offsetHeight;
const imgHeight3 = document.getElementById('imgHeight3').offsetHeight;
let bodyScrollTop = 0, documentScrollTop = 0;
window.onscroll = () => {
if (document.body) {
bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
documentScrollTop = document.documentElement.scrollTop;
}
const heightVal = imgHeight1 + imgHeight2 + imgHeight3;
const scrollVal = bodyScrollTop || documentScrollTop;
if (scrollVal >= heightVal) {
_self.showFixed = true;
} else {
_self.showFixed = false;
}
}
},
setRemind() {
checkHospitalStatus(token).then(res => {
console.log(res)
// status : 0无机构 1正常 2机构已关闭 5退出 10移除 15创建机构审核中 20创建机构审核不通过 25创建机构未提交
if (res.data.status == 1) {
}
if (!res.data.status) { // 0无机构
// native gotoActivityHospital
} else if (res.data.status == 15) { // 15创建机构审核中
// native gotoInstitutionalReview
} else {
remind({token}).then(res => {
console.log('res=>', res)
})
}
})
}
},
}
</script>
<style lang="less">
@import '../assets/style/index.less';
</style>
\ No newline at end of file
.invite-details-wrap {
.main-container {
overflow: hidden;
.invite-explain {
padding: 0 15px;
margin: 20px 0 30px 0;
.title {
color: #333333;
font-size: 18px;
font-weight: 700;
}
.picture-explain {
display: flex;
justify-content: space-between;
margin-top: 18px;
.left {
width: 18px;
display: flex;
flex-flow: column;
align-items: center;
margin-top: 13px;
.step-num {
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 100%;
background: #F36F55;
color: #fff;
font-size: 12px;
}
.dotted-line {
border-left: 1px dashed #F36F55;
height:38px;
width: 1px;
}
.height50 {
height: 50px!important;
}
}
.right {
.bubble_diailog{
width: 275px;
padding: 12px 15px;
position: relative;
background: #FFF4F2;
border-radius: 6px;
color: #373839;
font-size: 14px;
font-weight: 700;
i,.bubble_diailog b{
position: absolute;
width: 0;
height: 0;
overflow: hidden;
border-width:5px;
display:block;
}
i.l,.bubble_diailog b.l{
border-style:dashed solid dashed dashed;
}
i.l{
top:0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
left:-10px;
border-color:transparent #FFF4F2 transparent transparent;
}
b.l{
top:0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
left:-9px;
border-color:transparent #FFF4F2 transparent transparent;
}
p {
line-height: 14px;
}
.text {
color: #373839;
font-size: 14px;
font-weight: 700;
}
.awards {
color: #979899;
font-size: 12px;
font-weight: 400;
margin-top: 6px;
}
};
.marginTop16 {
margin-top: 8px;
}
.marginTop20 {
margin-top: 10px;
}
}
}
}
.gray-line {
width: 100%;
height: 5px;
background: #F8F9FA;
}
.record-details {
width: 100%;
min-height: 294px;
background: #fff;
.tab-nav {
width: 100%;
background: #fff;
height: 52px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E7E8E9;
.item {
height: 52px;
line-height: 52px;
position: relative;
font-size: 16px;
color: #676869;
.active-line {
width: 20px;
height: 3px;
background: #F36F55;
border-radius: 1.5px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
}
.left-item {
margin-left: 53.5px;
}
.right-item {
margin-right: 53.5px;
}
.activeItem {
color: #373839;
font-weight: 700;
}
}
.record-list {
padding: 15px;
.sum {
color: #676869;
font-size: 14px;
}
.loadMore {
overflow-y: auto;
.record-item {
padding: 20px 0;
display: flex;
align-items: center;
.person-photo {
width: 35px;
height: 35px;
border-radius: 100%;
}
.person-info {
margin-left: 15px;
.phone {
color: #373839;
font-size: 16px;
line-height: 16px;
}
.time {
color: #979899;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
}
.awards {
margin-left: auto;
.item {
font-size: 13px;
font-weight: 700;
height: 13px;
margin-bottom: 9px;
.num {
color: #FD5A2F;
}
.award-name {
color: #373839;
}
}
.item:last-child {
margin-bottom: 0;
}
}
}
.no-more {
height: 62px;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 84px;
height: 1px;
background:#F7F7F7;
}
.text {
color: #BEC2CC;
font-size: 13px;
margin: 0 8px;
}
}
}
}
}
.no-data {
img {
width: 150px;
height: 150px;
display: block;
margin: 5px auto;
}
p {
width: 180px;
height: 42px;
font-size: 15px;
color: #999999;
line-height: 21px;
margin: 0 auto;
text-align: center;
}
.text-get {
width: 300px;
}
}
}
}
\ No newline at end of file
<template>
<section class="invite-details-wrap">
<normal-header
:title="title"
:backType="1">
</normal-header>
<div class="main-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
<div class="invite-explain">
<p class="title">邀请形式</p>
<div class="picture-explain">
<div class="left">
<div class="step-num">1</div>
<div class="dotted-line" />
<div class="step-num">2</div>
<div class="dotted-line height50" />
<div class="step-num">3</div>
</div>
<div class="right">
<div class="bubble_diailog">
<i class="l"></i>
<b class="l"></b>
邀请医生好友
</div>
<div class="bubble_diailog marginTop16">
<i class="l"></i>
<b class="l"></b>
<p class="text">输入手机号领取课程</p>
<p class="awards">
<span v-for="(item, index) in dealJsonData(this.node1)" :key="index">
+{{item.rewardQuantity}}{{changeAwardsName(item.rewardType)}}
</span>
</p>
</div>
<div class="bubble_diailog marginTop20">
<i class="l"></i>
<b class="l"></b>
<p class="text">使用手机号登录云鹊医APP</p>
<p class="awards">
<span v-for="(item, index) in dealJsonData(this.node2)" :key="index">
+{{item.rewardQuantity}}{{changeAwardsName(item.rewardType)}}
</span>
</p>
</div>
</div>
</div>
</div>
<div class="gray-line"></div>
<div class="record-details" :style="{marginBottom: `${50+homeIndicatorHeight}Px`}">
<div class="tab-nav">
<div class="item left-item" :class="{activeItem:recordType==1}" @click="changeRecordType">
领取课程的好友
<p class="active-line" v-if="recordType==1"></p>
</div>
<div class="item right-item" :class="{activeItem:recordType==2}" @click="changeRecordType">
登录APP的好友
<p class="active-line" v-if="recordType==2"></p>
</div>
</div>
<div class="record-list" >
<div class="no-data" v-if="!inviteList.length" >
<img src="~/assets/img/icon-nodata.png" alt="">
<p v-if="recordType==1">提醒您的医生好友领取课程您将获得奖励哦!</p>
<p v-if="recordType==2" class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦!</p>
</div>
<p class="sum" v-if="inviteList.length">{{recordTotal}}</p>
<div class="loadMore" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
infinite-scroll-distance="10">
<div class="record-item" v-if="inviteList.length" v-for="(item, index) in inviteList" :key="index">
<img :src="item.avatarImageUrl" alt="" class="person-photo">
<div class="person-info">
<p class="phone">{{item.mobile}}</p>
<p class="time">{{item.inviteDate}}</p>
</div>
<div class="awards">
<p class="item" v-for="(item1, index1) in dealJsonData(item.rewardJsonInfo)" :key="index1">
<span class="num">+{{item1.rewardQuantity}}</span>
<span class="award-name">{{changeAwardsName(item1.rewardType)}}</span>
</p>
</div>
</div>
<div class="no-more" v-if="noMore&&inviteList.length>=8">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
<footer-button
:btnText="btnText"
:btnType="btnType"
@sureBtn="goInvite">
</footer-button>
</section>
</template>
<script>
import NormalHeader from '@/components/normal-header';
import FooterButton from '@/components/footer-button';
import { getOneInviteDetails,getTwoInviteDetails,getInviteDetailAward } from '@/service/detailsAndRanking';
import { wxShare } from '@/configs/wxShare';
import { getShareUrl } from '@/utils/index';
import { Base64 } from 'js-base64';
export default {
name: "index",
components: {
NormalHeader,
FooterButton,
},
data() {
return {
showPop: false,
title: '邀请明细',
inviteList: [],
recordTotal: 0,
recordType: 1,
busy: true, //分页参数--start
pageNo: 0,
pageSize: 10,
noMore: false,//分页参数--end
btnText: '去邀请',
btnType: false,
node1: '',
node2: ''
};
},
async asyncData ({query}) {
return {
encryptId: query.encryptId,
taskId: query.taskId,
activityId: query.activityId
}
},
mounted() {
this.pageNo++
this.getOneInviteDetails();
this.getInviteDetailAward();
const _this = this
window.addEventListener('scroll', function (e) {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//获取recordDetails到顶部距离
const recordDetails = document.getElementsByClassName('record-details')[0];
let recordDetailsHeight = recordDetails.getBoundingClientRect().top;
//获取headDiv部分高度
const headDiv = document.getElementsByClassName('header-container')[0];
let headDivHeight = headDiv.offsetHeight;
//获取窗口高度
const lastHeight = window.innerHeight;
/*console.log('recordDetailsHeight',recordDetailsHeight);
console.log('headDivHeight',headDivHeight);*/
const tabNab=document.getElementsByClassName('tab-nav')[0];
if(recordDetailsHeight<=headDivHeight) {
tabNab.setAttribute('style',`position:fixed;top: ${44+_this.statusBarHeight}px;`);
} else {
tabNab.removeAttribute('style');
}
});
},
methods: {
getInviteDetailAward() {
getInviteDetailAward({
activityId: this.activityId,
taskId: this.taskId
}).then(res => {
const node1 = res.data.filter(item => {
return item.resourceId == "1"
});
const node2 = res.data.filter(item => {
return item.resourceId == "2"
})
this.node1 = node1[0].rewardJsonInfo;
this.node2 = node2[0].rewardJsonInfo;
console.log(this.node1,this.node2)
})
},
goInvite() { // 去邀请
this.$sendBuriedData({
component_tag: `308#308001`
});
let shareObj = wxShare;
//处理分享链接需要的参数
const paramstr = Base64.encode(`id=${this.encryptId}&taskId=${this.taskId}&activityId=${this.activityId}`);
shareObj.shareUrl = `${getShareUrl()}year_end_ssr/shareActive?${paramstr}`
this.$rocNative.shareWechat(shareObj);
},
getOneInviteDetails() { //领取记录数据
getOneInviteDetails({
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
if(res.code == '000000') {
this.recordTotal = res.data.total;
if(res.data.list.length>0) {
if(this.pageNo ==1) {
this.inviteList = res.data.list
} else {
this.inviteList = this.inviteList.concat(res.data.list);
}
this.busy = false;
this.noMore = false;
}else {
if(this.pageNo ==1) {
this.noMore = false;
} else {
this.noMore = true;
}
}
}
})
},
getTwoInviteDetails() { //登记记录数据
getTwoInviteDetails({
pageNo: this.pageNo,
pageSize: this.pageSize
}).then(res => {
if(res.code == '000000') {
this.recordTotal = res.data.total
if(res.data.list.length>0) {
if(this.pageNo ==1) {
this.inviteList = res.data.list
} else {
this.inviteList = this.inviteList.concat(res.data.list);
}
this.busy = false;
this.noMore = false;
}else {
if(this.pageNo ==1) {
this.noMore = false;
} else {
this.noMore = true;
}
}
}
})
},
dealJsonData(data) {
if(data) {
return JSON.parse(data)
}
},
changeAwardsName(type) {
if(type == 1) {
return '云鹊豆'
} else if(type == 2) {
return '现金'
} else if(type == 3) {
return '勤奋分'
} else if(type == 4) {
return '短信额度'
}
},
changeRecordType() {
this.recordType = this.recordType==1?2:1;
this.pageNo = 1;
this.inviteList = [];
this.noMore = false;
this.getData()
},
getData() {
if(this.recordType == 1) {
this.getOneInviteDetails();
} else if(this.recordType == 2) {
this.getTwoInviteDetails();
}
},
loadMore() {
this.busy = true;
this.pageNo++
//this.changeRecordType();
this.getData()
},
},
}
</script>
<style scoped lang="less">
@import 'index.less';
</style>
\ No newline at end of file
.person-detail-wrap {
position: relative;
.info-container {
width: 100%;
height: 130px;
background: url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
background-size: cover;
overflow: hidden;
.info {
display: flex;
align-items: center;
padding: 0 15px;
margin-top: 20px;
img {
width: 50px;
height: 50px;
border-radius: 100%;
}
.content {
display: flex;
margin-left: 10px;
align-items: center;
.item {
font-size: 14px;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
}
.line {
display: inline-block;
width: 0.5px;
height: 10px;
background: #fff;
margin: 0 6px;
}
}
}
}
.main-content {
width: 100%;
border-radius: 20px 20px 0px 0px;
position: absolute;
top: 90px;
background: #fff;
.get-container {
padding: 15px;
background: #FFF7F2;
height: 68px;
border-radius: 20px 20px 0px 0px;
.top {
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 18px;
color: #373839;
font-weight: 700;
}
.how-to-get {
color: #676869;
font-weight: 700;
font-size: 12px;
height: 33px;
display: flex;
align-items: center;
img {
width: 6px;
height: 11px;
margin-left: 2px;
}
}
}
.awards-details {
font-size: 14px;
font-weight: 700;
color: #FD663F;
line-height: 20px;
}
}
.detail-list {
padding: 0 15px;
overflow-y: auto;
.item {
display: flex;
align-items: center;
padding: 15px 0 14px 0;
position: relative;
.left {
margin-right: 15px;
img {
width: 50px;
height: 50px;
}
}
.right {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
.r-left {
.detail-name {
color: #373839;
font-size: 16px;
font-weight: 700;
line-height: 16px;
}
.time {
color: #676869;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
}
.r-right {
.award-item {
font-size: 13px;
font-weight: 700;
height: 13px;
margin-bottom: 9px ;
text-align: right;
.num {
color: #FD5A2F;
}
.award-name {
color: #373839;
}
}
.award-item:last-child {
margin-bottom: 0;
}
}
}
}
.item:after {
position: absolute;
content: " ";
left: 0;
bottom: 0;
right: 0;
height: 1PX;
border-bottom: 1PX solid #F0F1F2;
color: #F0F1F2;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.no-more {
height: 62px;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 84px;
height: 1px;
background:#F7F7F7;
}
.text {
color: #BEC2CC;
font-size: 13px;
margin: 0 8px;
}
}
}
.no-data {
margin-top: 112px;
img {
width: 150px;
height: 150px;
display: block;
margin: 0 auto;
}
p {
color: #999999;
font-size: 15px;
line-height: 21px;
margin-top: 5px;
margin-bottom: 30px;
text-align: center;
}
.button {
color: #fff;
font-size: 15px;
font-weight: 700;
width: 180px;
height: 45px;
line-height: 45px;
text-align: center;
background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius: 22.5px;
margin: 0 auto;
}
}
}
}
\ No newline at end of file
<template>
<section class="person-detail-wrap">
<normal-header
:title="title"
:backType="1">
</normal-header>
<div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
<div class="info">
<img :src="avatarImageUrl" alt="">
<div class="content">
<p class="item">
<span class="label">累计排名</span>
<span class="value">{{userRank?userRank.rank:'-'}}</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">累计勤奋分 </span>
<span class="value">{{userRank?userRank.score:'0'}}</span>
</p>
</div>
</div>
</div>
<div class="main-content">
<!--<div class="get-container">
<div class="top">
<div class="title">累计获得奖励</div>
<div class="how-to-get">如何领取<img src="~/assets/img/person-detail/icon-right.png" alt=""></div>
</div>
<div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
</div>-->
<div class="detail-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div class="item" v-for="(item, index) in personDetails" v-if="personDetails.length" :key="index">
<div class="left">
<img :src="detailTaskIcon(item.resourceType)" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">{{item.taskName}}</p>
<p class="time">{{item.finishTime}}</p>
</div>
<div class="r-right">
<div class="award-item" v-for="(item1, index1) in item.timsRewardResp" :key="index1">
<span class="num">+{{item1.rewardQuantity}}</span>
<span class="award-name">{{detailAwardsName(item1.rewardType)}}</span>
</div>
</div>
</div>
</div>
<div class="no-more" v-if="noMore&&personDetails.length>=10">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
<div class="no-data" v-if="!personDetails.length">
<img src="~/assets/img/icon-nodata.png" alt="">
<p>暂无记录,您还没有参加活动</p>
<div class="button" @click="goInActivity">立即参加</div>
</div>
</div>
</section>
</template>
<script>;
import NormalHeader from '@/components/normal-header';
import { getPersonDetails } from '@/service/detailsAndRanking'
export default {
name: 'person-detail',
components: {
NormalHeader
},
data() {
return {
showPop: false,
title: '个人明细',
personDetails: [],
busy: true, //分页参数--start
pageNo: 0,
noMore: false,//分页参数--end
userRank: null,
avatarImageUrl: ''
};
},
computed: {
},
mounted() {
this.pageNo++;
this.getPersonDetails();
},
methods: {
goInActivity() {
this.$router.push('/activityPage')
},
detailTaskIcon(taskType) {
if(taskType == 4) { //smo
return require('../../assets/img/task-icon/smo-icon.png')
} else if(taskType == 1) { //课程
return require('../../assets/img/task-icon/lesson-icon.png')
} else if(taskType == 6) { //打卡
return require('../../assets/img/task-icon/daily-clock-icon.png')
} else if(taskType == 7) { //邀请
return require('../../assets/img/task-icon/invite-icon.png')
} else if(taskType == 0) { //机构
return require('../../assets/img/task-icon/ranking-icon.png')
}
},
detailAwardsName(type) {
//type 1.云鹊豆 2.现金 3.勤奋分 4.短信额度
if(type == 1) {
return '云鹊豆'
} else if(type == 2) {
return '现金'
} else if(type == 3) {
return '勤奋分'
} else if(type == 4) {
return '短信额度'
}
},
getPersonDetails() {
getPersonDetails({
pageNo: this.pageNo,
activityId: this.$route.query.activityId
}).then(res => {
console.log(res)
if(res.code == '000000') {
this.userRank = res.data.userRank;
this.avatarImageUrl = res.data.avatarImageUrl;
if(res.data.personalDetails) {
if(this.pageNo ==1) {
this.personDetails = res.data.personalDetails
if(res.data.hasNextPage) {
this.busy = false;
} else {
this.noMore = true;
}
} else {
this.personDetails = this.personDetails.concat(res.data.personalDetails);
if(res.data.hasNextPage) {
this.busy = false;
} else {
this.noMore = true
}
}
} else {
this.personDetails = []
}
}
})
},
loadMore() {
this.busy = true;
this.pageNo++
//this.changeRecordType();
this.getPersonDetails()
}
},
};
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
.person-ranking-wrap {
position: relative;
.info-container {
width: 100%;
height: 130px;
background: url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
background-size: cover;
overflow: hidden;
.info {
display: flex;
align-items: center;
padding: 0 15px;
margin-top: 20px;
img {
width: 50px;
height: 50px;
border-radius: 100%;
}
.right {
margin-left: 10px;
.content {
display: flex;
align-items: center;
.item {
font-size: 14px;
.label {
color: #fff;
}
.value {
color: #FFDD58;
}
}
.line {
display: inline-block;
width: 0.5px;
height: 10px;
background: #fff;
margin: 0 6px;
}
}
.not-join {
margin-left: 10px;
.main-name {
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 14px;
}
.details {
color: #fff;
font-size: 12px;
line-height: 12px;
margin-top: 8px;
}
}
p.text {
color: #FFFFFF;
font-size: 12px;
line-height: 12px;
margin-top: 8px;
}
}
}
}
.main-content {
width: 100%;
border-radius: 20px 20px 0px 0px;
position: absolute;
top: 90px;
background: #fff;
.description {
height: 40px;
line-height: 40px;
text-align: center;
color: #FD6037;
font-size: 13px;
}
.ranking-title {
display: flex;
align-items: center;
height: 40px;
background: #FFF7F2;
color: #979899;
font-size: 14px;
padding: 0 25px 0 13px;
margin-bottom: 3px;
.marginL {
margin-left: 11px;
}
.marginAuto {
margin-left: auto;
}
}
.ranking-list {
padding: 0 25px;
.item {
display: flex;
align-items: center;
padding: 13.5px 0;
.ranking-icon {
width: 25px;
height: 30px;
}
.icon-num {
width: 25px;
color: #373839;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.doctor-photo {
width: 35px;
height: 35px;
border-radius: 100%;
margin-left: 25px;
}
.doctor-name {
color: #333333;
font-size: 16px;
font-weight: 700;
margin-left: 10px;
width: 130px;
}
.num {
color: #373839;
font-weight: 700;
font-size: 18px;
margin-left: auto;
}
}
}
.no-more {
height: 62px;
display: flex;
justify-content: center;
align-items: center;
.line {
display: inline-block;
width: 84px;
height: 1px;
background:#F7F7F7;
}
.text {
color: #BEC2CC;
font-size: 13px;
margin: 0 8px;
}
}
}
}
\ No newline at end of file
<template>
<section class="person-ranking-wrap">
<ranking-header
:rightBtn="rightBtn"
:headBtn="headBtn"
:activeBtnType="activeBtnType"
@handleBtn="changeRanking"
@handleRightBtn="handleRightBtn">
</ranking-header>
<div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
<div class="info">
<img :src="rankData.avatarImageUrl" alt="">
<div class="right">
<div class="content" v-if="rankData.score">
<p class="item">
<span class="label">{{activeBtnType?'今日':'累计'}}排名</span>
<span class="value">{{rankData.rank}}</span>
</p>
<p class="line"></p>
<p class="item">
<span class="label">{{activeBtnType?'今日':'累计'}}勤奋分 </span>
<span class="value">{{rankData.score}}</span>
</p>
</div>
<div class="not-join" v-else>
<div class="con main-name">{{activeBtnType?'今日您还未参加活动':'您还未参加活动'}}</div>
<div class="con details">赶快参与活动赢每日奖品</div>
</div>
<p class="text" v-if="activeBtnType&&rankData.score">{{rankAwards}}</p>
</div>
</div>
</div>
<div class="main-content">
<div class="description">排行实时刷新,部分原因存在几分钟延迟</div>
<div class="ranking-title">
<span>TOP100</span>
<span class="marginL">用户名称</span>
<span class="marginAuto">{{activeBtnType?'今日':'累计'}}勤奋分</span>
</div>
<div class="ranking-list" :style="{marginBottom: `${50+homeIndicatorHeight}Px`}">
<div class="item" v-for="(item,index) in topRankList" :key="index">
<img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
<p v-else class="icon-num" >{{index+1}}</p>
<img :src="item.avatarImageUrl" alt="" class="doctor-photo">
<p class="doctor-name">{{item.name}}</p>
<p class="num">{{item.score}}</p>
</div>
<div class="no-more" v-if="topRankList.length>=10">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
<footer-button
:btnText="btnText"
:btnType="btnType">
</footer-button>
</div>
</section>
</template>
<script>
import RankingHeader from '@/components/ranking-header';
import FooterButton from '@/components/footer-button';
import { getTodayUserRanking, getAllUserRanking} from '@/service/detailsAndRanking'
import { getFirstAwards } from '@/utils'
export default {
name: 'person-ranking',
components: {
RankingHeader,
FooterButton
},
data() {
return {
showPop: false,
title: '个人明细',
rankData: {},
topRankList: [], //排行榜list
rightBtn: '',
headBtn: {
leftName: '今日排行榜',
rightName: '累计排行榜'
},
activeBtnType: true, //true今日,false累计
btnText: '获得更多勤奋分',
btnType: true,
rankAwards: '',
todayDate: ''
};
},
computed: {
},
mounted() {
this.getData();
},
watch: {
todayDate(val) {
if(Date.parse(new Date(val.replace(/-/g, "/")))<=Date.parse(new Date(('2019-12-16 23:59:59').replace(/-/g, "/")))) {
this.rightBtn = ''
} else {
this.rightBtn = '昨日获奖'
}
}
},
methods: {
changeRanking(val) {
this.activeBtnType = val;
this.getData();
},
handleRightBtn() {
this.$router.push({
path: '/yesterday-prize'
})
},
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')
}
},
getData() {
if(this.activeBtnType) {
this.getTodayRankingList();
} else {
this.getUserRankingList();
}
},
getRankAwards(rankData,firstTime) {
if(rankData.targetRank == 0) {
this.rankAwards = `今日保持第1名,即可获得${getFirstAwards(firstTime)}`;
} else if(rankData.targetRank == 1) {
this.rankAwards = `再获${rankData.targetRequiredScore}分即可上升到第1名并可获得${getFirstAwards(firstTime)}`;
} else if(rankData.targetRank == 3) {
this.rankAwards = `再获${rankData.targetRequiredScore}分即可上升到第3名并可获得欧姆龙血压计`;
} else if(rankData.targetRank == 10) {
this.rankAwards = `再获${rankData.targetRequiredScore}分即可上升到第10名并可获得欧姆龙体温计`;
}
},
getTodayRankingList() {
getTodayUserRanking().then(res => {
if(res.code == '000000') {
this.rankData = res.data;
this.topRankList = res.data.topRankList
this.getRankAwards(this.rankData,res.data.todayDate);
this.todayDate = res.data.todayDate;
if(this.rankData.score) {
this.btnText = '获得更多勤奋分'
} else {
this.btnText = '参与活动得勤奋分'
}
}
})
},
getUserRankingList() {
getAllUserRanking().then(res => {
if(res.code == '000000') {
this.rankData = res.data;
this.topRankList = res.data.topRankList
if(this.rankData.score) {
this.btnText = '获得更多勤奋分'
} else {
this.btnText = '参与活动得勤奋分'
}
}
})
}
},
};
</script>
<style lang="less" scoped>
@import 'index.less';
</style>
......@@ -72,7 +72,6 @@ import { Toast } from 'vant';
import { remind, getRemindStatus, checkHospitalStatus, getCnt, checkToken } from '@/service';
import h5header from '@/components/h5header';
import shareContainer from '@/components/share-container';
import { BASE_URL } from '@/utils/enumerate';
export default {
// head() {
......@@ -157,16 +156,8 @@ export default {
this.scrollHandle();
// 微信分享
this.$picaWxShare({
baseUrl: BASE_URL[process.env.NUXT_ENV_APP],
// baseUrl: 'https://test1-sc.yunqueyi.com', // 非生产环境需要用test和type=15的配置
// type: 15,
authUrl: window.location.href,
isDebug: false,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
authUrl: this.shareObj.shareUrl
},(wx)=>{
const title = this.shareObj.title1;
const desc = this.shareObj.title2;
......
此差异已折叠。
<template>
<div class="wx-share-result">
<section>
<div class="res-wrap">
<img src="../assets/img/resimg0.png">
<h1>{{statusTxt}}</h1>
<h3>登录云鹊医APP立即开始学习</h3>
</div>
<div class="btn-app down-app" @click="downApp(1)">下载APP</div>
<div class="btn-app has-app" @click="tipOpenApp">已有APP</div>
<div class="line"></div>
<div class="more-course">
<header>更多精彩好课推荐</header>
<div class="course-list">
<div class="course-item" @click="goLink(1)">
<div class="course-txt">
<h1>高血压系列课程</h1>
<h3>《高血压的发病机制》等总计4门课程</h3>
</div>
<div class="course-img"><img src="../assets/img/resimg1.png"></div>
</div>
<div class="course-item" @click="goLink(2)">
<div class="course-txt">
<h1>糖尿病系列课程</h1>
<h3>《胰岛素的选择和管理》等总计4门课程</h3>
</div>
<div class="course-img"><img src="../assets/img/resimg2.png"></div>
</div>
<div class="course-item" @click="goLink(3)">
<div class="course-txt">
<h1>中医系列课程</h1>
<h3>《慢性鼻炎的中医治疗》等总计3门课程</h3>
</div>
<div class="course-img"><img src="../assets/img/resimg3.png"></div>
</div>
<div class="course-item" @click="goLink(4)">
<div class="course-txt">
<h1>全科系列课程</h1>
<h3>《胸痛原因待查》等总计3门课程</h3>
</div>
<div class="course-img"><img src="../assets/img/resimg4.png"></div>
</div>
</div>
</div>
</section>
<div v-if="showMask" @click="showMask=false" class="mask-div"><img src="../assets/img/mask.png"></div>
</div>
</template>
<script>
import { wxShare } from '@/configs/wxShare';
export default {
data(){
return {
statusTxt: '',
showMask: false,
}
},
mounted(){
this.statusTxt = (this.$route.query.status.toString()=='true') ? '领取成功' : '您已领取';
document.querySelector('body').setAttribute('style', 'background: "";');
// 微信分享
wxShare.shareUrl = window.location.href;
this.$picaWxShare({
type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
authUrl: wxShare.shareUrl
},(wx)=>{
const title = wxShare.title1;
const desc = wxShare.title2;
const link = window.localStorage.getItem('shareUrl') || window.location.href;
const imgUrl = wxShare.shareImageUrl;
// 分享给朋友
wx.onMenuShareAppMessage({
title,desc,link,imgUrl
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title,desc,link,imgUrl
});
})
},
methods: {
downApp(id){
if(id==1){
this.$sendBuriedData({
component_tag: `310#310001`
});
}else{
this.$sendBuriedData({
component_tag: `310#310002`
});
}
// 延迟跳转以防埋点未发送成功页面就跳转了
setTimeout(()=>{
window.location.href = 'https://android.myapp.com/myapp/detail.htm?apkName=com.picahealth.yunque&ADTAG=mobile';
}, 800);
},
tipOpenApp(){
this.$sendBuriedData({
component_tag: `310#310002`
});
this.showMask = true;
},
goLink(id){
let link = '';
if(id==1){
link = 'https://phome.yunqueyi.com/template_v2/?id=609';
this.$sendBuriedData({
component_tag: `310#310003`
});
}else if(id==2){
link = 'https://phome.yunqueyi.com/template_v2/?id=610';
this.$sendBuriedData({
component_tag: `310#310004`
});
}else if(id==3){
link = 'https://phome.yunqueyi.com/template_v2/?id=611';
this.$sendBuriedData({
component_tag: `310#310005`
});
}else if(id==4){
link = 'https://phome.yunqueyi.com/template_v2/?id=612';
this.$sendBuriedData({
component_tag: `310#310006`
});
}
// 延迟跳转以防埋点未发送成功页面就跳转了
setTimeout(()=>{
window.location.href = link;
}, 800);
}
}
}
</script>
<style lang="less" scoped>
@import '../assets/style/index.less';
</style>
<style lang="less">
@import '../assets/style/revant.less';
</style>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
import Vue from 'vue'
const infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
......@@ -23,7 +23,6 @@ export const JsBridgeOptions = {
'gotoLogin',
'shareWechat',
'showNativeToast',
'dispatchEventByModuleCode',
'appBuryingPointEntrust',
'webLoadSuccess',
'WfileImageCallBack',
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册