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

项目绑定提示及绑定(APP内与H5)

上级 72592c0c
<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>
......@@ -178,6 +178,14 @@
:isShowDialog="isShowIOSDownloadDialog"
@handlerAction="goBack"
/>
<CourseDialog
:subContent="subContent"
confirmBtnText="激活并去学习"
needSubContent
:isShowDialog="showBindCardTips"
@handlerAction="handlerActionTips"
></CourseDialog>
</div>
</template>
......@@ -199,6 +207,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 ExjumperDialog from "@/components/cme/exjumper-dialog";
import ExjumperButton from "@/components/cme/exjumper-button";
import NoMoreContent from "@/components/business/no-more-content";
......@@ -324,6 +333,14 @@ export default {
isShowSkDialog: false,
isShowIOSDownloadDialog: false,
shareUrl: location.href,
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 2,
orderId: 0
},
subContent: ``,
};
},
components: {
......@@ -340,6 +357,7 @@ export default {
ItemLeader,
TeacterIntro,
CommonDialog,
CourseDialog,
ExjumperButton,
ExjumperDialog,
// CardPopup,
......@@ -426,8 +444,31 @@ export default {
this.showChangeCard = false;
},
// 查询是否买过类似的卡,但还没有绑定
hasNoUsedCard() {
let param = {
setEntry: true
};
this.GET(`cme/projectCard/queryNoUsedCard/2`, param).then(({ data }) => {
this.hasNoUsedCard = data.hasNoUsedCard;
if (data.hasNoUsedCard == 1) {
this.cmeCardModels = data.cmeCardModels[0] || {};
this.showBindCardTips = true;
}
});
},
// 处理提示信息框
handlerActionTips(type) {
if(type == 1) {
this.showBindCardTips = false;
} else {
this.changeCardAction(this.cmeCardModels.cardKey, true);
}
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey) {
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
cardKey: cardKey,
......@@ -437,9 +478,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(!res.data) {
if(isInTips) {
Toast(res.message);
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
_this.showChangeCard = false;
......@@ -449,7 +495,12 @@ export default {
} else {
}
}).catch( e => {
_this.changeCardErrorMsg = "请输入正确的激活码";
if(isInTips) {
Toast("无效的激活码");
_this.showBindCardTips = false;
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
});
},
......@@ -618,7 +669,8 @@ export default {
if (res.code == "000000") {
this.showLoading = false;
// this.isShowPopup = true;
this.cardInfo = (res.data && res.data[0]) || { id: 0 };
this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
this.subContent = `您已购买“${this.cardInfo.name}”,是否用此卡绑定并激活当前课程。学习卡激活码一旦使用,不可更改不可退回`
}
});
},
......@@ -943,7 +995,9 @@ export default {
if(this.hasBindCard) {
_this.videoOptions.trySeeTime = 300000;
_this.videoOptions.autoplay = false;
}
} else {
_this.hasNoUsedCard();
}
let mp4Url = _this.videoOptions.mp4;
// 判断是否是mp4
if(mp4Url.lastIndexOf('.mp4') > 0) {
......
......@@ -183,30 +183,14 @@
></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="handlerActionTips"
></CourseDialog>
<!-- <div class="download-abs" @click="download">
<img src="../images/cme/course/pica-icon.png" alt="">
<span :class="{'short': needShort}">{{downloadTips}}</span>
</div> -->
</div>
</template>
<script>
......@@ -224,6 +208,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 ExjumperDialog from "@/components/cme/exjumper-dialog";
import ExjumperButton from "@/components/cme/exjumper-button";
import NoMoreContent from "@/components/business/no-more-content";
......@@ -351,6 +336,14 @@ export default {
token: '',
shareUrl: '',
shareParam: {},
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 2,
orderId: 0
},
subContent: ``,
};
},
components: {
......@@ -366,6 +359,7 @@ export default {
ItemLeader,
TeacterIntro,
CommonDialog,
CourseDialog,
ExjumperButton,
ExjumperDialog,
// CardPopup,
......@@ -408,7 +402,7 @@ export default {
this.queryByUuid(this.uuid);
// 调用广告位接口
this.getAdvertInfoList();
// this.getAdvertInfoList();
},
mounted() {
window.addEventListener("scroll", this.scrollFun);
......@@ -484,15 +478,38 @@ export default {
this.showChangeCard = false;
},
// 处理提示信息框
handlerActionTips(type) {
if(type == 1) {
this.showBindCardTips = false;
} else {
this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
}
},
//
beforeChangeCardAction(cardKey) {
beforeChangeCardAction(cardKey, isInTips) {
this.commonCheckToken( () => {
this.changeCardAction(cardKey);
this.changeCardAction(cardKey, isInTips);
})
},
// 查询是否买过类似的卡,但还没有绑定
hasNoUsedCard() {
let param = {
setEntry: true
};
this.GET(`cme/projectCard/queryNoUsedCard/2`, param).then(({ data }) => {
this.hasNoUsedCard = data.hasNoUsedCard;
if (data.hasNoUsedCard == 1) {
this.cmeCardModels = data.cmeCardModels;
this.showBindCardTips = true;
}
});
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey) {
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
cardKey: cardKey,
......@@ -503,18 +520,30 @@ 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.getProjectParticularsV2();
}
} else {
Toast(res.message);
}
}).catch( e => {
_this.changeCardErrorMsg = "请输入正确的激活码";
if(isInTips) {
Toast("无效的激活码");
_this.showBindCardTips = false;
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
});
},
......@@ -598,7 +627,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}”,是否用此卡绑定并激活当前课程。学习卡激活码一旦使用,不可更改不可退回`
}
});
},
......@@ -812,7 +842,10 @@ 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) {
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册