提交 4933925b 编写于 作者: guangjun.yang's avatar guangjun.yang

项目组件列表项

上级 ac30df09
<template>
<!-- 项目组件列表项 -->
<section>
<div
class="cell-detail"
v-for="(component , index) in projectComponent"
:key="index">
<van-collapse v-model="activeNames" @change="changeCollapse">
<van-collapse-item
v-for="(portalModule, index) in component.portalModuleDTOS"
:key="index"
:title="(parseInt(index) + 1) + '.' + portalModule.moduleName | shortName(19)"
:name="portalModule.expandKey"
:value="portalModule.value"
:disabled="portalModule.disabled"
@click.native="chooseItem(portalModule)"
>
<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" >
<div class="name">
<div class="name-img">
<img v-if="item.type == 1 && item.useFlag == 1" class="img-icon" src="../../images/exam.png">
<img v-if="item.type == 1 && item.useFlag == 2" class="img-icon" src="../../images/exam-dark.png">
<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>
<p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
</div>
<span
@click="gotoExamOrCourse(item, portalModule.contentList, index)"
class="text-action"
:class="{'text-action-no': item.useFlag == 2}"
>
{{getActionText(item.status, item.type)}}
</span>
<div class="foot-line"
v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId">
</div>
</div>
</span>
</article>
</van-collapse-item>
</van-collapse>
</div>
</section>
</template>
<script>
import MergeTitle from "@/components/business/merge-title";
import NoMoreContent from "@/components/business/no-more-content";
import { Collapse, CollapseItem, Dialog, Toast } from 'vant';
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
import vueFilters from '@/utils/filter';
const actionMap = {
11: "去考试",
12: "再考一次",
13: "已通过",
14: "已完成",
15: "已通过",
16: "未通过",
21: "去学习",
22: "继续学习",
23: "去复习"
};
const sendBuriedDataMap = {
// 11: "8824",
// 12: "211013",
21: "8821",
22: "8822",
23: "8823"
}
export default {
name: "cell-list-item",
data() {
return {
appVersion: "200",
hocImg: require("../../images/has-owner-cert.png"),
activeNames: [1],
projectId: 1
};
},
props: {
hasBindCard: {
type: Boolean,
default: false
},
projectComponent: {
type: Array,
default: () => []
},
actionList: {
type: Array,
default: () => []
},
detailNum: {
type: Number | String,
default: 0
},
courseRequire: {
type: Number | String,
default: 0,
},
limitTimes: {
type: Number | String,
default: 0,
}
},
computed: {
...mapGetters(["userInfo"])
},
components: {
MergeTitle,
NoMoreContent,
Dialog,
},
watch:{
actionList: {
immediate: true,
handler (val) {
this.activeNames = val;
}
}
},
mounted() {
},
created() {
this.projectId = this.$route.query.id;
},
methods: {
// 跳转到考试或课程 type 1: 考试; 2: 课程
// 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试
gotoExamOrCourse(item, contentList, index) {
// 埋点:去学习、继续学习、复习、去考试、重考
// let actionCode = sendBuriedDataMap[item.status];
// if(actionCode) {
// this.$sendBuriedData({
// component_tag: `882#${actionCode}#${this.projectId}`
// });
// }
let appVersion = getAppVersion(this.userInfo.appVersion);
if (item.useFlag == 2) return;
if (item.type == 1) {
if (appVersion <= 300) {
Toast('请您下载新版本App');
return;
} else {
this.gotoExam(item.id);
}
} else if (item.type == 2) {
this.gotoCourse(item, contentList, index);
}
},
// 如果此模块中没有考试,则直接退出;否则
beforeGotoCourse(item, contentList, index) {
let extendsParam = [];
let hasExam = false;
let currentExam = {};
// 查找当前课程后面的有没有考试
for(let i = index; i < contentList.length; i ++) {
if(contentList[i].type == 1) {
hasExam = true;
currentExam = contentList[i];
break;
}
}
// 如果后面没有考试,则直接退出
if(!hasExam) return extendsParam;
let hasNoLearningCourse = false;
// 查找本模块中是否还有没有学习完的课程,排除当前这个
for(let i = 0; i < contentList.length; i ++) {
if(i == index) continue;
if(contentList[i].type == 2 && contentList[i].status != 14) {
hasNoLearningCourse = true;
break;
}
}
// 如果还有课程没有学完,则直接退出
if(hasNoLearningCourse) return extendsParam;
let urlType = currentExam.urlType;
let jumpUrl = currentExam.url;
let jumpContent = '';
let examType = 0;
// (已经与后台约定只判断链接)如果有链接,则要加入相应参数
if(jumpUrl) {
examType = urlType;
jumpContent = jumpUrl;
} else {
examType = -1;
jumpContent = currentExam.id;
}
extendsParam.push({key: "examType", value: examType, type: 4, seqNo: 1});
extendsParam.push({key: "jumpContent", value: jumpContent, type: 4, seqNo: 1});
return extendsParam;
},
// 跳转到课程
// TODO 查看课程是否是最后一节课, 如果是,则要查找到相应的考试,并传递给原生端
gotoCourse: function(item, contentList, index) {
let extendsParam = this.beforeGotoCourse(item, contentList, index);
let appVersion = getAppVersion(this.userInfo.appVersion);
// 弹框提示下载新版本可以试看
if(appVersion < 343 && !this.hasBindCard) {
this.$dialog.confirm({
className: 'con-dialog',
showCancelButton: false,
message: '激活/购买后可学习完整课程',
// message: '升级最新版本可试看课程',
confirmButtonText: '我知道了',
}).then(res => {
})
return;
}
let paramList = []
let limitTimes = this.limitTimes - 0;
if(this.hasBindCard) {
limitTimes = -1;
}
paramList = [
{
key: "className",
value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController",
type: 4,
seqNo: 1
},
{
key: "isCHC",
value: 0,
type: 4,
seqNo: 1
},
{
key: "courseId",
value: courseId,
type: 4,
seqNo: 1
},
{
key: "courseRequire",
value: this.courseRequire - 0,
type: 4,
seqNo: 1
},
{
key: "limitTimes",
value: limitTimes,
type: 4,
seqNo: 1
},
];
console.log(paramList);
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList.concat(extendsParam)
});
},
// 跳转到考试
gotoExam: function(examId) {
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.exammodule.ExamPreActivity###PicaDo.ExamModuleManager",
type: 4,
seqNo: 1
},
{
key: "examId",
value: examId,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
getActionText(status, type) {
let actionText = actionMap[status];
if(!actionText) {
actionText = type == 1 ? '去考试' : '去学习';
}
return actionText;
},
// showDialog(introduce) {
// Dialog.alert({
// title: '说明',
// message: introduce,
// confirmButtonText: '我知道了',
// })
// },
changeCollapse(activeNames) {
console.log('activeNames',activeNames);
let param = {
expandKeys: activeNames,
setEntry: true,
token: this.userInfo.userToken,
}
this.POST("portal/portalApp/updateExpandStatus?projectId="+this.projectId, param).then(res => {
});
},
deleteFlow() {
},
chooseItem(item) {
let _this = this;
if(item.disabled === true) {
console.log('item',item);
Toast('尚未开始,敬请期待');
}
},
// 弹框提示
toastToBuy() {
Toast('购买后可学习课程');
}
}
};
</script>
<style lang="scss">
@import "../../style/mixin";
.van-dialog {
transform: translate(-50%,-50%);
width: px2rem(300px);
border-radius: px2rem(3px);
.van-dialog__header {
padding-top: px2rem(30px);
font-size: px2rem(18px);
color: #333333;
}
.van-dialog__content {
.van-dialog__message--has-title {
padding-top: px2rem(14px);
text-align: left;
color: #676869;
font-weight:400;
}
}
.van-dialog__footer {
.van-button {
.van-button__text {
color: #449284;
font-size: px2rem(17px);
}
}
}
}
.van-toast {
// background: #000000;
div {
font-size:px2rem(12px);
color: #FFFFFF;
}
}
.van-toast--text {
padding: px2rem(7px) px2rem(8px);
}
.no-more-bottom {
position: relative;
width: 100%;
height: px2rem(40px);
}
.cell-detail {
.van-hairline--top::after , .van-hairline--top-bottom::after {
border-width: 0px;
}
.van-collapse-item {
.van-cell {
margin: px2rem(9px) auto 0 auto;
width: px2rem(345px);
min-height: px2rem(48px);
border-radius: px2rem(6px);
}
.van-collapse-item__title {
background: #F8F9FA;
.van-cell__title {
max-width: px2rem(200px);
vertical-align: middle;
line-height: px2rem(30px);
flex: auto;
span {
color: #373839;
font-weight:500;
font-size: px2rem(15px);
height: px2rem(15px);
line-height: px2rem(15px);
}
}
.van-cell__value {
// max-width: px2rem(80px);
line-height: px2rem(30px);
span {
color: #979899;
font-weight:500;
font-size: px2rem(14px);
line-height: px2rem(14px);
}
}
.van-icon {
margin-top: px2rem(3px);
color: #999999;
}
}
.van-collapse-item__title--expanded {
background: #E3EFED;
.van-cell__title {
span {
color: #449284;
font-weight:500;
font-size: px2rem(15px);
line-height: px2rem(15px);
}
}
.van-cell__value {
span {
color: #449284;
font-weight:500;
font-size: px2rem(14px);
line-height: px2rem(14px);
}
}
.van-icon {
color: #449284;
}
}
.van-collapse-item__title--disabled {
.van-cell__right-icon {
display: none;
}
.van-cell__title , .van-cell__value{
span {
color: #979899;
}
}
}
.van-collapse-item__content {
padding: 0;
}
}
.line-component {
position: relative;
margin-top: px2rem(20px);
margin-left: 0;
width: px2rem(373px);
height: px2rem(6px);
background: #F8F9FA;
}
}
.cell-container {
display: flex;
flex-direction: column;
margin: px2rem(20px) px2rem(0px) px2rem(-28px) px2rem(0px);
&-item {
position: relative;
display: flex;
flex-direction: row;
margin-bottom: px2rem(39px);
line-height: px2rem(51px);
font-size: px2rem(15px);
justify-content: space-between;
align-items: center;
.name {
.name-img {
position: relative;
z-index: 9;
margin-right: px2rem(6px);
width: px2rem(20px);
height: px2rem(20px);
float: left;
.img-icon {
position: absolute;
top: 0;
left: 0;
width: px2rem(20px);
height: px2rem(20px);
}
}
&-logo {
position: relative;
z-index: 9;
margin-right: px2rem(6px);
width: px2rem(20px);
height: px2rem(20px);
text-align: center;
background:rgba(68,146,132,1);
font-size: px2rem(12px);
font-weight: 700;
color: #FFFFFF;
border-radius: 50%;
float: left;
line-height: px2rem(22px);
// display:table;
// overflow:hidden;
// span {
// color: #FFFFFF;
// font-size: px2rem(12px);
// font-weight: 700;
// display: table-cell;
// text-align: center;
// vertical-align: middle;
// line-height: px2rem(20px);
// }
// &::before {
// position: absolute;
// top: px2rem(-6px);
// left: px2rem(8px);
// display: inline-block;
// height: px2rem(6px);
// width: px2rem(4px);
// background: #FFFFFF;
// content: "";
// }
// &::after {
// position: absolute;
// top: px2rem(20px);
// left: px2rem(8px);
// display: inline-block;
// height: px2rem(6px);
// width: px2rem(4px);
// background: #FFFFFF;
// content: "";
// }
}
&-learn {
background:rgba(246, 131, 103, 1);
}
&-logo-no {
background:rgba(231, 232, 233, 1);
}
&-title {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
width: px2rem(231px);
font-size: px2rem(15px);
font-weight: 700;
line-height: px2rem(22px);
color: #333333;
float: left;
}
&-title-no {
color: #979899;
}
// &::before {
// position: relative;
// top: px2rem(3px);
// display: inline-block;
// width: px2rem(4px);
// content: "";
// margin-right: px2rem(5px);
// height: px2rem(16px);
// background: #449284;
// border-radius: px2rem(3px);
// }
// span {
// img {
// margin-top: px2rem(4px);
// position: relative;
// top: px2rem(2px);
// width: px2rem(70px);
// height: px2rem(20px);
// }
// }
}
.text-action {
width: px2rem(68px);
height: px2rem(25px);
line-height: px2rem(25px);
text-align: center;
font-size: px2rem(12px);
font-weight: 700;
border-radius: px2rem(15px);
border: px2rem(1px) solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1);
img {
position: relative;
left: px2rem(2px);
top: px2rem(3px);
width: px2rem(8px);
height: px2rem(12px);
}
&-no {
border: px2rem(1px) solid #c7c8c9;
color: #c7c8c9;
}
}
.key {
width: px2rem(15px);
height: px2rem(15px);
}
}
span {
.cert-img {
margin-left: px2rem(26px);
position: relative;
top: px2rem(-34px);
width: px2rem(70px);
height: px2rem(20px);
}
.space2 {
top: px2rem(-34px);
}
}
.connect-line {
position: absolute;
// top: px2rem(32px);
top: px2rem(3px);
left: px2rem(8.5px);
height: px2rem(42px);
width: px2rem(3px);
background: #F8F9FA;
// border: 0.5px dashed rgba(240, 241, 244, 1);
}
.line-complete {
background: #E3EFED;
}
.len4 {
// height: px2rem(100px);
height: px2rem(106px);
}
.len3 {
// height: px2rem(82px);
height: px2rem(88px);
}
.len2 {
// height: px2rem(82px);
height: px2rem(88px);
}
.len1 {
// height: px2rem(62px);
height: px2rem(68px);
}
.bottom-line {
position: relative;
margin: px2rem(-19px) 0 px2rem(20px) 0;
bottom: 0px;
width: 100%;
height: px2rem(6px);
background: #F8F9FA;
border-radius: px2rem(2px);
// border-bottom: 0.5px solid #F0F1F2;
}
.foot-line {
position: absolute;
width: px2rem(311px);
margin-left: px2rem(34.5px);
height: px2rem(1px);
background: #E7E8E9;
// border-bottom: 0.5px solid #E7E8E9;
transform: scaleY(0.5);
bottom: px2rem(-20px);
}
}
.bg-13 {
background: #abcec7;
}
</style>
\ No newline at end of file
......@@ -29,6 +29,21 @@
<p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
</div>
<span
v-if="!item.id"
class="text-action text-action-no"
>
更新中
</span>
<img v-else-if="!hasBindCard && item.trySeeFlag == 1 && !item.trySeeTime" @click="toastToBuy" class="key" v-show="!hasBindCard" src="../../images/cme/phrase2/key.png" alt="">
<span
v-else-if="!hasBindCard && item.trySeeFlag == 1"
@click="gotoExamOrCourse(item, portalModule.contentList, index, true)"
class="text-action"
>
去试看
</span>
<span
v-else
@click="gotoExamOrCourse(item, portalModule.contentList, index)"
class="text-action"
:class="{'text-action-no': item.useFlag == 2}"
......@@ -132,7 +147,7 @@ export default {
methods: {
// 跳转到考试或课程 type 1: 考试; 2: 课程
// 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试
gotoExamOrCourse(item, contentList, index) {
gotoExamOrCourse(item, contentList, index, trySee) {
// 埋点:去学习、继续学习、复习、去考试、重考
// let actionCode = sendBuriedDataMap[item.status];
// if(actionCode) {
......@@ -150,7 +165,7 @@ export default {
this.gotoExam(item.id);
}
} else if (item.type == 2) {
this.gotoCourse(item, contentList, index);
this.gotoCourse(item, contentList, index, trySee);
}
},
......@@ -184,27 +199,27 @@ export default {
// 如果还有课程没有学完,则直接退出
if(hasNoLearningCourse) return extendsParam;
let urlType = currentExam.urlType;
let jumpUrl = currentExam.url;
let jumpContent = '';
let examType = 0;
// (已经与后台约定只判断链接)如果有链接,则要加入相应参数
if(jumpUrl) {
examType = urlType;
jumpContent = jumpUrl;
} else {
examType = -1;
jumpContent = currentExam.id;
}
extendsParam.push({key: "examType", value: examType, type: 4, seqNo: 1});
extendsParam.push({key: "jumpContent", value: jumpContent, type: 4, seqNo: 1});
// let urlType = currentExam.urlType;
// let jumpUrl = currentExam.url;
// let jumpContent = '';
// let examType = 0;
// // (已经与后台约定只判断链接)如果有链接,则要加入相应参数
// if(jumpUrl) {
// examType = urlType;
// jumpContent = jumpUrl;
// } else {
// examType = -1;
// jumpContent = currentExam.id;
// }
extendsParam.push({key: "examType", value: -1, type: 4, seqNo: 1});
extendsParam.push({key: "jumpContent", value: currentExam.id, type: 4, seqNo: 1});
return extendsParam;
},
// 跳转到课程
// TODO 查看课程是否是最后一节课, 如果是,则要查找到相应的考试,并传递给原生端
gotoCourse: function(item, contentList, index) {
gotoCourse: function(item, contentList, index, trySee) {
let extendsParam = this.beforeGotoCourse(item, contentList, index);
let appVersion = getAppVersion(this.userInfo.appVersion);
// 弹框提示下载新版本可以试看
......@@ -221,10 +236,6 @@ export default {
return;
}
let paramList = []
let limitTimes = this.limitTimes - 0;
if(this.hasBindCard) {
limitTimes = -1;
}
paramList = [
{
key: "className",
......@@ -250,13 +261,20 @@ export default {
type: 4,
seqNo: 1
},
{
];
if(trySee) {
let limitTimes = this.limitTimes - 0;
if(this.hasBindCard) {
limitTimes = -1;
}
paramList.push({
key: "limitTimes",
value: limitTimes,
type: 4,
seqNo: 1
},
];
});
}
console.log(paramList);
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
......@@ -287,6 +305,8 @@ export default {
jsonString: paramList
});
},
// 获取按钮文案
getActionText(status, type) {
let actionText = actionMap[status];
if(!actionText) {
......@@ -294,13 +314,8 @@ export default {
}
return actionText;
},
// showDialog(introduce) {
// Dialog.alert({
// title: '说明',
// message: introduce,
// confirmButtonText: '我知道了',
// })
// },
// 折叠与展开模块
changeCollapse(activeNames) {
console.log('activeNames',activeNames);
let param = {
......
......@@ -10,7 +10,7 @@
borderStyle="1px solid #fff"
></CommonNavbar>
<section class="page-content">
<section v-show="isShow" class="cb-wrapper padding-top-111">
<section v-show="!existBind" class="cb-wrapper padding-top-111">
<CardBanner :userMobile="userMobile"></CardBanner>
</section>
<section class="body">
......@@ -38,7 +38,7 @@
<span>{{subject.name}}</span>
<span>({{subject.code}})</span>
<span v-show="subject.bindCardStatus == 1" class="buy">己购</span>
<span v-show="subject.openFlag == 0" class="time">{{subject.predictTime}}</span>
<span v-show="subject.openFlag == 0" class="time">{{formatTime(subject.predictTime, '{y}年{m}月')}}上线</span>
</li>
</ul>
</li>
......@@ -65,10 +65,12 @@ import CardBanner from "@/components/cme/card-banner";
import Loading from "@/components/common/common-loading";
import CommonTitle from "@/components/common/common-title";
import { mapGetters, mapActions } from "vuex";
import { parseTime } from '@/utils/index'
export default {
data() {
return {
existBind: 0,
crrentModelIndex: 0,
titleTestModelList: [],
showLoading: false,
......@@ -116,7 +118,8 @@ export default {
{ name: "全科中医", code: 201, bindStatus: 0 }
]
}
]
],
isInfresh: false,
};
},
computed: {
......@@ -143,6 +146,7 @@ export default {
_this.getListData();
}
window.__refresh = function() {
_this.isInfresh = true;
_this.getUserInfo();
};
......@@ -171,6 +175,7 @@ export default {
// 跳转到项目页面
coopDetails(item) {
if(item.openFlag == 0) return;
// this.$sendBuriedData({
// component_tag: `880#8803#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
// });
......@@ -180,7 +185,7 @@ export default {
this.$router.push({
path: "/coop",
query: {
id: item.id
id: item.projectId
}
});
return;
......@@ -216,6 +221,16 @@ export default {
//获取版本号
getUserInfo() {
// 如果刷新了页面,并且没有手机号码,则直接返回到上一级
if(this.isInfresh && !this.userMobile) {
rocNative.goBack();
return;
}
// 如果是直接进入了页面,则调用原生登陆
if(!this.userMobile) {
rocNative.gotoLogin();
return;
}
rocNative.getUserInfo({
__funcName: "__getUserInfo"
});
......@@ -232,6 +247,7 @@ export default {
this.GET(`portal/titleTestApp/list`, param).then(res => {
this.showLoading = false;
if (res.code == "000000") {
this.existBind = res.data.existBind || 0;
this.titleTestModelList = res.data.titleTestModelList;
this.listData = res.data.titleTestModelList[0].firstSubjectModelList;
} else {
......@@ -253,6 +269,10 @@ export default {
// 滚动到顶部
scrollTop() {
window.scrollTo(0, 0);
},
formatTime(time, cFormat) {
return parseTime(time, cFormat)
}
}
};
......
......@@ -270,7 +270,7 @@ export default {
_this.token = param.userToken;
_this.setUserInfo(param);
_this.checkToken();
_this.getProjectParticularsV2();
_this.getProjectInfoById();
};
_this.getUserInfo();
// if (__isWeb && process.env.BUILD_ENV == "development") {
......@@ -279,7 +279,7 @@ export default {
// }
if (__isWeb) {
_this.getProjectParticularsV2();
_this.getProjectInfoById();
}
window.__refresh = function() {
_this.isInfresh = true;
......@@ -327,7 +327,7 @@ export default {
} else {
_this.showChangeCard = false;
Toast("激活成功,开始学习");
_this.getProjectParticularsV2();
_this.getProjectInfoById();
}
} else {
}
......@@ -341,9 +341,11 @@ export default {
let _this = this;
let clipboard = new this.clipboard(".cobyOrderSn");
clipboard.on("success", function() {
e.clearSelection();
Toast("已成功复制激活码");
});
clipboard.on("error", function() {
e.clearSelection();
Toast("复制激活码失败");
});
},
......@@ -676,7 +678,7 @@ export default {
},
// 获取项目详情
getProjectParticularsV2() {
getProjectInfoById() {
let _this = this;
let param = {
token: _this.userInfo.userToken || this.token,
......@@ -739,7 +741,7 @@ export default {
.offsetTop;
intorOffsetTop = document.getElementById("intro-content").offsetTop;
console.log(
"getProjectParticularsV2",
"getProjectInfoById",
cataOffsetTop,
intorOffsetTop
);
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册