Skip to content

P
pica-cooperation-cme
提交 fa5d1b44 编写于 作者: huangwensu's avatar huangwensu
浏览文件
操作

添加申请学分提示框

上级 71f0e77a
隐藏空白字符变更
内嵌 并排
正在显示 包含 343 行增加 和 276 行删除
src/components/cme/cme-step.vue
浏览文件 @ fa5d1b44
<template> <template>
<div class="step-content"> <div class="step-content">
<p class="step-text step1-text" v-if="step1">学习进度{{studyProgress}}</p> <p class="step-text step1-text" v-if="step1">学习进度{{studyProgress}}</p>
<div class="step-item"> <div class="step-item">
<span :class="{'actived': step1 || step2 || step3 || step4}">1</span> <span :class="{'actived': step1 || step2 || step3 || step4}">1</span>
<p :class="{'actived': step1 || step2 || step3 || step4}">项目学习</p> <p :class="{'actived': step1 || step2 || step3 || step4}">项目学习</p>
</div>
<div class="step-line step-one-line" :class="{'actived': step2 || step3 || step4}"></div>
<p class="step-text step2-text" v-if="step2" @click="applyFor">立即申请></p>
<div class="step-item">
<span :class="{'actived': step2 || step3 || step4}">2</span>
<p :class="{'actived': step2 || step3 || step4}">申请学分</p>
</div>
<div class="step-line step-two-line" :class="{'actived': step3 || step4}"></div>
<p class="step-text step3-text" v-if="step3" @click="verifyResult">{{progressText}}></p>
<div class="step-item">
<span :class="{'actived': step3 || step4}">3</span>
<p :class="{'actived': step3 || step4}">学分审核</p>
</div>
<div class="step-line step-three-line" :class="{'actived': step4}"></div>
<p class="step-text step4-text" v-if="step4" @click="getScore">获得{{credit}}></p>
<div class="step-item">
<span :class="{'actived': step4}">4</span>
<p :class="{'actived': step4}">申请成功</p>
</div>
</div> </div>
<div class="step-line step-one-line" :class="{'actived': step2 || step3 || step4}"></div>
<p class="step-text step2-text" v-if="step2" @click="applyFor">立即申请></p>
<div class="step-item">
<span :class="{'actived': step2 || step3 || step4}">2</span>
<p :class="{'actived': step2 || step3 || step4}">申请学分</p>
</div>
<div class="step-line step-two-line" :class="{'actived': step3 || step4}"></div>
<p class="step-text step3-text" v-if="step3" @click="verifyResult">{{progressText}}></p>
<div class="step-item">
<span :class="{'actived': step3 || step4}">3</span>
<p :class="{'actived': step3 || step4}">学分审核</p>
</div>
<div class="step-line step-three-line" :class="{'actived': step4}"></div>
<p class="step-text step4-text" v-if="step4" @click="getScore">获得{{credit}}></p>
<div class="step-item">
<span :class="{'actived': step4}">4</span>
<p :class="{'actived': step4}">申请成功</p>
</div>
<!-- 申请学分提示框 -->
<div class="apply-score-content" v-if="showTip">
<div class="lm">
<img src="../../images/cme/hand.png" />
</div>
<div class="title">恭喜您完成该项目学习及考试,快去申请学分</div>
<div class="line"></div>
<div class="rm" @click="closeTip">
<img src="../../images/cme/delete.png" />
</div>
</div>
</div>
</template> </template>
<script> <script>
import { getWebPageUrl } from '@/utils/index'; import { getWebPageUrl } from "@/utils/index";
export default { export default {
props: { props: {
currentProgress: { currentProgress: {
type: Number, type: Number,
default: 0 default: 0
},
studyProgress: {
type: String,
default: "0%"
},
credit: {
type: String,
default: ""
},
creditId: {
type: Number,
default: 0
},
certificateUrl: {
type: String,
default: ""
}
}, },
data() { studyProgress: {
return { type: String,
step1: false, default: "0%"
step2: true,
step3: false,
step4: false,
progressText: "审核中"
}
}, },
watch: { credit: {
currentProgress(n,o) { type: String,
if(o == 1) { // 项目学习 default: ""
this.step1 = true; },
this.step2 = false; creditId: {
this.step3 = false; type: Number,
this.step4 = false; default: 0
}else if(o == 2) { // 申请学分
this.step1 = false;
this.step2 = true;
this.step3 = false;
this.step4 = false;
}else if(o == 3) { // 学分审核
this.step1 = false;
this.step2 = false;
this.step3 = true;
this.step4 = false;
this.progressText = "审核中";
}else if(o == 4) { // 审核失败
this.step1 = false;
this.step2 = false;
this.step3 = true;
this.step4 = false;
this.progressText = "审核失败";
}else if(o == 5) { // 申请成功
this.step1 = false;
this.step2 = false;
this.step3 = false;
this.step4 = true;
}
}
}, },
created() { certificateUrl: {
type: String,
default: ""
}
},
data() {
return {
step1: false,
step2: true,
step3: false,
step4: false,
progressText: "审核中",
showTip: false
};
},
watch: {
// currentProgress(n,o) {
// if(n == 1) { // 项目学习
// this.step1 = true;
// this.step2 = false;
// this.step3 = false;
// this.step4 = false;
// }else if(n == 2) { // 申请学分
// this.step1 = false;
// this.step2 = true;
// this.step3 = false;
// this.step4 = false;
// this.showTip = true;
// setInterval(() => {
// this.showTip = false;
// },5000)
// }else if(n == 3) { // 学分审核
// this.step1 = false;
// this.step2 = false;
// this.step3 = true;
// this.step4 = false;
// this.progressText = "审核中";
// }else if(n == 4) { // 审核失败
// this.step1 = false;
// this.step2 = false;
// this.step3 = true;
// this.step4 = false;
// this.progressText = "审核失败";
// }else if(n == 5) { // 申请成功
// this.step1 = false;
// this.step2 = false;
// this.step3 = false;
// this.step4 = true;
// }
// }
},
created() {},
methods: {
// 立即申请
applyFor() {
this.$emit("applicationCredit");
},
// 关闭提示
closeTip() {
this.showTip = false;
},
// 审核
verifyResult() {
let paramList = [
{
key: "pageUrl",
value: getWebPageUrl(`cme/#/credit-detail?id=${this.creditId}`),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}, },
methods: { // 获得学分--下载证书
// 立即申请 getScore() {
applyFor() { let paramList = [
this.$emit("applicationCredit"); {
key: "className",
value:
"com.picahealth.yunque.activitys.honor.CheckCertificatesActivity###YQWebView",
type: 4,
seqNo: 1
}, },
// 审核 {
verifyResult() { key: "url",
let paramList = [ value: this.certificateUrl,
{ type: 4,
"key":"pageUrl", seqNo: 2
"value": getWebPageUrl(`cme/#/credit-detail?id=${this.creditId}`),
"type":4,
"seqNo":1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: 'M300',
jsonString: paramList
});
}, },
// 获得学分--下载证书 {
getScore() { key: "navTitle",
let paramList = [ value: "学分详情",
{ type: 4,
key: "className", seqNo: 4
value: "com.picahealth.yunque.activitys.honor.CheckCertificatesActivity###YQWebView", },
type: 4, {
seqNo: 1 key: "isNotTab",
}, value: true,
{ type: 4,
key: "url", seqNo: 5
value: this.certificateUrl, },
type: 4, {
seqNo: 2 key: "isShowDownload",
}, value: true,
{ type: 4,
key: "navTitle", seqNo: 6
value: "学分详情",
type: 4,
seqNo: 4
},
{
key: "isNotTab",
value: true,
type: 4,
seqNo: 5
},
{
key: "isShowDownload",
value: true,
type: 4,
seqNo: 6
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
} }
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../style/mixin"; @import "../../style/mixin";
.step-content { .step-content {
position: relative; position: relative;
height: px2rem(110px); height: px2rem(110px);
background:rgba(248,249,250,1); background: rgba(248, 249, 250, 1);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.step-item { .step-item {
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
padding-top: px2rem(20px); padding-top: px2rem(20px);
line-height: px2rem(20px); line-height: px2rem(20px);
span { span {
display: inline-block; display: inline-block;
width: px2rem(20px); width: px2rem(20px);
height: px2rem(20px); height: px2rem(20px);
line-height: px2rem(17px); line-height: px2rem(17px);
border-radius: 50%; border-radius: 50%;
background: #676869; background: #676869;
border:2px solid rgba(255,255,255,1); border: 2px solid rgba(255, 255, 255, 1);
color: #fff; color: #fff;
font-size: px2rem(12px); font-size: px2rem(12px);
font-weight: 700; font-weight: 700;
}
span.actived {
background: #449284;
}
p {
font-size: px2rem(13px);
color: #373839;
}
p.actived {
color: #449284;
}
} }
.step-line { span.actived {
position: absolute; background: #449284;
top: px2rem(60px);
width: px2rem(75px);
height: px2rem(3px);
background: #DADDE1;
} }
.step-one-line { p {
left: px2rem(56px); font-size: px2rem(13px);
color: #373839;
} }
.step-two-line { p.actived {
left: px2rem(150px); color: #449284;
} }
.step-three-line { }
right: px2rem(56px); .step-line {
} position: absolute;
.step-one-line.actived, .step-two-line.actived, .step-three-line.actived{ top: px2rem(60px);
background: #449284; width: px2rem(75px);
} height: px2rem(3px);
.step-text { background: #dadde1;
position: absolute; }
top: px2rem(25px); .step-one-line {
padding: px2rem(4px) px2rem(6px); left: px2rem(56px);
background: #449284; }
border-radius: px2rem(10px); .step-two-line {
font-size: px2rem(12px); left: px2rem(150px);
line-height: px2rem(12px); }
color: #fff; .step-three-line {
} right: px2rem(56px);
.step1-text { }
left: px2rem(20px); .step-one-line.actived,
} .step-two-line.actived,
.step1-text:after { .step-three-line.actived {
content: ""; background: #449284;
width: px2rem(0px); }
height: px2rem(0px); .step-text {
border-top: px2rem(5px) solid #449284; position: absolute;
border-left: px2rem(5px) solid transparent; top: px2rem(25px);
border-right: px2rem(5px) solid transparent; padding: px2rem(4px) px2rem(6px);
position: absolute; background: #449284;
top: px2rem(20px); border-radius: px2rem(10px);
left: px2rem(22px); font-size: px2rem(12px);
} line-height: px2rem(12px);
.step2-text { color: #fff;
left: px2rem(106px); }
} .step1-text {
.step2-text:after, .step3-text:after{ left: px2rem(20px);
content: ""; }
width: px2rem(0px); .step1-text:after {
height: px2rem(0px); content: "";
border-top: px2rem(5px) solid #449284; width: px2rem(0px);
border-left: px2rem(5px) solid transparent; height: px2rem(0px);
border-right: px2rem(5px) solid transparent; border-top: px2rem(5px) solid #449284;
position: absolute; border-left: px2rem(5px) solid transparent;
top: px2rem(20px); border-right: px2rem(5px) solid transparent;
left: px2rem(30px); position: absolute;
} top: px2rem(20px);
.step3-text { left: px2rem(22px);
left: px2rem(207px); }
.step2-text {
left: px2rem(106px);
}
.step2-text:after,
.step3-text:after {
content: "";
width: px2rem(0px);
height: px2rem(0px);
border-top: px2rem(5px) solid #449284;
border-left: px2rem(5px) solid transparent;
border-right: px2rem(5px) solid transparent;
position: absolute;
top: px2rem(20px);
left: px2rem(30px);
}
.step3-text {
left: px2rem(207px);
}
.step3-text:after {
content: "";
width: px2rem(0px);
height: px2rem(0px);
border-top: px2rem(5px) solid #449284;
border-left: px2rem(5px) solid transparent;
border-right: px2rem(5px) solid transparent;
position: absolute;
top: px2rem(20px);
left: px2rem(22px);
}
.step4-text {
right: px2rem(20px);
}
.step4-text:after {
content: "";
width: px2rem(0px);
height: px2rem(0px);
border-top: px2rem(5px) solid #449284;
border-left: px2rem(5px) solid transparent;
border-right: px2rem(5px) solid transparent;
position: absolute;
top: px2rem(20px);
right: px2rem(20px);
}
.apply-score-content {
display: flex;
position: absolute;
left: px2rem(105px);
top: px2rem(-42px);
background: #000;
opacity: 0.6;
width: px2rem(236px);
height: px2rem(51px);
border-radius: px2rem(6px);
.title {
font-size: px2rem(12px);
color: rgba(255, 255, 255, 1);
margin: px2rem(7px) px2rem(11px) 0 px2rem(0px);
width: px2rem(133px);
} }
.step3-text:after{ .lm {
content: ""; width: px2rem(41px);
width: px2rem(0px); img {
height: px2rem(0px); display: inline-block;
border-top: px2rem(5px) solid #449284; width: px2rem(20px);
border-left: px2rem(5px) solid transparent; padding: 0 0 px2rem(7px) px2rem(15px);
border-right: px2rem(5px) solid transparent; }
position: absolute;
top: px2rem(20px);
left: px2rem(22px);
} }
.step4-text { .line {
right: px2rem(20px); width: px2rem(1px);
height: px2rem(51px);
background: #fff;
opacity: 0.18;
} }
.step4-text:after{ .rm {
content: ""; width: px2rem(41px);
width: px2rem(0px); img {
height: px2rem(0px); display: inline-block;
border-top: px2rem(5px) solid #449284; width: px2rem(15px);
border-left: px2rem(5px) solid transparent; padding: 0 px2rem(15px) px2rem(7px);
border-right: px2rem(5px) solid transparent; }
position: absolute;
top: px2rem(20px);
right: px2rem(20px);
} }
}
} }
</style> </style>
\ No newline at end of file
src/views/merge-detail.vue
浏览文件 @ fa5d1b44
...@@ -75,6 +75,7 @@ ...@@ -75,6 +75,7 @@
</div> </div>
</div> </div>
<Loading v-show="showLoading" /> <Loading v-show="showLoading" />
<!-- 弹框 -->
<CommonDialog <CommonDialog
:isShowDialog="isShowDialog" :isShowDialog="isShowDialog"
:isSingle="isSingle" :isSingle="isSingle"
...@@ -113,6 +114,7 @@ import vueFilters from "@/utils/filter"; ...@@ -113,6 +114,7 @@ import vueFilters from "@/utils/filter";
export default { export default {
data() { data() {
return { return {
premissionFlag: false,
isSingle: false, isSingle: false,
dialogContent: "", // 弹框内容 dialogContent: "", // 弹框内容
confirmBtnText: "", // 弹框按钮 confirmBtnText: "", // 弹框按钮
...@@ -216,7 +218,6 @@ export default { ...@@ -216,7 +218,6 @@ export default {
// _this.getProjectParticularsV2(); // _this.getProjectParticularsV2();
_this.getUserInfo(); _this.getUserInfo();
}; };
_this.permission(); // 提示是否有机构和在申请范围内
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.scrollFun); window.addEventListener("scroll", this.scrollFun);
...@@ -256,6 +257,26 @@ export default { ...@@ -256,6 +257,26 @@ export default {
this.tabFlag = true; this.tabFlag = true;
} }
}, },
// token是否失效校验
checkToken() {
let _this = this;
let param = {
token: _this.userInfo.userToken,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
if (res.code !== "000000") {
//未登录 跳转登录页
console.log("跳登录");
rocNative.gotoLogin();
}else {
if(!_this.premissionFlag) {
_this.premissionFlag = true;
_this.permission(); // 提示是否有机构和在申请范围内
}
}
});
},
//(判断是否加入机构，是否为认证用户，是否在申请范围内) //(判断是否加入机构，是否为认证用户，是否在申请范围内)
permission() { permission() {
let _this = this; let _this = this;
...@@ -346,21 +367,6 @@ export default { ...@@ -346,21 +367,6 @@ export default {
this.isBlack = true; this.isBlack = true;
this.bgColor = "#fff"; this.bgColor = "#fff";
}, },
// token是否失效校验
checkToken() {
let _this = this;
let param = {
token: _this.userInfo.userToken,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
if (res.code !== "000000") {
//未登录 跳转登录页
console.log("跳登录");
rocNative.gotoLogin();
}
});
},
// 获取项目详情 // 获取项目详情
getProjectParticularsV2() { getProjectParticularsV2() {
let _this = this; let _this = this;
...@@ -387,10 +393,10 @@ export default { ...@@ -387,10 +393,10 @@ export default {
_this.projectLeader = res.data.projectLeader; _this.projectLeader = res.data.projectLeader;
_this.doctorList = res.data.doctorList; _this.doctorList = res.data.doctorList;
if (_this.project.currentProgress == 2) { if (_this.project.currentProgress == 2) {
this.dialogContent = // this.dialogContent =
"恭喜您已经完成该项目学习及考试，快去申请学分吧"; // "恭喜您已经完成该项目学习及考试，快去申请学分吧";
this.confirmBtnText = "立即申请"; // this.confirmBtnText = "立即申请";
this.isShowDialog = true; // this.isShowDialog = true;
} }
//_this.projectStatus = res.data.projectStatus; //_this.projectStatus = res.data.projectStatus;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或