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

Merge branch 'dev-stage3-20191212' into 'release'

Dev stage3 20191212

reviewCoder:张平

See merge request !2
.awards-list-wrap {
background: #D63233;
overflow: hidden;
.top-container {
width: 100%;
height: 312.5px;
background: url("../../img/stage3/top-bg.png") no-repeat;
background-size: cover;
position: relative;
img {
width: 69px;
height: 25px;
position: absolute;
right: 0;
top: 18px;
}
}
.person-details {
width: 325px;
margin: 0 auto;
background: linear-gradient(180deg,rgba(251,89,41,1) 0%,rgba(255,215,189,1) 100%);
border-radius: 0px 0px 12.5px 12.5px;
padding: 15px;
.info {
height: 50px;
display: flex;
align-items: center;
img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
}
.right {
.name {
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 18px;
}
.hospital {
color: #fff;
font-size: 14px;
line-height: 18px;
margin-top: 5px;
}
}
}
.self-grade {
display: flex;
justify-content: space-between;
margin-top: 15px;
div {
width: 145px;
height: 101px;
background: linear-gradient(180deg,rgba(194,36,36,1) 0%,rgba(80,8,85,1) 100%);
border-radius: 8px;
padding-top: 15px;
padding-left: 15px;
.title {
font-size: 14px;
color: #FFED59;
line-height: 14px;
}
.rank {
font-size: 24px;
color: #FFED59;
line-height: 24px;
font-weight: 700;
margin-top: 8px;
margin-bottom: 20px;
}
.score {
color: #FFE1D8;
font-size: 13px;
line-height: 13px;
font-weight: 700;
}
}
}
.my-grade {
width: 312px;
height: 49px;
background: linear-gradient(360deg,rgba(255,134,32,1) 0%,rgba(255,248,111,1) 100%);
box-shadow: 0px 2.5px 0px 0px rgba(222,83,15,1);
border-radius: 32.5px;
margin: 15px auto 0 auto;
color: #B42F00;
font-size: 21.5px;
font-weight: 700;
text-align: center;
line-height: 49px;
}
.bottom {
height: 13px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 15px;
.text {
color: #ED5A2C;
font-size: 13px;
line-height: 13px;
font-weight: 700;
}
.line {
width: 1px;
height: 10px;
background: #ED5A2C;;
margin: 0 6px;
}
}
}
/*未登录*/
.not-login {
.description {
color: #FFFFFF;
font-size: 18px;
font-weight: 700;
line-height: 18px;
margin-top: 10px;
margin-bottom: 20px;
text-align: center;
}
}
/*个人机构均为参加*/
.not-join {
.description {
width: 325px;
height: 89px;
line-height: 89px;
background: linear-gradient(180deg,rgba(194,36,36,1) 0%,rgba(80,8,85,1) 100%);
border-radius: 8px;
color: #FFED59;
font-size: 18px;
font-weight: 700;
margin-top: 5px;
margin-bottom: 20px;
text-align: center;
}
}
/*微信中打开*/
.in-wx {
width: 100%;
padding: 0;
height: 100px;
background: url("../../img/stage3/orange-bg4.png") no-repeat;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
.wx-item {
width: 177px;
p.num {
color: #FFED59;
font-size: 24px;
font-weight: 700;
text-align: center;
}
p.text {
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
text-align: center;
}
}
.line {
background: #ED5A2C;
width: 1px;
height: 40.5px;
}
}
.main-container {
width: 355px;
margin: 67.5px auto 0 auto;
position: relative;
.top-img {
width: 316.5px;
height: 48px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: -32px
}
.award-container {
width: 330px;
padding: 35px 12.5px 22.5px 12.5px;
background: #FF5E2C;
border-radius: 12.5px;
.item {
width: 100%;
border-radius: 10px;
background: #fff;
box-shadow:0px 2px 0px 0px rgba(247,187,27,1);
margin-bottom: 15px;
.top {
width: 100%;
height: 36px;
background: #FFD657;
border-radius: 10px 10px 0px 0px;
display: flex;
align-items: center;
justify-content: space-between;
div {
color: #B42F00;
font-weight: 700;
}
.title {
font-size: 16px;
margin-left: 17.5px ;
}
.operation {
font-size: 12px;
margin-right: 12px;
display: flex;
align-items: center;
img {
width: 6px;
height: 11px;
margin-left: 2px;
}
}
}
.content {
min-height: 103px;
display: flex;
align-items: center;
img {
width: 73px;
height: 73px;
margin: 15px 10px 15px 15px;
}
.details {
width: 214.5px;
.name {
color: #373839;
font-size: 15px;
font-weight: 700;
line-height: 22.5px;
}
.grade {
color: #FD5A2F;
font-size: 14px;
line-height: 14px;
font-weight: 700;
margin-top: 10px;
}
}
}
}
.item:last-child {
margin-bottom: 0;
}
}
.person-awards {
.awards-btn {
width: 312px;
height: 49px;
background: linear-gradient(360deg,rgba(255,134,32,1) 0%,rgba(255,248,111,1) 100%);
box-shadow: 0px 2.5px 0px 0px rgba(222,83,15,1);
border-radius: 32.5px;
color: #B42F00;
font-size: 21.5px;
font-weight: 700;
line-height: 49px;
margin: 20px auto 0 auto;
text-align: center;
}
}
}
.pica-icon {
width: 100%;
height: 81px;
overflow: hidden;
img {
display: block;
width: 22.5px;
height: 28.5px;
margin: 22.5px auto 0 auto;
}
}
}
\ No newline at end of file
.personal-grade-wrap {
.wrap-container {
width: 100%;
/*min-height: 907px;*/
background: url("../../img/stage3/personal-grade.png") no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
img.title {
position: absolute;
top: 0;
left: 13.5px;
width: 169px;
height: 26.5px;
}
img.awards-grade {
position: absolute;
top: 0;
right: 24px;
width: 49px;
height: 59px;
}
.personal-info {
margin-top: 51.5px;
margin-left: 20px;
display: flex;
align-items: center;
img {
width: 50px;
height: 50px;
border-radius: 50%;
}
.right {
margin-left: 15px;
.name {
color: #FFFFFF;
font-weight: 700;
font-size: 20px;
line-height: 20px;
}
.hospital {
color: #FFFFFF;
font-weight: 700;
font-size: 14px;
line-height: 18px;
margin-top: 4.5px;
}
}
}
.join-num {
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 21px;
margin-top: 73px;
margin-left: 18.5px;
}
.grade-details {
margin-top: 10px;
margin-left: 15px;
overflow: hidden;
.left {
float: left;
.title {
color: #FFF36C;
font-size: 23px;
font-weight: 700;
line-height: 32.5px;
margin-left: 1.5px;
margin-bottom: 11px;
}
.item {
display: flex;
.line {
width: 3.5px;
height: 91.5px;
background: #FFFFFF;
opacity:0.53;
margin-right: 8px;
}
.line168 {
height: 84px;
}
.content {
.label {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 15px;
}
.grade {
color: #FFFFFF;
font-size: 40px;
font-weight: 700;
line-height: 40px;
margin-top: 9px;
margin-bottom: 6px;
}
.trapezoid {
width: 113px;
height: 23px;
line-height: 25px;
padding: 0 7px 0 5px;
background:linear-gradient(-75deg,transparent 0,transparent 15px,#FFF36C 0,);
color: #F7753F;
font-size: 14px;
font-weight: 700;
}
.detail {
color: #FFF36C;
font-size: 14px;
line-height: 15px;
}
}
}
.marginItem {
margin-top: 30px;
margin-bottom: 30px;
}
}
.right {
width: 28px;
float: right;
margin-right: 40px;
margin-top: 28px;
p {
color: #FFFFFF;
font-size: 28px;
line-height: 31px;
font-weight: 700;
}
p:first-child {
margin-bottom: 34px;
}
}
}
.task-details {
display: flex;
justify-content: center;
margin-top: 54.5px;
margin-bottom: 30px;
.task-item {
width: 62px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
img {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
p.num,p.name {
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
line-height: 20px;
text-align: center;
}
}
.task-item:nth-child(2) {
margin: 0 67.5px;
}
}
.share-btn {
width: 312px;
height: 49px;
background: linear-gradient(360deg,rgba(255,134,32,1) 0%,rgba(255,248,111,1) 100%);
border-radius: 32.5px;
color: #B42F00;
font-size: 21.5px;
font-weight: 700;
text-align: center;
line-height: 49px;
margin: 35px auto 23px auto;
}
.footer-text {
color: #FFF36C;
font-size: 15px;
font-weight: 700;
text-align: center;
margin-bottom: 41px;
}
}
}
\ No newline at end of file
.rank-wrap {
.rank-list {
.rank-item {
padding: 20px 15px 20px 25px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
img.rank-icon {
width: 25px;
height: 29px;
}
.rank-num {
width: 25px;
color: #373839;
font-size: 15px;
font-weight: 700;
text-align: center;
}
.info {
display: flex;
align-items: center;
margin-left: 25px;
img.photo {
width: 35px;
height: 35px;
margin-right: 10px;
border-radius: 50%;
}
.details {
.name {
width: 176px;
color: #373839;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.awards {
color: #979899;
font-size: 13px;
line-height: 13px;
margin-top: 8px;
}
}
}
.score {
margin-left: auto;
.num {
color: #FD5A2F;
font-size: 13px;
line-height: 13px;
text-align: right;
}
.name {
color: #676869;
font-size: 13px;
line-height: 13px;
margin-top: 5px ;
text-align: right;
}
}
}
.rank-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;
}
}
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
box-shadow: 0px -1Px 0px 0px #EDEDED;
.content {
height: 50Px;
background: #fff;
display: flex;
align-items: center;
padding: 0 15px;
img {
width: 35px;
height: 35px;
border-radius: 50%;
margin-right: 10px;
}
.left {
.score {
color: #373839;
font-size: 12px;
font-weight: 700;
line-height: 12px;
span {
color: #FD6037;
}
}
.rank {
color: #979899;
font-size: 12px;
font-weight: 700;
line-height: 12px;
margin-top: 5px;
span {
color: #FD6037;
}
}
}
.right {
width: 90px;
height: 40Px;
overflow: hidden;
background: linear-gradient(270deg,rgba(255,88,36,1) 0%,rgba(254,163,86,1) 100%);
border-radius: 20px;
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
text-align: center;
line-height: 40Px;
margin-left: auto;
}
}
}
}
\ No newline at end of file
.call-app-container .down-btn,.call-app-container .open-btn {
display: flex;
align-items: center;
font-size: 14px;
}
.call-app-container .down-btn {
height: 28px!important;
display: flex;
align-items: center;
}
.padBott60 {
padding-bottom: 60px;
}
.marginBott60 {
margin-bottom: 60px;
}
<template>
<section class="active-finish-toast-wrap">
<div class="content">
<div class="top">活动已过期,感谢您的关注</div>
<div class="bottom">
<span @click="closePage">确定</span>
</div>
</div>
</section>
</template>
<script>
import {is_weixin} from '@/utils/wxLogin'
export default {
name: "finish-toast",
methods: {
isAndroid() {
let u = navigator.userAgent;
if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
if (window.ShowFitness !== undefined) return true;
}
return false;
},
isIos() {
let u = navigator.userAgent;
if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {
return true;
}
return false;
},
closePage() {
if(this.$rocNative.isWeb) {
if(is_weixin()) {
if(this.isIos()) {
WeixinJSBridge.call('closeWindow');
} else if(this.isAndroid()){
document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false)
}
} else {
window.location.href="about:blank";
window.close();
}
} else {
this.$rocNative.goBack();
}
}
}
}
</script>
<style scoped lang="less">
.active-finish-toast-wrap {
width: 100%;
position: fixed;
top: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
.content {
width: 300px;
height: 131px;
background: #fff;
border-radius: 4px;
.top {
color: #373839;
font-size: 18px;
height: 80.5px;
line-height: 80.5px;
text-align: center;
position: relative;
}
.top: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);
}
.bottom {
text-align: center;
color: #449284;
font-size: 17px;
line-height: 50px;
}
}
}
</style>
\ No newline at end of file
......@@ -56,6 +56,24 @@
type: Boolean,
default: false
},
isGoHistory: { // 是否调用app goBack,'1',history.go(-1)
type: String,
default() {
return ''
}
},
stage3BackBuried: { // 三阶段返回按钮埋点
type: String,
default() {
return ''
}
},
stage3ShareBuried: { // 三阶段返回按钮埋点
type: String,
default() {
return ''
}
},
},
data(){
return {
......@@ -99,36 +117,48 @@
setHeaderHeight(){
this.$rocNative.getStatusBarHeight().then(res=>{
const dpr = window.devicePixelRatio;
if(this.$rocNative.isIOS && res.homeIndicatorHeight && res.statusBarHeight===0){
this.statusBarHeight = 44;
}else{
this.statusBarHeight = this.$rocNative.isIOS ? res.statusBarHeight: res.statusBarHeight / dpr;
if (this.$rocNative.isIOS ) {
if (res.statusBarHeight===0) {
this.statusBarHeight = res.homeIndicatorHeight ? 44:20
} else {
this.statusBarHeight = res.statusBarHeight
}
} else {
this.statusBarHeight = res.statusBarHeight / dpr;
}
this.$emit('getHeaderHeight', this.statusBarHeight + 44);
})
},
goBack(){
if(this.isStageTwoHomePage){
if (this.isStageTwoHomePage) {
this.$sendBuriedData({
component_tag: `302#302002`
});
}else{
} else if (this.stage3BackBuried) {
this.$sendBuriedData({
component_tag: `${this.stage3BackBuried}`
});
} else {
this.$sendBuriedData({
component_tag: `301#301002`
});
}
if(this.isGoHistory == '1') {
if (window.history.length > 1) {
this.$router.go(-1)
} else {
this.$rocNative.goBack();
}
} else {
this.$rocNative.goBack();
}
},
goShare(){
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);
......@@ -136,6 +166,20 @@
}else{
this.$rocNative.shareWechat(this.shareObj);
}
if (this.isStageTwoHomePage) {
this.$sendBuriedData({
component_tag: `302#302001`
});
} else if (this.stage3ShareBuried) {
this.$sendBuriedData({
component_tag: `${this.stage3ShareBuried}`
});
} else {
this.$sendBuriedData({
component_tag: `301#301001`
});
}
},
// 默认滚动事件
scrollHandleOwn(){
......
......@@ -60,6 +60,10 @@ module.exports = {
{
src: '~plugins/mixins',
ssr: false
},
{
src: '~plugins/pica-call-app',
ssr: false
}
],
/*
......
因为 它太大了无法显示 源差异 。您可以改为 查看blob
......@@ -241,7 +241,7 @@
showAwadModal: true, // 根据活动时间是否展示中奖弹层以及查看昨日榜单逻辑
yestodayAwards: '', // 昨日可获得
token: '',
activityId: '1', // 上线前等产品通知修改默认值
activityId: '1', // 上线前等产品通知修改默认值1
scoreAwardTips: '',
encryptId: '', // 加密后的id,(分享传参用)
serverTime: '',
......
<template>
<section class="hospital-grade-wrap rank-wrap">
<h5header
v-if="!isWeb"
:title="`${title[this.hospitalType]}榜榜单`"
:stage3BackBuried="backBuried[this.hospitalType]"
:stage3ShareBuried="shareBuried[this.hospitalType]"
isGoHistory="1"
:isOpacity="false"
:shareObj="shareObj"/>
<div
class="rank-list"
:class="{'padBott60': isWeb}"
:style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`,marginBottom: isWeb?0:`${50+homeIndicatorHeight}` + 'Px'}">
<div class="rank-item" v-for="(item, index) in rankList" :key="index">
<img v-if="index<=2" :src="rankIcon[index]" alt="" class="rank-icon">
<p v-else class="rank-num">{{index+1}}</p>
<div class="info">
<div class="details">
<p class="name">{{item.hospitalName}}</p>
<p class="awards">奖励: {{item.bonus}}云鹊豆</p>
</div>
</div>
<div class="score">
<p class="num">{{item.hospitalDiligence }}</p>
<p class="name">勤奋分</p>
</div>
</div>
<div class="no-more" v-if="rankList.length>=10" >
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
<div class="footer" v-if="!isWeb&&isLogin&&isShowBottomBar" :style="{height: `${50+homeIndicatorHeight}` + 'Px'}">
<div class="content">
<div class="left">
<p class="score">我的机构勤奋分<span>{{personalData.hospitalDiligence}}</span></p>
<p class="rank" v-if="personalData.hospitalRank<=100">恭喜您的机构上榜排名<span>{{personalData.hospitalRank}}</span></p>
<p class="rank" v-else>很遗憾,您的机构未上榜</p>
</div>
<div class="right" @click="share">分享排名</div>
</div>
</div>
<no-ssr v-if="isWeb">
<pica-call-app
:text="'高效学习 轻松行医'"
:path="''"
/>
</no-ssr>
<finish-toast v-if="isGameOver"></finish-toast>
</section>
</template>
<script>
import { getHospitalRank, getPersonScore, isGameOver } from '@/service/stage3Api';
import h5header from '@/components/h5header';
import finishToast from '@/components/finish-toast';
import { setCookie, getCookie, delCookie } from '@/utils/cookieFun';
export default {
name: "hospital-grades",
components: {
h5header,
finishToast
},
data() {
return {
isWeb: false,
personalData: {},
shareObj: {},
title: {
'0': '星火',
'1': '萌芽',
'2': '奋进',
'3': '超越'
},
hospitalTypeName: {
'0': '微型',
'1': '小型',
'2': '中型',
'3': '大型'
},
shareBuried: {
'0': '489#403001',
'1': '490#404001',
'2': '491#405001',
'3': '492#406001'
},
backBuried: {
'0': '489#403002',
'1': '490#404002',
'2': '491#405002',
'3': '492#406002'
},
rankIcon: {
0: require('../../assets/img/stage3/rank-icon1.png'),
1: require('../../assets/img/stage3/rank-icon2.png'),
2: require('../../assets/img/stage3/rank-icon3.png'),
},
appCallUrl: '',
isLogin: true,
isShowBottomBar: false
}
},
async asyncData( { query } ) {
const res = await isGameOver();
const { data } = await getHospitalRank({ type: query.hospitalType });
return {
isGameOver: res.data,
hospitalType: query.hospitalType,
rankList: data
}
},
head () {
return {
title: `${this.title[this.hospitalType]}榜榜单`,
}
},
created() {
},
mounted() {
this.$rocNative.appInit();
this.isWeb = this.$rocNative.isWeb;
this.shareObj = {
title1: `云鹊${this.title[this.hospitalType]}奖榜单公布`,
title2: `全国最杰出的${this.hospitalTypeName[this.hospitalType]}机构在这里`,
shareImageUrl: 'https://file.yunqueyi.com/h5/images/hd/icon-share.png',
shareUrl: location.href, //微信分享链接
};
this.appCallUrl = `https://${location.host}/year_end_ssr/awards-list`; //唤起app页面
//微信分享初始化--start
this.$picaWxShare({
type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
authUrl: window.location.href,
},(wx)=>{
const title = this.shareObj.title1;
const desc = this.shareObj.title2;
const link = window.location.href;
const imgUrl = this.shareObj.shareImageUrl;
// 分享给朋友
wx.onMenuShareAppMessage({
title,desc,link,imgUrl
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title,desc,link,imgUrl
});
});
//微信分享初始化--end
if(!this.isWeb) {
this.getUserInfo();
};
window.__refresh = function(params) {
_this.getUserInfo(); // 判断是否登录
}
},
methods: {
getUserInfo() { // 判断是否登录
delCookie('token');
this.$rocNative.getUserInfo().then(res => {
if(res.userMobile){
setCookie('token', res.userToken);
this.getPersonScore();
this.isLogin = true;
} else {
this.isLogin = false;
}
})
},
getPersonScore() {
getPersonScore().then(res => {
this.personalData = res.data
if(res.data.hospitalType == this.hospitalType) {
if(res.data.hospitalDiligence) {
this.isShowBottomBar = true;
} else {
this.isShowBottomBar = false;
}
} else {
this.isShowBottomBar = false;
}
})
},
share() {
this.$rocNative.shareWechat(this.shareObj);
if(this.hospitalType == '0') {
this.$sendBuriedData({
component_tag: `489#403003`
});
} else if(this.hospitalType == '1') {
this.$sendBuriedData({
component_tag: `490#404003`
});
} else if(this.hospitalType == '2') {
this.$sendBuriedData({
component_tag: `491#405003`
});
} else if(this.hospitalType == '3') {
this.$sendBuriedData({
component_tag: `492#406003`
});
}
}
}
}
</script>
<style>
@import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
@import "../../assets/style/awards-list/rank.less";
</style>
\ No newline at end of file
<template>
<section class="awards-list-wrap">
<h5header
v-if="!isWeb"
title="云鹊奖2019"
:stage3BackBuried="'487#401002'"
:stage3ShareBuried="'487#401001'"
:isOpacity="false"
:shareObj="shareObj"/>
<div class="top-container" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
<img src="~/assets/img/stage3/rule-btn.png" @click="goToRule" v-bp="{ component_tag: '487#401003'}" alt="">
</div>
<!--已登录及个人未参加-->
<div class="person-details" v-if="isLogin&&mainInfoType==1&&!isWeb">
<div class="info">
<img :src="mainInfo.avatarImageUrl" alt="">
<div class="right">
<div class="name">{{mainInfo.name}}</div>
<div class="hospital">{{mainInfo.hospitalName}}</div>
</div>
</div>
<div class="self-grade">
<div class="left">
<p class="title">个人勤奋榜</p>
<p class="rank" v-if="mainInfo.diligence">{{mainInfo.personRank}}</p>
<p class="rank" v-else >未参与活动</p>
<p class="score">个人勤奋分 {{mainInfo.diligence?mainInfo.diligence:'-'}}</p>
</div>
<div class="right">
<p class="title">机构{{rankName[mainInfo.hospitalType]}}</p>
<p class="rank" v-if="mainInfo.hospitalDiligence">{{mainInfo.hospitalRank}}</p>
<p class="rank" v-else >未参与活动</p>
<p class="score">机构勤奋分 {{mainInfo.hospitalDiligence?mainInfo.hospitalDiligence:'-'}}</p>
</div>
</div>
<div class="my-grade" v-if="mainInfo.diligence" @click="goMyGrade" v-bp="{ component_tag: '487#401004'}">我的成绩</div>
<div class="bottom">
<p class="text">参与人数 {{joinDeatils.count}}</p>
<p class="line"></p>
<p class="text">参与机构数 {{joinDeatils.hospitalCount}}</p>
</div>
</div>
<!--未登录-->
<div class="person-details not-login" v-if="!isLogin">
<div class="description">登录查看个人和机构排名</div>
<div class="my-grade" @click="goToLogin" v-bp="{ component_tag: '487#401005'}">立即登录</div>
<div class="bottom">
<p class="text">参与人数 {{joinDeatils.count}}</p>
<p class="line"></p>
<p class="text">参与机构数 {{joinDeatils.hospitalCount}}</p>
</div>
</div>
<!--个人机构均未参加-->
<div class="person-details not-join" v-if="isLogin&&mainInfoType==2&&!isWeb">
<div class="description">您和您的机构未参加本次活动</div>
<div class="bottom">
<p class="text">参与人数 {{joinDeatils.count}}</p>
<p class="line"></p>
<p class="text">参与机构数 {{joinDeatils.hospitalCount}}</p>
</div>
</div>
<!--微信打开页面-->
<div class="person-details in-wx bg4" v-if="isWeb">
<div class="wx-left wx-item">
<p class="num">{{joinDeatils.count}}</p>
<p class="text">参与人数</p>
</div>
<div class="line"></div>
<div class="wx-left wx-item">
<p class="num"> {{joinDeatils.hospitalCount}}</p>
<p class="text">参与机构数</p>
</div>
</div>
<div class="main-container">
<img class="top-img" src="~/assets/img/stage3/hospital-icon.png" alt="">
<div class="award-container hospital-awards">
<div class="item" v-for="(item, index) in hospitalTopVoList" :key="index">
<div class="top">
<div class="title">云鹊{{rankName[item.hospitalType]}}</div>
<div class="operation" @click="goRankList(1,item.hospitalType)">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
</div>
<div class="content">
<img :src="hospitalRankIcon[item.hospitalType]" alt="">
<div class="details">
<p class="name">{{item.hospitalName}}</p>
<p class="grade">机构勤奋分 {{item.hospitalDiligence}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="main-container">
<img class="top-img" src="~/assets/img/stage3/person-icon.png" alt="">
<div class="award-container person-awards">
<div class="item">
<div class="top">
<div class="title">云鹊勤奋之星</div>
<div class="operation" @click="goRankList(2)" v-bp="{ component_tag: '487#401010'}">查看榜单<img src="~/assets/img/stage3/icon-right.png" alt=""></div>
</div>
<div class="content">
<img src="~/assets/img/stage3/person-rank.png" alt="">
<div class="details">
<p class="name">{{doctorTopVo.name}}</p>
<p class="grade">个人累计勤奋分 {{doctorTopVo.diligence}}</p>
</div>
</div>
</div>
<div class="awards-btn" @click="goToLastAwardsList">查看每日个人获奖榜单</div>
</div>
</div>
<div class="pica-icon" :class="{'padBott60': isWeb}">
<img src="~/assets/img/stage3/pica-icon.png" alt="">
</div>
<no-ssr v-if="isWeb">
<pica-call-app
:text="'高效学习 轻松行医'"
:path="''"
/>
</no-ssr>
<finish-toast v-if="isGameOver"></finish-toast>
</section>
</template>
<script>
import { getThirdMainInfo, getMainRank, isGameOver } from '@/service/stage3Api'
import h5header from '@/components/h5header';
import finishToast from '@/components/finish-toast';
import { Base64 } from 'js-base64';
import { setCookie, getCookie, delCookie } from '@/utils/cookieFun';
export default {
name: "index",
components: {
h5header,
finishToast
},
data() {
return {
isLogin: true,
mainInfo: {},//顶部个人信息等相关数据
isWeb: false,
shareObj: {},
mainInfoType: 1,//1,机构个人都参加或者一个参加,2机构个人都未参加
rankName: {
'0': '星火',
'1': '萌芽',
'2': '奋进',
'3': '超越'
},
hospitalRankIcon: {
'0': require('../../assets/img/stage3/hospital-rank1.png'),
'1': require('../../assets/img/stage3/hospital-rank2.png'),
'2': require('../../assets/img/stage3/hospital-rank3.png'),
'3': require('../../assets/img/stage3/hospital-rank4.png')
},
appCallUrl: ''
}
},
async asyncData() {
const res = await isGameOver();
const { data } = await getMainRank();
return {
isGameOver: res.data,
joinDeatils:{
count: data.count,
hospitalCount: data.hospitalCount
}, //参加人数参加机构
hospitalTopVoList: data.hospitalTopVoList,
doctorTopVo: data.doctorTopVo||{}
}
},
created() {
},
mounted() {
this.$rocNative.appInit();
this.isWeb = this.$rocNative.isWeb;
this.shareObj = {
title1: '云鹊奖榜单公布',
title2: '来看看全中国最杰出的医院机构和医生个人',
shareImageUrl: 'https://file.yunqueyi.com/h5/images/hd/icon-share.png',
shareUrl: location.href, //微信分享链接
};
this.appCallUrl = `https://${location.host}/year_end_ssr/awards-list`; //唤起app页面
//微信分享初始化--start
this.$picaWxShare({
type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
authUrl: window.location.href,
},(wx)=>{
const title = this.shareObj.title1;
const desc = this.shareObj.title2;
const link = window.location.href;
const imgUrl = this.shareObj.shareImageUrl;
// 分享给朋友
wx.onMenuShareAppMessage({
title,desc,link,imgUrl
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title,desc,link,imgUrl
});
});
//微信分享初始化--end
/*从app获取用户信息*/
this.getUserInfo();
const _this = this
window.__refresh = function(params) {
_this.getUserInfo(); // 判断是否登录
}
},
methods: {
goToRule() {
if(this.isWeb) {
window.location.href = 'https://phome.yunqueyi.com/template_v2/?id=628'
} else {
let paramList = [
{
"key":"pageUrl",
"value": 'https://phome.yunqueyi.com/template_v2/?id=628',
"type":4,
"seqNo":1
}
];
this.$rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
});
}
},
goToLogin() {
this.$rocNative.gotoLogin();
},
getUserInfo() { // 判断是否登录
delCookie('token');
this.$rocNative.getUserInfo().then(res => {
if(res.userMobile){
setCookie('token', res.userToken)
this.getMainInfo();
this.isLogin = true;
} else {
this.isLogin = false;
}
})
},
goMyGrade() { //跳转我的成绩页
this.$router.push({
path: '/awards-list/personal-grade',
query: {
encyptId: Base64.encode(this.mainInfo.encyptId)
}
})
},
goRankList(type,hospitalType) { //跳转榜单页,type:1机构,2个人
if (type == 1) {
if (hospitalType == 0) {
this.$sendBuriedData({
component_tag: `487#401006`
});
} else if (hospitalType == 1) {
this.$sendBuriedData({
component_tag: `487#401007`
});
} else if (hospitalType == 2) {
this.$sendBuriedData({
component_tag: `487#401008`
});
} else if (hospitalType == 3) {
this.$sendBuriedData({
component_tag: `487#401009`
});
}
this.$router.push({
path: '/awards-list/hospital-grades',
query: {
hospitalType: hospitalType
}
})
} else if(type == 2) {
this.$router.push({
path: '/awards-list/personal-rank',
query: {
}
})
}
},
getMainInfo() { //top主要数据
getThirdMainInfo().then(res => {
if(res.code == '000000') {
this.mainInfo = res.data;
if(res.data.hospitalDiligence==0&&res.data.diligence==0) {
this.mainInfoType = 2;
} else {
this.mainInfoType = 1;
}
}
})
},
goToLastAwardsList() {
if (this.isWeb) {
window.location.href = 'https://phome.yunqueyi.com/template_v2/?id=636'
} else {
let paramList = [
{
"key":"pageUrl",
"value": 'https://phome.yunqueyi.com/template_v2/?id=636',
"type":4,
"seqNo":1
}
];
this.$rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
});
}
}
}
}
</script>
<style>
@import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
@import '../../assets/style/awards-list/index.less';
</style>
\ No newline at end of file
<template>
<section class="personal-grade-wrap">
<h5header
v-if="!isWeb"
title="云鹊奖2019"
:stage3BackBuried="'488#402002'"
:stage3ShareBuried="'488#402001'"
isGoHistory="1"
:isOpacity="false"
:shareObj="shareObj"/>
<div class="wrap-container" :class="{'marginBott60': isWeb}" :style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`}">
<img src="~/assets/img/stage3/awards-title.png" alt="" class="title">
<img :src="rewardIcon[myGrades.rewardType]" alt="" class="awards-grade">
<div class="personal-info">
<img :src="myGrades.avatarImageUrl" alt="">
<div class="right">
<p class="name">{{myGrades.name?myGrades.name:myGrades.mobilePhone}}</p>
<p class="hospital">{{myGrades.hospitalName}}</p>
</div>
</div>
<div class="join-num">活动总计参与人数:{{myGrades.count}}</div>
<div class="grade-details">
<div class="left">
<p class="title">{{isWeb?'TA':'您'}}的成绩:</p>
<div class="item">
<div class="line" :class="{'line168': !myGrades.diligence }"></div>
<div class="content">
<p class="label">累计获得勤奋分</p>
<p class="grade" >{{myGrades.diligence}}</p>
<p class="trapezoid" v-if="myGrades.diligence">超过{{myGrades.superCount||0}}%的医生</p>
<div class="detail" v-else>未参与本次活动</div>
</div>
</div>
<div class="item marginItem">
<div class="line line168"></div>
<div class="content">
<p class="label">累计获得云鹊豆</p>
<p class="grade">{{myGrades.bonus}}</p>
<div class="detail">{{myGrades.bonus?'记得去云鹊豆中心进行兑换哦':'未参与本次活动'}}</div>
</div>
</div>
<div class="item">
<div class="line line168"></div>
<div class="content">
<p class="label">进每日TOP10</p>
<p class="grade">{{myGrades.userDayTop10Count}}</p>
<div class="detail">{{myGrades.userDayTop10Count?'拿奖拿到手发软':'下次记得心动就行动'}} </div>
</div>
</div>
</div>
<div class="right">
<p>{{rewardText[myGrades.rewardType].rightText1}}</p>
<p>{{rewardText[myGrades.rewardType].rightText2}}</p>
</div>
</div>
<div class="task-details">
<div class="task-item">
<img src="~/assets/img/stage3/task-icon1.png" alt="">
<p class="num">{{myGrades.clockCount}}</p>
<p class="name">活动打卡</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon2.png" alt="">
<p class="num">{{myGrades.courseCount}}</p>
<p class="name"> 学习课程</p>
</div>
<div class="task-item">
<img src="~/assets/img/stage3/task-icon3.png" alt="">
<p class="num">{{myGrades.inviteCount}}</p>
<p class="name">邀请好友</p>
</div>
</div>
<div class="share-btn" @click="share" v-if="!isWeb" v-bp="{ component_tag: '488#402003'}">分享我的成绩</div>
<p class="footer-text" v-if="!isWeb">共同推进医防融合 齐心聚力机构发展</p>
<no-ssr v-if="isWeb">
<pica-call-app
:text="'高效学习 轻松行医'"
:path="''"
/>
</no-ssr>
<finish-toast v-if="isGameOver"></finish-toast>
</div>
</section>
</template>
<script>
import { getMyGrades,isGameOver } from '@/service/stage3Api';
import h5header from '@/components/h5header';
import finishToast from '@/components/finish-toast';
import { Base64 } from 'js-base64';
export default {
name: "personal-grade",
components: {
h5header,
finishToast
},
data() {
return {
shareObj: {},
isWeb: false,
appCallUrl: '',
rewardIcon: {
0: '',
1: require('../../assets/img/stage3/awards-icon1.png'),// 1-金色云鹊勋章 0%~10% 勤学不辍,必有收获
2: require('../../assets/img/stage3/awards-icon2.png'),//2-银色云鹊勋章 11%-40% 学无止境,不知疲倦
3: require('../../assets/img/stage3/awards-icon3.png'),//3-铜色云鹊勋章 41%-100% 学而不倦,可圈可点
},
rewardText: {
0: {},
1: {// 1-金色云鹊勋章 0%~10% 勤学不辍,必有收获
rightText1: '勤学不辍',
rightText2: '必有收获'
},
2: {//2-银色云鹊勋章 11%-40% 学无止境,不知疲倦
rightText1: '学无止境',
rightText2: '不知疲倦'
},
3: {//3-铜色云鹊勋章 41%-100% 学而不倦,可圈可点
rightText1: '学而不倦',
rightText2: '可圈可点'
},
},
}
},
async asyncData({query}) {
const res = await isGameOver();
const { data } = await getMyGrades({id: Base64.decode(query.encyptId)});
return {
isGameOver: res.data,
encyptId: Base64.decode(query.encyptId),//加密doctorId
myGrades: data
}
},
created() {
},
mounted() {
this.$rocNative.appInit();
this.isWeb = this.$rocNative.isWeb;
this.shareObj = {
title1: '云鹊奖全国医生成绩公布',
title2: '【点击查看】天呐!我在全国医生中的排名居然在这里',
shareImageUrl: 'https://file.yunqueyi.com/h5/images/hd/icon-share.png',
shareUrl: location.href, //微信分享链接
};
this.appCallUrl = `https://${location.host}/year_end_ssr/awards-list`; //唤起app页面
//微信分享初始化--start
this.$picaWxShare({
type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
authUrl: window.location.href,
},(wx)=>{
const title = this.shareObj.title1;
const desc = this.shareObj.title2;
const link = window.location.href;
const imgUrl = this.shareObj.shareImageUrl;
// 分享给朋友
wx.onMenuShareAppMessage({
title,desc,link,imgUrl
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title,desc,link,imgUrl
});
});
//微信分享初始化--end
},
methods: {
share() {
this.$rocNative.shareWechat(this.shareObj);
}
}
}
</script>
<style>
@import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
@import '../../assets/style/awards-list/personal-grade.less';
</style>
\ No newline at end of file
<template>
<section class="personal-rank-wrap rank-wrap">
<h5header
v-if="!isWeb"
title="个人勤奋榜单"
:stage3BackBuried="'493#407002'"
:stage3ShareBuried="'493#407001'"
isGoHistory="1"
:isOpacity="false"
:shareObj="shareObj"/>
<div
class="rank-list"
:class="{'padBott60': isWeb}"
:style="{ marginTop: isWeb?0:`${44+statusBarHeight}Px`,marginBottom: isWeb?0:`${50+homeIndicatorHeight}` + 'Px'}">
<div class="rank-item" v-for="(item, index) in personList" :key="index">
<img v-if="index<=2" :src="rankIcon[index]" alt="" class="rank-icon">
<p v-else class="rank-num">{{index+1}}</p>
<div class="info">
<img :src="item.avatarImageUrl" alt="" class="photo">
<div class="details">
<p class="name">{{item.name}}</p>
<p class="awards">奖励: <span v-if="index==0">iPhone11、</span>{{item.bonus}}云鹊豆</p>
</div>
</div>
<div class="score">
<p class="num">{{item.diligence}}</p>
<p class="name">勤奋分</p>
</div>
</div>
<div class="no-more" v-if="personList.length>=10">
<span class="line"></span>
<span class="text">到底啦</span>
<span class="line"></span>
</div>
</div>
<div class="footer" v-if="!isWeb&&isLogin&&personalData.diligence" :style="{height: `${50+homeIndicatorHeight}` + 'Px'}">
<div class="content">
<img :src="personalData.avatarImageUrl" alt="">
<div class="left">
<p class="score">我的勤奋分<span>{{personalData.diligence}}</span></p>
<p class="rank" v-if="personalData.personRank<=100">恭喜您上榜排名<span>{{personalData.personRank}}</span>
</p>
<p class="rank" v-else>很遗憾,您未上榜</p>
</div>
<div class="right" @click="share" v-bp="{ component_tag: '493#407003'}">分享排名</div>
</div>
</div>
<no-ssr v-if="isWeb">
<pica-call-app
:text="'高效学习 轻松行医'"
:path="''"
/>
</no-ssr>
<finish-toast v-if="isGameOver"></finish-toast>
</section>
</template>
<script>
import {getPersonScore, getPersonList, isGameOver} from '@/service/stage3Api';
import h5header from '@/components/h5header';
import finishToast from '@/components/finish-toast';
import {setCookie, getCookie, delCookie} from '@/utils/cookieFun';
export default {
name: "personal-rank",
components: {
h5header,
finishToast
},
data() {
return {
personalData: {},
isWeb: false,
shareObj: {},
rankIcon: {
0: require('../../assets/img/stage3/rank-icon1.png'),
1: require('../../assets/img/stage3/rank-icon2.png'),
2: require('../../assets/img/stage3/rank-icon3.png'),
},
appCallUrl: '',
isLogin: true
}
},
async asyncData({query}) {
const res = await isGameOver();
const {data} = await getPersonList();
return {
isGameOver: res.data,
personList: data,
appCallUrl: ''
}
},
head () {
return {
title: `个人勤奋榜单`,
}
},
created() {
},
mounted() {
this.$rocNative.appInit();
this.isWeb = this.$rocNative.isWeb;
this.shareObj = {
title1: '云鹊奖个人榜单公布',
title2: '全中国最杰出的医生个人在这里',
shareImageUrl: 'https://file.yunqueyi.com/h5/images/hd/icon-share.png',
shareUrl: location.href, //微信分享链接
};
this.appCallUrl = `https://${location.host}/year_end_ssr/awards-list`; //唤起app页面
//微信分享初始化--start
this.$picaWxShare({
type: (process.env.NUXT_ENV_APP != 'prod') ? 15 : '',
authUrl: window.location.href,
}, (wx) => {
const title = this.shareObj.title1;
const desc = this.shareObj.title2;
const link = window.location.href;
const imgUrl = this.shareObj.shareImageUrl;
// 分享给朋友
wx.onMenuShareAppMessage({
title, desc, link, imgUrl
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title, desc, link, imgUrl
});
});
//微信分享初始化--end
if (!this.isWeb) {
this.getUserInfo();
}
;
window.__refresh = function (params) {
_this.getUserInfo(); // 判断是否登录
}
},
methods: {
getUserInfo() { // 判断是否登录
delCookie('token');
this.$rocNative.getUserInfo().then(res => {
if (res.userMobile) {
setCookie('token', res.userToken)
this.getPersonScore();
this.isLogin = true;
} else {
this.isLogin = false;
}
})
},
getPersonScore() {
getPersonScore().then(res => {
this.personalData = res.data
})
},
share() {
this.$rocNative.shareWechat(this.shareObj);
}
}
}
</script>
<style>
@import '../../assets/style/pica-call-app.less';
</style>
<style scoped lang="less">
@import "../../assets/style/awards-list/rank.less";
</style>
\ No newline at end of file
......@@ -4,7 +4,7 @@ import Vue from 'vue';
const mixins = {
data() {
return {
statusBarHeight: 0,
statusBarHeight: 20,
homeIndicatorHeight: 0,
statusBarColor: '#fff'
}
......@@ -17,10 +17,15 @@ const mixins = {
// resolve(data)
let height;
if(_this.$rocNative.isIOS && res.homeIndicatorHeight && res.statusBarHeight===0){
height = 44;
if(_this.$rocNative.isIOS ){
if(res.statusBarHeight===0) {
height = res.homeIndicatorHeight ? 44:20
} else {
height = res.statusBarHeight
}
}else{
height = _this.$rocNative.isIOS ? res.statusBarHeight : res.statusBarHeight / window.devicePixelRatio;
height = res.statusBarHeight / window.devicePixelRatio;
}
// let height = _this.$rocNative.isIOS ? res.statusBarHeight : res.statusBarHeight / window.devicePixelRatio;
......
import Vue from 'vue'
import PicaCallApp from 'pica-call-app';
Vue.use(PicaCallApp);
\ No newline at end of file
import Vue from 'vue'
import PicaJsBridge from '@/utils/jsbridge'
// import Vconsole from 'vconsole';
// const vConsole = new Vconsole();
import Vconsole from 'vconsole';
const vConsole = new Vconsole();
Vue.prototype.$rocNative = new PicaJsBridge();
......@@ -16,6 +16,7 @@ Axios.interceptors.request.use(
if (method === 'post' || method === 'put' || method === 'delete') {}
if (config.withCredentials) {
config.headers.token = getCookie('token') || sessionStorage.getItem('token');
// config.headers.token = 'FE9A61476DA84BAD9B966FAF4C497871'
}
return config;
},
......
......@@ -93,5 +93,3 @@ export const getAuthCode = ({ mobilePhone, flag, captchaToken, captchaAnswer })
},
})
}
import request from './api';
/*获取三阶段主要数据*/
export const getThirdMainInfo = (params) => {
return request({
url: '/campaign/third/share/home/top',
withCredentials: true,
params: params
})
}
/*获取榜单首页排行*/
export const getMainRank = (parmas) => {
return request({
url: '/campaign/third/share/home/center',
params: parmas
})
}
/*我的成绩*/
export const getMyGrades = (data) => {
return request({
url: '/campaign/third/share/result',
method: 'post',
data: data
})
}
/*机构排行榜*/
export const getHospitalRank = (params) => {
return request({
url: '/campaign/third/share/hospital/rank',
params: params
})
}
/*排行榜底部个人、机构排行信息*/
export const getPersonScore = (params) => {
return request({
url: '/campaign/third/share/person/score',
withCredentials: true,
params: params
})
}
/*个人榜单列表*/
export const getPersonList = () => {
return request({
url: '/campaign/third/share/person/rank',
})
}
/*判断活动是否结束*/
export const isGameOver = () => {
return request({
url: '/campaign/third/share/gameOver'
})
}
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册