提交 ef8a9652 编写于 作者: huangwensu's avatar huangwensu

详情页接口联调

上级 efe1b623
...@@ -3,29 +3,57 @@ ...@@ -3,29 +3,57 @@
<div class="basic-title">基本信息</div> <div class="basic-title">基本信息</div>
<div class="content"> <div class="content">
<span>项目名称</span> <span>项目名称</span>
<span>GWKX-20180326-42843</span> <span>{{projectNo}}</span>
</div> </div>
<div class="content"> <div class="content">
<span>学习收获</span> <span>学习收获</span>
<span>国家级Ⅰ类 3学分</span> <span>{{level}} {{credit}}学分</span>
</div> </div>
<div class="content"> <div class="content">
<span>申请范围</span> <span>申请范围</span>
<span>河北省 石家庄</span> <span>{{scope}}</span>
</div>
<div class="content remind" v-if="remind">
<span>{{remind}}</span>
</div> </div>
<div class="content"> <div class="content">
<span>起止时间</span> <span>起止时间</span>
<span>2020.03.01至2020.12.3</span> <span>{{startDate}}{{endDate}}</span>
</div> </div>
<div class="content"> <div class="content">
<span>发起机构</span> <span>发起机构</span>
<span>云鹊医</span> <span>{{organName}}</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
projectNo: {
default: "GWKX-20180326-42843"
},
credit: {
default: "3"
},
level: {
default: "国家级Ⅰ类"
},
scope: {
default: "河北省 石家庄"
},
startDate: {
default: "2020.03.01"
},
endDate: {
default: "2020.12.3"
},
organName: {
default: "云鹊医"
},
remind: {
default: ""
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -55,5 +83,27 @@ export default { ...@@ -55,5 +83,27 @@ export default {
color: #676869; color: #676869;
} }
} }
.content.remind {
span {
display: inline-block;
padding: px2rem(5px) px2rem(10px);
margin-left: px2rem(78px);
font-size: px2rem(14px);
color: #FB5B52;
background: #FCEEED;
border-radius: px2rem(4px);
}
span:after {
content: "";
position: absolute;
left: px2rem(105px);
bottom: px2rem(70px);
width: 0;
height: 0;
border-width: 0 px2rem(8px) px2rem(8px);
border-style: solid;
border-color: transparent transparent #FCEEED;
}
}
} }
</style> </style>
\ No newline at end of file
...@@ -27,14 +27,43 @@ ...@@ -27,14 +27,43 @@
</template> </template>
<script> <script>
export default { export default {
props: {
currentProgress: {
type: Number,
default: 0
}
},
data() { data() {
return { return {
step1: false, step1: false,
step2: true, step2: false,
step3: false, step3: false,
step4: false step4: false
} }
}, },
created() {
if(this.currentProgress == 1) { // 项目学习
this.step1 = true;
this.step2 = false;
this.step3 = false;
this.step4 = false;
}else if(this.currentProgress == 2) { // 申请学分
this.step1 = false;
this.step2 = true;
this.step3 = false;
this.step4 = false;
}else if(this.currentProgress == 3) { // 学分审核
this.step1 = false;
this.step2 = false;
this.step3 = true;
this.step4 = false;
}else if(this.currentProgress == 4) { // 申请成功
this.step1 = false;
this.step2 = false;
this.step3 = false;
this.step4 = true;
}
},
methods: { methods: {
// 立即申请 // 立即申请
applyFor() { applyFor() {
......
...@@ -13,16 +13,18 @@ ...@@ -13,16 +13,18 @@
</template> </template>
<script> <script>
export default { export default {
props: {
textContent: {
type: String,
default: ''
}
},
data() { data() {
return { return {
textContent: '《健康中国2030规划纲要》提出“以全科医生为重点,加强基层人才队伍建设”。基层全科医生囿于传统固有的书本型以及经验型思维模式,习惯接受临床上习惯接受临床上习惯接受临床上。',
newText: '', newText: '',
btnText: '详情', btnText: '详情',
allTextFlag: false allTextFlag: false
} }
},
created() {
}, },
mounted() { mounted() {
if(this.textContent.length > 69) { if(this.textContent.length > 69) {
......
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<div class="item-leader-container"> <div class="item-leader-container">
<div class="basic-title">项目负责人</div> <div class="basic-title">项目负责人</div>
<div class="leader-info"> <div class="leader-info">
<img src="../../images/video-cover.png"/> <img :src="projectLeader.appImageUrl"/>
<div class="leader-text"> <div class="leader-text">
<span>王荣英</span> <span>{{projectLeader.name}}</span>
<span>主任医师 教授 硕士生导师</span> <span>{{projectLeader.title}}</span>
<div class="address">河北医科大学第二医院</div> <div class="address">{{projectLeader.hospital}}</div>
</div> </div>
</div> </div>
<div class="content"> <div class="content">
...@@ -21,9 +21,14 @@ ...@@ -21,9 +21,14 @@
</template> </template>
<script> <script>
export default { export default {
props: {
projectLeader: {
type: Object,
default: () => {}
}
},
data() { data() {
return { return {
textContent: '全科医疗科主任,主任医师,教授,博士学位,硕士生导师,河北省医学会全科医学分会委员。主要专业特长:常见病、多发病的诊治、预防、康复常见病、多发病的诊治、预防',
newText: '', newText: '',
btnText: '详情', btnText: '详情',
allTextFlag: false allTextFlag: false
...@@ -33,20 +38,20 @@ export default { ...@@ -33,20 +38,20 @@ export default {
}, },
mounted() { mounted() {
if(this.textContent.length > 66) { if(this.projectLeader.info.length > 66) {
this.newText = this.textContent.slice(0,66) + "..."; this.newText = this.projectLeader.info.slice(0,66) + "...";
}else { }else {
this.newText = this.textContent; this.newText = this.projectLeader.info;
} }
}, },
methods: { methods: {
allText() { allText() {
if(!this.allTextFlag) { if(!this.allTextFlag) {
this.newText = this.textContent; this.newText = this.projectLeader.info;
this.btnText = '收起'; this.btnText = '收起';
this.allTextFlag = true; this.allTextFlag = true;
}else { }else {
this.newText = this.textContent.slice(0,66) + "...";; this.newText = this.projectLeader.info.slice(0,66) + "...";;
this.btnText = '详情'; this.btnText = '详情';
this.allTextFlag = false; this.allTextFlag = false;
} }
......
...@@ -2,14 +2,18 @@ ...@@ -2,14 +2,18 @@
<div class="learn-know-container"> <div class="learn-know-container">
<div class="basic-title">学习须知</div> <div class="basic-title">学习须知</div>
<div class="content"> <div class="content">
<span>1、必须在该项目页内学完所有课程,平台其它栏目课程进度不计入本项目; </span> <span>{{mustKnow}}</span>
<span>2、该项目每一章节课程必须按顺序学完并参与考试,且首次学习不允许跳过、快进等;学习时长均需达到80%及以上,考试成绩均在80分及以上判定为通过。</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
mustKnow: {
type: String,
default: ''
}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
<template> <template>
<div class="teacter-intro-container"> <div class="teacter-intro-container">
<div class="basic-title">讲师介绍</div> <div class="basic-title">讲师介绍</div>
<div class="leader-info"> <div class="leader-info" v-for="(item,index) in doctorList" :key="index">
<img src="../../images/video-cover.png"/> <img :src="item.appImageUrl"/>
<div class="leader-text"> <div class="leader-text">
<span>王荣英</span> <span>{{item.name}}</span>
<span>主任医师 教授 硕士生导师</span> <span>{{item.title}}</span>
<div class="address">河北医科大学第二医院</div> <div class="address">{{item.hospital}}</div>
</div>
</div>
<div class="leader-info">
<img src="../../images/video-cover.png"/>
<div class="leader-text">
<span>王荣英</span>
<span>主任医师 教授 硕士生导师</span>
<div class="address">河北医科大学第二医院</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: {
doctorList: {
type: Array,
default: () => []
}
},
data() { data() {
return { return {
......
<template> <template>
<div> <div class="desc-container">
<div class="desc-title" v-show="isShowTitle"> <div class="desc-title">
<span>{{descTitle}}</span> <span>{{projectName}}</span>
</div> </div>
<div class="desc-detail"> <div class="desc-detail">
<span class="desc_text" v-html="message"></span> <span class="desc_text" v-if="studyNum && subject">{{studyNum}}人已学/{{subject}}</span>
<!-- <CommonSpliteLine></CommonSpliteLine> -->
<!-- <div class="split-line"></div> -->
<!-- <div class="desc_text_tp" @click="showDesc()">
<span v-show="!isShowFlag">显示全部</span>
<span v-show="isShowFlag">收起</span>
</div> -->
</div> </div>
</div> </div>
</template> </template>
...@@ -20,109 +14,73 @@ export default { ...@@ -20,109 +14,73 @@ export default {
name: "common-description", name: "common-description",
data() { data() {
return { return {
isShowFlag: false
}; };
}, },
computed: {
CommonSpliteLine
},
props: { props: {
isShowTitle: { projectName: {
type: Boolean,
default: true
},
descTitle: {
type: String, type: String,
default: "" default: "全科医学诊疗思维与实务项目"
},
studyNum: {
type: Number,
default: 28000
}, },
value: { subject: {
type: String, type: String,
default: "" default: "全科医学"
} }
}, },
created() {}, created() {},
mounted() {}, mounted() {
computed: { if(this.studyNum > 1000 && this.studyNum < 10000) {
message: function() { this.studyNum = this.studyNum / 1000 + 'k';
// return this.isShowFlag }else if(this.studyNum > 10000) {
// ? '<span style="color: red;">简介</span>' + this.value this.studyNum = this.studyNum / 10000 + 'w';
// : '<span style="color: red;">简介</span>' +
// this.value.slice(0, 34) +
// "...";
let shortMsg = this.value || "";
if (shortMsg.length > 63) {
shortMsg = this.value.slice(0, 63) + "...";
}
return this.isShowFlag ? this.value : shortMsg;
} }
}, },
methods: { methods: {
showDesc() {
this.isShowFlag = !this.isShowFlag;
}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../style/mixin"; @import "../../style/mixin";
.desc-title { .desc-container {
display: flex; padding: px2rem(20px) px2rem(15px);
padding: px2rem(15px); .desc-title {
padding-bottom: 0px; display: flex;
line-height: px2rem(22px); padding-bottom: 0px;
font-weight: 700; line-height: px2rem(22px);
color: rgba(51, 51, 51, 1);
span {
font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(18px);
font-weight: 700; font-weight: 700;
span {
font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(18px);
font-weight: 700;
color: #333333;
}
} }
.desc-detail {
display: flex;
position: relative;
word-break: normal;
// margin-bottom: px2rem(40px);
// height: px2rem(60px);
.desc_text {
padding-top: px2rem(6px);
font-size: px2rem(13px);
color: #676869;
line-height: px2rem(25px);
letter-spacing: 1px;
word-wrap: break-word;
word-break: break-all;
// word-break: normal;
text-align: justify;
flex-direction: row;
flex-wrap: wrap;
}
}
} }
.desc-detail {
display: flex;
position: relative;
word-break: normal;
margin-bottom: px2rem(40px);
// height: px2rem(60px);
}
.display-none {
position: fixed;
top: 0;
visibility: hidden;
}
.desc_text {
padding: px2rem(15px);
padding-top: px2rem(6px);
font-size: px2rem(14px);
color: #999999;
line-height: px2rem(25px);
letter-spacing: 1px;
word-wrap: break-word;
word-break: break-all;
// word-break: normal;
text-align: justify;
flex-direction: row;
flex-wrap: wrap;
}
.desc_text_tp {
position: absolute;
left: 0;
bottom: px2rem(-30px);
// left: 50%;
// transform: translateX(px2rem(-32px));
width: 100%;
text-align: center;
font-size: px2rem(16px);
font-weight: 700;
color: #cccccc;
// border-top: 1px solid #f1f1f1;
}
.split-line {
display: flex;
width: 92%;
position: absolute;
left: 4%;
bottom: px2rem(0px);
border-bottom: 0.5px solid #f1f1f1;
}
</style> </style>
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册