提交 0c65831d 编写于 作者: chengxiang.li's avatar chengxiang.li

Merge branch 'dev-stage2-20191125' of...

Merge branch 'dev-stage2-20191125' of http://192.168.110.53/com.pica.cloud.foundation.frontend/year-end-activitiy into dev-stage2-20191125
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
// 微信分享助力活动 // 微信分享助力活动
.wx-share-wrap { .wx-share-wrap {
width: 375px; width: 375px;
height: 601.5px; // height: 601.5px;
button,input{ button,input{
appearance: none; appearance: none;
border: none; border: none;
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
} }
section { section {
width: 375px; width: 375px;
height: 601.5px; // height: 601.5px;
padding-bottom: 27.5px; padding-bottom: 27.5px;
background: url(../img/bgtop.png) no-repeat; background: url(../img/bgtop.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -366,4 +366,108 @@ ...@@ -366,4 +366,108 @@
} }
} }
} }
} }
\ No newline at end of file .wx-share-result{
width: 375px;
// height: 601.5px;
section{
width: 375px;
// height: 601.5px;
padding-top: 40px;
.res-wrap{
img{
width: 70px;
height: 60px;
display: block;
margin: 0 auto;
}
h1{
font-size:20px;
font-weight:700;
color:rgba(55,56,57,1);
line-height:20px;
margin: 20px 0;
text-align: center;
}
h3{
font-size:13px;
line-height:13px;
text-align: center;
margin-bottom: 30px;
color:rgba(151,152,153,1);
}
}
.btn-app{
width: 335px;
height: 40px;
line-height:40px;
border-radius:22.5px;
font-size:16px;
font-weight:700;
text-align: center;
margin: 0 auto;
}
.down-app{
background:linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
color:rgba(255,255,255,1);
}
.has-app{
margin-top: 12px;
margin-bottom: 40px;
border:1px solid rgba(151,152,153,1);
color:rgba(103,104,105,1);
}
.line{
width: 375px;
height: 5px;
background:rgba(248,249,250,1);
}
.more-course{
padding: 30px 15px;
header{
font-size:18px;
font-weight:700;
color:rgba(51,51,51,1);
line-height:18px;
}
.course-list{
width: 345px;
.course-item{
width: 345px;
margin-top: 20px;
display: flex;
justify-content: space-between;
div{
h1{
font-size:16px;
font-weight:700;
color:rgba(55,56,57,1);
line-height:16px;
}
h3{
font-size:13px;
color:rgba(151,152,153,1);
line-height:13px;
}
}
.course-txt{
width: 240px;
border-bottom: .5px solid rgba(240,241,242,1);
h3{
margin-top: 12px;
}
}
.course-img{
width: 90px;
height: 60px;
img{
width: 90px;
height: 60px;
display: block;
}
}
}
}
}
}
}
<template>
<section class="footer-btn-wrap">
<div class="footer-btn">
<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 1
}
}
},
methods: {
handlerMethod() {
if(this.btnType) {
this.$router.push('/in-activity')
} else {
this.$emit('sureBtn')
}
}
}
}
</script>
<style lang="less" scoped>
.footer-btn-wrap {
.footer-btn {
width: 100%;
height: 40px;
padding: 5px 0;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
background: #fff;
.btn {
width: 345px;
height: 40px;
margin: 0 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
...@@ -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;
......
...@@ -52,6 +52,10 @@ module.exports = { ...@@ -52,6 +52,10 @@ module.exports = {
src: '~/plugins/vueComponent', src: '~/plugins/vueComponent',
ssr: false ssr: false
}, },
{
src: '~plugins/vue-infinite-scroll',
ssr: false
}
], ],
/* /*
** Nuxt.js modules ** Nuxt.js modules
......
此差异已折叠。
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"vant": "^2.0.9", "vant": "^2.0.9",
"vconsole": "^3.3.4", "vconsole": "^3.3.4",
"web-buried-point": "^2.0.0" "vue-infinite-scroll": "^2.0.2",
"web-buried-point": "^2.1.0"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/axios": "^5.5.4", "@nuxtjs/axios": "^5.5.4",
......
...@@ -57,6 +57,21 @@ ...@@ -57,6 +57,21 @@
margin: 0 6px; 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 { .main-content {
...@@ -144,25 +159,5 @@ ...@@ -144,25 +159,5 @@
} }
} }
} }
.footer-btn {
width: 100%;
height: 40px;
padding: 5px 0;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
.btn {
width: 345px;
height: 40px;
margin: 0 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;
}
}
} }
} }
\ No newline at end of file
<template> <template>
<section class="hospital-ranking-wrap"> <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-container" :style="{ marginTop: `${44+barHeight}Px`}">
<!--<div class="info info-hospital"> <div class="info info-hospital" v-if="activeBtnType">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt=""> <img src="~/assets/img/hospital-ranking/icon-hospital.png" alt="">
<div class="content"> <div class="content" v-if="hospitalRanking.score">
<div class="con main-name">高新区卫生院</div> <div class="con main-name">{{hospitalRanking.name}}</div>
<div class="con details"> <div class="con details">
<p class="item"> <p class="item">
<span class="label">累计排名</span> <span class="label">累计排名</span>
<span class="value">105</span> <span class="value">{{hospitalRanking.rank}}</span>
</p> </p>
<p class="line"></p> <p class="line"></p>
<p class="item"> <p class="item">
<span class="label">累计勤奋分 </span> <span class="label">累计勤奋分 </span>
<span class="value">105</span> <span class="value">{{hospitalRanking.score}}</span>
</p> </p>
</div> </div>
</div> </div>
</div>--> <div class="not-join" v-else>
<div class="info info-doctor"> <div class="con main-name">您还未参加活动</div>
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt=""> <div class="con details">赶快参与活动赢每日奖品</div>
<div class="content"> </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"> <div class="con details details-d">
<p class="item"> <p class="item">
<span class="label">累计排名</span> <span class="label">累计排名</span>
<span class="value">105</span> <span class="value">{{contributionRanking.rank}}</span>
</p> </p>
<p class="line"></p> <p class="line"></p>
<p class="item"> <p class="item">
<span class="label">累计勤奋分 </span> <span class="label">累计勤奋分 </span>
<span class="value">105</span> <span class="value">{{contributionRanking.score}}</span>
</p> </p>
</div> </div>
<div class="con main1-name">高新区卫生院</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>
</div> </div>
<div class="main-content"> <div class="main-content">
<!--<div class="description description-h"><span>星火榜</span>排行实时刷新,部分原因存在几分钟延迟</div>--> <div class="description description-h" v-if="activeBtnType"><span>{{dealRankName(hospitalRanking.hospitalType)}}</span>排行实时刷新,部分原因存在几分钟延迟</div>
<div class="description description-d">排行实时刷新,部分原因存在几分钟延迟</div> <div class="description description-d" v-else>排行实时刷新,部分原因存在几分钟延迟</div>
<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">机构勤奋分</span>-->
<span class="marginL">机构成员</span> <span class="marginL">{{activeBtnType?'机构名称':'机构成员'}}</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-if="activeBtnType" v-for="(itemH,index) in hospitalRanking.topRankList">
<img src="~/assets/img/person-ranking/icon-silver.png" alt="" class="ranking-icon"> <img v-if="index<=2" :src="dealRankIcon(index)" 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 v-else class="icon-num" >{{index+1}}</p>
<p class="hospital-name">这里是一个十三字的机构名字</p> <p class="hospital-name">{{itemH.name}}</p>
<p class="num">1053</p> <p class="num">{{itemH.score}}</p>
</div>--> </div>
<div class="item"> <div class="item" v-if="!activeBtnType" v-for="(itemD,index) in contributionRanking.topRankList">
<img src="~/assets/img/person-ranking/icon-silver.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="itemD.avatarImageUrl" alt="" class="doctor-photo">
<p class="num">1053</p> <p class="doctor-name">{{itemD.name}}</p>
<p class="num">{{itemD.score}}</p>
</div> </div>
</div> </div>
<div class="footer-btn"> <footer-button
<div class="btn">助力机构 创造佳绩</div> :btnText="btnText"
</div> :btnType="btnType">
</footer-button>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import RankingHeader from '@/components/ranking-header' import RankingHeader from '@/components/ranking-header';
import FooterButton from '@/components/footer-button';
export default { export default {
name: 'hospital-ranking', name: 'hospital-ranking',
components: { components: {
RankingHeader RankingHeader,
FooterButton
}, },
data() { data() {
return { return {
...@@ -81,15 +97,125 @@ ...@@ -81,15 +97,125 @@
title: '个人明细', title: '个人明细',
barHeight: 0, barHeight: 0,
barColor: '#fff', barColor: '#fff',
headBtn: {
leftName: '机构排行榜',
rightName: '人员贡献榜'
},
activeBtnType: true, //true机构,false人员
hospitalRanking: {},
contributionRanking: {},
btnText: '助力机构 创造佳绩',
btnType: true
}; };
}, },
computed: { computed: {
}, },
mounted() { 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> </script>
......
.invite-details-wrap { .invite-details-wrap {
.main-container { .main-container {
overflow: hidden; // overflow: hidden;
.invite-explain { .invite-explain {
padding: 0 15px; padding: 0 15px;
margin: 20px 0 30px 0; margin: 20px 0 30px 0;
...@@ -105,7 +105,11 @@ ...@@ -105,7 +105,11 @@
background: #F8F9FA; background: #F8F9FA;
} }
.record-details { .record-details {
width: 100%;
background: #fff;
.tab-nav { .tab-nav {
width: 100%;
background: #fff;
height: 52px; height: 52px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -136,58 +140,85 @@ ...@@ -136,58 +140,85 @@
.right-item { .right-item {
margin-right: 82.5px; margin-right: 82.5px;
} }
.activeItem {
color: #373839;
font-weight: 700;
}
} }
.record-list { .record-list {
padding: 15px; padding: 15px;
margin-bottom: 50px;
.sum { .sum {
color: #676869; color: #676869;
font-size: 14px; font-size: 14px;
} }
.record-item { .loadMore {
padding: 20px 0; overflow-y: auto;
display: flex; .record-item {
align-items: center; padding: 20px 0;
.person-photo { display: flex;
width: 35px; align-items: center;
height: 35px; .person-photo {
border-radius: 100%; width: 35px;
} height: 35px;
.person-info { border-radius: 100%;
margin-left: 15px;
.phone {
color: #373839;
font-size: 16px;
line-height: 16px;
} }
.time { .person-info {
color: #979899; margin-left: 15px;
font-size: 13px; .phone {
line-height: 13px; color: #373839;
margin-top: 8px; font-size: 16px;
line-height: 16px;
}
.time {
color: #979899;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
} }
} .awards {
.awards { margin-left: auto;
margin-left: auto; .item {
.item { font-size: 13px;
font-size: 13px; font-weight: 700;
font-weight: 700; height: 13px;
height: 13px; margin-bottom: 9px;
margin-bottom: 9px; .num {
.num { color: #FD5A2F;
color: #FD5A2F; }
.award-name {
color: #373839;
}
} }
.award-name { .item:last-child {
color: #373839; margin-bottom: 0;
} }
} }
.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 { .no-data {
margin-bottom: 50px;
img { img {
width: 150px; width: 150px;
height: 150px; height: 150px;
...@@ -207,25 +238,5 @@ ...@@ -207,25 +238,5 @@
width: 300px; width: 300px;
} }
} }
.footer-btn {
width: 100%;
height: 40px;
padding: 5px 0;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
.btn {
width: 345px;
height: 40px;
margin: 0 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;
}
}
} }
} }
\ No newline at end of file
...@@ -41,54 +41,63 @@ ...@@ -41,54 +41,63 @@
<div class="gray-line"></div> <div class="gray-line"></div>
<div class="record-details"> <div class="record-details">
<div class="tab-nav"> <div class="tab-nav">
<div class="item left-item"> <div class="item left-item" :class="{activeItem:recordType==1}" @click="changeRecordType">
领取记录 领取记录
<p class="active-line"></p> <p class="active-line" v-if="recordType==1"></p>
</div> </div>
<div class="item right-item"> <div class="item right-item" :class="{activeItem:recordType==2}" @click="changeRecordType">
登录记录 登录记录
<p class="active-line"></p> <p class="active-line" v-if="recordType==2"></p>
</div> </div>
</div> </div>
<!-- <div class="record-list"> <div class="record-list" v-if="inviteList.length">
<p class="sum">共10人</p> <p class="sum">{{recordTotal}}</p>
<div class="record-item"> <div class="loadMore" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy"
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="person-photo"> infinite-scroll-distance="10">
<div class="person-info"> <div class="record-item" v-if="inviteList.length" v-for="item in inviteList">
<p class="phone">135****3456</p> <img :src="item.avatarImageUrl" alt="" class="person-photo">
<p class="time">2019.12.16</p> <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 in dealJsonData(item.rewardJsonInfo)">
<span class="num">+{{item1.rewardQuantity}}</span>
<span class="award-name">{{changeAwardsName(item1.rewardType)}}</span>
</p>
</div>
</div> </div>
<div class="awards"> <div class="no-more" v-if="noMore&&inviteList.length">
<p class="item"> <span class="line"></span>
<span class="num">+5</span> <span class="text">到底啦</span>
<span class="award-name">勤奋分</span> <span class="line"></span>
</p>
<p class="item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</p>
</div> </div>
</div> </div>
</div>-->
<div class="no-data">
<img src="~/assets/img/invite-details/icon-nodata.png" alt="">
<!-- <p>提醒您的医生好友领取课程您将获得奖励哦!</p>-->
<p class="text-get">提醒您的医生好友领取课程后登录云鹊医APP您将再获得奖励哦!</p>
</div> </div>
<div class="footer-btn"> <div class="no-data" v-if="!inviteList.length">
<div class="btn">去邀请</div> <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> </div>
<footer-button
:btnText="btnText"
:btnType="btnType">
</footer-button>
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import NormalHeader from '@/components/normal-header' import NormalHeader from '@/components/normal-header';
import FooterButton from '@/components/footer-button';
import { getOneInviteDetails,getTwoInviteDetails } from '@/service/detailsAndRanking';
export default { export default {
name: "index", name: "index",
components: { components: {
NormalHeader NormalHeader,
FooterButton,
}, },
data() { data() {
return { return {
...@@ -96,12 +105,135 @@ ...@@ -96,12 +105,135 @@
title: '邀请明细', title: '邀请明细',
barHeight: 0, barHeight: 0,
barColor: '#fff', barColor: '#fff',
inviteList: [],
recordTotal: 0,
recordType: 1,
busy: true, //分页参数--start
pageNo: 0,
pageSize: 10,
noMore: false,//分页参数--end
btnText: '去邀请',
btnType: true
}; };
}, },
mounted() { mounted() {
this.pageNo++
this.getOneInviteDetails();
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}px;`);
} else {
console.log('sdd')
tabNab.removeAttribute('style');
}
});
},
methods: {
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()
},
}, },
methods: {},
} }
</script> </script>
......
...@@ -118,7 +118,8 @@ ...@@ -118,7 +118,8 @@
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
height: 13px; height: 13px;
margin-bottom: 9px; margin-bottom: 9px ;
text-align: right;
.num { .num {
color: #FD5A2F; color: #FD5A2F;
} }
...@@ -148,22 +149,51 @@ ...@@ -148,22 +149,51 @@
-ms-transform: scaleY(0.5); -ms-transform: scaleY(0.5);
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-more { .no-data {
height: 62px; margin-top: 112px;
display: flex; img {
justify-content: center; width: 150px;
align-items: center; height: 150px;
.line { display: block;
display: inline-block; margin: 0 auto;
width: 84px; }
height: 1px; p {
background:#F7F7F7; color: #999999;
font-size: 15px;
line-height: 21px;
margin-top: 5px;
margin-bottom: 30px;
text-align: center;
} }
.text { .button {
color: #BEC2CC; color: #fff;
font-size: 13px; font-size: 15px;
margin: 0 8px; 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;
} }
} }
} }
......
...@@ -12,12 +12,12 @@ ...@@ -12,12 +12,12 @@
<div class="content"> <div class="content">
<p class="item"> <p class="item">
<span class="label">累计排名</span> <span class="label">累计排名</span>
<span class="value">105</span> <span class="value">{{userRank?userRank.rank:'-'}}</span>
</p> </p>
<p class="line"></p> <p class="line"></p>
<p class="item"> <p class="item">
<span class="label">累计勤奋分 </span> <span class="label">累计勤奋分 </span>
<span class="value">105</span> <span class="value">{{userRank?userRank.score:'0'}}</span>
</p> </p>
</div> </div>
</div> </div>
...@@ -30,103 +30,42 @@ ...@@ -30,103 +30,42 @@
</div> </div>
<div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div> <div class="awards-details">血压计 1 支/温度计 1 支/小米电视4C 2 台/米家洗衣机 1 台/米家冰箱 2 台/华为荣耀Play3 2 部</div>
</div>--> </div>-->
<div class="detail-list"> <div class="detail-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div class="item"> <div class="item" v-for="item in personDetails">
<div class="left">
<img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">每日打卡</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left"> <div class="left">
<img src="~/assets/img/person-detail/icon-invite.png" alt=""> <img :src="detailTaskIcon(item.taskName)" alt="">
</div> </div>
<div class="right"> <div class="right">
<div class="r-left"> <div class="r-left">
<p class="detail-name">邀请好友</p> <p class="detail-name">{{item.taskName}}</p>
<p class="time">2019.12.15</p> <p class="time">{{item.finishTime}}</p>
</div> </div>
<div class="r-right"> <div class="r-right">
<div class="award-item"> <div class="award-item" v-for="item1 in item.timsRewardResp">
<span class="num">+5</span> <span class="num">+{{item1.rewardQuantity}}</span>
<span class="award-name">勤奋分</span> <span class="award-name">{{detailAwardsName(item1.rewardType)}}</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="no-more" v-if="noMore">
<div class="left"> <span class="line"></span>
<img src="~/assets/img/person-detail/icon-study.png" alt=""> <span class="text">到底啦</span>
</div> <span class="line"></span>
<div class="right">
<div class="r-left">
<p class="detail-name">课程学习</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="left">
<img src="~/assets/img/person-detail/icon-clock-in.png" alt="">
</div>
<div class="right">
<div class="r-left">
<p class="detail-name">每日打卡</p>
<p class="time">2019.12.15</p>
</div>
<div class="r-right">
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
<div class="award-item">
<span class="num">+5</span>
<span class="award-name">勤奋分</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="no-more"> <div class="no-data" v-if="!personDetails.length">
<span class="line"></span> <img src="~/assets/img/icon-nodata.png" alt="">
<span class="text">到底啦</span> <p>暂无记录,您还没有参加活动</p>
<span class="line"></span> <div class="button" @click="goInActivity">立即参加</div>
</div> </div>
</div> </div>
</section> </section>
</template> </template>
<script> <script>;
import NormalHeader from '@/components/normal-header' import NormalHeader from '@/components/normal-header';
import { getPersonDetails } from '@/service/detailsAndRanking'
export default { export default {
name: 'person-detail', name: 'person-detail',
components: { components: {
...@@ -138,15 +77,81 @@ ...@@ -138,15 +77,81 @@
title: '个人明细', title: '个人明细',
barHeight: 0, barHeight: 0,
barColor: '#fff', barColor: '#fff',
personDetails: [],
busy: true, //分页参数--start
pageNo: 0,
noMore: false,//分页参数--end
userRank: null
}; };
}, },
computed: { computed: {
}, },
mounted() { mounted() {
this.pageNo++;
this.getPersonDetails();
},
methods: {
goInActivity() {
this.$router.push('/in-activity')
},
detailTaskIcon(taskName) {
if(taskName == '打卡') {
return require('../../assets/img/person-detail/icon-invite.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: 2
}).then(res => {
console.log(res)
if(res.code == '000000') {
this.userRank = res.data.userRank
if(res.data.personDetails) {
if(this.pageNo ==1) {
this.personDetails = res.data.personalDetails
if(res.data.hasNextPage) {
this.noMore = true;
} else {
this.busy = false;
}
} else {
if(res.data.hasNextPage) {
this.personDetails = this.personDetails.concat(res.data.personalDetails);
this.busy = false;
} else {
this.noMore = true
}
}
} else {
this.personDetails = []
}
}
})
},
loadMore() {
this.busy = true;
this.pageNo++
//this.changeRecordType();
this.getPersonDetails()
}
}, },
methods: {},
}; };
</script> </script>
......
...@@ -16,27 +16,51 @@ ...@@ -16,27 +16,51 @@
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 {
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; color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 14px;
} }
.value { .details {
color: #FFDD58; color: #fff;
font-size: 12px;
line-height: 12px;
margin-top: 8px;
} }
} }
.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 {
...@@ -106,25 +130,5 @@ ...@@ -106,25 +130,5 @@
} }
} }
} }
.footer-btn {
width: 100%;
height: 40px;
padding: 5px 0;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
.btn {
width: 345px;
height: 40px;
margin: 0 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;
}
}
} }
} }
\ No newline at end of file
<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" v-if="rankData.score">
<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>
<div class="not-join" v-else>
<div class="con main-name">您还未参加活动</div>
<div class="con details">赶快参与活动赢每日奖品</div>
</div>
<p class="text" v-if="activeBtnType&&rankData.score">再获得{{rankData.targetRequiredScore}}分即可上升到前{{rankData.targetRank}}名并可获得iPhone手机</p>
</div> </div>
</div> </div>
</div> </div>
...@@ -22,47 +35,33 @@ ...@@ -22,47 +35,33 @@
<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"> <footer-button
<div class="btn">获得更多勤奋分</div> :btnText="btnText"
</div> :btnType="btnType">
</footer-button>
</div> </div>
</section> </section>
</template> </template>
<script> <script>
import RankingHeader from '@/components/ranking-header' import RankingHeader from '@/components/ranking-header';
import FooterButton from '@/components/footer-button';
export default { export default {
name: 'person-ranking', name: 'person-ranking',
components: { components: {
RankingHeader RankingHeader,
FooterButton
}, },
data() { data() {
return { return {
...@@ -70,15 +69,84 @@ ...@@ -70,15 +69,84 @@
title: '个人明细', title: '个人明细',
barHeight: 0, barHeight: 0,
barColor: '#fff', barColor: '#fff',
rankData: {},
rightBtn: '昨日获奖',
headBtn: {
leftName: '今日排行榜',
rightName: '累计排行榜'
},
activeBtnType: true, //true今日,false累计
btnText: '获得更多勤奋分',
btnType: true
}; };
}, },
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/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')
}
},
getRankingList() {
this.rankData = {
name: '戴医生',
hospital: '测试医院',
avatarImageUrl: 'https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg',
rank: 33,
score: 999,
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
}
],
}
if(this.rankData.score) {
this.btnText = '获得更多勤奋分'
} else {
this.btnText = '参与活动得勤奋分'
}
}
}, },
methods: {},
}; };
</script> </script>
......
...@@ -59,6 +59,7 @@ ...@@ -59,6 +59,7 @@
data(){ data(){
return { return {
notSend: true, notSend: true,
regMobile: /^1[3456789]\d{9}$/,
mobilePhone: '', mobilePhone: '',
authCode: '', // 短信验证码 authCode: '', // 短信验证码
flag: 0, flag: 0,
...@@ -66,26 +67,50 @@ ...@@ -66,26 +67,50 @@
captchaToken: '', // captchaToken captchaToken: '', // captchaToken
captchaAnswer: '', // 输入的图形验证码 captchaAnswer: '', // 输入的图形验证码
time: TIMEALL, time: TIMEALL,
btnMsg: '点击获取' btnMsg: '点击获取',
isReq: false
} }
}, },
async asyncData({ query }){ async asyncData({ query }){
const { id, taskId, activityId } = query; const { id, taskId, activityId } = query;
let avatarImageUrl, name, mobilePhone; let avatarImageUrl = '', name = '', captchaImg = '', captchaToken = '';
const res = await getInviteInfo(id); const res = await getInviteInfo(id);
if(res.code=='000000'){ if(res.code=='000000'){
const data = res.data; const data = res.data;
avatarImageUrl = data.avatarImageUrl; avatarImageUrl = data.avatarImageUrl;
name = data.name ? data.name : data.mobilePhone; name = data.name ? data.name : data.mobilePhone;
} }
const resCapt = await getCaptchaGet();
if(resCapt.code==='000000'){
captchaImg = `data:image/png;base64,${resCapt.data.content}`;
captchaToken = resCapt.data.token;
}
return { return {
avatarImageUrl, name, id, taskId, activityId avatarImageUrl, name, id, taskId, activityId, captchaImg, captchaToken
} }
}, },
mounted(){ mounted(){
this.getCaptcha(); document.querySelector('body').setAttribute('style', 'background: #FE9A51;');
this.checkCache();
}, },
methods: { methods: {
// 校验用户浏览器是否有登录缓存,此缓存为纯前端缓存,与token之类的无关
checkCache(){
const mobilePhoneCache = window.localStorage.getItem('mobilePhone');
const statusCache = window.localStorage.getItem('status');
let status = 'false';
// 如果有缓存则是第二次进入,就要显示已领取,也就是false
if(mobilePhoneCache && statusCache){
window.localStorage.setItem('status', status);
this.$router.push({
name: 'shareResult',
query: {
status
}
})
}
// 如果没有缓存,则停留当前页面
},
// 点击刷新验证码 // 点击刷新验证码
getCaptcha(){ getCaptcha(){
getCaptchaGet().then(res=>{ getCaptchaGet().then(res=>{
...@@ -99,15 +124,28 @@ ...@@ -99,15 +124,28 @@
}, },
// 领取课程事件 // 领取课程事件
getCourse(){ getCourse(){
if(this.mobilePhone=='' || this.mobilePhone.length!=11){ if(this.isReq){
this.$toast('您的登录操作过于频繁,请稍后再试');
return;
}
const { regMobile, mobilePhone, authCode, id, taskId, activityId } = this;
const mobileTrue = regMobile.test(mobilePhone);
if(!mobileTrue){
this.$toast('请输入正确的手机号'); this.$toast('请输入正确的手机号');
return; return;
}
// 校验图形验证码
if(this.captchaAnswer==''){
this.$toast('请输入图形验证码');
return;
} }
if(this.authCode==''){ if(this.authCode==''){
this.$toast('请输入短信验证码'); this.$toast('请输入短信验证码');
return; return;
} }
const { mobilePhone, authCode, id, taskId, activityId } = this;
this.isReq = true;
// 调用领取课程接口 // 调用领取课程接口
getCourseById({ getCourseById({
mobile: mobilePhone, mobile: mobilePhone,
...@@ -116,8 +154,13 @@ ...@@ -116,8 +154,13 @@
taskId, taskId,
activityId activityId
}).then(res=>{ }).then(res=>{
this.isReq = false;
// res.data true 登记成功 、 false 登记失败
if(res.code=='000000'){ if(res.code=='000000'){
// res.data true 登记成功 、 false 登记失败 // 将手机号和状态存入浏览器缓存,用户再次进来就能直接进入领取结果页面
// 注意,如果清除微信或者浏览器缓存,则将停留在当前这个页面并且再次填写手机号以做登录
window.localStorage.setItem('mobilePhone', mobilePhone);
window.localStorage.setItem('status', res.data);
this.$router.push({ this.$router.push({
name: 'shareResult', name: 'shareResult',
query: { query: {
...@@ -131,7 +174,9 @@ ...@@ -131,7 +174,9 @@
}, },
// 发送获取短信验证码 // 发送获取短信验证码
sendSms(){ sendSms(){
if(this.mobilePhone=='' || this.mobilePhone.length!=11){ const { regMobile, mobilePhone, flag, captchaToken, captchaAnswer } = this;
const mobileTrue = regMobile.test(mobilePhone);
if(!mobileTrue){
this.$toast('请输入正确的手机号'); this.$toast('请输入正确的手机号');
return; return;
} }
...@@ -141,9 +186,6 @@ ...@@ -141,9 +186,6 @@
return; return;
} }
// this.notSend = false;
const { mobilePhone, flag, captchaToken, captchaAnswer } = this;
getAuthCode({mobilePhone, flag, captchaToken, captchaAnswer}).then(res=>{ getAuthCode({mobilePhone, flag, captchaToken, captchaAnswer}).then(res=>{
// 发送成功 // 发送成功
if(res.code=='000000'){ if(res.code=='000000'){
...@@ -170,4 +212,4 @@ ...@@ -170,4 +212,4 @@
</style> </style>
<style lang="less"> <style lang="less">
@import '../assets/style/revant.less'; @import '../assets/style/revant.less';
</style> </style>
\ No newline at end of file
<template> <template>
<div> <div class="wx-share-result">
<h1>result-share</h1> <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">下载APP</div>
<div class="btn-app has-app" @click="downApp">已有APP</div>
<div class="line"></div>
<div class="more-course">
<header>更多精彩好课推荐</header>
<div class="course-list">
<div class="course-item">
<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">
<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">
<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">
<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> </div>
</template> </template>
<script> <script>
export default { export default {
asyncData({ query }){ asyncData({ query }){
console.log(query)
const { status } = query; // 上个页面传递过来领取结果, false 为已领取, true 为领取成功 const { status } = query; // 上个页面传递过来领取结果, false 为已领取, true 为领取成功
const statusTxt = (status=='true') ? '领取成功' : '您已领取';
return {
statusTxt
}
},
mounted(){
document.querySelector('body').setAttribute('style', 'background: "";');
},
methods: {
downApp(){
window.location.href = 'https://android.myapp.com/myapp/detail.htm?apkName=com.picahealth.yunque&ADTAG=mobile';
}
} }
} }
</script> </script>
\ No newline at end of file
<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
...@@ -9,6 +9,13 @@ ...@@ -9,6 +9,13 @@
width: 25px; width: 25px;
height: 30px; height: 30px;
} }
.icon-num {
width: 25px;
color: #373839;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.item-right { .item-right {
flex: 1; flex: 1;
display: flex; display: flex;
...@@ -73,24 +80,4 @@ ...@@ -73,24 +80,4 @@
} }
} }
.footer-btn {
width: 100%;
height: 40px;
padding: 5px 0;
box-shadow:0px -1px 0px 0px rgba(237,237,237,1);
position: fixed;
bottom: 0;
.btn {
width: 345px;
height: 40px;
margin: 0 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;
}
}
} }
\ No newline at end of file
...@@ -8,30 +8,34 @@ ...@@ -8,30 +8,34 @@
:backType="1"> :backType="1">
</normal-header> </normal-header>
<div class="prize-list" :style="{ marginTop: `${44+barHeight}Px`}"> <div class="prize-list" :style="{ marginTop: `${44+barHeight}Px`}">
<div class="item"> <div class="item" v-for="(item, index) in rewardsList">
<img src="~/assets/img/person-ranking/icon-copper.png" alt="" class="ranking-icon"> <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
<p v-else class="icon-num" >{{index+1}}</p>
<div class="item-right"> <div class="item-right">
<img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo"> <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="" class="doctor-photo">
<div class="doctor-info"> <div class="doctor-info">
<p class="name">张医生</p> <p class="name">{{item.name}}</p>
<p class="grade">昨日勤奋分:<span>1234</span></p> <p class="grade">昨日勤奋分:<span>{{item.score}}</span></p>
</div> </div>
<p class="awards">小米电视机1台</p> <p class="awards">{{index==0?'小米电视机1台':'温度计'}}</p>
</div> </div>
</div> </div>
</div> </div>
<div class="footer-btn"> <footer-button
<div class="btn">今日我要拿奖</div> :btnText="btnText"
</div> :btnType="btnType">
</footer-button>
</section> </section>
</template> </template>
<script> <script>
import NormalHeader from '@/components/normal-header' import NormalHeader from '@/components/normal-header';
import FooterButton from '@/components/footer-button';
export default { export default {
name: "index", name: "index",
components: { components: {
NormalHeader NormalHeader,
FooterButton
}, },
data() { data() {
return { return {
...@@ -39,13 +43,54 @@ ...@@ -39,13 +43,54 @@
title: '昨日获奖名单', title: '昨日获奖名单',
barHeight: 0, barHeight: 0,
barColor: '#fff', barColor: '#fff',
rightText: '如何领奖' rightText: '如何领奖',
rewardsList: [],
btnText: '今日我要拿奖',
btnType: true
}; };
}, },
mounted() { mounted() {
this.getRewardList();
},
methods: {
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')
}
},
getRewardList() {
this.rewardsList = [
{
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>
......
import Vue from 'vue'
const infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)
// 明细页排名也接口
import request from './api';
// 获取领取记录列表
export const getOneInviteDetails = (params) => {
return request({
url: `campaign/inviteDetail/oneList`,
params: params,
withCredentials: true
})
}// 获取领取记录列表
export const getTwoInviteDetails = (params) => {
return request({
url: `campaign/inviteDetail/twoList`,
params: params,
withCredentials: true
})
}
// 获取个人明细列表
export const getPersonDetails = (params) => {
return request({
url: `/campaign/tims/personalDetails`,
params: params,
withCredentials: true
})
}
\ No newline at end of file
...@@ -73,7 +73,7 @@ export const getCourseById = ({ mobile, authCode, id, taskId, activityId }) => { ...@@ -73,7 +73,7 @@ export const getCourseById = ({ mobile, authCode, id, taskId, activityId }) => {
} }
// 获取图形验证码 // 获取图形验证码
export const getCaptchaGet = () => { export const getCaptchaGet = async () => {
return request({ return request({
url: `account/account/captcha`, url: `account/account/captcha`,
method: 'get' method: 'get'
...@@ -90,3 +90,5 @@ export const getAuthCode = ({ mobilePhone, flag, captchaToken, captchaAnswer }) ...@@ -90,3 +90,5 @@ export const getAuthCode = ({ mobilePhone, flag, captchaToken, captchaAnswer })
}, },
}) })
} }
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册