Skip to content

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

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
上级 cb1afbe4 cf58bc76
隐藏空白字符变更
内嵌 并排
正在显示 包含 344 行增加 和 68 行删除
assets/style/in-activity.less
浏览文件 @ cfeaa4fc
...@@ -216,18 +216,24 @@ ...@@ -216,18 +216,24 @@
// 未登录 // 未登录
.not-login-wrap{ .not-login-wrap{
position: relative;
width: 325px; height: 50px; margin: 0 auto; width: 325px; height: 50px; margin: 0 auto;
padding: 20px 15px; padding: 20px 15px;
overflow: hidden;
border-radius: 13px; border-radius: 13px;
background: #FFF; background: #FFF;
.gold-coin{
position: absolute; right: -20px; top: -32px;
width: 63px; height: 65px; border:0; display: block;
}
.head-icon{ .head-icon{
width: 50px; height: 50px; display: block; border: 0; width: 50px; height: 50px; display: block; border: 0;
float: left; float: left;
} }
.content-info{ .content-info{
width: 202px; height: 50px; overflow: hidden; float: left;
padding-left: 15px; width: 177px; height: 50px; overflow: hidden;
margin-left: 15px;
.not-login-text{ .not-login-text{
width: 202px; height: 28px; width: 202px; height: 28px;
color: #373839; font-size: 18px; line-height: 28px; font-weight: 700; color: #373839; font-size: 18px; line-height: 28px; font-weight: 700;
...@@ -237,6 +243,22 @@ ...@@ -237,6 +243,22 @@
color: #676869; font-size: 14px; line-height: 18px; color: #676869; font-size: 14px; line-height: 18px;
} }
} }
.go-login{
position: relative;
float: left;
width: 56px; height: 25px; margin: 14px 0 0 24px;
border: 1px solid #FD5A2F;
border-radius: 25px; font-size: 12px; line-height: 25px; text-indent: 8px;
color: #FD5A2F; font-weight: 700;
&.login-but-nojoin{
width: 70px; height: 25px;
margin: 14px 0 0 10px;
}
img{
position: absolute; right: 5px; top: 50%; margin-top:-5px;
width: 6px; height: 11px;
}
}
} }
} }
...@@ -298,7 +320,7 @@ ...@@ -298,7 +320,7 @@
} }
.text{ .text{
position: absolute; left: 0; top: 0; position: absolute; left: 0; top: 0;
width: 331px; height: 45px; width: 331px; height: 50px;
color: #B42F00; font-size: 22px; line-height: 45px; color: #B42F00; font-size: 22px; line-height: 45px;
text-align: center; font-weight: 700; letter-spacing: 1px; text-align: center; font-weight: 700; letter-spacing: 1px;
} }
......
pages/in-activity.vue
浏览文件 @ cfeaa4fc
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="in-activity-wrap"> <div class="in-activity-wrap">
<!-- 顶部的四个阶段 进度条 --> <!-- 顶部的四个阶段 进度条 -->
<ul class="top-process-bar"> <ul class="top-process-bar">
<li class="over"> <!-- <li class="over">
<p class="title">高血压学习</p> <p class="title">高血压学习</p>
<p class="date">12月16至19日</p> <p class="date">12月16至19日</p>
</li> </li>
...@@ -17,6 +17,11 @@ ...@@ -17,6 +17,11 @@
<li> <li>
<p class="title">全科学习</p> <p class="title">全科学习</p>
<p class="date">12月27至30日</p> <p class="date">12月27至30日</p>
</li> -->
<li v-for="item in stageDateList" :class="">
<p class="title">{{ item.title }}</p>
<p class="date">{{ item.date }}</p>
</li> </li>
</ul> </ul>
...@@ -29,7 +34,31 @@ ...@@ -29,7 +34,31 @@
<img class="reward-pic" src="../assets/img/stageTwo/award-01-pic.png" alt=""> <img class="reward-pic" src="../assets/img/stageTwo/award-01-pic.png" alt="">
</div> </div>
<!-- <div class="user-info-wrap"> <!-- 未登录 -->
<div v-if="!isLogin" class="not-login-wrap">
<img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
<img class="head-icon" src="../assets/img/stageTwo/not-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">您还未登录</p>
<p class="tips">登录并加入机构参加活动</p>
</div>
<div class="go-login login-but-no-join" @click="goToLogin">去登录<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</div>
<!-- 已登录，但没有加入机构 -->
<div v-if="isLogin && !isJoin" class="not-login-wrap ">
<img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
<img class="head-icon" src="../assets/img/stageTwo/not-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">{{appUserInfo.userName}}</p>
<p class="tips">尚未加入一个机构</p>
</div>
<div class="go-login login-but-nojoin" @click="goToJoin">加入机构<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</div>
<!-- 已登录 且 已加入机构 -->
<div v-if="isLogin && isJoin" class="user-info-wrap">
<img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt=""> <img class="gold-coin" src="../assets/img/stageTwo/gold-coin.png" alt="">
<div class="basic-info"> <div class="basic-info">
<div class="head-icon"> <div class="head-icon">
...@@ -39,49 +68,40 @@ ...@@ -39,49 +68,40 @@
<p class="name">召唤</p> <p class="name">召唤</p>
<p class="company">上海复旦大学附属中山医院</p> <p class="company">上海复旦大学附属中山医院</p>
</div> </div>
<div class="detail"> 个人明细<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div> <div @click="goToUserDetail" class="detail">个人明细<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</div> </div>
<ul class="billboard-wrap"> <ul class="billboard-wrap">
<li> <li>
<p class="title">个人今日勤奋分</p> <p class="title">个人今日勤奋分</p>
<p class="score">0</p> <p class="score">{{doctorInfo.userDayScore}}</p>
<p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">今日排名-</p> <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">今日排名{{doctorInfo.userDayRank}}</p>
<div class="billboard-btn">查看个人榜单<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div> <div @click="goToUserBoard" class="billboard-btn">查看个人榜单<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</li> </li>
<li class="organ"> <li class="organ">
<p class="title">机构累计勤奋分</p> <p class="title">机构累计勤奋分</p>
<p class="score">0</p> <p class="score">{{doctorInfo.hospitalScore}}</p>
<p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">排名-</p> <p class="rank"><img src="../assets/img/stageTwo/billboard-flag.png" alt="">累计排名{{doctorInfo.hospitalRank}}</p>
<div class="billboard-btn">查看机构榜单<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div> <div @click="goToOrganBoard" class="billboard-btn">查看机构榜单<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</li> </li>
</ul> </ul>
<p class="score-tips">再获得10勤奋分即可上升到前10名获得欧姆龙温度计</p> <p class="score-tips">再获得{{doctorInfo.targetRequiredScore}}勤奋分即可上升到前{{doctorInfo.targetRank}}名获得?????????</p>
<div class="bean-wrap"> <div class="bean-wrap">
<p class="personal-total-get">累计个人获得：<span>999999云鹊豆</span></p> <p class="personal-total-get">累计个人获得：<span>{{doctorInfo.userTotalBonus}}云鹊豆</span></p>
<div class="bean-center">云鹊豆中心<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div> <div class="bean-center">云鹊豆中心<img src="../assets/img/stageTwo/right-icon-small.png" alt=""></div>
</div> </div>
<p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p> <p class="bean-tips">机构勤奋分达成目标，全员可获云鹊豆</p>
<div class="bean-stage"> <div class="bean-stage">
<img src="../assets/img/stageTwo/bean-stage01.png" alt=""> <img src="../assets/img/stageTwo/bean-stage01.png" alt="">
<ul class="score-list"> <ul class="score-list">
<li>达2000分</li> <li v-for="item in doctorInfo.hospitalLevelScore">达{{item}}分</li>
<li>达3000分</li>
<li>达5000分</li>
<li>12月30日</li> <li>12月30日</li>
</ul> </ul>
</div> </div>
</div> -->
<!-- 未登录 -->
<div class="not-login-wrap">
<img class="head-icon" src="../assets/img/stageTwo/not-login-icon.png" alt="">
<div class="content-info">
<p class="not-login-text">您还未登录</p>
<p class="tips">登录并加入机构参加活动</p>
</div>
</div> </div>
</div> </div>
...@@ -92,41 +112,23 @@ ...@@ -92,41 +112,23 @@
<p class="invite-tips">每邀请1位医生好友领取课程，+20勤奋分 +20云鹊豆</p> <p class="invite-tips">每邀请1位医生好友领取课程，+20勤奋分 +20云鹊豆</p>
<div class="invite-list-wrap"> <div class="invite-list-wrap">
<ul class="invite-list"> <ul class="invite-list">
<li> <!-- 已邀请的 -->
<div class="add-btn"> <li v-for="item in inviteList">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt=""> <img @click="eachDoctorClick" v-if="item.avatarImageUrl" class="doctor-icon" :src="item.avatarImageUrl" alt="">
</div> <img @click="eachDoctorClick" v-else class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt="">
<!-- 注意 默认头像 --> <p class="text">{{ item.doctorName ? item.doctorName : item.mobile }}</p>
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li>
<li>
<div class="add-btn">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
<!-- 注意 默认头像 -->
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li>
<li>
<div class="add-btn">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
<!-- 注意 默认头像 -->
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li>
<li>
<div class="add-btn">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
<!-- 注意 默认头像 -->
<!-- <img class="doctor-icon" src="../assets/img/stageTwo/default-doctor-icon.png" alt=""> -->
<p class="text">185****7666</p>
</li> </li>
<!-- 未邀请的 -->
<template v-if="inviteList && inviteList.length < 4">
<li v-for="item in notInviteShowList">
<div class="add-btn" @click="eachDoctorClick">
<img src="../assets/img/stageTwo/add-pic-icon.png" alt="">
</div>
</li>
</template>
<!-- 查看更多 --> <!-- 查看更多 -->
<li> <li>
<div class="add-btn"> <div @click="seeMore" class="add-btn">
<img class="right-icon-big" src="../assets/img/stageTwo/right-icon-big.png" alt=""> <img class="right-icon-big" src="../assets/img/stageTwo/right-icon-big.png" alt="">
</div> </div>
<p class="text see-more">查看更多</p> <p class="text see-more">查看更多</p>
...@@ -135,7 +137,7 @@ ...@@ -135,7 +137,7 @@
</div> </div>
<div class="invite-btn"> <div class="invite-btn">
<img src="../assets/img/stageTwo/invite-btn.png" alt="" class="invite-btn"> <img src="../assets/img/stageTwo/invite-btn.png" alt="" class="invite-btn">
<p class="text">去邀请</p> <p @click="handleInviteClick" class="text">去邀请</p>
</div> </div>
<div class="login-tips">被邀请好友登录APP，收益X4倍</div> <div class="login-tips">被邀请好友登录APP，收益X4倍</div>
</div> </div>
...@@ -150,7 +152,7 @@ ...@@ -150,7 +152,7 @@
<p class="title">每日打卡</p> <p class="title">每日打卡</p>
<p class="detail-text">+5勤奋分 +5云鹊豆</p> <p class="detail-text">+5勤奋分 +5云鹊豆</p>
</div> </div>
<div class="right-btn done">已打卡</div> <div @click="handleClock" class="right-btn done">已打卡</div>
</li> </li>
<li> <li>
<img class="left-icon" src="../assets/img/stageTwo/hypertension-icon.png" alt=""> <img class="left-icon" src="../assets/img/stageTwo/hypertension-icon.png" alt="">
...@@ -158,7 +160,7 @@ ...@@ -158,7 +160,7 @@
<p class="title">高血压课程学习</p> <p class="title">高血压课程学习</p>
<p class="detail-text">+5勤奋分 +5云鹊豆</p> <p class="detail-text">+5勤奋分 +5云鹊豆</p>
</div> </div>
<div class="right-btn">去学习</div> <div @click="handleTaskClick" class="right-btn">去学习</div>
</li> </li>
<li> <li>
<img class="left-icon" src="../assets/img/stageTwo/smo-icon.png" alt=""> <img class="left-icon" src="../assets/img/stageTwo/smo-icon.png" alt="">
...@@ -166,7 +168,7 @@ ...@@ -166,7 +168,7 @@
<p class="title">高血压SMO项目任务</p> <p class="title">高血压SMO项目任务</p>
<p class="detail-text">奖励xxx勤奋分</p> <p class="detail-text">奖励xxx勤奋分</p>
</div> </div>
<div class="right-btn">去完成</div> <div @click="handleTaskClick" class="right-btn">去完成</div>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -206,18 +208,256 @@ ...@@ -206,18 +208,256 @@
</template> </template>
<script> <script>
import { getInviteList } from '@/service/activityMainpage';
let vm = null;
export default { export default {
data () { data () {
return { return {
clockSuccessVisible: false, // isFirstFresh: true,
activityEndVisible: false, isLogin: false, // 是否 已登录
isJoin: true, // 是否 已加入机构 默认为false
stageDateList: [
{ date: '12月16至19日', beginDate: '2019-12-16', endDate: '2019-12-19', title: '高血压学习' },
{ date: '12月20至23日', beginDate: '2019-12-20', endDate: '2019-12-23', title: '糖尿病学习' },
{ date: '12月24至26日', beginDate: '2019-12-24', endDate: '2019-12-26', title: '中医科学习' },
{ date: '12月27至29日', beginDate: '2019-12-27', endDate: '2019-12-29', title: '全科学习' },
],
appUserInfo: {
userName: '',
userMobile: '',
doctorId: '',
userToken: '',
// appVersion: '',
// systemType: '',
},
doctorInfo: {
userDayScore: '1000', // 用户当日勤奋分
userDayRank: '5', // 用户当日排名
hospitalScore: '6000', // 机构累计勤奋分
hospitalRank: '8', // 机构累计排名
userTotalBonus: '7777', // 个人累计获得云鹊豆
hospitalLevelScore: [100, 300, 700], // 三阶段达标分值, 数组返回
targetRequiredScore: '10', // 再获得多少分 // 再获得10勤奋分即可上升到前10名获得欧姆龙温度计
targetRank: '5', // 上升到多少名
},
championAward: [ // 第一名的奖励名称会根据日期变化
'小米电视 4C 32英寸', // 12.16-12.19
'米家洗衣机', // 12.20-12.23
'米家两门冰箱', // 12.24-12.26
'荣耀 Play3', // 12.27-12.29
],
rankLittleTips: {
first: '今日保持第1名，可获得小米电视',
before3: '第1名可获得小米电视，今日再拿X分即有机会上升到第1名',
before10: '前3名可获得血压计，今日再拿X分即有机会上升到第3名',
after10: '前10名可获得体温计，今日再拿X分即有机会上升到第10名',
},
clockSuccessVisible: false, // 是否显示 打卡成功 弹窗
activityEndVisible: false, // 是否显示 活动结束 弹窗
inviteList: [], // 已邀请的用户列表
notInviteShowList: [], // 未邀请的默认显示
} }
}, },
computed: {
// loginUserIcon() {
// if(){
// }else{
// return '../assets/img/stageTwo/not-login-icon.png';
// }
// },
// 顶部类似tab的显示逻辑
topDateStatus(item) {
// 获取当前时间？ 前端自己获取，还是 有个接口来返回服务器时间
let currentTime = new Date().getTime();
let beginDate = item.beginDate.split('-');
let endDate = item.endDate.split('-');
let beginTime = new Date(beginDate[0], beginDate[1], beginDate[2]).getTime();
let endTime = new Date(endDate[0], endDate[1], endDate[2]).getTime();
if( currentTime < beginTime ){
return '';
}
},
},
created() {
vm = this;
},
mounted() {
vm.$rocNative.appInit();
vm.getUserInfo();
// if (process.client) {
// window.__refresh = function(params) {
// vm.isFirstFresh = false;
// }
// }
},
methods: { methods: {
// 判断用户是否登录？
getUserInfo() {
vm.$rocNative
.getUserInfo()
.then(params => {
// _seft.userToken = params.userToken; // 存到store里
alert(JSON.stringify(params));
if(params && params.userMobile){
vm.isLogin = true;
vm.appUserInfo = params;
alert('已经获取了 登录token了')
// 登录且加入机构才获取医生邀请了的列表 ？？？？？？？？？？？？？？？？？？ 还是 已登录就获取，不论是否加入机构？
vm.loginCallback();
}else{
// alert('没获取到登录信息！！！')
}
});
},
// 调用APP登录弹窗
appLogin() {
vm.$rocNative.gotoLogin();
},
// 登陆ok后 回调： 获取邀请的医生列表等。。
loginCallback() {
let token = '5463439BE4444FF8BC47CC4575E9D550'; // 开发时用这个调用数据
// let token = vm.appUserInfo.userToken; // 正式上线 用这个！！！！
getInviteList(token).then(res => {
alert(JSON.stringify('获取邀请的列表 OK'));
alert(JSON.stringify(res));
if(res && res.code == '000000'){
// alert
if(res.data && res.data.list){
vm.inviteList = res.data.list;
alert(vm.inviteList.length)
if( vm.inviteList.length > 4 || vm.inviteList.length == 4 ){
vm.inviteList.length = 4;
vm.notInviteShowList = [];
}else{
let notInviteLength = 4 - vm.inviteList.length;
for(let i=0; i<notInviteLength; i++){
vm.notInviteShowList.push({
notInvite: true
})
}
}
}else{
vm.inviteList = [];
}
}
})
},
// 活动规则 // 活动规则
handleRuleBtnClick() { handleRuleBtnClick() {
alert('跳转至 活动规则页面') alert('跳转至 活动规则页面')
}, },
// 去登录
goToLogin() {
console.log('去登录...');
vm.appLogin();
},
// 去加入机构
goToJoin() {
console.log('去加入机构...')
// 用户点击【加入机构】，继续判断用户是否有创建机构在审核状态，若有，则弹出弹窗提示。若无则跳转加入机构页面
},
handleLoginCheck(cb) {
if( !this.isLogin ){ // 未登录 >>> 去登录
this.goToLogin();
}else if( this.isLogin && !this.isJoin ){ // 已登录 && 未加入机构 >>>> 去加入机构
this.goToJoin();
}else if( this.isLogin && this.isJoin ){ // 已登录 && 已加入机构 >>>> 去详情页？？
cb && cb();
}
},
// 跳转至 个人明细
goToUserDetail() {
console.log('跳转至 个人明细')
},
// 查看个人榜单
goToUserBoard() {
console.log('跳转至 个人榜单')
},
// 查看机构榜单
goToOrganBoard() {
console.log('跳转至 机构榜单')
},
// 云鹊豆中心
goToBeanCenter() {
console.log('云鹊豆中心')
},
// “邀请医生好友学课程” 列表中的每一个医生点击事件
eachDoctorClick() {
let cb = this.goToDoctorPage;
this.handleLoginCheck(cb);
},
// 去每个li医生详情页 ??????
goToDoctorPage() {
//“被邀请的用户模块“点击逻辑，点击用户头像、“+“或者查看更多，都跳转至邀请详情页
console.log('去邀请详情页....')
},
//“邀请医生好友学课程” 查看更多
seeMore() {
let cb = this.seeInviteMore;
this.handleLoginCheck(cb);
},
// 跳转至 “查看更多” 页面
seeInviteMore() {
console.log('去查看更多页面...');
},
// 去邀请 按钮
handleInviteClick() {
let cb = this.goToInvite;
this.handleLoginCheck(cb);
},
goToInvite() {
console.log('去邀请逻辑》》》')
},
// 去打卡 按钮
handleClock() {
let cb = this.goToClock;
this.handleLoginCheck(cb);
},
goToClock() {
console.log('执行打卡逻辑');
},
// 每个任务的跳转点击
handleTaskClick() {
let cb = this.goToTask;
this.handleLoginCheck(cb);
},
goToTask() {
console.log('do每个任务的跳转逻辑')
},
// request
getDoctorInfo() {
},
}, },
} }
</script>> </script>>
......
service/activityMainpage.js 0 → 100644
浏览文件 @ cfeaa4fc
// 年终活动第二期 主页面请求
import request from './api';
// 获取已邀请的医生列表
export const getInviteList = (token) => {
return request({
url: `campaign/inviteDetail/oneList?pageNo=1&pageSize=10`,
method: 'get',
headers: {
token: token
}
})
}
\ No newline at end of file
utils/jsbridge.js
浏览文件 @ cfeaa4fc
...@@ -16,7 +16,7 @@ export const JsBridgeOptions = { ...@@ -16,7 +16,7 @@ export const JsBridgeOptions = {
GLOBAL_NAME: 'rocNative', GLOBAL_NAME: 'rocNative',
NATIVE_IOS_NAME: 'rociOS', NATIVE_IOS_NAME: 'rociOS',
NATIVE_ANDROID_NAME: '__rocAndroid', NATIVE_ANDROID_NAME: '__rocAndroid',
initMethodsWithCallBack: ['getToken', 'getUserInfo','addEnclosure', 'getStatusBarHeight','getAppVersionCode'], // value is string initMethodsWithCallBack: ['getToken', 'getUserInfo','addEnclosure', 'getStatusBarHeight','getAppVersionCode','getLocalData'], // value is string
initMethodsWithoutCallBack: [ initMethodsWithoutCallBack: [
'appInit', 'appInit',
'goBack', 'goBack',
...@@ -33,8 +33,7 @@ export const JsBridgeOptions = { ...@@ -33,8 +33,7 @@ export const JsBridgeOptions = {
'setNeedClearUrl', 'setNeedClearUrl',
'dispatchEventByModuleCode', 'dispatchEventByModuleCode',
'sendBuriedPoint', 'sendBuriedPoint',
'openErrorDebug', 'openErrorDebug'
'getLocalData'
] // value is string ] // value is string
} }
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或