提交 d54a689a 编写于 作者: kai.wang's avatar kai.wang

修改冲突

......@@ -21,7 +21,7 @@
<article @click.stop="deleteFlow()" class="cell-container">
<span class="" v-for="(item, index) in portalModule.contentList" :key="index">
<div v-if="index > 0 && portalModule.contentList[index].templetId!= portalModule.contentList[index-1].templetId" class="bottom-line"></div>
<div class="cell-container-item" @click="gotoExamOrCourse(item)" >
<div class="cell-container-item" >
<div class="name">
<div class="name-img">
<img v-if="item.type == 1 && item.useFlag == 1" class="img-icon" src="../../images/exam.png">
......@@ -29,26 +29,17 @@
<img v-if="item.type == 2 && item.useFlag == 1" class="img-icon" src="../../images/learn.png">
<img v-if="item.type == 2 && item.useFlag == 2" class="img-icon" src="../../images/learn-dark.png">
</div>
<!-- <div class="name-logo" :class="{'name-learn': item.type == 2, 'name-logo-no': item.useFlag == 2}" >
{{item.type | contentType}}
</div> -->
<p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
<!-- <span v-if="item.certificateFlag !== 2 && index == 0">
<img class="cert-img" src="../../images/has-owner-cert.png">
</span> -->
</div>
<!-- 'bg-13': item.status == 13 -->
<span
@click="gotoExamOrCourse(item)"
v-show="hasBindCard"
class="text-action"
:class="{'text-action-no': item.useFlag == 2}"
>
<!-- <img v-show="item.status == 13" class="text-action-dh" src="../../images/icon-dh.png"> -->
{{getActionText(item.status)}}
</span>
<!-- <div class="connect-line"
:class="{'len1': item.height === 1, 'len2': item.height === '1','len3': item.height === 2, 'len4': item.height === '2', 'line-complete': index+1 < portalModule.contentList.length && portalModule.contentList[index+1].useFlag == 1}"
v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId">
</div> -->
<img @click="toastToBuy" class="key" v-show="!hasBindCard" src="../../images/cme/phrase2/key.png" alt="">
<div class="foot-line"
v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId">
</div>
......@@ -60,12 +51,7 @@
</article>
</van-collapse-item>
</van-collapse>
<!-- <Toast ref="toastTitle"></Toast> -->
<!-- <div v-if="index+1 < projectComponent.length" class="line-component"></div> -->
</div>
<!-- <NoMoreContent v-if="detailNum > 9" /> -->
<!-- <NoMoreContent />
<div v-if="detailNum <= 9" class="no-more-bottom"></div> -->
<van-dialog
v-model="dialogState"
title="标题"
......@@ -75,11 +61,9 @@
</template>
<script>
// import CommonTitle from "@/components/common/common-title";
import MergeTitle from "@/components/business/merge-title";
import NoMoreContent from "@/components/business/no-more-content";
import CertShow from "@/components/business/cert-show";
// import Toast from "@/components/common/common-toast";
import { Collapse, CollapseItem, Dialog, Toast } from 'vant';
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
......@@ -114,14 +98,10 @@ export default {
};
},
props: {
// moduleName: {
// type: String,
// default: ""
// },
// paramData: {
// type: Array,
// default: () => []
// },
hasBindCard: {
type: Boolean,
default: false
},
projectComponent: {
type: Array,
default: () => []
......@@ -144,10 +124,8 @@ export default {
},
components: {
MergeTitle,
// CommonTitle,
CertShow,
NoMoreContent,
// Toast,
Dialog,
},
watch:{
......@@ -200,7 +178,6 @@ export default {
paramList = [
{
key: "className",
// value: "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController",
type: 4,
seqNo: 1
......@@ -281,6 +258,11 @@ export default {
console.log('item',item);
Toast('尚未开始,敬请期待');
}
},
// 弹框提示
toastToBuy() {
Toast('购买后可学习课程');
}
}
};
......@@ -423,17 +405,11 @@ export default {
position: relative;
display: flex;
flex-direction: row;
// margin: px2rem(6px) px2rem(0px);
// height: px2rem(51px);
margin-bottom: px2rem(39px);
line-height: px2rem(51px);
font-size: px2rem(15px);
// padding: px2rem(0px) px2rem(15px);
// background: rgba(248, 249, 250, 1);
// border-bottom: 1px solid #f0f0f0;
// border-radius: px2rem(6px);
justify-content: space-between;
// align-items: center;
align-items: center;
.name {
.name-img {
position: relative;
......@@ -558,6 +534,10 @@ export default {
color: #c7c8c9;
}
}
.key {
width: px2rem(15px);
height: px2rem(15px);
}
}
span {
.cert-img {
......
<template>
<!-- 专项合作列表 -->
<section class="coop-container">
<div
v-show="paramData.length && isShow"
v-for="(item , index) in paramData"
:key="index"
class="coop-item"
@click="coopDetails(item)"
>
<div class="coop-item-left">
<img :src="item.imgUrl" />
<span
v-if="item.projectStatusValue"
class="coop-container-status"
:style="{'background': cBgColor(item)}"
>{{item.projectStatusValue | statusText}}</span>
</div>
<div class="coop-item-right">
<span class="coop-item-right-title">{{item.name}}</span>
<span class="coop-item-right-other">{{item.level}} | {{item.credit}} | {{item.scope}}</span>
<!-- <span v-if="item.pType == 1"
class="coop-item-right-other"
>起止日期 {{item.oldTime}}</span>-->
<!-- <span v-else
class="coop-item-right-other"
>起止日期 {{item.projectBegintimeLong | formatTime}}-{{item.projectEndtimeLong | formatTime}}</span>-->
<span class="coop-item-right-other">{{item.startDate | formatTime('{y}.{m}.{d}')}}{{item.endDate | formatTime('{y}.{m}.{d}')}}</span>
</div>
</div>
<NoMoreContent v-show="paramData.length > 9"></NoMoreContent>
<NoContent v-show="!paramData.length && isShow" :tabNum="tabTo"></NoContent>
<!--<UpdateDialog :showGoUpdate="showGoUpdate" @goUpdateHandler="goUpdateHandler"></UpdateDialog>-->
<!-- <van-popup
v-model="showGoUpdate"
position="bottom"
:style="{ height: '4.427rem' }"
>
<div class="update-dialog-content">
<p class="title">该项目仅对河北石家庄市的用户开放</p>
<p class="update-btn v-hairline-top confirm-btn" @click="goUpdateHandler">确定</p>
<p class="update-btn v-hairline-top" @click="showGoUpdate = false">取消</p>
</div>
</van-popup>-->
</section>
</template>
<script>
import NoMoreContent from "@/components/business/no-more-content";
import NoContent from "@/components/business/no-content";
import UpdateDialog from "@/components/business/update-dialog";
import { setEventByModuleCode, deepCopy, getWebPageUrl } from "@/utils/index";
import { getAppVersion } from "@/utils";
import { mapActions, mapGetters } from "vuex";
import { Popup } from "vant";
export default {
name: "coop-list-item",
data() {
return {
bgColor: "green",
statusText: "进行中",
showGoUpdate: false
};
},
props: {
paramData: {
type: Array,
default: () => []
},
coopType: {
type: Number,
default: 1
},
isShow: {
type: Boolean,
default: false
},
tabTo: {
type: Number,
default: 1
},
userMobile: {
type: String,
default: ""
},
provinceId: {
type: String | Number,
default: 0
},
organizationId: {
type: String | Number,
default: 0
},
},
computed: {
...mapGetters(["userInfo"])
// cBgColor() {
// }
},
components: {
NoMoreContent,
NoContent,
UpdateDialog
},
mounted() {},
filters: {
statusText(status) {
if (status === 1) {
return "参加中";
} else if (status === 5) {
return "进行中";
} else if (status === 10) {
return "已结束";
} else {
return "已结束";
}
}
},
methods: {
...mapActions(["setProjectTabIndex"]),
cBgColor(item) {
if (item.projectStatusValue === 1) {
return "#5890DD";
} else if (item.projectStatusValue === 5) {
return "#449284";
} else if (item.projectStatusValue === 10) {
return "#373839";
} else {
return "#5890DD";
}
},
coopDetails(item) {
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
console.log('appVersionNum', appVersionNum);
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
// 临时添加
if(window.__isWeb) {
this.$router.push({
path: "/coop",
query: {
id: item.id,
coopType: this.coopType,
courseRequire: item.courseRequire
}
});
return;
}
if (this.userMobile) {
let paramList = [
{
key: "pageUrl",
value: getWebPageUrl(`cme/#/coop?id=${item.id}&courseRequire=${item.courseRequire}`),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
} else {
rocNative.gotoLogin();
}
this.$sendBuriedData({
component_tag: `210#210002#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
});
// if (item.courseRequire == 1) { //对课程完成度有控制,需判断版本号
// let appVersion = getAppVersion(this.userInfo.appVersion);
// // alert('版本'+appVersion)
// let flag = appVersion < 315;
// if (flag === true) {
// // 小于315版本,添加去更新弹层
// this.showGoUpdate = true;
// }else {
// // 跳转到老项目
// if(this.tabTo != 3) {
// this.setProjectTabIndex(this.tabTo)
// }
// if (item.pType == 1) {
// this.goToPage(item);
// // 跳转到新项目
// } else {
// this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
// }
// }
// } else {
// // 跳转到老项目
// if(this.tabTo != 3) {
// this.setProjectTabIndex(this.tabTo)
// }
// if (item.pType == 1) {
// this.goToPage(item);
// // 跳转到新项目
// } else {
// this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
// // this.$router.push({
// // path: "/coop",
// // query: {
// // id: item.id,
// // coopType: this.coopType
// // }
// // });
// }
// }
},
// 跳转到新项目
// showModule(item, coopType, tabTo, courseRequire) {
// if (window.__isWeb) {
// if(item.parent === false) {
// this.$router.push({
// path: "/coop",
// query: {
// id: item.id,
// coopType: coopType,
// tabTo: tabTo,
// courseRequire: courseRequire,
// }
// });
// } else {
// this.$router.push({
// path: "/parent",
// query: {
// entryId: item.entryId,
// }
// });
// }
// return;
// }
// let pageUrl = "";
// let paramList = [];
// if(item.parent === false) {
// pageUrl = getWebPageUrl('cme/#/coop');
// paramList = [
// {
// key: "pageUrl",
// value: pageUrl + `?id=${item.id}&coopType=${coopType}&tabTo=${tabTo}&courseRequire=${courseRequire}`,
// type: 4,
// seqNo: 1
// }
// ]
// } else {
// pageUrl = getWebPageUrl('cme/#/parent');
// paramList = [
// {
// key: "pageUrl",
// value: pageUrl + `?entryId=${item.entryId}`,
// type: 4,
// seqNo: 1
// }
// ]
// }
// rocNative.dispatchEventByModuleCode({
// modeCode: "M300",
// jsonString: paramList
// });
// },
goToPage(item) {
let _this = this;
// 如果是湖北考试项目,则做相应权限判断 湖北的projectId=3
if (item.id == "3") {
if (!_this.userInfo.userToken) {
rocNative.gotoLogin();
return;
}
let param = {
type: 1,
token: _this.userInfo.userToken || _this.token,
setEntry: true
};
this.GET("portal/portalApp/role/3", param).then(res => {
if (res.code == "000000") {
// {
// "data": 0, // 0就是无权限,1有权限
// "code": "000000",
// "message": "成功"
// }
if (res.data == 0) {
rocNative.showNativeToast({
message: "您不属于该项目,无法查看"
});
return;
}
} else {
rocNative.gotoLogin();
return;
}
_this.goToPage1(item.contentListModel);
});
} else {
_this.goToPage1(item.contentListModel);
}
},
// 跳转
goToPage1(itemData) {
let paramList = deepCopy(setEventByModuleCode(itemData));
let isStrokeUrl =
paramList[0] &&
paramList[0]["value"] &&
paramList[0]["value"].indexOf("stroke.js") !== -1;
let strokeUrl = "";
if (isStrokeUrl) {
strokeUrl =
paramList[0]["value"] + "&token=" + this.userInfo.userToken ||
_this.token;
paramList[0]["value"] = strokeUrl;
}
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
// this.appBuryingPointEntrust({
// ...activity_action,
// labelId: itemData.id,
// functionCode: this.id == 1 ? "c_project" : "f_activity",
// actionCode: this.id == 1 ? "c_project_tab" : "c_activity_tab",
// labelValue: itemData.title,
// createdTime: new Date().getTime()
// });
},
goUpdateHandler() {
//去更新
rocNative.upGradeVersion();
this.showGoUpdate = false;
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.coop-container {
position: relative;
margin: px2rem(0px) px2rem(15px);
&-status {
position: absolute;
top: px2rem(6px);
left: 0;
// display: block;
width: px2rem(44px);
height: px2rem(18px);
line-height: px2rem(18px);
padding: px2rem(0px) 0 0 px2rem(4px);
background: rgba(88, 144, 221, 1);
color: #fff;
font-size: px2rem(11px);
border-top-right-radius: px2rem(3px);
border-bottom-right-radius: px2rem(3px);
}
}
.coop-item {
display: flex;
width: 100%;
height: px2rem(128px);
border-bottom: 1px solid #f0f0f0;
background: #fff;
flex-direction: row;
justify-content: center;
align-items: center;
img {
width: px2rem(115px);
height: px2rem(86px);
margin-right: px2rem(15px);
border-radius: px2rem(3px);
}
&-left {
display: flex;
position: relative;
top: 0;
}
&-right {
display: flex;
width: px2rem(215px);
flex-direction: column;
padding-top: px2rem(4px);
&-title {
height: px2rem(50px);
line-height: px2rem(20px);
font-size: px2rem(16px);
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: px2rem(21px);
line-height: px2rem(20px);
font-size: px2rem(13px);
font-weight: 400;
color: rgba(151, 152, 153, 1);
width: px2rem(210px);
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
}
}
.update-dialog-content {
padding: 0 px2rem(15px);
box-sizing: border-box;
.title {
text-align: center;
color: #373839;
font-size: px2rem(18px);
padding: px2rem(15px) 0;
line-height: px2rem(25px);
}
.update-btn {
text-align: center;
height: px2rem(55px);
line-height: px2rem(55px);
font-size: px2rem(16px);
color: #979899;
&.confirm-btn {
color: #449284;
}
&.v-hairline-top::after {
border-top-width: 1px;
}
}
}
</style>
<style>
.van-overlay {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
<template>
<!-- 专项合作列表 -->
<section class="coop-container">
<div
v-show="paramData.length && isShow"
v-for="(item , index) in paramData"
:key="index"
class="coop-item"
@click="coopDetails(item)"
>
<div class="coop-item-left">
<img :src="item.imgUrl" />
<span
v-if="item.projectStatusValue"
class="coop-container-status"
:style="{'background': cBgColor(item)}"
>{{item.projectStatusValue | statusText}}</span>
</div>
<div class="coop-item-right">
<span class="coop-item-right-title">{{item.name}}</span>
<span class="coop-item-right-other">{{item.level}} | {{item.credit}} | {{item.scope}}</span>
<!-- <span v-if="item.pType == 1"
class="coop-item-right-other"
>起止日期 {{item.oldTime}}</span>-->
<!-- <span v-else
class="coop-item-right-other"
>起止日期 {{item.projectBegintimeLong | formatTime}}-{{item.projectEndtimeLong | formatTime}}</span>-->
<span class="coop-item-right-other">{{item.startDate | formatTime('{y}.{m}.{d}')}}{{item.endDate | formatTime('{y}.{m}.{d}')}}</span>
</div>
</div>
<NoMoreContent v-show="paramData.length > 9"></NoMoreContent>
<NoContent v-show="!paramData.length && isShow" :tabNum="tabTo"></NoContent>
<!--<UpdateDialog :showGoUpdate="showGoUpdate" @goUpdateHandler="goUpdateHandler"></UpdateDialog>-->
<!-- <van-popup
v-model="showGoUpdate"
position="bottom"
:style="{ height: '4.427rem' }"
>
<div class="update-dialog-content">
<p class="title">该项目仅对河北石家庄市的用户开放</p>
<p class="update-btn v-hairline-top confirm-btn" @click="goUpdateHandler">确定</p>
<p class="update-btn v-hairline-top" @click="showGoUpdate = false">取消</p>
</div>
</van-popup>-->
</section>
</template>
<script>
import NoMoreContent from "@/components/business/no-more-content";
import NoContent from "@/components/business/no-content";
import UpdateDialog from "@/components/business/update-dialog";
import { setEventByModuleCode, deepCopy, getWebPageUrl } from "@/utils/index";
import { getAppVersion } from "@/utils";
import { mapActions, mapGetters } from "vuex";
import { Popup } from "vant";
export default {
name: "coop-list-item",
data() {
return {
bgColor: "green",
statusText: "进行中",
showGoUpdate: false
};
},
props: {
paramData: {
type: Array,
default: () => []
},
coopType: {
type: Number,
default: 1
},
isShow: {
type: Boolean,
default: false
},
tabTo: {
type: Number,
default: 1
},
userMobile: {
type: String,
default: ""
}
},
computed: {
...mapGetters(["userInfo"])
// cBgColor() {
// }
},
components: {
NoMoreContent,
NoContent,
UpdateDialog
},
mounted() {},
filters: {
statusText(status) {
if (status === 1) {
return "参加中";
} else if (status === 5) {
return "进行中";
} else if (status === 10) {
return "已结束";
} else {
return "已结束";
}
}
},
methods: {
...mapActions(["setProjectTabIndex"]),
cBgColor(item) {
if (item.projectStatusValue === 1) {
return "#5890DD";
} else if (item.projectStatusValue === 5) {
return "#449284";
} else if (item.projectStatusValue === 10) {
return "#373839";
} else {
return "#5890DD";
}
},
coopDetails(item) {
if (this.userMobile) {
let paramList = [
{
key: "pageUrl",
value: getWebPageUrl(`cme/#/coop?id=${item.id}&courseRequire=${item.courseRequire}`),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
} else {
rocNative.gotoLogin();
}
this.$sendBuriedData({
component_tag: `210#210002#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
});
// if (item.courseRequire == 1) { //对课程完成度有控制,需判断版本号
// let appVersion = getAppVersion(this.userInfo.appVersion);
// // alert('版本'+appVersion)
// let flag = appVersion < 315;
// if (flag === true) {
// // 小于315版本,添加去更新弹层
// this.showGoUpdate = true;
// }else {
// // 跳转到老项目
// if(this.tabTo != 3) {
// this.setProjectTabIndex(this.tabTo)
// }
// if (item.pType == 1) {
// this.goToPage(item);
// // 跳转到新项目
// } else {
// this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
// }
// }
// } else {
// // 跳转到老项目
// if(this.tabTo != 3) {
// this.setProjectTabIndex(this.tabTo)
// }
// if (item.pType == 1) {
// this.goToPage(item);
// // 跳转到新项目
// } else {
// this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
// // this.$router.push({
// // path: "/coop",
// // query: {
// // id: item.id,
// // coopType: this.coopType
// // }
// // });
// }
// }
},
// 跳转到新项目
// showModule(item, coopType, tabTo, courseRequire) {
// if (window.__isWeb) {
// if(item.parent === false) {
// this.$router.push({
// path: "/coop",
// query: {
// id: item.id,
// coopType: coopType,
// tabTo: tabTo,
// courseRequire: courseRequire,
// }
// });
// } else {
// this.$router.push({
// path: "/parent",
// query: {
// entryId: item.entryId,
// }
// });
// }
// return;
// }
// let pageUrl = "";
// let paramList = [];
// if(item.parent === false) {
// pageUrl = getWebPageUrl('cme/#/coop');
// paramList = [
// {
// key: "pageUrl",
// value: pageUrl + `?id=${item.id}&coopType=${coopType}&tabTo=${tabTo}&courseRequire=${courseRequire}`,
// type: 4,
// seqNo: 1
// }
// ]
// } else {
// pageUrl = getWebPageUrl('cme/#/parent');
// paramList = [
// {
// key: "pageUrl",
// value: pageUrl + `?entryId=${item.entryId}`,
// type: 4,
// seqNo: 1
// }
// ]
// }
// rocNative.dispatchEventByModuleCode({
// modeCode: "M300",
// jsonString: paramList
// });
// },
goToPage(item) {
let _this = this;
// 如果是湖北考试项目,则做相应权限判断 湖北的projectId=3
if (item.id == "3") {
if (!_this.userInfo.userToken) {
rocNative.gotoLogin();
return;
}
let param = {
type: 1,
token: _this.userInfo.userToken || _this.token,
setEntry: true
};
this.GET("portal/portalApp/role/3", param).then(res => {
if (res.code == "000000") {
// {
// "data": 0, // 0就是无权限,1有权限
// "code": "000000",
// "message": "成功"
// }
if (res.data == 0) {
rocNative.showNativeToast({
message: "您不属于该项目,无法查看"
});
return;
}
} else {
rocNative.gotoLogin();
return;
}
_this.goToPage1(item.contentListModel);
});
} else {
_this.goToPage1(item.contentListModel);
}
},
// 跳转
goToPage1(itemData) {
let paramList = deepCopy(setEventByModuleCode(itemData));
let isStrokeUrl =
paramList[0] &&
paramList[0]["value"] &&
paramList[0]["value"].indexOf("stroke.js") !== -1;
let strokeUrl = "";
if (isStrokeUrl) {
strokeUrl =
paramList[0]["value"] + "&token=" + this.userInfo.userToken ||
_this.token;
paramList[0]["value"] = strokeUrl;
}
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
});
// this.appBuryingPointEntrust({
// ...activity_action,
// labelId: itemData.id,
// functionCode: this.id == 1 ? "c_project" : "f_activity",
// actionCode: this.id == 1 ? "c_project_tab" : "c_activity_tab",
// labelValue: itemData.title,
// createdTime: new Date().getTime()
// });
},
goUpdateHandler() {
//去更新
rocNative.upGradeVersion();
this.showGoUpdate = false;
}
}
};
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.coop-container {
position: relative;
margin: px2rem(0px) px2rem(15px);
&-status {
position: absolute;
top: px2rem(6px);
left: 0;
// display: block;
width: px2rem(44px);
height: px2rem(18px);
line-height: px2rem(18px);
padding: px2rem(0px) 0 0 px2rem(4px);
background: rgba(88, 144, 221, 1);
color: #fff;
font-size: px2rem(11px);
border-top-right-radius: px2rem(3px);
border-bottom-right-radius: px2rem(3px);
}
}
.coop-item {
display: flex;
width: 100%;
height: px2rem(128px);
border-bottom: 1px solid #f0f0f0;
background: #fff;
flex-direction: row;
justify-content: center;
align-items: center;
img {
width: px2rem(115px);
height: px2rem(86px);
margin-right: px2rem(15px);
border-radius: px2rem(3px);
}
&-left {
display: flex;
position: relative;
top: 0;
}
&-right {
display: flex;
width: px2rem(215px);
flex-direction: column;
padding-top: px2rem(4px);
&-title {
height: px2rem(50px);
line-height: px2rem(20px);
font-size: px2rem(16px);
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: px2rem(21px);
line-height: px2rem(20px);
font-size: px2rem(13px);
font-weight: 400;
color: rgba(151, 152, 153, 1);
width: px2rem(210px);
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
}
}
.update-dialog-content {
padding: 0 px2rem(15px);
box-sizing: border-box;
.title {
text-align: center;
color: #373839;
font-size: px2rem(18px);
padding: px2rem(15px) 0;
line-height: px2rem(25px);
}
.update-btn {
text-align: center;
height: px2rem(55px);
line-height: px2rem(55px);
font-size: px2rem(16px);
color: #979899;
&.confirm-btn {
color: #449284;
}
&.v-hairline-top::after {
border-top-width: 1px;
}
}
}
</style>
<style>
.van-overlay {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
......@@ -14,7 +14,7 @@
</article>
<article class="right">
<span class="left" @click="changeClick">去兑换</span>
<span class="right">去购买</span>
<span @click="gotoBuy" class="right">去购买</span>
</article>
</section>
</template>
......@@ -33,8 +33,11 @@ export default {
changeClick(){
this.$emit("changeClick","去兑换")
},
btnClick() {
this.$emit("btnClick");
gotoExchange() {
this.$emit("gotoExchange");
},
gotoBuy() {
this.$emit("gotoBuy");
}
}
};
......@@ -42,6 +45,10 @@ export default {
<style lang="scss" scoped>
@import "../../style/mixin";
.bind-cart-wrapper {
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
display: flex;
flex-direction: row;
......@@ -60,9 +67,10 @@ export default {
font-size: 12px;
// align-items: ;
.top {
height: px2rem(27px);
margin-top: px2rem(3px);
height: px2rem(24px);
.discount {
color: #FB5B52;
color: #fb5b52;
font-size: px2rem(18px);
font-weight: 700;
margin-right: px2rem(4px);
......@@ -74,7 +82,6 @@ export default {
.bottom {
display: flex;
flex-direction: row;
img {
width: px2rem(12px);
height: px2rem(12px);
......
<template>
<section class="card-popup-wrapper">
<van-popup
v-model="isShow"
position="center"
@click-overlay="clickOverlay"
>
<article class="content">
<p class="title">学分项目必须使用学习卡</p>
<p class="title">请先购买学习卡</p>
<section class="card-info">
<img v-if="cardInfo.cardType == 1" class="icon" src="../../images/cme/phrase2/I-card-icon.png" alt />
<img v-else class="icon" src="../../images/cme/phrase2/II-card-icon.png" alt />
<!-- <div class="info">
<span class="name">{{cardInfo.goodsName}}</span>
<p>
<span class="price">{{(cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span><span v-show="cardInfo.preferentialPrice" class="discount"><del> 原价¥{{cardInfo.costPrice | formatMoney}}</del></span>
</p>
</div> -->
<div class="info">
<span class="name">已购买去学习已购买去学习买去学习</span>
<p>
<span class="price">¥100</span><span class="discount"><del> 原价¥120</del></span>
</p>
</div>
</section>
<div class="line"></div>
<div class="btn">
<span class="left" @click="cancle">已购买去学习</span>
<span class="vert-line"></span>
<span class="right" @click="confirm">去购买</span>
</div>
</article>
</van-popup>
</section>
</template>
<script>
import { Popup } from "vant";
export default {
data() {
return {
}
},
props: {
isShow: {
type: Boolean,
default: false,
},
cardInfo: {
id: 10031,
goodsVersion: 1,
cardType: 1,
costPrice: 0,
preferentialPrice: 0,
goodsDesc: "",
goodsName: "学习卡",
goodsType: 2,
isSale: 1,
}
},
methods: {
clickOverlay() {
this.$emit('clickOverlay');
},
cancle() {
this.$emit('cancle');
},
confirm() {
this.$emit('confirm');
}
},
}
</script>
<style lang="scss" scoped>
@import "../../style/mixin";
.card-popup-wrapper {
.content {
font-size: px2rem(14px);
width: px2rem(300px);
// height: px2rem(245px);
padding-top: px2rem(30px);
.title {
text-align: center;
font-size: px2rem(18px);
font-weight: 700;
}
.card-info {
display: flex;
flex-direction: row;
align-items: center;
height: px2rem(76px);
margin: px2rem(15px);
padding: 0 px2rem(8px);
background: #F8F9FA;
border-radius: px2rem(6px);
font-size: px2rem(14px);
.icon {
width: px2rem(60px);
height: px2rem(60px);
margin-right: px2rem(8px);
}
.info {
width: 100%;
position: relative;
top: 0;
left: 0;
.name {
position: absolute;
top: px2rem(-30px);
left: px2rem(4px);
}
p {
position: absolute;
bottom: px2rem(-34px);
left: 0px;
display: flex;
align-items: center;
.price {
color: #FB5B52;
font-size: px2rem(18px);
font-weight: 700;
margin-right: px2rem(8px);
}
.discount {
color: #979899;
}
}
}
}
.line {
margin-top: px2rem(30px);
height: px2rem(1px);
background: #F0F1F2;
}
.btn {
width: 100%;
display: flex;
flex-direction: row;
// justify-content: space-between;
align-items: center;
height: px2rem(50px);
// margin-top: px2rem(15px);
font-size: px2rem(17px);
.left {
flex: 1;
text-align: center;
color: #979899;
// border-right: 1px solid #F0F1F2;
}
.vert-line {
border-right: 1px solid #F0F1F2;
// width: px2rem(1px);
height: 100%;
}
.right {
flex: 1;
text-align: center;
color: #449284;
}
}
}
.van-popup.van-popup--center {
border-radius: px2rem(4px);
}
}
</style>
<template>
<!-- 专项合作首页: 我参与的,其它项目 -->
<div class="page-container">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="1px solid #fff"
></CommonNavbar>
<section class="page-content">
<!-- <button @click="jumpToExamAction" style="margin: 20px;font-size:20px;text-align:center;padding:10px;border-radius:10px;">测试按钮1</button>
<button @click="jumpToExamAction2" style="margin: 20px;font-size:20px;text-align:center;padding:10px;border-radius:10px;">测试按钮2</button>-->
<!-- {{token}} -->
<table class="page-content-table">
<tr>
<td @click="changeTab(1)" :class="{'active': tabIndex === 1}">
<div class="tap-title">
<span :style="{'color': tabIndex === 1 ? '#333' : '#999'}">我的项目</span>
<span></span>
</div>
</td>
<td @click="changeTab(2)" :class="{'active': tabIndex === 2}">
<div class="tap-title">
<span :style="{'color': tabIndex === 2 ? '#333' : '#999'}">全部项目</span>
<span></span>
</div>
</td>
</tr>
</table>
<article class="cb-wrapper" :class="{'padding-top-111': !isWeb}">
<CardBanner></CardBanner>
</article>
<article class="page-content-list">
<CommonTitle v-show="tabIndex === 2" title="I类学分项目" :isShowCert="false"></CommonTitle>
<ICardItem v-show="tabIndex === 2"></ICardItem>
<CommonTitle title="II类学分项目" :isShowCert="false"></CommonTitle>
<section v-if="tabIndex === 1">
<CoopListItem
:paramData="joinProjectList"
:coopType="1"
:tabTo="1"
:isShow="isShow"
:userMobile="userMobile"
></CoopListItem>
</section>
<section v-if="tabIndex === 2">
<CoopListItem
:paramData="otherProjectList"
:coopType="1"
:tabTo="2"
:isShow="isShow"
:userMobile="userMobile"
></CoopListItem>
</section>
</article>
</section>
<Toast ref="toastTitle"></Toast>
<Loading v-if="showLoading" />
<!-- <div>
<iframe src="https://www.baidu.com" id="mobsf" frameborder="0" style="width:100%;height:500px;"></iframe>
</div>-->
<!-- <discuss-topic-stencil /> -->
<transition name="fade">
<article v-show="needShowBackup" @click="scrollTop" class="back-up-icon">
<img src="../images/cme/phrase2/back-top.png" alt />
</article>
</transition>
<!-- <CardPopup :showGoUpdate="showGoUpdate"></CardPopup> -->
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CoopListItem from "@/components/business/coop-list-item";
import Loading from "@/components/common/common-loading";
import Toast from "@/components/common/common-toast";
import CardBanner from "@/components/cme/card-banner";
import ICardItem from "@/components/cme/I-card-item";
// import CardPopup from "@/components/cme/card-popup";
import CommonTitle from "@/components/common/common-title";
import { mapGetters, mapActions } from "vuex";
export default {
data() {
return {
showLoading: false,
isWeb: window.__isWeb,
bgColor: "#fff",
isShow: false,
navTitle: "继教项目",
compTitle: "组件名称",
isShowNavbar: true,
isFixNavbar: false,
pointStyle: "activity",
descTitle: "规定从何处开始选取。如果是负数",
tabIndex: 1,
joinProjectList: [], // 我的项目
otherProjectList: [], // 全部项目
token: "",
toastTitle: "",
userMobile: "",
needShowBackup: false,
showGoUpdate: false,
};
},
computed: {
...mapGetters(["projectTabIndex"])
},
components: {
// DiscussTopicStencil,
CommonNavbar,
CoopListItem,
Loading,
Toast,
CardBanner,
CommonTitle,
ICardItem,
// CardPopup
},
created() {
var _this = this;
window.__getUserInfo = function(param) {
_this.setUserInfo(param);
_this.token = param.userToken;
_this.userMobile = param.userMobile;
_this.getCoopData();
};
_this.getUserInfo();
if (__isWeb) {
_this.getCoopData();
}
window.__refresh = function() {
//_this.tabIndex = _this.projectTabIndex;
_this.getUserInfo();
};
// 打开页面埋点
this.$sendBuriedData({
component_tag: "210#0#0#0"
});
window.__getPositionData = function(param) {
console.log(param)
}
this.getPositionData();
window.addEventListener("scroll", this.scrollFun);
},
mounted() {
var _this = this;
this.tabIndex = this.projectTabIndex;
// let param = {
// id: 12 };
// this.API_GET("app/certificate/downLoad", param).then(res => {
// });
},
methods: {
// 跳转到第三方考试页面
//
jumpToExamAction() {
let paramList = [
{
key: "pageUrl",
value:
"http://cmeonline.cma-cmc.com.cn/cms/weixinCourseDetail.htm?courseId=a245b2060ac0495cae440de859321b91&openCourseId=2d9b152a85dc4833892aeaa713362b9f",
type: 4,
seqNo: 1
},
// 此字段不配置,则用原来的逻辑
{
key: "needCache",
value: "1", // 0不缓存,其它值都做缓存
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
jumpToExamAction2() {
let paramList = [
{
key: "pageUrl",
value:
"http://cmeonline.cma-cmc.com.cn/cms/weixinCourseDetail.htm?courseId=0aeee9f7712b4543ab8eadb0571a78a7&openCourseId=e9e124392d3f4e2494d46e8f990b085e",
type: 4,
seqNo: 1
},
// 此字段不配置,则用原来的逻辑
{
key: "needCache",
value: "1", // 0不缓存,其它值都做缓存
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
...mapActions(["setUserInfo"]),
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo"
});
},
//获取位置信息 测试代码
getPositionData() {
console.log('getPositionData');
rocNative.getPositionData({
__funcName: "__getPositionData"
});
},
changeTab(index) {
let tag = index == 1 ? "210#210001#0" : "210#210001#1";
this.tabIndex = index;
if (index == 1 && !this.userMobile) {
rocNative.gotoLogin();
this.tabIndex = 2;
}
this.$sendBuriedData({
component_tag: tag
});
},
// 获取所有项目:我的项目、其它项目
getCoopData() {
// debugger
let _this = this;
let param = {
token: _this.token,
setEntry: true
};
let cachedJoinProjectList = [];
let cachedOtherProjectList = [];
_this.otherProjectList = [];
_this.showLoading = true;
this.GET("cme/project/list", param).then(res => {
_this.showLoading = false;
if (res.code == "000000") {
// let oldProjects1 = [];
// let oldProjects2 = [];
// for(let i = 0; i < res.data.oldProjects.length; i++) {
// if(res.data.oldProjects[i].roleFlag == 1) {
// oldProjects1.push(res.data.oldProjects[i]);
// } else if (res.data.oldProjects[i].roleFlag == 0) {
// oldProjects2.push(res.data.oldProjects[i]);
// }
// }
// console.log('项目1',oldProjects1,'项目2',oldProjects2);
cachedJoinProjectList = res.data.myCMEProjectListDtoList;
cachedOtherProjectList = res.data.allCMEProjectListDtoList;
_this.joinProjectList = res.data.myCMEProjectListDtoList;
_this.otherProjectList = res.data.allCMEProjectListDtoList;
// cachedJoinProjectList = _this.handleOldProject(
// oldProjects1,
// res.data.myProjectList
// );
// cachedOtherProjectList = _this.handleOldProject(
// oldProjects2,
// res.data.otherProjectList
// );
// 如果用户已经登陆,则将"至今"的几个项目移到我的列表中
if (_this.userMobile) {
// cachedOtherProjectList.map(item => {
// if(item.projectName && item.projectName.indexOf('国家基本公共卫生服务项目基层高血压管理办公室') >= 0) {
// cachedJoinProjectList.unshift(item);
// } else {
// _this.otherProjectList.push(item);
// }
// })
_this.tabIndex = 1;
} else {
_this.tabIndex = 2;
// _this.otherProjectList = cachedOtherProjectList
}
// _this.joinProjectList = cachedJoinProjectList;
if (_this.joinProjectList && _this.joinProjectList.length === 0) {
_this.tabIndex = 2;
}
_this.isShow = true;
// console.log('otherProjectList',_this.otherProjectList);
}
});
},
handleOldProject(oldProjects, otherProjectList) {
let oldList = oldProjects.map(item => {
item.pType = 1;
return item;
}),
otherList = otherProjectList.map(item => {
item.pType = 2;
return item;
});
return oldList.concat(otherList);
},
scrollFun() {
let scrollTop = window.scrollY;
if (scrollTop >= 500) {
this.needShowBackup = true;
} else {
this.needShowBackup = false;
}
},
scrollTop() {
window.scrollTo(0, 0);
}
}
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.page-content {
&-table {
position: fixed;
z-index: 100;
width: 100%;
text-align: center;
border-bottom: 1px solid #e7e7e7;
background: #fff;
tr {
font-size: px2rem(15px);
font-weight: 700;
height: px2rem(44px);
td {
width: 50%;
padding-top: px2rem(6px);
.tap-title {
display: flex;
flex-direction: column;
align-items: center;
color: #999;
span:nth-child(2) {
position: relative;
left: 0;
bottom: px2rem(-9px);
z-index: 2;
width: px2rem(10px);
height: px2rem(3px);
background: rgba(255, 255, 255, 1);
border-radius: px2rem(3px);
}
}
&.active {
span:nth-child(2) {
background: rgba(68, 146, 132, 1);
}
}
}
}
}
.cb-wrapper {
width: 100%;
position: fixed;
top: px2rem(49px);
left: 0;
z-index: 90;
margin-bottom: 30px;
&.padding-top-111 {
top: px2rem(111px);
}
}
&-list {
padding-top: px2rem(80px);
}
}
.back-up-icon {
position: fixed;
bottom: px2rem(50px);
right: px2rem(15px);
img {
width: px2rem(35px);
height: px2rem(35px);
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
<template>
<!-- 专项合作首页: 我参与的,其它项目 -->
<div class="page-container">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="1px solid #fff"
></CommonNavbar>
<section class="page-content">
<!-- <button @click="jumpToExamAction" style="margin: 20px;font-size:20px;text-align:center;padding:10px;border-radius:10px;">测试按钮1</button>
<button @click="jumpToExamAction2" style="margin: 20px;font-size:20px;text-align:center;padding:10px;border-radius:10px;">测试按钮2</button> -->
<!-- {{token}} -->
<table class="page-content-table">
<tr>
<td @click="changeTab(1)" :class="{'active': tabIndex === 1}">
<div class="tap-title">
<span :style="{'color': tabIndex === 1 ? '#333' : '#999'}">我的项目</span>
<span></span>
</div>
</td>
<td @click="changeTab(2)" :class="{'active': tabIndex === 2}">
<div class="tap-title">
<!-- <span>其它项目</span> -->
<span :style="{'color': tabIndex === 2 ? '#333' : '#999'}">全部项目</span>
<span></span>
</div>
</td>
</tr>
</table>
<article class="page-content-list">
<section v-if="tabIndex === 1">
<CoopListItem
:paramData="joinProjectList"
:coopType="1"
:tabTo="1"
:isShow="isShow"
:userMobile="userMobile"></CoopListItem>
</section>
<section v-if="tabIndex === 2">
<CoopListItem
:paramData="otherProjectList"
:coopType="1"
:tabTo="2"
:isShow="isShow"
:userMobile="userMobile"></CoopListItem>
</section>
</article>
</section>
<Toast ref="toastTitle"></Toast>
<Loading v-if="showLoading"/>
<!-- <div>
<iframe src="https://www.baidu.com" id="mobsf" frameborder="0" style="width:100%;height:500px;"></iframe>
</div>-->
<!-- <discuss-topic-stencil /> -->
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CoopListItem from "@/components/business/coop-list-item";
import Loading from "@/components/common/common-loading";
import Toast from "@/components/common/common-toast";
import { mapGetters, mapActions } from "vuex";
export default {
data() {
return {
showLoading: false,
bgColor: "#fff",
isShow: false,
navTitle: "继教项目",
compTitle: "组件名称",
isShowNavbar: true,
isFixNavbar: false,
pointStyle: "activity",
descTitle: "规定从何处开始选取。如果是负数",
tabIndex: 1,
joinProjectList: [], // 我的项目
otherProjectList: [], // 全部项目
token: "",
toastTitle: "",
userMobile: ""
};
},
computed: {
...mapGetters(["projectTabIndex"])
},
components: {
// DiscussTopicStencil,
CommonNavbar,
CoopListItem,
Loading,
Toast,
},
created() {
var _this = this;
window.__getUserInfo = function(param) {
_this.setUserInfo(param);
_this.token = param.userToken;
_this.userMobile = param.userMobile;
_this.getCoopData();
};
_this.getUserInfo();
if (__isWeb) {
_this.getCoopData();
}
window.__refresh = function() {
//_this.tabIndex = _this.projectTabIndex;
_this.getUserInfo();
// document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
};
// 打开页面埋点
this.$sendBuriedData({
component_tag: '210#0#0#0'
});
},
mounted() {
var _this = this;
this.tabIndex = this.projectTabIndex;
// let param = {
// id: 12 };
// this.API_GET("app/certificate/downLoad", param).then(res => {
// });
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
},
methods: {
// 跳转到第三方考试页面
//
jumpToExamAction() {
let paramList = [
{
key: "pageUrl",
value: 'http://cmeonline.cma-cmc.com.cn/cms/weixinCourseDetail.htm?courseId=a245b2060ac0495cae440de859321b91&openCourseId=2d9b152a85dc4833892aeaa713362b9f',
type: 4,
seqNo: 1
},
// 此字段不配置,则用原来的逻辑
{
key: "needCache",
value: '1', // 0不缓存,其它值都做缓存
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
jumpToExamAction2() {
let paramList = [
{
key: "pageUrl",
value: 'http://cmeonline.cma-cmc.com.cn/cms/weixinCourseDetail.htm?courseId=0aeee9f7712b4543ab8eadb0571a78a7&openCourseId=e9e124392d3f4e2494d46e8f990b085e',
type: 4,
seqNo: 1
},
// 此字段不配置,则用原来的逻辑
{
key: "needCache",
value: '1', // 0不缓存,其它值都做缓存
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
...mapActions(["setUserInfo"]),
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo"
});
},
changeTab(index) {
let tag = index == 1 ? '210#210001#0' : '210#210001#1';
this.tabIndex = index;
if(index == 1 && !this.userMobile) {
rocNative.gotoLogin();
this.tabIndex = 2;
}
this.$sendBuriedData({
component_tag: tag
});
},
// 获取所有项目:我的项目、其它项目
getCoopData() {
// debugger
let _this = this;
let param = {
token: _this.token,
setEntry: true
};
let cachedJoinProjectList = []
let cachedOtherProjectList = []
_this.otherProjectList = []
_this.showLoading = true;
this.GET("cme/project/list", param).then(
res => {
_this.showLoading = false;
if (res.code == "000000") {
// let oldProjects1 = [];
// let oldProjects2 = [];
// for(let i = 0; i < res.data.oldProjects.length; i++) {
// if(res.data.oldProjects[i].roleFlag == 1) {
// oldProjects1.push(res.data.oldProjects[i]);
// } else if (res.data.oldProjects[i].roleFlag == 0) {
// oldProjects2.push(res.data.oldProjects[i]);
// }
// }
// console.log('项目1',oldProjects1,'项目2',oldProjects2);
cachedJoinProjectList = res.data.myCMEProjectListDtoList;
cachedOtherProjectList = res.data.allCMEProjectListDtoList;
_this.joinProjectList = res.data.myCMEProjectListDtoList;
_this.otherProjectList = res.data.allCMEProjectListDtoList;
// cachedJoinProjectList = _this.handleOldProject(
// oldProjects1,
// res.data.myProjectList
// );
// cachedOtherProjectList = _this.handleOldProject(
// oldProjects2,
// res.data.otherProjectList
// );
// 如果用户已经登陆,则将"至今"的几个项目移到我的列表中
if(_this.userMobile) {
// cachedOtherProjectList.map(item => {
// if(item.projectName && item.projectName.indexOf('国家基本公共卫生服务项目基层高血压管理办公室') >= 0) {
// cachedJoinProjectList.unshift(item);
// } else {
// _this.otherProjectList.push(item);
// }
// })
_this.tabIndex = 1;
} else {
_this.tabIndex = 2;
// _this.otherProjectList = cachedOtherProjectList
}
// _this.joinProjectList = cachedJoinProjectList;
if (_this.joinProjectList && _this.joinProjectList.length === 0) {
_this.tabIndex = 2;
}
_this.isShow = true
// console.log('otherProjectList',_this.otherProjectList);
}
}
);
},
handleOldProject(oldProjects, otherProjectList) {
let oldList = oldProjects.map(item => {
item.pType = 1;
return item;
}),
otherList = otherProjectList.map(item => {
item.pType = 2;
return item;
});
return oldList.concat(otherList);
},
}
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.page-content {
&-table {
position: fixed;
z-index: 1;
width: 100%;
text-align: center;
border-bottom: 1px solid #e7e7e7;
background: #fff;
tr {
font-size: px2rem(15px);
font-weight: 700;
height: px2rem(44px);
td {
width: 50%;
padding-top: px2rem(6px);
.tap-title {
display: flex;
flex-direction: column;
align-items: center;
color: #999;
span:nth-child(2) {
position: relative;
left: 0;
bottom: px2rem(-9px);
z-index: 2;
width: px2rem(10px);
height: px2rem(3px);
background: rgba(255, 255, 255, 1);
border-radius: px2rem(3px);
}
}
&.active {
span:nth-child(2) {
background: rgba(68, 146, 132, 1);
}
}
}
}
}
&-list {
padding-top: px2rem(50px);
}
}
</style>
<template>
<!-- 组件详情页面:模块列表及其下面的元件列表 -->
<div class="page-container-merge">
<CommonNavbar
id="header"
:bgColor="bgColor"
v-show="isShowNavbar"
:isBlack="isBlack"
:isShowShare="isShowShare"
:title="navTitle"
:shareTitle="project.projectName"
:shareTitleInfo="project.projectIntro"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="0px solid #fff"
:backMethod="from"
></CommonNavbar>
<div class="page-content list-container">
<!-- banner图片 -->
<div v-if="bannerType == 1" class="page-content-img-container">
<img class="banner-img" :src="attachmentUrl" />
<!-- <img v-show="project.status == 1" class="banner-img-1" src="../images/status-join.png" /> -->
<img v-show="project.status == 5" class="banner-img-5" src="../images/status-keep-on.png" />
<img v-show="project.status == 10" class="banner-img-10" src="../images/status-end-cme.png" />
</div>
<!-- banner视频 -->
<CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer>
<!-- 项目标题 -->
<CommonDescription
:projectName="project.projectName"
:studyNum="project.studyNum"
:subject="project.subject"
/>
<CommonAdertImg
:advertInfoList="advertInfoList"
position="0"
/>
<!-- 步骤条 -->
<div v-if="project.cmeType != 2">
<CmeStep
:currentProgress="project.currentProgress"
:studyProgress="project.studyProgress"
:credit="project.credit"
:creditId="project.creditId"
:certificateUrl="project.certificateUrl"
:inScope="project.inScope"
:projectId="projectId"
:certificateId="project.certificateId"
@applicationCredit="applicationCredit"
/>
</div>
<!-- 简介和目录 -->
<div class="intro-catalogue-container">
<div
id="content-title"
class="title"
:class="{'fixed-title-1': (fixedFlag && !isWeb), 'fixed-title-2': (fixedFlag && isWeb)}"
>
<span :class="{'focus': tabFlag}" @click="jumpIntro">简介</span>
<span :class="{'focus': !tabFlag}" @click="jumpCatalogue">目录</span>
</div>
<div v-show="fixedFlag" class="fixed-flag-height"></div>
<div id="intro-content" class="intro-content">
<BasicInfo
:projectNo="project.projectNo"
:credit="project.credit"
:level="project.level"
:scope="project.scope"
:startDate="project.startDate"
:endDate="project.endDate"
:organName="project.organName"
:remind="project.remind"
:projectCredit="project.projectCredit"
:cmeType="project.cmeType"
/>
<LearnKnow :mustKnow="project.mustKnow"></LearnKnow>
<CommonSpliteLine></CommonSpliteLine>
<ItemIntro :textContent="textContent" @itemIntroText="itemIntroText"></ItemIntro>
<ItemLeader v-if="projectLeader"
:projectLeader="projectLeader"
:leaderText="leaderText"
@changeLeaderText="changeLeaderText"
/>
<TeacterIntro v-if="doctorList.length" :doctorList="doctorList"></TeacterIntro>
</div>
<CommonSpliteLine></CommonSpliteLine>
<div id="catalogue-content" class="catalogue-content">
<div class="catalogue-title">目录</div>
<CellListDetail
:projectComponent="projectComponentDTOS"
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"
/>
</div>
</div>
<CommonAdertImg
needPadTop
:advertInfoList="advertInfoList"
position="1"
/>
<NoMoreContent />
<div v-if="detailNum <= 9" class="no-more-bottom"></div>
</div>
<!-- 弹框 -->
<CommonDialog
:isShowDialog="isShowDialog"
:isSingle="isSingle"
:cancleBtnText="cancleBtnText"
:confirmBtnText="confirmBtnText"
:content="dialogContent"
@handlerAction="handlerAction"
/>
<!-- 弹框 -->
<ExjumperDialog
:isShowDialog="isShowEJDialog"
isSingle
needSubContent
content="请确保您已经在云鹊平台购买学员优惠学习卡"
subContent="1. 跳转后点击“购买学习”,注册登录“中华医学教育在线”平台(首次登录需用手机号注册)<br/>2. 支付方式选择 “学习卡支付”,输入在云鹊平台已购学习卡的激活码,即可参加考试申请学分"
cancleBtnText="我知道了"
@handlerAction="handlerEJAction"
/>
<ExjumperButton
@btnClick="beforeJumpToExam"
v-if="project.cmeType == 2"
:btnText="project.currentProgress > 1 ? '参加考试' : '学完全部课程,可参加考试'"
:type="project.currentProgress > 1 ? 'primary' : 'disabled'"></ExjumperButton>
<div v-if="project.cmeType == 2" style="padding-top: 30px"></div>
<CardPopup :cardInfo="cardInfo" :isShow="isShowPopup" @clickOverlay="clickOverlay" @cancle="jumpToCardList()" @confirm="confirm"></CardPopup>
<Loading v-show="showLoading" />
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CommonDescription from "@/components/common/common-description";
import CommonSpliteLine from "@/components/common/common-splite-line";
import CellListDetail from "@/components/business/cell-list-detail";
// import NoPermContent from "@/components/business/no-perm-content";
// import CommonBannerVideo from "@/components/common/common-banner-video";
import CommonTcPlayer from "@/components/common/common-tcplayer";
import Loading from "@/components/common/common-loading";
import CmeStep from "@/components/cme/cme-step";
import BasicInfo from "@/components/cme/basic-info";
import LearnKnow from "@/components/cme/learn-know";
import ItemIntro from "@/components/cme/item-intro";
import ItemLeader from "@/components/cme/item-leader";
import TeacterIntro from "@/components/cme/teacter-intro";
import CommonDialog from "@/components/cme/common-dialog";
import ExjumperDialog from "@/components/cme/exjumper-dialog";
import ExjumperButton from "@/components/cme/exjumper-button";
import NoMoreContent from "@/components/business/no-more-content";
import CommonAdertImg from "@/components/common/common-advert-img";
import { getWebPageUrl, gotoPage } from "@/utils/index";
import { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter";
import { Toast } from 'vant';
import CardPopup from "@/components/cme/card-popup";
let cataOffsetTop = 0;
let intorOffsetTop = 0;
let titleOffsetHeight = 50;
export default {
data() {
return {
// token: "9B62E5874DA94979A54DB3E9DFC1443F",
isWeb: window.__isWeb,
textContent: "",
leaderText: "",
pageTitle: "",
isShowShare: true,
premissionFlag: false,
isSingle: false,
dialogContent: "", // 弹框内容
confirmBtnText: "", // 弹框按钮
cancleBtnText: "",
isShowDialog: false,
isShowEJDialog: false,
tabFlag: true, // 显示目录还是简介
fixedFlag: false, // 目录和简介是否固定
project: {
credit: "", // 学分
creditId: 0, // 学分Id
level: "", // 项目等级
scope: "", // 申请范围
remind: "", // 在不在范围提醒
startDate: 0, // 开始时间
endDate: 0, // 结束时间
organName: "", // 发起机构
projectName: "", // 项目名称
projectNo: "", // 项目编号
currentProgress: 0, // 项目进度
projectIntro: "", // 项目介绍
mustKnow: "", // 学习须知
studyNum: 0, // 学习人数
studyProgress: "0%", // 学习进度
subject: "", // 学科
status: 0, // 项目状态 5是进行中 10是已结束
certificateUrl: "", // 证书url
inScope: 0, // 是否在范围内判断
projectCredit: "", // 学分
certificateId: "0",
cmeType: 1, // 1: 自营项目; 2: 中华医学会二类
examBtnUrl: '', // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录
// cmeType=2时不显示进度,
// projectNo为空时不显示项目编号,
// projectLeader为空时不显示项目负责人,
// inScope=0时考试按钮不显示,
// currentProgress>1时考试按钮显示并可用
},
projectLeader: {},
doctorList: [],
from: "inner",
isBlack: false,
showLoading: false,
projectId: "1",
//componentId: 1,
//moduleId: 1,
contentList: [],
//moduleName: "",
bannerType: 1, // 1 图片 2视频
videoOptions: {
mp4: "",
autoplay: false, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
coverpic: require("../images/video-cover.png"),
width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度
height: "210" //视频的显示高度,请尽量使用视频分辨率高度
},
//projectStatus: 1, //1没有获得证书 2是获得全部证书
attachmentUrl: require("../images/banner-default.png"),
bgColor: "none",
navTitle: "项目详情",
// compTitle: "组件名称",
isShowNavbar: true,
isFixNavbar: true,
pointStyle: "activity",
projectComponentDTOS: [],
actionList: [],
detailNum: 0,
courseRequire: 0,
clientType: 0,
// currentProgress>1时考试按钮显示并可用
btnType: 'primary', // primary: 可跳转时(currentProgress = 1); disabled: 不可跳转时
btnText: '学完全部课程,可参加考试', // 参加考试(currentProgress = 1); 或者学完全部课程,可参加考试
provinceId: '',
organizationId: '',
isShowPopup: false,
cardInfo: {
id: 0
},
advertInfoList: [],
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CellListDetail,
Loading,
CommonTcPlayer,
CmeStep,
BasicInfo,
LearnKnow,
ItemIntro,
ItemLeader,
TeacterIntro,
CommonDialog,
ExjumperButton,
ExjumperDialog,
CardPopup,
CommonAdertImg,
NoMoreContent
},
computed: {
...mapGetters(["userInfo"]),
},
created() {
let _this = this;
this.from = this.$route.query.from || this.from || "native";
this.projectId = this.$route.query.id || 1;
// 此两个参数将由接口返回
// this.courseRequire = this.$route.query.courseRequire;
// this.provinceId = this.$route.query && this.$route.query.provinceId || 0;
// this.organizationId = this.$route.query && this.$route.query.organizationId || 0;
window.__getUserInfo64Comp = function(param) {
// appVersion 安卓 3.2.2 iOS
console.log('__getUserInfo64Comp', param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.checkToken();
_this.getProjectParticularsV2();
};
_this.getUserInfo();
// if (__isWeb && process.env.BUILD_ENV == "development") {
// let param = {};
// __getUserInfo64Comp(param);
// }
if (__isWeb) {
_this.getProjectParticularsV2();
}
window.__refresh = function() {
_this.getUserInfo();
};
// 打开页面埋点
this.$sendBuriedData({
// action: "打开页面",
component_tag: `211#0#${this.projectId}#0`
});
window.__getPositionData = function(param) {
console.log(param);
// _this.showLoading = false;
param.setEntry = true;
_this.getProvinceIdByPosition(param);
}
// 调用广告位接口
this.getAdvertInfoList();
},
mounted() {
window.addEventListener("scroll", this.scrollFun);
const _this = this;
},
beforeDestroyed() {
window.removeEventListener("scroll", this.scrollFun);
},
methods: {
...mapActions(["setUserInfo"]),
// 查询教培项目广告位配置信息
getAdvertInfoList() {
let param = {
setEntry: true
};
this.GET(`portal/jump/${this.projectId}/1`, param).then(res => {
if (res.code == "000000") {
this.advertInfoList = res.data && res.data.list || [];
console.log('advertInfoList', this.advertInfoList);
}
});
},
// 点击弹层
clickOverlay() {
console.log('clickOverlay');
this.isShowPopup = false;
},
// 点击“参与考试”
beforeJumpToExam() {
this.$sendBuriedData({
component_tag: `882#8824`
});
// 如果是首次,则弹出弹框
if(this.project.firstIntoExam) {
this.isShowEJDialog = true;
} else {
this.isBuy(2);
// this.jumpToExamAction();
}
},
// 第一次跳转弹框,点击时调用相应接口
handlerEJAction() {
this.$sendBuriedData({
component_tag: `883#8831`
});
this.isShowEJDialog = false;
this.isBuy(2);
// this.jumpToExamAction();
this.firstIntoExamAction();
},
// 判断用户是否购买过I类学习卡
isBuy(cardType) {
this.showLoading = true;
// alert(this.showLoading)
let param = {
cardType: cardType,
setEntry: true,
}
this.GET("trade/storage/card/isBuy", param).then(res => {
if (res.code == "000000") {
// 如果购买过,则直接跳转到中华医学会页面
if(res.data) {
this.jumpToCardList();
} else {
this.preJumper();
}
}
});
},
// 跳转II类学习详情页面(中华医学会项目详情页面)
jumpToCardList() {
this.$sendBuriedData({
component_tag: `885#8851`
});
this.showLoading = false;
this.isShowPopup = false;
// 判断版本号,如果小于3.4.0,则只做提示
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
if (window.__isWeb) {
return;
} else {
let pageUrl = this.project.examBtnUrl;
let paramList = [
{
key: "pageUrl",
value: pageUrl,
type: 4,
seqNo: 1
},
// 此字段不配置,则用原来的逻辑
{
key: "needCache",
value: '1', // 0不缓存,其它值都做缓存
type: 4,
seqNo: 1
}
]
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
},
// 跳转前判断是否有机构,否则使用定位信息
preJumper() {
if(this.organizationId != 0 && this.provinceId != 0) {
this.getCardInfoByProvinceId(this.provinceId);
} else {
this.getPositionData();
}
},
// 根据位置信息获取省ID
getProvinceIdByPosition(param) {
param.setEntry = true;
this.POST("aggregate/cme/convertLocationToProvinceId", param).then(res => {
if (res.code == "000000") {
this.getCardInfoByProvinceId(res.data);
}
});
},
// 根据省ID,获取学习卡信息
getCardInfoByProvinceId(provinceId) {
let param = {
"area": provinceId + '',
"cardType": 2,
"pageNum": 1,
"pageSize": 1
}
this.POST("trade/goods/cardList", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.isShowPopup = true;
this.cardInfo = res.data && res.data[0] || {id: 0} ;
}
});
},
// 获取地理位置信息
getPositionData() {
// this.showLoading = true;
console.log('getPositionData');
rocNative.getPositionData({
__funcName: "__getPositionData"
});
},
// 跳转到原生的购买页面
confirm() {
this.$sendBuriedData({
component_tag: `885#8852`
});
this.isShowPopup = false;
let pageUrl = this.project.examBtnUrl;
let paramList = [
{
key: "className",
value: "com.picahealth.yunque.activitys.studycard.StudyCardDetailActivity###PicaDo.LearningCardVC",
type: 4,
seqNo: 1
},
{
key: "goodId",
value: this.cardInfo.id,
type: 4,
seqNo: 1
},
{
key: "courseUrl",
value: encodeURIComponent(pageUrl),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 跳转到第三方考试页面
jumpToExamAction() {
// 判断版本号,如果小于3.4.0,则只做提示
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
let paramList = [
{
key: "pageUrl",
value: this.project.examBtnUrl,
type: 4,
seqNo: 1
},
// 此字段不配置,则用原来的逻辑
{
key: "needCache",
value: '1', // 0不缓存,其它值都做缓存
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
// 首次进入考试时记录(点击‘我知道了’时调用)
firstIntoExamAction() {
let _this = this;
let param = {
token: _this.userInfo.userToken || this.token,
setEntry: true
};
this.NEW_POST(`cme/project/${_this.projectId}/firstIntoExam`, param).then(res => {
if (res.code == "000000") {
this.project.firstIntoExam = false;
}
});
},
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo64Comp"
});
},
// token是否失效校验
checkToken() {
let _this = this;
let param = {
token: _this.userInfo.userToken || _this.token,
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() {
let _this = this;
let param = {
id: _this.projectId,
creditId: _this.project.creditId,
token: _this.userInfo.userToken || this.token,
setEntry: true
};
_this.NEW_POST("cme/credit/rangeCheck", param).then(res => {
if ( (_this.project.cmeType != 2) && (res.code == "219004" || res.code == "219012")) {
// 未加入机构 219004 不在申请范围 219012
this.dialogContent = `该项目仅对${_this.project.scope}的用户开放`;
this.cancleBtnText = "我知道了";
this.isShowDialog = true;
this.isSingle = true;
} else {
this.isShowDialog = false;
}
});
},
// 立即申请学分
applicationCredit() {
let _this = this;
let param = {
id: _this.projectId,
creditId: _this.project.creditId,
token: _this.userInfo.userToken || this.token,
setEntry: true
};
_this.NEW_POST("cme/credit/applyCheck", param).then(res => {
if (res.code == "000000") {
gotoPage(
_this,
`cme/#/credit-edit?creditId=${_this.project.creditId}`
);
} else if (res.code == "219004" || res.code == "219005") {
// 未加入机构 219004 未身份认证 219005 不在申请范围 219012
let params = {
__funcName: "__checkPermissions",
permCode: "009014"
};
rocNative.checkPermissions(params);
}
// else if (res.code == "219012") {
// this.dialogContent = res.message;
// this.cancleBtnText = "我知道了";
// this.isShowDialog = true;
// this.isSingle = true;
// }
else {
this.dialogContent = res.message;
this.cancleBtnText = "我知道了";
this.isShowDialog = true;
this.isSingle = true;
}
});
},
// 弹框按钮事件
handlerAction(data) {
this.isShowDialog = false;
},
scrollFun() {
let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
let h = intorOffsetTop - 135
// 显示头部导航
if (scrollTop > 20) {
this.isBlack = true;
this.bgColor = "#fff";
} else {
this.isBlack = false;
this.bgColor = "none";
}
if(window.__isWeb) {
h = intorOffsetTop - 75;
} else if(window.__isIOS) {
h = intorOffsetTop - 140;
}
// 如果滚动高度大于简介头部(并减去tab高度),则进行固定
if(scrollTop > h) {
this.fixedFlag = true;
} else {
this.fixedFlag = false;
}
// 如果滚动高度大于
if(scrollTop > cataOffsetTop - 600) {
this.tabFlag = false;
} else {
this.tabFlag = true;
}
},
// 锚点到简介
jumpIntro() {
if(!this.tabFlag) {
this.tabFlag = true;
}
if(!this.fixedFlag) {
this.fixedFlag = true;
}
let h;
if (this.isWeb) {
h = intorOffsetTop - 30 - titleOffsetHeight;
} else {
h = intorOffsetTop - 85 - titleOffsetHeight;
}
window.scrollTo(0, h);
this.isBlack = true;
this.bgColor = "#fff";
this.$sendBuriedData({
component_tag: `211#211007#${this.projectId}`
});
},
// 锚点到目录
jumpCatalogue() {
if(this.tabFlag) {
this.tabFlag = false;
}
if(!this.fixedFlag) {
this.fixedFlag = true;
}
let h;
if (this.isWeb) {
h = cataOffsetTop - titleOffsetHeight;
} else {
h = cataOffsetTop - 100;
}
window.scrollTo(0, h);
this.isBlack = true;
this.bgColor = "#fff";
this.$sendBuriedData({
component_tag: `211#211008#${this.projectId}`
});
},
// 获取项目详情
getProjectParticularsV2() {
let _this = this;
let param = {
token: _this.userInfo.userToken || this.token,
setEntry: true
};
_this.showLoading = true;
this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
if (res.code == "000000") {
// 先设置视频URL再显示视频组件 ------------ BEGIN
if (res.data.attachmentType == 2) {
_this.videoOptions.mp4 = res.data.attachmentUrl;
} else {
_this.attachmentUrl = res.data.attachmentUrl;
}
_this.bannerType = res.data.attachmentType;
if (_this.bannerType == 2) {
_this.clientType = __isWeb ? 1 : __isAndroid ? 2 : 3;
}
// 先设置视频URL再显示视频组件 ------------ END
_this.project = res.data;
if (_this.project.projectIntro) {
_this.textContent =
_this.project.projectIntro.length > 70
? _this.project.projectIntro.slice(0, 70) + "..."
: this.project.projectIntro;
}
_this.project.mustKnow = _this.project.mustKnow.replace(
/(\r\n)|\r|\n/g,
"<br>"
);
_this.projectLeader = res.data.projectLeader;
if (_this.projectLeader && _this.projectLeader.info) {
_this.leaderText =
_this.projectLeader.info.length > 70
? _this.projectLeader.info.slice(0, 70) + "..."
: this.projectLeader.info;
}
_this.doctorList = res.data.doctorList;
//_this.projectStatus = res.data.projectStatus;
_this.projectComponentDTOS = _this.setListData(
res.data.projectComponentDTOS
);
if (!_this.isWeb && !_this.premissionFlag) {
_this.premissionFlag = true;
_this.permission(); // 提示是否有机构和在申请范围内
}
// TODO Add by Anndy Yang
if (_this.project.currentProgress == 2) {
_this.$nextTick(() => {
window.scrollTo(0, 0);
});
}
_this.provinceId = res.data.positionModel.provinceId;
_this.organizationId = res.data.positionModel.organizationId;
_this.courseRequire = res.data.courseRequire || 0;
setTimeout( () => {
cataOffsetTop = document.getElementById("catalogue-content").offsetTop;
intorOffsetTop = document.getElementById("intro-content").offsetTop;
console.log('getProjectParticularsV2', cataOffsetTop, intorOffsetTop);
// 直接跳转
if(_this.project.jumpToContents) {
setTimeout(() => {
this.jumpCatalogue();
}, 200);
}
}, 200);
setTimeout(() => {
_this.showLoading = false;
}, 800);
}
});
},
// 项目负责人--详情(收起)
changeLeaderText(data) {
let _this = this;
if (_this.projectLeader.info) {
if (!data.allTextFlag) {
_this.leaderText =
_this.projectLeader.info.length > 70
? _this.projectLeader.info.slice(0, 70) + "..."
: this.projectLeader.info;
} else {
_this.leaderText = _this.projectLeader.info;
}
}
},
// 项目介绍
itemIntroText(data) {
let _this = this;
if (_this.project.projectIntro) {
if (!data.allTextFlag) {
_this.textContent =
_this.project.projectIntro.length > 70
? _this.project.projectIntro.slice(0, 70) + "..."
: this.project.projectIntro;
} else {
_this.textContent = _this.project.projectIntro;
}
}
},
setListData(data) {
let _this = this;
let list = data;
let actionList = [];
let detailNum = 0;
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].portalModuleDTOS.length; j++) {
detailNum++;
if (list[i].portalModuleDTOS[j].status === 2) {
list[i].portalModuleDTOS[j].value =
"共" + list[i].portalModuleDTOS[j].nodeCount + "节";
} else {
list[i].portalModuleDTOS[j].value = "尚未开始";
}
list[i].portalModuleDTOS[j].disabled =
list[i].portalModuleDTOS[j].status === 2 ? false : true;
//展开项记录
if (list[i].portalModuleDTOS[j].expandStatus == 1) {
actionList.push(list[i].portalModuleDTOS[j].expandKey);
}
for (
let z = 0;
z < list[i].portalModuleDTOS[j].contentList.length;
z++
) {
list[i].portalModuleDTOS[j].contentList[z].height = _this.getHight(
list[i].portalModuleDTOS[j].contentList[z]
);
}
}
}
_this.actionList = actionList;
_this.detailNum = detailNum;
console.log("list转为:", list, actionList, detailNum);
// list[0].portalModuleDTOS[3].contentList[0].certificateFlag = 2;
// list[0].portalModuleDTOS[3].contentList[1].certificateFlag = 2;
return list;
},
getHight(data) {
let len = vueFilters.strLength(data.name);
let certificate = data.certificateFlag;
if (len > 30 && certificate == 2) {
return "2";
} else if (len > 30 && certificate != 2) {
return 2;
} else if (len <= 30 && certificate == 2) {
return "1";
} else if (len <= 30 && certificate != 2) {
return 1;
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.page-container-merge {
.nav-top .nav-title {
height: px2rem(0px);
// padding: px2rem(18px);
}
.banner-img {
display: inherit;
width: px2rem(375px);
height: px2rem(210px);
&-1 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
&-5 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
&-10 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
}
.list-container {
// margin-bottom: px2rem(40px);
}
.intro-catalogue-container {
.title {
height: px2rem(50px);
line-height: px2rem(30px);
padding: 0 px2rem(15px);
border-bottom: 1px solid #f0f1f2;
span {
display: inline-block;
line-height: px2rem(15px);
font-size: px2rem(15px);
color: #979899;
padding-right: px2rem(35px);
}
span.focus {
position: relative;
color: #373839;
}
span.focus:after {
content: "";
position: absolute;
left: px2rem(9px);
bottom: px2rem(-14px);
background: #449284;
// border-bottom: px2rem(1px) solid #449284;
width: px2rem(10px);
height: px2rem(3px);
border-radius: px2rem(3px);
}
}
.title.fixed-title-1 {
position: fixed;
left: 0;
top: px2rem(60px);
background: #fff;
width: 100%;
z-index: 999;
}
.title.fixed-title-2 {
position: fixed;
left: 0;
top: px2rem(0px);
background: #fff;
width: 100%;
z-index: 999;
}
.catalogue-content {
padding: px2rem(30px) px2rem(15px) 0;
.catalogue-title {
font-size: px2rem(18px);
color: #373839;
font-weight: 700;
margin-bottom: px2rem(16px);
}
}
.fixed-flag-height {
height: px2rem(50px);
}
}
}
.no-more-bottom {
position: relative;
width: 100%;
height: px2rem(40px);
}
</style>
<template>
<!-- 组件详情页面:模块列表及其下面的元件列表 -->
<div class="page-container-merge">
<CommonNavbar
id="header"
:bgColor="bgColor"
v-show="isShowNavbar"
:isBlack="isBlack"
:isShowShare="isShowShare"
:title="navTitle"
:shareTitle="project.projectName"
:shareTitleInfo="project.projectIntro"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="0px solid #fff"
:backMethod="from"
></CommonNavbar>
<div class="page-content list-container">
<!-- banner图片 -->
<div v-if="bannerType == 1" class="page-content-img-container">
<img class="banner-img" :src="attachmentUrl" />
<!-- <img v-show="project.status == 1" class="banner-img-1" src="../images/status-join.png" /> -->
<img v-show="project.status == 5" class="banner-img-5" src="../images/status-keep-on.png" />
<img v-show="project.status == 10" class="banner-img-10" src="../images/status-end-cme.png" />
</div>
<!-- banner视频 -->
<CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer>
<!-- 项目标题 -->
<CommonDescription
:projectName="project.projectName"
:studyNum="project.studyNum"
:subject="project.subject"
/>
<!-- 步骤条 -->
<div v-if="project.cmeType != 2">
<CmeStep
:currentProgress="project.currentProgress"
:studyProgress="project.studyProgress"
:credit="project.credit"
:creditId="project.creditId"
:certificateUrl="project.certificateUrl"
:inScope="project.inScope"
:projectId="projectId"
:certificateId="project.certificateId"
@applicationCredit="applicationCredit"
/>
</div>
<!-- 简介和目录 -->
<div class="intro-catalogue-container">
<div
id="content-title"
class="title"
:class="{'fixed-title-1': (fixedFlag && !isWeb), 'fixed-title-2': (fixedFlag && isWeb)}"
>
<span :class="{'focus': tabFlag}" @click="jumpIntro">简介</span>
<span :class="{'focus': !tabFlag}" @click="jumpCatalogue">目录</span>
</div>
<div v-show="fixedFlag" class="fixed-flag-height"></div>
<div id="intro-content" class="intro-content">
<BasicInfo
:projectNo="project.projectNo"
:credit="project.credit"
:level="project.level"
:scope="project.scope"
:startDate="project.startDate"
:endDate="project.endDate"
:organName="project.organName"
:remind="project.remind"
:projectCredit="project.projectCredit"
/>
<LearnKnow :mustKnow="project.mustKnow"></LearnKnow>
<CommonSpliteLine></CommonSpliteLine>
<ItemIntro :textContent="textContent" @itemIntroText="itemIntroText"></ItemIntro>
<ItemLeader v-if="projectLeader"
:projectLeader="projectLeader"
:leaderText="leaderText"
@changeLeaderText="changeLeaderText"
/>
<TeacterIntro v-if="doctorList.length" :doctorList="doctorList"></TeacterIntro>
</div>
<CommonSpliteLine></CommonSpliteLine>
<div id="catalogue-content" class="catalogue-content">
<div class="catalogue-title">目录</div>
<CellListDetail
:projectComponent="projectComponentDTOS"
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"
/>
</div>
</div>
</div>
<Loading v-show="showLoading" />
<!-- 弹框 -->
<CommonDialog
:isShowDialog="isShowDialog"
:isSingle="isSingle"
:cancleBtnText="cancleBtnText"
:confirmBtnText="confirmBtnText"
:content="dialogContent"
@handlerAction="handlerAction"
/>
<!-- 弹框 -->
<ExjumperDialog
:isShowDialog="isShowEJDialog"
isSingle
needSubContent
content="确保您已经从云鹊平台购买优惠学习卡。跳转后请申请考试、激活学习卡,考试通过后申请证书。"
subContent="学分由中华医学电子音像出版社授予,如有问题可致电400-920-8899云鹊医客服咨询。"
cancleBtnText="我知道了"
@handlerAction="handlerEJAction"
/>
<ExjumperButton
@btnClick="beforeJumpToExam"
v-if="project.cmeType == 2 && project.inScope !== 0"
:btnText="project.currentProgress > 1 ? '参加考试' : '学完全部课程,可参加考试'"
:type="project.currentProgress > 1 ? 'primary' : 'disabled'"></ExjumperButton>
<div v-if="project.cmeType == 2 && project.inScope !== 0" style="padding-top: 30px"></div>
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CommonDescription from "@/components/common/common-description";
import CommonSpliteLine from "@/components/common/common-splite-line";
import CellListDetail from "@/components/business/cell-list-detail";
// import NoPermContent from "@/components/business/no-perm-content";
// import CommonBannerVideo from "@/components/common/common-banner-video";
import CommonTcPlayer from "@/components/common/common-tcplayer";
import Loading from "@/components/common/common-loading";
import CmeStep from "@/components/cme/cme-step";
import BasicInfo from "@/components/cme/basic-info";
import LearnKnow from "@/components/cme/learn-know";
import ItemIntro from "@/components/cme/item-intro";
import ItemLeader from "@/components/cme/item-leader";
import TeacterIntro from "@/components/cme/teacter-intro";
import CommonDialog from "@/components/cme/common-dialog";
import ExjumperDialog from "@/components/cme/exjumper-dialog";
import ExjumperButton from "@/components/cme/exjumper-button";
import { getWebPageUrl, gotoPage } from "@/utils/index";
import { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter";
import { Toast } from 'vant';
let cataOffsetTop = 0;
let intorOffsetTop = 0;
let titleOffsetHeight = 50;
export default {
data() {
return {
// token: "9B62E5874DA94979A54DB3E9DFC1443F",
isWeb: window.__isWeb,
textContent: "",
leaderText: "",
pageTitle: "",
isShowShare: true,
premissionFlag: false,
isSingle: false,
dialogContent: "", // 弹框内容
confirmBtnText: "", // 弹框按钮
cancleBtnText: "",
isShowDialog: false,
isShowEJDialog: false,
tabFlag: true, // 显示目录还是简介
fixedFlag: false, // 目录和简介是否固定
project: {
credit: "", // 学分
creditId: 0, // 学分Id
level: "", // 项目等级
scope: "", // 申请范围
remind: "", // 在不在范围提醒
startDate: 0, // 开始时间
endDate: 0, // 结束时间
organName: "", // 发起机构
projectName: "", // 项目名称
projectNo: "", // 项目编号
currentProgress: 0, // 项目进度
projectIntro: "", // 项目介绍
mustKnow: "", // 学习须知
studyNum: 0, // 学习人数
studyProgress: "0%", // 学习进度
subject: "", // 学科
status: 0, // 项目状态 5是进行中 10是已结束
certificateUrl: "", // 证书url
inScope: 0, // 是否在范围内判断
projectCredit: "", // 学分
certificateId: "0",
cmeType: 1, // 1: 自营项目; 2: 中华医学会二类
examBtnUrl: '', // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录
// cmeType=2时不显示进度,
// projectNo为空时不显示项目编号,
// projectLeader为空时不显示项目负责人,
// inScope=0时考试按钮不显示,
// currentProgress>1时考试按钮显示并可用
},
projectLeader: {},
doctorList: [],
from: "inner",
isBlack: false,
showLoading: false,
projectId: "1",
//componentId: 1,
//moduleId: 1,
contentList: [],
//moduleName: "",
bannerType: 1, // 1 图片 2视频
videoOptions: {
mp4: "",
autoplay: false, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
coverpic: require("../images/video-cover.png"),
width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度
height: "210" //视频的显示高度,请尽量使用视频分辨率高度
},
//projectStatus: 1, //1没有获得证书 2是获得全部证书
attachmentUrl: require("../images/banner-default.png"),
bgColor: "none",
navTitle: "项目详情",
// compTitle: "组件名称",
isShowNavbar: true,
isFixNavbar: true,
pointStyle: "activity",
projectComponentDTOS: [],
actionList: [],
detailNum: 0,
courseRequire: 0,
clientType: 0,
// currentProgress>1时考试按钮显示并可用
btnType: 'primary', // primary: 可跳转时(currentProgress = 1); disabled: 不可跳转时
btnText: '学完全部课程,可参加考试' // 参加考试(currentProgress = 1); 或者学完全部课程,可参加考试
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CellListDetail,
Loading,
CommonTcPlayer,
CmeStep,
BasicInfo,
LearnKnow,
ItemIntro,
ItemLeader,
TeacterIntro,
CommonDialog,
ExjumperButton,
ExjumperDialog
},
computed: {
...mapGetters(["userInfo"]),
},
created() {
let _this = this;
this.from = this.$route.query.from || this.from || "native";
this.projectId = this.$route.query.id || 1;
this.courseRequire = this.$route.query.courseRequire;
window.__getUserInfo64Comp = function(param) {
// appVersion 安卓 3.2.2 iOS
console.log('__getUserInfo64Comp', param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.checkToken();
_this.getProjectParticularsV2();
};
_this.getUserInfo();
// if (__isWeb && process.env.BUILD_ENV == "development") {
// let param = {};
// __getUserInfo64Comp(param);
// }
if (__isWeb) {
_this.getProjectParticularsV2();
}
window.__refresh = function() {
_this.getUserInfo();
};
// 打开页面埋点
this.$sendBuriedData({
// action: "打开页面",
component_tag: `211#0#${this.projectId}#0`
});
},
mounted() {
window.addEventListener("scroll", this.scrollFun);
const _this = this;
},
beforeDestroyed() {
window.removeEventListener("scroll", this.scrollFun);
},
methods: {
...mapActions(["setUserInfo"]),
// 点击“参与考试”
beforeJumpToExam() {
// 如果是首次,则弹出弹框
if(this.project.firstIntoExam) {
this.isShowEJDialog = true;
} else {
this.jumpToExamAction();
}
},
// 第一次跳转弹框,点击时调用相应接口
handlerEJAction() {
this.isShowEJDialog = false;
this.jumpToExamAction();
this.firstIntoExamAction();
},
// 跳转到第三方考试页面
jumpToExamAction() {
// 判断版本号,如果小于3.4.0,则只做提示
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
if(appVersionNum < 340) {
Toast('请您下载新版本App');
return;
}
let paramList = [
{
key: "pageUrl",
value: this.project.examBtnUrl,
type: 4,
seqNo: 1
},
// 此字段不配置,则用原来的逻辑
{
key: "needCache",
value: '1', // 0不缓存,其它值都做缓存
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
// 首次进入考试时记录(点击‘我知道了’时调用)
firstIntoExamAction() {
let _this = this;
let param = {
token: _this.userInfo.userToken || this.token,
setEntry: true
};
this.NEW_POST(`cme/project/${_this.projectId}/firstIntoExam`, param).then(res => {
if (res.code == "000000") {
this.project.firstIntoExam = false;
}
});
},
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo64Comp"
});
},
// token是否失效校验
checkToken() {
let _this = this;
let param = {
token: _this.userInfo.userToken || _this.token,
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() {
let _this = this;
let param = {
id: _this.projectId,
creditId: _this.project.creditId,
token: _this.userInfo.userToken || this.token,
setEntry: true
};
_this.NEW_POST("cme/credit/rangeCheck", param).then(res => {
if (res.code == "219004" || res.code == "219012") {
// 未加入机构 219004 不在申请范围 219012
this.dialogContent = `该项目仅对${_this.project.scope}的用户开放`;
this.cancleBtnText = "我知道了";
this.isShowDialog = true;
this.isSingle = true;
} else {
this.isShowDialog = false;
}
});
},
// 立即申请学分
applicationCredit() {
let _this = this;
let param = {
id: _this.projectId,
creditId: _this.project.creditId,
token: _this.userInfo.userToken || this.token,
setEntry: true
};
_this.NEW_POST("cme/credit/applyCheck", param).then(res => {
if (res.code == "000000") {
gotoPage(
_this,
`cme/#/credit-edit?creditId=${_this.project.creditId}`
);
} else if (res.code == "219004" || res.code == "219005") {
// 未加入机构 219004 未身份认证 219005 不在申请范围 219012
let params = {
__funcName: "__checkPermissions",
permCode: "009014"
};
rocNative.checkPermissions(params);
}
// else if (res.code == "219012") {
// this.dialogContent = res.message;
// this.cancleBtnText = "我知道了";
// this.isShowDialog = true;
// this.isSingle = true;
// }
else {
this.dialogContent = res.message;
this.cancleBtnText = "我知道了";
this.isShowDialog = true;
this.isSingle = true;
}
});
},
// 弹框按钮事件
handlerAction(data) {
this.isShowDialog = false;
},
scrollFun() {
let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
let h = intorOffsetTop - 135
// 显示头部导航
if (scrollTop > 20) {
this.isBlack = true;
this.bgColor = "#fff";
} else {
this.isBlack = false;
this.bgColor = "none";
}
if(window.__isWeb) {
h = intorOffsetTop - 75;
} else if(window.__isIOS) {
h = intorOffsetTop - 140;
}
// 如果滚动高度大于简介头部(并减去tab高度),则进行固定
if(scrollTop > h) {
this.fixedFlag = true;
} else {
this.fixedFlag = false;
}
// 如果滚动高度大于
if(scrollTop > cataOffsetTop - 600) {
this.tabFlag = false;
} else {
this.tabFlag = true;
}
},
// 锚点到简介
jumpIntro() {
if(!this.tabFlag) {
this.tabFlag = true;
}
if(!this.fixedFlag) {
this.fixedFlag = true;
}
let h;
if (this.isWeb) {
h = intorOffsetTop - 30 - titleOffsetHeight;
} else {
h = intorOffsetTop - 85 - titleOffsetHeight;
}
window.scrollTo(0, h);
this.isBlack = true;
this.bgColor = "#fff";
this.$sendBuriedData({
component_tag: `211#211007#${this.projectId}`
});
},
// 锚点到目录
jumpCatalogue() {
if(this.tabFlag) {
this.tabFlag = false;
}
if(!this.fixedFlag) {
this.fixedFlag = true;
}
let h;
if (this.isWeb) {
h = cataOffsetTop - titleOffsetHeight;
} else {
h = cataOffsetTop - 100;
}
window.scrollTo(0, h);
this.isBlack = true;
this.bgColor = "#fff";
this.$sendBuriedData({
component_tag: `211#211008#${this.projectId}`
});
},
// 获取项目详情
getProjectParticularsV2() {
let _this = this;
let param = {
token: _this.userInfo.userToken || this.token,
setEntry: true
};
_this.showLoading = true;
this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
if (res.code == "000000") {
// 先设置视频URL再显示视频组件 ------------ BEGIN
if (res.data.attachmentType == 2) {
_this.videoOptions.mp4 = res.data.attachmentUrl;
} else {
_this.attachmentUrl = res.data.attachmentUrl;
}
_this.bannerType = res.data.attachmentType;
if (_this.bannerType == 2) {
_this.clientType = __isWeb ? 1 : __isAndroid ? 2 : 3;
}
// 先设置视频URL再显示视频组件 ------------ END
_this.project = res.data;
if (_this.project.projectIntro) {
_this.textContent =
_this.project.projectIntro.length > 70
? _this.project.projectIntro.slice(0, 70) + "..."
: this.project.projectIntro;
}
_this.project.mustKnow = _this.project.mustKnow.replace(
/(\r\n)|\r|\n/g,
"<br>"
);
_this.projectLeader = res.data.projectLeader;
if (_this.projectLeader && _this.projectLeader.info) {
_this.leaderText =
_this.projectLeader.info.length > 70
? _this.projectLeader.info.slice(0, 70) + "..."
: this.projectLeader.info;
}
_this.doctorList = res.data.doctorList;
//_this.projectStatus = res.data.projectStatus;
_this.projectComponentDTOS = _this.setListData(
res.data.projectComponentDTOS
);
if (!_this.isWeb && !_this.premissionFlag) {
_this.premissionFlag = true;
_this.permission(); // 提示是否有机构和在申请范围内
}
// TODO Add by Anndy Yang
if (_this.project.currentProgress == 2) {
this.$nextTick(() => {
window.scrollTo(0, 0);
});
}
setTimeout( () => {
cataOffsetTop = document.getElementById("catalogue-content").offsetTop;
intorOffsetTop = document.getElementById("intro-content").offsetTop;
console.log('getProjectParticularsV2', cataOffsetTop, intorOffsetTop);
// 直接跳转
if(_this.project.jumpToContents) {
setTimeout(() => {
this.jumpCatalogue();
}, 200);
}
}, 200);
setTimeout(() => {
_this.showLoading = false;
}, 800);
}
});
},
// 项目负责人--详情(收起)
changeLeaderText(data) {
let _this = this;
if (_this.projectLeader.info) {
if (!data.allTextFlag) {
_this.leaderText =
_this.projectLeader.info.length > 70
? _this.projectLeader.info.slice(0, 70) + "..."
: this.projectLeader.info;
} else {
_this.leaderText = _this.projectLeader.info;
}
}
},
// 项目介绍
itemIntroText(data) {
let _this = this;
if (_this.project.projectIntro) {
if (!data.allTextFlag) {
_this.textContent =
_this.project.projectIntro.length > 70
? _this.project.projectIntro.slice(0, 70) + "..."
: this.project.projectIntro;
} else {
_this.textContent = _this.project.projectIntro;
}
}
},
setListData(data) {
let _this = this;
let list = data;
let actionList = [];
let detailNum = 0;
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].portalModuleDTOS.length; j++) {
detailNum++;
if (list[i].portalModuleDTOS[j].status === 2) {
list[i].portalModuleDTOS[j].value =
"共" + list[i].portalModuleDTOS[j].nodeCount + "节";
} else {
list[i].portalModuleDTOS[j].value = "尚未开始";
}
list[i].portalModuleDTOS[j].disabled =
list[i].portalModuleDTOS[j].status === 2 ? false : true;
//展开项记录
if (list[i].portalModuleDTOS[j].expandStatus == 1) {
actionList.push(list[i].portalModuleDTOS[j].expandKey);
}
for (
let z = 0;
z < list[i].portalModuleDTOS[j].contentList.length;
z++
) {
list[i].portalModuleDTOS[j].contentList[z].height = _this.getHight(
list[i].portalModuleDTOS[j].contentList[z]
);
}
}
}
_this.actionList = actionList;
_this.detailNum = detailNum;
console.log("list转为:", list, actionList, detailNum);
// list[0].portalModuleDTOS[3].contentList[0].certificateFlag = 2;
// list[0].portalModuleDTOS[3].contentList[1].certificateFlag = 2;
return list;
},
getHight(data) {
let len = vueFilters.strLength(data.name);
let certificate = data.certificateFlag;
if (len > 30 && certificate == 2) {
return "2";
} else if (len > 30 && certificate != 2) {
return 2;
} else if (len <= 30 && certificate == 2) {
return "1";
} else if (len <= 30 && certificate != 2) {
return 1;
}
}
}
};
</script>
<style lang="scss" scoped>
@import "../style/mixin";
.page-container-merge {
.nav-top .nav-title {
height: px2rem(0px);
// padding: px2rem(18px);
}
.banner-img {
display: inherit;
width: px2rem(375px);
height: px2rem(210px);
&-1 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
&-5 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
&-10 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
}
.list-container {
// margin-bottom: px2rem(40px);
}
.intro-catalogue-container {
.title {
height: px2rem(50px);
line-height: px2rem(30px);
padding: 0 px2rem(15px);
border-bottom: 1px solid #f0f1f2;
span {
display: inline-block;
line-height: px2rem(15px);
font-size: px2rem(15px);
color: #979899;
padding-right: px2rem(35px);
}
span.focus {
position: relative;
color: #373839;
}
span.focus:after {
content: "";
position: absolute;
left: px2rem(7px);
bottom: px2rem(-14px);
background: #449284;
// border-bottom: px2rem(1px) solid #449284;
width: px2rem(10px);
height: px2rem(3px);
border-radius: px2rem(3px);
}
}
.title.fixed-title-1 {
position: fixed;
left: 0;
top: px2rem(60px);
background: #fff;
width: 100%;
z-index: 999;
}
.title.fixed-title-2 {
position: fixed;
left: 0;
top: px2rem(0px);
background: #fff;
width: 100%;
z-index: 999;
}
.catalogue-content {
padding: px2rem(30px) px2rem(15px) 0;
.catalogue-title {
font-size: px2rem(18px);
color: #373839;
font-weight: 700;
margin-bottom: px2rem(16px);
}
}
.fixed-flag-height {
height: px2rem(50px);
}
}
}
</style>
......@@ -91,6 +91,7 @@
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"
:hasBindCard="hasBindCard"
/>
</div>
</div>
......@@ -125,15 +126,21 @@
/>
<ExjumperButton
@btnClick="beforeJumpToExam"
v-if="project.cmeType == 2 && project.hasBindCard"
v-if="project.cmeType == 2 && hasBindCard"
:btnText="project.currentProgress > 1 ? '参加考试' : '学完全部课程,可参加考试'"
:type="project.currentProgress > 1 ? 'primary' : 'disabled'"></ExjumperButton>
<div v-if="project.cmeType == 2" style="padding-top: 30px"></div>
<BindCardButton v-if="project.cmeType == 2 && !project.hasBindCard" :cardInfo="cardInfo" @changeClick="changeClick"></BindCardButton>
<!--去兑换-->
<ChangeCard :show="show" :cardInfo="cardInfo" ></ChangeCard>
<BindCardButton
v-if="project.cmeType == 2 && !hasBindCard"
:cardInfo="cardInfo"
:gotoExchange="gotoExchange"
:gotoBuy="gotoBuy"
@changeClick="changeClick"
></BindCardButton>
<!--去兑换-->
<ChangeCard :show="show" :cardInfo="cardInfo" ></ChangeCard>
<!-- <CardPopup :cardInfo="cardInfo" :isShow="isShowPopup" @clickOverlay="clickOverlay" @cancle="jumpToCardList()" @confirm="confirm"></CardPopup> -->
<Loading v-show="showLoading" />
</div>
......@@ -216,13 +223,14 @@ export default {
examBtnUrl: '', // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录
hasBindCard: false, // 是否绑定过学习卡或兑换过 没有绑定,则显示绑定按钮
cardStatus: 0,
// cmeType=2时不显示进度,
// projectNo为空时不显示项目编号,
// projectLeader为空时不显示项目负责人,
// inScope=0时考试按钮不显示,
// currentProgress>1时考试按钮显示并可用
},
hasBindCard: false, // 是否绑定过学习卡或兑换过 没有绑定,则显示绑定按钮
projectLeader: {},
doctorList: [],
from: "inner",
......@@ -349,6 +357,16 @@ export default {
methods: {
...mapActions(["setUserInfo"]),
// 打开兑换码弹框
gotoExchange() {
},
// 调用支付页面
gotoBuy() {
},
// 查询教培项目广告位配置信息
getAdvertInfoList() {
let param = {
......@@ -506,6 +524,49 @@ export default {
// 跳转到原生的购买页面
confirm() {
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
this.$sendBuriedData({
component_tag: `885#8852`
});
// this.isShowPopup = false;
// let pageUrl = this.project.examBtnUrl;
// 直接传入项目ID(projectId)
let projectId = this.project.projectId;
let paramList = [
{
key: "className",
value: "com.picahealth.yunque.activitys.studycard.StudyCardDetailActivity###PicaDo.LearningCardVC",
type: 4,
seqNo: 1
},
{
key: "goodId",
value: this.cardInfo.id,
type: 4,
seqNo: 1
},
{
key: "courseUrl",
// value: encodeURIComponent(pageUrl),
value: projectId,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 跳转到原生的购买页面
confirmOld() {
this.$sendBuriedData({
component_tag: `885#8852`
});
......@@ -806,8 +867,11 @@ changeClick(msg){
_this.showLoading = false;
}, 800);
// TODO 如果 hasBindCard 为false,则获取卡信息
_this.preJumper()
// 如果 hasBindCard 为false,则获取卡信息 0:未绑卡 1:已绑卡
_this.hasBindCard = res.data.cardStatus == 0 ? false : true;
if(!_this.hasBindCard) {
_this.preJumper()
}
}
});
},
......
<template>
<!-- 组件详情页面:模块列表及其下面的元件列表 -->
<div class="page-container-parent">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:isBlack="isBlack"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="0px solid #fff"
:backMethod="from"
></CommonNavbar>
<div class="page-content list-container">
<!-- <img
v-if="bannerType == 1"
class="banner-img"
src="https://files.yunqueyi.com/image/jpeg/common/20190214153449966.jpg"
>-->
<!-- <div v-if="bannerType == 1" class="page-content-img-container"> -->
<div v-if="bannerType == 1" class="page-content-img-container">
<img class="banner-img" :src="attachmentUrl">
<img v-show="pStatus == 1" class="banner-img-1" src="../images/status-join.png">
<img v-show="pStatus == 5" class="banner-img-5" src="../images/status-keep-on.png">
<img v-show="pStatus == 10" class="banner-img-10" src="../images/status-end.png">
</div>
<!-- <CommonBannerVideo v-if="bannerType == 1" :videoOptions="videoOptions"></CommonBannerVideo> -->
<CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer>
<CommonDescription :descTitle="projectName" :value="projectIntro"></CommonDescription>
<CommonSpliteLine></CommonSpliteLine>
<!-- <CellListItem :paramData="contentList" :moduleName="moduleName"></CellListItem> -->
<div v-if="visibleFlag == 1" class="project-num">{{ childrenList.length }} 个项目</div>
<CoopListItem v-if="visibleFlag == 1" :paramData="childrenList" :coopType="1" :tabTo="3" :isShow="isShow"></CoopListItem>
<NoPermContent v-if="visibleFlag == 2"></NoPermContent>
</div>
<Loading v-show="showLoading"/>
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CommonDescription from "@/components/common/common-description";
import CommonSpliteLine from "@/components/common/common-splite-line";
import CommonTitle from "@/components/common/common-title";
import CommonBannerVideo from "@/components/common/common-banner-video";
import CommonTcPlayer from "@/components/common/common-tcplayer";
import CoopListItem from "@/components/business/coop-list-item";
import NoPermContent from "@/components/business/no-perm-content";
import Loading from "@/components/common/common-loading";
import { mapGetters, mapActions } from "vuex";
import vueFilters from '@/utils/filter'
export default {
data() {
return {
from: "inner",
isBlack: false,
showLoading: false,
projectId: 1,
componentId: 1,
moduleId: 1,
contentList: [],
moduleName: "",
bannerType: 1,
videoOptions: {
mp4: "",
// mp4: "https://pica-pro.oss-cn-shanghai.aliyuncs.com/2019/03/05/movie.mp4",
// "mp4": "http://1258717429.vod2.myqcloud.com/24a74910vodcq1258717429/7c37c18f5285890786204547811/9BFIyaoXYAcA.mp4",
// "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
// "flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个flv的播放地址,用于PC平台的播放 请替换成实际可用的播放地址
autoplay: false, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
coverpic: require("../images/video-cover.png"),
width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度
height: "210" //视频的显示高度,请尽量使用视频分辨率高度
},
// projectStatus: 1, //1没有获得证书 2是获得全部证书
pStatus: 0, // 项目状态 1是参加中 5是进行中 10是已结束
projectIntro: "",
projectName: "",
attachmentUrl: require("../images/banner-default.png"),
bgColor: "none",
navTitle: "",
compTitle: "组件名称",
isShowNavbar: true,
isShow: true,
isFixNavbar: true,
pointStyle: "activity",
descTitle: "规定从何处开始选取。如果是负数",
description:
"必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置那么它规定从数组尾部开始算起的位置那么它规定从数组尾部开始算起的位置那么它规定从数组尾部开始算起的位置。也就是说那么它规定从数组尾部开始算起的位置。也就是说那么它规定从数组尾部开始算起的位置。也就是说那么它规定从数组尾部开始算起的位置。也就是说那么它规定从数组尾部开始算起的位置。" +
" 也就是说那么它规定从数组尾部开始算起的位置。也就是说,必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推第二个元素。",
childrenList: [],
visibleFlag: 0,
entryId: 0,
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CommonTitle,
CommonBannerVideo,
Loading,
CommonTcPlayer,
CoopListItem,
NoPermContent,
},
computed: {
...mapGetters(["userInfo"])
},
created() {
let _this = this;
this.from = this.$route.query.from || this.from || "native";
this.projectId = this.$route.query.projectId;
this.componentId = this.$route.query.componentId;
this.moduleId = this.$route.query.moduleId;
this.moduleName = this.$route.query.moduleName;
this.entryId = this.$route.query.entryId;
window.__getUserInfo4Comp = function(param) {
_this.token = param.userToken;
_this.setUserInfo(param);
_this.checkToken();
// _this.getContentList(_this.moduleId);
// _this.getComponentInfoById(_this.componentId);
_this.getChildrenProject(_this.entryId);
};
// this.getCoopInfo(this.projectId);
window.__refresh = function() {
// _this.getContentList(_this.moduleId);
_this.getChildrenProject(_this.entryId);
};
_this.getUserInfo();
},
mounted() {
window.addEventListener("scroll", this.scrollFun);
},
beforeDestroyed() {
window.removeEventListener("scroll", this.scrollFun);
},
methods: {
...mapActions(["setUserInfo"]),
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo4Comp"
});
if (window.__isWeb && process.env.BUILD_ENV == "development") {
console.log('projectId',this.projectId);
let param = {
userToken: 'ED9F3381362641858B2B1F90C92A8050',
};
__getUserInfo4Comp(param);
}
},
// 获取单个模块信息
getComponentInfoById(componentId) {
let _this = this;
let param = {
componentId: componentId,
token: _this.userInfo.userToken,
setEntry: true
};
this.GET("portal/portalApp/component", param).then(res => {
if (res.code == "000000") {
_this.attachmentUrl = res.data.imageUrl;
_this.projectIntro = res.data.introduce;
_this.projectName = res.data.name;
}
});
},
// 获取单个项目信息
getCoopInfo(projectId) {
let _this = this;
let param = {
portalProjectId: projectId,
token: _this.userInfo.userToken,
setEntry: true
};
this.GET("portal/portalApp/queryProjectParticulars", param).then(res => {
if (res.code == "000000") {
// 先设置视频URL再显示视频组件 ------------ BEGIN
if (res.data.attachmentType == 2) {
_this.videoOptions.mp4 = res.data.attachmentUrl;
} else {
_this.attachmentUrl = res.data.attachmentUrl;
}
_this.bannerType = res.data.attachmentType;
// 先设置视频URL再显示视频组件 ------------ END
_this.projectIntro = res.data.projectIntro;
_this.projectName = res.data.projectName;
_this.pStatus = res.data.status;
}
});
},
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();
}
});
},
getChildrenProject(entryId) {
let _this = this;
let param = {
entryId: entryId,
token: _this.userInfo.userToken,
setEntry: true
};
this.GET("portal/portalApp/getEntryInfo", param).then(res => {
if (res.code == "000000") {
_this.visibleFlag = res.data.learnableFlag;
if (res.data.attachmentType == 2) {
_this.videoOptions.mp4 = res.data.attachmentUrl;
} else {
_this.attachmentUrl = res.data.attachmentUrl;
}
_this.bannerType = res.data.attachmentType;
// 先设置视频URL再显示视频组件 ------------ END
_this.projectIntro = res.data.entryIntro;
_this.projectName = res.data.entryName;
_this.pStatus = res.data.status;
_this.childrenList = res.data.projectList;
}
});
},
scrollFun() {
let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 20) {
this.isBlack = true;
this.bgColor = "#fff";
} else {
this.isBlack = false;
this.bgColor = "none";
}
}
}
};
</script>
<style lang="scss" >
@import "../style/mixin";
.page-container-parent {
.nav-top .nav-title {
height: px2rem(0px);
padding: px2rem(18px);
}
.banner-img {
display: inherit;
width: px2rem(375px);
height: px2rem(210px);
&-1 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
&-5 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
}
&-10 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(148px);
height: px2rem(30px);
}
}
.list-container {
// margin-bottom: px2rem(40px);
}
.project-num {
position: relative;
height: px2rem(18px);
margin: px2rem(20px) 0 px2rem(15px) px2rem(15px);
font-weight: 500;
font-size: px2rem(18px);
line-height: px2rem(18px);
}
}
</style>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册