提交 59a01c3f 编写于 作者: guangjun.yang's avatar guangjun.yang

课程分享页面

上级 5773e3f6
<template>
<section :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
<div
class="nav-part"
:style="'background:' + bgColor + ';'
......@@ -10,8 +9,6 @@
<span class="nav-back" @click="goBack">
<img v-show="isBlack" src="../../images/left-array-black.png" alt="">
<img v-show="!isBlack" src="../../images/left-array-whiter.png" alt="">
<!-- <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png"> -->
<!-- <img class="nav-back" src="../../images//grey-throw.png"/> -->
</span>
<span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
<span v-if="isShowShare" class="nav-share" @click="goShare">
......@@ -79,15 +76,13 @@ export default {
shareTitleInfo: {
type: String,
default: ""
},
shareUrl: {
type: String,
default: ""
}
},
computed: {
// bgColor2() {
// return this.bgColor
// },
// borderStyle() {
// return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
// },
navHeight() {
if (this.isFixNavbar) {
return 0;
......@@ -108,28 +103,16 @@ export default {
methods: {
//返回
goBack() {
// if (this.burialPoint == "activity") {
// this.pageBurialPoin(this.objPoint);
// }
// if (this.backMethod === "inner" || window.__isWeb) {
// this.$router.back(-1);
// } else {
// rocNative.goBack();
// }
rocNative.goBack();
},
//分享
goShare() {
let url = location.href,
_this = this;
// let url = location.href,
let _this = this;
rocNative.shareWechat({
// url: url,
// title: '_this.title',
// content: '_this.content',
// shareImageUrl: '_this.shareImageUrl'
type: 6,
shareId: 0,
shareUrl: url,
shareUrl: _this.shareUrl,
title1: _this.shareTitle,
title2: _this.shareTitleInfo,
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
......@@ -168,9 +151,6 @@ export default {
width: px2rem(55px);
padding-left: px2rem(15px);
padding-right: px2rem(15px);
// -ms-transform: translate(180deg);
// -webkit-transform: (180deg);
// transform: rotate(180deg);
}
img {
display: block;
......
......@@ -2,6 +2,7 @@ import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'index')
const merge = r => require.ensure([], () => r(require('../views/merge-detail')), 'merge')
const shareMerge = r => require.ensure([], () => r(require('../views/share-merge-detail')), 'share-merge')
const test = r => require.ensure([], () => r(require('../views/test-components')), 'test-components')
const courseDetail = r => require.ensure([], () => r(require('../views/course-detail')), 'course-detail')
......@@ -10,24 +11,28 @@ export default [{
component: App,
children: [
{
path: '',
redirect: '/index'
path: '',
redirect: '/index'
},
{
path: '/index',
component: index
path: '/index',
component: index
},
{
path: '/home',
component: index
path: '/home',
component: index
},
{
path: '/coop',
component: merge
path: '/coop',
component: merge
},
{
path: '/test',
component: test
path: '/sharecoop',
component: shareMerge
},
{
path: '/test',
component: test
},
{
path: '/course-detail',
......
......@@ -23,6 +23,7 @@ export const envConfig = {
apiUrl: 'https://uat-api.yunqueyi.com/',
webPageUrl: 'https://uat-phome.yunqueyi.com/',
hactiveUrl: 'https://uat-hactive.yunqueyi.com',
appId: 'wxf4e66242d31c81c2', // 用于微信授权登录
// baseUrl: 'https://sc.yunqueyi.com/',
// apiUrl: 'https://api.yunqueyi.com/',
......@@ -35,23 +36,27 @@ export const envConfig = {
apiUrl: 'https://dev-api.yunqueyi.com/',
webPageUrl: 'https://dev-phome.yunqueyi.com/',
hactiveUrl: 'https://dev-hactive.yunqueyi.com',
appId: 'wxf4e66242d31c81c2', // 用于微信授权登录
},
test: {
baseUrl: 'https://test1-sc.yunqueyi.com/',
apiUrl: 'https://test1-api.yunqueyi.com/',
webPageUrl: 'https://test1-phome.yunqueyi.com/',
hactiveUrl: 'https://test1-hactive.yunqueyi.com',
appId: 'wxcaad75b7fff5659c', // 用于微信授权登录
},
uat: {
baseUrl: 'https://uat-sc.yunqueyi.com/',
apiUrl: 'https://uat-api.yunqueyi.com/',
webPageUrl: 'https://uat-phome.yunqueyi.com/',
hactiveUrl: 'https://uat-hactive.yunqueyi.com',
appId: 'wx342ef0e5afee54a7', // 用于微信授权登录
},
pro: {
baseUrl: 'https://sc.yunqueyi.com/',
apiUrl: 'https://api.yunqueyi.com/',
webPageUrl: 'https://phome.yunqueyi.com/',
hactiveUrl: 'https://hactive.yunqueyi.com',
appId: 'wx2c577552a2d28550', // 用于微信授权登录
}
}
......@@ -23,6 +23,11 @@ export function getHactiveUrl(url) {
return getConfigByEnvType('hactiveUrl') + (url || '')
}
// 获取微信APPID
export function getAPPID() {
return getConfigByEnvType('appId')
}
// 根据不同环境,生成URL
function getConfigByEnvType(urlType) {
return envConfig[process.env.BUILD_ENV][urlType]
......
/* eslint-disable */
import Vue from 'vue'
import request from '@/service/api';
import wx from 'weixin-js-sdk'
import { getBaseUrl } from "@/utils/index";
/** 注入配置信息 */
export const wxConfig = (link) => {
// const params = { resetURI: true, url: encodeURIComponent(location.href) };
// 上线前是需要把域名改为线上的sc
let baseUrl = getBaseUrl();
// request({ url: `https://sc.yunqueyi.com/wechats/signs?url=${encodeURIComponent(link)}` }).then(res => {
request({ url: `${baseUrl}/wechats/signs?url=${encodeURIComponent(link)}` }).then(res => {
let configs = res.data.signMap;
wx.config({
debug: false,
appId: configs.appId,
nonceStr: configs.nonceStr,
timestamp: configs.timestamp,
signature: configs.signature,
jsApiList: [
'hideMenuItems',
'previewImage',
'checkJsApi',
'chooseWXPay',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'getLocation',
'openLocation',
'translateVoice'
]
});
});;
};
/**
* wxShare 分享
* @param option
*/
export const wxShare = (option = {}, successCB = () => {}) => {
wx.ready(() => {
// 分享给朋友
wx.onMenuShareAppMessage({
title: option.title,
desc: option.desc,
link: option.link,
imgUrl: option.imgUrl,
success: function(res) {
// 用户确认分享后执行的回调函数
successCB(res);
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title: option.friendtitle || option.title, // 标题
desc: option.desc,
link: option.link, // 链接
imgUrl: option.imgUrl, // 分享图标
success: function(res) {
successCB(res);
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
};
export const wxDisabledShare = () => {
wx.ready(() => {
wx.hideMenuItems({
menuList: [
'menuItem:share:appMessage',
'menuItem:share:timeline',
'menuItem:share:qq',
'menuItem:share:weiboApp',
'menuItem:share:QZone'
]
});
});
};
/**
*
* @param source
* @param option
*/
export const wechatShare = async (option = {}, successCB = () => {}) => {
const shareOption = {
link: location.href,
title: `云鹊医!`,
friendtitle: `讨论进行中,速来围观!`,
desc: '参与讨论,一起畅谈医学那些事!快来看看吧~',
imgUrl: 'https://file.yunqueyi.com/logo.png',
...option
};
wxConfig(shareOption.link);
wxShare(shareOption, successCB);
};
Vue.prototype.wechatShare = wechatShare
......@@ -184,7 +184,7 @@ export default {
textContent: "",
leaderText: "",
pageTitle: "",
isShowShare: false,
isShowShare: true,
tabFlag: true, // 显示目录还是简介
fixedFlag: false, // 目录和简介是否固定
project: {
......
<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 == 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
ref="tcPlayerRef"
v-if="bannerType == 2"
style="flex"
:options="videoOptions"
@sk-tip="isShowSkDialog=true"
></CommonTcPlayer>
<div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard">
<span :class="{'android': isAndroid}">继续学习</span>
</div>
<!-- 项目标题 -->
<CommonDescription
:projectName="project.projectName"
:studyNum="project.studyNum"
:subject="project.subject"
/>
<CommonAdertImg :advertInfoList="advertInfoList" position="0" />
<!-- 简介和目录 -->
<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"
:projectName="project.projectName"
/>
<LearnKnow v-if="project.mustKnow" :mustKnow="project.mustKnow"></LearnKnow>
<CommonSpliteLine></CommonSpliteLine>
<ItemIntro v-if="textContent" :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">
<span class="c-title">目录</span>
<span v-if="needShowUpdate" class="c-sub">每周更新课程</span>
</div>
<CellListDetail
:projectComponent="projectComponentDTOS"
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"
:hasBindCard="hasBindCard"
:limitTimes="limitTimes"
/>
</div>
</div>
<CommonAdertImg needPadTop :advertInfoList="advertInfoList" position="1" />
<NoMoreContent />
<div v-if="detailNum <= 9" class="no-more-bottom"></div>
</div>
<!-- <ExjumperButton
@btnClick="beforeJumpToExam"
v-if="hasBindCard"
:btnText="project.currentProgress > 1 ? '参加考试' : '学完全部课程,可参加考试'"
:type="project.currentProgress > 1 ? 'primary' : 'disabled'"
></ExjumperButton>-->
<div v-if="!hasBindCard && !isWeb" style="padding-top: 30px"></div>
<BindCardButton
v-if="!hasBindCard && !isWeb"
:cardInfo="cardInfo"
@changeClick="changeClick"
@gotoBuy="confirm"
></BindCardButton>
<!--去激活-->
<ChangeCard
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="changeCardAction"
></ChangeCard>
<Loading v-show="showLoading" />
<div>
<span
ref="copyLinkBtn"
data-clipboard-action="copy"
class="cobyOrderSn"
:data-clipboard-text="this.project.cardKey"
@click="copyLink"
></span>
</div>
<ShiKanCommonDialog
class="shikan"
needSubContent
content="试看结束"
subContent="购买后可看完整课程"
confirmBtnText="去购买"
:isShowDialog="isShowSkDialog"
@handlerAction="goBuyKc"
/>
<IOSDownloadDialog
class="shikan"
isSingle
content="请您下载新版本App"
cancleBtnText="我知道了"
:isShowDialog="isShowIOSDownloadDialog"
@handlerAction="goBack"
/>
</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 CommonTcPlayer from "@/components/common/common-tcplayer";
import Loading from "@/components/common/common-loading";
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 ExjumperButton from "@/components/cme/exjumper-button";
import NoMoreContent from "@/components/business/no-more-content";
import CommonAdertImg from "@/components/common/common-advert-img";
import ShiKanCommonDialog from "@/components/cme/common-dialog";
import IOSDownloadDialog from "@/components/cme/common-dialog";
import { getWebPageUrl, gotoPage, getAppVersion } from "@/utils/index";
import { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter";
import { Toast } from "vant";
import BindCardButton from "@/components/cme/bind-card-button";
import ChangeCard from "@/components/cme/change-card";
let cataOffsetTop = 0;
let intorOffsetTop = 0;
let titleOffsetHeight = 50;
export default {
data() {
return {
// token: "9B62E5874DA94979A54DB3E9DFC1443F",
isWeb: window.__isWeb,
isAndroid: __isAndroid,
textContent: "",
leaderText: "",
pageTitle: "",
isShowShare: true,
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",
examBtnUrl: "", // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录
cardStatus: 0,
cardKey: ""
},
hasBindCard: false, // 是否绑定过学习卡或激活过 没有绑定,则显示绑定按钮
limitTimes: 60,
projectLeader: {},
doctorList: [],
from: "inner",
isBlack: false,
showLoading: false,
projectId: "1",
contentList: [],
//moduleName: "",
bannerType: 1, // 1 图片 2视频
videoOptions: {
mp4: "",
autoplay: true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
coverpic: require("../images/video-cover.png"),
width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度
height: "210", //视频的显示高度,请尽量使用视频分辨率高度
trySeeTime: "",
x5_fullscreen: false
},
//projectStatus: 1, //1没有获得证书 2是获得全部证书
// attachmentUrl: require("../images/banner-default.png"),
attachmentUrl: require("../images/video-cover.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: "",
cardInfo: {
id: 0
},
advertInfoList: [],
showChangeCard: false, //是否展示激活弹框,
changeCardErrorMsg: "",
isInfresh: false,
needShowUpdate: false,
skCourseId: 0,
isShowSkDialog: false,
isShowIOSDownloadDialog: false
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CellListDetail,
Loading,
CommonTcPlayer,
BasicInfo,
LearnKnow,
ItemIntro,
ItemLeader,
TeacterIntro,
CommonDialog,
ExjumperButton,
CommonAdertImg,
NoMoreContent,
BindCardButton,
ChangeCard,
ShiKanCommonDialog,
IOSDownloadDialog
},
computed: {
...mapGetters(["userInfo"])
},
created() {
let _this = this;
this.from = this.$route.query.from || this.from || "native";
this.projectId = this.$route.query.id || 1;
console.log("#######location", location);
window.__getUserInfo64Comp = function(param) {
// appVersion 安卓 3.2.2 iOS
console.log("__getUserInfo64Comp", param);
_this.token = param.userToken;
let appVersion = param.appVersion || "300";
let appVersionNum = appVersion.split(".").join("");
// 如果是iOS系统并且版本小于344,则提示升级
if (__isIOS && appVersionNum < 344) {
_this.isShowIOSDownloadDialog = true;
}
_this.setUserInfo(param);
_this.checkToken();
_this.getProjectInfoById();
};
_this.getUserInfo();
// if (__isWeb && process.env.BUILD_ENV == "development") {
// let param = {};
// __getUserInfo64Comp(param);
// }
if (__isWeb) {
_this.getProjectInfoById();
}
window.__refresh = function() {
_this.isInfresh = true;
_this.getUserInfo();
};
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"]),
cancleChangeCard() {
this.showChangeCard = false;
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey) {
let _this = this;
let param = {
cardKey: cardKey,
cardType: 3,
portalProjectId: this.projectId,
setEntry: true
};
_this.changeCardErrorMsg = "";
this.POST("cme/projectCard/bind", param)
.then(res => {
if (res.code == "000000") {
if (res.data == 0) {
_this.changeCardErrorMsg = "请输入正确的激活码";
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
_this.showChangeCard = false;
Toast("激活成功,开始学习");
_this.getProjectInfoById();
}
} else {
}
})
.catch(e => {
_this.changeCardErrorMsg = "请输入正确的激活码";
});
},
// 复制卡密
copyLink() {
let _this = this;
let clipboard = new this.clipboard(".cobyOrderSn");
clipboard.on("success", function() {
e.clearSelection();
Toast("已成功复制激活码");
});
clipboard.on("error", function() {
e.clearSelection();
Toast("复制激活码失败");
});
},
// 查询教培项目广告位配置信息
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);
}
});
},
// 点击“参与考试”
beforeJumpToExam() {
// this.$sendBuriedData({
// component_tag: `882#8824`
// });
// 如果是首次,则弹出弹框
this.jumpToCardList();
},
// 跳转II类学习详情页面(跳转的页面由后面配置)
jumpToCardList() {
// this.$sendBuriedData({
// component_tag: `885#8851`
// });
this.showLoading = false;
// 判断版本号,如果小于3.4.0,则只做提示
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split(".").join("");
if (appVersionNum < 341) {
Toast("请您下载新版本App");
return;
}
// 复制卡密
this.$refs.copyLinkBtn.click();
setTimeout(() => {
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
});
}
}, 1000);
},
// 跳转前判断是否有机构,否则使用定位信息
preJumper() {
// TODO 测试代码
if (window.__isWeb) {
this.getCardInfoByProvinceId(310);
} else {
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: 3,
pageNum: 1,
pageSize: 1
};
param.setEntry = true;
this.POST("trade/goods/cardList", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
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: `882#88203`
});
let appVersion = this.userInfo.appVersion || "";
let appVersionNum = appVersion.split(".").join("");
if (appVersionNum < 344) {
Toast("请您下载新版本App");
return;
}
// let pageUrl = this.project.examBtnUrl;
// 直接传入项目ID(projectId)
let projectId = this.project.projectId;
let pageUrl = getWebPageUrl(
`/profexam/#/index?id=${projectId}&projectName=${this.project.projectName}&profexamProjectId=${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
}
];
this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 跳转到原生的购买页面
confirmOld() {
// this.$sendBuriedData({
// component_tag: `885#8852`
// });
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
});
},
// 首次进入考试时记录(点击‘我知道了’时调用)
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("跳登录", _this.isInfresh);
if (_this.isInfresh) {
rocNative.goBack();
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
rocNative.gotoLogin();
}
_this.isInfresh = false;
}
});
},
//去激活
changeClick(msg) {
console.log("in changeClick");
this.showChangeCard = true;
this.$sendBuriedData({
component_tag: `882#88202`
});
},
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}`
// });
},
// 获取项目详情
getProjectInfoById() {
let _this = this;
let param = {
token:
_this.userInfo.userToken ||
this.token ||
"47993ED00ECB46CE8D31ECF3AE34B4AA",
setEntry: true
};
let videoUrl = this.$route.query.videoUrl || "";
if (videoUrl) {
param.trySeeFlag = 0;
} else {
param.trySeeFlag = 1;
}
console.log("getProjectInfoById", param);
_this.showLoading = true;
this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
if (res.code == "000000") {
if (videoUrl) {
_this.limitTimes = this.$route.query.trySeeTime || 300000;
_this.videoOptions.mp4 = videoUrl;
_this.videoOptions.trySeeTime =
this.$route.query.trySeeTime || 300000;
} else {
_this.limitTimes = res.data.trySeeTime;
_this.videoOptions.mp4 = res.data.attachmentUrl;
_this.videoOptions.trySeeTime = res.data.trySeeTime || 300000;
}
_this.hasBindCard = res.data.cardStatus == 0 ? false : true;
if (_this.hasBindCard) {
_this.videoOptions.trySeeTime = 300000;
_this.videoOptions.autoplay = false;
}
let mp4Url = _this.videoOptions.mp4;
// 判断是否是mp4
if (mp4Url.lastIndexOf(".mp4") > 0) {
_this.bannerType = 2;
// // TODO test
// _this.videoOptions.mp4 += 2;
} else {
if (res.data.attachmentType == 2) {
_this.videoOptions.mp4 = res.data.attachmentUrl;
} else {
_this.attachmentUrl = res.data.attachmentUrl;
}
_this.bannerType = res.data.attachmentType;
}
console.log("location", location);
console.log(
"_this.videoOptions.mp4, trySeeTime, autoplay",
_this.videoOptions.mp4,
_this.videoOptions.trySeeTime,
_this.videoOptions.autoplay
);
_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
);
// 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("getProjectInfoById", cataOffsetTop, intorOffsetTop);
// 直接跳转
// if (_this.project.jumpToContents) {
if (_this.hasBindCard) {
setTimeout(() => {
this.jumpCatalogue();
}, 200);
}
// _this.copyLink();
}, 200);
setTimeout(() => {
_this.showLoading = false;
}, 800);
// 如果 hasBindCard 为false,则获取卡信息 0:未绑卡 1:已绑卡
if (!_this.hasBindCard) {
_this.preJumper();
}
// 请求成功后统计,获取项目名
this.$sendBuriedData({
component_tag: `882#88201#${_this.projectId}#${_this.project.projectName}`
});
// 二次分享
let shareUrl = location.href;
this.wechatShare(
{
link: shareUrl,
title: this.shareTitle1,
friendtitle: this.shareTitle1,
desc: this.shareTitle2,
imgUrl: this.shareIconUrl || "https://file.yunqueyi.com/logo.png"
},
() => {
console.log("share success...");
}
);
}
});
},
// 项目负责人--详情(收起)
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;
let needShowUpdate = false;
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].portalModuleDTOS.length; j++) {
detailNum++;
list[i].portalModuleDTOS[j].value =
"共" + list[i].portalModuleDTOS[j].nodeCount + "节";
//展开项记录
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++
) {
if (!needShowUpdate) {
if (!list[i].portalModuleDTOS[j].contentList[z].id) {
this.needShowUpdate = true;
}
}
list[i].portalModuleDTOS[j].contentList[z].height = _this.getHight(
list[i].portalModuleDTOS[j].contentList[z]
);
}
}
}
_this.needShowUpdate = needShowUpdate;
_this.actionList = actionList;
_this.detailNum = detailNum;
// console.log("list转为:", list, actionList, detailNum);
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;
}
},
// 查找没有学习完成的课程或考试
continueStudy() {
let courseIdOrExamId = "";
let portalModuleDTOS = [];
let contentList = [];
let item = {};
let firstItem = null;
outloop: for (let i = 0; i < this.projectComponentDTOS.length; i++) {
portalModuleDTOS = this.projectComponentDTOS[i].portalModuleDTOS;
for (let j = 0; j < portalModuleDTOS.length; j++) {
contentList = portalModuleDTOS[j].contentList;
for (let k = 0; k < contentList.length; k++) {
item = contentList[k];
if (!firstItem && item.id) {
firstItem = item;
}
if (
(item.type == 1 &&
item.id &&
item.useFlag != 2 &&
(item.status == 11 || item.status == 12)) ||
(item.type == 2 &&
item.id &&
item.useFlag != 2 &&
(item.status == 21 || item.status == 22))
) {
this.continueStudyType = item.type;
this.skCourseId = item.id;
break outloop;
}
}
}
}
if (!this.skCourseId) {
this.continueStudyType = firstItem.type;
this.skCourseId = firstItem.id;
}
console.log(
"continueStudyType",
this.continueStudyType,
"skCourseId",
this.skCourseId
);
if (this.continueStudyType == 1) {
this.gotoExamNew();
} else {
this.gotoCourseNew();
}
},
// 跳转到考试
gotoExamNew: function(examId) {
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.exammodule.ExamPreActivity###PicaDo.ExamModuleManager",
type: 4,
seqNo: 1
},
{
key: "examId",
value: this.skCourseId,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 跳转到课程
gotoCourseNew: function() {
// if(this.hasBindCard || this.project.cmeType != 2) return;
// let courseId = '';
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: this.skCourseId,
type: 4,
seqNo: 1
},
{
key: "courseRequire",
value: this.courseRequire - 0,
type: 4,
seqNo: 1
}
// {
// key: "limitTimes",
// value: limitTimes,
// type: 4,
// seqNo: 1
// },
];
console.log("gotoCourse", paramList);
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
goBuyKc(type) {
this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
this.isShowSkDialog = false;
type == 2 && this.confirm();
},
// 直接返回到上层
goBack() {
this.isShowIOSDownloadDialog = false;
rocNative.goBack();
}
}
};
</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);
.sk-btn-cover-new {
position: absolute;
top: 0;
left: 0;
right: 0;
height: px2rem(210px);
z-index: 100;
text-align: center;
// background: #fff;
font-size: px2rem(13px);
// border-radius: 50%;
background: rgba(51, 51, 51, 0.8);
span {
display: inline-block;
margin-top: px2rem(82px);
width: px2rem(100px);
height: px2rem(36px);
line-height: px2rem(36px);
font-size: px2rem(15px);
font-weight: 700;
border-radius: px2rem(20px);
color: #fff;
background: #449284;
&.android {
padding-top: px2rem(2px);
}
}
}
}
.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: 0 px2rem(15px);
.catalogue-title {
// display: flex;
// flex-direction: row;
// align-items: center;
// align-content: center;
margin-top: px2rem(5px);
// margin-bottom: px2rem(16px);
.c-title {
font-size: px2rem(18px);
color: #373839;
font-weight: 700;
}
.c-sub {
margin-left: px2rem(-6px);
font-size: px2rem(12px);
color: #979899;
}
}
}
.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 == 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
ref="tcPlayerRef"
v-if="bannerType == 2"
style="flex"
:options="videoOptions"
@sk-tip="isShowSkDialog=true"
></CommonTcPlayer>
<div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard">
<span :class="{'android': isAndroid}">继续学习</span>
</div>
<!-- 项目标题 -->
<CommonDescription
:projectName="project.projectName"
:studyNum="project.studyNum"
:subject="project.subject"
/>
<CommonAdertImg :advertInfoList="advertInfoList" position="0" />
<!-- 简介和目录 -->
<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"
:projectName="project.projectName"
/>
<LearnKnow v-if="project.mustKnow" :mustKnow="project.mustKnow"></LearnKnow>
<CommonSpliteLine></CommonSpliteLine>
<ItemIntro v-if="textContent" :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">
<span class="c-title">目录</span>
<span v-if="needShowUpdate" class="c-sub">每周更新课程</span>
</div>
<CellListDetail
:projectComponent="projectComponentDTOS"
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"
:hasBindCard="hasBindCard"
:limitTimes="limitTimes"
/>
</div>
</div>
<CommonAdertImg needPadTop :advertInfoList="advertInfoList" position="1" />
<NoMoreContent />
<div v-if="detailNum <= 9" class="no-more-bottom"></div>
</div>
<div v-if="!hasBindCard && !isWeb" style="padding-top: 30px"></div>
<BindCardButton
v-if="!hasBindCard && !isWeb"
:cardInfo="cardInfo"
@changeClick="changeClick"
@gotoBuy="confirm"
></BindCardButton>
<!--去激活-->
<ChangeCard
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="changeCardAction"
></ChangeCard>
<Loading v-show="showLoading" />
<div>
<span
ref="copyLinkBtn"
data-clipboard-action="copy"
class="cobyOrderSn"
:data-clipboard-text="this.project.cardKey"
@click="copyLink"
></span>
</div>
<ShiKanCommonDialog
class="shikan"
needSubContent
content="试看结束"
subContent="购买后可看完整课程"
confirmBtnText="去购买"
:isShowDialog="isShowSkDialog"
@handlerAction="goBuyKc"
/>
<IOSDownloadDialog
class="shikan"
isSingle
content="请您下载新版本App"
cancleBtnText="我知道了"
:isShowDialog="isShowIOSDownloadDialog"
@handlerAction="goBack"
/>
</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 CommonTcPlayer from "@/components/common/common-tcplayer";
import Loading from "@/components/common/common-loading";
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 ExjumperButton from "@/components/cme/exjumper-button";
import NoMoreContent from "@/components/business/no-more-content";
import CommonAdertImg from "@/components/common/common-advert-img";
import ShiKanCommonDialog from "@/components/cme/common-dialog";
import IOSDownloadDialog from "@/components/cme/common-dialog";
import { getWebPageUrl, gotoPage, getAppVersion } from "@/utils/index";
import { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter";
import { Toast } from "vant";
import BindCardButton from "@/components/cme/bind-card-button";
import ChangeCard from "@/components/cme/change-card";
let cataOffsetTop = 0;
let intorOffsetTop = 0;
let titleOffsetHeight = 50;
export default {
data() {
return {
// token: "9B62E5874DA94979A54DB3E9DFC1443F",
isWeb: window.__isWeb,
isAndroid: __isAndroid,
textContent: "",
leaderText: "",
pageTitle: "",
isShowShare: true,
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",
examBtnUrl: "", // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录
cardStatus: 0,
cardKey: ""
},
hasBindCard: false, // 是否绑定过学习卡或激活过 没有绑定,则显示绑定按钮
limitTimes: 60,
projectLeader: {},
doctorList: [],
from: "inner",
isBlack: false,
showLoading: false,
projectId: "1",
contentList: [],
//moduleName: "",
bannerType: 1, // 1 图片 2视频
videoOptions: {
mp4: "",
autoplay: true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
coverpic: require("../images/video-cover.png"),
width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度
height: "210", //视频的显示高度,请尽量使用视频分辨率高度
trySeeTime: "",
x5_fullscreen: false
},
//projectStatus: 1, //1没有获得证书 2是获得全部证书
// attachmentUrl: require("../images/banner-default.png"),
attachmentUrl: require("../images/video-cover.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: "",
cardInfo: {
id: 0
},
advertInfoList: [],
showChangeCard: false, //是否展示激活弹框,
changeCardErrorMsg: "",
isInfresh: false,
needShowUpdate: false,
skCourseId: 0,
isShowSkDialog: false,
isShowIOSDownloadDialog: false
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CellListDetail,
Loading,
CommonTcPlayer,
BasicInfo,
LearnKnow,
ItemIntro,
ItemLeader,
TeacterIntro,
CommonDialog,
ExjumperButton,
CommonAdertImg,
NoMoreContent,
BindCardButton,
ChangeCard,
ShiKanCommonDialog,
IOSDownloadDialog
},
computed: {
...mapGetters(["userInfo"])
},
created() {
let _this = this;
this.from = this.$route.query.from || this.from || "native";
this.projectId = this.$route.query.id || 1;
console.log("#######location", location);
// TODO TOKEN问题,登陆问题
// TODO 要先解码URL
// _this.checkToken();
// _this.setUserInfo(param);
_this.getProjectInfoById();
// 调用广告位接口
this.getAdvertInfoList();
},
mounted() {
window.addEventListener("scroll", this.scrollFun);
const _this = this;
},
beforeDestroyed() {
this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
window.removeEventListener("scroll", this.scrollFun);
},
methods: {
...mapActions(["setUserInfo"]),
// 关闭激活弹框
cancleChangeCard() {
this.showChangeCard = false;
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey) {
let _this = this;
let param = {
cardKey: cardKey,
cardType: 3,
portalProjectId: this.projectId,
setEntry: true
};
_this.changeCardErrorMsg = "";
this.POST("cme/projectCard/bind", param)
.then(res => {
if (res.code == "000000") {
if (res.data == 0) {
_this.changeCardErrorMsg = "请输入正确的激活码";
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
_this.showChangeCard = false;
Toast("激活成功,开始学习");
_this.getProjectInfoById();
}
} else {
}
})
.catch(e => {
_this.changeCardErrorMsg = "请输入正确的激活码";
});
},
// 复制卡密
copyLink() {
let _this = this;
let clipboard = new this.clipboard(".cobyOrderSn");
clipboard.on("success", function() {
e.clearSelection();
Toast("已成功复制激活码");
});
clipboard.on("error", function() {
e.clearSelection();
Toast("复制激活码失败");
});
},
// 查询教培项目广告位配置信息
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);
}
});
},
// 跳转前判断是否有机构,否则使用定位信息
preJumper() {
this.getCardInfoByProvinceId(this.provinceId || "");
},
// 根据省ID,获取学习卡信息
getCardInfoByProvinceId(provinceId) {
let param = {
area: provinceId + "",
cardType: 3,
pageNum: 1,
pageSize: 1
};
param.setEntry = true;
this.POST("trade/goods/cardList", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.cardInfo = (res.data && res.data[0]) || { id: 0 };
}
});
},
// 跳转到原生的购买页面
// TODO 没有购买逻辑了
confirm() {
this.$sendBuriedData({
component_tag: `882#88203`
});
this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
},
// 首次进入考试时记录(点击‘我知道了’时调用)
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;
}
}
);
},
// 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("跳登录", _this.isInfresh);
if (_this.isInfresh) {
rocNative.goBack();
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
rocNative.gotoLogin();
}
_this.isInfresh = false;
}
});
},
//去激活
changeClick(msg) {
console.log("in changeClick");
this.showChangeCard = true;
this.$sendBuriedData({
component_tag: `882#88202`
});
},
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}`
// });
},
// 获取项目详情
getProjectInfoById() {
let _this = this;
let param = {
token:
_this.userInfo.userToken ||
this.token ||
"47993ED00ECB46CE8D31ECF3AE34B4AA",
setEntry: true
};
let videoUrl = this.$route.query.videoUrl || "";
if (videoUrl) {
param.trySeeFlag = 0;
} else {
param.trySeeFlag = 1;
}
console.log("getProjectInfoById", param);
_this.showLoading = true;
this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
if (res.code == "000000") {
if (videoUrl) {
_this.limitTimes = this.$route.query.trySeeTime || 300000;
_this.videoOptions.mp4 = videoUrl;
_this.videoOptions.trySeeTime =
this.$route.query.trySeeTime || 300000;
} else {
_this.limitTimes = res.data.trySeeTime;
_this.videoOptions.mp4 = res.data.attachmentUrl;
_this.videoOptions.trySeeTime = res.data.trySeeTime || 300000;
}
_this.hasBindCard = res.data.cardStatus == 0 ? false : true;
if (_this.hasBindCard) {
_this.videoOptions.trySeeTime = 300000;
_this.videoOptions.autoplay = false;
}
let mp4Url = _this.videoOptions.mp4;
// 判断是否是mp4
if (mp4Url.lastIndexOf(".mp4") > 0) {
_this.bannerType = 2;
// // TODO test
// _this.videoOptions.mp4 += 2;
} else {
if (res.data.attachmentType == 2) {
_this.videoOptions.mp4 = res.data.attachmentUrl;
} else {
_this.attachmentUrl = res.data.attachmentUrl;
}
_this.bannerType = res.data.attachmentType;
}
console.log("location", location);
console.log(
"_this.videoOptions.mp4, trySeeTime, autoplay",
_this.videoOptions.mp4,
_this.videoOptions.trySeeTime,
_this.videoOptions.autoplay
);
_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
);
// 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("getProjectInfoById", cataOffsetTop, intorOffsetTop);
// 直接跳转
// if (_this.hasBindCard) {
// setTimeout(() => {
// this.jumpCatalogue();
// }, 200);
// }
}, 200);
setTimeout(() => {
_this.showLoading = false;
}, 800);
// 如果 hasBindCard 为false,则获取卡信息 0:未绑卡 1:已绑卡
if (!_this.hasBindCard) {
_this.preJumper();
}
// 请求成功后统计,获取项目名
this.$sendBuriedData({
component_tag: `882#88201#${_this.projectId}#${_this.project.projectName}`
});
// 二次分享
let shareUrl = location.href;
this.wechatShare(
{
link: shareUrl,
title: this.project.projectName,
friendtitle: this.project.projectName,
desc: this.project.projectName,
imgUrl: "https://file.yunqueyi.com/logo.png"
},
() => {
console.log("share success...");
}
);
}
});
},
// 项目负责人--详情(收起)
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;
let needShowUpdate = false;
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].portalModuleDTOS.length; j++) {
detailNum++;
list[i].portalModuleDTOS[j].value =
"共" + list[i].portalModuleDTOS[j].nodeCount + "节";
//展开项记录
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++
) {
if (!needShowUpdate) {
if (!list[i].portalModuleDTOS[j].contentList[z].id) {
this.needShowUpdate = true;
}
}
list[i].portalModuleDTOS[j].contentList[z].height = _this.getHight(
list[i].portalModuleDTOS[j].contentList[z]
);
}
}
}
_this.needShowUpdate = needShowUpdate;
_this.actionList = actionList;
_this.detailNum = detailNum;
// console.log("list转为:", list, actionList, detailNum);
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;
}
},
// 查找没有学习完成的课程或考试
continueStudy() {
let courseIdOrExamId = "";
let portalModuleDTOS = [];
let contentList = [];
let item = {};
let firstItem = null;
outloop: for (let i = 0; i < this.projectComponentDTOS.length; i++) {
portalModuleDTOS = this.projectComponentDTOS[i].portalModuleDTOS;
for (let j = 0; j < portalModuleDTOS.length; j++) {
contentList = portalModuleDTOS[j].contentList;
for (let k = 0; k < contentList.length; k++) {
item = contentList[k];
if (!firstItem && item.id) {
firstItem = item;
}
if (
(item.type == 1 &&
item.id &&
item.useFlag != 2 &&
(item.status == 11 || item.status == 12)) ||
(item.type == 2 &&
item.id &&
item.useFlag != 2 &&
(item.status == 21 || item.status == 22))
) {
this.continueStudyType = item.type;
this.skCourseId = item.id;
break outloop;
}
}
}
}
if (!this.skCourseId) {
this.continueStudyType = firstItem.type;
this.skCourseId = firstItem.id;
}
console.log(
"continueStudyType",
this.continueStudyType,
"skCourseId",
this.skCourseId
);
if (this.continueStudyType == 1) {
this.gotoExamNew();
} else {
this.gotoCourseNew();
}
},
// 跳转到考试
gotoExamNew: function(examId) {
Toast("请前往APP进行考试");
},
// 跳转到课程(H5)
gotoCourseNew: function() {
this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
window.location.href = ""
},
goBuyKc(type) {
this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
this.isShowSkDialog = false;
type == 2 && this.confirm();
},
// 直接返回到上层
goBack() {
this.isShowIOSDownloadDialog = false;
rocNative.goBack();
}
}
};
</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);
.sk-btn-cover-new {
position: absolute;
top: 0;
left: 0;
right: 0;
height: px2rem(210px);
z-index: 100;
text-align: center;
// background: #fff;
font-size: px2rem(13px);
// border-radius: 50%;
background: rgba(51, 51, 51, 0.8);
span {
display: inline-block;
margin-top: px2rem(82px);
width: px2rem(100px);
height: px2rem(36px);
line-height: px2rem(36px);
font-size: px2rem(15px);
font-weight: 700;
border-radius: px2rem(20px);
color: #fff;
background: #449284;
&.android {
padding-top: px2rem(2px);
}
}
}
}
.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: 0 px2rem(15px);
.catalogue-title {
// display: flex;
// flex-direction: row;
// align-items: center;
// align-content: center;
margin-top: px2rem(5px);
// margin-bottom: px2rem(16px);
.c-title {
font-size: px2rem(18px);
color: #373839;
font-weight: 700;
}
.c-sub {
margin-left: px2rem(-6px);
font-size: px2rem(12px);
color: #979899;
}
}
}
.fixed-flag-height {
height: px2rem(50px);
}
}
}
.no-more-bottom {
position: relative;
width: 100%;
height: px2rem(40px);
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册