提交 8993fb62 编写于 作者: guofeng.chen's avatar guofeng.chen

Merge branch 'dev-purchase-0901' of...

Merge branch 'dev-purchase-0901' of http://192.168.110.53/com.pica.cloud.education.frontend/pica-professional-exam into dev-purchase-0901
<template>
<div class="common-dialog-wrraper" v-if="isShowDialog">
<div class="dialog-mask"></div>
<div class="dialog-container">
<div class="dialog-content">{{content}}</div>
<div v-show="needSubContent" class="dialog-sub-content" v-html="subContent"></div>
<div class="dialog-footer v-hairline-top">
<span :class="{'single-btn': isSingle}" @click="handlerAction(1)">{{cancleBtnText}}</span>
<span v-show="!isSingle" class="confirm-btn v-hairline-left" @click="handlerAction(2)">{{confirmBtnText}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "common-dialog",
data() {
return {
};
},
props: {
content: {
type: String,
default: ''
},
needSubContent: {
type: Boolean,
default: false
},
subContent: {
type: String,
default: ''
},
cancleBtnText: {
type: String,
default: '取消'
},
confirmBtnText: {
type: String,
default: '确定'
},
isShowDialog: {
type: Boolean,
default: false
},
isSingle: {
type: Boolean,
default: false
},
},
methods: {
handlerAction(type) {
this.$emit("handlerAction", type);
}
}
};
</script>
<style lang="less" scoped>
.common-dialog-wrraper {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 2019;
.dialog-mask {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2020;
}
.dialog-container {
z-index: 2021;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
width: 300px;
font-size: 18px;
-webkit-transition: 0.3s;
transition: 0.3s;
border-radius: 4px;
background-color: #fff;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
.dialog-content {
// margin: 30px 22px;
margin: 30px;
text-align: center;
font-size: 18px;
font-weight: 400;
color: #373839;
}
.dialog-sub-content {
margin: 5px 30px 20px;
// margin: -16px 22px 30px;
text-align: left;
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #676869;
}
.dialog-footer {
height: 50px;
display: flex;
align-items: center;
&.v-hairline-top::after {
border-top-width: 1px;
}
span {
display: inline-block;
// width: 50%;
flex: 1;
height: 50px;
line-height: 50px;
font-size: 17px;
text-align: center;
color: #979899;
&.v-hairline-left::after {
border-left-width: 1px;
}
&.confirm-btn {
color: #449284;
}
&.single-btn {
color: #449284;
}
}
}
}
[class*="v-hairline"] {
position: relative;
&::after {
content: " ";
position: absolute;
pointer-events: none;
box-sizing: border-box;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border: 0 solid #f0f1f2;
}
}
&.shikan {
.dialog-sub-content {
text-align: center;
font-size: 16px;
}
}
}
</style>
......@@ -145,6 +145,14 @@
:isShowDialog="isShowIOSDownloadDialog"
@handlerAction="goBack"
/>
<CourseDialog
:subContent="subContent"
confirmBtnText="激活并去学习"
needSubContent
:isShowDialog="showBindCardTips"
@handlerAction="handlerAction"
></CourseDialog>
</div>
</template>
<script>
......@@ -162,6 +170,7 @@ 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 CourseDialog from "@/components/course/course-dialog";
import ExjumperButton from "@/components/cme/exjumper-button";
import NoMoreContent from "@/components/business/no-more-content";
import CommonAdertImg from "@/components/common/common-advert-img";
......@@ -269,6 +278,14 @@ export default {
isShowSkDialog: false,
isShowIOSDownloadDialog: false,
shareUrl: location.href,
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 3,
orderId: 0
},
subContent: ``,
};
},
components: {
......@@ -284,6 +301,7 @@ export default {
ItemLeader,
TeacterIntro,
CommonDialog,
CourseDialog,
ExjumperButton,
CommonAdertImg,
NoMoreContent,
......@@ -355,8 +373,31 @@ export default {
this.showChangeCard = false;
},
// 处理提示信息框
handlerAction(type) {
if(type == 1) {
this.showBindCardTips = false;
} else {
this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
}
},
// 查询是否买过类似的卡,但还没有绑定
hasNoUsedCard() {
let param = {
setEntry: true
};
this.GET(`cme/projectCard/queryNoUsedCard/3`, param).then(({ data }) => {
this.hasNoUsedCard = data.hasNoUsedCard;
if (data.hasNoUsedCard == 1) {
this.cmeCardModels = data.cmeCardModels[0] || {};
this.showBindCardTips = true;
}
});
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey) {
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
cardKey: cardKey,
......@@ -366,9 +407,14 @@ export default {
};
_this.changeCardErrorMsg = "";
this.POST("cme/projectCard/bind", param).then(res => {
isInTips && (_this.showBindCardTips = false);
if (res.code == "000000") {
if(res.data == 0) {
_this.changeCardErrorMsg = "请输入正确的激活码";
if(isInTips) {
Toast(res.message);
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
_this.showChangeCard = false;
......@@ -376,9 +422,16 @@ export default {
_this.getProjectInfoById();
}
} else {
Toast(res.message);
}
}).catch( e => {
_this.changeCardErrorMsg = "请输入正确的激活码";
console.log('in catch', isInTips);
if(isInTips) {
Toast("无效的激活码");
_this.showBindCardTips = false;
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
});
},
......@@ -501,7 +554,8 @@ export default {
this.POST("trade/goods/cardList", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.cardInfo = (res.data && res.data[0]) || { id: 0 };
this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
this.subContent = `您已购买“${this.cardInfo.name}”,是否用此卡绑定并激活当前课程。学习卡激活码一旦使用,不可更改不可退回`
}
});
},
......@@ -760,6 +814,9 @@ export default {
if(_this.hasBindCard) {
_this.videoOptions.trySeeTime = 300000;
_this.videoOptions.autoplay = false;
// 如果没有绑定卡,则查询是否有未绑定的卡
} else {
_this.hasNoUsedCard();
}
let mp4Url = _this.videoOptions.mp4;
// 判断是否是mp4
......
<template>
<!-- 组件详情页面:模块列表及其下面的元件列表 -->
<div class="page-container-merge" >
<div class="page-container-merge">
<!-- <CommonNavbar
id="header"
:bgColor="bgColor"
......@@ -14,7 +14,7 @@
:burialPoint="pointStyle"
borderStyle="0px solid #fff"
:backMethod="from"
></CommonNavbar> -->
></CommonNavbar>-->
<div class="page-content list-container">
<!-- banner图片 -->
<div v-if="bannerType == 1" class="page-content-img-container">
......@@ -24,25 +24,46 @@
</div>
<!-- banner视频 -->
<div class="video-box" v-if="bannerType == 2">
<pica-video ref="picaVideo" :coverType="coverType" :download="download" @onVideoEnd="onVideoEnd" @onReplay="onReplay">
<pica-video
ref="picaVideo"
:coverType="coverType"
:download="download"
@onVideoEnd="onVideoEnd"
@onReplay="onReplay"
>
<!-- 试看结束 -->
<div class="cover" v-if="logged && coverType === 1">
<course-covers coverTips="试看结束<br />请来云鹊医App学习完整课程" :isSingle="true" rightBtnText="立即购买" @btnClick="btnClick1" />
<course-covers
coverTips="试看结束<br />请来云鹊医App学习完整课程"
:isSingle="true"
rightBtnText="立即购买"
@btnClick="btnClick1"
/>
</div>
<!-- 播放结束,下载App -->
<div class="cover" v-if="logged && coverType === 2">
<course-covers coverTips="播放结束<br />更多其他课程,请前往鹊医App学习" :isSingle="true" rightBtnText="去云鹊医App" @btnClick="btnClick2" />
<course-covers
coverTips="播放结束<br />更多其他课程,请前往鹊医App学习"
:isSingle="true"
rightBtnText="去云鹊医App"
@btnClick="btnClick2"
/>
</div>
<!-- 未登录 -->
<div class="cover" v-if="!logged">
<course-covers coverTips="登录后马上学习课程" :isSingle="true" rightBtnText="去登录" @btnClick="beforeGoLogin" />
<course-covers
coverTips="登录后马上学习课程"
:isSingle="true"
rightBtnText="去登录"
@btnClick="beforeGoLogin"
/>
</div>
</pica-video>
</div>
<!-- <div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard">
<span :class="{'android': isAndroid}">继续学习</span>
</div> -->
</div>-->
<!-- 项目标题 -->
<CommonDescription
:projectName="project.projectName"
......@@ -125,7 +146,7 @@
:cardInfo="cardInfo"
@changeClick="changeClick"
@gotoBuy="confirm"
></BindCardButtonShare> -->
></BindCardButtonShare>-->
<!--去激活-->
<ChangeCard
......@@ -135,51 +156,14 @@
@confirm="beforeChangeCardAction"
></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>
<!-- 未登录提示 -->
<div class="course-tips" v-if="!logged">
<CourseCovers isSingle coverTips="登录后马上学习课程" rightBtnText="去登录" @btnClick="btnClick"></CourseCovers>
</div>
<!-- 试看结束 -->
<!-- <div class="course-tips" v-if="isShowSkDialog">
<CourseCovers
isSingle
coverTips="试看结束<br>学习完整版课程,请来云鹊医App购买"
rightBtnText="APP购买更优惠"
@btnClick="download(1)"
></CourseCovers>
</div> -->
<!-- 播放结束 -->
<!-- <div class="course-tips" v-if="isShowEndDialog">
<CourseCovers
isSingle
coverTips="播放结束<br>更多其他课程,请前往云鹊医APP学习"
rightBtnText="APP购买更优惠"
@btnClick="download(1)"
></CourseCovers>
</div> -->
<!-- 本课程为付费课程 -->
<!-- <div class="course-tips" v-if="isShowFFDialog">
<CourseCovers
isSingle
coverTips="本课程为付费课程<br>学习完整版课程,请来云鹊医App购买"
rightBtnText="APP购买更优惠"
@btnClick="download(1)"
></CourseCovers>
</div> -->
<CourseDialog
:subContent="subContent"
confirmBtnText="激活并去学习"
needSubContent
:isShowDialog="showBindCardTips"
@handlerAction="handlerAction"
></CourseDialog>
</div>
</template>
<script>
......@@ -195,12 +179,17 @@ 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 CourseDialog from "@/components/course/course-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, getAppVersion, getCookie } from "@/utils/index";
import {
getWebPageUrl,
gotoPage,
getAppVersion,
getCookie
} from "@/utils/index";
import { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter";
import { Toast } from "vant";
......@@ -209,7 +198,7 @@ import BindCardButton from "@/components/cme/bind-card-button";
import ChangeCard from "@/components/cme/change-card";
import CourseCovers from "@/components/course/course-covers";
import DownloadButton from "@/components/course/download-button";
import PicaVideo from '@/components/course/pica-video';
import PicaVideo from "@/components/course/pica-video";
let cataOffsetTop = 0;
let intorOffsetTop = 0;
......@@ -304,14 +293,19 @@ export default {
isInfresh: false,
needShowUpdate: false,
skCourseId: 0,
isShowSkDialog: false,
isShowEndDialog: false,
isShowFFDialog: false,
needShort: false,
showDownloadButton: false,
uuid: '',
token: '',
shareUrl: '',
uuid: "",
token: "",
shareUrl: "",
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 3,
orderId: 0
},
subContent: ``,
};
},
components: {
......@@ -325,7 +319,7 @@ export default {
ItemIntro,
ItemLeader,
TeacterIntro,
CommonDialog,
CourseDialog,
ExjumperButton,
// CommonAdertImg,
NoMoreContent,
......@@ -345,29 +339,29 @@ export default {
let _this = this;
this.from = this.$route.query.from || this.from || "native";
let href = location.href;
let uuidIndex = href.indexOf('uuid') || 0;
if(uuidIndex > 0) {
let uuidIndex = href.indexOf("uuid") || 0;
if (uuidIndex > 0) {
this.uuid = href.substr(uuidIndex + 5, 32);
} else {
this.uuid = '07F9625472D6444EBAE4BF7D2EF83BC4'
this.uuid = "07F9625472D6444EBAE4BF7D2EF83BC4";
}
this.shareUrl = location.href;
if(href.indexOf('singlemessage') >= 0 || href.indexOf('wx_code') >= 0) {
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
this.shareUrl = getWebPageUrl(`profexam/#/sharecoop?uuid=${this.uuid}`);
location.replace(this.shareUrl);
}
const { token, info } = this.$store.state.user;
this.token = getCookie('token') || token;
this.token = getCookie("token") || token;
// 如果有token,但没有用户信息,则获取用户信息
if (this.token && !info.id) {
this.$store.dispatch('setToken', this.token);
this.$store.dispatch("setToken", this.token);
// this.$store.dispatch('getUserInfo');
}
this.queryByUuid(this.uuid);
// 调用广告位接口
this.getAdvertInfoList();
// this.getAdvertInfoList();
},
mounted() {
window.addEventListener("scroll", this.scrollFun);
......@@ -395,7 +389,7 @@ export default {
this.shareParam = JSON.parse(res.data || "{}");
this.projectId = this.shareParam.projectId || 812; // 797 812
this.getProjectInfoById();
console.log('queryByUuid', res);
console.log("queryByUuid", res);
}
});
},
......@@ -403,14 +397,15 @@ export default {
onVideoEnd(opt) {
if (opt.type === 1) {
this.coverType = 2;
} else if (opt.type === 2) { // 试看结束
} else if (opt.type === 2) {
// 试看结束
this.coverType = 1;
}
},
onReplay() {
this.coverType = 0;
},
},
btnClick1() {
this.$sendBuriedData({
component_tag: `882#88210`
......@@ -442,15 +437,38 @@ export default {
this.showChangeCard = false;
},
// 处理提示信息框
handlerAction(type) {
if(type == 1) {
this.showBindCardTips = false;
} else {
this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
}
},
// 激活前
beforeChangeCardAction(cardKey) {
this.commonCheckToken( () => {
this.changeCardAction(cardKey);
})
beforeChangeCardAction(cardKey, isInTips) {
this.commonCheckToken(() => {
this.changeCardAction(cardKey, isInTips);
});
},
// 查询是否买过类似的卡,但还没有绑定
hasNoUsedCard() {
let param = {
setEntry: true
};
this.GET(`cme/projectCard/queryNoUsedCard/3`, param).then(({ data }) => {
this.hasNoUsedCard = data.hasNoUsedCard;
if (data.hasNoUsedCard == 1) {
this.cmeCardModels = data.cmeCardModels[0] || {};
this.showBindCardTips = true;
}
});
},
// 激活Action 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey) {
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
cardKey: cardKey,
......@@ -462,36 +480,35 @@ export default {
_this.changeCardErrorMsg = "";
this.POST("cme/projectCard/bind", param)
.then(res => {
isInTips && (_this.showBindCardTips = false);
console.log('in res', res, isInTips);
if (res.code == "000000") {
if (res.data == 0) {
_this.changeCardErrorMsg = "请输入正确的激活码";
if (!res.data) {
if(isInTips) {
Toast(res.message);
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
} else {
_this.showChangeCard = false;
Toast("激活成功,开始学习");
_this.getProjectInfoById();
}
} else {
Toast(res.message);
}
})
.catch(e => {
_this.changeCardErrorMsg = "请输入正确的激活码";
console.log('in catch', isInTips);
if(isInTips) {
Toast("无效的激活码");
_this.showBindCardTips = false;
} else {
_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 = {
......@@ -522,7 +539,8 @@ export default {
this.POST("trade/goods/cardList", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.cardInfo = (res.data && res.data[0]) || { id: 0 };
this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
this.subContent = `您已购买“${this.cardInfo.name}”,是否用此卡绑定并激活当前课程。学习卡激活码一旦使用,不可更改不可退回`
}
});
},
......@@ -531,10 +549,14 @@ export default {
// this.$sendBuriedData({
// component_tag: `882#88203`
// });
this.commonCheckToken( () => {
let jumpUrl = getWebPageUrl(`profexam/#/goods-detail?goodsId=${this.cardInfo.id}&projectId=${this.projectId}&returnUrl=${encodeURIComponent(this.shareUrl)}`);
this.commonCheckToken(() => {
let jumpUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.cardInfo.id}&projectId=${
this.projectId
}&returnUrl=${encodeURIComponent(this.shareUrl)}`
);
window.location.href = jumpUrl;
})
});
},
// 首次进入考试时记录(点击‘我知道了’时调用)
......@@ -553,12 +575,11 @@ export default {
);
},
//去激活
changeClick() {
this.commonCheckToken( () => {
this.commonCheckToken(() => {
this.showChangeCard = true;
})
});
},
scrollFun() {
......@@ -662,8 +683,7 @@ export default {
if (videoUrl) {
_this.limitTimes = this.shareParam.limitTimes || 0;
_this.videoOptions.mp4 = videoUrl;
_this.videoOptions.trySeeTime =
this.shareParam.limitTimes || 0;
_this.videoOptions.trySeeTime = this.shareParam.limitTimes || 0;
} else {
_this.limitTimes = res.data.trySeeTime;
_this.videoOptions.mp4 = res.data.attachmentUrl;
......@@ -673,19 +693,22 @@ export default {
if (_this.hasBindCard) {
_this.videoOptions.trySeeTime = 0;
_this.videoOptions.autoplay = false;
// 如果没有绑定卡,则查询是否有未绑定的卡
} else {
_this.logged && _this.hasNoUsedCard();
}
let mp4Url = _this.videoOptions.mp4;
// 判断是否是mp4
if (mp4Url.lastIndexOf(".mp4") > 0) {
_this.bannerType = 2;
this.$nextTick( () => {
console.log('_this.$refs.picaVideo', _this.$refs.picaVideo);
this.$nextTick(() => {
console.log("_this.$refs.picaVideo", _this.$refs.picaVideo);
_this.$refs.picaVideo.switchUrl({
url: mp4Url,
proved: _this.videoOptions.trySeeTime,
enable: true,
enable: true
});
})
});
// // TODO test
// _this.videoOptions.mp4 += 2;
} else {
......@@ -771,7 +794,9 @@ export default {
// 二次分享
// let shareUrl = encodeURIComponent(location.href);
// let shareUrl = location.href;
let shareUrl = getWebPageUrl(`profexam/#/sharecoop?uuid=${this.uuid}`);
let shareUrl = getWebPageUrl(
`profexam/#/sharecoop?uuid=${this.uuid}`
);
this.wechatShare(
{
link: shareUrl,
......@@ -786,7 +811,7 @@ export default {
);
} else {
_this.showLoading = false;
_this.$router.replace('/not-found?fromPage=2');
_this.$router.replace("/not-found?fromPage=2");
}
});
},
......@@ -871,7 +896,7 @@ export default {
} else if (len <= 30 && certificate != 2) {
return 1;
}
},
}
}
};
</script>
......@@ -907,7 +932,7 @@ export default {
height: 30px;
}
}
.video-box{
.video-box {
position: relative;
height: 210px;
}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册