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

代码整理

上级 265d8d46
...@@ -17,9 +17,6 @@ ...@@ -17,9 +17,6 @@
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.10.4", "@babel/polyfill": "^7.10.4",
"axios": "0.16.2", "axios": "0.16.2",
"clipboard": "^2.0.6",
"pdfjs-dist": "^2.4.456",
"pica-topic-stencil": "^1.0.8",
"vant": "^2.2.15", "vant": "^2.2.15",
"vconsole": "^3.3.4", "vconsole": "^3.3.4",
"vue": "^2.1.0", "vue": "^2.1.0",
......
<template>
<section class="back-top">
<div class="back-btn" @click="backTop">
<img src="../../images/backTop.png">
</div>
</section>
</template>
<script>
export default {
data() {
return {
objPoint: {}
};
},
props: {
burialPoint: {
default: "",
type: String
}
},
mounted() {
if (this.burialPoint == "activity") {
this.objPoint = {
menuLevel: 2,
menuFromCode: "m_home",
menuCode: "m_content_list",
functionCode: "f_activity",
actionCode: "c_top"
};
}
},
methods: {
backTop: function() {
if (this.burialPoint == "activity") {
this.pageBurialPoin(this.objPoint);
}
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop > 0) {
document.documentElement.scrollTop = document.body.scrollTop = 0;
}
}
}
};
</script>
<style lang="less" scoped>
.back-btn {
position: fixed;
width: 35px;
height: 35px;
right: 15px;
z-index: 100;
bottom: 80px;
img {
width: 100%;
height: 100%;
display: block;
}
}
</style>
<template>
<div
:class="{ 'button-dis': isDisabled, 'button-plain': isPlain }"
class="button-container"
@click="submit"
>
{{ buttonText }}
</div>
</template>
<script>
export default {
name: 'ButtonComponent',
props: {
isPlain: {
type: Boolean,
default: false
},
isDisabled: {
type: Boolean,
default: false
},
buttonText: {
type: String,
default: "继续学习"
},
},
methods: {
submit() {
if (this.isDisabled) {
return;
}
this.$emit('handlerClick'); //点击按钮的操作,触发父组件相应的方法
}
}
};
</script>
<style scoped lang="less">
.button-container {
/*按钮本身样式没有设置margin,可根据具体页面的ui在父页面中进行设置*/
// width: 325px;
width: 90%;
height: 44px;
background: #449284;
border-radius: 22px;
color: #fff;
font-size: 16px;
font-weight: 700;
line-height: 44px;
text-align: center;
margin: 16px auto;
}
.button-dis {
opacity: 0.5;
}
.button-plain {
color: #449284;
background: #fff;
border: 1px solid rgba(68,146,132, 0.4);
}
</style>
<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="portalModule.moduleName | shortName(19)"
:name="portalModule.expandKey"
:value="portalModule.value"
@click.native="chooseItem(portalModule)"
>
<!-- :disabled="portalModule.disabled" -->
<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
v-if="!logged"
@click="gotoExamOrCourse(item)"
class="text-action text-action-no"
>
{{getActionText(item.status, item.type)}}
</span>
<span
v-else-if="!item.id"
class="text-action text-action-no"
@click="toastToBuy('敬请期待')"
>
更新中
</span>
<img class="key" v-else-if="!hasBindCard && item.trySeeFlag == 1 && !item.trySeeTime" @click="toastToBuy('激活/购买后可学习课程', item)" src="../../images/cme/phrase2/key.png" alt="">
<span
v-else-if="!hasBindCard && item.trySeeFlag == 1"
@click="gotoExamOrCourse(item, 'sk')"
class="text-action"
>
去试看
</span>
<span
v-else
@click="gotoExamOrCourse(item)"
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, getWebPageUrl, isWeiXin } 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],
token: '',
};
},
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,
},
logged: {
type: Boolean,
default: false
},
projectId: {
type: Number | String,
default: 0
},
goodsId: {
type: Number | String,
default: 0
},
},
components: {
MergeTitle,
NoMoreContent,
Dialog,
},
watch:{
actionList: {
immediate: true,
handler (val) {
this.activeNames = val;
}
}
},
mounted() {
},
created() {
this.token = this.$store.state.user.token;
},
methods: {
// 跳转到考试或课程 type 1: 考试; 2: 课程
// 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试
gotoExamOrCourse(item, type) {
if(type == 'sk') {
this.$sendBuriedData({
component_tag: `882#88216#${item.id}#${item.name}`
});
}
// 在浏览器中
if(!isWeiXin()) {
// 没有绑定则提示去购买/激活
if(!this.hasBindCard) {
if(item.type == 1) {
Toast('激活/购买后可参加考试');
} else if(item.type == 2){
Toast('激活/购买后可学习完整课程');
}
return;
// 已经绑定则前往云鹊医APP
} else {
if(item.type == 1) {
Toast('请前往云鹊医APP参加考试');
} else if(item.type == 2){
Toast('请前往云鹊医APP学习课程');
}
return;
}
}
if(!this.logged) {
if(item.type == 1) {
Toast('请前往云鹊医APP参加考试');
} else if(item.type == 2){
Toast('登陆后可学习课程');
}
return;
}
// 埋点:去学习、继续学习、复习、去考试、重考
// let actionCode = sendBuriedDataMap[item.status];
// if(actionCode) {
// this.$sendBuriedData({
// component_tag: `882#${actionCode}#${this.projectId}`
// });
// }
let logId = null;
if (item.useFlag == 2) {
if(item.type == 1) {
// Toast('尚未完成所有课程学习');
Toast('请前往云鹊医APP参加考试');
} else if(item.type == 2){
Toast('尚未完成相关考试');
}
return;
};
if (item.type == 1) {
this.gotoExam(item.id);
logId = '882#88206';
} else if (item.type == 2) {
this.gotoCourse(item);
logId = '882#88205';
}
// if (trySee) {
// logId = '882#88204';
// }
// logId && this.$sendBuriedData({
// component_tag: logId
// });
},
// 跳转到课程
gotoCourse(item) {
let param = {
token: this.token,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
if (res.code !== "000000") {
Toast('登陆后可学习课程');
} else {
this.jumpToCourse(item);
}
});
},
// 跳转到课程
jumpToCourse: function(item) {
if(!isWeiXin()) {
Toast('请前往云鹊医APP学习课程');
return;
}
let jumpUrl = getWebPageUrl(`profexam/#/course-detail?courseId=${item.id}&projectId=${this.projectId}&goodsId=${this.goodsId}`);
window.location.href = jumpUrl;
},
// 跳转到考试
gotoExam: function(examId) {
Toast('请前往云鹊医APP参加考试');
},
// 获取按钮文案
getActionText(status, type) {
let actionText = actionMap[status];
if(!actionText) {
actionText = type == 1 ? '去考试' : '去学习';
}
return actionText;
},
// 折叠与展开模块
changeCollapse(activeNames) {
console.log('activeNames',activeNames);
let param = {
expandKeys: activeNames,
setEntry: true,
token: this.token,
}
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(toastMsg, item) {
if(item) {
this.$sendBuriedData({
component_tag: `882#88215#${item.id}#${item.name}`
});
}
Toast(toastMsg);
}
}
};
</script>
<style lang="less">
.van-dialog {
transform: translate(-50%,-50%);
width: 300px;
border-radius: 3px;
.van-dialog__header {
padding-top: 30px;
font-size: 18px;
color: #333333;
}
.van-dialog__content {
.van-dialog__message--has-title {
padding-top: 14px;
text-align: left;
color: #676869;
font-weight:400;
}
}
.van-dialog__footer {
.van-button {
.van-button__text {
color: #449284;
font-size: 17px;
}
}
}
}
.van-toast {
// background: #000000;
div {
font-size:12px;
color: #FFFFFF;
}
}
.van-toast--text {
padding: 7px 8px;
}
.no-more-bottom {
position: relative;
width: 100%;
height: 40px;
}
.cell-detail {
.van-hairline--top::after , .van-hairline--top-bottom::after {
border-width: 0px;
}
.van-collapse-item {
.van-cell {
margin: 9px auto 0 auto;
width: 100%;
min-height: 48px;
border-radius: 6px;
}
.van-collapse-item__title {
background: #F8F9FA;
.van-cell__title {
max-width: 200px;
vertical-align: middle;
line-height: 30px;
flex: auto;
span {
color: #373839;
font-weight:500;
font-size: 15px;
height: 15px;
line-height: 15px;
}
}
.van-cell__value {
// max-width: 80px;
line-height: 30px;
span {
color: #979899;
font-weight:500;
font-size: 14px;
line-height: 14px;
}
}
.van-icon {
margin-top: 3px;
color: #999999;
}
}
.van-collapse-item__title--expanded {
background: #E3EFED;
.van-cell__title {
span {
color: #449284;
font-weight:500;
font-size: 15px;
line-height: 15px;
}
}
.van-cell__value {
span {
color: #449284;
font-weight:500;
font-size: 14px;
line-height: 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: 20px;
margin-left: 0;
width: 373px;
height: 6px;
background: #F8F9FA;
}
}
.cell-container {
display: flex;
flex-direction: column;
margin: 20px 0px -28px 0px;
&-item {
position: relative;
display: flex;
flex-direction: row;
margin-bottom: 39px;
line-height: 51px;
font-size: 15px;
justify-content: space-between;
align-items: center;
.name {
display: flex;
align-items: center;
flex: 1;
width: 100px;
.name-img {
position: relative;
z-index: 9;
margin-right: 6px;
width: 20px;
height: 20px;
float: left;
.img-icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
}
&-logo {
position: relative;
z-index: 9;
margin-right: 6px;
width: 20px;
height: 20px;
text-align: center;
background:rgba(68,146,132,1);
font-size: 12px;
font-weight: 700;
color: #FFFFFF;
border-radius: 50%;
float: left;
line-height: 22px;
// display:table;
// overflow:hidden;
// span {
// color: #FFFFFF;
// font-size: 12px;
// font-weight: 700;
// display: table-cell;
// text-align: center;
// vertical-align: middle;
// line-height: 20px;
// }
// &::before {
// position: absolute;
// top: -6px;
// left: 8px;
// display: inline-block;
// height: 6px;
// width: 4px;
// background: #FFFFFF;
// content: "";
// }
// &::after {
// position: absolute;
// top: 20px;
// left: 8px;
// display: inline-block;
// height: 6px;
// width: 4px;
// background: #FFFFFF;
// content: "";
// }
}
&-learn {
background:rgba(246, 131, 103, 1);
}
&-logo-no {
background:rgba(231, 232, 233, 1);
}
&-title {
flex: 1;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: 15px;
font-weight: 700;
line-height: 22px;
padding-right: 10px;
color: #333333;
}
&-title-no {
color: #979899;
}
// &::before {
// position: relative;
// top: 3px;
// display: inline-block;
// width: 4px;
// content: "";
// margin-right: 5px;
// height: 16px;
// background: #449284;
// border-radius: 3px;
// }
// span {
// img {
// margin-top: 4px;
// position: relative;
// top: 2px;
// width: 70px;
// height: 20px;
// }
// }
}
.text-action {
width: 68px;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 12px;
font-weight: 700;
border-radius: 15px;
border: 1px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1);
img {
position: relative;
left: 2px;
top: 3px;
width: 8px;
height: 12px;
}
&-no {
border: 1px solid #c7c8c9;
color: #c7c8c9;
}
}
.key {
width: 15px;
height: 15px;
margin-right: 20px;
}
}
span {
.cert-img {
margin-left: 26px;
position: relative;
top: -34px;
width: 70px;
height: 20px;
}
.space2 {
top: -34px;
}
}
.connect-line {
position: absolute;
// top: 32px;
top: 3px;
left: 8.5px;
height: 42px;
width: 3px;
background: #F8F9FA;
// border: 0.5px dashed rgba(240, 241, 244, 1);
}
.line-complete {
background: #E3EFED;
}
.len4 {
// height: 100px;
height: 106px;
}
.len3 {
// height: 82px;
height: 88px;
}
.len2 {
// height: 82px;
height: 88px;
}
.len1 {
// height: 62px;
height: 68px;
}
.bottom-line {
position: relative;
margin: -19px 0 20px 0;
bottom: 0px;
width: 100%;
height: 6px;
background: #F8F9FA;
border-radius: 2px;
// border-bottom: 0.5px solid #F0F1F2;
}
.foot-line {
position: absolute;
width: 311px;
margin-left: 34.5px;
height: 1px;
background: #E7E8E9;
// border-bottom: 0.5px solid #E7E8E9;
transform: scaleY(0.5);
bottom: -20px;
}
}
.bg-13 {
background: #abcec7;
}
</style>
<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="portalModule.moduleName | shortName(19)"
:name="portalModule.expandKey"
:value="portalModule.value"
@click.native="chooseItem(portalModule)"
>
<!-- :disabled="portalModule.disabled" -->
<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
v-if="!item.id"
class="text-action text-action-no"
@click="toastToBuy('敬请期待')"
>
更新中
</span>
<img class="key" v-else-if="!hasBindCard && item.trySeeFlag == 1 && !item.trySeeTime" @click="toastToBuy('激活/购买后可学习课程')" 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}"
>
{{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, trySee) {
this.$parent.$refs.tcPlayerRef && this.$parent.$refs.tcPlayerRef.pause();
// 埋点:去学习、继续学习、复习、去考试、重考
// let actionCode = sendBuriedDataMap[item.status];
// if(actionCode) {
// this.$sendBuriedData({
// component_tag: `882#${actionCode}#${this.projectId}`
// });
// }
// this.gotoCourse(item, contentList, index, trySee);
let logId = null;
let appVersion = getAppVersion(this.userInfo.appVersion);
if (item.useFlag == 2) {
if(item.type == 1) {
Toast('尚未完成所有课程学习');
} else if(item.type == 2){
Toast('尚未完成相关考试');
}
return;
};
if (item.type == 1) {
if (appVersion <= 300) {
Toast('请您下载新版本App');
return;
} else {
this.gotoExam(item.id);
}
logId = '882#88206';
} else if (item.type == 2) {
this.gotoCourse(item, contentList, index, trySee);
logId = '882#88205';
}
if (trySee) {
logId = '882#88204';
}
logId && this.$sendBuriedData({
component_tag: logId
});
},
// 如果此模块中没有考试,则直接退出;否则
// 查看课程是否是最后一节课, 如果是,则要查找到相应的考试,并传递给原生端
beforeGotoCourse(item, contentList, index) {
let extendsParam = [];
let hasExam = false;
let currentExam = {};
// 查找当前课程后面的有没有考试
for(let i = index; i < contentList.length; i ++) {
// if(contentList[i].type == 1 && contentList[i].status != 14) {
if(contentList[i].type == 1 && contentList[i].id) {
hasExam = true;
currentExam = contentList[i];
break;
}
}
// 如果后面没有考试,则直接退出
if(!hasExam) return extendsParam;
let hasNoLearningCourse = false;
// 查找本模块中是否还有没有学习完的课程,排除当前这个
for(let j = 0; j < contentList.length; j ++) {
if(j == index) continue;
if(contentList[j].type == 2 && (contentList[j].status == 21 || contentList[j].status == 22)) {
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: -1, type: 4, seqNo: 1});
extendsParam.push({key: "jumpContent", value: currentExam.id, type: 4, seqNo: 1});
return extendsParam;
},
// 跳转到课程
gotoCourse: function(item, contentList, index, trySee) {
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 = []
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: item.id,
type: 4,
seqNo: 1
},
{
key: "courseRequire",
value: this.courseRequire - 0,
type: 4,
seqNo: 1
},
{
key: "projectId",
value: this.projectId,
type: 4,
seqNo: 1
},
];
if(trySee) {
// let limitTimes = this.limitTimes - 0;
let limitTimes = item.trySeeTime - 0;
if(this.hasBindCard) {
limitTimes = -1;
}
paramList.push({
key: "limitTimes",
value: limitTimes,
type: 4,
seqNo: 1
});
}
console.log(paramList.concat(extendsParam));
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;
},
// 折叠与展开模块
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(toastMsg) {
Toast(toastMsg);
}
}
};
</script>
<style lang="less">
.van-dialog {
transform: translate(-50%,-50%);
width: 300px;
border-radius: 3px;
.van-dialog__header {
padding-top: 30px;
font-size: 18px;
color: #333333;
}
.van-dialog__content {
.van-dialog__message--has-title {
padding-top: 14px;
text-align: left;
color: #676869;
font-weight:400;
}
}
.van-dialog__footer {
.van-button {
.van-button__text {
color: #449284;
font-size: 17px;
}
}
}
}
.van-toast {
// background: #000000;
div {
font-size:12px;
color: #FFFFFF;
}
}
.van-toast--text {
padding: 7px 8px;
}
.no-more-bottom {
position: relative;
width: 100%;
height: 40px;
}
.cell-detail {
.van-hairline--top::after , .van-hairline--top-bottom::after {
border-width: 0px;
}
.van-collapse-item {
.van-cell {
margin: 9px auto 0 auto;
// width: 345px;
width: 100%;
min-height: 48px;
border-radius: 6px;
}
.van-collapse-item__title {
background: #F8F9FA;
.van-cell__title {
max-width: 200px;
vertical-align: middle;
line-height: 30px;
flex: auto;
span {
color: #373839;
font-weight:500;
font-size: 15px;
height: 15px;
line-height: 15px;
}
}
.van-cell__value {
// max-width: 80px;
line-height: 30px;
span {
color: #979899;
font-weight:500;
font-size: 14px;
line-height: 14px;
}
}
.van-icon {
margin-top: 3px;
color: #999999;
}
}
.van-collapse-item__title--expanded {
background: #E3EFED;
.van-cell__title {
span {
color: #449284;
font-weight:500;
font-size: 15px;
line-height: 15px;
}
}
.van-cell__value {
span {
color: #449284;
font-weight:500;
font-size: 14px;
line-height: 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: 20px;
margin-left: 0;
width: 373px;
height: 6px;
background: #F8F9FA;
}
}
.cell-container {
display: flex;
flex-direction: column;
margin: 20px 0px -28px 0px;
&-item {
position: relative;
display: flex;
flex-direction: row;
margin-bottom: 39px;
line-height: 51px;
font-size: 15px;
justify-content: space-between;
align-items: center;
.name {
display: flex;
align-items: center;
flex: 1;
width: 100px;
.name-img {
position: relative;
z-index: 9;
margin-right: 6px;
width: 20px;
height: 20px;
float: left;
.img-icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
}
&-logo {
position: relative;
z-index: 9;
margin-right: 6px;
width: 20px;
height: 20px;
text-align: center;
background:rgba(68,146,132,1);
font-size: 12px;
font-weight: 700;
color: #FFFFFF;
border-radius: 50%;
float: left;
line-height: 22px;
// display:table;
// overflow:hidden;
// span {
// color: #FFFFFF;
// font-size: 12px;
// font-weight: 700;
// display: table-cell;
// text-align: center;
// vertical-align: middle;
// line-height: 20px;
// }
// &::before {
// position: absolute;
// top: -6px;
// left: 8px;
// display: inline-block;
// height: 6px;
// width: 4px;
// background: #FFFFFF;
// content: "";
// }
// &::after {
// position: absolute;
// top: 20px;
// left: 8px;
// display: inline-block;
// height: 6px;
// width: 4px;
// background: #FFFFFF;
// content: "";
// }
}
&-learn {
background:rgba(246, 131, 103, 1);
}
&-logo-no {
background:rgba(231, 232, 233, 1);
}
&-title {
flex: 1;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// width: 231px;
font-size: 15px;
font-weight: 700;
line-height: 22px;
color: #333333;
padding-right: 10px;
// float: left;
}
&-title-no {
color: #979899;
}
// &::before {
// position: relative;
// top: 3px;
// display: inline-block;
// width: 4px;
// content: "";
// margin-right: 5px;
// height: 16px;
// background: #449284;
// border-radius: 3px;
// }
// span {
// img {
// margin-top: 4px;
// position: relative;
// top: 2px;
// width: 70px;
// height: 20px;
// }
// }
}
.text-action {
width: 68px;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 12px;
font-weight: 700;
border-radius: 15px;
border: 1px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1);
img {
position: relative;
left: 2px;
top: 3px;
width: 8px;
height: 12px;
}
&-no {
border: 1px solid #c7c8c9;
color: #c7c8c9;
}
}
.key {
width: 15px;
height: 15px;
margin-right: 20px;
}
}
span {
.cert-img {
margin-left: 26px;
position: relative;
top: -34px;
width: 70px;
height: 20px;
}
.space2 {
top: -34px;
}
}
.connect-line {
position: absolute;
// top: 32px;
top: 3px;
left: 8.5px;
height: 42px;
width: 3px;
background: #F8F9FA;
// border: 0.5px dashed rgba(240, 241, 244, 1);
}
.line-complete {
background: #E3EFED;
}
.len4 {
// height: 100px;
height: 106px;
}
.len3 {
// height: 82px;
height: 88px;
}
.len2 {
// height: 82px;
height: 88px;
}
.len1 {
// height: 62px;
height: 68px;
}
.bottom-line {
position: relative;
margin: -19px 0 20px 0;
bottom: 0px;
width: 100%;
height: 6px;
background: #F8F9FA;
border-radius: 2px;
// border-bottom: 0.5px solid #F0F1F2;
}
.foot-line {
position: absolute;
width: 311px;
margin-left: 34.5px;
height: 1px;
background: #E7E8E9;
// border-bottom: 0.5px solid #E7E8E9;
transform: scaleY(0.5);
bottom: -20px;
}
}
.bg-13 {
background: #abcec7;
}
</style>
<template>
<!-- 项目组件列表项 -->
<section>
<CommonTitle :title="moduleName" :isShowCert="false"></CommonTitle>
<article class="cell-container">
<span class="" v-for="(item, index) in paramData" :key="index">
<div v-if="index > 0 && paramData[index].templetId!= paramData[index-1].templetId" class="bottom-line"></div>
<div class="cell-container-item" @click="gotoExamOrCourse(item)" >
<div class="name">
<div class="name-logo" :class="{'name-learn': item.type == 2, 'name-logo-no': item.useFlag == 2}" >
{{item.type | contentType}}
</div>
<p class="name-title" :class="{'name-title-no': item.useFlag == 2}">{{item.name | shortName(30)}}</p>
<!-- <span v-if="item.certificateFlag !== 2 && index == 0">
<img class="banner-img" src="../../images/has-owner-cert.png">
</span> -->
</div>
<!-- 'bg-13': item.status == 13 -->
<span
class="text-action"
:class="{'text-action-no': item.useFlag == 2}"
>
<!-- <img v-show="item.status == 13" class="text-action-dh" src="../../images/icon-dh.png"> -->
{{getActionText(item.status)}}
</span>
<div class="connect-line"
:class="{'len1': item.height === 1, 'len2': item.height === '1','len3': item.height === 2, 'len4': item.height === '2'}"
v-if="index+1 < paramData.length && paramData[index].templetId == paramData[index+1].templetId">
</div>
</div>
<span v-if="item.certificateFlag == 2">
<img class="banner-img" :class="{'space2': item.height == 2 }" src="../../images/has-owner-cert.png">
</span>
</span>
</article>
<NoMoreContent v-if="paramData.length > 9"/>
<Toast ref="toastTitle"></Toast>
</section>
</template>
<script>
import CommonTitle from "@/components/common/common-title";
import NoMoreContent from "@/components/business/no-more-content";
import Toast from "@/components/common/common-toast";
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
import vueFilters from '@/utils/filter';
const actionMap = {
11: "去考试",
12: "再考一次",
13: "已通过",
14: "已完成",
15: "已通过",
16: "未通过",
21: "去学习",
22: "继续学习",
23: "去复习"
};
export default {
name: "cell-list-item",
data() {
return {
appVersion: "200",
hocImg: require("../../images/has-owner-cert.png")
};
},
props: {
moduleName: {
type: String,
default: ""
},
paramData: {
type: Array,
default: () => []
},
courseRequire: {
type: Number,
default: 0,
},
projectId: {
type: Number | String,
default: 0,
}
},
computed: {
...mapGetters(["userInfo"])
},
components: {
CommonTitle,
NoMoreContent,
Toast,
},
mounted() {
},
created() {
},
methods: {
// 跳转到考试或课程 type 1: 考试; 2: 课程
// 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试
gotoExamOrCourse(item) {
let appVersion = getAppVersion(this.userInfo.appVersion);
if (item.useFlag == 2) return;
if (window.__isWeb) {
this.$refs.toastTitle.toast("请您下载App");
return;
}
if (item.type == 1) {
if (appVersion <= 300) {
this.$refs.toastTitle.toast("请您下载新版本App");
return;
} else {
this.gotoExam(item.id);
}
} else if (item.type == 2) {
this.gotoCourse(item.id);
}
console.log(item);
},
// 跳转到课程
gotoCourse: function(courseId) {
let paramList = []
paramList = [
{
key: "className",
// value: "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
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,
type: 4,
seqNo: 1
},
{
key: "projectId",
value: this.projectId,
type: 4,
seqNo: 1
},
];
console.log('gotoCourse', paramList);
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 跳转到考试
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) {
return actionMap[status];
}
}
};
</script>
<style lang="less" scoped>
.cell-container {
display: flex;
flex-direction: column;
margin: 0 15px;
&-item {
position: relative;
display: flex;
flex-direction: row;
// margin: 6px 0px;
// height: 51px;
margin-bottom: 32px;
line-height: 51px;
font-size: 15px;
// padding: 0px 15px;
// background: rgba(248, 249, 250, 1);
// border-bottom: 1px solid #f0f0f0;
// border-radius: 6px;
justify-content: space-between;
align-items: center;
.name {
&-logo {
position: relative;
z-index: 9;
margin-right: 6px;
width: 20px;
height: 20px;
text-align: center;
background:rgba(68,146,132,1);
font-size: 12px;
font-weight: 700;
color: #FFFFFF;
border-radius: 50%;
float: left;
line-height: 22px;
// display:table;
// overflow:hidden;
// span {
// color: #FFFFFF;
// font-size: 12px;
// font-weight: 700;
// display: table-cell;
// text-align: center;
// vertical-align: middle;
// line-height: 20px;
// }
&::before {
position: absolute;
top: -6px;
left: 8px;
display: inline-block;
height: 6px;
width: 4px;
background: #FFFFFF;
content: "";
}
&::after {
position: absolute;
top: 20px;
left: 8px;
display: inline-block;
height: 6px;
width: 4px;
background: #FFFFFF;
content: "";
}
}
&-learn {
background:rgba(246, 131, 103, 1);
}
&-logo-no {
background:rgba(231, 232, 233, 1);
}
&-title {
flex: 1;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// width: 231px;
font-size: 15px;
font-weight: 700;
line-height: 21px;
color: #373839;
padding-right: 10px;
// float: left;
}
&-title-no {
color: rgba(151, 152, 153, 1);
}
// &::before {
// position: relative;
// top: 3px;
// display: inline-block;
// width: 4px;
// content: "";
// margin-right: 5px;
// height: 16px;
// background: #449284;
// border-radius: 3px;
// }
// span {
// img {
// margin-top: 4px;
// position: relative;
// top: 2px;
// width: 70px;
// height: 20px;
// }
// }
}
.text-action {
width: 68px;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 12px;
font-weight: 700;
border-radius: 15px;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// opacity: 0.45;
border: 0.5px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1);
img {
position: relative;
left: 2px;
top: 3px;
width: 8px;
height: 12px;
}
&-no {
border: 0.5px solid #c7c8c9;
color: #c7c8c9;
}
}
// span {
// width: 100%;
// }
}
span {
img {
margin-left: 26px;
position: relative;
top: -28px;
width: 70px;
height: 20px;
}
.space2 {
top: -26px;
}
}
.connect-line {
position: absolute;
// top: 32px;
top: 3px;
left: 9.5px;
height: 42px;
width: 0.5px;
border: 0.5px dashed rgba(240, 241, 244, 1);
}
.len4 {
height: 100px;
}
.len3 {
height: 82px;
}
.len2 {
height: 82px;
}
.len1 {
height: 62px;
}
.bottom-line {
position: relative;
margin: 6px 0 28px 0;
bottom: 0px;
width: 100%;
border-bottom: 0.5px solid #F0F1F2;
}
}
.bg-13 {
background: #abcec7;
}
</style>
<template>
<!-- 相关资料列表 -->
<div class="mater-container-wrapper">
<CommonTitle
title="相关资料"
:isShowCert="false"
:isShowMore="paramData.length > 3"
@showMore="gotoPDFList()"
></CommonTitle>
<section class="mater-container">
<div
v-show="paramData.length && index < 3"
v-for="(item, index) in paramData"
:key="index"
class="mater-item"
>
<div class="mater-item-left">
<img :src="item.iconUrl">
</div>
<div class="mater-item-right">
<span class="mater-item-right-title">{{item.name}}</span>
<span class="mater-item-right-other">文件大小:{{item.size | formatFileSize}}</span>
</div>
<div class="mater-details" @click="gotoPDFDetail(item)">
<span>查看</span>
<img :src="rightIcon" alt>
</div>
</div>
<NoContent v-show="!paramData.length"></NoContent>
</section>
<Toast ref="toastTitle"></Toast>
</div>
</template>
<script>
import CommonTitle from "@/components/common/common-title";
// import NoMoreContent from "@/components/business/no-more-content";
import NoContent from "@/components/business/no-content";
import Toast from "@/components/common/common-toast";
import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils";
export default {
name: "mater-list-item",
data() {
return {
bgColor: "green",
statusText: "进行中",
rightIcon: require("../../images/right-icon.png"),
appVersion: "200"
};
},
props: {
paramData: {
type: Array,
default: () => []
},
projectId: {
type: Number | String,
default: 1
}
},
computed: {
...mapGetters(["userInfo"])
},
components: {
// NoMoreContent,
NoContent,
CommonTitle,
Toast
},
mounted() {
},
methods: {
gotoPDFList() {
let appVersion = getAppVersion(this.userInfo.appVersion);
if (window.__isWeb) {
this.$refs.toastTitle.toast("请您下载App");
return;
}
if (appVersion <= 300) {
this.$refs.toastTitle.toast("请您下载新版本App");
return;
}
let itemData = {
title: "",
imageUrl: "",
appModuleInfo: {
code: "M200",
type: 4,
name: "wwww",
paramFlag: 1,
paramList: [
{
key: "className",
value:
"com.picahealth.yunque.activitys.scanpdf.AllRelevantInfoActivity###PicaDo.InstructionManagerController",
type: 4,
seqNo: 1
},
{
key: "portalProjectId",
value: this.projectId,
type: 1,
seqNo: 2
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: itemData.appModuleInfo.paramList
});
},
gotoPDFDetail: function(item) {
let appVersion = getAppVersion(this.userInfo.appVersion);
if (window.__isWeb) {
this.$refs.toastTitle.toast("请您下载App");
return;
}
if (appVersion <= 300) {
this.$refs.toastTitle.toast("请您下载新版本App");
return;
}
let itemData = {
title: "",
imageUrl: "",
appModuleInfo: {
code: "M200",
type: 4,
name: "wwww",
paramFlag: 1,
paramList: [
{
key: "className",
value:
"com.picahealth.yunque.activitys.scanpdf.ReadPDFActivity###LiveStreamingCoursewareController",
type: 4,
seqNo: 1
},
{
key: "portalProjectId",
value: 1,
type: 1,
seqNo: 2
},
{
key: "pdfURL",
value: item.url,
type: 1,
seqNo: 2
},
{
key: "navTitle",
value: item.name,
type: 1,
seqNo: 2
},
{
key: "pdfId",
value: item.id,
type: 1,
seqNo: 2
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: itemData.appModuleInfo.paramList
});
}
}
};
</script>
<style lang="less" scoped>
.mater-container {
position: relative;
margin: 0px 15px;
}
.mater-item {
display: flex;
// width: 100%;
height: 80px;
border-bottom: 1px solid #f0f0f0;
background: #fff;
flex-direction: row;
justify-content: space-between;
align-items: center;
img {
width: 35px;
height: 37px;
margin-right: 10px;
border-radius: 3px 2px 2px 3px;
}
&-left {
display: flex;
position: relative;
top: 0;
}
&-right {
display: flex;
// width: 215px;
flex: 1;
flex-direction: column;
padding-top: 4px;
&-title {
// height: 50px;
line-height: 23px;
font-size: 15px;
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
&-other {
height: 22px;
line-height: 20px;
font-size: 13px;
font-weight: 400;
color: rgba(151, 152, 153, 1);
}
}
.mater-details {
position: relative;
right: -10px;
display: flex;
flex-direction: row;
align-items: center;
span {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: 14px;
font-weight: 700;
color: #666;
}
img {
width: 15px;
height: 16px;
}
}
}
</style>
<template>
<section class="comp-title-container">
<div class="comp-text">
<p
class="comp-title"
:style="{
'color': fontColor,
'font-weight': fontWeight,
'font-size': cTextFontSize,
}"
>{{title }}</p>
<p v-show="isShowExplain" @click="showDialog" class="comp-title-explain">
<span>查看说明</span>
<img :src="rightNew">
</p>
</div>
<div v-show="isShowCert === 2" class="cert-img">
<img class="banner-img" :src="hocImg">
</div>
</section>
</template>
<script>
export default {
name: "common-title",
data() {
return {
fontSize: 37.5,
cImgPaddingTop: "1rem",
hocImg: require("../../images/has-cert-new.png"),
rightIcon: require("../../images/right-icon.png"),
rightNew: require("../../images/right-new.png"),
};
},
props: {
title: {
type: String,
default: ""
},
fontColor: {
type: String,
default: "#333"
},
fontWeight: {
type: Number,
default: 700
},
textFontSize: {
type: Number,
default: 18
},
paddingTop: {
type: Number,
default: 20
},
paddingBottom: {
type: Number,
default: 15
},
isShowCert: {
type: Number,
default: 1
},
isShowMore: {
type: Boolean,
default: false
},
isShowExplain: {
type: Boolean,
default: false
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
this.cImgPaddingTop = (this.paddingTop + 3) / this.fontSize + "rem";
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {
showMove() {
this.$emit("showMore");
},
showDialog() {
this.$emit("showDialog");
}
}
};
</script>
<style lang="less" scoped>
.comp-title-container {
margin-top: 17px;
padding-left: 15px;
// display: flex;
// flex-direction: row;
// justify-content: space-between;
.comp-text {
position: relative;
// width: 345px;
width: 100%;
overflow: hidden;
}
}
.comp-title {
position: relative;
width: 238px;
float: left;
line-height: 30px;
}
.comp-title-explain {
position: relative;
float: right;
// margin-right: 15px;
margin-top: 3px;
span {
font-size: 14px;
font-weight: 400;
color: rgba(12, 21, 39, 0.4);
// margin-right: 3px;
line-height: 18px;
height: 18px;
vertical-align: middle;
}
img {
width: 8px;
height: 12px;
vertical-align: middle;
}
}
.cert-img {
margin-top: 1px;
.banner-img {
width: 70px;
height: 20px;
padding-top: 2px;
}
}
</style>
<template>
<!-- 专项合作无内容 -->
<section class="nc-container">
<img
class="nc-container-img"
src="../../images/cme/no-content.png"
>
<span v-if="tabNum == 1" class="nc-container-text">您还未参加继教项目哦~</span>
<span v-if="tabNum == 2" class="nc-container-text">当前无可学继教项目哦~</span>
</section>
</template>
<script>
export default {
name: "no-content",
props: {
tabNum: {
default: 1
}
},
data() {
return {};
}
};
</script>
<style lang="less" scoped>
.nc-container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
align-content: center;
margin-top: 100px;
margin-bottom: 20px;
text-align: center;
// margin: 0 auto;
&-img {
margin-left: 100px;
width: 150px;
height: 150px;
}
&-text {
height: 21px;
line-height: 21px;
font-size: 15px;
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
}
</style>
<template>
<!-- 到底了 -->
<section class="nc-container">
<img class="nc-container-content"
:src="nmcImg">
</section>
</template>
<script>
export default {
name: 'no-more-content',
data() {
return {
nmcImg: require('../../images/no-more-content.png')
}
}
}
</script>
<style lang="less" scoped>
.nc-container {
display: flex;
&-content {
width: 100%;
height: 62px;
}
}
</style>
<template>
<div class="item-notice-wrapper" :style="{'margin-top': marginTop}">
<div class="content" @click="clickNoticeItem">
<img :style="{'margin-top': imgMarginTop}" src="../../images/notice.png">
<span class="gg">公告</span>
<span :style="{'margin-top': imgMarginTop}" class="vtc-line"></span>
<span class="content">{{content}}</span>
<img :style="{'margin-top': imgMarginTop}" src="../../images/notice-arr-right.png">
</div>
</div>
</template>
<script>
export default {
props: {
content: {
type: String,
default: ''
},
clientType: {
type: String | Number,
default: 0
}
},
methods: {
clickNoticeItem() {
this.$emit('clickNoticeItem')
}
},
data() {
return {
marginTop: '0px',
imgMarginTop: '0px'
}
},
watch: {
clientType(newVal) {
if(newVal == 1) {
} else if(newVal == 2){
this.marginTop = '10px';
this.imgMarginTop = '-3px'
} else if(newVal == 3){
this.marginTop = '-2px';
}
}
},
};
</script>
<style lang="less" scoped>
.item-notice-wrapper {
.content {
display: flex;
flex-direction: row;
height: 32px;
line-height: 32px;
padding: 0 15px;
text-align: left;
align-items: center;
background: #FEFAF5;
img {
width: 12px;
height: 12px;
line-height: 32px;
}
span {
font-size: 13px;
text-align: left;
&.gg {
// width: 30px;
padding: 1px 5px 0;
font-size: 13px;
font-weight: 700;
color: #835800;
}
&.vtc-line {
margin-top: 0px;
width: 1px;
height: 15px;
background: #835800;
}
&.content {
display: block;
flex: 1;
padding-top: 1px;
// padding-left: 5px !important;
padding: 0 10px 0 5px;
height: 32px;
line-height: 32px;
text-align: left;
font-size: 13px;
font-weight: 700;
color: #E6A23C;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
</style>
<template>
<div class="pop-notice-wrapper">
<div class="mask"></div>
<div class="content">
<div class="top">
<span class="title">{{noticeData.noticeTitle | shortName(20)}}</span>
<div></div>
<span class="body">
<!-- 该项目已于2019年12月1日
<span class="b">停止发放项目证书</span>,但仍可以继续学习该项目 -->
{{noticeData.noticeContent | shortName(150)}}
</span>
</div>
<div class="line"></div>
<div class="bottom" @click="clickNotice">
<span>我知道了</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
popText: {
type: String,
default: ""
},
btnText: {
type: String,
default: ""
},
noticeData: {
type: Object,
default: () => {
return {
noticeContent: "",
noticeId: '',
noticeTitle: "",
readFlag: 0
}
}
}
},
filters: {
shortContent(value, maxLength = 18) {
if(value && value.length > maxLength) {
return value.substr(0, maxLength) + '...'
}
}
},
methods: {
clickNotice() {
this.$emit("clickNotice");
}
}
};
</script>
<style lang="less" scoped>
.pop-notice-wrapper {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 110;
font-size: 20px;
.mask {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 111;
}
.content {
position: absolute;
left: 50%;
top: 50%;
z-index: 112;
width: 300px;
// height: 185px;
margin: -150px 0 0 -150px;
border-radius: 3px;
text-align: center;
background: #fff;
.top {
padding: 30px;
.title {
display: inline-block;
font-size: 18px;
line-height: 28px;
word-break: break-all;
font-weight: 400;
color: #333333;
}
.body {
text-align: left;
word-break: break-all;
display: inline-block;
margin: 14px 0;
font-size: 14px;
height: 21px;
line-height: 21px;
font-weight: 400;
color: #676869;
.b {
font-weight: 700;
}
}
}
.line {
width: 300px;
height: 1px;
background: rgba(240, 241, 242, 1);
}
.bottom {
text-align: center;
font-size: 17px;
height: 50px;
line-height: 50px;
font-weight: 400;
span {
font-size: 17px;
color: #449284;
}
}
}
}
</style>
<template>
<div class="dialog-mask-container" v-if="showGoUpdate">
<div class="dialog-mask"></div>
<div class="dialog-container">
<div class="dialog-content">更新至最新版本才能观看视频哦更新至最新版本才能观看视频哦</div>
<div class="dialog-footer v-hairline-top">
<span @click.stop.prevent="goUpdateHandler(1)">取消</span>
<span class="confirm-btn v-hairline-left" @click.stop.prevent="goUpdateHandler(2)">立即更新</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'update-dialog',
data() {
return {
}
},
props: {
showGoUpdate: {
type: Boolean,
default: false
},
},
methods: {
goUpdateHandler(type) {
this.$emit("goUpdateHandler",type);
}
}
}
</script>
<style lang="less" scoped>
.dialog-mask-container{
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,.5);
z-index: 2020;
}
.dialog-container{
z-index: 2021;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
width: 300px;
font-size: 18px;
-webkit-transition: .3s;
transition: .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{
padding: 30px 22px;
text-align: center;
font-size: 18px;
color: #373839;
}
.dialog-footer{
height: 50px;
display: flex;
align-items: center;
&.v-hairline-top::after{
border-top-width: 1px;
}
span{
display: inline-block;
width: 50%;
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;
}
}
}
}
[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(.5);
transform: scale(.5);
border: 0 solid #F0F1F2;
}
}
}
</style>
<template>
<div class="basic-container">
<div class="basic-title">基本信息</div>
<!-- <div v-if="projectNo" class="content">
<span>项目编号</span>
<span>{{projectNo}}</span>
</div> -->
<!-- <div class="pro-name">
<span class="title">项目名称</span>
<span class="name">{{projectName}}</span>
</div>
<div class="content">
<span>学习范围</span>
<span>{{scope}}</span>
</div> -->
<div class="content">
<span>起止时间</span>
<span>{{startDate | formatTime('{y}.{m}.{d}')}}{{endDate | formatTime('{y}.{m}.{d}')}}</span>
</div>
<div class="content">
<span>主办单位</span>
<span>{{organName}}</span>
</div>
</div>
</template>
<script>
export default {
props: {
projectNo: {
type: String,
default: "GWKX-20180326-42843"
},
credit: {
type: String,
default: ""
},
level: {
type: String,
default: ""
},
scope: {
type: String,
default: ""
},
startDate: {
type: Number,
default: ""
},
endDate: {
type: Number,
default: ""
},
organName: {
type: String,
default: ""
},
remind: {
type: String,
default: ""
},
projectCredit: {
type: String,
default: ""
},
projectName: {
type: String,
default: ""
}
}
};
</script>
<style lang="less" scoped>
.basic-container {
padding-bottom: 20px;
margin: 30px 15px 0px;
// border-bottom: 1px solid #e7e8e9;
.basic-title {
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.pro-name {
display: flex;
flex-direction: row;
margin-top: 16px;
font-size: 14px;
span {
display: flex;
font-size: 14px;
align-items: center;
line-height: 22px;
align-content: flex-start;
text-align: justify;
&.title {
width: 84px;
color: #979899;
}
&.name {
flex: 1;
color: #676869;
}
}
}
.content {
margin-top: 16px;
height: 16px;
line-height: 0px;
span {
display: inline-block;
font-size: 14px;
.split {
display: inline-block;
position: relative;
top: 2px;
left: 0;
width: 1px;
height: 13px;
margin: 0 2px;
background: #676869;
}
}
span:first-child {
color: #979899;
}
span:last-child {
margin-left: 15px;
color: #676869;
}
}
.remind {
line-height: 14px;
margin-top: 10px;
span {
position: relative;
display: inline-block;
padding: 5px 10px;
margin-left: 78px;
font-size: 14px;
color: #fb5b52;
background: #fceeed;
border-radius: 4px;
}
span:after {
content: "";
position: absolute;
left: 10px;
bottom: 20px;
width: 0;
height: 0;
border-width: 0 8px 8px;
border-style: solid;
border-color: transparent transparent #fceeed;
}
}
}
</style>
<template>
<section class="bind-cart-wrapper">
<article class="left">
<div class="top">
<span class="discount">{{(cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
<span v-show="cardInfo.preferentialPrice" class="price">
<del>原价¥{{cardInfo.costPrice | formatMoney}}</del>
</span>
</div>
<div class="bottom">
<img src="../../images/cme/phrase2/info.png" />
<span>激活或购买后可学习课程</span>
</div>
</article>
<article class="right">
<span class="left" @click="changeClick">去激活</span>
<span @click="gotoBuy" class="right">去购买</span>
</article>
</section>
</template>
<script>
export default {
props: {
cardInfo: {
type: Object,
default: () => {}
}
},
data() {
return {};
},
methods: {
changeClick(){
this.$emit("changeClick")
},
gotoBuy() {
this.$emit("gotoBuy");
}
}
};
</script>
<style lang="less" scoped>
.bind-cart-wrapper {
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
display: flex;
flex-direction: row;
height: 60px;
line-height: 1;
justify-content: space-between;
padding: 10px 15px;
font-size: 14px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.left {
display: flex;
flex-direction: column;
height: 40px;
line-height: 1;
font-size: 12px;
// align-items: ;
.top {
margin-top: 3px;
height: 24px;
.discount {
color: #fb5b52;
font-size: 18px;
font-weight: 700;
margin-right: 4px;
}
.price {
color: #979899;
}
}
.bottom {
display: flex;
flex-direction: row;
img {
width: 12px;
height: 12px;
margin-left: 1px;
margin-right: 4px;
}
color: #979899;
}
}
.right {
display: flex;
flex-direction: row;
span {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 80px;
font-size: 14px;
font-weight: 400;
text-align: center;
color: #7f7f7f;
border: 1px solid #d2b573;
&.left {
border-radius: 20px 0px 0px 20px;
border-right-style: none;
// color: #ff7a4b;
}
&.right {
// background: linear-gradient(
// 137deg,
// rgba(255, 166, 95, 1) 0%,
// rgba(255, 122, 75, 1) 100%
// );
border-radius: 0px 20px 20px 0px;
// color: #fff;
}
}
}
}
</style>
\ No newline at end of file
<template>
<section class="bind-cart-wrapper">
<article class="left">
<div class="top">
<!-- <span class="discount">{{cardInfo.costPrice | formatMoney}}</span> -->
<span class="discount">{{(cardInfo.couponPrice || cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
<span v-show="cardInfo.couponPrice || cardInfo.preferentialPrice" class="price">
<del>原价¥{{cardInfo.costPrice | formatMoney}}</del>
</span>
</div>
<div class="bottom">
<img src="../../images/cme/phrase2/info.png" />
<span>激活或购买后可学习课程</span>
</div>
</article>
<article class="right">
<span class="left" @click="download">APP购买更优惠</span>
</article>
</section>
</template>
<script>
export default {
props: {
cardInfo: {
type: Object,
default: () => {}
}
},
data() {
return {};
},
methods: {
download() {
this.$sendBuriedData({
component_tag: `882#88217`
});
setTimeout(() => {
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
}, 100);
},
}
};
</script>
<style lang="less" scoped>
.bind-cart-wrapper {
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
display: flex;
flex-direction: row;
height: 60px;
line-height: 1;
justify-content: space-between;
padding: 10px 15px;
font-size: 14px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.left {
display: flex;
flex-direction: column;
height: 40px;
line-height: 1;
font-size: 12px;
// align-items: ;
.top {
margin-top: 3px;
height: 24px;
.discount {
color: #fb5b52;
font-size: 18px;
font-weight: 700;
margin-right: 4px;
}
.price {
color: #979899;
}
}
.bottom {
display: flex;
flex-direction: row;
img {
width: 12px;
height: 12px;
margin-left: 1px;
margin-right: 4px;
}
& > span {
font-size: 12px;
color: #979899;
}
}
}
.right {
display: flex;
flex-direction: row;
span {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 138px;
font-size: 14px;
font-weight: 700;
text-align: center;
&.left {
// border: 1px solid rgba(255, 122, 75, 1);
// border-right-style: none;
color: #FFFFFF;
background:linear-gradient(137deg,rgba(255,166,95,1) 0%,rgba(255,122,75,1) 100%);
border-radius: 20px;
}
}
}
}
</style>
<template>
<section class="bind-cart-wrapper">
<article class="left">
<div class="top">
<span class="discount">{{(cardInfo.couponPrice || cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span>
<span v-show="cardInfo.couponPrice || cardInfo.preferentialPrice" class="price">
<del>原价¥{{cardInfo.costPrice | formatMoney}}</del>
</span>
</div>
<div class="bottom">
<img src="../../images/cme/phrase2/info.png" />
<span>{{desc}}</span>
</div>
</article>
<article class="right">
<span class="left" @click="changeClick">去激活</span>
<span @click="gotoBuy" class="right">去购买</span>
</article>
</section>
</template>
<script>
export default {
props: {
cardInfo: {
type: Object,
default: () => {}
},
desc: {
type: String,
default: "激活或购买后可学习课程"
}
},
data() {
return {};
},
methods: {
changeClick(){
this.$sendBuriedData({
component_tag: `882#88224`
});
this.$emit("changeClick")
},
gotoBuy() {
this.$sendBuriedData({
component_tag: `882#88223`
});
this.$emit("gotoBuy");
}
}
};
</script>
<style lang="less" scoped>
.bind-cart-wrapper {
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
width: 100%;
display: flex;
flex-direction: row;
height: 60px;
line-height: 1;
justify-content: space-between;
padding: 10px 15px;
font-size: 14px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.left {
display: flex;
flex-direction: column;
height: 40px;
line-height: 1;
font-size: 12px;
// align-items: ;
.top {
margin-top: 3px;
height: 24px;
.discount {
color: #fb5b52;
font-size: 18px;
font-weight: 700;
margin-right: 4px;
}
.price {
color: #979899;
}
}
.bottom {
display: flex;
flex-direction: row;
img {
width: 12px;
height: 12px;
margin-left: 1px;
margin-right: 4px;
}
& > span {
font-size: 12px;
color: #979899;
}
}
}
.right {
display: flex;
flex-direction: row;
span {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 80px;
font-size: 14px;
font-weight: 700;
text-align: center;
&.left {
border-radius: 20px 0px 0px 20px;
border: 1px solid rgba(255, 122, 75, 1);
border-right-style: none;
color: #ff7a4b;
}
&.right {
background: linear-gradient(
137deg,
rgba(255, 166, 95, 1) 0%,
rgba(255, 122, 75, 1) 100%
);
border-radius: 0px 20px 20px 0px;
color: #fff;
}
}
}
}
</style>
<template>
<section @click="jumpToCardList" class="card-banner-wrapper">
<article class="left">
<img :class="{'is-android': isAndroid}" src="../../images/cme/phrase2/what.png" alt />
<span>学习课程必须使用学习卡哦~</span>
</article>
<span class="right">购买学习卡</span>
</section>
</template>
<script>
import { getHactiveUrl } from "@/utils/index";
import { mapGetters } from "vuex";
import { Toast } from 'vant';
export default {
data() {
return {
isAndroid: window.__isAndroid,
}
},
props: {
hasLogin: {
type: Boolean | Number,
default: false
}
},
computed: {
...mapGetters(["userInfo"])
},
methods: {
// 跳转到学习卡列表页面
jumpToCardList() {
// 如果没有登录,则要去登录页面
// 打开页面埋点
this.$sendBuriedData({
component_tag: "886#8865"
});
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
console.log('appVersionNum', appVersionNum);
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
// if (!this.hasLogin) {
// rocNative.gotoLogin();
// return;
// }
if (window.__isWeb) {
console.log("in jumpToCardList");
return;
} else {
let pageUrl = getHactiveUrl("/message_push/#/study-card?origin=1");
let paramList = [
{
key: "pageUrl",
value: pageUrl,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
}
};
</script>
<style lang="less" scoped>
.card-banner-wrapper {
width: 100%;
height: 40px;
display: flex;
flex-direction: row;
padding: 0 15px;
justify-content: space-between;
align-items: center;
background: #fefaf5;
.left {
display: flex;
height: 40px;
flex-direction: row;
align-items: center;
img {
width: 13px;
height: 13px;
margin-right: 4px;
&.is-android {
width: 12px;
height: 13px;
margin-bottom: 2px;
}
}
span {
font-size: 13px;
color: #e6a23c;
}
}
.right {
height: 25px;
line-height: 25px;
font-size: 12px;
padding: 0 10px;
background: rgba(230, 162, 60, 1);
border-radius: 25px;
border: 1px solid rgba(230, 162, 60, 1);
color: #ffffff;
}
}
</style>
<template>
<van-popup
v-model="isShow"
@click-overlay="cancle"
position="bottom"
>
<section class="bind-cart-wrapper">
<article class="title">
<span>激活详情</span>
<img @click="cancle" src="../../images/cme/close.png" />
</article>
<article class="tip">
<div class="left">
<div class="img-wrapper"><img :class="{'android': isAndroid}" src="../../images/cme/phrase2/info.png"/></div>
<span>激活码用于学习课程,您可以从订单详情或您的实体卡查看激活码。激活码一旦使用,不可退回。</span>
</div>
</article>
<section class="input-wrapper">
<div class="code">
<van-field
maxlength="26"
v-model="activationCode"
label="激活码"
placeholder="请输入激活码"
@click.native="onInputClick"
/>
<!-- <span>激活码</span>
<input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> -->
<div v-show="!isAndroid" class="cover"></div>
</div>
<span class="error">{{errorMsg}}</span>
<img v-show="!!activationCode" @click="clear" src="../../images/cme/phrase2/close.png" />
</section>
<article class="bottom">
<van-button @click="confirm" size="large" round color="#449284">确认激活</van-button>
</article>
</section>
</van-popup>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: true
},
changeErrorMsg: {
type: String,
default: ''
}
},
data() {
return {
isAndroid: __isAndroid,
activationCode: '',
errorMsg: ''
};
},
//
watch: {
activationCode(val) {
if(!val) {
this.errorMsg = '请输入激活码';
} else {
this.errorMsg = '';
}
this.$nextTick(() => {
this.activationCode = val.replace(/\s/g,'').replace(/.....(?!$)/g,'$& ');
});
},
changeErrorMsg(val) {
if(val) {
this.errorMsg = val;
}
},
isShow(val) {
this.activationCode = '';
this.errorMsg = '';
}
},
methods: {
cancle() {
this.$emit("cancle");
},
confirm() {
this.$sendBuriedData({
// component_tag: `882#88207`
component_tag: `882#88225`
});
if(!this.activationCode) {
this.errorMsg = '请输入激活码';
return;
};
if(this.activationCode.length != 23) {
this.errorMsg = '请输入正确的激活码';
return;
}
let aCode = JSON.parse(JSON.stringify(this.activationCode));
aCode = aCode.replace(/\s/g,'');
this.$emit("confirm", aCode);
},
clear() {
this.activationCode = ''
},
onInputClick() {
this.$sendBuriedData({
component_tag: `882#88208`
});
}
}
};
</script>
<style lang="less" scoped>
.bind-cart-wrapper {
width: 100%;
display: flex;
line-height: 1;
padding: 10px 15px;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 1);
// box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.title {
display: flex;
flex-direction: row;
font-size: 18px;
font-weight: 700;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 20px;
img {
position: relative;
top: 0;
right: -120px;
width: 12px;
height: 12px;
}
}
.tip {
display: flex;
margin-top: 40px;
.left {
display: flex;
line-height: 1.2;
font-size: 12px;
.img-wrapper {
width: 20px;
// margin-right: 4px;
img {
position: relative;
top: 1px;
width: 12px;
height: 12px;
}
img.android {
top: 1.5px;
width: 11.5px;
}
}
span {
display: inline-block;
margin-left: 4px;
}
color: #979899;
}
}
.input-wrapper {
position: relative;
.code {
position: relative;
display: flex;
flex-direction: column;
padding: 20px 0;
padding-top: 0;
.cover {
width: 286px;
position: absolute;
top: 21.5px;
z-index: 1000;
border-top: 4px solid #fff;
margin-left: 57px;
margin-right: 1px;
border-radius: 4px;
}
}
.error {
position: absolute;
top: 66px;
left: 56px;
display: inline-block;
color: red;
font-size: 12px;
}
img {
position: absolute;
top: 33px;
right: 12px;
width: 15px;
height: 15px;
}
}
.bottom {
display: flex;
margin-bottom: 40px;
}
}
</style>
<template>
<div class="common-bottom-info-wrapper">
<div class="common-bottom">
<span>若有问题可联系客服:</span>
<img src="../../images/cme/icon-phone.png" />
<!-- <span>400-920-8877</span> -->
<a href="tel:4009208877"><span>400-920-8877</span></a>
</div>
</div>
</template>
<style lang="less" scoped>
.common-bottom-info-wrapper {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
margin: 20px auto;
.common-bottom {
display: flex;
display: 100%;
flex-direction: row;
font-size: 14px;
text-align: center;
justify-content: center;
align-items: center;
span {
font-size: 14px;
font-weight: 400;
height: 14px;
line-height: 14px;
color: #676869;
}
a span {
color: #449284;
}
// span:nth-child(1) {
// color: #449284;
// }
img {
margin-right: 4px;
width: 10px;
height: 12px;
}
}
}
</style>
<template>
<div class="common-button-wrapper button-default" :class="type" @click="btnClick">
<span>{{btnText}}</span>
</div>
</template>
<script>
export default {
props: {
btnText: {
type: String,
default: '确定'
},
type: {
type: String,
default: 'primary'
}
},
data() {
return {
}
},
methods: {
btnClick() {
if(this.type == 'disabled') return;
this.$emit('btnClick');
}
},
}
</script>
<style lang="less" scoped>
.common-button-wrapper {
font-size: 14px;
margin: 20px 15px;
text-align: center;
&.button-default {
span {
display: block;
height: 50px;
line-height: 50px;
width: 100%;
border-radius: 25px;
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
background: #449284;
}
}
&.primary {
span {
color: #FFFFFF;
background: #449284;
}
}
&.disabled {
span {
color: rgba(255, 255, 255, 0.95);
background: rgba(68, 146, 132, 0.4);;
}
}
}
</style>
<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.stop.prevent="handlerAction(1)">{{cancleBtnText}}</span>
<span v-show="!isSingle" class="confirm-btn v-hairline-left" @click.stop.prevent="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: -16px 30px 30px;
// 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;
}
}
}
</style>
<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: -16px 30px 30px;
// 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>
<template>
<div class="exjumper-button-wrapper button-default" :class="type" @click="btnClick">
<span>{{btnText}}</span>
</div>
</template>
<script>
export default {
props: {
btnText: {
type: String,
default: '确定'
},
type: {
type: String,
default: 'primary'
}
},
data() {
return {
}
},
methods: {
btnClick() {
if(this.type == 'disabled') return;
this.$emit('btnClick');
}
},
}
</script>
<style lang="less" scoped>
.exjumper-button-wrapper {
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
font-size: 14px;
padding: 20px 15px;
background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
text-align: center;
&.button-default {
span {
display: block;
height: 50px;
line-height: 50px;
width: 100%;
border-radius: 25px;
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
background: #449284;
}
}
&.primary {
span {
color: #FFFFFF;
background: #449284;
}
}
&.disabled {
span {
color: rgba(255, 255, 255, 0.95);
background: #C7C8C9;
}
}
}
</style>
<template>
<div class="exjumper-dialog-wrraper" v-if="isShowDialog">
<div class="dialog-mask"></div>
<div class="dialog-container">
<div class="title" v-html="title"></div>
<!-- <div class="dialog-content">{{content}}</div> -->
<div class="sub-wrapper">
<div v-show="needSubContent" class="dialog-sub-content">1.跳转后点击“购买学习”,注册登录“中华医学教育在线”平台(首次登录需用手机号注册)</div>
<img class="dialog-img-1" src="https://file.yunqueyi.com/h5/images/tinified/II-tips-1.png" alt="">
<div v-show="needSubContent" class="dialog-sub-content">2.支付方式选择 “学习卡支付”,输入您的学习卡激活码,即可参加考试、申请学分。</div>
<img class="dialog-img-2" src="https://file.yunqueyi.com/h5/images/tinified/II-tips-2.png" alt="">
</div>
<div class="dialog-footer v-hairline-top">
<span :class="{'single-btn': isSingle}" @click.stop.prevent="handlerAction(1)">{{cancleBtnText}}</span>
<span v-show="!isSingle" class="confirm-btn v-hairline-left" @click.stop.prevent="handlerAction(2)">{{confirmBtnText}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: "common-dialog",
data() {
return {
};
},
props: {
title: {
type: String,
default: '即将打开<br/> “中华医学教育在线”平台'
},
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>
.exjumper-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;
.title {
margin: 30px 0 20px;
text-align: center;
font-size: 18px;
font-weight: 700;
color: #373839;
}
.dialog-content {
// margin: 30px 22px;
margin: 20px 16px 30px;
text-align: left;
font-size: 14px;
font-weight: 400;
color: #373839;
}
.sub-wrapper {
margin-right: 5px;
max-height: 300px;
overflow: auto;
.dialog-sub-content {
margin: 0 8px 20px 16px;
text-align: left;
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #979899;
}
.dialog-img-1 {
width: 268px;
height: 165px;
margin-left: 16px;
margin-bottom: 20px;
}
.dialog-img-2 {
width: 268px;
height: 145px;
margin-left: 16px;
margin-bottom: 20px;
}
&::-webkit-scrollbar-track-piece {
background-color: rgba(0, 0, 0, 0);
border-left: 1px solid rgba(0, 0, 0, 0);
}
&::-webkit-scrollbar {
width: 5px;
height: 13px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
&::-webkit-scrollbar-thumb {
background-color: #C7C8C9;
background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 28px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: #C7C8C9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
}
.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;
}
}
}
</style>
<template>
<div class="item-intro-container">
<div class="basic-title">项目介绍</div>
<div class="content">
<div class="text">{{textContent}}</div>
<div v-if="textContent.length > 70" class="desc" @click="allText">
<span>{{btnText}}</span>
<img v-if="!allTextFlag" src="../../images/down.png"/>
<img v-if="allTextFlag" src="../../images/up.png"/>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
textContent: {
type: String,
default: ''
}
},
data() {
return {
btnText: '详情',
allTextFlag: false
}
},
methods: {
allText() {
let _this = this;
if(!_this.allTextFlag) {
_this.btnText = '收起';
_this.allTextFlag = true;
}else {
_this.btnText = '详情';
_this.allTextFlag = false;
}
_this.$emit("itemIntroText", {allTextFlag: _this.allTextFlag});
}
}
}
</script>
<style lang="less" scoped>
.item-intro-container {
padding-bottom: 20px;
margin: 30px 15px 0px;
border-bottom: 1px solid #E7E8E9;
.basic-title {
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.content {
position: relative;
margin-top: 16px;
.text {
font-size: 14px;
line-height: 21px;
color: #676869;
}
.desc {
// position: absolute;
// right: 0;
// bottom: 1px;
text-align: right;
background: #fff;
line-height: 14px;
z-index: 99;
span {
font-size: 14px;
line-height: 14px;
color: #449284;
}
img {
width: 12px;
}
}
}
}
</style>
<template>
<div class="item-leader-container">
<div class="basic-title">项目负责人</div>
<div class="leader-info">
<img :src="projectLeader.appImageUrl" />
<div class="leader-text">
<div class="leader-con">
<span>{{projectLeader.name}}</span>
<span class="leader-title">{{projectLeader.title}}</span>
</div>
<div class="address">{{projectLeader.hospital}}</div>
</div>
</div>
<div class="content">
<div class="text" v-html="leaderText"></div>
<div v-if="leaderText.length > 70" class="desc" @click="allText">
<span>{{btnText}}</span>
<img v-if="!allTextFlag" src="../../images/down.png" />
<img v-if="allTextFlag" src="../../images/up.png" />
</div>
</div>
</div>
</template>
<script>
export default {
props: {
projectLeader: {
type: Object,
default: () => {}
},
leaderText: {
type: String,
default: ""
}
},
data() {
return {
btnText: "详情",
allTextFlag: false
};
},
methods: {
allText() {
if (!this.allTextFlag) {
this.btnText = "收起";
this.allTextFlag = true;
} else {
this.btnText = "详情";
this.allTextFlag = false;
}
this.$emit("changeLeaderText",{allTextFlag: this.allTextFlag});
}
}
};
</script>
<style lang="less" scoped>
.item-leader-container {
padding-bottom: 20px;
margin: 30px 15px 0px;
border-bottom: 1px solid #e7e8e9;
.basic-title {
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: 16px;
img {
display: inline-block;
width: 44px;
height: 44px;
border-radius: 50%;
}
.leader-text {
flex: 1;
width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: 14px;
display: flex;
flex-direction: row;
white-space: nowrap;
span {
font-size: 16px;
color: #676869;
}
span:first-child {
font-size: 16px;
color: #373839;
font-weight: 700;
}
.leader-title {
width: 220px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
line-height: 16px;
margin-left: 10px;
}
}
.address {
margin-top: 5px;
font-size: 13px;
color: #979899;
width: 240px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
}
}
.content {
position: relative;
margin-top: 16px;
.text {
font-size: 14px;
line-height: 21px;
color: #676869;
}
.desc {
// position: absolute;
// right: 0;
// bottom: 1px;
text-align: right;
background: #fff;
line-height: 14px;
z-index: 99;
span {
font-size: 14px;
color: #449284;
}
img {
width: 12px;
}
}
}
}
</style>
<template>
<div class="learn-know-container">
<div class="basic-title">学习须知</div>
<div class="content">
<span v-html="mustKnow"></span>
</div>
</div>
</template>
<script>
export default {
props: {
mustKnow: {
type: String,
default: ''
}
}
}
</script>
<style lang="less" scoped>
.learn-know-container {
margin: 30px 15px 20px;
.basic-title {
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.content {
margin-top: 16px;
line-height: 21px;
span {
display: inline-block;
text-align: justify;
font-size: 14px;
color: #676869;
}
}
}
</style>
<template>
<div class="teacter-intro-container">
<div class="basic-title">讲师介绍</div>
<div class="leader-info" v-for="(item,index) in doctorList" :key="index">
<img :src="item.appImageUrl"/>
<div class="leader-text">
<div class="leader-con">
<span>{{item.name}}</span>
<span class="leader-title">{{item.title}}</span>
</div>
<div class="address">{{item.hospital}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
doctorList: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
.teacter-intro-container {
margin: 30px 15px 0px;
.basic-title {
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: 16px;
padding-bottom: 16px;
img {
display: inline-block;
width: 44px;
height: 44px;
border-radius: 50%;
}
.leader-text {
flex: 1;
width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: 14px;
display: flex;
flex-direction: row;
white-space: nowrap;
span {
font-size: 16px;
color: #676869;
}
span:first-child {
font-size: 16px;
color: #373839;
font-weight: 700;
line-height: 1.1;
}
.leader-title {
width: 220px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
line-height: 16px;
margin-left: 10px;
}
}
.address {
margin-top: 5px;
font-size: 13px;
color: #979899;
width: 240px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
}
}
}
</style>
<template>
<div class="teacter-intro-container">
<div class="basic-title">讲师介绍</div>
<div class="leader-info" v-for="(item,index) in current" :key="index">
<img :src="item.appImageUrl" />
<div class="leader-text">
<div class="leader-con">
<span>{{item.name}}</span>
<span class="leader-title">{{item.title}}</span>
</div>
<div class="address">{{item.hospital}}</div>
</div>
</div>
<div v-show="doctorList.length > 1" class="toggle-btn" @click="toggle">
<span class="btn">{{ isUp ? '展开更多' : '向上收起'}}</span>
<img v-if="isUp" src="../../images/cme/arrow-grey-down.png" />
<img v-if="!isUp" src="../../images/cme/arrow-grey-up.png" />
</div>
</div>
</template>
<script>
export default {
props: {
doctorList: {
type: Array,
default: () => []
}
},
data() {
return {
isUp: true,
one: [],
all: [],
current: []
};
},
created() {},
mounted() {
this.one = this.doctorList.slice(0, 1);
this.current = this.one;
this.all = this.doctorList.slice(0);
},
methods: {
toggle() {
this.isUp = !this.isUp;
if (this.isUp) {
this.current = this.one;
this.$sendBuriedData({
component_tag: `882#88222`
});
} else {
this.$sendBuriedData({
component_tag: `882#88221`
});
this.current = this.all;
}
}
}
};
</script>
<style lang="less" scoped>
.teacter-intro-container {
margin: 30px 15px 0px;
.basic-title {
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: 16px;
padding-bottom: 16px;
img {
display: inline-block;
width: 44px;
height: 44px;
border-radius: 50%;
}
.leader-text {
flex: 1;
width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: 14px;
display: flex;
flex-direction: row;
white-space: nowrap;
span {
font-size: 16px;
color: #676869;
}
span:first-child {
font-size: 16px;
color: #373839;
font-weight: 700;
line-height: 1.1;
}
.leader-title {
width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 16px;
margin-left: 10px;
}
}
.address {
margin-top: 5px;
font-size: 13px;
color: #979899;
width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.toggle-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 20px;
& > span {
font-size: 14px;
color: #979899;
font-weight: 400;
}
& > img {
width: 15px;
height: 15px;
}
}
}
</style>
\ No newline at end of file
<template>
<div class="common-adert-wrapper">
<img
:class="{'margin-top-20': needPadTop}"
v-if="showInfo.imageUrl"
@click="jumpPage"
:src="showInfo.imageUrl"
alt
/>
</div>
</template>
<script>
import { EMLINK } from "constants";
export default {
name: "common-title",
data() {
return {
isWeb: window.__isWeb,
showInfo: {
imageUrl: "",
jumpUrl: ""
}
};
},
props: {
advertInfoList: {
type: Array,
default: () => []
},
position: {
type: String | Number,
default: 0
},
needPadTop: {
type: Boolean,
default: false
}
},
watch: {
advertInfoList: {
handler(list) {
list.forEach(element => {
if (element.position == this.position) {
this.showInfo = element;
}
});
},
deep: true
}
},
created() {},
mounted() {},
computed: {},
methods: {
// 广告位跳转
jumpPage() {
// if (this.isWeb) {
// window.location.href = this.showInfo.jumpUrl;
// return;
// }
let paramList = [
{
key: "pageUrl",
value: this.showInfo.jumpUrl,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
};
</script>
<style lang="less" scoped>
.common-adert-wrapper {
img {
width: 100%;
// padding: 10px 0;
// height: 60px;
}
.margin-top-20 {
margin-top: 20px;
}
}
</style>
<template>
<div class="">
<span class="comp-title"
:style="{
'color': bgColor,
'font-weight': fontWeight,
'font-size': cTextFontSize,
'padding-top': cPaddingTop,
'padding-bottom': cPaddingBottom
}"
>{{title}}</span>
</div>
</template>
<script>
export default {
name: 'common-title',
data() {
return {
fontSize: 37.5
};
},
props: {
title: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#999"
},
fontWeight: {
type: Number,
default: 600
},
textFontSize: {
type: Number,
default: 16
},
paddingTop: {
type: Number,
default: 15
},
paddingBottom: {
type: Number,
default: 15
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {}
};
</script>
<style lang="less" scoped>
.comp-title {
display: flex;
padding-left: 15px;
}
</style>
<template>
<CommonTcPlayer style="flex" :options="videoOptions">
</CommonTcPlayer>
</template>
<script>
// import TcPlayer from 'vue-tcplayer'
import CommonTcPlayer from "@/components/common/common-tcplayer";
export default {
name: 'common-banner-video',
data() {
return {
isShow: false,
// videoOptions: {
// "mp4": 'https://pica-pro.oss-cn-shanghai.aliyuncs.com/2019/03/05/movie.mp4',
// // "mp4": this.cVideoUrl,
// // "mp4": "http://1258717429.vod2.myqcloud.com/24a74910vodcq1258717429/7c37c18f5285890786204547811/9BFIyaoXYAcA.mp4",
// // "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8",
// // "flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个flv的播放地址,用于PC平台的播放 请替换成实际可用的播放地址
// "autoplay" : true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
// "coverpic" : "http://www.test.com/myimage.jpg",
// "width" : '375',//视频的显示宽度,请尽量使用视频分辨率宽度
// "height" : '210'//视频的显示高度,请尽量使用视频分辨率高度
// }
}
},
props: {
videoUrl: {
type: String,
default: ''
},
videoOptions: {
type: Object,
default: () => {}
}
},
computed: {
cVideoUrl() {
return this.videoUrl
},
},
watch: {
videoOptions: {
handler: function(val,oldval){
this.isShow = true
},
deep:true//对象内部的属性监听,也叫深度监听
},
},
components: {
CommonTcPlayer
},
props: {
title: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#999"
},
fontWeight: {
type: Number,
default: 600
},
textFontSize: {
type: Number,
default: 16
},
paddingTop: {
type: Number,
default: 15
},
paddingBottom: {
type: Number,
default: 15
}
},
created() {},
mounted() {
},
computed: {
},
methods: {}
};
</script>
<style lang="less" scoped>
.comp-title {
display: flex;
padding-left: 15px;
}
</style>
<template>
<div class="desc-container">
<div class="desc-title">
<span>{{projectName}}</span>
</div>
<div class="desc-detail">
<span class="desc_text" v-if="studyNum && subject">{{newStudyNum}}人已学/{{subject}}</span>
</div>
</div>
</template>
<script>
import CommonSpliteLine from "@/components/common/common-splite-line";
export default {
name: "common-description",
data() {
return {
};
},
props: {
projectName: {
type: String,
default: ""
},
studyNum: {
type: Number,
default: 0
},
subject: {
type: String,
default: ""
}
},
computed: {
newStudyNum: function() {
if(this.studyNum > 1000 && this.studyNum < 10000) {
return ((Math.round((this.studyNum / 1000) * 10) / 10) + 'K');
}else if(this.studyNum > 10000) {
return ((Math.round((this.studyNum / 10000) * 10) / 10) + 'W');
}else {
return this.studyNum;
}
}
},
created() {},
mounted() {
},
methods: {
}
};
</script>
<style lang="less" scoped>
.desc-container {
padding: 20px 15px;
.desc-title {
display: flex;
padding-bottom: 0px;
line-height: 22px;
font-weight: 700;
span {
font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: 18px;
font-weight: 700;
color: #333333;
}
}
.desc-detail {
display: flex;
position: relative;
word-break: normal;
// margin-bottom: 40px;
// height: 60px;
.desc_text {
padding-top: 6px;
font-size: 13px;
color: #676869;
line-height: 25px;
letter-spacing: 1px;
word-wrap: break-word;
word-break: break-all;
// word-break: normal;
text-align: justify;
flex-direction: row;
flex-wrap: wrap;
}
}
}
</style>
<template>
<div class="loader loader--style3" title="2">
<div class="loader-mask"></div>
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<path fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 25 25"
to="360 25 25"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
</div>
</template>
<style lang="less" scoped>
.loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.5);
}
svg {
position: fixed;
top: 280px;
left: 166px;
z-index: 9999;
}
}
svg path, svg rect{
// fill: #fff;
fill: #449284;
}
</style>
<template>
<section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<div
class="nav-part"
:style="'background:' + bgColor + ';'
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
>
<div class="nav-title">
<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="">
</span>
<span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
<span v-if="isShowShare" class="nav-share" @click="goShare">
<img v-show="isBlack"
src="../../images/cme/share-icon-black.png"
>
<img v-show="!isBlack" src="../../images/cme/share-icon-white.png"/>
</span>
</div>
</div>
</section>
</template>
<script>
import { getWebPageUrl } from "@/utils/index";
import { mapGetters } from 'vuex';
export default {
name: "common-navbar",
data() {
return {
// isWeb: window.__isWeb,
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
shareUrl: ''
};
},
props: {
isWeb: {
type: Boolean,
default: window.__isWeb
},
bgColor: {
type: String,
default: ""
},
title: {
type: String,
default: "暂无数据"
},
//是否fix定位
isFixNavbar: {
type: Boolean,
default: false
},
burialPoint: {
default: "",
type: String
},
backMethod: {
type: String,
default: "native" // inner native
},
isShowShare: {
type: Boolean,
default: false
},
borderStyle: {
type: String,
default: "1px solid #e7e7e7"
},
isBlack: {
type: Boolean,
default: true
},
shareTitle: {
type: String,
default: ""
},
shareTitleInfo: {
type: String,
default: ""
},
projectId: {
type: String | Number,
default: ""
},
limitTimes: {
type: String | Number,
default: 0
}
},
computed: {
...mapGetters(["userInfo"]),
navHeight() {
if (this.isFixNavbar) {
return 0;
// return (this.contentHeight) / this.fontSize + 'rem';
} else {
return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem";
}
},
paddingTop() {
// return this.isWeb ? 0 : this.navbarHeight / this.fontSize + 'rem'
return this.navbarHeight / this.fontSize + "rem";
}
},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
},
methods: {
//返回
goBack() {
rocNative.goBack();
},
// 生成分享的url
goShare() {
this.$sendBuriedData({
component_tag: `882#88209`
});
let _this = this;
let videoUrl = this.$route.query.videoUrl || '';
let info = "";
if(videoUrl) {
info = JSON.stringify({
projectId: this.projectId,
videoUrl: videoUrl,
limitTimes: this.limitTimes || 0
})
} else {
info = JSON.stringify({
projectId: this.projectId,
})
}
let param = {
channel: 1, // 分享渠道 1:APP
info: info,
type: 3, // 业务类型 1:教培项目 2:继教项目 3:职称考项目
token: _this.userInfo.userToken,
setEntry: true
};
_this.NEW_POST("portal/shareParam/save", param).then(res => {
if (res.code == "000000") {
let url = getWebPageUrl(`profexam/#/sharecoop?uuid=${res.data}`);
_this.shareUrl = url;
_this.goShareAction();
}
}).catch( e => {
console.error(e);;
});
},
//分享
goShareAction() {
// let url = location.href,
let _this = this;
rocNative.shareWechat({
type: 6,
shareId: 0,
shareUrl: _this.shareUrl,
title1: _this.shareTitle,
title2: _this.shareTitleInfo,
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
});
}
}
};
</script>
<style lang="less" scoped>
.back {
position: absolute;
left: px;
top: 15px;
display: inline-block;
width: 50px;
height: 50px;
img {
padding: 10px;
width: 25px;
height: 25px;
}
}
.nav-top {
// height: 65px;
background: #fff;
color: #333;
position: relative;
z-index: 109;
.nav-back {
display: inline-block;
position: absolute;
left: 0px;
top: 0;
height: 25px;
width: 55px;
padding-left: 15px;
padding-right: 15px;
}
img {
display: block;
width: 100%;
height: 100%;
}
.nav-icon {
display: inline-block;
width: 50px;
height: 50px;
svg {
stroke: #000;
fill: #0000ff;
}
}
.nav-share {
position: absolute;
right: 16px;
top: 0;
height: 25px;
width: 25px;
}
.nav-title {
position: relative;
top: 10px;
left: 0;
display: inline-block;
width: 100%;
/* padding:0 33px;*/
height: 36px;
&-title {
height: 18px;
font-size: 18px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
line-height: 26px;
display: inline-block;
max-width: 230px;
height: 36px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.nav-part {
width: 100%;
font-size: 18px;
text-align: center;
padding: 0 0 10px 0;
/* height: 25px;*/
}
}
.nav-part {
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: 25px;*/
}
</style>
<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 + ';'
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
>
<div class="nav-title">
<span class="nav-back" @click="goBack">
<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-show="isShowShare" class="nav-share" @click="goShare">
<img
src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/courses/Group17_hover%403x.png"
>
<!-- <img src="../../images/share-icon.png"/> -->
</span>
</div>
</div>
</section>
</template>
<script>
export default {
name: "common-navbar",
data() {
return {
isWeb: window.__isWeb,
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
};
},
props: {
bgColor: {
type: String,
default: ""
},
title: {
type: String,
default: "暂无数据"
},
isFixNavbar: {
//是否fix定位
type: Boolean,
default: false
},
burialPoint: {
default: "",
type: String
},
backMethod: {
type: String,
default: "native" // inner native
},
isShowShare: {
type: Boolean,
default: false
},
borderStyle: {
type: String,
default: "1px solid #e7e7e7"
}
},
computed: {
// bgColor2() {
// return this.bgColor
// },
// borderStyle() {
// return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
// },
navHeight() {
if (this.isFixNavbar) {
return 0;
// return (this.contentHeight) / this.fontSize + 'rem';
} else {
return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem";
}
},
paddingTop() {
// return this.isWeb ? 0 : this.navbarHeight / this.fontSize + 'rem'
return this.navbarHeight / this.fontSize + "rem";
}
},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
},
methods: {
//返回
goBack() {
// if (this.burialPoint == "activity") {
// this.pageBurialPoin(this.objPoint);
// }
if (this.backMethod === "inner") {
this.$router.back(-1);
} else {
rocNative.goBack();
}
//rocNative.backPreviousPage();
},
//分享
goShare() {
let url = location.href,
_this = this;
rocNative.shareWechat({
// url: url,
// title: '_this.title',
// content: '_this.content',
// shareImageUrl: '_this.shareImageUrl'
type: 6,
shareId: 0,
shareUrl: 'shareUrl',
title1: "this.shareTitle1",
title2: "this.shareTitle2",
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
});
}
}
};
</script>
<style lang="less" scoped>
.back {
position: absolute;
left: 8px;
top: 15px;
display: inline-block;
width: 50px;
height: 50px;
img {
padding: 10px;
width: 25px;
height: 25px;
}
}
.nav-top {
// height: 65px;
background: #fff;
color: #333;
position: relative;
z-index: 109;
.nav-back {
display: inline-block;
position: absolute;
left: 16px;
top: 0;
height: 25px;
width: 25px;
// -ms-transform: translate(180deg);
// -webkit-transform: (180deg);
// transform: rotate(180deg);
}
img {
display: block;
width: 100%;
height: 100%;
}
.nav-icon {
display: inline-block;
width: 50px;
height: 50px;
svg {
stroke: #000;
fill: #0000ff;
}
}
.nav-share {
position: absolute;
right: 16px;
top: 0;
height: 25px;
width: 25px;
}
.nav-title {
position: relative;
top: 10px;
left: 0;
display: inline-block;
width: 100%;
/* padding:0 33px;*/
height: 36px;
&-title {
height: 18px;
font-size: 18px;
font-weight: 500;
color: rgba(51, 51, 51, 1);
line-height: 26px;
}
}
.nav-part {
width: 100%;
font-size: 18px;
text-align: center;
padding: 0 0 10px 0;
/* height: 25px;*/
}
}
.nav-part {
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: 25px;*/
}
</style>
<template>
<section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<div
class="nav-part"
:style="'background:' + bgColor + ';'
+ 'padding-top:' + paddingTop + ';border-bottom:' + borderStyle"
>
<div class="nav-title">
<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="">
</span>
<span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
<span v-if="isShowShare" class="nav-share" @click="goShare">
<img v-show="isBlack"
src="../../images/cme/share-icon-black.png"
>
<img v-show="!isBlack" src="../../images/cme/share-icon-white.png"/>
</span>
</div>
</div>
</section>
</template>
<script>
import { getWebPageUrl } from "@/utils/index";
import { mapGetters } from 'vuex';
export default {
name: "common-navbar",
data() {
return {
// isWeb: window.__isWeb,
navbarHeight: 28,
contentHeight: 35,
fontSize: 37.5,
content: "",
shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
// shareUrl: ''
};
},
props: {
isWeb: {
type: Boolean,
default: window.__isWeb
},
bgColor: {
type: String,
default: ""
},
title: {
type: String,
default: "暂无数据"
},
//是否fix定位
isFixNavbar: {
type: Boolean,
default: false
},
burialPoint: {
default: "",
type: String
},
backMethod: {
type: String,
default: "native" // inner native
},
isShowShare: {
type: Boolean,
default: false
},
borderStyle: {
type: String,
default: "1px solid #e7e7e7"
},
isBlack: {
type: Boolean,
default: true
},
shareTitle: {
type: String,
default: ""
},
shareTitleInfo: {
type: String,
default: ""
},
projectId: {
type: String | Number,
default: ""
},
limitTimes: {
type: String | Number,
default: 0
},
shareUrl: {
type: String | Number,
default: ""
},
isInMergeDetail: {
type: Boolean,
default: true
}
},
computed: {
...mapGetters(["userInfo"]),
navHeight() {
if (this.isFixNavbar) {
return 0;
// return (this.contentHeight) / this.fontSize + 'rem';
} else {
return (this.navbarHeight + this.contentHeight) / this.fontSize + "rem";
}
},
paddingTop() {
// return this.isWeb ? 0 : this.navbarHeight / this.fontSize + 'rem'
return this.navbarHeight / this.fontSize + "rem";
}
},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
},
methods: {
//返回
goBack() {
if(this.isWeb) {
window.history.back();
} else {
rocNative.goBack();
}
},
// 生成分享的url
goShare() {
this.$sendBuriedData({
component_tag: `882#88209`
});
let _this = this;
if(this.isInMergeDetail) {
let videoUrl = this.$route.query.videoUrl || '';
let info = "";
if(videoUrl) {
info = JSON.stringify({
projectId: this.projectId,
videoUrl: videoUrl,
limitTimes: this.limitTimes || 0
})
} else {
info = JSON.stringify({
projectId: this.projectId,
})
}
let param = {
channel: 1, // 分享渠道 1:APP
info: info,
type: 3, // 业务类型 1:教培项目 2:继教项目 3:职称考项目
token: _this.userInfo.userToken,
setEntry: true
};
_this.NEW_POST("portal/shareParam/save", param).then(res => {
if (res.code == "000000") {
let url = getWebPageUrl(`profexam/#/sharecoop?uuid=${res.data}`);
// _this.shareUrl = url;
_this.goShareAction(url);
}
}).catch( e => {
console.error(e);;
});
} else {
_this.goShareAction();
}
},
//分享
goShareAction(shareUrl) {
// let url = location.href,
let _this = this;
rocNative.shareWechat({
type: 6,
shareId: 0,
shareUrl: shareUrl || _this.shareUrl,
title1: _this.shareTitle,
title2: _this.shareTitleInfo,
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
});
}
}
};
</script>
<style lang="less" scoped>
.back {
position: absolute;
left: px;
top: 15px;
display: inline-block;
width: 50px;
height: 50px;
img {
padding: 10px;
width: 25px;
height: 25px;
}
}
.nav-top {
// height: 65px;
background: #fff;
color: #333;
position: relative;
z-index: 109;
.nav-back {
display: inline-block;
position: absolute;
left: 0px;
top: 0;
height: 25px;
width: 55px;
padding-left: 15px;
padding-right: 15px;
}
img {
display: block;
width: 100%;
height: 100%;
}
.nav-icon {
display: inline-block;
width: 50px;
height: 50px;
svg {
stroke: #000;
fill: #0000ff;
}
}
.nav-share {
position: absolute;
right: 16px;
top: 0;
height: 25px;
width: 25px;
}
.nav-title {
position: relative;
top: 10px;
left: 0;
display: inline-block;
width: 100%;
/* padding:0 33px;*/
height: 36px;
&-title {
height: 18px;
font-size: 18px;
font-weight: 700;
color: rgba(51, 51, 51, 1);
line-height: 26px;
display: inline-block;
max-width: 230px;
height: 36px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.nav-part {
width: 100%;
font-size: 18px;
text-align: center;
padding: 0 0 10px 0;
/* height: 25px;*/
}
}
.nav-part {
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid #e7e7e7;
/* height: 25px;*/
}
</style>
<template>
<div class="split-line" :style="{'background-color': bgColor, 'height': lineHeight}"></div>
</template>
<script>
export default {
name: 'common-splite-line',
data() {
return {};
},
props: {
bgColor: {
type: String,
default: '#F8F9FA'
},
lineHeight: {
type: String,
default: '6px'
}
},
created() {},
mounted() {},
computed: {},
methods: {}
};
</script>
<style lang="less" scoped>
.split-line {
display: flex;
}
</style>
<template>
<!-- <div :id="id" class="banner-img" autoplay="autoplay"> -->
<div :id="id" class="banner-img">
</div>
</template>
<script>
// const TcPlayer = window.TcPlayer
import { TcPlayer } from "@/utils/tc-player-2.2.0";
export default {
props: {
id: {
type: String,
default: "tc-player"
},
width: {
type: [Number, String],
default: 375
},
height: {
type: [Number, String],
default: 210
},
listener: {
type: Function,
default() {
return function(msg) {};
}
},
live: {
type: Boolean,
default: false
},
options: {
type: Object
},
pStatus: {
type: Number,
default: 1
}
},
data() {
return {
tcPlayer: null
};
},
mounted() {
this.$nextTick(function(){
let htmlDom = document.getElementsByTagName('html')[0];
let htmlWidth = parseFloat(htmlDom.style.fontSize) * 10
this.init(htmlWidth);
})
},
methods: {
init(htmlWidth) {
const options = {
// width: String(htmlWidth),
// width: String(this.width),
// width: String('100%'),
// height: String(this.height),
live: this.live,
listener: this.listener,
...this.options
};
options.width = htmlWidth
this.tcPlayer = new TcPlayer(this.id, options);
},
reset() {
if (this.tcPlayer) {
this.tcPlayer.destroy();
this.init();
}
},
play() {
if (!this.tcPlayer) return;
return this.tcPlayer.play();
},
pause() {
if (!this.tcPlayer) return;
return this.tcPlayer.pause();
},
togglePlay() {
if (!this.tcPlayer) return;
return this.tcPlayer.togglePlay();
},
mute(muted) {
if (!this.tcPlayer) return;
return this.tcPlayer.mute(muted);
},
volume(val) {
if (!this.tcPlayer) return;
return this.tcPlayer.volume(val);
},
playing() {
if (!this.tcPlayer) return;
return this.tcPlayer.playing();
},
duration() {
if (!this.tcPlayer) return;
return this.tcPlayer.duration();
},
currentTime(time) {
if (!this.tcPlayer) return;
return this.tcPlayer.currentTime(time);
},
fullscreen(enter) {
if (!this.tcPlayer) return;
return this.tcPlayer.fullscreen(enter);
},
buffered() {
if (!this.tcPlayer) return;
return this.tcPlayer.buffered();
},
switchClarity(clarity) {
if (!this.tcPlayer) return;
return this.tcPlayer.switchClarity(clarity);
}
},
destroyed() {
if (this.tcPlayer) {
this.tcPlayer.destroy();
}
}
};
</script>
<style lang="less" scoped>
.banner-img {
// display: inherit;
width: 375px;
height: 210px;
}
</style>
<template>
<!-- <div :id="id" class="banner-img" autoplay="autoplay"> -->
<div :id="id" class="banner-img">
</div>
</template>
<script>
// const TcPlayer = window.TcPlayer
import { TcPlayer } from "@/utils/tc-player-2.2.0";
export default {
props: {
id: {
type: String,
default: "tc-player"
},
width: {
type: [Number, String],
default: 375
},
height: {
type: [Number, String],
default: 210
},
listener: {
type: Function,
default() {
return function(msg) {};
}
},
live: {
type: Boolean,
default: false
},
options: {
type: Object
},
pStatus: {
type: Number,
default: 1
}
},
data() {
return {
tcPlayer: null
};
},
mounted() {
this.$nextTick(function(){
let htmlDom = document.getElementsByTagName('html')[0];
let htmlWidth = parseFloat(htmlDom.style.fontSize) * 10
this.init(htmlWidth);
})
},
methods: {
init(htmlWidth) {
const options = {
// width: String(htmlWidth),
// width: String(this.width),
// width: String('100%'),
// height: String(this.height),
live: this.live,
listener: this.listener,
...this.options
};
options.width = htmlWidth;
const tcPlayer = new TcPlayer(this.id, options);
tcPlayer.video.on('timeupdate', (event) => {
let ct = tcPlayer.currentTime();
// console.log('视频播放时长S => ', ct);
if (options.trySeeTime && ct >= options.trySeeTime) {
tcPlayer.currentTime(0);
tcPlayer.pause();
this.$emit('sk-tip');
}
});
this.tcPlayer = tcPlayer;
},
reset() {
if (this.tcPlayer) {
this.tcPlayer.destroy();
this.init();
}
},
play() {
if (!this.tcPlayer) return;
return this.tcPlayer.play();
},
pause() {
if (!this.tcPlayer) return;
return this.tcPlayer.pause();
},
togglePlay() {
if (!this.tcPlayer) return;
return this.tcPlayer.togglePlay();
},
mute(muted) {
if (!this.tcPlayer) return;
return this.tcPlayer.mute(muted);
},
volume(val) {
if (!this.tcPlayer) return;
return this.tcPlayer.volume(val);
},
playing() {
if (!this.tcPlayer) return;
return this.tcPlayer.playing();
},
duration() {
if (!this.tcPlayer) return;
return this.tcPlayer.duration();
},
currentTime(time) {
if (!this.tcPlayer) return;
return this.tcPlayer.currentTime(time);
},
fullscreen(enter) {
if (!this.tcPlayer) return;
return this.tcPlayer.fullscreen(enter);
},
buffered() {
if (!this.tcPlayer) return;
return this.tcPlayer.buffered();
},
switchClarity(clarity) {
if (!this.tcPlayer) return;
return this.tcPlayer.switchClarity(clarity);
}
},
destroyed() {
if (this.tcPlayer) {
this.tcPlayer.destroy();
}
}
};
</script>
<style lang="less" scoped>
.banner-img {
// display: inherit;
width: 375px;
height: 210px;
}
</style>
<template>
<section class="comp-title-container">
<span>
<span
class="comp-title"
:style="{
'color': fontColor,
'font-weight': fontWeight,
'font-size': cTextFontSize,
'padding-top': cPaddingTop,
'padding-bottom': cPaddingBottom
}"
>{{title | shortName(16)}}</span>
<!-- <img
v-show="isShowCert"
:style="{
'padding-top': cImgPaddingTop,
}"
class="banner-img"
:src="hocImg"
>-->
<img v-show="isShowCert" class="banner-img" :src="hocImg">
</span>
<span v-show="isShowMore" @click.stop.prevent="showMove" class="comp-title-more">
<span>更多</span>
<img :src="rightIcon">
</span>
<span v-show="isShowExplain" @click="showDialog" class="comp-title-explain">
<span>查看说明</span>
<img :src="rightNew">
</span>
</section>
</template>
<script>
export default {
name: "common-title",
data() {
return {
fontSize: 37.5,
cImgPaddingTop: "1rem",
hocImg: require("../../images/has-cert-new.png"),
rightIcon: require("../../images/right-icon.png"),
rightNew: require("../../images/right-new.png"),
};
},
props: {
title: {
type: String,
default: ""
},
fontColor: {
type: String,
default: "#333"
},
fontWeight: {
type: Number,
default: 700
},
textFontSize: {
type: Number,
default: 18
},
paddingTop: {
type: Number,
default: 20
},
paddingBottom: {
type: Number,
default: 15
},
isShowCert: {
type: Boolean,
default: true
},
isShowMore: {
type: Boolean,
default: false
},
isShowExplain: {
type: Boolean,
default: false
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
this.cImgPaddingTop = (this.paddingTop + 3) / this.fontSize + "rem";
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {
showMove() {
this.$emit("showMore");
},
showDialog() {
this.$emit("showDialog");
}
}
};
</script>
<style lang="less" scoped>
.comp-title-container {
padding-left: 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
span {
display: flex;
align-items: center;
}
}
.comp-title {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
&-more {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 15px;
span {
font-size: 14px;
font-weight: 400;
color: rgba(40, 52, 76, 0.4);
}
img {
width: 15px;
height: 16px;
}
}
&-explain {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 15px;
span {
font-size: 14px;
font-weight: 400;
color: rgba(40, 52, 76, 0.4);
margin-right: 3px;
line-height: 14px;
}
img {
width: 8px;
height: 14px;
}
}
}
.banner-img {
width: 70px;
height: 20px;
padding-top: 2px;
}
</style>
<template>
<div v-show="needShow" class="loader" title="2">
<!-- <div class="loader-mask"></div> -->
<div class="loader-title">
<span>{{toastTitle}}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
needShow: false,
toastTitle: ''
};
},
methods: {
toast(toastTitle, time = 1000) {
this.toastTitle = toastTitle
this.needShow = true
window.setTimeout( () => {
this.needShow = false
this.toastTitle = ''
}, time)
}
},
};
</script>
<style lang="less" scoped>
.loader {
&-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.5);
}
&-title {
position: fixed;
width: 100%;
left: 0;
z-index: 301;
bottom: 30px;
text-align: center;
span {
padding: 2px 10px;
background: #eee;
}
}
}
</style>
<template>
<section>
<article class>
<span></span>
<span>{{title}}</span>
<span></span>
<span>{{title}}</span>
<span></span>
</article>
<article>
<section >1</section>
<section >2</section>
</article>
</section>
</template>
<script>
export default {
name: "common-title",
data() {
return {
fontSize: 37.5
};
},
props: {
title: {
type: String,
default: ""
},
bgColor: {
type: String,
default: "#999"
},
fontWeight: {
type: Number,
default: 600
},
textFontSize: {
type: Number,
default: 16
},
paddingTop: {
type: Number,
default: 15
},
paddingBottom: {
type: Number,
default: 15
}
},
created() {},
mounted() {
let htmlDom = document.getElementsByTagName("html")[0].style.fontSize;
this.fontSize = htmlDom;
console.log(htmlDom);
},
computed: {
cTextFontSize() {
return this.textFontSize / this.fontSize + "rem";
},
cPaddingTop() {
return this.paddingTop / this.fontSize + "rem";
},
cPaddingBottom() {
return this.paddingBottom / this.fontSize + "rem";
}
},
methods: {}
};
</script>
<style lang="less" scoped>
.comp-title {
display: flex;
padding-left: 15px;
}
</style>
<template>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
<defs>
<symbol viewBox="0 0 60 60" id="eleme">
<path fill="#3CABFF" fill-rule="evenodd" d="M0 9.375A9.374 9.374 0 0 1 9.375 0h41.25A9.374 9.374 0 0 1 60 9.375v41.25A9.374 9.374 0 0 1 50.625 60H9.375A9.374 9.374 0 0 1 0 50.625V9.375zm35.94 30.204c-5.601 3.147-12.645 1.256-15.834-4.217-3.206-5.501-1.303-12.537 4.25-15.713 4.7-2.689 10.51-1.749 14.127 1.941L27.526 27.89a2.81 2.81 0 0 0-1.037 3.854 2.862 2.862 0 0 0 3.887 1.035l15.988-9.166a17.238 17.238 0 0 0-1.222-2.571c-4.777-8.198-15.358-11.007-23.632-6.275-8.275 4.734-11.11 15.217-6.332 23.415 4.77 8.184 15.322 10.997 23.59 6.297.877-.5 1.654-1.037 2.376-1.623l-1.31-2.248a2.868 2.868 0 0 0-3.893-1.028zm10.824-7.39l-1.418-2.425-4.911 2.798 2.835 4.846 2.454-1.399h.002a2.779 2.779 0 0 0 1.038-3.82z">
</path>
</symbol>
<symbol viewBox="0 0 28 33" id="user">
<path fill-rule="evenodd" d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z" class="path1">
</path>
</symbol>
<symbol viewBox="0 0 32 31" id="shop">
<g fill-rule="evenodd">
<path d="M28.232 1.822C27.905.728 26.97.152 25.759.152H5.588c-1.252 0-1.867.411-2.397 1.415l-.101.243-.443 1.434-.975 3.154-.002.007C.837 9.101.294 10.854.26 10.956l-.059.259c-.231 1.787.337 3.349 1.59 4.448 1.159 1.017 2.545 1.384 3.865 1.384.07 0 .07 0 .132-.002-.01.001-.01.001.061.002 1.32 0 2.706-.367 3.865-1.384a4.96 4.96 0 0 0 .413-.407l-1.043-.946-1.056.931c1.033 1.171 2.51 1.792 4.21 1.801.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.148-.13.287-.267.418-.411l-1.044-.944-1.057.93c1.033 1.174 2.511 1.796 4.213 1.806.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384.15-.131.29-.27.422-.416l-1.046-.943-1.058.929c1.033 1.177 2.513 1.801 4.218 1.811.04.002.088.004.173.004 1.32 0 2.706-.367 3.865-1.384 1.206-1.058 1.858-2.812 1.676-4.426-.069-.61-.535-2.207-1.354-4.785l-.109-.342a327.554 327.554 0 0 0-1.295-3.966l-.122-.366.014.043h.004zm-2.684.85l.12.361.318.962c.329.999.658 2.011.965 2.973l.108.338c.719 2.262 1.203 3.92 1.24 4.249.08.711-.233 1.553-.735 1.993-.553.485-1.308.685-2.008.685l-.098-.002c-.987-.007-1.695-.306-2.177-.854l-1.044-1.189-1.06 1.175a2.192 2.192 0 0 1-.188.185c-.553.485-1.308.685-2.008.685l-.098-.002c-.985-.007-1.693-.305-2.174-.852l-1.043-1.185-1.059 1.171c-.058.064-.12.125-.186.183-.553.485-1.308.685-2.008.685l-.098-.002c-.984-.007-1.692-.304-2.173-.85L9.101 12.2l-1.058 1.166a2.248 2.248 0 0 1-.184.181c-.553.485-1.307.685-2.008.685l-.061-.001-.131.001c-.701 0-1.455-.2-2.008-.685-.538-.472-.767-1.102-.654-1.971l-1.396-.18 1.338.44c.043-.13.552-1.775 1.425-4.599l.002-.007.975-3.155.443-1.434-1.345-.415 1.245.658c.054-.102.042-.085-.083-.001-.122.082-.143.086-.009.086H25.763c.053 0-.164-.133-.225-.339l.014.043-.004-.001zM5.528 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z">
</path>
<path d="M.28 29.72c0-.707.58-1.28 1.277-1.28h28.155a1.28 1.28 0 0 1 .007 2.56H1.561A1.278 1.278 0 0 1 .28 29.72z">
</path>
<path d="M26.008 19.48c.778 0 1.408.63 1.408 1.408v7.424a1.408 1.408 0 1 1-2.816 0v-7.424c0-.778.63-1.408 1.408-1.408z">
</path>
</g>
</symbol>
<symbol viewBox="0 0 28 33" id="location">
<g fill-rule="evenodd">
<path d="M20.809 21.6L12.9 29.509h1.616l-7.992-7.992a13.003 13.003 0 0 1-.506-.478c-4.25-4.25-4.25-11.14 0-15.389s11.14-4.25 15.389 0c4.25 4.25 4.25 11.14 0 15.389a10.81 10.81 0 0 1-.543.508l-.056.052zm1.56 1.669c.225-.196.443-.401.656-.613 5.142-5.142 5.142-13.48 0-18.622s-13.48-5.142-18.622 0c-5.142 5.142-5.142 13.48 0 18.622.18.18.364.354.553.522l8.753 8.755 8.661-8.664z" class="path1">
</path>
<path d="M9.428 16.739a6.063 6.063 0 1 0 8.573-8.575 6.063 6.063 0 0 0-8.573 8.575zm1.616-1.616a3.776 3.776 0 1 1 5.34-5.341 3.776 3.776 0 0 1-5.34 5.341z" class="path2">
</path>
</g>
</symbol>
<symbol id="star" viewBox="0 0 32 32">
<path class="path1" d="M16 26.382l-8.16 4.992c-1.5 0.918-2.382 0.264-1.975-1.435l2.226-9.303-7.269-6.218c-1.337-1.143-0.987-2.184 0.755-2.322l9.536-0.758 3.667-8.835c0.674-1.624 1.772-1.613 2.442 0l3.667 8.835 9.536 0.758c1.753 0.139 2.082 1.187 0.755 2.322l-7.269 6.218 2.226 9.303c0.409 1.71-0.485 2.347-1.975 1.435l-8.16-4.992z">
</path>
</symbol>
<symbol viewBox="0 0 32 32" id="backtop">
<g fill-rule="evenodd">
<circle cx="16" cy="16" r="15" stroke="#999" stroke-width="0.6" fill="none"/>
<line x1="16" y1="10" x2="16" y2="21" style="stroke:#999;stroke-width:0.8"/>
<line x1="10" y1="10" x2="22" y2="10" style="stroke:#999;stroke-width:0.8"/>
<path d="M9.5 18 L16 10 L22.5 18" style="stroke:#999;stroke-width:0.8;fill:none"/>
<text x="10" y="27" style="font-size:6px;fill:#999;font-weight:700;">顶部</text>
</g>
</symbol>
<symbol viewBox="0 0 33 32" id="default">
<path fill="#3b87c8" d="M13.374 29.064a.94.94 0 0 1-.941-.941V6.476l-7.285 6.899a.942.942 0 0 1-1.299-1.364l8.876-8.424a.94.94 0 0 1 1.59.681v23.855a.94.94 0 0 1-.941.941zM20.904 29.355h-.008a.94.94 0 0 1-.375-.078.943.943 0 0 1-.559-.86V3.944a.94.94 0 1 1 1.882 0v22.287l7.238-6.842a.94.94 0 0 1 1.289 1.366l-8.818 8.338a.943.943 0 0 1-.649.264z">
</path>
</symbol>
<symbol viewBox="0 0 32 32" id="distance">
<path fill="#2a9bd3" d="M15.884 31.236l-.042.001a.888.888 0 0 1-.59-.224l-7.91-7.91a7.548 7.548 0 0 1-.498-.471 12.752 12.752 0 0 1-3.747-9.045C3.097 6.523 8.824.796 15.888.796s12.791 5.727 12.791 12.791c0 3.532-1.432 6.73-3.747 9.045-.196.196-.409.391-.613.578l-7.813 7.804a.886.886 0 0 1-.589.223l-.035-.001zm0-28.667C9.818 2.59 4.908 7.513 4.908 13.582c0 3.023 1.218 5.762 3.19 7.752l.461.435 7.316 7.316 7.2-7.2q.284-.249.551-.516a10.977 10.977 0 0 0 3.225-7.787c0-6.066-4.905-10.987-10.965-11.013z">
</path>
<path fill="#2a9bd3" d="M15.884 18.524a5.707 5.707 0 0 1-4.07-1.732l-.001-.001a5.76 5.76 0 1 1 4.119 1.734h-.05zm-2.817-2.942a3.982 3.982 0 1 0 0-5.626c-.726.717-1.175 1.713-1.175 2.813s.449 2.096 1.175 2.813z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="fengniao">
<path fill="#27a9e1" d="M5.953 2.793s-.117 1.801.857 3.56c.361.255 10.458 6.218 10.458 6.218L5.953 2.794z"></path>
<path fill="#b8e5fa" d="M9.604.889s-.333 1.404.069 3.147c.254.307 7.801 8.116 7.801 8.116L9.604.889z"></path>
<path fill="#0089cf" d="M29.282 14.601l-4.861-.361s-.133-.001-.147-.226h-.002a2.652 2.652 0 0 0-2.978-2.357h-.003l-.011.001-.12.019-.004.001c-.432.075-1.812.374-3.038 1.285 0 0-.167.121-.421.33L2.665 6.043s3.254 8.665 12.207 11.98c-1.6 2.849-7.407 13.48-7.407 13.48l2.446-1.306s.775-2.853 1.884-4.957c.609-.936 1.211-.992 1.498-1.141.291-.151 3.707-.765 6.431-4.339.897-1.166 1.244-2.666 1.723-4.261.28-.061 3.008-.651 3.789-.718 1.068-.092 4.045-.181 4.045-.181z"></path>
<path fill="#0089cf" d="M7.392 17.849c-1.567-1.368-2.199-3.219-2.035-5.217-.232-.288-.45-.572-.654-.851-.484 2.903.555 4.854 2.176 6.269 1.538 1.342 3.635 1.85 5.466 1.577-1.674.109-3.563-.565-4.953-1.778z"></path>
<path fill="#0089cf" d="M12.345 19.628h.002zm-7.642-7.846c.204.279.421.563.654.851-.164 1.998.468 3.849 2.035 5.217 1.292 1.128 3.016 1.79 4.597 1.79.12 0 .238-.004.356-.011a6.554 6.554 0 0 1-.975.071c-1.568 0-3.22-.54-4.49-1.648-1.621-1.415-2.66-3.366-2.176-6.269z"></path>
</symbol>
<symbol viewBox="0 0 23 32" id="hot">
<path fill="#f07373" d="M9.859 29.375c-3.489-.771-6.362-3.097-7.187-5.551-.882-2.623-1.029-6.873-.238-9.318l-1.727.037.001.002.001.004.004.01.011.029.038.091c.039.09.086.191.142.3.155.304.349.627.586.955a7.477 7.477 0 0 0 2.711 2.318c.583.153.583.153 1.087-.188.187-.263.187-.263.224-.39.028-.094.041-.176.05-.28.01-.109.016-.238.022-.47.063-2.219.162-3.38.562-4.943a10.05 10.05 0 0 1 .814-2.185c1.433-2.723 4.843-6.053 6.699-7.021l-1.325-.962c-.064.382-.127.992-.131 1.722-.008 1.252.169 2.393.616 3.329.261.547.525.968 1.132 1.862l.23.339c.86 1.281 1.161 1.986 1.069 2.653l-.009.125c.069.517.069.517.781.906.451-.026.451-.026.578-.104.144-.093.144-.093.19-.136.041-.037.079-.077.123-.125.068-.076.153-.178.245-.295.22-.279.458-.615.677-.963.648-1.028 1.045-1.988 1.037-2.845l-.914.009-.706.581c.295.358.809 1.075 1.33 1.936.826 1.363 1.492 2.791 1.898 4.209 1.1 3.845.3 9.288-2.245 11.75a9.652 9.652 0 0 1-1.659 1.29 10.232 10.232 0 0 1-3.471 1.332c-.794.151-1.385.191-2.064.191h-.009a2.75 2.75 0 0 1-.373-.03 6.007 6.007 0 0 1-.585-.115 7.765 7.765 0 0 1-.536-.15l-.578 1.735a9.182 9.182 0 0 0 1.445.341c.221.031.43.048.627.048h.009a12.546 12.546 0 0 0 2.407-.224 12.011 12.011 0 0 0 4.088-1.572c.699-.431 1.358-.94 1.971-1.533 3.098-2.998 4-9.132 2.731-13.567-.455-1.591-1.188-3.161-2.092-4.653-.569-.939-1.134-1.727-1.482-2.15l-1.645-1.998.024 2.588c.004.412-.281 1.1-.756 1.853a9.64 9.64 0 0 1-.569.809 4.528 4.528 0 0 1-.158.195c.028-.027.028-.027.16-.113.122-.075.122-.075.57-.101.71.388.71.388.778.902h-.914l.906.125c.174-1.262-.261-2.281-1.362-3.922l-.235-.347c-.554-.817-.787-1.189-.995-1.624-.306-.642-.444-1.53-.438-2.53a10.566 10.566 0 0 1 .107-1.431L14.44.304l-1.628.85c-2.18 1.138-5.862 4.733-7.471 7.791a11.873 11.873 0 0 0-.967 2.583 19.2 19.2 0 0 0-.511 3.147c-.036.423-.061.839-.079 1.273-.011.281-.019.531-.029.924-.005.191-.01.298-.015.354a.403.403 0 0 1 .019-.077c.027-.099.027-.099.203-.346.492-.332.492-.332 1.112-.157a5.745 5.745 0 0 1-2.54-2.496 3.456 3.456 0 0 1-.093-.197l-.018-.044-.002-.006v.001l.001.002v.002l-.915-2.473-.812 2.51c-.917 2.836-.757 7.485.245 10.463 1.042 3.099 4.442 5.852 8.526 6.754l.395-1.785z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="price">
<path fill="#e6b61a" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"></path><path fill="#e6b61a" d="M23.14 6.06l-5.12 8.65h4.48v1.54h-5.49v2.43h5.49v1.54h-5.49v5.1h-2.02v-5.1H9.53v-1.54h5.46v-2.43H9.53v-1.54h4.45L8.8 6.06h2.24l4.99 8.48 4.93-8.48h2.18z"></path>
</symbol>
<symbol viewBox="0 0 33 32" id="rating">
<path fill="#eba53b" d="M27.087 31.84L16.8 25.553 6.504 31.84l2.824-11.727-9.186-7.878 12.019-.941L16.801.16l4.631 11.134 12.019.941-9.158 7.849zM16.8 23.369l7.407 4.527-2.014-8.471 6.588-5.647-8.659-.696L16.8 5.063l-3.341 8.019-8.659.696 6.588 5.647-2.014 8.471z"></path>
</symbol>
<symbol viewBox="0 0 38 32" id="selected">
<path fill="#3190e8" d="M32.291 2.327c.582-.582 1.455-.582 2.036 0l2.036 2.036c.582.582.582 1.455 0 2.036L13.818 29.09c-.582.582-1.455.582-2.036 0L1.455 18.908c-.582-.582-.582-1.455 0-2.036l2.036-2.036c.582-.582 1.455-.582 2.036 0l7.273 7.273L32.291 2.327z"></path>
</symbol>
<symbol viewBox="0 0 32 32" id="speed">
<path fill="#37c7b7" d="M16 32c8.837 0 16-7.163 16-16S24.837 0 16 0 0 7.163 0 16s7.163 16 16 16zm0-2C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14z"></path><path fill="#37c7b7" d="M15 7v11.002l5.678 4.882 1.304-1.517-5.33-4.583.348.758V6.999h-2z"></path>
</symbol>
<symbol viewBox="0 0 50 50" id="cart-minus">
<path fill-rule="evenodd" stroke-width="4" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm0 42C11 42 2 33 2 22S11 2 22 2s20 9 20 20-9 20-20 20z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M32 20c1.1 0 2 .9 2 2s-.9 2-2 2H12c-1.1 0-2-.9-2-2s.9-2 2-2h20z" clip-rule="evenodd"></path>
</symbol>
<symbol viewBox="0 0 50 50" id="cart-add">
<path fill="none" d="M0 0h44v44H0z"></path>
<path fill-rule="evenodd" d="M22 0C9.8 0 0 9.8 0 22s9.8 22 22 22 22-9.8 22-22S34.2 0 22 0zm10 24h-8v8c0 1.1-.9 2-2 2s-2-.9-2-2v-8h-8c-1.1 0-2-.9-2-2s.9-2 2-2h8v-8c0-1.1.9-2 2-2s2 .9 2 2v8h8c1.1 0 2 .9 2 2s-.9 2-2 2z" clip-rule="evenodd"></path>
</symbol>
<symbol viewBox="0 0 24 32" id="cart-remove">
<path fill="#bbb" fill-rule="evenodd" d="M21.5 10h-19c-1.1 0-1.918.896-1.819 1.992l1.638 18.016C2.419 31.104 3.4 32 4.5 32h15c1.1 0 2.081-.896 2.182-1.992l1.637-18.016A1.798 1.798 0 0 0 21.5 10zM8 28H5L4 14h4v14zm6 0h-4V14h4v14zm5 0h-3V14h4l-1 14zm2-24h-2.941l-.353-2.514C17.592.669 16.823 0 15.998 0H8c-.825 0-1.593.668-1.708 1.486L5.94 4H3a3 3 0 0 0-3 3v1h24V7a3 3 0 0 0-3-3zM8.24 2h7.52l.279 2H7.96l.28-2z"></path>
</symbol>
<symbol viewBox="0 0 14 16" id="cart">
<path fill="#FFF" fill-rule="evenodd" d="M12.364 2.998H2.088L1.816.687a.455.455 0 0 0-.478-.431L.431.303A.454.454 0 0 0 0 .78l1.256 10.893c.006.293.011 1.325.933 1.325h9.546a.455.455 0 0 0 .455-.454v-.881a.454.454 0 0 0-.455-.455H3.05l-.11-.937h8.606c.998 0 1.889-.724 1.989-1.616l.455-4.04c.1-.893-.628-1.617-1.626-1.617zm-.45 4.245c-.075.669-.317 1.212-1.066 1.212H2.727L2.3 4.812h8.821c.749 0 1.065.543.99 1.212l-.197 1.219zM2.416 15.79a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm9.092 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</symbol>
<symbol viewBox="0 0 58 58" id="cart-icon">
<defs>
<filter id="a" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feOffset in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/><feMerge><feMergeNode in="shadowMatrixOuter1"/><feMergeNode in="SourceGraphic"/></feMerge></filter><path id="b" d="M7.614 4.051c-1.066.086-1.452-.398-1.752-1.584C5.562 1.28.33 5.88.33 5.88l3.71 19.476c0 .148-1.56 7.515-1.56 7.515-.489 2.19.292 4.27 3.56 4.32 0 0 36.917.017 36.92.047 1.979-.012 2.981-.995 3.013-3.039.03-2.043-1.045-2.978-2.987-2.993L8.83 31.192s.86-3.865 1.077-3.865c0 0-5.788.122 32.065-1.956.606-.033 2.018-.764 2.298-1.848 1.113-4.317 4.008-13.26 4.458-15.64.932-4.925 2.061-8.558-4.28-7.405 0 0-35.768 3.487-36.833 3.573z"/>
</defs>
<g fill="none" fill-rule="evenodd" filter="url(#a)" transform="translate(3 2)">
<g transform="translate(5.038 7.808)"><mask id="c" fill="#fff"><use xlink:href="#b"/></mask><use fill="#FFF" xlink:href="#b"/><path fill="#2073C1" d="M53.962 7.774l-5.701 19.305-40.78 1.574z" opacity=".1" mask="url(#c)"/></g><path stroke="#FFF" stroke-width="6" d="M9.374 18.722S7.868 11.283 7.323 8.71C6.778 6.136 5.86 5.33 3.978 4.52 2.096 3.713.367 2.286.367 2.286" stroke-linecap="round"/><circle cx="46" cy="51" r="4" fill="#FFF"/><circle cx="12" cy="51" r="4" fill="#FFF"/>
</g>
</symbol>
<symbol viewBox="0 0 14 14" id="arrow-left">
<path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none"/>
</symbol>
<symbol viewBox="0 0 1024 1024" id="res-well"><path fill="#7ED321" fill-rule="evenodd" d="M512 0C229.376 0 0 229.376 0 512s229.376 512 512 512 512-229.376 512-512S794.624 0 512 0zM247.808 402.432c0-36.864 39.936-93.184 93.184-93.184s93.184 56.32 93.184 93.184c0 11.264-9.216 20.48-20.48 20.48-11.264 0-20.48-9.216-20.48-20.48 0-16.384-24.576-52.224-52.224-52.224-27.648 0-52.224 35.84-52.224 52.224 0 11.264-9.216 20.48-20.48 20.48-11.264 0-20.48-9.216-20.48-20.48zM512 800.768c-132.096 0-239.616-96.256-239.616-215.04 0-11.264 9.216-20.48 20.48-20.48 11.264 0 20.48 9.216 20.48 20.48 0 96.256 89.088 174.08 198.656 174.08 109.568 0 198.656-77.824 198.656-174.08 0-11.264 9.216-20.48 20.48-20.48 11.264 0 20.48 9.216 20.48 20.48 0 117.76-107.52 215.04-239.616 215.04zm243.712-377.856c-11.264 0-20.48-9.216-20.48-20.48 0-17.408-24.576-52.224-52.224-52.224-28.672 0-52.224 34.816-52.224 52.224 0 11.264-9.216 20.48-20.48 20.48-11.264 0-20.48-9.216-20.48-20.48 0-36.864 39.936-93.184 93.184-93.184s93.184 56.32 93.184 93.184c0 11.264-9.216 20.48-20.48 20.48z"></path></symbol>
<symbol viewBox="0 0 1024 1024" id="res-bad"><path fill="#D0021B" fill-rule="evenodd" d="M512 0C230.326 0 0 230.326 0 512s230.573 512 512 512 512-230.326 512-512S793.674 0 512 0zM240.694 373.755l158.735-56.285 15.306 46.164L256 419.919l-15.306-46.164zm440.409 384.123c-10.122 0-20.49-10.122-25.674-20.49-10.122-10.122-61.47-25.674-148.366-25.674-86.896 0-138.245 15.306-148.366 25.674 0 10.122-10.122 20.49-25.674 20.49s-25.674-10.122-25.674-25.674c0-71.591 174.041-71.591 194.53-71.591 20.489 0 194.53 0 194.53 71.591 10.122 10.368 0 25.674-15.306 25.674zM768 419.919l-163.672-61.47 15.306-46.164 158.735 56.285-10.368 51.348-.001.001z"></path></symbol>
<symbol viewBox="0 0 122 122" id="avatar-default"><path fill="#DCDCDC" fill-rule="evenodd" d="M61 121.5c33.413 0 60.5-27.087 60.5-60.5S94.413.5 61 .5.5 27.587.5 61s27.087 60.5 60.5 60.5zm12.526-45.806c-.019 3.316-.108 6.052.237 9.825 3.286 8.749 18.816 9.407 28.468 17.891-1.833 1.998-6.768 6.788-15 10.848-7.02 3.463-16.838 6.416-24.831 6.416-17.366 0-32.764-7.149-42.919-17.264 9.713-8.407 25.49-9.173 28.769-17.891.345-3.773.258-6.509.24-9.825l-.004-.002c-1.903-.985-5.438-7.268-6.01-12.571-1.492-.12-3.843-1.561-4.534-7.247-.37-3.053 1.107-4.77 2.004-5.31-5.046-19.212 1.507-33.16 20.749-34.406 5.753 0 10.18 1.52 11.909 4.523 15.35 2.702 11.756 22.658 9.328 29.882.899.54 2.376 2.258 2.004 5.31-.689 5.687-3.042 7.127-4.534 7.248-.575 5.305-3.25 10.82-5.873 12.57l-.003.003zM61 120.5C28.14 120.5 1.5 93.86 1.5 61S28.14 1.5 61 1.5s59.5 26.64 59.5 59.5-26.64 59.5-59.5 59.5z"></path></symbol>
<symbol viewBox="0 0 655 1024" id="mobile"><path d="M0 122.501v778.998C0 968.946 55.189 1024 123.268 1024h408.824c68.52 0 123.268-54.846 123.268-122.501V122.501C655.36 55.054 600.171 0 532.092 0H123.268C54.748 0 0 54.846 0 122.501zM327.68 942.08c-22.622 0-40.96-18.338-40.96-40.96s18.338-40.96 40.96-40.96 40.96 18.338 40.96 40.96-18.338 40.96-40.96 40.96zM81.92 163.84h491.52V819.2H81.92V163.84z"></path></symbol>
<symbol viewBox="0 0 1024 1024" id="arrow-right" class="icon"><path d="M716.298 417.341l-.01.01L307.702 7.23l-94.295 94.649 408.591 410.117-408.591 410.137 94.295 94.639 502.891-504.76z" class="selected"></path></symbol>
<symbol viewBox="0 0 40 40" id="order"><path d="M31.5 3h-23C6 3 4 5.1 4 7.7v24.7C4 34.9 6 37 8.5 37h23c2.5 0 4.5-2.1 4.5-4.7V7.7C36 5.1 34 3 31.5 3zM11.8 28.2c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.2-.9 2.1-2 2.1zm0-6.1c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.1-.9 2.1-2 2.1zm0-6.2c-1.1 0-2-.9-2-2.1 0-1.1.9-2.1 2-2.1s2 .9 2 2.1c0 1.2-.9 2.1-2 2.1zm5.1 11.9h13.5v-2.6H16.9v2.6zm0-6.5h13.5v-2.6H16.9v2.6zm0-6.6h13.5v-2.6H16.9v2.6z"></path></symbol>
<symbol viewBox="0 0 40 40" id="point"><path d="M34.6 7.1c0-1.1-1-2.1-2.1-2.1h-24c-1.1 0-2 1-2.1 2.1l-1.6 25C4.6 34.3 6.3 36 8.5 36h24c2.2 0 3.9-1.7 3.7-3.9l-1.6-25zm-5.9 6.1c-.2 4.6-3.7 8.2-8.3 8.2-4.6 0-8.2-3.7-8.4-8.3-.3-.2-.5-.6-.5-1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c0 .5-.3.9-.7 1.1.2 3.8 3.2 6.8 7.1 6.8 3.9 0 6.8-3.1 7-6.9-.4-.2-.6-.6-.6-1.1 0-.7.6-1.2 1.3-1.2s1.3.6 1.3 1.2c-.2.6-.4 1-.8 1.2z"></path></symbol>
<symbol viewBox="0 0 40 40" id="vip"><path d="M7 33.4c0 1.1.9 1.6 2 1.6h22c1.1 0 2-.5 2-1.6V31H7v2.4z"></path><path d="M32.1 14.3c-.6 2.3-2.6 4-5.1 4-2.9 0-5.3-2.3-5.3-5.2v-.2c-.5.2-1 .3-1.6.3-.6 0-1.1-.1-1.7-.3v.2c0 2.9-2.4 5.2-5.3 5.2-2.5 0-4.6-1.7-5.1-4.1-.5.4-1.2.6-1.8.6-.3 0-.5.1-.8 0L7.2 29h26l1.7-14.2c-.3.1-.5.1-.8.1-.8 0-1.5-.2-2-.6z" class="st0"></path><ellipse cx="20.1" cy="8.2" rx="3.2" ry="3.2"></ellipse><ellipse cx="6.4" cy="10.5" rx="2.4" ry="2.4"></ellipse><ellipse cx="33.8" cy="10.5" rx="2.4" ry="2.4"></ellipse></symbol>
<symbol viewBox="0 0 40 40" id="download"><path d="M30 5H10c-2.8 0-5 2.2-5 5v20c0 2.8 2.2 5 5 5h20c2.8 0 5-2.2 5-5V10c0-2.8-2.2-5-5-5zm-3.9 22.7c-.1.2-.3.4-.6.5-4.3 2.8-10.1 1.6-13-2.8-2.8-4.3-1.6-10.2 2.8-13 4.3-2.8 10.2-1.6 13 2.8.2.2.3.5.4.8.1.2 0 .5-.2.7l-8.8 5.7c-.2.2-.6.1-.7-.2l-.5-.7c-.4-.6-.2-1.5.4-1.9l5.6-3.6c.2-.2.3-.5.2-.7l-.1-.1c-2.2-1.8-5.4-2.1-7.9-.4-3.1 2-4 6.1-2 9.2 2 3.1 6.1 4 9.2 2 .6-.4 1.3-.2 1.7.4l.3.7c.1.2.4.5.2.6zm3.1-4.4l-.9.6c-.2.2-.6.1-.7-.2L26.5 22c-.2-.2-.1-.6.2-.7l1.8-1.1c.2-.2.6-.1.7.2l.6.9c.3.6.1 1.5-.6 2z"></path></symbol>
<symbol viewBox="0 0 40 40" id="service"><g id="service_XMLID_1_"><path id="service_XMLID_6_" d="M32.2 9.5c-.2-.7-.1-.7-.4-.9-1.7-1.2-5.3.2-6.7 1.9-.8-3.8-3.8-6.1-4.7-5.9-.9-.2-4 2.1-4.8 5.9-1.3-1.7-5-3.1-6.7-1.9-.1.1-.5.6-.5.7C5.4 20.7 15 24.6 19 25.7v8.7c0 .7.3 1.2 1 1.2s1-.5 1-1.2v-8.6c4-1 14.2-4.8 11.2-16.3z"></path><path id="service_XMLID_7_" d="M6 25c-.9 0-1.6.7-1.6 1.5.1.8.7 1.5 1.6 1.5 3.1 0 6.5 1.5 8.5 3.7.3.3.7.6 1.1.6.4 0 .7-.1 1-.4.6-.6.6-1.6.1-2.3C14.1 26.8 10 25 6 25z"></path><path id="service_XMLID_8_" d="M34.6 25c-4 0-8.1 1.9-10.7 4.6-.6.6-.5 1.6.1 2.2.3.3.7.4 1 .4.4 0 .8-.3 1.1-.6 2-2.1 5.3-3.7 8.4-3.7h.1c.8 0 1.5-.7 1.5-1.5 0-.7-.7-1.4-1.5-1.4z"></path></g><path d="M0 0h40v40H0z" class="st1"></path></symbol>
<symbol viewBox="0 0 120 120" id="select"><circle cx="60" cy="60" r="60"></circle><path fill="#FFF" d="M63.84 84.678a1.976 1.976 0 0 1-.387.545l-7.975 7.976a1.996 1.996 0 0 1-2.829-.005L24.172 64.716a2.005 2.005 0 0 1-.005-2.828l7.976-7.976a1.996 1.996 0 0 1 2.828.005l19.015 19.015L91.498 35.42a1.991 1.991 0 0 1 2.823 0l7.976 7.977c.784.784.78 2.043 0 2.823L63.84 84.678z"></path></symbol>
<symbol xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 72 72" id="sdk_icon_zhifubao@2x"><defs><path d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0 0 16.118 0 36s16.118 36 36 36z" id="sdk_icon_zhifubao@2x_a"></path></defs><g fill="none" fill-rule="evenodd"><mask id="sdk_icon_zhifubao@2x_b" fill="#fff"><use xlink:href="#sdk_icon_zhifubao@2x_a"></use></mask><use fill="#00A1E9" xlink:href="#sdk_icon_zhifubao@2x_a"></use><path d="M33 21v-5h7v5h14v3H40v4h12c-.202.048-.408 3.223-2 7-1.32 4.134-2.683 6.15-2 6l23.6 8c-.2-.285-.848 2.3-2 4-.775 2.013-2 5-2 5L44 46c.237.162-3.79 4.674-8 7-4.002 1.645-8.717 2.88-14 1-4.93-.56-8.554-3.867-8-10 .693-6.083 7.138-8.19 13-8 4.739-.19 14.796 3.29 15 3-.204.29.642-1.628 2-4 .283-2.015.518-3.777 0-4H22v-3h11v-4H20v-3h13zm-7 30c-7.407 0-9-3.593-9-6 0-2.761 1.576-5.57 8-6 6.484-.383 15.2 4.436 15 4 .2.436-6.238 8-14 8z" fill="#FFF" mask="url(#sdk_icon_zhifubao@2x_b)"></path></g></symbol>
<symbol viewBox="0 0 72 72" id="weixin"><g fill="none" fill-rule="evenodd"><path d="M36 72c19.882 0 36-16.118 36-36S55.882 0 36 0 0 16.118 0 36s16.118 36 36 36z" fill="#45C144"></path><path d="M29 40l-4-8c-.262-.292-.288-.398 0-1 .594-.228.743-.174 1 0l4 4c1.5 1.098 1.5 1.098 3 0l21-10c-3.668-4.964-10.11-8-17-8-12.33 0-22 8.12-22 18 0 5.6 2.91 10.518 7 14 1 .8 1.068.537 1 1 .068.185-.954 4.042-1 4-.027.316-.097.495 0 1-.097.075.225.4 1 0-.22.4 5-3 5-3 1.4.6 5.8 1 9 1 11.533 0 21.2-7.85 21-18 .2-2.899-.692-5.756-2-8L31 41c-1.5.5-2-1-2-1z" fill="#FFF"></path></g></symbol>
<symbol viewBox="0 0 46 46" id="human"><path fill="#ff7b52" d="M33.291 37.774c-.25.097-.504.175-.765.233-6.427 1.444-5.954-3.968-6-3.953 10.457-5.053 10.348-13.466 10-16.216-16.15-.041-22.943-7.063-22.943-7.063s-.176 1.733-2.933 4.996c-2.756 3.262-5.236 4.09-5.132 4.113.54 13.9 12.246 14.242 12.246 14.242-.762 4.662-4.357 4.33-4.357 4.33s-6.38.213-11.173-7.446c-.85-1.359-1.02-2.864-1.166-4.579-.217-2.542.14-4.643.312-7.2.271-4.064.96-6.269.96-6.269S7.13 0 21.4 0s17.828 12.508 17.828 12.508l-.035.074c.533.763.984 1.997 1.356 3.36A3.483 3.483 0 0 1 45 19.281v7.257a3.484 3.484 0 0 1-3.325 3.472c-2.009 4.537-6.657 12.185-15.241 12.457C26.023 44.485 24.269 46 22.168 46c-2.407 0-4.357-1.988-4.357-4.44 0-2.453 1.95-4.44 4.357-4.44 1.955 0 3.609 1.311 4.16 3.118 1.447.13 4.044-.094 6.963-2.464zM18.216 27.018s.99 3.08 3.705 3.08 3.807-1.875 3.807-2.906c.467-1.135 1.348-.541 1.482-.071.134.47-.763 4.67-5.24 4.67s-5.205-4.358-5.205-4.358.033-.97.702-.97c.669 0 .749.555.749.555zm10.052-2.332c.963 0 1.743-1.192 1.743-2.664 0-1.471-.78-2.664-1.743-2.664-.963 0-1.743 1.193-1.743 2.664 0 1.472.78 2.664 1.743 2.664zm-12.723 0c.962 0 1.743-1.192 1.743-2.664 0-1.471-.78-2.664-1.743-2.664-.963 0-1.743 1.193-1.743 2.664 0 1.472.78 2.664 1.743 2.664z"></path></symbol>
<symbol viewBox="0 0 46 46" id="phone"><path fill="#6ac20b" d="M15.433 30.568c9.342 9.342 17.708 12.15 18.871 12.316 1.163.167 3.07.542 5.837-2.225 3.24-3.24 3.566-4.94 1.783-6.724-1.783-1.783-6.212-4.48-7.416-5.176-1.206-.696-2.228-.472-3.097.133-.868.605-1.87 1.375-2.798 2.047-.927.671-2.087.955-3.332.167-1.245-.79-3.35-2.27-5.735-4.652-2.384-2.384-3.863-4.49-4.651-5.735-.789-1.245-.505-2.405.167-3.332.671-.928 1.441-1.93 2.046-2.798.605-.869.828-1.89.134-3.097-.696-1.204-3.394-5.633-5.177-7.416-1.783-1.783-3.484-1.457-6.724 1.783-2.766 2.766-2.391 4.674-2.226 5.837.167 1.164 2.976 9.53 12.318 18.872"></path></symbol>
<symbol viewBox="0 0 126 126" id="expired"><path fill="#9B9B9B" fill-rule="evenodd" d="M63 125.5c34.518 0 62.5-27.982 62.5-62.5S97.518.5 63 .5.5 28.482.5 63s27.982 62.5 62.5 62.5zM15.156 66.678l-3.073-1.258 2.868-1.674.248-3.31 2.478 2.21 3.225-.79-1.335 3.04 1.746 2.825-3.302-.33-2.147 2.533-.704-3.245zm4.07-24.55l-2.03-2.625 3.32-.015 1.87-2.744 1.04 3.153 3.187.93-2.677 1.964.1 3.32-2.695-1.94-3.124 1.122 1.01-3.163zm15.8-19.223l-.446-3.29 2.883 1.646 2.99-1.44-.674 3.25 2.294 2.4-3.3.363-1.573 2.924-1.363-3.027-3.267-.592 2.457-2.233zm23.296-8.75l1.258-3.072 1.674 2.868 3.31.248-2.21 2.478.79 3.225-3.04-1.335-2.825 1.746.33-3.302-2.533-2.147 3.245-.704zm24.55 4.072l2.625-2.032.015 3.32 2.744 1.87-3.153 1.04-.93 3.188-1.964-2.677-3.32.1 1.94-2.695-1.122-3.124 3.163 1.01zm27.972 39.095l3.073 1.258-2.868 1.674-.248 3.31-2.478-2.21-3.225.79 1.335-3.04-1.746-2.825 3.302.33 2.147-2.533.704 3.245zm-4.07 24.55l2.03 2.625-3.32.015-1.87 2.744-1.04-3.153-3.187-.93 2.677-1.964-.1-3.32 2.695 1.94 3.124-1.122-1.01 3.163zm-15.8 19.223l.446 3.29-2.883-1.646-2.99 1.44.674-3.25-2.294-2.4 3.3-.363 1.573-2.924 1.363 3.027 3.267.592-2.457 2.233zm-23.296 8.75l-1.258 3.072-1.674-2.868-3.31-.248 2.21-2.478-.79-3.225 3.04 1.335 2.825-1.746-.33 3.302 2.533 2.147-3.245.704zm-24.55-4.072l-2.625 2.032-.015-3.32-2.744-1.87 3.153-1.04.93-3.188 1.964 2.677 3.32-.1-1.94 2.695 1.122 3.124-3.163-1.01zM74.257 41.7a23.764 23.764 0 0 0-22.17.092 23.767 23.767 0 0 0-12.508 18.646l.995.1a22.767 22.767 0 0 1 11.983-17.863 22.764 22.764 0 0 1 21.238-.088l.462-.887zm11.387 22.436A22.764 22.764 0 0 1 74.313 82.1a22.767 22.767 0 0 1-21.5.696l-.44.897a23.767 23.767 0 0 0 22.44-.727A23.764 23.764 0 0 0 86.64 64.214l-.997-.078zM63 122.5C30.14 122.5 3.5 95.86 3.5 63S30.14 3.5 63 3.5s59.5 26.64 59.5 59.5-26.64 59.5-59.5 59.5zm14.127-71.148l1.14 1.975 3.388-1.956-1.14-1.974-3.388 1.956zm2.704-3.14l-1.055-1.83-3.388 1.956 1.056 1.83 3.388-1.957zm.237 8.232l3.388-1.956-1.14-1.974-3.388 1.956 1.14 1.974zm-6.89-8.715a24.73 24.73 0 0 0-.892-1.453 7.288 7.288 0 0 0-.79-.985c.31-.104.617-.227.924-.367a6.52 6.52 0 0 0 .842-.46c.13-.093.226-.12.285-.08.06.04.066.128.017.267a.653.653 0 0 0-.032.378c.03.113.09.253.187.42l.85 1.475 3.39-1.956a39.962 39.962 0 0 0-1.01-1.677c-.25-.383-.472-.665-.67-.847a13.33 13.33 0 0 0 1.857-.767c.19-.09.313-.107.374-.05.062.057.064.148.007.273-.09.2-.128.356-.117.47.01.114.06.247.147.4l.792 1.37c.24-.157.48-.318.718-.483a9.91 9.91 0 0 0 .673-.513l1.02 1.766c-.26.095-.52.204-.78.327-.262.123-.525.243-.79.36l4.655 8.063c.234-.17.46-.333.675-.486.217-.153.43-.318.643-.496l.912 1.58c-.21.085-.434.177-.672.278-.238.1-.534.243-.888.43-.354.185-.79.423-1.307.712a205.733 205.733 0 0 0-3.876 2.238c-.516.307-.943.567-1.28.78-.34.215-.615.402-.828.562-.212.16-.408.31-.586.45l-.912-1.58c.638-.24 1.29-.533 1.958-.882l-4.668-8.085a20.893 20.893 0 0 0-1.67 1.186l-1.02-1.767a21.623 21.623 0 0 0 1.862-.854zm14.762 2.285l3.387-1.956-2.124-3.68-3.388 1.956 2.124 3.68zm-1.45-10.332l-3.387 1.956 1.956 3.387 3.387-1.956-1.956-3.387zm2.11 11.67c.274.634.514 1.305.717 2.01.204.704.36 1.408.47 2.11.11.704.167 1.4.17 2.093a10.19 10.19 0 0 1-.17 1.94c-.51-.15-1.18-.14-2.008.024.213-.974.312-1.88.298-2.723a10.595 10.595 0 0 0-.37-2.558c-.23-.865-.573-1.77-1.028-2.72a48.398 48.398 0 0 0-1.714-3.208l-2.7-4.676a25.767 25.767 0 0 0-.875-1.42 21.753 21.753 0 0 0-.85-1.186c.525-.21 1.043-.45 1.554-.717.51-.267 1.112-.6 1.805-1a60.923 60.923 0 0 0 1.893-1.136 17.45 17.45 0 0 0 1.502-1.047c.137.364.325.787.565 1.267.24.48.517.99.83 1.53l7.535 13.054a6.1 6.1 0 0 1 .46.94.97.97 0 0 1-.036.756c-.115.25-.347.527-.698.832-.35.304-.864.688-1.54 1.15a3.186 3.186 0 0 0-.647-.858 4.97 4.97 0 0 0-1.038-.717 13.81 13.81 0 0 0 1.096-.55c.264-.152.45-.295.555-.43a.502.502 0 0 0 .108-.437 2.097 2.097 0 0 0-.243-.566l-2.172-3.762-3.47 2.004zm-1.954 7.223a6.16 6.16 0 0 0-1.466-.69 6.537 6.537 0 0 0-1.563-.332l.69-1.59a14.604 14.604 0 0 1 3.05.817l-.71 1.794zm-4.033-.027a2.137 2.137 0 0 0-.287.51 6.12 6.12 0 0 0-.26.872 23.78 23.78 0 0 0-.283 1.452c-.1.594-.225 1.34-.37 2.237a3.37 3.37 0 0 0-.92-.078 5.34 5.34 0 0 0-1.096.19 8.492 8.492 0 0 0 .812-2.41c.15-.843.175-1.782.077-2.816.39.034.75.034 1.08 0a8.61 8.61 0 0 0 1.06-.182c.14-.044.227-.04.26.017.03.056.007.126-.074.21zm-17.506-5.745c.68-.392 1.22-.72 1.624-.98.405-.26.798-.538 1.182-.834l1.044 1.81c-.426.19-.86.4-1.3.626a40.64 40.64 0 0 0-1.66.917l5.015 8.688c.21.36.354.684.435.97.082.285.043.584-.118.9-.16.313-.468.676-.924 1.086-.455.41-1.11.918-1.962 1.52a10.17 10.17 0 0 0-.84-.83 7.863 7.863 0 0 0-1.12-.836 20.7 20.7 0 0 0 1.457-.813c.36-.226.625-.43.797-.612.172-.183.262-.346.27-.49a.783.783 0 0 0-.117-.444l-4.68-8.105-4.448 2.568c-.846.488-1.512.886-2 1.195-.485.31-.936.6-1.35.877l-1.03-1.788c.236-.1.472-.204.706-.31.234-.108.484-.234.75-.38a93.69 93.69 0 0 0 2.035-1.132l4.45-2.568a106.39 106.39 0 0 0-1.3-2.202c-.33-.54-.576-.92-.74-1.138.35-.13.72-.29 1.105-.486.387-.194.696-.378.93-.55.192-.147.346-.176.462-.086.117.09.133.205.048.346a.79.79 0 0 0-.08.56c.044.186.098.335.162.446l1.2 2.08zm-1.79 11.537a25.633 25.633 0 0 0-1.934-1.475 35.97 35.97 0 0 0-2.03-1.31l1.267-1.644a38.25 38.25 0 0 1 2.034 1.195c.68.428 1.346.9 1.993 1.412l-1.33 1.822zm-12.53-7.01c.706.293 1.41.608 2.11.942.702.334 1.376.693 2.022 1.078l-1.13 2.12a56.81 56.81 0 0 0-2.01-1.152 41.097 41.097 0 0 0-2.06-1.044l1.067-1.945zM63 118.25c30.514 0 55.25-24.736 55.25-55.25S93.514 7.75 63 7.75 7.75 32.486 7.75 63 32.486 118.25 63 118.25zm-2.237-47.53c.262-.058.562-.097.9-.118.34-.02.753-.04 1.24-.063.52-.025 1.176-.163 1.964-.415.788-.25 1.72-.646 2.794-1.184 1.077-.536 2.303-1.235 3.682-2.096a87.9 87.9 0 0 0 4.634-3.133 10.2 10.2 0 0 0 .24 1.4c.098.378.23.74.394 1.09a321.96 321.96 0 0 1-4.068 2.362 69.403 69.403 0 0 1-3.052 1.65c-.88.445-1.643.802-2.29 1.074s-1.236.483-1.768.633c-.533.15-1.03.256-1.492.32-.462.063-.954.107-1.476.13-.62.046-1.087.126-1.4.24-.31.117-.536.344-.674.682-.123.33-.22.74-.286 1.232a18.89 18.89 0 0 0-.144 1.62 7.14 7.14 0 0 0-1.164-.31 9.118 9.118 0 0 0-1.23-.136c.132-.575.256-1.07.374-1.49.118-.42.23-.785.338-1.096.106-.31.212-.575.318-.793.105-.22.214-.407.326-.564l-3.66-6.34c-.582.337-1.08.634-1.495.892-.415.257-.75.498-1.01.722l-.972-1.684c.293-.132.648-.3 1.066-.505.42-.203.83-.42 1.23-.653a31.8 31.8 0 0 0 1.27-.775c.433-.277.775-.516 1.028-.718.14.4.292.778.46 1.134.17.355.413.81.733 1.364l3.193 5.53zm-15.907-.43l-2.712-4.7-5.425 3.133c-1.456.84-2.783 1.63-3.983 2.368-1.2.74-2.125 1.344-2.778 1.813l-1.237-2.14c.307-.14.708-.335 1.202-.583.494-.25 1.055-.54 1.684-.876a143.593 143.593 0 0 0 4.375-2.429 153.71 153.71 0 0 0 4.442-2.648c1.175-.734 2.054-1.315 2.638-1.745.15.357.367.813.652 1.37a42.88 42.88 0 0 0 1.05 1.915l1.848 3.2a32.46 32.46 0 0 0 1.93 2.96l-2.057 1.188-.72-1.247-9.395 5.424 3.072 5.32c.224.39.415.68.574.875.158.195.345.304.562.327.216.023.5-.045.853-.202.353-.157.838-.405 1.455-.743.876-.47 1.734-.942 2.577-1.42a68.054 68.054 0 0 0 2.465-1.465c.754-.453 1.335-.84 1.743-1.158.407-.318.686-.66.836-1.023.15-.364.185-.81.104-1.334a26.6 26.6 0 0 0-.45-2.124c.843.437 1.734.523 2.67.26.206 1.026.324 1.854.354 2.483.03.628-.083 1.184-.34 1.665-.258.48-.698.943-1.32 1.386-.623.443-1.495.988-2.617 1.636l-2.545 1.47c-.908.524-1.758.996-2.55 1.417-1.063.558-1.902.97-2.517 1.23-.615.264-1.123.368-1.524.313-.402-.055-.75-.274-1.045-.657-.297-.385-.652-.937-1.068-1.658l-3.444-5.965a27.726 27.726 0 0 0-1.155-1.855c-.337-.49-.602-.835-.793-1.04.37-.157.762-.342 1.176-.553.414-.212.79-.425 1.13-.64.185-.125.32-.144.41-.056.087.088.085.214-.005.377a.624.624 0 0 0-.105.394c.015.12.082.286.202.494l.384.665 9.396-5.424zM10.402 63c0-29.05 23.55-52.598 52.598-52.598 29.05 0 52.598 23.55 52.598 52.598 0 29.05-23.55 52.598-52.598 52.598-29.05 0-52.598-23.55-52.598-52.598z"></path></symbol>
</defs>
</svg>
</template>
\ No newline at end of file
<template>
<ul class="comp-list-wrapper">
<li class="list" v-for="(item, index) in dataList" :key="index">
<section class="item">
<div class="left">
<p class="name" :class="{'status': !item.disabled}">{{item.couponName}}</p>
<div class="other">
<p v-if="item.validTimeType == 2" class="time-end" :class="{'status': !item.disabled}">
<span v-if="item.couponStatus == 1">距离到期仅剩<span class="coupon-pc"> {{item.validLeftDays}} </span></span>
<span v-else>领取后{{item.validTimeSpan}}天内有效</span>
</p>
<p v-else class="time-end" :class="{'status': !item.disabled}">{{parseTime(item.startTime)}}{{parseTime(item.expireTime)}}</p>
<p v-show="!item.isAll" class="rules">
<span :class="{'status': !item.disabled}" @click.prevent.stop="toggleRules(item)">使用规则</span>
<img v-if="!item.showRules" src="../../images/coupon/arrow-down.png" alt="">
<img v-else src="../../images/coupon/arrow-up.png" alt="">
</p>
<article v-show="!item.disabled" class="status-wrapper">
<img v-if="item.isAll && item.couponStatus == 3" src="../../images/coupon/status-lw.png" alt="">
<img v-if="item.isAll && item.couponStatus == 6" src="../../images/coupon/status-sy.png" alt="">
<img v-if="item.isAll && item.couponStatus == 5" src="../../images/coupon/status-sx.png" alt="">
<img v-if="!item.isAll && item.couponStatus == 6" src="../../images/coupon/status-sy.png" alt="">
<img v-if="!item.isAll && (item.couponStatus == 3 || item.couponStatus == 5)" src="../../images/coupon/status-gq.png" alt="">
<!-- <img v-else-if="item.couponStatus == 4" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="item.couponStatus == 5" src="../../images/coupon/status-gq.png" alt="">
<img v-else-if="item.couponStatus == 6" src="../../images/coupon/status-gq.png" alt=""> -->
</article>
</div>
</div>
<div class="right" :class="{'around': !item.disabled}" @click="revieveOrUse(item)">
<div class="top">
<p class="coupon-pc"><span class="symbol">¥</span><span class="price" :class="{'opacity': !item.disabled}">{{yuan(item.discountAmount)}}</span></p>
<p class="desc" :class="{'opacity': !item.disabled}">满{{yuan(item.requiredTotalFee)}}元可用</p>
</div>
<span v-show="item.disabled && item.couponStatus != 4" class="btn coupon-pc">{{getBtnText(item)}}</span>
<span v-show="item.disabled && item.couponStatus == 4" class="btn-no">未开始</span>
</div>
</section>
<section v-show="item.showRules" class="rule-list">
<p v-html="item.couponExplain"></p>
</section>
</li>
</ul>
</template>
<script>
import { convertToYuan, parseTime } from "@/utils"
export default {
props: {
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
showBtn: true,
}
},
methods: {
// 点击切换规则
toggleRules(item) {
console.log(item);
item.showRules = !item.showRules;
},
// 转换按钮的文案
getBtnText(item) {
if( item.couponStatus == 0 || item.couponStatus == 1) {
return item.couponStatus == 0 ? "立即领取" : "去使用";
} else {
return ""
}
},
// 领取或使用
revieveOrUse(item) {
this.$emit("revieveOrUse", item);
},
// 显示元
yuan(fen) {
return convertToYuan(fen);
},
// parseTime
parseTime(time) {
return parseTime(time, '{yyyy}-{mm}-{dd}');
}
},
}
</script>
<style lang="less" scoped>
.comp-list-wrapper {
font-size: 14px;
padding: 0 15px 30px;
.list {
display: flex;
flex-direction: column;
width: 100%;
// height: 115px;
justify-content: space-between;
padding: 15px;
margin: 12px 0;
border-radius: 4px;
background: #FFFFFF;
box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.05);
.item {
display: flex;
flex-direction: row;
width: 100%;
// height: 115px;
justify-content: space-between;
.left {
position: relative;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 210px;
height: 88px;
.name {
font-size: 15px;
font-weight: 700;
color: #373839;
line-height: 1.4;
}
.other {
font-size: 12px;
color: #676869;
p {
line-height: 1.6;
}
.rules {
display: flex;
flex-direction: row;
align-items: center;
img {
margin-left: 2px;
width: 12px;
}
}
.status-wrapper {
position: absolute;
top: 10px;
left: 150px;
img {
width: 75px;
height: 75px;
}
}
}
}
.right {
height: 88px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
text-align: center;
&.around {
justify-content: space-around;
}
.top {
display: flex;
flex-direction: column;
.symbol {
margin-right: 2px;
font-size: 12px;
}
.price {
height: 30px;
line-height: 30px;
font-weight: 700;
font-size: 30px;
}
.desc {
font-size: 11px;
color: #676869;
}
}
.btn {
display: flex;
width: 76px;
height: 28px;
line-height: 28px;
justify-content: center;
align-items: center;
// border: 1px solid #FB5B52;
border-radius: 14px;
font-size: 12px;
font-weight: 700;
color: #fff;
background: #FB5B52;
}
.btn-no {
display: flex;
width: 70px;
height: 25px;
justify-content: center;
align-items: center;
line-height: 25px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
color: #979899;;
background: #F0F1F2;
}
}
}
.rule-list {
margin-top: 15px;
padding-top: 15px;
padding-bottom: 5px;
border-top: 1px solid #F0F1F2;
color: #979899;
font-size: 12px;
}
}
.coupon-pc {
font-weight: 700;
color: #FB5B52;
}
.opacity {
opacity: 0.6;
}
.status {
color: #979899 !important;
}
}
</style>
\ No newline at end of file
<template>
<van-popup v-model="isShow" @click-overlay="cancle" position="bottom" class="coupon-select">
<section class="coupon-select-wrapper">
<article class="title">
<span class="c-24"></span>
<span>优惠券</span>
<img @click="cancle" src="../../images/cme/close.png" />
</article>
<article v-if="selectCouponList.length" class="list-wrapper">
<p v-if="currentCouponInfo.couponId">
已选择1张优惠券,共抵扣
<span class="sc thin">¥{{yuan(currentCouponInfo.discountAmount)}}</span>
</p>
<p v-else-if="goodsInfo4Coupon.count">
请选择优惠券
</p>
<div
class="item"
@click="toggleChecked(item)"
:class="{'disabled': item.disabled}"
v-for="(item, index) in selectCouponList"
:key="index"
>
<div class="left opacity">
<p class="price">
<span class="symbol sc">¥</span>
<span class="num sc">{{yuan(item.discountAmount)}}</span>
</p>
<p class="desc">{{yuan(item.requiredTotalFee)}}元可用</p>
</div>
<div class="center">
<p class="name status">{{item.couponName}}</p>
<div>
<p v-if="item.validTimeType == 2" class="date">
距离到期仅剩
<span class="sc">{{item.validLeftDays}}</span>
</p>
<p
v-else
class="date status"
>{{parseTime(item.startTime)}}{{parseTime(item.expireTime)}}</p>
<p v-if="item.disabled" class="tips">
<img @click="cancle" src="../../images/coupon/tips.png" />
<span>当前商品不可用</span>
</p>
</div>
</div>
<div class="right">
<img v-show="item.isChecked" src="../../images/coupon/radio-checked.png" />
<img v-show="!item.isChecked" src="../../images/coupon/radio-no.png" />
</div>
</div>
</article>
<no-coupon v-else></no-coupon>
<article v-if="selectCouponList.length" class="bottom">
<van-button @click="confirm" size="large" round color="#449284">确定使用</van-button>
</article>
</section>
</van-popup>
</template>
<script>
import NoCoupon from "@/components/coupon/no-coupon";
import { convertToYuan, parseTime } from "@/utils";
import { mapGetters, mapActions } from "vuex";
export default {
components: {
NoCoupon
},
props: {
showSelectCoupon: {
type: Boolean,
default: true
},
},
data() {
return {
currentCouponInfo: {}
};
},
//
// watch: {
// showSelectCoupon: {
// handler(newVal) {
// console.log('showSelectCoupon');
// // 如果打开了选择弹框,则重新选中已经选中的项目
// if (newVal) {
// this.currentCouponInfo = this.currentCoupon;
// }
// }
// },
// },
computed: {
...mapGetters(['currentCoupon', 'goodsInfo4Coupon', 'selectCouponList']),
isShow: {
get() {
console.log('showSelectCoupon', this.showSelectCoupon);
if(this.showSelectCoupon) {
if(this.currentCoupon && this.currentCoupon.couponId) {
let index = this.selectCouponList.findIndex( item => {
return item.couponId = this.currentCoupon.couponId
});
this.selectCouponList[index].isChecked = true;
// this.currentCoupon.isChecked = true;
// this.selectCouponList.splice(index, 1, this.currentCoupon);
} else {
this.selectCouponList.forEach((cItem, index) => {
cItem.isChecked = false;
});
}
this.currentCouponInfo = this.currentCoupon;
}
return this.showSelectCoupon;
},
set() {}
}
},
mounted() {
// this.$forceUpdate()
},
methods: {
// 取消操作
cancle() {
this.$emit("cancle");
},
// 查找已经选择的
confirm() {
this.$emit("confirm", this.currentCouponInfo);
},
// 切换当前选中优惠券
toggleChecked(item) {
if(item.disabled) return;
if (!item.isChecked) {
this.selectCouponList.forEach((cItem, index) => {
cItem.isChecked = false;
});
item.isChecked = true;
// this.currentCouponInfo = JSON.parse(JSON.stringify(item));
this.currentCouponInfo = item;
} else {
this.currentCouponInfo = {};
item.isChecked = false;
}
},
// 显示元
yuan(fen) {
return convertToYuan(fen);
},
// parseTime
parseTime(time) {
return parseTime(time, "{yyyy}-{mm}-{dd}");
}
}
};
</script>
<style lang="less" scoped>
.coupon-select-wrapper {
position: relative;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 500px;
display: flex;
line-height: 1;
// padding: 10px 15px;
display: flex;
flex-direction: column;
background: #f8f9fa;
// padding: 0 0 80px;
// box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
.title {
position: fixed;
display: flex;
flex-direction: row;
font-size: 18px;
font-weight: 700;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 15px 10px;
background: #f8f9fa;
.c-24 {
display: inline-block;
width: 24px;
height: 24px;
}
& > span {
font-weight: 700;
}
img {
padding: 6px;
// position: relative;
// top: 0;
// right: -140px;
width: 12px;
height: 12px;
}
}
.list-wrapper {
font-size: 13px;
padding: 60px 15px 80px;
color: #979899;
background: #f8f9fa;
.item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
height: 110px;
padding: 16px 0;
margin-top: 12px;
background: #fff;
border-radius: 4px;
.left {
width: 93px;
text-align: center;
.price {
.symbol {
font-size: 12px;
}
.num {
font-size: 30px;
}
}
.desc {
margin: 5px;
font-size: 11px;
color: #676869;
}
}
.center {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 194px;
text-align: left;
// margin: 15px 0;
height: 100%;
.name {
font-size: 14px;
font-weight: 700;
color: #373839;
line-height: 1.3;
}
.date {
font-size: 12px;
color: #676869;
}
.tips {
display: flex;
flex-direction: row;
align-items: center;
line-height: 1;
font-size: 12px;
color: #373839;
margin-top: 6px;
img {
width: 12px;
height: 12px;
margin-right: 2px;
}
}
}
.right {
width: 44px;
text-align: center;
img {
width: 20px;
height: 20px;
}
}
}
}
.bottom {
position: fixed;
left: 0;
bottom: 0;
z-index: 12;
width: 100%;
display: flex;
padding: 10px 15px;
background: #ffffff;
box-shadow: 0px -1px 0px 0px #f0f0f0;
}
.sc {
font-weight: 700;
color: #fb5b52;
}
.thin {
font-weight: 400;
}
.disabled {
.opacity {
opacity: 0.6;
}
.status {
color: #979899 !important;
}
}
}
</style>
<template>
<div class="no-coupon-wrapper">
<img src="../../images/coupon/no-coupon-page.png" alt="">
<span class="desc">暂无优惠券</span>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.no-coupon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
img {
width: 120px;
height: 120px;
}
.desc {
font-size: 15px;
color: #999999;
}
}
</style>
\ No newline at end of file
<template>
<div class="brief-intro-wrapper">
<TeacherIntro :doctorList="doctorList"></TeacherIntro>
<CourseIntro :intro="intro"></CourseIntro>
<CourseHarvest :harvest="harvest"></CourseHarvest>
</div>
</template>
<script>
import TeacherIntro from "@/components/course/course-teacher";
import CourseIntro from "@/components/course/course-intro";
import CourseHarvest from "@/components/course/course-harvest";
export default {
components: {
TeacherIntro,
CourseIntro,
CourseHarvest,
},
props: {
doctorList: {
type: Array,
default() {
return [];
}
},
intro: {
type: String,
default: "",
},
harvest: {
type: Array,
default() {
return [];
}
}
},
};
</script>
<style lang="less" scoped>
.brief-intro-wrapper {
padding-bottom: 20px;
}
</style>
<template>
<section>
<div class="common-error-tips-wrapper">
<img src="../../images/course/danger.png" alt="">
<span>{{errorMsg}}</span>
</div>
<CommonBottomInfo></CommonBottomInfo>
</section>
</template>
<script>
import CommonBottomInfo from "@/components/cme/common-bottom-info";
export default {
components: {
CommonBottomInfo
},
props: {
errorMsg: {
type: String,
default: '此课程已下架无法查看'
}
}
}
</script>
<style lang="less">
.common-error-tips-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120px;
img {
width: 40px;
height: 40px;
}
span {
display: inline-block;
margin-top: 15px;
font-size: 16px;
line-height: 16px;
font-weight: 700;
color: #111A34;
}
}
</style>
<template>
<div class="common-img-title">
<img v-show="imgType == 1" src="../../images/course/icon-title-gj.png" alt="">
<img v-show="imgType == 2" src="../../images/course/icon-title-zj.png" alt="">
<span >{{title}}</span>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "高级职称"
},
imgType: {
type: String | Number,
default: 1,
}
},
}
</script>
<style lang="less" scoped>
.common-img-title {
display: flex;
flex-direction: row;
align-items: center;
height: 48px;
border-bottom: 1px solid #F0F1F2;
margin-bottom: 10px;
// padding: 0 15px;
& > img {
width: 20px;
height: 20px;
}
& > span {
margin-left: 4px;
font-size: 16px;
font-weight: 700;
color: #373839;
}
}
</style>
<template>
<span class="common-title-wrapper">{{title}}</span>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "课程简介"
}
}
}
</script>
<style lang="less" scoped>
.common-title-wrapper {
display: inline-block;
height: 18px;
line-height: 18px;
margin: 30px 15px 15px;
font-size: 18px;
font-weight: 700;
color: #373839;
}
</style>
<template>
<span class="course-button-wrapper button-default" :class="type" @click="btnClick">{{btnText}}</span>
</template>
<script>
export default {
props: {
btnText: {
type: String,
default: "去云鹊医App"
},
type: {
type: String,
default: "primary"
}
},
data() {
return {};
},
methods: {
btnClick() {
if (this.type == "disabled") return;
this.$emit("btnClick");
}
}
};
</script>
<style lang="less" scoped>
.course-button-wrapper {
display: inline-block;
text-align: center;
margin: 0 5px;
&.button-default {
display: inline-block;
padding: 0 16px;
text-align: center;
height: 30px;
line-height: 30px;
// width: 100%;
border-radius: 15px;
font-size: 12px;
font-weight: 700;
color: #ffffff;
background: #449284;
}
&.primary {
color: #ffffff;
background: #449284;
}
&.plain {
color: #ffffff;
background: none;
border: 1px solid rgba(255, 255, 255, 1);
}
&.disabled {
color: rgba(255, 255, 255, 0.95);
background: rgba(68, 146, 132, 0.4);
}
}
</style>
<template>
<div class="course-catalog">
<div class="chapter-box" v-for="(chapter, index) in list" :key="index">
<div class="head">
<div class="name ellipsis">{{ chapter.chapterNameText }}</div>
<div class="total" @click="onToggle(index)">
{{ chapter.lectureNum }}
<img class="arrow" :class="{'arrow-active': chapter.showAll}" src="~@/images/course/arrow_down.png" />
</div>
</div>
<div class="lecture-box" v-show="chapter.showAll">
<div class="item"
:class="{'item-active': curtId === lecture.lectureId}"
v-for="lecture in chapter.lectures"
:key="lecture.lectureId"
@click="onSelect(lecture, 1)">
<img class="icon" src="~@/images/course/icon_play.png" />
<div class="info-box line">
<div class="info">
<p class="subname ellipsis">{{ lecture.lectureNameText }}</p>
<p class="time">
时长: {{ lecture.totalTimeText }}
<span>{{ lecture.statusText }}</span>
</p>
</div>
<div class="btn" v-if="lecture.btnText">{{ lecture.btnText }}</div>
<img v-else class="lock" src="~@/images/course/lock.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default() {
return []
}
},
curtId: {
type: Number,
default: 0,
},
onToggle: {
type: Function
},
onSelect: {
type: Function
}
},
};
</script>
<style lang="less" scoped>
.course-catalog{
.chapter-box{
position: relative;
padding: 0 15px;
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
transform: scale(0.5);
transform-origin: left center;
border-bottom: 1px solid #E7E8E9;
}
.head{
display: flex;
height: 50px;
line-height: 50px;
}
.name{
flex: 1;
width: 100px;
font-size: 15px;
}
.total{
position: relative;
color: #A1A2A3;
font-size: 14px;
padding-right: 15px;
}
.arrow{
position: absolute;
right: 0;
top: 19px;
width: 12px;
height: 12px;
transition: all 0.3s;
}
.arrow-active{
transform: rotate(180deg);
}
}
.lecture-box{
.item{
position: relative;
padding: 15px 0 0 25px;
}
.item-active{
.subname, .time{
color: #449284;
}
}
.icon{
position: absolute;
left: 0;
top: 20px;
width: 12px;
}
.info-box{
position: relative;
display: flex;
align-items: center;
padding-bottom: 15px;
}
.info{
position: relative;
flex: 1;
width: 100px;
padding-right: 5px;
}
.line{
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
transform: scale(0.5);
transform-origin: left center;
border-bottom: 1px solid #E7E8E9;
}
}
.btn{
position: relative;
width: 60px;
height: 26px;
line-height: 26px;
color: #449284;
font-size: 12px;
text-align: center;
&::after{
position: absolute;
content: "";
left: -1px;
top: -1px;
width: 200%;
height: 200%;
border: 1px solid #449284;
transform: scale(0.5);
transform-origin: left top;
border-radius: 26px;
}
}
.lock{
display: block;
width: 16px;
margin: 0 22px;
}
.subname{
color: #676869;
font-size: 15px;
}
.time{
color: #A3A3A3;
font-size: 12px;
margin-top: 8px;
}
}
}
</style>
<template>
<div class="course-comment">
<div v-show="comments.length" class="item" v-for="(item, index) in comments" :key="index">
<img class="img" :src="item.imageUrl || 'https://file.yunqueyi.com/File/doctor_default.png'" alt="头像" @error="onAvatarError" />
<div class="info-box">
<div class="info-user">
<div class="name">{{ item.doctorName }}</div>
<div class="date">{{ item.createTime }}</div>
</div>
<div class="message">{{ item.message }}</div>
<div class="reply-box" v-if="item.len">
<div class="reply-item" v-for="child in item.cList" :key="child.qaId">
<div class="reply-user">
<div class="name">{{ child.doctorName }}</div>
<div class="date">{{ child.createTime }}</div>
</div>
<div class="message">{{ child.message }}</div>
</div>
<div class="show-all" v-if="item.len > 2" @click="spreadAll(index)">
{{ item.showAll ? '收起回复' : `查看全部${item.len}条回复` }}
<img class="show-arrow" :class="{'show-arrow-up': item.showAll}" src="~@/images/course/arrow_down.png" alt="箭头" />
</div>
</div>
</div>
</div>
<div v-show="!comments.length">
<img class="img-big" src="~@/images/course/no_comment.png" alt="" />
</div>
<div class="go-app" @click="download">
<span>打开App,查看更多讨论内容</span>
</div>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default() {
return []
}
},
download: {
type: Function
}
},
data() {
return {
comments: []
};
},
watch: {
list(val) {
this.dealList(val);
}
},
mounted() {
this.dealList(this.list);
},
methods: {
dealList(list) {
this.comments = list.map(item => {
const aList = item.aList || [];
return {
...item,
aList,
len: aList.length,
cList: aList.slice(0, 2),
showAll: false,
}
})
},
spreadAll(index) {
const { ...item } = this.comments[index];
if (item.showAll) {
item.showAll = false;
item.cList = item.aList.slice(0, 2);
} else {
item.showAll = true;
item.cList = item.aList;
}
this.comments.splice(index, 1, item);
},
}
};
</script>
<style lang="less" scoped>
.course-comment {
padding: 0 15px;
.item{
position: relative;
display: flex;
font-size: 14px;
padding: 20px 0;
&::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
transform: scale(0.5);
transform-origin: left center;
border-bottom: 1px solid #F0F0F0;
}
}
.img-big {
display: block;
width: 100px;
margin: 40px auto 5px;
}
.img{
display: block;
width: 32px;
height: 32px;
margin-right: 10px;
}
.info-box{
flex: 1;
width: 100px;
}
.info-user, .reply-user{
display: flex;
padding-bottom: 10px;
.name{
color: #676869;
flex: 1;
width: 80px;
}
.date{
color: #979899;
font-size: 12px;
}
}
.message{
line-height: 22px;
text-align: justify;
word-break: break-all;
}
.reply-box{
margin-top: 15px;
padding: 12px 12px 0;
background-color: #F8F9FA;
}
.reply-item{
padding-bottom: 20px;
}
.show-all{
position: relative;
color: #676869;
text-align: right;
font-size: 12px;
padding: 10px 18px 20px 0;
}
.show-arrow{
position: absolute;
right: 0;
top: 12px;
width: 12px;
height: 12px;
transition: all 0.3s;
}
.show-arrow-up{
transform: rotate(180deg);
}
.go-app{
color: #449284;
font-size: 14px;
line-height: 16px;
text-align: center;
padding: 20px 0;
span{
display: inline-block;
padding-right: 20px;
background: url('~@/images/course/array-right.png') no-repeat right center;
background-size: 14px auto;
}
}
}
</style>
<template>
<div class="course-covers-wrapper">
<div class="tips" v-html="coverTips"></div>
<div v-if="isShowBtn" class="course-button-group">
<CourseButton v-if="!isSingle" type="plain" @btnClick="btnClick(1)" :btnText="leftBtnText"></CourseButton>
<CourseButton @btnClick="btnClick(2)" :btnText="rightBtnText"></CourseButton>
</div>
</div>
</template>
<script>
import CourseButton from "@/components/course/course-button";
export default {
components: {
CourseButton
},
props: {
coverTips: {
type: String,
default: "上次观看至7分钟,正在续播"
},
isShowBtn: {
type: Boolean,
default: true
},
isSingle: {
type: Boolean,
default: false
},
leftBtnText: {
type: String,
default: "学习下一节"
},
rightBtnText: {
type: String,
default: "去云鹊医App"
}
},
data() {
return {};
},
methods: {
btnClick(index) {
this.$emit("btnClick", index);
}
}
};
</script>
<style lang="less" scoped>
.course-covers-wrapper {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
// background: rgba(0, 0, 0, 0.8);
justify-content: center;
align-content: center;
.tips {
display: inline-block;
margin-bottom: 15px;
color: #fff;
text-align: center;
font-size: 15px;
}
.course-button-group {
display: flex;
align-items: center;
justify-content:center;
}
}
</style>
<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>
<template>
<div v-if="harvest.length > 0" class="course-harvest-wrapper">
<CommonTitle title="学习收获"></CommonTitle>
<ul class="list-wrapper">
<li class="item" v-for="(item, index) in harvest" :key="index">
<span class="name">{{ item.name }}</span>
<span class="btn" @click="onClick(item)">查看</span>
</li>
</ul>
</div>
</template>
<script>
import CommonTitle from "@/components/course/common-title";
import { ImagePreview } from 'vant';
export default {
components: {
CommonTitle
},
props: {
harvest: {
type: Array,
default() {
return [];
}
}
},
methods: {
onClick(item) {
ImagePreview([item.url])
}
},
}
</script>
<style lang="less" scoped>
.course-harvest-wrapper {
.list-wrapper {
.item {
display: flex;
justify-content: space-between;
height: 65px;
line-height: 65px;
margin: 0 15px;
align-items: center;
border-bottom: 1px solid #E7E8E9;
.name {
font-size: 15px;
font-weight: 700;
color: #333333;
}
.btn {
display: inline-block;
height: 25px;
line-height: 25px;
font-size: 12px;
font-weight: 700;
padding: 0 18px;
color: #449284;
border-radius: 15px;
border:1px solid rgba(68, 146, 132, 0.45);
}
}
}
}
</style>
<template>
<div v-if="intro" class="course-intro-wrapper">
<CommonTitle></CommonTitle>
<div class="body">
<p class="content" :class="{'ellipsis': isUp}">{{ intro }}</p>
<div class="toggle-btn" v-show="showArrow" @click="isUp=!isUp">
<span class="action">{{ isUp ? "详情" : "收起"}}</span>
<img v-show="isUp" src="~@/images/down.png" alt="" />
<img v-show="!isUp" src="~@/images/up.png" alt="" />
</div>
<div class="offset">{{ intro }}</div>
</div>
</div>
</template>
<script>
import CommonTitle from "@/components/course/common-title"
export default {
components: {
CommonTitle
},
props: {
intro: {
type: String,
default: ""
}
},
data() {
return {
isUp: true,
showArrow: true,
}
},
watch: {
intro(val) {
this.countH();
}
},
mounted() {
this.countH();
},
methods: {
countH() {
if (this.intro) {
this.$nextTick(() => {
const content = this.$el.querySelector('.content').getBoundingClientRect();
const offset = this.$el.querySelector('.offset').getBoundingClientRect();
if (offset.height < (content.height - 1)) {
this.showArrow = false;
}
})
}
}
},
}
</script>
<style lang="less" scoped>
.course-intro-wrapper {
.body {
position: relative;
color: #676869;
font-size: 14px;
margin: 0 15px;
.content {
display: block;
text-align: justify;
line-height: 21px;
&.ellipsis {
height: 63px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
white-space: normal;
}
}
.toggle-btn {
// background: #fff;
position: absolute;
right: 0;
bottom: -18px;
display: flex;
align-items: center;
// padding-left: 30px;
// background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 1));
img {
position: relative;
top: 1px;
margin-left: 6px;
width: 12px;
height: 7px;
}
.action {
color: #449284;
}
}
}
.offset{
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
}
</style>
<template>
<div v-if="doctorList.length > 0" class="course-teacher-wrapper">
<div class="basic-title">讲师介绍</div>
<div class="leader-info" v-for="(item,index) in doctorList" :key="index">
<img :src="item.app_image_url" alt="头像" @error="onAvatarError" />
<div class="leader-text">
<div class="leader-con">
<span>{{item.name}}</span>
<span class="leader-title">{{item.title}}</span>
</div>
<div class="hospital">{{item.hospital}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
doctorList: {
type: Array,
default: () => []
}
},
}
</script>
<style lang="less" scoped>
.course-teacher-wrapper {
padding: 30px 15px 0px;
.basic-title {
font-size: 18px;
line-height: 18px;
color: #373839;
font-weight: 700;
}
.leader-info {
display: flex;
flex-direction: row;
margin-top: 16px;
padding-bottom: 16px;
border-bottom: 1px solid #E7E8E9;
img {
display: inline-block;
width: 44px;
height: 44px;
border-radius: 50%;
}
.leader-text {
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: 14px;
display: flex;
flex-direction: row;
white-space: nowrap;
span {
font-size: 16px;
color: #676869;
}
span:first-child {
font-size: 16px;
color: #373839;
font-weight: 700;
line-height: 1.1;
}
.leader-title {
width: 220px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
line-height: 16px;
margin-left: 6px;
}
}
.hospital {
margin-top: 5px;
font-size: 13px;
color: #979899;
width: 240px;
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
}
}
}
</style>
<template>
<div class="course-ware">
<div v-show="url && loadPdf" class="canvas-box"></div>
<div v-show="!(url && loadPdf)">
<img class="img" src="~@/images/course/empty_ware.png" alt="" />
<p class="tip">暂无相关课件</p>
</div>
</div>
</template>
<script>
/**
* 版本:v2.4.456
* 需引用ES5
* GlobalWorkerOptions.workerSrc需要一个加载路径
*/
import pdfJS from 'pdfjs-dist/es5/build/pdf';
pdfJS.GlobalWorkerOptions.workerSrc = '//cdn.bootcdn.net/ajax/libs/pdf.js/2.4.456/pdf.worker.js';
import coverImg from '@/images/course/lock-big.png';
export default {
props: {
url: {
type: String,
default: ""
},
visible: {
type: Boolean,
default: true,
},
hidePpt: {
type: Number,
default: 0,
},
showFlag: {
type: Number,
default: 0,
}
},
data() {
return {
loadPdf: false
}
},
watch: {
url(val) {
this.drawPDF();
}
},
mounted() {
this.parentDom = this.$el.querySelector('.canvas-box');
this.drawPDF();
},
methods: {
async drawPDF() {
if (!this.url) {
return;
}
try {
const task = pdfJS.getDocument(this.url);
const pdf = await task.promise.then();
let numPages = 0;
if (pdf && pdf._pdfInfo) {
numPages = pdf._pdfInfo.numPages
}
let pageAll = [];
for (let i = 0; i < numPages; i++) {
pageAll.push(pdf.getPage(i + 1).catch(err => ''))
}
const pages = await Promise.all(pageAll);
this.parentDom.innerHTML = '';
if (!this.visible && pages[0]) {
this.createCanvas(pages[0])
} else {
for (let item of pages) {
this.createCanvas(item)
}
}
this.loadPdf = true;
} catch(err) {
console.log(err)
}
},
createCanvas(pdfPage) {
let viewport = pdfPage.getViewport({ scale: 1.0 });
let box = document.createElement("div");
box.style.position = 'relative';
box.style.marginBottom = '30px';
let canvas = document.createElement("canvas");
canvas.width = viewport.width;
canvas.height = viewport.height;
canvas.style.display = 'block';
canvas.style.width = '100%';
if (!this.visible) {
canvas.style['-webkit-filter'] = 'blur(3px)';
canvas.style.filter = 'blur(3px)';
}
let ctx = canvas.getContext("2d");
let renderTask = pdfPage.render({
canvasContext: ctx,
viewport: viewport,
});
box.appendChild(canvas);
if (!this.visible) {
let cover = document.createElement("div");
cover.style.position = 'absolute';
cover.style.left = '0';
cover.style.top = '0';
cover.style.width = '100%';
cover.style.height = '100%';
cover.style.background = `url(${coverImg}) no-repeat center center`;
cover.style.backgroundSize = '50px auto';
// cover.style.backgroundColor = 'rgba(255, 255, 255, .98)';
cover.onclick = () => {
if (!this.$store.getters.logged) {
this.$store.dispatch('goLogin');
return;
}
this.$toast((this.hidePpt && this.showFlag === 0) ? '请前往App查看' : '购买/激活后可查看课件')
}
box.appendChild(cover);
}
this.parentDom.appendChild(box);
}
}
};
</script>
<style lang="less" scoped>
.course-ware{
padding-top: 20px;
overflow: hidden;
.img{
display: block;
width: 100px;
margin: 40px auto 5px;
}
.tip{
color: #999;
font-size: 12px;
text-align: center;
}
}
</style>
<template>
<div class="download-button-wrapper" @click="download">
<img src="../../images/course/pica-icon.png" alt />
<span :class="{'short': needShort}">{{downloadTips}}</span>
</div>
</template>
<script>
export default {
data() {
return {
downloadTips: "打开云鹊医APP",
needShort: false,
}
},
props: {
tag: {
type: String,
default: '88212'
}
},
methods: {
download() {
this.$sendBuriedData({
component_tag: `882#${this.tag}`
});
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
},
},
created() {
setTimeout(() => {
this.downloadTips = '';
this.needShort = true;
}, 5000);
},
};
</script>
<style lang="less" scoped>
.download-button-wrapper {
display: flex;
// width: 100%;
// position: fixed;
position: absolute;
z-index: 1000;
top: 10px;
right: 0;
height: 30px;
align-items: center;
img {
position: relative;
left: 15px;
width: 30px;
height: 30px;
}
span {
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 8px 0 23px;
font-size: 12px;
font-weight: 700;
color: #5ba99b;
background: #fff;
box-shadow:0px 2px 10px 0px rgba(0,0,0,0.1);
width: 120px;
&.short {
width: 10px;
transition: width 1s;
-moz-transition: width 1s; /* Firefox 4 */
-webkit-transition: width 1s; /* Safari 和 Chrome */
-o-transition: width 1s; /* Opera */
padding: 0 12px;
}
}
}
</style>
\ No newline at end of file
<template>
<div
class="pica-video"
:style="{position: isFullScreen ? 'fixed' : ''}">
<template v-if="isWechat">
<video
:id="vid"
:src="url"
:poster="poster"
preload="metadata"
webkit-playsinline
playsinline
x5-playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5"
x5-video-player-fullscreen="false"
mtt-playsinline="true"
controlsList="nodownload"
@loadedmetadata="loadedMetaData"
@timeupdate="onTimeUpdate"
@ended="onEnded"
@error="onError"
>
</video>
<div class="video-cover" @click="showControl = !showControl"></div>
<!-- 控制栏 -->
<div class="control-box" v-show="showControl">
<div class="control-bar">
<div class="btn-play" :class="{'btn-pause': isPaused}" @click="togglePlay"></div>
<div class="progress-box" @click="setProgress">
<div class="progress-inner">
<div class="progress-bar" :style="progressBar"></div>
</div>
<div
class="progress-ball"
:style="{left: `${progressBall}%`}"
@touchstart.stop="onBallStart"
@touchmove.stop="onBallMove"
@touchend.stop="onBallEnd">
</div>
</div>
<div class="time-box">{{ playTime }}/{{ totalTime }}</div>
<!-- <div class="rate-box" @click="showRate=true">
倍速
<div class="rate-list" v-show="showRate">
<div
class="rate-item"
:class="{'rate-active': rate === curtRate}"
v-for="rate in rates"
:key="rate"
@click.stop="selectRate(rate)">{{ rate }}</div>
</div>
</div> -->
<div class="btn-screen" :class="{'btn-screen-mini': isFullScreen}" @click="onFullscreen"></div>
</div>
</div>
<!-- 播放遮罩 -->
<transition name="fade">
<div v-show="logged && isPaused" class="cover cover-play" @click="togglePlay"></div>
</transition>
<!-- 播放错误 -->
<transition name="fade">
<div v-show="logged && showError" class="cover cover-error">
<p>播放失败,请确认网络正常或重新进入页面</p>
</div>
</transition>
<!-- 接续播放 -->
<transition name="fade">
<div v-show="showResume" class="cover cover-resume">
<p>上次观看至{{ dealTime(history) }},正在续播</p>
</div>
</transition>
<!-- 弹窗放在外部处理 -->
<slot></slot>
<!-- 试看提示 -->
<div class="proved-box" v-show="logged && showProved">
可试看{{ dealTime(proved) }},观看完整版请 <span @click="download">购买课程</span>
</div>
<!-- 重新播放,只有试看有 -->
<div class="replay-box" v-show="showReplay" @click="onReplay">重新播放</div>
</template>
<img v-else class="default-img" src="~@/images/video/course_img.png" alt="" />
</div>
</template>
<script>
/**
* 不使用参数,调用两个方法;
* switchUrl(opt)和switchUrlAndPlay(opt)
* opt: {
* url, // 视频链接
* poster, // 封面
* proved, // 试看时长,单位秒
* history, // 上次观看时长,单位秒
* enable, // 是否可看
* }
* 暴露一个回调onVideoEnd,参数:
* type => 1 播放结束,2 试看结束
*/
import { formatLeftTimeObj } from '@/utils';
export default {
name: 'pica-video',
props: {
coverType: {
type: Number,
default: 0,
},
download: {
type: Function,
default: () => {}
}
},
data() {
return {
url: '', // 视频链接
poster: '', // 封面
proved: 0, // 试看时长,单位秒
history: 0, // 上次观看时长,单位秒
enable: true, // 是否可看
vid: '', // 唯一id
playTime: '00:00', // 播放时长
totalTime: '00:00', // 总时长
isPaused: true, // 是否暂停
isFullScreen: false, // 是否全屏
showControl: true, // 显示控制栏
progressBar: {}, // 进度条
progressBall: 0, // 进度球
rates: [2, 1.5, 1, 0.5],
curtRate: 1,
showRate: false,
showProved: false, // 试看提示文字
showError: false, // 播放错误
showResume: false, // 继续播放
showReplay: false, // 显示重播
isWechat: true, // 微信环境
}
},
computed: {
logged() {
return this.$store.getters.logged;
},
},
created() {
this.vid = `video_${this._uid}`;
this.playTime = 0;
const ua = navigator.userAgent;
this.isWechat = ua.match(/(MicroMessenger)\/([\d.]+)/);
this.isAndroid = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
},
mounted() {
if (this.isWechat) {
const player = document.getElementById(this.vid);
player.addEventListener("timeupdate", this.onTimeUpdate, false);
player.addEventListener("play", this.onPlay, false);
player.addEventListener("pause", this.onPause, false);
this.player = player;
}
},
beforeDestroy() {
this.timer && clearTimeout(this.timer);
if (this.currentTime) {
this.reportLeave();
}
if (!this.isPaused && !this.finish) {
this.reportOnOff(2);
}
},
methods: {
// 被接管时,监听上报
onPlay() {
this.reportOnOff(1);
this.isPaused = false;
this.showProved = false;
},
onPause() {
this.reportOnOff(2);
this.reportLeave();
this.isPaused = true;
},
togglePlay() {
if (!this.logged) {
this.$store.dispatch('goLogin');
return;
}
if (!this.url || !this.enable) {
return;
}
let isPaused = this.isPaused;
// 试看,且超过时间
if (this.proved && this.player.currentTime >= this.proved) {
return;
}
this.player.style.display = 'block';
if (isPaused) {
this.player.play();
this.playTime++;
this.showProved = false;
} else {
this.player.pause();
}
// this.reportOnOff(isPaused ? 1 : 2); // 使用监听发送
this.isPaused = !isPaused;
},
// 切换视频
switchUrl(opts = {}) {
if (!this.isWechat) {
return;
}
this.player.style.display = 'block';
const { url = '', poster = '', proved = 0, history = 0, enable = true } = opts;
this.loaded = false;
this.player.src = url;
this.url = url;
this.poster = poster;
this.proved = proved;
this.history = history;
this.enable = enable;
this.provedOver = false;
this.finish = false;
this.opts = opts;
this.currentTime = null;
this.duration = null;
this.showProved = proved > 0;
this.showReplay = false;
if (this.showError) this.showError = false;
},
// 切换并播放
switchUrlAndPlay(opts = {}) {
if (!this.isWechat) {
return;
}
if (!this.isPaused && !this.finish) {
this.reportOnOff(2);
}
if (!this.finish) {
this.reportLeave();
}
if (this.playTime === 0) {
this.player.play();
}
this.switchUrl(opts);
this.player.autoplay = true;
if (!this.enable) {
return;
}
const loop = () => {
if (this.loaded) {
this.player.play();
if (!this.player.paused) {
this.isPaused = false;
// this.reportOnOff(1);
this.showProved = false;
}
return null;
} else {
return setTimeout(() => {
loop()
}, 100);
}
}
this.timer = loop();
},
// 重播
onReplay() {
this.$sendBuriedData({
component_tag: `882#88213`
});
this.player.style.display = 'block';
this.player.currentTime = 0;
this.player.play();
this.isPaused = false;
// this.reportOnOff(1);
this.$emit('onReplay');
this.showReplay = false;
this.provedOver = false;
},
// 加载完毕,获取总时长和音量。问题:移动端点击播放才会触发,且不一定会获取时长
loadedMetaData() {
let duration = this.player.duration;
if (duration) {
this.totalTime = this.formatTime(duration);
this.loaded = true;
if (this.history) {
this.player.currentTime = this.history;
this.showResume = true;
setTimeout(() => {
this.showResume = false;
}, 2000);
}
}
},
// 播放中
onTimeUpdate(e) {
const { currentTime, duration } = e.target;
// 试看,且超过时间
if (this.proved && currentTime >= this.proved) {
this.provedEnd();
}
if (this.provedOver) {
return
}
if (currentTime) {
this.playTime = this.formatTime(currentTime);
}
if (currentTime && duration) {
this.setBarPosition(currentTime * 100 / duration, 'progressBar');
this.currentTime = currentTime;
this.duration = duration;
}
if (currentTime < 0.1 && !this.loaded) {
this.loadedMetaData();
}
},
// 设置进度条位置
setBarPosition(percent, target) {
this[target] = {
transform: `translateX(${percent}%)`,
'-webkit-transform': `-webkit-translateX(${percent}%)`,
'-moz-transform': `-moz-translateX(${percent}%)`,
'-ms-transform': `-ms-translateX(${percent}%)`,
}
if (target === 'progressBar' && !this.isMoveingBall) {
this.progressBall = percent
}
},
// 点击设置进度
setProgress(e) {
if (!this.url) {
return;
}
const { offsetX } = e;
const { width } = e.target.getBoundingClientRect();
this.setProgressPosition(offsetX * 100 / width);
},
// 设置进度最终位置
setProgressPosition(percent) {
const duration = this.player.duration;
// 试看,且超过时间
if (this.proved && percent >= this.proved * 100 / duration) {
return;
}
this.setBarPosition(percent, 'progressBar');
this.player.currentTime = percent * duration / 100;
if (this.isPaused) {
this.player.style.display = 'block';
this.player.play();
this.playTime++;
this.isPaused = false;
// this.reportOnOff(1);
}
},
// 拖动进度条
onBallStart(e) {
this.isMoveingBall = true;
const { width } = this.$el.querySelector('.progress-inner').getBoundingClientRect();
const { pageX } = e.changedTouches[0];
this.ballPageX = pageX;
this.progressW = width;
this.oldBallPercent = this.progressBall;
},
onBallMove(e) {
const { pageX } = e.changedTouches[0];
this.progressBall = this.getNewPercent(pageX);
},
onBallEnd(e) {
this.isMoveingBall = false;
const { pageX } = e.changedTouches[0];
const newPercent = this.getNewPercent(pageX);
this.setProgressPosition(newPercent);
},
// 获取拖动百分比
getNewPercent(pageX) {
let newPercent = (pageX - this.ballPageX) * 100 / this.progressW + this.oldBallPercent;
if (newPercent <= 0) {
newPercent = 0
} else if (newPercent >= 100) {
newPercent = 100
}
return newPercent;
},
selectRate(rate) {
if (!this.url) {
return;
}
this.player.playbackRate = rate;
this.curtRate = rate;
this.showRate = false;
},
formatTime(t) {
const time = formatLeftTimeObj(t);
const h = time.h === '00' ? '' : `${time.h}:`;
return `${h}${time.f}:${time.s}`;
},
dealTime(t) {
let text = '';
if (t < 60) {
text = `${t}秒`
} else {
let second = t % 60;
let minute = parseInt(t / 60);
if (second === 0) {
text = `${minute}分钟`
} else {
text = `${minute}${second}秒`
}
}
return text;
},
// 试看结束
provedEnd() {
this.player.pause();
this.player.currentTime = this.proved;
if (this.isAndroid) {
this.player.style.display = 'none';
}
if (!this.provedOver) {
this.$emit('onVideoEnd', { type: 2 });
this.reportOnOff(2);
this.reportLeave();
}
this.finish = true;
this.showReplay = true;
this.provedOver = true;
this.isFullScreen = false;
},
// 播放结束
onEnded() {
this.$emit('onVideoEnd', { type: 1 });
this.finish = true;
if (this.isAndroid) {
this.player.style.display = 'none';
}
this.reportOnOff(2);
this.reportLeave();
this.$nextTick(() => {
if (this.coverType > 0 && this.coverType !== 13) {
this.isFullScreen = false;
}
})
},
onError() {
if (this.url) {
this.showError = true
}
},
// 全屏
onFullscreen() {
this.isFullScreen = !this.isFullScreen;
},
// 上报播放、暂停,status:1开始,2暂停
reportOnOff(status = 1) {
const { chapterId, courseId, lectureId } = this.opts;
if (!chapterId || !courseId || !lectureId) {
return;
}
this.POST('contents/files/resourceRecord', {
fileType: 1,
resourceInfo1: courseId,
resourceInfo2: chapterId,
resourceInfo3: lectureId,
resourceType: 1,
status,
systemType: 3,
timestamp: Date.now(),
})
},
// 上报离开
reportLeave() {
if (!this.currentTime || !this.duration) {
return;
}
const { chapterId, courseId, lectureId } = this.opts;
if (!chapterId || !courseId || !lectureId) {
return;
}
this.POST('contents/joinCourse/', {
requestList: [{
chapterId,
courseId,
lectureId,
nowTime: this.currentTime,
time: this.duration,
timeStamp: Date.now(),
}],
})
},
},
}
</script>
<style lang="less" scoped>
.pica-video{
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #333;
overflow: hidden;
z-index: 1000;
video{
position: absolute;
left: 50%;
top: 50%;
width: 100%;
max-width: 100%;
max-height: 100%;
transform: translate3d(-50%, -50%, 0);
&::-internal-media-controls-download-button {
display: none;
}
&::-webkit-media-controls-enclosure {
overflow: hidden;
}
&::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
}
.video-cover{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.control-box{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 44px;
}
.control-bar{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
left: 0;
top: 0;
width: 100%;
height: 44px;
// transform: translate3d(0, 60px, 0);
// transition: transform 0.2s;
background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}
.btn-play{
width: 44px;
height: 44px;
background-image: url('~@/images/video/play.png');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 24px auto;
}
.btn-pause{
background-image: url('~@/images/video/pause.png');
}
.progress-box{
position: relative;
display: flex;
align-items: center;
flex: 1;
width: 50px;
height: 44px;
margin-left: 5px;
}
.progress-inner{
position: relative;
width: 50px;
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.4);
overflow: hidden;
}
.progress-bar{
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: #449284;
transform: translateX(0);
pointer-events: none;
}
.progress-ball{
position: absolute;
left: 0;
top: 50%;
width: 7px;
height: 14px;
transform: translate3d(-3px, -7px, 0);
background-color: #fff;
border-radius: 2px;
}
.time-box{
color: #fff;
font-size: 12px;
line-height: 14px;
width: 100px;
text-align: right;
}
.btn-screen{
width: 44px;
height: 44px;
background-image: url('~@/images/video/screen_full.png');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 20px auto;
}
.btn-screen-mini{
background-image: url('~@/images/video/screen_mini.png');
}
.rate-box{
position: relative;
color: #fff;
width: 40px;
height: 44px;
line-height: 44px;
font-size: 12px;
text-align: center;
}
.rate-list{
position: absolute;
left: 0;
bottom: 44px;
width: 100%;
background: rgba(0, 0, 0, .7);
border-radius: 2px;
}
.rate-item{
height: 30px;
line-height: 30px;
}
.rate-active{
color: #00a1d6;
}
.proved-box{
position: absolute;
color: #fff;
font-size: 12px;
left: 10px;
bottom: 30px;
height: 24px;
line-height: 24px;
padding: 0 12px;
border-radius: 12px;
background-color: rgba(0, 0, 0, .6);
span{
color: #FFA34B;
}
}
.cover-play{
background: url('~@/images/video/cover_play.png') no-repeat center center;
background-size: 50px auto;
}
.cover-error, .cover-resume{
p{
position: absolute;
left: 0;
top: 50%;
width: 100%;
color: #fff;
font-size: 15px;
text-align: center;
transform: translate3d(0, -50%, 0);
}
}
.replay-box{
position: absolute;
color: #fff;
font-size: 12px;
right: 10px;
bottom: 12px;
height: 24px;
line-height: 24px;
padding: 0 12px 0 22px;
border-radius: 12px;
background: url('~@/images/video/replay.png') no-repeat left center;
background-size: 23px auto;
background-color: rgba(0, 0, 0, .6);
}
.cover{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
}
.default-img{
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate3d(-50%, -50%, 0);
}
}
</style>
<template>
<div class="fixed-qb-header">
<div class="header-info" :class="!isWeb ? 'top-set' : ''">
<div class="info-first">
<img v-if="directoryInfo.avatarImageUrl" :src="directoryInfo.avatarImageUrl">
<img v-if="!directoryInfo.avatarImageUrl" src="../../images/question/portrait.png">
<div class="infor">
<p class="name">{{directoryInfo.name}} 医生</p>
<p class="question-result">已做题<span>{{directoryInfo.finishedNum}}</span>错误题<span class="err">{{directoryInfo.wrongTitle}}</span>正确率<span class="suc">{{directoryInfo.correctRatio}}%</span></p>
</div>
</div>
<div class="info-second">
<div class="item" @click="wrongBook(1)"><img src="../../images/question/text.png"><span>错题集</span><span v-if="directoryInfo.wrongTitleBook">({{directoryInfo.wrongTitleBook}})</span></div>
<div class="item" @click="wrongBook(2)"><img src="../../images/question/heart-h.png"><span>收藏</span><span v-if="directoryInfo.collectTitleBook">({{directoryInfo.collectTitleBook}})</span></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isWeb: window.__isWeb,
}
},
props: {
directoryInfo: {
type: Object,
default: () => {}
},
},
methods: {
wrongBook(type) {
this.$emit('handlerBook',type)
},
},
}
</script>
<style lang="less" scoped>
.fixed-qb-header{
position: relative;
.header-info{
position: fixed;
z-index: 200;
background-color: #FFFFFF;
padding: 0 16px;
box-sizing: border-box;
width: 100%;
&.top-set{
top: 73px;
}
.info-first{
display: flex;
padding: 20px 0;
img{
width: 44px;
height: 44px;
border-radius: 50%;
}
.infor{
margin-left: 12px;
.name{
color: #373839;
font-size: 18px;
font-weight: 700;
line-height: 22px;
}
.question-result{
font-size: 14px;
color: #676869;
line-height: 16px;
margin-top: 9px;
span{
margin-left: 3px;
margin-right: 15px;
color: #373839;
&.err{
color: #ED3131;
}
&.suc{
color: #449284;
}
}
}
}
}
.info-second{
display: flex;
justify-content: space-between;
align-items: center;
.item{
width: 165.5px;
height: 40px;
border-radius: 6px;
background-color: #F8F9FA;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0;
vertical-align: middle;
img{
width: 20px;
height: 20px;
margin-right: 8px;
}
span:first-of-type{
font-size: 14px;
font-weight: 700;
color: #373839;
height: 20px;
line-height: 20px;
}
span:last-of-type{
font-size: 12px;
margin-left: 2px;
height: 20px;
line-height: 20px;
margin-top: -1px;
}
}
}
}
}
</style>
<template>
<section class="experience-dialog-wrapper">
<van-overlay :show="showDialog" class="v-overlay-q">
<section class="loading-wrapper" >
<article class="content">
<img class="img-tips" src="../../images/question/note.png" alt="">
<p class="tips">您已完成本次免费练习体验</p>
<p class="status"><span class="cm rn">{{statisConfig.rightNum}}</span>题,错<span class="cm en">{{statisConfig.errorNum}}</span>题,正确率<span class="cm rate">{{statisConfig.rate}}%</span></p>
<p class="guide-tips">想体验完整题目,请先激活或购买题库</p>
<div class="btn-wrapper">
<span class="plain" @click="activeCard">去激活</span>
<span class="primary" @click="buyCard">去购买</span>
</div>
</article>
<img class="bt-close" @click="close" src="../../images/question/dialog-close.png" alt="">
</section>
</van-overlay>
</section>
</template>
<script>
export default {
props: {
statisConfig: {
type: Object,
default: () => {
return {
rightNum: 0,
errorNum: 0,
rate: 0
}
}
},
showDialog: {
type: Boolean,
default: true,
},
// rightNum: {
// type: Number | String,
// default: 0,
// },
// errorNum: {
// type: Number | String,
// default: 0,
// },
// rate: {
// type: Number | String,
// default: 0,
// }
},
methods: {
activeCard() {
this.$emit('activeCard');
},
buyCard() {
this.$emit('buyCard');
},
close() {
this.$emit('close');
}
},
}
</script>
<style lang="less" scoped>
.experience-dialog-wrapper {
.v-overlay-q {
.loading-wrapper {
text-align: center;
position: fixed;
top: 50%;
left: 50%;
width: 300px;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
.content {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
padding: 20px 15px 30px;
background-color: #ffffff;
border-radius: 3px;
.img-tips {
width: 80px;
height: 80px;
}
.tips {
margin: 10px 0;
font-size: 16px;
font-weight: 700;
color: #373839;
}
.status {
font-size: 13px;
color: #676869;
.cm {
font-size: 18px;
font-weight: 700;
padding: 0 4px;
}
.rn {
color: #373839;
}
.en {
color: #ED3131;
}
.rate {
color: #449284;
}
}
.guide-tips {
margin: 4px 0 30px;
font-size: 12px;
color: #979899;
}
.btn-wrapper {
display: flex;
flex-direction: row;
align-content: center;
& > span {
width: 115px;
height: 40px;
line-height: 40px;
font-size: 16px;
font-weight: 700;
border-radius: 20px;
&.plain {
border: 1px solid #449284;
color: #449284;
margin-right: 10px;
}
&.primary {
color: #FFFFFF;
background: #449284;
}
}
}
}
.bt-close {
margin-top: 20px;
width: 30px;
height: 30px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="free-tips-wrapper" @click="buyCard">
<div class="left">
<img src="../../images/question/warning-h.png" alt />
<span class="text">免费练习{{total}}题,解锁全部题目需完成购买</span>
</div>
<img class="right" src="../../images/question/arror-right.png" alt />
</div>
</template>
<script>
export default {
props: {
total: {
type: String | Number,
default: 5
}
},
methods: {
buyCard() {
this.$emit("buyCard");
}
},
}
</script>
<style lang="less" scoped>
.free-tips-wrapper {
width: 100%;
position: fixed;
left: 0;
bottom: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 40px;
line-clamp: 40px;
padding-left: 15px;
background: #FEFAF5;
.left {
display: flex;
flex-direction: row;
align-items: center;
& > img {
width: 13px;
height: 13px;
margin-right: 4px;
}
& > span {
font-size: 13px;
color: #E6A23C;
}
}
.right {
padding: 10px 15px;
width: 15px;
height: 15px;
}
}
</style>
\ No newline at end of file
<template>
<div class="no-question-wrapper">
<img v-if="commitKind == 1" src="../../images/question/no-error.png" alt="">
<img v-else-if="commitKind == 2" src="../../images/question/no-collect.png" alt="">
<img v-else src="../../images/question/no-collect.png" alt="">
<span>{{commitKind == 1 ? "您答错的题目会自动记录在这里哦!" : commitKind == 2 ? "您收藏的题目会自动记录在这里哦!" : "那些题目都去哪儿了!?"}}</span>
</div>
</template>
<script>
export default {
props: {
commitKind: { // 答题来源 1:错题集 2:收藏 3:题库
type: Number | String,
default: 1
}
}
}
</script>
<style lang="less" scoped>
.no-question-wrapper {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
img {
width: 120px;
height: 120px;
}
span {
font-size: 15px;
color: #999999;
}
}
</style>
\ No newline at end of file
<template>
<section class="qeustion-content-wrapper">
<article class="content" v-show="currentQuestion.unionType">
<p class="text" v-show="currentQuestion.unionType == 1" v-html="currentQuestion.unionQuestion"></p>
<article
class="select-wrapper"
style="padding: 10px 15px 20px;"
v-show="currentQuestion.unionType == 2"
>
<div class="item" v-for="(item, index) in currentQuestion.options" :key="index">
<span class="option lh-22">{{getOrderVac(index)}}.</span>
<span class="content">{{item.text}}</span>
</div>
</article>
<commonSpliteLine></commonSpliteLine>
</article>
<article class="title-wrapper">
<span class="type" :class="{'multi': currentQuestion.typeId == 2, 'top-1': isAndroid}">
<span :class="{'top-2': isAndroid}">{{currentQuestion.typeId == 1 ? "单选题" : currentQuestion.typeId == 2 ? "多选题" : "判断题"}}</span>
</span>
<span class="content" v-html="currentQuestion.question"></span>
<!-- <img src="https://files.yunqueyi.com/image/png/protal/project/20200702161856970.png" /> -->
</article>
<article class="select-wrapper">
<div
class="item"
v-for="(item, index) in currentQuestion.options"
:key="index"
@click="selectOption(index)"
>
<span
v-if="!item.isSelected && !((item.isSelected && !currentQuestion.commitFlag) || (!item.isSelected && currentQuestion.commitFlag && item.isCorrect))"
class="option border"
>{{getOrderVac(index)}}</span>
<span
v-else-if="(item.isSelected && !currentQuestion.commitFlag) || (!item.isSelected && currentQuestion.commitFlag && item.isCorrect)"
class="option bg"
>{{getOrderVac(index)}}</span>
<template v-else>
<img v-if="item.isSelected && item.isCorrect" src="../../images/question/correct.png" alt />
<img v-if="item.isSelected && !item.isCorrect" src="../../images/question/error.png" alt />
</template>
<span
v-if="!currentQuestion.commitFlag"
class="content"
:class="{'select': item.isSelected}"
>{{currentQuestion.unionType == 2 ? getOrderVac(index) : item.text}}</span>
<span
v-else
class="content"
:class="{'select': item.isCorrect, 'error': item.isSelected && !item.isCorrect}"
>{{currentQuestion.unionType == 2 ? getOrderVac(index) : item.text}}</span>
</div>
</article>
<article
class="c-btn-wrapper"
v-show="currentQuestion.typeId == 2 && !currentQuestion.commitFlag"
@click="commitAnswer()"
>
<van-button size="large" round color="#449284">确 认</van-button>
</article>
<article class="answer-wrapper" v-show="currentQuestion.isAnalyzed">
<span class="content">正确答案:{{getShowAnswer(currentQuestion.answer)}}</span>
</article>
<article class="analysis-wrapper" v-show="currentQuestion.isAnalyzed">
<span class="title">解析</span>
<div v-show="currentQuestion.intro && !currentQuestion.intro.startsWith('<img')" class="content" v-html="currentQuestion.intro"></div>
<div v-show="currentQuestion.intro && currentQuestion.intro.startsWith('<img')" class="content-nmt" v-html="currentQuestion.intro"></div>
<div class="no-intro" v-show="!currentQuestion.intro">
<img src="../../images/question/no-analysis.png" alt />
<span class="text">暂无相关解析</span>
</div>
</article>
</section>
</template>
<script>
import commonSpliteLine from "@/components/common/common-splite-line";
import { mapGetters, mapActions } from "vuex";
import { getOrderText } from "@/utils";
export default {
components: {
commonSpliteLine
},
props: {
questionObj: {
type: Array,
default: () => {}
}
},
computed: {
...mapGetters([
"questionList",
"currentQuestion",
"commonConfig",
"titleConfig",
"userInfo"
])
},
data() {
return {
isAndroid: window.__isAndroid
};
},
methods: {
// 处理多选答案
getShowAnswer(answerStr) {
if(!answerStr) return "";
return answerStr.split(",").join("、");
},
// 将序号转成字母
getOrderVac(index) {
return getOrderText(index);
},
// 选择选项
selectOption(index) {
if (this.currentQuestion.commitFlag) return;
// 多选题 -- 重新设置答案(myAnswer)
if (this.currentQuestion.typeId == 2) {
// 只记录当前选项,不提交答案
this.currentQuestion.options[index].isSelected = !this.currentQuestion.options[index].isSelected;
let myAnswer = "";
this.currentQuestion.options.forEach((item, index) => {
if (item.isSelected) {
myAnswer += this.getOrderVac(index);
}
});
myAnswer = myAnswer.split("").join(",");
this.currentQuestion.myAnswer = myAnswer;
} else {
this.currentQuestion.options[index].isSelected = true;
// 单选题或者判断题直接设置commitFlag
if (this.currentQuestion.options[index].isCorrect) {
this.currentQuestion.commitFlag = 1;
} else {
this.currentQuestion.commitFlag = 2;
}
let myAnswer = this.getOrderVac(index);
let isAnalyzed =
this.currentQuestion.commitFlag &&
myAnswer != this.currentQuestion.answer;
this.currentQuestion.isAnalyzed = isAnalyzed;
this.currentQuestion.myAnswer = this.getOrderVac(index);
this.commitAnswer();
}
this.$forceUpdate();
console.log("in commit", this.currentQuestion.myAnswer);
},
// 提交答案
commitAnswer() {
this.checkTokenForNative( () => {
let params = {
commitKind: this.commonConfig.commitKind, // 答题来源 1:错题集 2:收藏 3:题库
directoryId: this.currentQuestion.directoryId, // 题库ID
myAnswer: this.currentQuestion.myAnswer, // 我的答案,单选时单个答案,如A;多选答案,按照顺序使用
paperId: this.currentQuestion.paperId, // 试卷ID
paperIndex: this.currentQuestion.paperIndex, // 试卷索引(随机试卷的第n套)
resultId: this.titleConfig.resultId, // 刷题库轮次ID,刷收藏和错题集时为0
// rightFlag: 1, // 答题对错:1对 2错
titleId: this.currentQuestion.titleId, // 题目ID
titleNo: this.currentQuestion.titleNo, // 题目ID
setEntry: true,
token: this.userInfo.userToken
};
// 计算是否答对了题目(只有多选题,才做相应处理)
// if (this.currentQuestion.typeId == 2) {
let isRight = this.currentQuestion.myAnswer == this.currentQuestion.answer;
if (isRight) {
this.currentQuestion.commitFlag = 1;
} else {
this.currentQuestion.commitFlag = 2;
this.currentQuestion.isAnalyzed = true;
}
// }
this.POST(`onlineexam/practise/commit`, params).then(({ data }) => {
console.log('in commitAnswer res', data);
// if(data.resultType == 1) {
// this.currentQuestion.commitFlag = 1;
// } else {
// this.currentQuestion.commitFlag = 2;
// }
}).catch( error => {
this.currentQuestion.commitFlag = 0;
this.currentQuestion.isAnalyzed = false;
})
});
}
}
};
</script>
<style lang="less">
.qeustion-content-wrapper, .title-wrapper, .answer-wrapper, .analysis-wrapper {
.content {
img {
margin-top: 15px;
max-width: 100% !important;
}
}
.content-nmt {
img {
margin-top: 0;
max-width: 100% !important;
}
}
}
</style>
<style lang="less" scoped>
.qeustion-content-wrapper {
// img {
// width: 98% !important;
// }
font-size: 14px;
.content {
.text {
padding: 20px 15px;
font-size: 14px;
color: #373839;
}
}
.title-wrapper {
padding: 20px 15px 15px;
box-sizing: border-box;
.type {
position: relative;
top: 2.8px;
left: 0;
display: inline-block;
width: 47px;
height: 16px;
line-height: 12px;
margin-right: 4px;
border-radius: 2px;
background: #5890dd;
font-size: 12px;
& > span {
position: absolute;
top: 2px;
left: 4.5px;
color: #ffffff;
&.top-2 {
top: 2.8px;
}
}
&.multi {
background: #e6a23c;
}
&.top-1 {
top: 1px;
}
}
.content {
font-size: 16px;
font-weight: 700;
color: #333333;
// & > img {
// margin-top: 15px !important;
// width: 100% !important;
// }
}
img {
margin-top: 15px !important;
width: 100% !important;
}
}
.select-wrapper {
padding: 0 15px 8px;
.item {
display: flex;
// height: 40px;
// line-height: 1.2;
font-size: 16px;
align-items: center;
padding: 8px 0;
.option {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
// vertical-align: middle;
margin-right: 10px;
color: #373839;
&.border {
border: 1px solid #c7c8c9;
border-radius: 50%;
line-height: 19px;
}
&.bg {
color: #fff;
background: #449284;
border-radius: 50%;
}
&.lh-22 {
line-height: 22px;
}
}
& > img {
width: 18px;
height: 18px;
margin-right: 10px;
}
.select {
color: #449284;
}
.error {
color: #ed3131;
}
}
}
.c-btn-wrapper {
padding: 20px 15px;
}
.answer-wrapper {
margin: 20px 15px;
border-radius: 6px;
height: 40px;
line-height: 40px;
background: #f8f9fa;
.content {
margin: 10px 0;
height: 16px;
line-height: 1;
font-size: 16px;
font-weight: 700;
padding: 0 15px;
}
}
.analysis-wrapper {
padding: 15px 15px 30px;
.title {
display: flex;
height: 16px;
line-height: 1;
margin-bottom: 15px;
font-size: 16px;
font-weight: 700;
color: #373839;
&::before {
display: inline-block;
content: "";
height: 15px;
width: 3px;
margin-right: 9px;
background: #f68367;
border-radius: 2px;
}
}
.content {
font-size: 14px;
font-weight: 400;
color: #373839;
& > img {
width: 100% !important;
}
}
.no-intro {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0 120px;
img {
width: 100px;
height: 100px;
}
.text {
height: 12px;
line-height: 12px;
font-size: 12px;
color: #999999;
}
}
}
}
</style>
<template>
<section class="qeustion-footer-wrapper">
<article class="left" @click="toggleAnalysis()">
<img src="../../images/question/analysis.png" alt />
<span class="text">解析</span>
</article>
<article class="center" @click="toggleCollect()">
<img v-show="currentQuestion.favorFlag == 0" src="../../images/question/heart-b.png" alt />
<img v-show="currentQuestion.favorFlag != 0" src="../../images/question/heart.png" alt />
<span class="text">收藏</span>
</article>
<article class="right">
<span class="pre" :class="{'disabled': currentQuestion.titleNo == 1}" @click="previous">上一题</span>
<span class="next" :class="{'disabled': currentQuestion.titleNo == totalCount}" @click="next">下一题</span>
</article>
</section>
</template>
<script>
import { Toast } from "vant";
import { mapGetters, mapActions } from "vuex";
import { findQuestionIndexNo } from "@/utils";
export default {
props: {},
data() {
return {
queryParams: {
commitKind: 3, // 答题来源 1:错题集 2:收藏 3:题库
directoryId: 1748, // 题库ID,获取错题集或收藏时传0
pageFlag: 0, // 翻页标记:0往前翻页 1往后翻页
pageSize: 5, // 每页大小
secondSubjectId: 106, // 二级学科分类ID:用于判断学科下目录免费题数
titleNo: 0, // 起始或结束题目序号,首次进入页面时传0,系统自动定位到上次做的题
}
};
},
computed: {
...mapGetters([
"commitKind",
"questionList",
"currentQuestion",
"totalCount",
"userInfo",
"titleConfig",
"commonConfig",
])
},
methods: {
// 上一页 // 有可能要触发上分页(前端的个数只有一条)
previous() {
if(!this.canRun()) return;
this.$sendBuriedData({
component_tag: `886#88601`
});
if (this.currentQuestion.titleNo == 1) {
Toast("已是第一题");
} else {
let cIndex = findQuestionIndexNo(this.questionList, "titleNo", this.currentQuestion.titleNo);
// 如果没有找到,则不做后面操作
if(!this.questionList[cIndex - 1]) return;
this.$store.commit(
"SET_CURRENT_QUESTION",
this.questionList[cIndex - 1] || { answerList: [] }
);
console.log(cIndex == 1, this.currentQuestion.titleNo >= 2);
if(cIndex == 1 && this.currentQuestion.titleNo >= 2) {
this.$emit("pageQuestion", 0, this.questionList[0].titleNo);
}
}
},
// 下一页 // 有可能要触发下分页(后面的个数只有一条)
next() {
if(!this.canRun()) return;
this.$sendBuriedData({
component_tag: `886#88602`
});
if (this.currentQuestion.titleNo == this.totalCount
// if (this.currentQuestion.titleNo == this.questionList.length
|| this.currentQuestion.titleNo == this.questionList[this.questionList.length - 1].titleNo) {
this.$emit("statistics");
} else {
let cIndex = findQuestionIndexNo(this.questionList, 'titleNo', this.currentQuestion.titleNo);
this.$store.commit(
"SET_CURRENT_QUESTION",
this.questionList[cIndex + 1] || { answerList: [] }
);
console.log(this.currentQuestion.isAnalyzed || (this.currentQuestion.commitFlag == 2));
if((cIndex == this.questionList.length - 2) && (this.questionList.length < this.totalCount)) {
this.$emit("pageQuestion", 1, this.questionList[this.questionList.length - 1].titleNo);
}
}
},
// 解析
toggleAnalysis() {
this.currentQuestion.isAnalyzed = true;
if(!this.currentQuestion.commitFlag) {
this.commitAnswer();
} else {
setTimeout(() => {
this.$emit("scrollTop");
}, 200);
}
this.$sendBuriedData({
component_tag: `886#88603`
});
},
// 收藏/不收藏
toggleCollect() {
this.favor(this.currentQuestion);
// this.$store.commit('SET_CURRENT_QUESTION', this.currentQuestion);
},
// 收藏/取消收藏
favor() {
if(!this.canRun()) return;
let favorFlag = this.currentQuestion.favorFlag;
let sPoint = favorFlag == 1 ? "88605" : "88604";
this.$sendBuriedData({
component_tag: `886#${sPoint}`
});
let param = {
dataType: 2,
directoryId: this.currentQuestion.directoryId,
examTitleId: this.currentQuestion.titleId,
operateType: favorFlag == 1 ? 2 : 1, // 操作类型:1:收藏 2:取消收藏
paperId: this.currentQuestion.paperId,
paperIndex: this.currentQuestion.paperIndex,
token: this.userInfo.userToken || this.token,
setEntry: true
};
this.currentQuestion.favorFlag = this.currentQuestion.favorFlag == 0 ? 1 : 0;
let operateText = "收藏成功";
if(param.operateType == 2) {
operateText = "取消收藏";
}
Toast(operateText);
this.POST("onlineexam/collectExamTitle", param).then(res => {
if (res.code == "000000") {
if(res.data) {
// let cIndex = this.questionList.findIndex( item => {
// return item.titleNo = this.currentQuestion.titleNo;
// });
// this.questionList[cIndex].favorFlag = favorFlag == 0 ? 1 : 0;
// this.currentQuestion.favorFlag = favorFlag == 0 ? 1 : 0;
}
}
});
},
// 提交答案
commitAnswer() {
this.checkTokenForNative( () => {
let params = {
commitKind: this.commonConfig.commitKind, // 答题来源 1:错题集 2:收藏 3:题库
directoryId: this.currentQuestion.directoryId, // 题库ID
myAnswer: this.currentQuestion.myAnswer, // 我的答案,单选时单个答案,如A;多选答案,按照顺序使用
paperId: this.currentQuestion.paperId, // 试卷ID
paperIndex: this.currentQuestion.paperIndex, // 试卷索引(随机试卷的第n套)
resultId: this.titleConfig.resultId, // 刷题库轮次ID,刷收藏和错题集时为0
// rightFlag: 1, // 答题对错:1对 2错
titleId: this.currentQuestion.titleId, // 题目ID
titleNo: this.currentQuestion.titleNo, // 题目ID
setEntry: true,
token: this.userInfo.userToken,
};
let isRight = this.currentQuestion.myAnswer == this.currentQuestion.answer;
if (isRight) {
this.currentQuestion.commitFlag = 1;
} else {
this.currentQuestion.commitFlag = 2;
}
this.currentQuestion.isAnalyzed = true;
// this.$forceUpdate();
setTimeout(() => {
this.$emit("scrollTop");
}, 200);
this.POST(`onlineexam/practise/commit`, params).then(({ data }) => {
console.log('in commitAnswer res', data);
// if(data.resultType == 1) {
// this.currentQuestion.commitFlag = 1;
// } else {
// this.currentQuestion.commitFlag = 0;
// }
}).catch( error => {
this.currentQuestion.commitFlag = 0;
this.currentQuestion.isAnalyzed = false;
})
});
}
}
};
</script>
<style lang="less" scoped>
.qeustion-footer-wrapper {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
display: flex;
height: 60px;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #ffffff;
font-size: 14px;
box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
padding: 0 5px 0 15px;
.left {
display: flex;
flex-direction: column;
margin-left: 10px;
align-items: center;
& > img {
width: 18px;
height: 18px;
}
.text {
font-size: 12px;
}
}
.center {
display: flex;
flex-direction: column;
align-items: center;
& > img {
width: 18px;
height: 18px;
}
.text {
font-size: 12px;
}
}
.right {
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
width: 210px;
color: #373839;
span {
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
&.pre {
border-radius: 20px 0 0 20px;
border: 1px solid #979899;
&.disabled {
color: #979899;
}
}
&.next {
border-radius: 0 20px 20px 0;
border: 1px solid #979899;
border-left: 0px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<section class="question-header-wrapper">
<img @click="goBack" class="left" src="../../images/left-array-black.png" alt="">
<span class="center">{{title}}</span>
<div class="right" >
<span v-show="total">
<span class="order">{{order}}</span><span class="total">/{{total}}</span>
</span>
</div>
</section>
</template>
<script>
export default {
props: {
title: {
type: String,
default: "第一篇 基础知识",
},
order: {
type: Number | String,
default: 0,
},
total: {
type: Number | String,
default: 0,
}
},
methods: {
//返回
goBack() {
this.$router.back(-1);
// rocNative.goBack();
},
},
}
</script>
<style lang="less" scoped>
.question-header-wrapper {
width: 100%;
// box-sizing: content-box;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 28px 15px 0;
// padding-top: 28px;
// margin: 0 15px;
background: #fff;
.left {
height: 25px;
padding-right: 35px;
}
.center {
height: 40px;
line-height: 40px;
font-size: 17px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: #000000;
padding: 0 10px;
}
.right {
min-width: 60px;
font-size: 14px;
text-align: right;
span {
&.order {
color: #373839;
font-weight: 700;
}
&.total {
color: #979899;
}
}
}
}
</style>
\ No newline at end of file
...@@ -11,13 +11,13 @@ import vueFilters from '@/utils/filter'; ...@@ -11,13 +11,13 @@ import vueFilters from '@/utils/filter';
import BuriedPoint, { sendBuriedData } from 'web-buried-point'; import BuriedPoint, { sendBuriedData } from 'web-buried-point';
import Vant from 'vant'; import Vant from 'vant';
import 'vant/lib/index.css'; import 'vant/lib/index.css';
import clipboard from 'clipboard'; // import clipboard from 'clipboard';
import { querystring } from '@/utils'; import { querystring } from '@/utils';
import 'swiper/swiper-bundle.css'; import 'swiper/swiper-bundle.css';
import PicaCallApp, { callApp } from 'pica-call-app'; import PicaCallApp, { callApp } from 'pica-call-app';
Vue.prototype.$callApp = callApp; Vue.prototype.$callApp = callApp;
Vue.prototype.clipboard = clipboard; // Vue.prototype.clipboard = clipboard;
const envList = ['dev', 'test']; const envList = ['dev', 'test'];
const { BUILD_ENV } = process.env; const { BUILD_ENV } = process.env;
...@@ -62,35 +62,11 @@ function fliterRoute(query, path) { ...@@ -62,35 +62,11 @@ function fliterRoute(query, path) {
delete query.token; delete query.token;
has = true; has = true;
} }
// 课程详情页去掉projectId
if (path === '/course-detail' && query.projectId) {
sessionStorage.setItem('projectId', query.projectId);
delete query.projectId;
has = true;
}
// 商品详情页去掉code
if (path === '/goods-detail' && query.code) {
store.dispatch('getWxUserInfo', query.code);
delete query.code;
let goodsDetailParams = sessionStorage.getItem('goodsDetailParams');
goodsDetailParams = goodsDetailParams ? JSON.parse(goodsDetailParams) : {};
Object.assign(query, goodsDetailParams);
has = true;
}
return [query, has]; return [query, has];
} }
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
console.log('beforeEach @@@@@@'); console.log('beforeEach @@@@@@');
// 商品页授权登录路由处理
if (to.path === '/goods-detail') {
let searchQuery = querystring(location.search);
if (searchQuery.code) {
let newUrl = location.origin + location.pathname + '#/goods-detail?code=' + searchQuery.code;
location.replace(newUrl);
return;
}
}
let query = { ...to.query }; let query = { ...to.query };
// 登录token保存并替换路径 // 登录token保存并替换路径
let [newQuery, has] = fliterRoute(query, to.path); let [newQuery, has] = fliterRoute(query, to.path);
......
/**
* G-Logger
* version 1.0.0
* Author: Anndy Yang(Guang Jun)
* description: 模拟log4j的日志插件(Vue插件,同时支持浏览器环境)
*
* log4j提供了4种日志级别和2个日志开关。
官方网址: http://logging.apache.org/log4j/1.2/
DEBUG:输出调试信息;指出细粒度信息事件对调试应用程序是非常有帮助的。
INFO: 输出提示信息;消息在粗粒度级别上突出强调应用程序的运行过程。
WARN: 输出警告信息;表明会出现潜在错误的情形。
ERROR:输出错误信息;指出虽然发生错误事件,但仍然不影响系统的继续运行。
FATAL: 输出致命错误;指出每个严重的错误事件将会导致应用程序的退出。
ALL level:打开所有日志记录开关;是最低等级的,用于打开所有日志记录。
OFF level:关闭所有日志记录开关;是最高等级的,用于关闭所有日志记录。
按照范围从小到大排序:OFF level > FATAL > ERROR > WARN > INFO > DEBUG > ALL level;范围大的会包含范围小的。
例如日志设置为INFO级别,则FATAL、ERROR、WARN、INFO的日志开关都是打开的,而DEBUG的日志开关将是关闭的。
Log4j建议只使用四个级别,优先级从高到低分别是 ERROR、WARN、INFO、DEBUG。
*/
const gLogger = {}
gLogger.install = function (Vue, options) {
if (gLogger.installed) return
let logger = {
isDev: true,
cLevel: 'debug',
prefix: 'gLogger Says'
// levels: ['off', 'fatal', 'error', 'warn', 'info', 'debug', 'all']
}
if (options) {
for (const key of Object.keys(options)) {
logger[key] = options[key]
}
}
logger.levels = ['off', 'fatal', 'error', 'warn', 'info', 'debug', 'all']
for (const level of logger.levels) {
logger[level] = function () {
if (!this.isDev || typeof console === 'undefined') return
let levelIndex = logger.levels.indexOf(level)
// 如果是OFF级别,则不输出日志
if (levelIndex === 0) return
let cLevelIndex = logger.levels.indexOf(logger.cLevel)
// 如果当前级别底,则不输出日志
if(cLevelIndex < levelIndex) return
let args = Array.from(arguments)
args.unshift(`[${this.prefix} :: ${level}]`.toUpperCase())
console.log(...args)
}
}
Vue.prototype.$log = logger
if (window) window.logger = logger
}
export default gLogger
\ No newline at end of file
/**
* Swiper 3.4.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2016, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: December 13, 2016
*/
!function(){"use strict";function e(e){e.fn.swiper=function(a){var s;return e(this).each(function(){var e=new t(this,a);s||(s=e)}),s}}var a,t=function(e,i){function r(e){return Math.floor(e)}function n(){var e=b.params.autoplay,a=b.slides.eq(b.activeIndex);a.attr("data-swiper-autoplay")&&(e=a.attr("data-swiper-autoplay")||b.params.autoplay),b.autoplayTimeoutId=setTimeout(function(){b.params.loop?(b.fixLoop(),b._slideNext(),b.emit("onAutoplay",b)):b.isEnd?i.autoplayStopOnLast?b.stopAutoplay():(b._slideTo(0),b.emit("onAutoplay",b)):(b._slideNext(),b.emit("onAutoplay",b))},e)}function o(e,t){var s=a(e.target);if(!s.is(t))if("string"==typeof t)s=s.parents(t);else if(t.nodeType){var i;return s.parents().each(function(e,a){a===t&&(i=t)}),i?t:void 0}if(0!==s.length)return s[0]}function l(e,a){a=a||{};var t=window.MutationObserver||window.WebkitMutationObserver,s=new t(function(e){e.forEach(function(e){b.onResize(!0),b.emit("onObserverUpdate",b,e)})});s.observe(e,{attributes:"undefined"==typeof a.attributes||a.attributes,childList:"undefined"==typeof a.childList||a.childList,characterData:"undefined"==typeof a.characterData||a.characterData}),b.observers.push(s)}function p(e){e.originalEvent&&(e=e.originalEvent);var a=e.keyCode||e.charCode;if(!b.params.allowSwipeToNext&&(b.isHorizontal()&&39===a||!b.isHorizontal()&&40===a))return!1;if(!b.params.allowSwipeToPrev&&(b.isHorizontal()&&37===a||!b.isHorizontal()&&38===a))return!1;if(!(e.shiftKey||e.altKey||e.ctrlKey||e.metaKey||document.activeElement&&document.activeElement.nodeName&&("input"===document.activeElement.nodeName.toLowerCase()||"textarea"===document.activeElement.nodeName.toLowerCase()))){if(37===a||39===a||38===a||40===a){var t=!1;if(b.container.parents("."+b.params.slideClass).length>0&&0===b.container.parents("."+b.params.slideActiveClass).length)return;var s={left:window.pageXOffset,top:window.pageYOffset},i=window.innerWidth,r=window.innerHeight,n=b.container.offset();b.rtl&&(n.left=n.left-b.container[0].scrollLeft);for(var o=[[n.left,n.top],[n.left+b.width,n.top],[n.left,n.top+b.height],[n.left+b.width,n.top+b.height]],l=0;l<o.length;l++){var p=o[l];p[0]>=s.left&&p[0]<=s.left+i&&p[1]>=s.top&&p[1]<=s.top+r&&(t=!0)}if(!t)return}b.isHorizontal()?(37!==a&&39!==a||(e.preventDefault?e.preventDefault():e.returnValue=!1),(39===a&&!b.rtl||37===a&&b.rtl)&&b.slideNext(),(37===a&&!b.rtl||39===a&&b.rtl)&&b.slidePrev()):(38!==a&&40!==a||(e.preventDefault?e.preventDefault():e.returnValue=!1),40===a&&b.slideNext(),38===a&&b.slidePrev())}}function d(){var e="onwheel",a=e in document;if(!a){var t=document.createElement("div");t.setAttribute(e,"return;"),a="function"==typeof t[e]}return!a&&document.implementation&&document.implementation.hasFeature&&document.implementation.hasFeature("","")!==!0&&(a=document.implementation.hasFeature("Events.wheel","3.0")),a}function u(e){e.originalEvent&&(e=e.originalEvent);var a=0,t=b.rtl?-1:1,s=c(e);if(b.params.mousewheelForceToAxis)if(b.isHorizontal()){if(!(Math.abs(s.pixelX)>Math.abs(s.pixelY)))return;a=s.pixelX*t}else{if(!(Math.abs(s.pixelY)>Math.abs(s.pixelX)))return;a=s.pixelY}else a=Math.abs(s.pixelX)>Math.abs(s.pixelY)?-s.pixelX*t:-s.pixelY;if(0!==a){if(b.params.mousewheelInvert&&(a=-a),b.params.freeMode){var i=b.getWrapperTranslate()+a*b.params.mousewheelSensitivity,r=b.isBeginning,n=b.isEnd;if(i>=b.minTranslate()&&(i=b.minTranslate()),i<=b.maxTranslate()&&(i=b.maxTranslate()),b.setWrapperTransition(0),b.setWrapperTranslate(i),b.updateProgress(),b.updateActiveIndex(),(!r&&b.isBeginning||!n&&b.isEnd)&&b.updateClasses(),b.params.freeModeSticky?(clearTimeout(b.mousewheel.timeout),b.mousewheel.timeout=setTimeout(function(){b.slideReset()},300)):b.params.lazyLoading&&b.lazy&&b.lazy.load(),b.emit("onScroll",b,e),b.params.autoplay&&b.params.autoplayDisableOnInteraction&&b.stopAutoplay(),0===i||i===b.maxTranslate())return}else{if((new window.Date).getTime()-b.mousewheel.lastScrollTime>60)if(a<0)if(b.isEnd&&!b.params.loop||b.animating){if(b.params.mousewheelReleaseOnEdges)return!0}else b.slideNext(),b.emit("onScroll",b,e);else if(b.isBeginning&&!b.params.loop||b.animating){if(b.params.mousewheelReleaseOnEdges)return!0}else b.slidePrev(),b.emit("onScroll",b,e);b.mousewheel.lastScrollTime=(new window.Date).getTime()}return e.preventDefault?e.preventDefault():e.returnValue=!1,!1}}function c(e){var a=10,t=40,s=800,i=0,r=0,n=0,o=0;return"detail"in e&&(r=e.detail),"wheelDelta"in e&&(r=-e.wheelDelta/120),"wheelDeltaY"in e&&(r=-e.wheelDeltaY/120),"wheelDeltaX"in e&&(i=-e.wheelDeltaX/120),"axis"in e&&e.axis===e.HORIZONTAL_AXIS&&(i=r,r=0),n=i*a,o=r*a,"deltaY"in e&&(o=e.deltaY),"deltaX"in e&&(n=e.deltaX),(n||o)&&e.deltaMode&&(1===e.deltaMode?(n*=t,o*=t):(n*=s,o*=s)),n&&!i&&(i=n<1?-1:1),o&&!r&&(r=o<1?-1:1),{spinX:i,spinY:r,pixelX:n,pixelY:o}}function m(e,t){e=a(e);var s,i,r,n=b.rtl?-1:1;s=e.attr("data-swiper-parallax")||"0",i=e.attr("data-swiper-parallax-x"),r=e.attr("data-swiper-parallax-y"),i||r?(i=i||"0",r=r||"0"):b.isHorizontal()?(i=s,r="0"):(r=s,i="0"),i=i.indexOf("%")>=0?parseInt(i,10)*t*n+"%":i*t*n+"px",r=r.indexOf("%")>=0?parseInt(r,10)*t+"%":r*t+"px",e.transform("translate3d("+i+", "+r+",0px)")}function h(e){return 0!==e.indexOf("on")&&(e=e[0]!==e[0].toUpperCase()?"on"+e[0].toUpperCase()+e.substring(1):"on"+e),e}if(!(this instanceof t))return new t(e,i);var g={direction:"horizontal",touchEventsTarget:"container",initialSlide:0,speed:300,autoplay:!1,autoplayDisableOnInteraction:!0,autoplayStopOnLast:!1,iOSEdgeSwipeDetection:!1,iOSEdgeSwipeThreshold:20,freeMode:!1,freeModeMomentum:!0,freeModeMomentumRatio:1,freeModeMomentumBounce:!0,freeModeMomentumBounceRatio:1,freeModeMomentumVelocityRatio:1,freeModeSticky:!1,freeModeMinimumVelocity:.02,autoHeight:!1,setWrapperSize:!1,virtualTranslate:!1,effect:"slide",coverflow:{rotate:50,stretch:0,depth:100,modifier:1,slideShadows:!0},flip:{slideShadows:!0,limitRotation:!0},cube:{slideShadows:!0,shadow:!0,shadowOffset:20,shadowScale:.94},fade:{crossFade:!1},parallax:!1,zoom:!1,zoomMax:3,zoomMin:1,zoomToggle:!0,scrollbar:null,scrollbarHide:!0,scrollbarDraggable:!1,scrollbarSnapOnRelease:!1,keyboardControl:!1,mousewheelControl:!1,mousewheelReleaseOnEdges:!1,mousewheelInvert:!1,mousewheelForceToAxis:!1,mousewheelSensitivity:1,mousewheelEventsTarged:"container",hashnav:!1,hashnavWatchState:!1,history:!1,replaceState:!1,breakpoints:void 0,spaceBetween:0,slidesPerView:1,slidesPerColumn:1,slidesPerColumnFill:"column",slidesPerGroup:1,centeredSlides:!1,slidesOffsetBefore:0,slidesOffsetAfter:0,roundLengths:!1,touchRatio:1,touchAngle:45,simulateTouch:!0,shortSwipes:!0,longSwipes:!0,longSwipesRatio:.5,longSwipesMs:300,followFinger:!0,onlyExternal:!1,threshold:0,touchMoveStopPropagation:!0,touchReleaseOnEdges:!1,uniqueNavElements:!0,pagination:null,paginationElement:"span",paginationClickable:!1,paginationHide:!1,paginationBulletRender:null,paginationProgressRender:null,paginationFractionRender:null,paginationCustomRender:null,paginationType:"bullets",resistance:!0,resistanceRatio:.85,nextButton:null,prevButton:null,watchSlidesProgress:!1,watchSlidesVisibility:!1,grabCursor:!1,preventClicks:!0,preventClicksPropagation:!0,slideToClickedSlide:!1,lazyLoading:!1,lazyLoadingInPrevNext:!1,lazyLoadingInPrevNextAmount:1,lazyLoadingOnTransitionStart:!1,preloadImages:!0,updateOnImagesReady:!0,loop:!1,loopAdditionalSlides:0,loopedSlides:null,control:void 0,controlInverse:!1,controlBy:"slide",normalizeSlideIndex:!0,allowSwipeToPrev:!0,allowSwipeToNext:!0,swipeHandler:null,noSwiping:!0,noSwipingClass:"swiper-no-swiping",passiveListeners:!0,containerModifierClass:"swiper-container-",slideClass:"swiper-slide",slideActiveClass:"swiper-slide-active",slideDuplicateActiveClass:"swiper-slide-duplicate-active",slideVisibleClass:"swiper-slide-visible",slideDuplicateClass:"swiper-slide-duplicate",slideNextClass:"swiper-slide-next",slideDuplicateNextClass:"swiper-slide-duplicate-next",slidePrevClass:"swiper-slide-prev",slideDuplicatePrevClass:"swiper-slide-duplicate-prev",wrapperClass:"swiper-wrapper",bulletClass:"swiper-pagination-bullet",bulletActiveClass:"swiper-pagination-bullet-active",buttonDisabledClass:"swiper-button-disabled",paginationCurrentClass:"swiper-pagination-current",paginationTotalClass:"swiper-pagination-total",paginationHiddenClass:"swiper-pagination-hidden",paginationProgressbarClass:"swiper-pagination-progressbar",paginationClickableClass:"swiper-pagination-clickable",paginationModifierClass:"swiper-pagination-",lazyLoadingClass:"swiper-lazy",lazyStatusLoadingClass:"swiper-lazy-loading",lazyStatusLoadedClass:"swiper-lazy-loaded",lazyPreloaderClass:"swiper-lazy-preloader",notificationClass:"swiper-notification",preloaderClass:"preloader",zoomContainerClass:"swiper-zoom-container",observer:!1,observeParents:!1,a11y:!1,prevSlideMessage:"Previous slide",nextSlideMessage:"Next slide",firstSlideMessage:"This is the first slide",lastSlideMessage:"This is the last slide",paginationBulletMessage:"Go to slide {{index}}",runCallbacksOnInit:!0},f=i&&i.virtualTranslate;i=i||{};var v={};for(var w in i)if("object"!=typeof i[w]||null===i[w]||(i[w].nodeType||i[w]===window||i[w]===document||"undefined"!=typeof s&&i[w]instanceof s||"undefined"!=typeof jQuery&&i[w]instanceof jQuery))v[w]=i[w];else{v[w]={};for(var y in i[w])v[w][y]=i[w][y]}for(var x in g)if("undefined"==typeof i[x])i[x]=g[x];else if("object"==typeof i[x])for(var T in g[x])"undefined"==typeof i[x][T]&&(i[x][T]=g[x][T]);var b=this;if(b.params=i,b.originalParams=v,b.classNames=[],"undefined"!=typeof a&&"undefined"!=typeof s&&(a=s),("undefined"!=typeof a||(a="undefined"==typeof s?window.Dom7||window.Zepto||window.jQuery:s))&&(b.$=a,b.currentBreakpoint=void 0,b.getActiveBreakpoint=function(){if(!b.params.breakpoints)return!1;var e,a=!1,t=[];for(e in b.params.breakpoints)b.params.breakpoints.hasOwnProperty(e)&&t.push(e);t.sort(function(e,a){return parseInt(e,10)>parseInt(a,10)});for(var s=0;s<t.length;s++)e=t[s],e>=window.innerWidth&&!a&&(a=e);return a||"max"},b.setBreakpoint=function(){var e=b.getActiveBreakpoint();if(e&&b.currentBreakpoint!==e){var a=e in b.params.breakpoints?b.params.breakpoints[e]:b.originalParams,t=b.params.loop&&a.slidesPerView!==b.params.slidesPerView;for(var s in a)b.params[s]=a[s];b.currentBreakpoint=e,t&&b.destroyLoop&&b.reLoop(!0)}},b.params.breakpoints&&b.setBreakpoint(),b.container=a(e),0!==b.container.length)){if(b.container.length>1){var S=[];return b.container.each(function(){S.push(new t(this,i))}),S}b.container[0].swiper=b,b.container.data("swiper",b),b.classNames.push(b.params.containerModifierClass+b.params.direction),b.params.freeMode&&b.classNames.push(b.params.containerModifierClass+"free-mode"),b.support.flexbox||(b.classNames.push(b.params.containerModifierClass+"no-flexbox"),b.params.slidesPerColumn=1),b.params.autoHeight&&b.classNames.push(b.params.containerModifierClass+"autoheight"),(b.params.parallax||b.params.watchSlidesVisibility)&&(b.params.watchSlidesProgress=!0),b.params.touchReleaseOnEdges&&(b.params.resistanceRatio=0),["cube","coverflow","flip"].indexOf(b.params.effect)>=0&&(b.support.transforms3d?(b.params.watchSlidesProgress=!0,b.classNames.push(b.params.containerModifierClass+"3d")):b.params.effect="slide"),"slide"!==b.params.effect&&b.classNames.push(b.params.containerModifierClass+b.params.effect),"cube"===b.params.effect&&(b.params.resistanceRatio=0,b.params.slidesPerView=1,b.params.slidesPerColumn=1,b.params.slidesPerGroup=1,b.params.centeredSlides=!1,b.params.spaceBetween=0,b.params.virtualTranslate=!0,b.params.setWrapperSize=!1),"fade"!==b.params.effect&&"flip"!==b.params.effect||(b.params.slidesPerView=1,b.params.slidesPerColumn=1,b.params.slidesPerGroup=1,b.params.watchSlidesProgress=!0,b.params.spaceBetween=0,b.params.setWrapperSize=!1,"undefined"==typeof f&&(b.params.virtualTranslate=!0)),b.params.grabCursor&&b.support.touch&&(b.params.grabCursor=!1),b.wrapper=b.container.children("."+b.params.wrapperClass),b.params.pagination&&(b.paginationContainer=a(b.params.pagination),b.params.uniqueNavElements&&"string"==typeof b.params.pagination&&b.paginationContainer.length>1&&1===b.container.find(b.params.pagination).length&&(b.paginationContainer=b.container.find(b.params.pagination)),"bullets"===b.params.paginationType&&b.params.paginationClickable?b.paginationContainer.addClass(b.params.paginationModifierClass+"clickable"):b.params.paginationClickable=!1,b.paginationContainer.addClass(b.params.paginationModifierClass+b.params.paginationType)),(b.params.nextButton||b.params.prevButton)&&(b.params.nextButton&&(b.nextButton=a(b.params.nextButton),b.params.uniqueNavElements&&"string"==typeof b.params.nextButton&&b.nextButton.length>1&&1===b.container.find(b.params.nextButton).length&&(b.nextButton=b.container.find(b.params.nextButton))),b.params.prevButton&&(b.prevButton=a(b.params.prevButton),b.params.uniqueNavElements&&"string"==typeof b.params.prevButton&&b.prevButton.length>1&&1===b.container.find(b.params.prevButton).length&&(b.prevButton=b.container.find(b.params.prevButton)))),b.isHorizontal=function(){return"horizontal"===b.params.direction},b.rtl=b.isHorizontal()&&("rtl"===b.container[0].dir.toLowerCase()||"rtl"===b.container.css("direction")),b.rtl&&b.classNames.push(b.params.containerModifierClass+"rtl"),b.rtl&&(b.wrongRTL="-webkit-box"===b.wrapper.css("display")),b.params.slidesPerColumn>1&&b.classNames.push(b.params.containerModifierClass+"multirow"),b.device.android&&b.classNames.push(b.params.containerModifierClass+"android"),b.container.addClass(b.classNames.join(" ")),b.translate=0,b.progress=0,b.velocity=0,b.lockSwipeToNext=function(){b.params.allowSwipeToNext=!1,b.params.allowSwipeToPrev===!1&&b.params.grabCursor&&b.unsetGrabCursor()},b.lockSwipeToPrev=function(){b.params.allowSwipeToPrev=!1,b.params.allowSwipeToNext===!1&&b.params.grabCursor&&b.unsetGrabCursor()},b.lockSwipes=function(){b.params.allowSwipeToNext=b.params.allowSwipeToPrev=!1,b.params.grabCursor&&b.unsetGrabCursor()},b.unlockSwipeToNext=function(){b.params.allowSwipeToNext=!0,b.params.allowSwipeToPrev===!0&&b.params.grabCursor&&b.setGrabCursor()},b.unlockSwipeToPrev=function(){b.params.allowSwipeToPrev=!0,b.params.allowSwipeToNext===!0&&b.params.grabCursor&&b.setGrabCursor()},b.unlockSwipes=function(){b.params.allowSwipeToNext=b.params.allowSwipeToPrev=!0,b.params.grabCursor&&b.setGrabCursor()},b.setGrabCursor=function(e){b.container[0].style.cursor="move",b.container[0].style.cursor=e?"-webkit-grabbing":"-webkit-grab",b.container[0].style.cursor=e?"-moz-grabbin":"-moz-grab",b.container[0].style.cursor=e?"grabbing":"grab"},b.unsetGrabCursor=function(){b.container[0].style.cursor=""},b.params.grabCursor&&b.setGrabCursor(),b.imagesToLoad=[],b.imagesLoaded=0,b.loadImage=function(e,a,t,s,i,r){function n(){r&&r()}var o;e.complete&&i?n():a?(o=new window.Image,o.onload=n,o.onerror=n,s&&(o.sizes=s),t&&(o.srcset=t),a&&(o.src=a)):n()},b.preloadImages=function(){function e(){"undefined"!=typeof b&&null!==b&&b&&(void 0!==b.imagesLoaded&&b.imagesLoaded++,b.imagesLoaded===b.imagesToLoad.length&&(b.params.updateOnImagesReady&&b.update(),b.emit("onImagesReady",b)))}b.imagesToLoad=b.container.find("img");for(var a=0;a<b.imagesToLoad.length;a++)b.loadImage(b.imagesToLoad[a],b.imagesToLoad[a].currentSrc||b.imagesToLoad[a].getAttribute("src"),b.imagesToLoad[a].srcset||b.imagesToLoad[a].getAttribute("srcset"),b.imagesToLoad[a].sizes||b.imagesToLoad[a].getAttribute("sizes"),!0,e)},b.autoplayTimeoutId=void 0,b.autoplaying=!1,b.autoplayPaused=!1,b.startAutoplay=function(){return"undefined"==typeof b.autoplayTimeoutId&&(!!b.params.autoplay&&(!b.autoplaying&&(b.autoplaying=!0,b.emit("onAutoplayStart",b),void n())))},b.stopAutoplay=function(e){b.autoplayTimeoutId&&(b.autoplayTimeoutId&&clearTimeout(b.autoplayTimeoutId),b.autoplaying=!1,b.autoplayTimeoutId=void 0,b.emit("onAutoplayStop",b))},b.pauseAutoplay=function(e){b.autoplayPaused||(b.autoplayTimeoutId&&clearTimeout(b.autoplayTimeoutId),b.autoplayPaused=!0,0===e?(b.autoplayPaused=!1,n()):b.wrapper.transitionEnd(function(){b&&(b.autoplayPaused=!1,b.autoplaying?n():b.stopAutoplay())}))},b.minTranslate=function(){return-b.snapGrid[0]},b.maxTranslate=function(){return-b.snapGrid[b.snapGrid.length-1]},b.updateAutoHeight=function(){var e,a=[],t=0;if("auto"!==b.params.slidesPerView&&b.params.slidesPerView>1)for(e=0;e<Math.ceil(b.params.slidesPerView);e++){var s=b.activeIndex+e;if(s>b.slides.length)break;a.push(b.slides.eq(s)[0])}else a.push(b.slides.eq(b.activeIndex)[0]);for(e=0;e<a.length;e++)if("undefined"!=typeof a[e]){var i=a[e].offsetHeight;t=i>t?i:t}t&&b.wrapper.css("height",t+"px")},b.updateContainerSize=function(){var e,a;e="undefined"!=typeof b.params.width?b.params.width:b.container[0].clientWidth,a="undefined"!=typeof b.params.height?b.params.height:b.container[0].clientHeight,0===e&&b.isHorizontal()||0===a&&!b.isHorizontal()||(e=e-parseInt(b.container.css("padding-left"),10)-parseInt(b.container.css("padding-right"),10),a=a-parseInt(b.container.css("padding-top"),10)-parseInt(b.container.css("padding-bottom"),10),b.width=e,b.height=a,b.size=b.isHorizontal()?b.width:b.height)},b.updateSlidesSize=function(){b.slides=b.wrapper.children("."+b.params.slideClass),b.snapGrid=[],b.slidesGrid=[],b.slidesSizesGrid=[];var e,a=b.params.spaceBetween,t=-b.params.slidesOffsetBefore,s=0,i=0;if("undefined"!=typeof b.size){"string"==typeof a&&a.indexOf("%")>=0&&(a=parseFloat(a.replace("%",""))/100*b.size),b.virtualSize=-a,b.rtl?b.slides.css({marginLeft:"",marginTop:""}):b.slides.css({marginRight:"",marginBottom:""});var n;b.params.slidesPerColumn>1&&(n=Math.floor(b.slides.length/b.params.slidesPerColumn)===b.slides.length/b.params.slidesPerColumn?b.slides.length:Math.ceil(b.slides.length/b.params.slidesPerColumn)*b.params.slidesPerColumn,"auto"!==b.params.slidesPerView&&"row"===b.params.slidesPerColumnFill&&(n=Math.max(n,b.params.slidesPerView*b.params.slidesPerColumn)));var o,l=b.params.slidesPerColumn,p=n/l,d=p-(b.params.slidesPerColumn*p-b.slides.length);for(e=0;e<b.slides.length;e++){o=0;var u=b.slides.eq(e);if(b.params.slidesPerColumn>1){var c,m,h;"column"===b.params.slidesPerColumnFill?(m=Math.floor(e/l),h=e-m*l,(m>d||m===d&&h===l-1)&&++h>=l&&(h=0,m++),c=m+h*n/l,u.css({"-webkit-box-ordinal-group":c,"-moz-box-ordinal-group":c,"-ms-flex-order":c,"-webkit-order":c,order:c})):(h=Math.floor(e/p),m=e-h*p),u.css("margin-"+(b.isHorizontal()?"top":"left"),0!==h&&b.params.spaceBetween&&b.params.spaceBetween+"px").attr("data-swiper-column",m).attr("data-swiper-row",h)}"none"!==u.css("display")&&("auto"===b.params.slidesPerView?(o=b.isHorizontal()?u.outerWidth(!0):u.outerHeight(!0),b.params.roundLengths&&(o=r(o))):(o=(b.size-(b.params.slidesPerView-1)*a)/b.params.slidesPerView,b.params.roundLengths&&(o=r(o)),b.isHorizontal()?b.slides[e].style.width=o+"px":b.slides[e].style.height=o+"px"),b.slides[e].swiperSlideSize=o,b.slidesSizesGrid.push(o),b.params.centeredSlides?(t=t+o/2+s/2+a,0===e&&(t=t-b.size/2-a),Math.abs(t)<.001&&(t=0),i%b.params.slidesPerGroup===0&&b.snapGrid.push(t),b.slidesGrid.push(t)):(i%b.params.slidesPerGroup===0&&b.snapGrid.push(t),b.slidesGrid.push(t),t=t+o+a),b.virtualSize+=o+a,s=o,i++)}b.virtualSize=Math.max(b.virtualSize,b.size)+b.params.slidesOffsetAfter;var g;if(b.rtl&&b.wrongRTL&&("slide"===b.params.effect||"coverflow"===b.params.effect)&&b.wrapper.css({width:b.virtualSize+b.params.spaceBetween+"px"}),b.support.flexbox&&!b.params.setWrapperSize||(b.isHorizontal()?b.wrapper.css({width:b.virtualSize+b.params.spaceBetween+"px"}):b.wrapper.css({height:b.virtualSize+b.params.spaceBetween+"px"})),b.params.slidesPerColumn>1&&(b.virtualSize=(o+b.params.spaceBetween)*n,b.virtualSize=Math.ceil(b.virtualSize/b.params.slidesPerColumn)-b.params.spaceBetween,b.isHorizontal()?b.wrapper.css({width:b.virtualSize+b.params.spaceBetween+"px"}):b.wrapper.css({height:b.virtualSize+b.params.spaceBetween+"px"}),b.params.centeredSlides)){for(g=[],e=0;e<b.snapGrid.length;e++)b.snapGrid[e]<b.virtualSize+b.snapGrid[0]&&g.push(b.snapGrid[e]);b.snapGrid=g}if(!b.params.centeredSlides){for(g=[],e=0;e<b.snapGrid.length;e++)b.snapGrid[e]<=b.virtualSize-b.size&&g.push(b.snapGrid[e]);b.snapGrid=g,Math.floor(b.virtualSize-b.size)-Math.floor(b.snapGrid[b.snapGrid.length-1])>1&&b.snapGrid.push(b.virtualSize-b.size)}0===b.snapGrid.length&&(b.snapGrid=[0]),0!==b.params.spaceBetween&&(b.isHorizontal()?b.rtl?b.slides.css({marginLeft:a+"px"}):b.slides.css({marginRight:a+"px"}):b.slides.css({marginBottom:a+"px"})),b.params.watchSlidesProgress&&b.updateSlidesOffset()}},b.updateSlidesOffset=function(){for(var e=0;e<b.slides.length;e++)b.slides[e].swiperSlideOffset=b.isHorizontal()?b.slides[e].offsetLeft:b.slides[e].offsetTop},b.currentSlidesPerView=function(){var e,a,t=1;if(b.params.centeredSlides){var s,i=b.slides[b.activeIndex].swiperSlideSize;for(e=b.activeIndex+1;e<b.slides.length;e++)b.slides[e]&&!s&&(i+=b.slides[e].swiperSlideSize,t++,i>b.size&&(s=!0));for(a=b.activeIndex-1;a>=0;a--)b.slides[a]&&!s&&(i+=b.slides[a].swiperSlideSize,t++,i>b.size&&(s=!0))}else for(e=b.activeIndex+1;e<b.slides.length;e++)b.slidesGrid[e]-b.slidesGrid[b.activeIndex]<b.size&&t++;return t},b.updateSlidesProgress=function(e){if("undefined"==typeof e&&(e=b.translate||0),0!==b.slides.length){"undefined"==typeof b.slides[0].swiperSlideOffset&&b.updateSlidesOffset();var a=-e;b.rtl&&(a=e),b.slides.removeClass(b.params.slideVisibleClass);for(var t=0;t<b.slides.length;t++){var s=b.slides[t],i=(a+(b.params.centeredSlides?b.minTranslate():0)-s.swiperSlideOffset)/(s.swiperSlideSize+b.params.spaceBetween);if(b.params.watchSlidesVisibility){var r=-(a-s.swiperSlideOffset),n=r+b.slidesSizesGrid[t],o=r>=0&&r<b.size||n>0&&n<=b.size||r<=0&&n>=b.size;o&&b.slides.eq(t).addClass(b.params.slideVisibleClass)}s.progress=b.rtl?-i:i}}},b.updateProgress=function(e){"undefined"==typeof e&&(e=b.translate||0);var a=b.maxTranslate()-b.minTranslate(),t=b.isBeginning,s=b.isEnd;0===a?(b.progress=0,b.isBeginning=b.isEnd=!0):(b.progress=(e-b.minTranslate())/a,b.isBeginning=b.progress<=0,b.isEnd=b.progress>=1),b.isBeginning&&!t&&b.emit("onReachBeginning",b),b.isEnd&&!s&&b.emit("onReachEnd",b),b.params.watchSlidesProgress&&b.updateSlidesProgress(e),b.emit("onProgress",b,b.progress)},b.updateActiveIndex=function(){var e,a,t,s=b.rtl?b.translate:-b.translate;for(a=0;a<b.slidesGrid.length;a++)"undefined"!=typeof b.slidesGrid[a+1]?s>=b.slidesGrid[a]&&s<b.slidesGrid[a+1]-(b.slidesGrid[a+1]-b.slidesGrid[a])/2?e=a:s>=b.slidesGrid[a]&&s<b.slidesGrid[a+1]&&(e=a+1):s>=b.slidesGrid[a]&&(e=a);b.params.normalizeSlideIndex&&(e<0||"undefined"==typeof e)&&(e=0),t=Math.floor(e/b.params.slidesPerGroup),t>=b.snapGrid.length&&(t=b.snapGrid.length-1),e!==b.activeIndex&&(b.snapIndex=t,b.previousIndex=b.activeIndex,b.activeIndex=e,b.updateClasses(),b.updateRealIndex())},b.updateRealIndex=function(){b.realIndex=parseInt(b.slides.eq(b.activeIndex).attr("data-swiper-slide-index")||b.activeIndex,10)},b.updateClasses=function(){b.slides.removeClass(b.params.slideActiveClass+" "+b.params.slideNextClass+" "+b.params.slidePrevClass+" "+b.params.slideDuplicateActiveClass+" "+b.params.slideDuplicateNextClass+" "+b.params.slideDuplicatePrevClass);var e=b.slides.eq(b.activeIndex);e.addClass(b.params.slideActiveClass),i.loop&&(e.hasClass(b.params.slideDuplicateClass)?b.wrapper.children("."+b.params.slideClass+":not(."+b.params.slideDuplicateClass+')[data-swiper-slide-index="'+b.realIndex+'"]').addClass(b.params.slideDuplicateActiveClass):b.wrapper.children("."+b.params.slideClass+"."+b.params.slideDuplicateClass+'[data-swiper-slide-index="'+b.realIndex+'"]').addClass(b.params.slideDuplicateActiveClass));var t=e.next("."+b.params.slideClass).addClass(b.params.slideNextClass);b.params.loop&&0===t.length&&(t=b.slides.eq(0),t.addClass(b.params.slideNextClass));var s=e.prev("."+b.params.slideClass).addClass(b.params.slidePrevClass);if(b.params.loop&&0===s.length&&(s=b.slides.eq(-1),s.addClass(b.params.slidePrevClass)),i.loop&&(t.hasClass(b.params.slideDuplicateClass)?b.wrapper.children("."+b.params.slideClass+":not(."+b.params.slideDuplicateClass+')[data-swiper-slide-index="'+t.attr("data-swiper-slide-index")+'"]').addClass(b.params.slideDuplicateNextClass):b.wrapper.children("."+b.params.slideClass+"."+b.params.slideDuplicateClass+'[data-swiper-slide-index="'+t.attr("data-swiper-slide-index")+'"]').addClass(b.params.slideDuplicateNextClass),s.hasClass(b.params.slideDuplicateClass)?b.wrapper.children("."+b.params.slideClass+":not(."+b.params.slideDuplicateClass+')[data-swiper-slide-index="'+s.attr("data-swiper-slide-index")+'"]').addClass(b.params.slideDuplicatePrevClass):b.wrapper.children("."+b.params.slideClass+"."+b.params.slideDuplicateClass+'[data-swiper-slide-index="'+s.attr("data-swiper-slide-index")+'"]').addClass(b.params.slideDuplicatePrevClass)),b.paginationContainer&&b.paginationContainer.length>0){var r,n=b.params.loop?Math.ceil((b.slides.length-2*b.loopedSlides)/b.params.slidesPerGroup):b.snapGrid.length;if(b.params.loop?(r=Math.ceil((b.activeIndex-b.loopedSlides)/b.params.slidesPerGroup),r>b.slides.length-1-2*b.loopedSlides&&(r-=b.slides.length-2*b.loopedSlides),r>n-1&&(r-=n),r<0&&"bullets"!==b.params.paginationType&&(r=n+r)):r="undefined"!=typeof b.snapIndex?b.snapIndex:b.activeIndex||0,"bullets"===b.params.paginationType&&b.bullets&&b.bullets.length>0&&(b.bullets.removeClass(b.params.bulletActiveClass),b.paginationContainer.length>1?b.bullets.each(function(){a(this).index()===r&&a(this).addClass(b.params.bulletActiveClass)}):b.bullets.eq(r).addClass(b.params.bulletActiveClass)),"fraction"===b.params.paginationType&&(b.paginationContainer.find("."+b.params.paginationCurrentClass).text(r+1),b.paginationContainer.find("."+b.params.paginationTotalClass).text(n)),"progress"===b.params.paginationType){var o=(r+1)/n,l=o,p=1;b.isHorizontal()||(p=o,l=1),b.paginationContainer.find("."+b.params.paginationProgressbarClass).transform("translate3d(0,0,0) scaleX("+l+") scaleY("+p+")").transition(b.params.speed)}"custom"===b.params.paginationType&&b.params.paginationCustomRender&&(b.paginationContainer.html(b.params.paginationCustomRender(b,r+1,n)),b.emit("onPaginationRendered",b,b.paginationContainer[0]))}b.params.loop||(b.params.prevButton&&b.prevButton&&b.prevButton.length>0&&(b.isBeginning?(b.prevButton.addClass(b.params.buttonDisabledClass),b.params.a11y&&b.a11y&&b.a11y.disable(b.prevButton)):(b.prevButton.removeClass(b.params.buttonDisabledClass),b.params.a11y&&b.a11y&&b.a11y.enable(b.prevButton))),b.params.nextButton&&b.nextButton&&b.nextButton.length>0&&(b.isEnd?(b.nextButton.addClass(b.params.buttonDisabledClass),b.params.a11y&&b.a11y&&b.a11y.disable(b.nextButton)):(b.nextButton.removeClass(b.params.buttonDisabledClass),b.params.a11y&&b.a11y&&b.a11y.enable(b.nextButton))))},b.updatePagination=function(){if(b.params.pagination&&b.paginationContainer&&b.paginationContainer.length>0){var e="";if("bullets"===b.params.paginationType){for(var a=b.params.loop?Math.ceil((b.slides.length-2*b.loopedSlides)/b.params.slidesPerGroup):b.snapGrid.length,t=0;t<a;t++)e+=b.params.paginationBulletRender?b.params.paginationBulletRender(b,t,b.params.bulletClass):"<"+b.params.paginationElement+' class="'+b.params.bulletClass+'"></'+b.params.paginationElement+">";b.paginationContainer.html(e),b.bullets=b.paginationContainer.find("."+b.params.bulletClass),b.params.paginationClickable&&b.params.a11y&&b.a11y&&b.a11y.initPagination()}"fraction"===b.params.paginationType&&(e=b.params.paginationFractionRender?b.params.paginationFractionRender(b,b.params.paginationCurrentClass,b.params.paginationTotalClass):'<span class="'+b.params.paginationCurrentClass+'"></span> / <span class="'+b.params.paginationTotalClass+'"></span>',b.paginationContainer.html(e)),"progress"===b.params.paginationType&&(e=b.params.paginationProgressRender?b.params.paginationProgressRender(b,b.params.paginationProgressbarClass):'<span class="'+b.params.paginationProgressbarClass+'"></span>',b.paginationContainer.html(e)),"custom"!==b.params.paginationType&&b.emit("onPaginationRendered",b,b.paginationContainer[0])}},b.update=function(e){function a(){b.rtl?-b.translate:b.translate;s=Math.min(Math.max(b.translate,b.maxTranslate()),b.minTranslate()),b.setWrapperTranslate(s),b.updateActiveIndex(),b.updateClasses()}if(b)if(b.updateContainerSize(),b.updateSlidesSize(),b.updateProgress(),b.updatePagination(),b.updateClasses(),b.params.scrollbar&&b.scrollbar&&b.scrollbar.set(),e){var t,s;b.controller&&b.controller.spline&&(b.controller.spline=void 0),b.params.freeMode?(a(),b.params.autoHeight&&b.updateAutoHeight()):(t=("auto"===b.params.slidesPerView||b.params.slidesPerView>1)&&b.isEnd&&!b.params.centeredSlides?b.slideTo(b.slides.length-1,0,!1,!0):b.slideTo(b.activeIndex,0,!1,!0),t||a())}else b.params.autoHeight&&b.updateAutoHeight()},b.onResize=function(e){b.params.breakpoints&&b.setBreakpoint();var a=b.params.allowSwipeToPrev,t=b.params.allowSwipeToNext;b.params.allowSwipeToPrev=b.params.allowSwipeToNext=!0,b.updateContainerSize(),b.updateSlidesSize(),("auto"===b.params.slidesPerView||b.params.freeMode||e)&&b.updatePagination(),b.params.scrollbar&&b.scrollbar&&b.scrollbar.set(),b.controller&&b.controller.spline&&(b.controller.spline=void 0);var s=!1;if(b.params.freeMode){var i=Math.min(Math.max(b.translate,b.maxTranslate()),b.minTranslate());b.setWrapperTranslate(i),b.updateActiveIndex(),b.updateClasses(),b.params.autoHeight&&b.updateAutoHeight()}else b.updateClasses(),s=("auto"===b.params.slidesPerView||b.params.slidesPerView>1)&&b.isEnd&&!b.params.centeredSlides?b.slideTo(b.slides.length-1,0,!1,!0):b.slideTo(b.activeIndex,0,!1,!0);b.params.lazyLoading&&!s&&b.lazy&&b.lazy.load(),b.params.allowSwipeToPrev=a,b.params.allowSwipeToNext=t},b.touchEventsDesktop={start:"mousedown",move:"mousemove",end:"mouseup"},window.navigator.pointerEnabled?b.touchEventsDesktop={start:"pointerdown",move:"pointermove",end:"pointerup"}:window.navigator.msPointerEnabled&&(b.touchEventsDesktop={start:"MSPointerDown",move:"MSPointerMove",end:"MSPointerUp"}),b.touchEvents={start:b.support.touch||!b.params.simulateTouch?"touchstart":b.touchEventsDesktop.start,move:b.support.touch||!b.params.simulateTouch?"touchmove":b.touchEventsDesktop.move,end:b.support.touch||!b.params.simulateTouch?"touchend":b.touchEventsDesktop.end},(window.navigator.pointerEnabled||window.navigator.msPointerEnabled)&&("container"===b.params.touchEventsTarget?b.container:b.wrapper).addClass("swiper-wp8-"+b.params.direction),b.initEvents=function(e){var a=e?"off":"on",t=e?"removeEventListener":"addEventListener",s="container"===b.params.touchEventsTarget?b.container[0]:b.wrapper[0],r=b.support.touch?s:document,n=!!b.params.nested;if(b.browser.ie)s[t](b.touchEvents.start,b.onTouchStart,!1),r[t](b.touchEvents.move,b.onTouchMove,n),r[t](b.touchEvents.end,b.onTouchEnd,!1);else{if(b.support.touch){var o=!("touchstart"!==b.touchEvents.start||!b.support.passiveListener||!b.params.passiveListeners)&&{passive:!0,capture:!1};s[t](b.touchEvents.start,b.onTouchStart,o),s[t](b.touchEvents.move,b.onTouchMove,n),s[t](b.touchEvents.end,b.onTouchEnd,o)}(i.simulateTouch&&!b.device.ios&&!b.device.android||i.simulateTouch&&!b.support.touch&&b.device.ios)&&(s[t]("mousedown",b.onTouchStart,!1),document[t]("mousemove",b.onTouchMove,n),document[t]("mouseup",b.onTouchEnd,!1))}window[t]("resize",b.onResize),b.params.nextButton&&b.nextButton&&b.nextButton.length>0&&(b.nextButton[a]("click",b.onClickNext),b.params.a11y&&b.a11y&&b.nextButton[a]("keydown",b.a11y.onEnterKey)),b.params.prevButton&&b.prevButton&&b.prevButton.length>0&&(b.prevButton[a]("click",b.onClickPrev),b.params.a11y&&b.a11y&&b.prevButton[a]("keydown",b.a11y.onEnterKey)),b.params.pagination&&b.params.paginationClickable&&(b.paginationContainer[a]("click","."+b.params.bulletClass,b.onClickIndex),b.params.a11y&&b.a11y&&b.paginationContainer[a]("keydown","."+b.params.bulletClass,b.a11y.onEnterKey)),(b.params.preventClicks||b.params.preventClicksPropagation)&&s[t]("click",b.preventClicks,!0);
},b.attachEvents=function(){b.initEvents()},b.detachEvents=function(){b.initEvents(!0)},b.allowClick=!0,b.preventClicks=function(e){b.allowClick||(b.params.preventClicks&&e.preventDefault(),b.params.preventClicksPropagation&&b.animating&&(e.stopPropagation(),e.stopImmediatePropagation()))},b.onClickNext=function(e){e.preventDefault(),b.isEnd&&!b.params.loop||b.slideNext()},b.onClickPrev=function(e){e.preventDefault(),b.isBeginning&&!b.params.loop||b.slidePrev()},b.onClickIndex=function(e){e.preventDefault();var t=a(this).index()*b.params.slidesPerGroup;b.params.loop&&(t+=b.loopedSlides),b.slideTo(t)},b.updateClickedSlide=function(e){var t=o(e,"."+b.params.slideClass),s=!1;if(t)for(var i=0;i<b.slides.length;i++)b.slides[i]===t&&(s=!0);if(!t||!s)return b.clickedSlide=void 0,void(b.clickedIndex=void 0);if(b.clickedSlide=t,b.clickedIndex=a(t).index(),b.params.slideToClickedSlide&&void 0!==b.clickedIndex&&b.clickedIndex!==b.activeIndex){var r,n=b.clickedIndex,l="auto"===b.params.slidesPerView?b.currentSlidesPerView():b.params.slidesPerView;if(b.params.loop){if(b.animating)return;r=parseInt(a(b.clickedSlide).attr("data-swiper-slide-index"),10),b.params.centeredSlides?n<b.loopedSlides-l/2||n>b.slides.length-b.loopedSlides+l/2?(b.fixLoop(),n=b.wrapper.children("."+b.params.slideClass+'[data-swiper-slide-index="'+r+'"]:not(.'+b.params.slideDuplicateClass+")").eq(0).index(),setTimeout(function(){b.slideTo(n)},0)):b.slideTo(n):n>b.slides.length-l?(b.fixLoop(),n=b.wrapper.children("."+b.params.slideClass+'[data-swiper-slide-index="'+r+'"]:not(.'+b.params.slideDuplicateClass+")").eq(0).index(),setTimeout(function(){b.slideTo(n)},0)):b.slideTo(n)}else b.slideTo(n)}};var C,z,M,E,P,I,k,L,D,B,H="input, select, textarea, button, video",G=Date.now(),X=[];b.animating=!1,b.touches={startX:0,startY:0,currentX:0,currentY:0,diff:0};var Y,A;b.onTouchStart=function(e){if(e.originalEvent&&(e=e.originalEvent),Y="touchstart"===e.type,Y||!("which"in e)||3!==e.which){if(b.params.noSwiping&&o(e,"."+b.params.noSwipingClass))return void(b.allowClick=!0);if(!b.params.swipeHandler||o(e,b.params.swipeHandler)){var t=b.touches.currentX="touchstart"===e.type?e.targetTouches[0].pageX:e.pageX,s=b.touches.currentY="touchstart"===e.type?e.targetTouches[0].pageY:e.pageY;if(!(b.device.ios&&b.params.iOSEdgeSwipeDetection&&t<=b.params.iOSEdgeSwipeThreshold)){if(C=!0,z=!1,M=!0,P=void 0,A=void 0,b.touches.startX=t,b.touches.startY=s,E=Date.now(),b.allowClick=!0,b.updateContainerSize(),b.swipeDirection=void 0,b.params.threshold>0&&(L=!1),"touchstart"!==e.type){var i=!0;a(e.target).is(H)&&(i=!1),document.activeElement&&a(document.activeElement).is(H)&&document.activeElement.blur(),i&&e.preventDefault()}b.emit("onTouchStart",b,e)}}}},b.onTouchMove=function(e){if(e.originalEvent&&(e=e.originalEvent),!Y||"mousemove"!==e.type){if(e.preventedByNestedSwiper)return b.touches.startX="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,void(b.touches.startY="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY);if(b.params.onlyExternal)return b.allowClick=!1,void(C&&(b.touches.startX=b.touches.currentX="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,b.touches.startY=b.touches.currentY="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,E=Date.now()));if(Y&&b.params.touchReleaseOnEdges&&!b.params.loop)if(b.isHorizontal()){if(b.touches.currentX<b.touches.startX&&b.translate<=b.maxTranslate()||b.touches.currentX>b.touches.startX&&b.translate>=b.minTranslate())return}else if(b.touches.currentY<b.touches.startY&&b.translate<=b.maxTranslate()||b.touches.currentY>b.touches.startY&&b.translate>=b.minTranslate())return;if(Y&&document.activeElement&&e.target===document.activeElement&&a(e.target).is(H))return z=!0,void(b.allowClick=!1);if(M&&b.emit("onTouchMove",b,e),!(e.targetTouches&&e.targetTouches.length>1)){if(b.touches.currentX="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,b.touches.currentY="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,"undefined"==typeof P){var t;b.isHorizontal()&&b.touches.currentY===b.touches.startY||!b.isHorizontal()&&b.touches.currentX===b.touches.startX?P=!1:(t=180*Math.atan2(Math.abs(b.touches.currentY-b.touches.startY),Math.abs(b.touches.currentX-b.touches.startX))/Math.PI,P=b.isHorizontal()?t>b.params.touchAngle:90-t>b.params.touchAngle)}if(P&&b.emit("onTouchMoveOpposite",b,e),"undefined"==typeof A&&b.browser.ieTouch&&(b.touches.currentX===b.touches.startX&&b.touches.currentY===b.touches.startY||(A=!0)),C){if(P)return void(C=!1);if(A||!b.browser.ieTouch){b.allowClick=!1,b.emit("onSliderMove",b,e),e.preventDefault(),b.params.touchMoveStopPropagation&&!b.params.nested&&e.stopPropagation(),z||(i.loop&&b.fixLoop(),k=b.getWrapperTranslate(),b.setWrapperTransition(0),b.animating&&b.wrapper.trigger("webkitTransitionEnd transitionend oTransitionEnd MSTransitionEnd msTransitionEnd"),b.params.autoplay&&b.autoplaying&&(b.params.autoplayDisableOnInteraction?b.stopAutoplay():b.pauseAutoplay()),B=!1,!b.params.grabCursor||b.params.allowSwipeToNext!==!0&&b.params.allowSwipeToPrev!==!0||b.setGrabCursor(!0)),z=!0;var s=b.touches.diff=b.isHorizontal()?b.touches.currentX-b.touches.startX:b.touches.currentY-b.touches.startY;s*=b.params.touchRatio,b.rtl&&(s=-s),b.swipeDirection=s>0?"prev":"next",I=s+k;var r=!0;if(s>0&&I>b.minTranslate()?(r=!1,b.params.resistance&&(I=b.minTranslate()-1+Math.pow(-b.minTranslate()+k+s,b.params.resistanceRatio))):s<0&&I<b.maxTranslate()&&(r=!1,b.params.resistance&&(I=b.maxTranslate()+1-Math.pow(b.maxTranslate()-k-s,b.params.resistanceRatio))),r&&(e.preventedByNestedSwiper=!0),!b.params.allowSwipeToNext&&"next"===b.swipeDirection&&I<k&&(I=k),!b.params.allowSwipeToPrev&&"prev"===b.swipeDirection&&I>k&&(I=k),b.params.threshold>0){if(!(Math.abs(s)>b.params.threshold||L))return void(I=k);if(!L)return L=!0,b.touches.startX=b.touches.currentX,b.touches.startY=b.touches.currentY,I=k,void(b.touches.diff=b.isHorizontal()?b.touches.currentX-b.touches.startX:b.touches.currentY-b.touches.startY)}b.params.followFinger&&((b.params.freeMode||b.params.watchSlidesProgress)&&b.updateActiveIndex(),b.params.freeMode&&(0===X.length&&X.push({position:b.touches[b.isHorizontal()?"startX":"startY"],time:E}),X.push({position:b.touches[b.isHorizontal()?"currentX":"currentY"],time:(new window.Date).getTime()})),b.updateProgress(I),b.setWrapperTranslate(I))}}}}},b.onTouchEnd=function(e){if(e.originalEvent&&(e=e.originalEvent),M&&b.emit("onTouchEnd",b,e),M=!1,C){b.params.grabCursor&&z&&C&&(b.params.allowSwipeToNext===!0||b.params.allowSwipeToPrev===!0)&&b.setGrabCursor(!1);var t=Date.now(),s=t-E;if(b.allowClick&&(b.updateClickedSlide(e),b.emit("onTap",b,e),s<300&&t-G>300&&(D&&clearTimeout(D),D=setTimeout(function(){b&&(b.params.paginationHide&&b.paginationContainer.length>0&&!a(e.target).hasClass(b.params.bulletClass)&&b.paginationContainer.toggleClass(b.params.paginationHiddenClass),b.emit("onClick",b,e))},300)),s<300&&t-G<300&&(D&&clearTimeout(D),b.emit("onDoubleTap",b,e))),G=Date.now(),setTimeout(function(){b&&(b.allowClick=!0)},0),!C||!z||!b.swipeDirection||0===b.touches.diff||I===k)return void(C=z=!1);C=z=!1;var i;if(i=b.params.followFinger?b.rtl?b.translate:-b.translate:-I,b.params.freeMode){if(i<-b.minTranslate())return void b.slideTo(b.activeIndex);if(i>-b.maxTranslate())return void(b.slides.length<b.snapGrid.length?b.slideTo(b.snapGrid.length-1):b.slideTo(b.slides.length-1));if(b.params.freeModeMomentum){if(X.length>1){var r=X.pop(),n=X.pop(),o=r.position-n.position,l=r.time-n.time;b.velocity=o/l,b.velocity=b.velocity/2,Math.abs(b.velocity)<b.params.freeModeMinimumVelocity&&(b.velocity=0),(l>150||(new window.Date).getTime()-r.time>300)&&(b.velocity=0)}else b.velocity=0;b.velocity=b.velocity*b.params.freeModeMomentumVelocityRatio,X.length=0;var p=1e3*b.params.freeModeMomentumRatio,d=b.velocity*p,u=b.translate+d;b.rtl&&(u=-u);var c,m=!1,h=20*Math.abs(b.velocity)*b.params.freeModeMomentumBounceRatio;if(u<b.maxTranslate())b.params.freeModeMomentumBounce?(u+b.maxTranslate()<-h&&(u=b.maxTranslate()-h),c=b.maxTranslate(),m=!0,B=!0):u=b.maxTranslate();else if(u>b.minTranslate())b.params.freeModeMomentumBounce?(u-b.minTranslate()>h&&(u=b.minTranslate()+h),c=b.minTranslate(),m=!0,B=!0):u=b.minTranslate();else if(b.params.freeModeSticky){var g,f=0;for(f=0;f<b.snapGrid.length;f+=1)if(b.snapGrid[f]>-u){g=f;break}u=Math.abs(b.snapGrid[g]-u)<Math.abs(b.snapGrid[g-1]-u)||"next"===b.swipeDirection?b.snapGrid[g]:b.snapGrid[g-1],b.rtl||(u=-u)}if(0!==b.velocity)p=b.rtl?Math.abs((-u-b.translate)/b.velocity):Math.abs((u-b.translate)/b.velocity);else if(b.params.freeModeSticky)return void b.slideReset();b.params.freeModeMomentumBounce&&m?(b.updateProgress(c),b.setWrapperTransition(p),b.setWrapperTranslate(u),b.onTransitionStart(),b.animating=!0,b.wrapper.transitionEnd(function(){b&&B&&(b.emit("onMomentumBounce",b),b.setWrapperTransition(b.params.speed),b.setWrapperTranslate(c),b.wrapper.transitionEnd(function(){b&&b.onTransitionEnd()}))})):b.velocity?(b.updateProgress(u),b.setWrapperTransition(p),b.setWrapperTranslate(u),b.onTransitionStart(),b.animating||(b.animating=!0,b.wrapper.transitionEnd(function(){b&&b.onTransitionEnd()}))):b.updateProgress(u),b.updateActiveIndex()}return void((!b.params.freeModeMomentum||s>=b.params.longSwipesMs)&&(b.updateProgress(),b.updateActiveIndex()))}var v,w=0,y=b.slidesSizesGrid[0];for(v=0;v<b.slidesGrid.length;v+=b.params.slidesPerGroup)"undefined"!=typeof b.slidesGrid[v+b.params.slidesPerGroup]?i>=b.slidesGrid[v]&&i<b.slidesGrid[v+b.params.slidesPerGroup]&&(w=v,y=b.slidesGrid[v+b.params.slidesPerGroup]-b.slidesGrid[v]):i>=b.slidesGrid[v]&&(w=v,y=b.slidesGrid[b.slidesGrid.length-1]-b.slidesGrid[b.slidesGrid.length-2]);var x=(i-b.slidesGrid[w])/y;if(s>b.params.longSwipesMs){if(!b.params.longSwipes)return void b.slideTo(b.activeIndex);"next"===b.swipeDirection&&(x>=b.params.longSwipesRatio?b.slideTo(w+b.params.slidesPerGroup):b.slideTo(w)),"prev"===b.swipeDirection&&(x>1-b.params.longSwipesRatio?b.slideTo(w+b.params.slidesPerGroup):b.slideTo(w))}else{if(!b.params.shortSwipes)return void b.slideTo(b.activeIndex);"next"===b.swipeDirection&&b.slideTo(w+b.params.slidesPerGroup),"prev"===b.swipeDirection&&b.slideTo(w)}}},b._slideTo=function(e,a){return b.slideTo(e,a,!0,!0)},b.slideTo=function(e,a,t,s){"undefined"==typeof t&&(t=!0),"undefined"==typeof e&&(e=0),e<0&&(e=0),b.snapIndex=Math.floor(e/b.params.slidesPerGroup),b.snapIndex>=b.snapGrid.length&&(b.snapIndex=b.snapGrid.length-1);var i=-b.snapGrid[b.snapIndex];if(b.params.autoplay&&b.autoplaying&&(s||!b.params.autoplayDisableOnInteraction?b.pauseAutoplay(a):b.stopAutoplay()),b.updateProgress(i),b.params.normalizeSlideIndex)for(var r=0;r<b.slidesGrid.length;r++)-Math.floor(100*i)>=Math.floor(100*b.slidesGrid[r])&&(e=r);return!(!b.params.allowSwipeToNext&&i<b.translate&&i<b.minTranslate())&&(!(!b.params.allowSwipeToPrev&&i>b.translate&&i>b.maxTranslate()&&(b.activeIndex||0)!==e)&&("undefined"==typeof a&&(a=b.params.speed),b.previousIndex=b.activeIndex||0,b.activeIndex=e,b.updateRealIndex(),b.rtl&&-i===b.translate||!b.rtl&&i===b.translate?(b.params.autoHeight&&b.updateAutoHeight(),b.updateClasses(),"slide"!==b.params.effect&&b.setWrapperTranslate(i),!1):(b.updateClasses(),b.onTransitionStart(t),0===a||b.browser.lteIE9?(b.setWrapperTranslate(i),b.setWrapperTransition(0),b.onTransitionEnd(t)):(b.setWrapperTranslate(i),b.setWrapperTransition(a),b.animating||(b.animating=!0,b.wrapper.transitionEnd(function(){b&&b.onTransitionEnd(t)}))),!0)))},b.onTransitionStart=function(e){"undefined"==typeof e&&(e=!0),b.params.autoHeight&&b.updateAutoHeight(),b.lazy&&b.lazy.onTransitionStart(),e&&(b.emit("onTransitionStart",b),b.activeIndex!==b.previousIndex&&(b.emit("onSlideChangeStart",b),b.activeIndex>b.previousIndex?b.emit("onSlideNextStart",b):b.emit("onSlidePrevStart",b)))},b.onTransitionEnd=function(e){b.animating=!1,b.setWrapperTransition(0),"undefined"==typeof e&&(e=!0),b.lazy&&b.lazy.onTransitionEnd(),e&&(b.emit("onTransitionEnd",b),b.activeIndex!==b.previousIndex&&(b.emit("onSlideChangeEnd",b),b.activeIndex>b.previousIndex?b.emit("onSlideNextEnd",b):b.emit("onSlidePrevEnd",b))),b.params.history&&b.history&&b.history.setHistory(b.params.history,b.activeIndex),b.params.hashnav&&b.hashnav&&b.hashnav.setHash()},b.slideNext=function(e,a,t){if(b.params.loop){if(b.animating)return!1;b.fixLoop();b.container[0].clientLeft;return b.slideTo(b.activeIndex+b.params.slidesPerGroup,a,e,t)}return b.slideTo(b.activeIndex+b.params.slidesPerGroup,a,e,t)},b._slideNext=function(e){return b.slideNext(!0,e,!0)},b.slidePrev=function(e,a,t){if(b.params.loop){if(b.animating)return!1;b.fixLoop();b.container[0].clientLeft;return b.slideTo(b.activeIndex-1,a,e,t)}return b.slideTo(b.activeIndex-1,a,e,t)},b._slidePrev=function(e){return b.slidePrev(!0,e,!0)},b.slideReset=function(e,a,t){return b.slideTo(b.activeIndex,a,e)},b.disableTouchControl=function(){return b.params.onlyExternal=!0,!0},b.enableTouchControl=function(){return b.params.onlyExternal=!1,!0},b.setWrapperTransition=function(e,a){b.wrapper.transition(e),"slide"!==b.params.effect&&b.effects[b.params.effect]&&b.effects[b.params.effect].setTransition(e),b.params.parallax&&b.parallax&&b.parallax.setTransition(e),b.params.scrollbar&&b.scrollbar&&b.scrollbar.setTransition(e),b.params.control&&b.controller&&b.controller.setTransition(e,a),b.emit("onSetTransition",b,e)},b.setWrapperTranslate=function(e,a,t){var s=0,i=0,n=0;b.isHorizontal()?s=b.rtl?-e:e:i=e,b.params.roundLengths&&(s=r(s),i=r(i)),b.params.virtualTranslate||(b.support.transforms3d?b.wrapper.transform("translate3d("+s+"px, "+i+"px, "+n+"px)"):b.wrapper.transform("translate("+s+"px, "+i+"px)")),b.translate=b.isHorizontal()?s:i;var o,l=b.maxTranslate()-b.minTranslate();o=0===l?0:(e-b.minTranslate())/l,o!==b.progress&&b.updateProgress(e),a&&b.updateActiveIndex(),"slide"!==b.params.effect&&b.effects[b.params.effect]&&b.effects[b.params.effect].setTranslate(b.translate),b.params.parallax&&b.parallax&&b.parallax.setTranslate(b.translate),b.params.scrollbar&&b.scrollbar&&b.scrollbar.setTranslate(b.translate),b.params.control&&b.controller&&b.controller.setTranslate(b.translate,t),b.emit("onSetTranslate",b,b.translate)},b.getTranslate=function(e,a){var t,s,i,r;return"undefined"==typeof a&&(a="x"),b.params.virtualTranslate?b.rtl?-b.translate:b.translate:(i=window.getComputedStyle(e,null),window.WebKitCSSMatrix?(s=i.transform||i.webkitTransform,s.split(",").length>6&&(s=s.split(", ").map(function(e){return e.replace(",",".")}).join(", ")),r=new window.WebKitCSSMatrix("none"===s?"":s)):(r=i.MozTransform||i.OTransform||i.MsTransform||i.msTransform||i.transform||i.getPropertyValue("transform").replace("translate(","matrix(1, 0, 0, 1,"),t=r.toString().split(",")),"x"===a&&(s=window.WebKitCSSMatrix?r.m41:16===t.length?parseFloat(t[12]):parseFloat(t[4])),"y"===a&&(s=window.WebKitCSSMatrix?r.m42:16===t.length?parseFloat(t[13]):parseFloat(t[5])),b.rtl&&s&&(s=-s),s||0)},b.getWrapperTranslate=function(e){return"undefined"==typeof e&&(e=b.isHorizontal()?"x":"y"),b.getTranslate(b.wrapper[0],e)},b.observers=[],b.initObservers=function(){if(b.params.observeParents)for(var e=b.container.parents(),a=0;a<e.length;a++)l(e[a]);l(b.container[0],{childList:!1}),l(b.wrapper[0],{attributes:!1})},b.disconnectObservers=function(){for(var e=0;e<b.observers.length;e++)b.observers[e].disconnect();b.observers=[]},b.createLoop=function(){b.wrapper.children("."+b.params.slideClass+"."+b.params.slideDuplicateClass).remove();var e=b.wrapper.children("."+b.params.slideClass);"auto"!==b.params.slidesPerView||b.params.loopedSlides||(b.params.loopedSlides=e.length),b.loopedSlides=parseInt(b.params.loopedSlides||b.params.slidesPerView,10),b.loopedSlides=b.loopedSlides+b.params.loopAdditionalSlides,b.loopedSlides>e.length&&(b.loopedSlides=e.length);var t,s=[],i=[];for(e.each(function(t,r){var n=a(this);t<b.loopedSlides&&i.push(r),t<e.length&&t>=e.length-b.loopedSlides&&s.push(r),n.attr("data-swiper-slide-index",t)}),t=0;t<i.length;t++)b.wrapper.append(a(i[t].cloneNode(!0)).addClass(b.params.slideDuplicateClass));for(t=s.length-1;t>=0;t--)b.wrapper.prepend(a(s[t].cloneNode(!0)).addClass(b.params.slideDuplicateClass))},b.destroyLoop=function(){b.wrapper.children("."+b.params.slideClass+"."+b.params.slideDuplicateClass).remove(),b.slides.removeAttr("data-swiper-slide-index")},b.reLoop=function(e){var a=b.activeIndex-b.loopedSlides;b.destroyLoop(),b.createLoop(),b.updateSlidesSize(),e&&b.slideTo(a+b.loopedSlides,0,!1)},b.fixLoop=function(){var e;b.activeIndex<b.loopedSlides?(e=b.slides.length-3*b.loopedSlides+b.activeIndex,e+=b.loopedSlides,b.slideTo(e,0,!1,!0)):("auto"===b.params.slidesPerView&&b.activeIndex>=2*b.loopedSlides||b.activeIndex>b.slides.length-2*b.params.slidesPerView)&&(e=-b.slides.length+b.activeIndex+b.loopedSlides,e+=b.loopedSlides,b.slideTo(e,0,!1,!0))},b.appendSlide=function(e){if(b.params.loop&&b.destroyLoop(),"object"==typeof e&&e.length)for(var a=0;a<e.length;a++)e[a]&&b.wrapper.append(e[a]);else b.wrapper.append(e);b.params.loop&&b.createLoop(),b.params.observer&&b.support.observer||b.update(!0)},b.prependSlide=function(e){b.params.loop&&b.destroyLoop();var a=b.activeIndex+1;if("object"==typeof e&&e.length){for(var t=0;t<e.length;t++)e[t]&&b.wrapper.prepend(e[t]);a=b.activeIndex+e.length}else b.wrapper.prepend(e);b.params.loop&&b.createLoop(),b.params.observer&&b.support.observer||b.update(!0),b.slideTo(a,0,!1)},b.removeSlide=function(e){b.params.loop&&(b.destroyLoop(),b.slides=b.wrapper.children("."+b.params.slideClass));var a,t=b.activeIndex;if("object"==typeof e&&e.length){for(var s=0;s<e.length;s++)a=e[s],b.slides[a]&&b.slides.eq(a).remove(),a<t&&t--;t=Math.max(t,0)}else a=e,b.slides[a]&&b.slides.eq(a).remove(),a<t&&t--,t=Math.max(t,0);b.params.loop&&b.createLoop(),b.params.observer&&b.support.observer||b.update(!0),b.params.loop?b.slideTo(t+b.loopedSlides,0,!1):b.slideTo(t,0,!1)},b.removeAllSlides=function(){for(var e=[],a=0;a<b.slides.length;a++)e.push(a);b.removeSlide(e)},b.effects={fade:{setTranslate:function(){for(var e=0;e<b.slides.length;e++){var a=b.slides.eq(e),t=a[0].swiperSlideOffset,s=-t;b.params.virtualTranslate||(s-=b.translate);var i=0;b.isHorizontal()||(i=s,s=0);var r=b.params.fade.crossFade?Math.max(1-Math.abs(a[0].progress),0):1+Math.min(Math.max(a[0].progress,-1),0);a.css({opacity:r}).transform("translate3d("+s+"px, "+i+"px, 0px)")}},setTransition:function(e){if(b.slides.transition(e),b.params.virtualTranslate&&0!==e){var a=!1;b.slides.transitionEnd(function(){if(!a&&b){a=!0,b.animating=!1;for(var e=["webkitTransitionEnd","transitionend","oTransitionEnd","MSTransitionEnd","msTransitionEnd"],t=0;t<e.length;t++)b.wrapper.trigger(e[t])}})}}},flip:{setTranslate:function(){for(var e=0;e<b.slides.length;e++){var t=b.slides.eq(e),s=t[0].progress;b.params.flip.limitRotation&&(s=Math.max(Math.min(t[0].progress,1),-1));var i=t[0].swiperSlideOffset,r=-180*s,n=r,o=0,l=-i,p=0;if(b.isHorizontal()?b.rtl&&(n=-n):(p=l,l=0,o=-n,n=0),t[0].style.zIndex=-Math.abs(Math.round(s))+b.slides.length,b.params.flip.slideShadows){var d=b.isHorizontal()?t.find(".swiper-slide-shadow-left"):t.find(".swiper-slide-shadow-top"),u=b.isHorizontal()?t.find(".swiper-slide-shadow-right"):t.find(".swiper-slide-shadow-bottom");0===d.length&&(d=a('<div class="swiper-slide-shadow-'+(b.isHorizontal()?"left":"top")+'"></div>'),t.append(d)),0===u.length&&(u=a('<div class="swiper-slide-shadow-'+(b.isHorizontal()?"right":"bottom")+'"></div>'),t.append(u)),d.length&&(d[0].style.opacity=Math.max(-s,0)),u.length&&(u[0].style.opacity=Math.max(s,0))}t.transform("translate3d("+l+"px, "+p+"px, 0px) rotateX("+o+"deg) rotateY("+n+"deg)")}},setTransition:function(e){if(b.slides.transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e),b.params.virtualTranslate&&0!==e){var t=!1;b.slides.eq(b.activeIndex).transitionEnd(function(){if(!t&&b&&a(this).hasClass(b.params.slideActiveClass)){t=!0,b.animating=!1;for(var e=["webkitTransitionEnd","transitionend","oTransitionEnd","MSTransitionEnd","msTransitionEnd"],s=0;s<e.length;s++)b.wrapper.trigger(e[s])}})}}},cube:{setTranslate:function(){var e,t=0;b.params.cube.shadow&&(b.isHorizontal()?(e=b.wrapper.find(".swiper-cube-shadow"),0===e.length&&(e=a('<div class="swiper-cube-shadow"></div>'),b.wrapper.append(e)),e.css({height:b.width+"px"})):(e=b.container.find(".swiper-cube-shadow"),0===e.length&&(e=a('<div class="swiper-cube-shadow"></div>'),b.container.append(e))));for(var s=0;s<b.slides.length;s++){var i=b.slides.eq(s),r=90*s,n=Math.floor(r/360);b.rtl&&(r=-r,n=Math.floor(-r/360));var o=Math.max(Math.min(i[0].progress,1),-1),l=0,p=0,d=0;s%4===0?(l=4*-n*b.size,d=0):(s-1)%4===0?(l=0,d=4*-n*b.size):(s-2)%4===0?(l=b.size+4*n*b.size,d=b.size):(s-3)%4===0&&(l=-b.size,d=3*b.size+4*b.size*n),b.rtl&&(l=-l),b.isHorizontal()||(p=l,l=0);var u="rotateX("+(b.isHorizontal()?0:-r)+"deg) rotateY("+(b.isHorizontal()?r:0)+"deg) translate3d("+l+"px, "+p+"px, "+d+"px)";if(o<=1&&o>-1&&(t=90*s+90*o,b.rtl&&(t=90*-s-90*o)),i.transform(u),b.params.cube.slideShadows){var c=b.isHorizontal()?i.find(".swiper-slide-shadow-left"):i.find(".swiper-slide-shadow-top"),m=b.isHorizontal()?i.find(".swiper-slide-shadow-right"):i.find(".swiper-slide-shadow-bottom");0===c.length&&(c=a('<div class="swiper-slide-shadow-'+(b.isHorizontal()?"left":"top")+'"></div>'),i.append(c)),0===m.length&&(m=a('<div class="swiper-slide-shadow-'+(b.isHorizontal()?"right":"bottom")+'"></div>'),i.append(m)),c.length&&(c[0].style.opacity=Math.max(-o,0)),m.length&&(m[0].style.opacity=Math.max(o,0))}}if(b.wrapper.css({"-webkit-transform-origin":"50% 50% -"+b.size/2+"px","-moz-transform-origin":"50% 50% -"+b.size/2+"px","-ms-transform-origin":"50% 50% -"+b.size/2+"px","transform-origin":"50% 50% -"+b.size/2+"px"}),b.params.cube.shadow)if(b.isHorizontal())e.transform("translate3d(0px, "+(b.width/2+b.params.cube.shadowOffset)+"px, "+-b.width/2+"px) rotateX(90deg) rotateZ(0deg) scale("+b.params.cube.shadowScale+")");else{var h=Math.abs(t)-90*Math.floor(Math.abs(t)/90),g=1.5-(Math.sin(2*h*Math.PI/360)/2+Math.cos(2*h*Math.PI/360)/2),f=b.params.cube.shadowScale,v=b.params.cube.shadowScale/g,w=b.params.cube.shadowOffset;e.transform("scale3d("+f+", 1, "+v+") translate3d(0px, "+(b.height/2+w)+"px, "+-b.height/2/v+"px) rotateX(-90deg)")}var y=b.isSafari||b.isUiWebView?-b.size/2:0;b.wrapper.transform("translate3d(0px,0,"+y+"px) rotateX("+(b.isHorizontal()?0:t)+"deg) rotateY("+(b.isHorizontal()?-t:0)+"deg)")},setTransition:function(e){b.slides.transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e),b.params.cube.shadow&&!b.isHorizontal()&&b.container.find(".swiper-cube-shadow").transition(e)}},coverflow:{setTranslate:function(){for(var e=b.translate,t=b.isHorizontal()?-e+b.width/2:-e+b.height/2,s=b.isHorizontal()?b.params.coverflow.rotate:-b.params.coverflow.rotate,i=b.params.coverflow.depth,r=0,n=b.slides.length;r<n;r++){var o=b.slides.eq(r),l=b.slidesSizesGrid[r],p=o[0].swiperSlideOffset,d=(t-p-l/2)/l*b.params.coverflow.modifier,u=b.isHorizontal()?s*d:0,c=b.isHorizontal()?0:s*d,m=-i*Math.abs(d),h=b.isHorizontal()?0:b.params.coverflow.stretch*d,g=b.isHorizontal()?b.params.coverflow.stretch*d:0;Math.abs(g)<.001&&(g=0),Math.abs(h)<.001&&(h=0),Math.abs(m)<.001&&(m=0),Math.abs(u)<.001&&(u=0),Math.abs(c)<.001&&(c=0);var f="translate3d("+g+"px,"+h+"px,"+m+"px) rotateX("+c+"deg) rotateY("+u+"deg)";if(o.transform(f),o[0].style.zIndex=-Math.abs(Math.round(d))+1,b.params.coverflow.slideShadows){var v=b.isHorizontal()?o.find(".swiper-slide-shadow-left"):o.find(".swiper-slide-shadow-top"),w=b.isHorizontal()?o.find(".swiper-slide-shadow-right"):o.find(".swiper-slide-shadow-bottom");0===v.length&&(v=a('<div class="swiper-slide-shadow-'+(b.isHorizontal()?"left":"top")+'"></div>'),o.append(v)),0===w.length&&(w=a('<div class="swiper-slide-shadow-'+(b.isHorizontal()?"right":"bottom")+'"></div>'),o.append(w)),v.length&&(v[0].style.opacity=d>0?d:0),w.length&&(w[0].style.opacity=-d>0?-d:0)}}if(b.browser.ie){var y=b.wrapper[0].style;y.perspectiveOrigin=t+"px 50%"}},setTransition:function(e){b.slides.transition(e).find(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").transition(e)}}},b.lazy={initialImageLoaded:!1,loadImageInSlide:function(e,t){if("undefined"!=typeof e&&("undefined"==typeof t&&(t=!0),0!==b.slides.length)){var s=b.slides.eq(e),i=s.find("."+b.params.lazyLoadingClass+":not(."+b.params.lazyStatusLoadedClass+"):not(."+b.params.lazyStatusLoadingClass+")");!s.hasClass(b.params.lazyLoadingClass)||s.hasClass(b.params.lazyStatusLoadedClass)||s.hasClass(b.params.lazyStatusLoadingClass)||(i=i.add(s[0])),0!==i.length&&i.each(function(){var e=a(this);e.addClass(b.params.lazyStatusLoadingClass);var i=e.attr("data-background"),r=e.attr("data-src"),n=e.attr("data-srcset"),o=e.attr("data-sizes");b.loadImage(e[0],r||i,n,o,!1,function(){if(i?(e.css("background-image",'url("'+i+'")'),e.removeAttr("data-background")):(n&&(e.attr("srcset",n),e.removeAttr("data-srcset")),o&&(e.attr("sizes",o),e.removeAttr("data-sizes")),r&&(e.attr("src",r),e.removeAttr("data-src"))),e.addClass(b.params.lazyStatusLoadedClass).removeClass(b.params.lazyStatusLoadingClass),s.find("."+b.params.lazyPreloaderClass+", ."+b.params.preloaderClass).remove(),b.params.loop&&t){var a=s.attr("data-swiper-slide-index");if(s.hasClass(b.params.slideDuplicateClass)){var l=b.wrapper.children('[data-swiper-slide-index="'+a+'"]:not(.'+b.params.slideDuplicateClass+")");b.lazy.loadImageInSlide(l.index(),!1)}else{var p=b.wrapper.children("."+b.params.slideDuplicateClass+'[data-swiper-slide-index="'+a+'"]');b.lazy.loadImageInSlide(p.index(),!1)}}b.emit("onLazyImageReady",b,s[0],e[0])}),b.emit("onLazyImageLoad",b,s[0],e[0])})}},load:function(){var e,t=b.params.slidesPerView;if("auto"===t&&(t=0),b.lazy.initialImageLoaded||(b.lazy.initialImageLoaded=!0),b.params.watchSlidesVisibility)b.wrapper.children("."+b.params.slideVisibleClass).each(function(){b.lazy.loadImageInSlide(a(this).index())});else if(t>1)for(e=b.activeIndex;e<b.activeIndex+t;e++)b.slides[e]&&b.lazy.loadImageInSlide(e);else b.lazy.loadImageInSlide(b.activeIndex);if(b.params.lazyLoadingInPrevNext)if(t>1||b.params.lazyLoadingInPrevNextAmount&&b.params.lazyLoadingInPrevNextAmount>1){var s=b.params.lazyLoadingInPrevNextAmount,i=t,r=Math.min(b.activeIndex+i+Math.max(s,i),b.slides.length),n=Math.max(b.activeIndex-Math.max(i,s),0);for(e=b.activeIndex+t;e<r;e++)b.slides[e]&&b.lazy.loadImageInSlide(e);for(e=n;e<b.activeIndex;e++)b.slides[e]&&b.lazy.loadImageInSlide(e)}else{var o=b.wrapper.children("."+b.params.slideNextClass);o.length>0&&b.lazy.loadImageInSlide(o.index());var l=b.wrapper.children("."+b.params.slidePrevClass);l.length>0&&b.lazy.loadImageInSlide(l.index())}},onTransitionStart:function(){b.params.lazyLoading&&(b.params.lazyLoadingOnTransitionStart||!b.params.lazyLoadingOnTransitionStart&&!b.lazy.initialImageLoaded)&&b.lazy.load()},onTransitionEnd:function(){b.params.lazyLoading&&!b.params.lazyLoadingOnTransitionStart&&b.lazy.load()}},b.scrollbar={isTouched:!1,setDragPosition:function(e){var a=b.scrollbar,t=b.isHorizontal()?"touchstart"===e.type||"touchmove"===e.type?e.targetTouches[0].pageX:e.pageX||e.clientX:"touchstart"===e.type||"touchmove"===e.type?e.targetTouches[0].pageY:e.pageY||e.clientY,s=t-a.track.offset()[b.isHorizontal()?"left":"top"]-a.dragSize/2,i=-b.minTranslate()*a.moveDivider,r=-b.maxTranslate()*a.moveDivider;s<i?s=i:s>r&&(s=r),s=-s/a.moveDivider,b.updateProgress(s),b.setWrapperTranslate(s,!0)},dragStart:function(e){var a=b.scrollbar;a.isTouched=!0,e.preventDefault(),e.stopPropagation(),a.setDragPosition(e),clearTimeout(a.dragTimeout),a.track.transition(0),b.params.scrollbarHide&&a.track.css("opacity",1),b.wrapper.transition(100),a.drag.transition(100),b.emit("onScrollbarDragStart",b)},dragMove:function(e){var a=b.scrollbar;a.isTouched&&(e.preventDefault?e.preventDefault():e.returnValue=!1,a.setDragPosition(e),b.wrapper.transition(0),a.track.transition(0),a.drag.transition(0),b.emit("onScrollbarDragMove",b))},dragEnd:function(e){var a=b.scrollbar;a.isTouched&&(a.isTouched=!1,b.params.scrollbarHide&&(clearTimeout(a.dragTimeout),a.dragTimeout=setTimeout(function(){a.track.css("opacity",0),a.track.transition(400)},1e3)),b.emit("onScrollbarDragEnd",b),b.params.scrollbarSnapOnRelease&&b.slideReset())},draggableEvents:function(){return b.params.simulateTouch!==!1||b.support.touch?b.touchEvents:b.touchEventsDesktop}(),enableDraggable:function(){var e=b.scrollbar,t=b.support.touch?e.track:document;a(e.track).on(e.draggableEvents.start,e.dragStart),a(t).on(e.draggableEvents.move,e.dragMove),a(t).on(e.draggableEvents.end,e.dragEnd)},disableDraggable:function(){var e=b.scrollbar,t=b.support.touch?e.track:document;a(e.track).off(e.draggableEvents.start,e.dragStart),a(t).off(e.draggableEvents.move,e.dragMove),a(t).off(e.draggableEvents.end,e.dragEnd)},set:function(){if(b.params.scrollbar){var e=b.scrollbar;e.track=a(b.params.scrollbar),b.params.uniqueNavElements&&"string"==typeof b.params.scrollbar&&e.track.length>1&&1===b.container.find(b.params.scrollbar).length&&(e.track=b.container.find(b.params.scrollbar)),e.drag=e.track.find(".swiper-scrollbar-drag"),0===e.drag.length&&(e.drag=a('<div class="swiper-scrollbar-drag"></div>'),e.track.append(e.drag)),e.drag[0].style.width="",e.drag[0].style.height="",e.trackSize=b.isHorizontal()?e.track[0].offsetWidth:e.track[0].offsetHeight,e.divider=b.size/b.virtualSize,e.moveDivider=e.divider*(e.trackSize/b.size),e.dragSize=e.trackSize*e.divider,b.isHorizontal()?e.drag[0].style.width=e.dragSize+"px":e.drag[0].style.height=e.dragSize+"px",e.divider>=1?e.track[0].style.display="none":e.track[0].style.display="",b.params.scrollbarHide&&(e.track[0].style.opacity=0)}},setTranslate:function(){if(b.params.scrollbar){var e,a=b.scrollbar,t=(b.translate||0,a.dragSize);e=(a.trackSize-a.dragSize)*b.progress,b.rtl&&b.isHorizontal()?(e=-e,e>0?(t=a.dragSize-e,e=0):-e+a.dragSize>a.trackSize&&(t=a.trackSize+e)):e<0?(t=a.dragSize+e,e=0):e+a.dragSize>a.trackSize&&(t=a.trackSize-e),b.isHorizontal()?(b.support.transforms3d?a.drag.transform("translate3d("+e+"px, 0, 0)"):a.drag.transform("translateX("+e+"px)"),a.drag[0].style.width=t+"px"):(b.support.transforms3d?a.drag.transform("translate3d(0px, "+e+"px, 0)"):a.drag.transform("translateY("+e+"px)"),a.drag[0].style.height=t+"px"),b.params.scrollbarHide&&(clearTimeout(a.timeout),a.track[0].style.opacity=1,a.timeout=setTimeout(function(){a.track[0].style.opacity=0,a.track.transition(400)},1e3))}},setTransition:function(e){b.params.scrollbar&&b.scrollbar.drag.transition(e)}},b.controller={LinearSpline:function(e,a){this.x=e,this.y=a,this.lastIndex=e.length-1;var t,s;this.x.length;this.interpolate=function(e){return e?(s=i(this.x,e),t=s-1,(e-this.x[t])*(this.y[s]-this.y[t])/(this.x[s]-this.x[t])+this.y[t]):0};var i=function(){var e,a,t;return function(s,i){for(a=-1,e=s.length;e-a>1;)s[t=e+a>>1]<=i?a=t:e=t;return e}}()},getInterpolateFunction:function(e){b.controller.spline||(b.controller.spline=b.params.loop?new b.controller.LinearSpline(b.slidesGrid,e.slidesGrid):new b.controller.LinearSpline(b.snapGrid,e.snapGrid))},setTranslate:function(e,a){function s(a){e=a.rtl&&"horizontal"===a.params.direction?-b.translate:b.translate,"slide"===b.params.controlBy&&(b.controller.getInterpolateFunction(a),r=-b.controller.spline.interpolate(-e)),r&&"container"!==b.params.controlBy||(i=(a.maxTranslate()-a.minTranslate())/(b.maxTranslate()-b.minTranslate()),r=(e-b.minTranslate())*i+a.minTranslate()),b.params.controlInverse&&(r=a.maxTranslate()-r),a.updateProgress(r),a.setWrapperTranslate(r,!1,b),a.updateActiveIndex()}var i,r,n=b.params.control;if(b.isArray(n))for(var o=0;o<n.length;o++)n[o]!==a&&n[o]instanceof t&&s(n[o]);else n instanceof t&&a!==n&&s(n)},setTransition:function(e,a){function s(a){
a.setWrapperTransition(e,b),0!==e&&(a.onTransitionStart(),a.wrapper.transitionEnd(function(){r&&(a.params.loop&&"slide"===b.params.controlBy&&a.fixLoop(),a.onTransitionEnd())}))}var i,r=b.params.control;if(b.isArray(r))for(i=0;i<r.length;i++)r[i]!==a&&r[i]instanceof t&&s(r[i]);else r instanceof t&&a!==r&&s(r)}},b.hashnav={onHashCange:function(e,a){var t=document.location.hash.replace("#",""),s=b.slides.eq(b.activeIndex).attr("data-hash");t!==s&&b.slideTo(b.wrapper.children("."+b.params.slideClass+'[data-hash="'+t+'"]').index())},attachEvents:function(e){var t=e?"off":"on";a(window)[t]("hashchange",b.hashnav.onHashCange)},setHash:function(){if(b.hashnav.initialized&&b.params.hashnav)if(b.params.replaceState&&window.history&&window.history.replaceState)window.history.replaceState(null,null,"#"+b.slides.eq(b.activeIndex).attr("data-hash")||"");else{var e=b.slides.eq(b.activeIndex),a=e.attr("data-hash")||e.attr("data-history");document.location.hash=a||""}},init:function(){if(b.params.hashnav&&!b.params.history){b.hashnav.initialized=!0;var e=document.location.hash.replace("#","");if(e)for(var a=0,t=0,s=b.slides.length;t<s;t++){var i=b.slides.eq(t),r=i.attr("data-hash")||i.attr("data-history");if(r===e&&!i.hasClass(b.params.slideDuplicateClass)){var n=i.index();b.slideTo(n,a,b.params.runCallbacksOnInit,!0)}}b.params.hashnavWatchState&&b.hashnav.attachEvents()}},destroy:function(){b.params.hashnavWatchState&&b.hashnav.attachEvents(!0)}},b.history={init:function(){if(b.params.history){if(!window.history||!window.history.pushState)return b.params.history=!1,void(b.params.hashnav=!0);b.history.initialized=!0,this.paths=this.getPathValues(),(this.paths.key||this.paths.value)&&(this.scrollToSlide(0,this.paths.value,b.params.runCallbacksOnInit),b.params.replaceState||window.addEventListener("popstate",this.setHistoryPopState))}},setHistoryPopState:function(){b.history.paths=b.history.getPathValues(),b.history.scrollToSlide(b.params.speed,b.history.paths.value,!1)},getPathValues:function(){var e=window.location.pathname.slice(1).split("/"),a=e.length,t=e[a-2],s=e[a-1];return{key:t,value:s}},setHistory:function(e,a){if(b.history.initialized&&b.params.history){var t=b.slides.eq(a),s=this.slugify(t.attr("data-history"));window.location.pathname.includes(e)||(s=e+"/"+s),b.params.replaceState?window.history.replaceState(null,null,s):window.history.pushState(null,null,s)}},slugify:function(e){return e.toString().toLowerCase().replace(/\s+/g,"-").replace(/[^\w\-]+/g,"").replace(/\-\-+/g,"-").replace(/^-+/,"").replace(/-+$/,"")},scrollToSlide:function(e,a,t){if(a)for(var s=0,i=b.slides.length;s<i;s++){var r=b.slides.eq(s),n=this.slugify(r.attr("data-history"));if(n===a&&!r.hasClass(b.params.slideDuplicateClass)){var o=r.index();b.slideTo(o,e,t)}}else b.slideTo(0,e,t)}},b.disableKeyboardControl=function(){b.params.keyboardControl=!1,a(document).off("keydown",p)},b.enableKeyboardControl=function(){b.params.keyboardControl=!0,a(document).on("keydown",p)},b.mousewheel={event:!1,lastScrollTime:(new window.Date).getTime()},b.params.mousewheelControl&&(b.mousewheel.event=navigator.userAgent.indexOf("firefox")>-1?"DOMMouseScroll":d()?"wheel":"mousewheel"),b.disableMousewheelControl=function(){if(!b.mousewheel.event)return!1;var e=b.container;return"container"!==b.params.mousewheelEventsTarged&&(e=a(b.params.mousewheelEventsTarged)),e.off(b.mousewheel.event,u),!0},b.enableMousewheelControl=function(){if(!b.mousewheel.event)return!1;var e=b.container;return"container"!==b.params.mousewheelEventsTarged&&(e=a(b.params.mousewheelEventsTarged)),e.on(b.mousewheel.event,u),!0},b.parallax={setTranslate:function(){b.container.children("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]").each(function(){m(this,b.progress)}),b.slides.each(function(){var e=a(this);e.find("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]").each(function(){var a=Math.min(Math.max(e[0].progress,-1),1);m(this,a)})})},setTransition:function(e){"undefined"==typeof e&&(e=b.params.speed),b.container.find("[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y]").each(function(){var t=a(this),s=parseInt(t.attr("data-swiper-parallax-duration"),10)||e;0===e&&(s=0),t.transition(s)})}},b.zoom={scale:1,currentScale:1,isScaling:!1,gesture:{slide:void 0,slideWidth:void 0,slideHeight:void 0,image:void 0,imageWrap:void 0,zoomMax:b.params.zoomMax},image:{isTouched:void 0,isMoved:void 0,currentX:void 0,currentY:void 0,minX:void 0,minY:void 0,maxX:void 0,maxY:void 0,width:void 0,height:void 0,startX:void 0,startY:void 0,touchesStart:{},touchesCurrent:{}},velocity:{x:void 0,y:void 0,prevPositionX:void 0,prevPositionY:void 0,prevTime:void 0},getDistanceBetweenTouches:function(e){if(e.targetTouches.length<2)return 1;var a=e.targetTouches[0].pageX,t=e.targetTouches[0].pageY,s=e.targetTouches[1].pageX,i=e.targetTouches[1].pageY,r=Math.sqrt(Math.pow(s-a,2)+Math.pow(i-t,2));return r},onGestureStart:function(e){var t=b.zoom;if(!b.support.gestures){if("touchstart"!==e.type||"touchstart"===e.type&&e.targetTouches.length<2)return;t.gesture.scaleStart=t.getDistanceBetweenTouches(e)}return t.gesture.slide&&t.gesture.slide.length||(t.gesture.slide=a(this),0===t.gesture.slide.length&&(t.gesture.slide=b.slides.eq(b.activeIndex)),t.gesture.image=t.gesture.slide.find("img, svg, canvas"),t.gesture.imageWrap=t.gesture.image.parent("."+b.params.zoomContainerClass),t.gesture.zoomMax=t.gesture.imageWrap.attr("data-swiper-zoom")||b.params.zoomMax,0!==t.gesture.imageWrap.length)?(t.gesture.image.transition(0),void(t.isScaling=!0)):void(t.gesture.image=void 0)},onGestureChange:function(e){var a=b.zoom;if(!b.support.gestures){if("touchmove"!==e.type||"touchmove"===e.type&&e.targetTouches.length<2)return;a.gesture.scaleMove=a.getDistanceBetweenTouches(e)}a.gesture.image&&0!==a.gesture.image.length&&(b.support.gestures?a.scale=e.scale*a.currentScale:a.scale=a.gesture.scaleMove/a.gesture.scaleStart*a.currentScale,a.scale>a.gesture.zoomMax&&(a.scale=a.gesture.zoomMax-1+Math.pow(a.scale-a.gesture.zoomMax+1,.5)),a.scale<b.params.zoomMin&&(a.scale=b.params.zoomMin+1-Math.pow(b.params.zoomMin-a.scale+1,.5)),a.gesture.image.transform("translate3d(0,0,0) scale("+a.scale+")"))},onGestureEnd:function(e){var a=b.zoom;!b.support.gestures&&("touchend"!==e.type||"touchend"===e.type&&e.changedTouches.length<2)||a.gesture.image&&0!==a.gesture.image.length&&(a.scale=Math.max(Math.min(a.scale,a.gesture.zoomMax),b.params.zoomMin),a.gesture.image.transition(b.params.speed).transform("translate3d(0,0,0) scale("+a.scale+")"),a.currentScale=a.scale,a.isScaling=!1,1===a.scale&&(a.gesture.slide=void 0))},onTouchStart:function(e,a){var t=e.zoom;t.gesture.image&&0!==t.gesture.image.length&&(t.image.isTouched||("android"===e.device.os&&a.preventDefault(),t.image.isTouched=!0,t.image.touchesStart.x="touchstart"===a.type?a.targetTouches[0].pageX:a.pageX,t.image.touchesStart.y="touchstart"===a.type?a.targetTouches[0].pageY:a.pageY))},onTouchMove:function(e){var a=b.zoom;if(a.gesture.image&&0!==a.gesture.image.length&&(b.allowClick=!1,a.image.isTouched&&a.gesture.slide)){a.image.isMoved||(a.image.width=a.gesture.image[0].offsetWidth,a.image.height=a.gesture.image[0].offsetHeight,a.image.startX=b.getTranslate(a.gesture.imageWrap[0],"x")||0,a.image.startY=b.getTranslate(a.gesture.imageWrap[0],"y")||0,a.gesture.slideWidth=a.gesture.slide[0].offsetWidth,a.gesture.slideHeight=a.gesture.slide[0].offsetHeight,a.gesture.imageWrap.transition(0),b.rtl&&(a.image.startX=-a.image.startX),b.rtl&&(a.image.startY=-a.image.startY));var t=a.image.width*a.scale,s=a.image.height*a.scale;if(!(t<a.gesture.slideWidth&&s<a.gesture.slideHeight)){if(a.image.minX=Math.min(a.gesture.slideWidth/2-t/2,0),a.image.maxX=-a.image.minX,a.image.minY=Math.min(a.gesture.slideHeight/2-s/2,0),a.image.maxY=-a.image.minY,a.image.touchesCurrent.x="touchmove"===e.type?e.targetTouches[0].pageX:e.pageX,a.image.touchesCurrent.y="touchmove"===e.type?e.targetTouches[0].pageY:e.pageY,!a.image.isMoved&&!a.isScaling){if(b.isHorizontal()&&Math.floor(a.image.minX)===Math.floor(a.image.startX)&&a.image.touchesCurrent.x<a.image.touchesStart.x||Math.floor(a.image.maxX)===Math.floor(a.image.startX)&&a.image.touchesCurrent.x>a.image.touchesStart.x)return void(a.image.isTouched=!1);if(!b.isHorizontal()&&Math.floor(a.image.minY)===Math.floor(a.image.startY)&&a.image.touchesCurrent.y<a.image.touchesStart.y||Math.floor(a.image.maxY)===Math.floor(a.image.startY)&&a.image.touchesCurrent.y>a.image.touchesStart.y)return void(a.image.isTouched=!1)}e.preventDefault(),e.stopPropagation(),a.image.isMoved=!0,a.image.currentX=a.image.touchesCurrent.x-a.image.touchesStart.x+a.image.startX,a.image.currentY=a.image.touchesCurrent.y-a.image.touchesStart.y+a.image.startY,a.image.currentX<a.image.minX&&(a.image.currentX=a.image.minX+1-Math.pow(a.image.minX-a.image.currentX+1,.8)),a.image.currentX>a.image.maxX&&(a.image.currentX=a.image.maxX-1+Math.pow(a.image.currentX-a.image.maxX+1,.8)),a.image.currentY<a.image.minY&&(a.image.currentY=a.image.minY+1-Math.pow(a.image.minY-a.image.currentY+1,.8)),a.image.currentY>a.image.maxY&&(a.image.currentY=a.image.maxY-1+Math.pow(a.image.currentY-a.image.maxY+1,.8)),a.velocity.prevPositionX||(a.velocity.prevPositionX=a.image.touchesCurrent.x),a.velocity.prevPositionY||(a.velocity.prevPositionY=a.image.touchesCurrent.y),a.velocity.prevTime||(a.velocity.prevTime=Date.now()),a.velocity.x=(a.image.touchesCurrent.x-a.velocity.prevPositionX)/(Date.now()-a.velocity.prevTime)/2,a.velocity.y=(a.image.touchesCurrent.y-a.velocity.prevPositionY)/(Date.now()-a.velocity.prevTime)/2,Math.abs(a.image.touchesCurrent.x-a.velocity.prevPositionX)<2&&(a.velocity.x=0),Math.abs(a.image.touchesCurrent.y-a.velocity.prevPositionY)<2&&(a.velocity.y=0),a.velocity.prevPositionX=a.image.touchesCurrent.x,a.velocity.prevPositionY=a.image.touchesCurrent.y,a.velocity.prevTime=Date.now(),a.gesture.imageWrap.transform("translate3d("+a.image.currentX+"px, "+a.image.currentY+"px,0)")}}},onTouchEnd:function(e,a){var t=e.zoom;if(t.gesture.image&&0!==t.gesture.image.length){if(!t.image.isTouched||!t.image.isMoved)return t.image.isTouched=!1,void(t.image.isMoved=!1);t.image.isTouched=!1,t.image.isMoved=!1;var s=300,i=300,r=t.velocity.x*s,n=t.image.currentX+r,o=t.velocity.y*i,l=t.image.currentY+o;0!==t.velocity.x&&(s=Math.abs((n-t.image.currentX)/t.velocity.x)),0!==t.velocity.y&&(i=Math.abs((l-t.image.currentY)/t.velocity.y));var p=Math.max(s,i);t.image.currentX=n,t.image.currentY=l;var d=t.image.width*t.scale,u=t.image.height*t.scale;t.image.minX=Math.min(t.gesture.slideWidth/2-d/2,0),t.image.maxX=-t.image.minX,t.image.minY=Math.min(t.gesture.slideHeight/2-u/2,0),t.image.maxY=-t.image.minY,t.image.currentX=Math.max(Math.min(t.image.currentX,t.image.maxX),t.image.minX),t.image.currentY=Math.max(Math.min(t.image.currentY,t.image.maxY),t.image.minY),t.gesture.imageWrap.transition(p).transform("translate3d("+t.image.currentX+"px, "+t.image.currentY+"px,0)")}},onTransitionEnd:function(e){var a=e.zoom;a.gesture.slide&&e.previousIndex!==e.activeIndex&&(a.gesture.image.transform("translate3d(0,0,0) scale(1)"),a.gesture.imageWrap.transform("translate3d(0,0,0)"),a.gesture.slide=a.gesture.image=a.gesture.imageWrap=void 0,a.scale=a.currentScale=1)},toggleZoom:function(e,t){var s=e.zoom;if(s.gesture.slide||(s.gesture.slide=e.clickedSlide?a(e.clickedSlide):e.slides.eq(e.activeIndex),s.gesture.image=s.gesture.slide.find("img, svg, canvas"),s.gesture.imageWrap=s.gesture.image.parent("."+e.params.zoomContainerClass)),s.gesture.image&&0!==s.gesture.image.length){var i,r,n,o,l,p,d,u,c,m,h,g,f,v,w,y,x,T;"undefined"==typeof s.image.touchesStart.x&&t?(i="touchend"===t.type?t.changedTouches[0].pageX:t.pageX,r="touchend"===t.type?t.changedTouches[0].pageY:t.pageY):(i=s.image.touchesStart.x,r=s.image.touchesStart.y),s.scale&&1!==s.scale?(s.scale=s.currentScale=1,s.gesture.imageWrap.transition(300).transform("translate3d(0,0,0)"),s.gesture.image.transition(300).transform("translate3d(0,0,0) scale(1)"),s.gesture.slide=void 0):(s.scale=s.currentScale=s.gesture.imageWrap.attr("data-swiper-zoom")||e.params.zoomMax,t?(x=s.gesture.slide[0].offsetWidth,T=s.gesture.slide[0].offsetHeight,n=s.gesture.slide.offset().left,o=s.gesture.slide.offset().top,l=n+x/2-i,p=o+T/2-r,c=s.gesture.image[0].offsetWidth,m=s.gesture.image[0].offsetHeight,h=c*s.scale,g=m*s.scale,f=Math.min(x/2-h/2,0),v=Math.min(T/2-g/2,0),w=-f,y=-v,d=l*s.scale,u=p*s.scale,d<f&&(d=f),d>w&&(d=w),u<v&&(u=v),u>y&&(u=y)):(d=0,u=0),s.gesture.imageWrap.transition(300).transform("translate3d("+d+"px, "+u+"px,0)"),s.gesture.image.transition(300).transform("translate3d(0,0,0) scale("+s.scale+")"))}},attachEvents:function(e){var t=e?"off":"on";if(b.params.zoom){var s=(b.slides,!("touchstart"!==b.touchEvents.start||!b.support.passiveListener||!b.params.passiveListeners)&&{passive:!0,capture:!1});b.support.gestures?(b.slides[t]("gesturestart",b.zoom.onGestureStart,s),b.slides[t]("gesturechange",b.zoom.onGestureChange,s),b.slides[t]("gestureend",b.zoom.onGestureEnd,s)):"touchstart"===b.touchEvents.start&&(b.slides[t](b.touchEvents.start,b.zoom.onGestureStart,s),b.slides[t](b.touchEvents.move,b.zoom.onGestureChange,s),b.slides[t](b.touchEvents.end,b.zoom.onGestureEnd,s)),b[t]("touchStart",b.zoom.onTouchStart),b.slides.each(function(e,s){a(s).find("."+b.params.zoomContainerClass).length>0&&a(s)[t](b.touchEvents.move,b.zoom.onTouchMove)}),b[t]("touchEnd",b.zoom.onTouchEnd),b[t]("transitionEnd",b.zoom.onTransitionEnd),b.params.zoomToggle&&b.on("doubleTap",b.zoom.toggleZoom)}},init:function(){b.zoom.attachEvents()},destroy:function(){b.zoom.attachEvents(!0)}},b._plugins=[];for(var O in b.plugins){var N=b.plugins[O](b,b.params[O]);N&&b._plugins.push(N)}return b.callPlugins=function(e){for(var a=0;a<b._plugins.length;a++)e in b._plugins[a]&&b._plugins[a][e](arguments[1],arguments[2],arguments[3],arguments[4],arguments[5])},b.emitterEventListeners={},b.emit=function(e){b.params[e]&&b.params[e](arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]);var a;if(b.emitterEventListeners[e])for(a=0;a<b.emitterEventListeners[e].length;a++)b.emitterEventListeners[e][a](arguments[1],arguments[2],arguments[3],arguments[4],arguments[5]);b.callPlugins&&b.callPlugins(e,arguments[1],arguments[2],arguments[3],arguments[4],arguments[5])},b.on=function(e,a){return e=h(e),b.emitterEventListeners[e]||(b.emitterEventListeners[e]=[]),b.emitterEventListeners[e].push(a),b},b.off=function(e,a){var t;if(e=h(e),"undefined"==typeof a)return b.emitterEventListeners[e]=[],b;if(b.emitterEventListeners[e]&&0!==b.emitterEventListeners[e].length){for(t=0;t<b.emitterEventListeners[e].length;t++)b.emitterEventListeners[e][t]===a&&b.emitterEventListeners[e].splice(t,1);return b}},b.once=function(e,a){e=h(e);var t=function(){a(arguments[0],arguments[1],arguments[2],arguments[3],arguments[4]),b.off(e,t)};return b.on(e,t),b},b.a11y={makeFocusable:function(e){return e.attr("tabIndex","0"),e},addRole:function(e,a){return e.attr("role",a),e},addLabel:function(e,a){return e.attr("aria-label",a),e},disable:function(e){return e.attr("aria-disabled",!0),e},enable:function(e){return e.attr("aria-disabled",!1),e},onEnterKey:function(e){13===e.keyCode&&(a(e.target).is(b.params.nextButton)?(b.onClickNext(e),b.isEnd?b.a11y.notify(b.params.lastSlideMessage):b.a11y.notify(b.params.nextSlideMessage)):a(e.target).is(b.params.prevButton)&&(b.onClickPrev(e),b.isBeginning?b.a11y.notify(b.params.firstSlideMessage):b.a11y.notify(b.params.prevSlideMessage)),a(e.target).is("."+b.params.bulletClass)&&a(e.target)[0].click())},liveRegion:a('<span class="'+b.params.notificationClass+'" aria-live="assertive" aria-atomic="true"></span>'),notify:function(e){var a=b.a11y.liveRegion;0!==a.length&&(a.html(""),a.html(e))},init:function(){b.params.nextButton&&b.nextButton&&b.nextButton.length>0&&(b.a11y.makeFocusable(b.nextButton),b.a11y.addRole(b.nextButton,"button"),b.a11y.addLabel(b.nextButton,b.params.nextSlideMessage)),b.params.prevButton&&b.prevButton&&b.prevButton.length>0&&(b.a11y.makeFocusable(b.prevButton),b.a11y.addRole(b.prevButton,"button"),b.a11y.addLabel(b.prevButton,b.params.prevSlideMessage)),a(b.container).append(b.a11y.liveRegion)},initPagination:function(){b.params.pagination&&b.params.paginationClickable&&b.bullets&&b.bullets.length&&b.bullets.each(function(){var e=a(this);b.a11y.makeFocusable(e),b.a11y.addRole(e,"button"),b.a11y.addLabel(e,b.params.paginationBulletMessage.replace(/{{index}}/,e.index()+1))})},destroy:function(){b.a11y.liveRegion&&b.a11y.liveRegion.length>0&&b.a11y.liveRegion.remove()}},b.init=function(){b.params.loop&&b.createLoop(),b.updateContainerSize(),b.updateSlidesSize(),b.updatePagination(),b.params.scrollbar&&b.scrollbar&&(b.scrollbar.set(),b.params.scrollbarDraggable&&b.scrollbar.enableDraggable()),"slide"!==b.params.effect&&b.effects[b.params.effect]&&(b.params.loop||b.updateProgress(),b.effects[b.params.effect].setTranslate()),b.params.loop?b.slideTo(b.params.initialSlide+b.loopedSlides,0,b.params.runCallbacksOnInit):(b.slideTo(b.params.initialSlide,0,b.params.runCallbacksOnInit),0===b.params.initialSlide&&(b.parallax&&b.params.parallax&&b.parallax.setTranslate(),b.lazy&&b.params.lazyLoading&&(b.lazy.load(),b.lazy.initialImageLoaded=!0))),b.attachEvents(),b.params.observer&&b.support.observer&&b.initObservers(),b.params.preloadImages&&!b.params.lazyLoading&&b.preloadImages(),b.params.zoom&&b.zoom&&b.zoom.init(),b.params.autoplay&&b.startAutoplay(),b.params.keyboardControl&&b.enableKeyboardControl&&b.enableKeyboardControl(),b.params.mousewheelControl&&b.enableMousewheelControl&&b.enableMousewheelControl(),b.params.hashnavReplaceState&&(b.params.replaceState=b.params.hashnavReplaceState),b.params.history&&b.history&&b.history.init(),b.params.hashnav&&b.hashnav&&b.hashnav.init(),b.params.a11y&&b.a11y&&b.a11y.init(),b.emit("onInit",b)},b.cleanupStyles=function(){b.container.removeClass(b.classNames.join(" ")).removeAttr("style"),b.wrapper.removeAttr("style"),b.slides&&b.slides.length&&b.slides.removeClass([b.params.slideVisibleClass,b.params.slideActiveClass,b.params.slideNextClass,b.params.slidePrevClass].join(" ")).removeAttr("style").removeAttr("data-swiper-column").removeAttr("data-swiper-row"),b.paginationContainer&&b.paginationContainer.length&&b.paginationContainer.removeClass(b.params.paginationHiddenClass),b.bullets&&b.bullets.length&&b.bullets.removeClass(b.params.bulletActiveClass),b.params.prevButton&&a(b.params.prevButton).removeClass(b.params.buttonDisabledClass),b.params.nextButton&&a(b.params.nextButton).removeClass(b.params.buttonDisabledClass),b.params.scrollbar&&b.scrollbar&&(b.scrollbar.track&&b.scrollbar.track.length&&b.scrollbar.track.removeAttr("style"),b.scrollbar.drag&&b.scrollbar.drag.length&&b.scrollbar.drag.removeAttr("style"))},b.destroy=function(e,a){b.detachEvents(),b.stopAutoplay(),b.params.scrollbar&&b.scrollbar&&b.params.scrollbarDraggable&&b.scrollbar.disableDraggable(),b.params.loop&&b.destroyLoop(),a&&b.cleanupStyles(),b.disconnectObservers(),b.params.zoom&&b.zoom&&b.zoom.destroy(),b.params.keyboardControl&&b.disableKeyboardControl&&b.disableKeyboardControl(),b.params.mousewheelControl&&b.disableMousewheelControl&&b.disableMousewheelControl(),b.params.a11y&&b.a11y&&b.a11y.destroy(),b.params.history&&!b.params.replaceState&&window.removeEventListener("popstate",b.history.setHistoryPopState),b.params.hashnav&&b.hashnav&&b.hashnav.destroy(),b.emit("onDestroy"),e!==!1&&(b=null)},b.init(),b}};t.prototype={isSafari:function(){var e=window.navigator.userAgent.toLowerCase();return e.indexOf("safari")>=0&&e.indexOf("chrome")<0&&e.indexOf("android")<0}(),isUiWebView:/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(window.navigator.userAgent),isArray:function(e){return"[object Array]"===Object.prototype.toString.apply(e)},browser:{ie:window.navigator.pointerEnabled||window.navigator.msPointerEnabled,ieTouch:window.navigator.msPointerEnabled&&window.navigator.msMaxTouchPoints>1||window.navigator.pointerEnabled&&window.navigator.maxTouchPoints>1,lteIE9:function(){var e=document.createElement("div");return e.innerHTML="<!--[if lte IE 9]><i></i><![endif]-->",1===e.getElementsByTagName("i").length}()},device:function(){var e=window.navigator.userAgent,a=e.match(/(Android);?[\s\/]+([\d.]+)?/),t=e.match(/(iPad).*OS\s([\d_]+)/),s=e.match(/(iPod)(.*OS\s([\d_]+))?/),i=!t&&e.match(/(iPhone\sOS|iOS)\s([\d_]+)/);return{ios:t||i||s,android:a}}(),support:{touch:window.Modernizr&&Modernizr.touch===!0||function(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)}(),transforms3d:window.Modernizr&&Modernizr.csstransforms3d===!0||function(){var e=document.createElement("div").style;return"webkitPerspective"in e||"MozPerspective"in e||"OPerspective"in e||"MsPerspective"in e||"perspective"in e}(),flexbox:function(){for(var e=document.createElement("div").style,a="alignItems webkitAlignItems webkitBoxAlign msFlexAlign mozBoxAlign webkitFlexDirection msFlexDirection mozBoxDirection mozBoxOrient webkitBoxDirection webkitBoxOrient".split(" "),t=0;t<a.length;t++)if(a[t]in e)return!0}(),observer:function(){return"MutationObserver"in window||"WebkitMutationObserver"in window}(),passiveListener:function(){var e=!1;try{var a=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("testPassiveListener",null,a)}catch(e){}return e}(),gestures:function(){return"ongesturestart"in window}()},plugins:{}};for(var s=(function(){var e=function(e){var a=this,t=0;for(t=0;t<e.length;t++)a[t]=e[t];return a.length=e.length,this},a=function(a,t){var s=[],i=0;if(a&&!t&&a instanceof e)return a;if(a)if("string"==typeof a){var r,n,o=a.trim();if(o.indexOf("<")>=0&&o.indexOf(">")>=0){var l="div";for(0===o.indexOf("<li")&&(l="ul"),0===o.indexOf("<tr")&&(l="tbody"),0!==o.indexOf("<td")&&0!==o.indexOf("<th")||(l="tr"),0===o.indexOf("<tbody")&&(l="table"),0===o.indexOf("<option")&&(l="select"),n=document.createElement(l),n.innerHTML=a,i=0;i<n.childNodes.length;i++)s.push(n.childNodes[i])}else for(r=t||"#"!==a[0]||a.match(/[ .<>:~]/)?(t||document).querySelectorAll(a):[document.getElementById(a.split("#")[1])],i=0;i<r.length;i++)r[i]&&s.push(r[i])}else if(a.nodeType||a===window||a===document)s.push(a);else if(a.length>0&&a[0].nodeType)for(i=0;i<a.length;i++)s.push(a[i]);return new e(s)};return e.prototype={addClass:function(e){if("undefined"==typeof e)return this;for(var a=e.split(" "),t=0;t<a.length;t++)for(var s=0;s<this.length;s++)this[s].classList.add(a[t]);return this},removeClass:function(e){for(var a=e.split(" "),t=0;t<a.length;t++)for(var s=0;s<this.length;s++)this[s].classList.remove(a[t]);return this},hasClass:function(e){return!!this[0]&&this[0].classList.contains(e)},toggleClass:function(e){for(var a=e.split(" "),t=0;t<a.length;t++)for(var s=0;s<this.length;s++)this[s].classList.toggle(a[t]);return this},attr:function(e,a){if(1===arguments.length&&"string"==typeof e)return this[0]?this[0].getAttribute(e):void 0;for(var t=0;t<this.length;t++)if(2===arguments.length)this[t].setAttribute(e,a);else for(var s in e)this[t][s]=e[s],this[t].setAttribute(s,e[s]);return this},removeAttr:function(e){for(var a=0;a<this.length;a++)this[a].removeAttribute(e);return this},data:function(e,a){if("undefined"!=typeof a){for(var t=0;t<this.length;t++){var s=this[t];s.dom7ElementDataStorage||(s.dom7ElementDataStorage={}),s.dom7ElementDataStorage[e]=a}return this}if(this[0]){var i=this[0].getAttribute("data-"+e);return i?i:this[0].dom7ElementDataStorage&&e in this[0].dom7ElementDataStorage?this[0].dom7ElementDataStorage[e]:void 0}},transform:function(e){for(var a=0;a<this.length;a++){var t=this[a].style;t.webkitTransform=t.MsTransform=t.msTransform=t.MozTransform=t.OTransform=t.transform=e}return this},transition:function(e){"string"!=typeof e&&(e+="ms");for(var a=0;a<this.length;a++){var t=this[a].style;t.webkitTransitionDuration=t.MsTransitionDuration=t.msTransitionDuration=t.MozTransitionDuration=t.OTransitionDuration=t.transitionDuration=e}return this},on:function(e,t,s,i){function r(e){var i=e.target;if(a(i).is(t))s.call(i,e);else for(var r=a(i).parents(),n=0;n<r.length;n++)a(r[n]).is(t)&&s.call(r[n],e)}var n,o,l=e.split(" ");for(n=0;n<this.length;n++)if("function"==typeof t||t===!1)for("function"==typeof t&&(s=arguments[1],i=arguments[2]||!1),o=0;o<l.length;o++)this[n].addEventListener(l[o],s,i);else for(o=0;o<l.length;o++)this[n].dom7LiveListeners||(this[n].dom7LiveListeners=[]),this[n].dom7LiveListeners.push({listener:s,liveListener:r}),this[n].addEventListener(l[o],r,i);return this},off:function(e,a,t,s){for(var i=e.split(" "),r=0;r<i.length;r++)for(var n=0;n<this.length;n++)if("function"==typeof a||a===!1)"function"==typeof a&&(t=arguments[1],s=arguments[2]||!1),this[n].removeEventListener(i[r],t,s);else if(this[n].dom7LiveListeners)for(var o=0;o<this[n].dom7LiveListeners.length;o++)this[n].dom7LiveListeners[o].listener===t&&this[n].removeEventListener(i[r],this[n].dom7LiveListeners[o].liveListener,s);return this},once:function(e,a,t,s){function i(n){t(n),r.off(e,a,i,s)}var r=this;"function"==typeof a&&(a=!1,t=arguments[1],s=arguments[2]),r.on(e,a,i,s)},trigger:function(e,a){for(var t=0;t<this.length;t++){var s;try{s=new window.CustomEvent(e,{detail:a,bubbles:!0,cancelable:!0})}catch(t){s=document.createEvent("Event"),s.initEvent(e,!0,!0),s.detail=a}this[t].dispatchEvent(s)}return this},transitionEnd:function(e){function a(r){if(r.target===this)for(e.call(this,r),t=0;t<s.length;t++)i.off(s[t],a)}var t,s=["webkitTransitionEnd","transitionend","oTransitionEnd","MSTransitionEnd","msTransitionEnd"],i=this;if(e)for(t=0;t<s.length;t++)i.on(s[t],a);return this},width:function(){return this[0]===window?window.innerWidth:this.length>0?parseFloat(this.css("width")):null},outerWidth:function(e){return this.length>0?e?this[0].offsetWidth+parseFloat(this.css("margin-right"))+parseFloat(this.css("margin-left")):this[0].offsetWidth:null},height:function(){return this[0]===window?window.innerHeight:this.length>0?parseFloat(this.css("height")):null},outerHeight:function(e){return this.length>0?e?this[0].offsetHeight+parseFloat(this.css("margin-top"))+parseFloat(this.css("margin-bottom")):this[0].offsetHeight:null},offset:function(){if(this.length>0){var e=this[0],a=e.getBoundingClientRect(),t=document.body,s=e.clientTop||t.clientTop||0,i=e.clientLeft||t.clientLeft||0,r=window.pageYOffset||e.scrollTop,n=window.pageXOffset||e.scrollLeft;return{top:a.top+r-s,left:a.left+n-i}}return null},css:function(e,a){var t;if(1===arguments.length){if("string"!=typeof e){for(t=0;t<this.length;t++)for(var s in e)this[t].style[s]=e[s];return this}if(this[0])return window.getComputedStyle(this[0],null).getPropertyValue(e)}if(2===arguments.length&&"string"==typeof e){for(t=0;t<this.length;t++)this[t].style[e]=a;return this}return this},each:function(e){for(var a=0;a<this.length;a++)e.call(this[a],a,this[a]);return this},html:function(e){if("undefined"==typeof e)return this[0]?this[0].innerHTML:void 0;for(var a=0;a<this.length;a++)this[a].innerHTML=e;return this},text:function(e){if("undefined"==typeof e)return this[0]?this[0].textContent.trim():null;for(var a=0;a<this.length;a++)this[a].textContent=e;return this},is:function(t){if(!this[0])return!1;var s,i;if("string"==typeof t){var r=this[0];if(r===document)return t===document;if(r===window)return t===window;if(r.matches)return r.matches(t);if(r.webkitMatchesSelector)return r.webkitMatchesSelector(t);if(r.mozMatchesSelector)return r.mozMatchesSelector(t);if(r.msMatchesSelector)return r.msMatchesSelector(t);for(s=a(t),i=0;i<s.length;i++)if(s[i]===this[0])return!0;return!1}if(t===document)return this[0]===document;if(t===window)return this[0]===window;if(t.nodeType||t instanceof e){for(s=t.nodeType?[t]:t,i=0;i<s.length;i++)if(s[i]===this[0])return!0;return!1}return!1},index:function(){if(this[0]){for(var e=this[0],a=0;null!==(e=e.previousSibling);)1===e.nodeType&&a++;return a}},eq:function(a){if("undefined"==typeof a)return this;var t,s=this.length;return a>s-1?new e([]):a<0?(t=s+a,new e(t<0?[]:[this[t]])):new e([this[a]])},append:function(a){var t,s;for(t=0;t<this.length;t++)if("string"==typeof a){var i=document.createElement("div");for(i.innerHTML=a;i.firstChild;)this[t].appendChild(i.firstChild)}else if(a instanceof e)for(s=0;s<a.length;s++)this[t].appendChild(a[s]);else this[t].appendChild(a);return this},prepend:function(a){var t,s;for(t=0;t<this.length;t++)if("string"==typeof a){var i=document.createElement("div");for(i.innerHTML=a,s=i.childNodes.length-1;s>=0;s--)this[t].insertBefore(i.childNodes[s],this[t].childNodes[0])}else if(a instanceof e)for(s=0;s<a.length;s++)this[t].insertBefore(a[s],this[t].childNodes[0]);else this[t].insertBefore(a,this[t].childNodes[0]);return this},insertBefore:function(e){for(var t=a(e),s=0;s<this.length;s++)if(1===t.length)t[0].parentNode.insertBefore(this[s],t[0]);else if(t.length>1)for(var i=0;i<t.length;i++)t[i].parentNode.insertBefore(this[s].cloneNode(!0),t[i])},insertAfter:function(e){for(var t=a(e),s=0;s<this.length;s++)if(1===t.length)t[0].parentNode.insertBefore(this[s],t[0].nextSibling);else if(t.length>1)for(var i=0;i<t.length;i++)t[i].parentNode.insertBefore(this[s].cloneNode(!0),t[i].nextSibling)},next:function(t){return new e(this.length>0?t?this[0].nextElementSibling&&a(this[0].nextElementSibling).is(t)?[this[0].nextElementSibling]:[]:this[0].nextElementSibling?[this[0].nextElementSibling]:[]:[])},nextAll:function(t){var s=[],i=this[0];if(!i)return new e([]);for(;i.nextElementSibling;){var r=i.nextElementSibling;t?a(r).is(t)&&s.push(r):s.push(r),i=r}return new e(s)},prev:function(t){return new e(this.length>0?t?this[0].previousElementSibling&&a(this[0].previousElementSibling).is(t)?[this[0].previousElementSibling]:[]:this[0].previousElementSibling?[this[0].previousElementSibling]:[]:[])},prevAll:function(t){var s=[],i=this[0];if(!i)return new e([]);for(;i.previousElementSibling;){var r=i.previousElementSibling;t?a(r).is(t)&&s.push(r):s.push(r),i=r}return new e(s)},parent:function(e){for(var t=[],s=0;s<this.length;s++)e?a(this[s].parentNode).is(e)&&t.push(this[s].parentNode):t.push(this[s].parentNode);return a(a.unique(t))},parents:function(e){for(var t=[],s=0;s<this.length;s++)for(var i=this[s].parentNode;i;)e?a(i).is(e)&&t.push(i):t.push(i),i=i.parentNode;return a(a.unique(t))},find:function(a){for(var t=[],s=0;s<this.length;s++)for(var i=this[s].querySelectorAll(a),r=0;r<i.length;r++)t.push(i[r]);return new e(t)},children:function(t){for(var s=[],i=0;i<this.length;i++)for(var r=this[i].childNodes,n=0;n<r.length;n++)t?1===r[n].nodeType&&a(r[n]).is(t)&&s.push(r[n]):1===r[n].nodeType&&s.push(r[n]);return new e(a.unique(s))},remove:function(){for(var e=0;e<this.length;e++)this[e].parentNode&&this[e].parentNode.removeChild(this[e]);return this},add:function(){var e,t,s=this;for(e=0;e<arguments.length;e++){var i=a(arguments[e]);for(t=0;t<i.length;t++)s[s.length]=i[t],s.length++}return s}},a.fn=e.prototype,a.unique=function(e){for(var a=[],t=0;t<e.length;t++)a.indexOf(e[t])===-1&&a.push(e[t]);return a},a}()),i=["jQuery","Zepto","Dom7"],r=0;r<i.length;r++)window[i[r]]&&e(window[i[r]]);var n;n="undefined"==typeof s?window.Dom7||window.Zepto||window.jQuery:s,n&&("transitionEnd"in n.fn||(n.fn.transitionEnd=function(e){function a(r){if(r.target===this)for(e.call(this,r),t=0;t<s.length;t++)i.off(s[t],a)}var t,s=["webkitTransitionEnd","transitionend","oTransitionEnd","MSTransitionEnd","msTransitionEnd"],i=this;if(e)for(t=0;t<s.length;t++)i.on(s[t],a);return this}),"transform"in n.fn||(n.fn.transform=function(e){for(var a=0;a<this.length;a++){var t=this[a].style;t.webkitTransform=t.MsTransform=t.msTransform=t.MozTransform=t.OTransform=t.transform=e}return this}),"transition"in n.fn||(n.fn.transition=function(e){"string"!=typeof e&&(e+="ms");for(var a=0;a<this.length;a++){var t=this[a].style;t.webkitTransitionDuration=t.MsTransitionDuration=t.msTransitionDuration=t.MozTransitionDuration=t.OTransitionDuration=t.transitionDuration=e;
}return this}),"outerWidth"in n.fn||(n.fn.outerWidth=function(e){return this.length>0?e?this[0].offsetWidth+parseFloat(this.css("margin-right"))+parseFloat(this.css("margin-left")):this[0].offsetWidth:null})),window.Swiper=t}(),"undefined"!=typeof module?module.exports=window.Swiper:"function"==typeof define&&define.amd&&define([],function(){"use strict";return window.Swiper});
//# sourceMappingURL=maps/swiper.min.js.map
import App from '../App' import App from '../App'
const index = r => require.ensure([], () => r(require('../views/index')), 'index')
const indexOld = r => require.ensure([], () => r(require('../views/index-old')), 'index-old')
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')
const notFound = r => require.ensure([], () => r(require('../views/not-found')), 'not-found')
const goodsDetail = r => require.ensure([], () => r(require('../views/goods-detail')), 'goods-detail')
const purchaseRezult = r => require.ensure([], () => r(require('../views/purchase-rezult')), 'purchase-rezult')
const questionBank = r => require.ensure([], () => r(require('../views/question-bank')), 'question-bank')
const questionDetail = r => require.ensure([], () => r(require('../views/question-detail')), 'question-detail')
const couponList = r => require.ensure([], () => r(require('../views/coupon/coupon-list')), 'coupon-list')
// 年度报告(2020) // 年度报告(2020)
const asIndex = r => require.ensure([], () => r(require('../views/annual-summary/index')), 'annual-summary-index') const asIndex = r => require.ensure([], () => r(require('../views/annual-summary/index')), 'annual-summary-index')
const asShare = r => require.ensure([], () => r(require('../views/annual-summary/share')), 'annual-summary-share') const asShare = r => require.ensure([], () => r(require('../views/annual-summary/share')), 'annual-summary-share')
...@@ -30,63 +15,8 @@ export default [{ ...@@ -30,63 +15,8 @@ export default [{
}, },
{ {
path: '/index', path: '/index',
component: index component: asIndex
},
{
path: '/index-old',
component: indexOld
},
{
path: '/home',
component: index
},
{
path: '/coop',
component: merge
},
{
path: '/sharecoop',
component: shareMerge
},
{
path: '/test',
component: test
},
{
path: '/course-detail',
component: courseDetail
},
{
path: '/not-found',
component: notFound
},
{
path: '/goods-detail',
component: goodsDetail,
meta: {
title: '商品详情'
}
},
{
path: '/prezult',
component: purchaseRezult
},
{
path: '/question-bank',
component: questionBank
},
{
path: '/question-detail',
component: questionDetail
},
{
path: '/coupon-list',
component: couponList,
meta: {
title: '优惠券'
}
}, },
{ {
path: '/as-index', path: '/as-index',
component: asIndex, component: asIndex,
......
const getters = { const getters = {
userInfo: state => state.coop.userInfo, userInfo: state => state.coop.userInfo,
statusBarHeight: state => state.coop.statusBarHeight,
projectTabIndex: state => state.coop.projectTabIndex,
jumpURLForI: state => state.coop.jumpURLForI,
jumpURLForII: state => state.coop.jumpURLForII,
positionInfo: state => state.coop.positionInfo,
organizationInfo: state => state.coop.organizationInfo,
logged: state => !!(state.user.token && state.user.info.id),
// 刷题相关
commonConfig: state => state.question.commonConfig,
titleConfig: state => state.question.titleConfig,
questionList: state => state.question.questionList,
currentQuestion: state => state.question.currentQuestion,
commitKind: state => state.question.titleConfig.commitKind,
freeFlag: state => state.question.titleConfig.freeFlag,
totalCount: state => state.question.titleConfig.totalCount,
canRunNext: state => state.question.canRunNext,
webUserInfo: state => state.user.info,
// 优惠券相关
currentCoupon: state => state.coupon.currentCoupon,
goodsInfo4Coupon: state => state.coupon.goodsInfo4Coupon,
selectCouponList: state => state.coupon.selectCouponList,
} }
export default getters export default getters
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
import coop from './modules/coop' import common from './modules/common'
import user from './modules/user'
import question from './modules/question'
import coupon from './modules/coupon';
import getters from './getters' import getters from './getters'
Vue.use(Vuex) Vue.use(Vuex)
const store = new Vuex.Store({ const store = new Vuex.Store({
modules: { modules: {
coop, common,
user,
question,
coupon
}, },
getters getters
}) })
......
const common = {
state: {
userInfo: {appVersion: "344", userToken: ""},
},
mutations: {
SET_USER_INFO: (state, userInfo) => {
state.userInfo = userInfo
},
},
actions: {
setUserInfo({ commit }, userInfo) {
commit('SET_USER_INFO', userInfo)
},
}
}
export default common
const coop = {
state: {
userInfo: {appVersion: "344", userToken: ""},
statusBarHeight: {},
projectTabIndex: 1,
jumpURLForI: "", //中华医学会一类跳转地址
jumpURLForII: "", //中华医学会二类跳转地址
positionInfo: {
accuracy: "",
address: "",
city: "",
city_code: "",
country: "",
district: "",
district_code: "",
latitude: "",
longitude: "",
poi_name: "",
province: "",
},
organizationInfo: {
provinceId: 0,
cityId: 0,
countyId: 0,
townId: 0,
organizationId: 0
}
},
mutations: {
SET_USER_INFO: (state, userInfo) => {
state.userInfo = userInfo
},
SET_STATUS_BAR_HEIGHT: (state, statusBarHeight) => {
state.statusBarHeight = statusBarHeight
},
SET_PROJECT_TAB_INDEX: (state, projectTabIndex) => {
state.projectTabIndex = projectTabIndex
},
SET_JUMP_URL_FOR_I: (state, jumpURLForI) => {
state.jumpURLForI = jumpURLForI
},
SET_JUMP_URL_FOR_II: (state, jumpURLForII) => {
state.jumpURLForII = jumpURLForII
},
SET_POSITION_INFO: (state, positionInfo) => {
state.positionInfo = positionInfo
},
SET_ORGANIZATION_INFO: (state, organizationInfo) => {
state.organizationInfo = organizationInfo
},
},
actions: {
setUserInfo({ commit }, userInfo) {
commit('SET_USER_INFO', userInfo)
},
setStatusBarHeight({ commit }, statusBarHeight) {
commit('SET_STATUS_BAR_HEIGHT', statusBarHeight)
},
setProjectTabIndex({ commit }, projectTabIndex) {
commit('SET_PROJECT_TAB_INDEX', projectTabIndex)
},
setJumpURLForI({ commit }, jumpURLForI) {
commit('SET_JUMP_URL_FOR_I', jumpURLForI)
},
setJumpURLForII({ commit }, jumpURLForII) {
commit('SET_JUMP_URL_FOR_II', jumpURLForII)
},
setPositionInfo({ commit }, positionInfo) {
commit('SET_POSITION_INFO', positionInfo)
},
setOrganizationInfo({ commit }, organizationInfo) {
commit('SET_ORGANIZATION_INFO', organizationInfo)
},
}
}
export default coop
const coupon = {
state: {
currentCoupon: {},
goodsInfo4Coupon: {},
selectCouponList: [],
},
mutations: {
SET_CURRENT_COUPON: (state, payload) => {
state.currentCoupon = payload;
},
SET_GOODS_INFO_COUPON: (state, payload) => {
state.goodsInfo4Coupon = payload;
},
SET_SELECT_COUPON_LIST: (state, payload) => {
state.selectCouponList = payload;
},
},
actions: {
// 设置当前选中的优惠券
setCurrentCoupon({ commit }, currentCoupon) {
commit("SET_CURRENT_COUPON", currentCoupon);
},
// 设置当前商品的信息(包括:总价格, goodsType, cardType)
setGoodsInfo4Coupon({ commit }, goodsInfo4Coupon) {
commit("SET_GOODS_INFO_COUPON", goodsInfo4Coupon);
},
// 这里只处理disabled的状态
setSelectCouponList({ commit, state }, selectCouponList) {
let goodsInfo4Coupon = state.goodsInfo4Coupon;
let price = goodsInfo4Coupon.price;
let flag = false;
selectCouponList.forEach( item => {
if( price > item.requiredTotalFee) {
}
})
commit("SET_SELECT_COUPON_LIST", selectCouponList);
},
},
}
export default coupon;
// import fetch from '@/utils/fetch';
// import { getBaseUrl } from '@/utils/index'
// import { setCookie, getCookie, delCookie } from '@/utils/index';
// import { envConfig } from '@/utils/env-config';
import { findQuestionIndexNo, getOrderText, concatArray } from "@/utils";
const question = {
state: {
currentTitle: "题库",
questionList: [],
currentQuestion: {
isAnalyzed: false,
options: [ // 从options加工出来
{
isCorrect: false,
isSelected: true,
text: "进行分析评估",
},
{
isCorrect: false,
isSelected: false,
text: "进行分析评估",
},
{
isCorrect: true,
isSelected: true,
text: "进行分析评估",
},
{
isCorrect: false,
isSelected: false,
text: "进行分析评估",
},
],
titleId: 1,
titleNo: 1, // 题序,从1开始
typeId: 1, // 题目类型ID 1-单选,2-多选,3-判断
unionId: "", // 联合类型题目,分组唯一标识
unionType: 1, // 0普通题型 1-共用题干; 2-共用选项
unionQuestion: "", // 共用题干
question: '题干内容<img src="https://files.yunqueyi.com/image/png/protal/project/20200702161856970.png" />', // 题干内容
config: "", // 选项
answer: "", // 正确答案
intro: "", // 题目解析
score: 0, // 题目分值
myAnswer: "", // 我的答案
commitFlag: 0, // 0还未做 1做对了 2做错了
favorFlag: 0, // 0未收藏 1已收藏
pictureFlag: "", // 0没有图 1有图
questionStreamType: "", // 题干内流媒体类型:0-文本,1-图片,2-视频,3-音频
directoryId: 0, // 题库ID
paperId: "", // 试卷ID
paperIndex: "", // 试卷索引
},
commonConfig: {
// 0: 免费; 1: 收费; 没有绑卡且是收费题库(bindStatus == 0 && freeFlag == 1)可以走免费体验流程
freeFlag: 0,
directoryId: "",
secondSubjectId: 0,
cardType: 3,
goodsType: 3,
commitKind: 3, // 答题来源 1:错题集 2:收藏 3:题库
},
titleConfig: {
bindStatus: 0, // 绑卡状态:0未绑卡 1已绑卡
commitKind: 3, // 答题来源 1:错题集 2:收藏 3:题库
currentTitleNo: 0, // 定位答题题目id
resultId: 0, // 刷题库轮次ID
totalCount: 0, // 题目总数
},
canRunNext: true,
},
mutations: {
SET_COMMON_CONIFG: (state, payload) => {
state.commonConfig = payload;
},
SET_TITLE_CONIFG: (state, payload) => {
state.titleConfig = payload;
},
SET_COMMIT_KIND: (state, payload) => {
state.titleConfig.commitKind = payload;
},
SET_FREE_FLAG: (state, payload) => {
state.titleConfig.freeFlag = payload;
},
SET_TOTAL_COUNT: (state, payload) => {
state.titleConfig.totalCount = payload;
},
SET_QUESTION_LIST: (state, payload) => {
state.questionList = payload;
},
SET_CURRENT_QUESTION: (state, payload) => {
state.currentQuestion = payload;
},
SET_CAN_RUN_NEXT: (state, payload) => {
state.canRunNext = payload;
},
},
actions: {
// 处理返回的数据
handlerQuestionList({ commit, state }, rezultData) {
let questionList = rezultData.practiseTitleModelList || [];
let handlerList = [], question, option, optionList = [], myAnswer = "",
answer = "", questionContent = "";
questionList.forEach((item, index) => {
myAnswer = item.myAnswer;
answer = item.answer;
question = JSON.parse(JSON.stringify(item));
// question.unionQuestion = question.unionQuestion.replace(/<img/, '<img style="max-width:98%;"');
// question.question = question.question.replace(/<img/, '<img style="max-width:98%;"');
// question.intro = question.intro.replace(/<img/, '<img style="max-width:98%;"');
let isAnalyzed = question.commitFlag && myAnswer != answer;
// question.anaIsImgStart = question.intro.startsWith('<img');
question.isAnalyzed = isAnalyzed;
option = {};
optionList = [];
question.options.forEach((text, i) => {
option.isCorrect = answer.indexOf(getOrderText(i)) != -1;
if (myAnswer.indexOf(getOrderText(i)) != -1) {
option.isSelected = true;
} else {
option.isSelected = false;
}
option.text = text;
optionList.push(JSON.parse(JSON.stringify(option)));
});
question.options = optionList;
console.log('handlerList', index);
handlerList.push(question);
});
console.log('in handlerList', handlerList);
let newList = concatArray(state.questionList, handlerList, 'titleNo');
commit("SET_QUESTION_LIST", newList);
if (rezultData.isFirst) {
let cIndex = findQuestionIndexNo(handlerList, 'titleNo', rezultData.currentTitleNo || 1);
let titleConfig = {
bindStatus: rezultData.bindStatus, // 绑卡状态:0未绑卡 1已绑卡
commitKind: rezultData.commitKind, // 答题来源 1:错题集 2:收藏 3:题库
currentTitleNo: rezultData.currentTitleNo, // 定位答题题目id
resultId: rezultData.resultId, // 刷题库轮次ID
totalCount: rezultData.totalCount, // 题目总数
}
commit("SET_CURRENT_QUESTION", newList[cIndex] || { titleNo: 1 });
commit("SET_TITLE_CONIFG", titleConfig);
}
},
},
}
export default question;
import { Toast } from 'vant';
import fetch from '@/utils/fetch';
import { getBaseUrl, getWxType } from '@/utils/index'
import { setCookie, getCookie, delCookie } from '@/utils/index';
import { envConfig } from '@/utils/env-config';
let wxInfo = sessionStorage.getItem('wxInfo');
wxInfo = wxInfo ? JSON.parse(wxInfo) : {};
const user = {
state: {
token: localStorage.getItem('couponToken') || getCookie('couponToken') || '',
info: {}, // 用户信息
wxInfo, // 微信信息,openid等
wxCode: '', // 微信code
},
mutations: {
SET_TOKEN: (state, payload) => {
state.token = payload;
console.log('state.token ' + state.token);
},
SET_USER_INFO_2: (state, payload) => {
state.info = payload;
},
SET_WX_INFO: (state, payload) => {
state.wxInfo = payload;
},
SET_WX_CODE: (state, payload) => {
state.wxCode = payload;
},
},
actions: {
// 外部登陆返回设置token
setToken({ commit, dispatch }, params) {
console.log('setToken 1', params);
if( typeof(params) == 'object') {
params = params.join("");
}
console.log('setToken 2', params);
commit('SET_TOKEN', params);
localStorage.setItem('couponToken', params);
setCookie('couponToken', params)
dispatch('getUserInfo');
},
// 获取用户信息
async getUserInfo({ state, commit, dispatch }) {
try {
const errCallBack = () => {
dispatch('logout');
// Toast('登录失效,请重新登录~')
}
const res = await fetch({
url: getBaseUrl('account/login/web'),
method: 'get',
headers: { token: state.token }
}).catch(() => {
errCallBack()
});
if (res && res.code === '000000') {
const { certifyDoc, isExist } = res.data;
const picapDoctor = res.data.picapDoctor || {};
if (picapDoctor.id) {
// let avatar = picapDoctor.avatar_image_url || '';
let avatarUrl = '';
// const img1 = await preLoadImg(`https://test-file.yunqueyi.com${avatar}`).catch(err => console.log(err));
// const img2 = await preLoadImg(`https://file.yunqueyi.com${avatar}`).catch(err => console.log(err));
// if (img1) {
// avatarUrl = img1.src;
// }
// if (img2) {
// avatarUrl = img2.src;
// }
picapDoctor.avatar = avatarUrl || 'https://file.yunqueyi.com/File/doctor_default.png';
commit('SET_USER_INFO_2', { ...picapDoctor, isExist, certifyDoc });
}
} else {
errCallBack()
}
} catch (err) {
console.error(err);
}
},
// 通过登陆
goLogin() {
window.location.href = envConfig[process.env.BUILD_ENV]['webPageUrl'] + "/pica_login?target_url=" + encodeURIComponent(location.href);
},
getWxUserInfo({ state, commit }, code) {
commit('SET_WX_CODE', code);
const type = getWxType();
// let url = getBaseUrl(`wechats/users/info/${type}/${code}`);
let url = `https://sc.yunqueyi.com/wechats/users/info/${type}/${code}`; // 测试支付,暂时使用线上
fetch({
url,
method: 'get',
headers: { token: state.token }
}).then(res => {
sessionStorage.setItem('wxInfo', JSON.stringify(res.data));
commit('SET_WX_INFO', res.data)
});
},
// 登出
logout({ state, commit }) {
commit('SET_TOKEN', '');
commit('SET_USER_INFO_2', {});
localStorage.removeItem('couponToken');
delCookie('couponToken');
},
},
}
export default user;
/**
* Swiper 3.4.1
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2016, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: December 13, 2016
*/
.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:27px;height:44px;margin-top:-22px;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");left:10px;right:auto}.swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");right:10px;left:auto}.swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")}.swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-o-transform:translate(0,-50%);-ms-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-zoom-container{width:100%;height:100%;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}
\ No newline at end of file
@charset "UTF-8";/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2015 Daniel Eden
*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,100%,20%,53%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);-ms-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-transition-timing-function:cubic-bezier(0.755,.050,.855,.060);transition-timing-function:cubic-bezier(0.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);-ms-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);-ms-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes pulse{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);-ms-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes rubberBand{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);-ms-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(0.75,1.25,1);-ms-transform:scale3d(0.75,1.25,1);transform:scale3d(0.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);-ms-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);-ms-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);-ms-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes swing{20%{-webkit-transform:rotate3d(0,0,1,15deg);-ms-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);-ms-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);-ms-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);-ms-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);-ms-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes tada{0%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);-ms-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes wobble{0%{-webkit-transform:none;-ms-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);-ms-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);-ms-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);-ms-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);-ms-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);-ms-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInDown{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);-ms-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);-ms-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInLeft{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);-ms-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);-ms-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);-ms-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);-ms-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;transform:none}}@keyframes bounceInRight{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);-ms-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);-ms-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);-ms-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);-ms-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}100%{-webkit-transform:none;-ms-transform:none;transform:none}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes bounceInUp{0%,100%,60%,75%,90%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);-ms-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);-ms-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}100%{-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}100%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);-ms-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);-ms-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);-ms-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);-ms-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);-ms-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);-ms-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,2000px,0);-ms-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);-ms-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(2000px,0,0);-ms-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);-ms-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-ms-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);-ms-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);-ms-transform:perspective(400px) rotate3d(1,0,0,10deg);transform:perspective(400px) rotate3d(1,0,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-5deg);transform:perspective(400px) rotate3d(1,0,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-20deg);transform:perspective(400px) rotate3d(0,1,0,-20deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);-ms-transform:perspective(400px) rotate3d(0,1,0,10deg);transform:perspective(400px) rotate3d(0,1,0,10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-5deg);transform:perspective(400px) rotate3d(0,1,0,-5deg)}100%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);-ms-transform:perspective(400px) rotate3d(1,0,0,-20deg);transform:perspective(400px) rotate3d(1,0,0,-20deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);-ms-transform:perspective(400px) rotate3d(1,0,0,90deg);transform:perspective(400px) rotate3d(1,0,0,90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);-ms-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);-ms-transform:perspective(400px) rotate3d(0,1,0,-15deg);transform:perspective(400px) rotate3d(0,1,0,-15deg);opacity:1}100%{-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);-ms-transform:perspective(400px) rotate3d(0,1,0,90deg);transform:perspective(400px) rotate3d(0,1,0,90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY;-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;transform:none;opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);-ms-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);-ms-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}100%{-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}100%{-webkit-transform:translate3d(100%,0,0) skewX(30deg);-ms-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,-200deg);-ms-transform:rotate3d(0,0,1,-200deg);transform:rotate3d(0,0,1,-200deg);opacity:0}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;transform:none;opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-90deg);-ms-transform:rotate3d(0,0,1,-90deg);transform:rotate3d(0,0,1,-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:none;-ms-transform:none;transform:none;opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;opacity:1}100%{-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transform:rotate3d(0,0,1,200deg);-ms-transform:rotate3d(0,0,1,200deg);transform:rotate3d(0,0,1,200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,45deg);-ms-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate3d(0,0,1,-45deg);-ms-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate3d(0,0,1,90deg);-ms-transform:rotate3d(0,0,1,90deg);transform:rotate3d(0,0,1,90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate3d(0,0,1,80deg);-ms-transform:rotate3d(0,0,1,80deg);transform:rotate3d(0,0,1,80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate3d(0,0,1,60deg);-ms-transform:rotate3d(0,0,1,60deg);transform:rotate3d(0,0,1,60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}100%{-webkit-transform:translate3d(0,700px,0);-ms-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);-ms-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}@keyframes rollOut{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);-ms-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-ms-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}100%{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);-ms-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);-ms-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}100%{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);-ms-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-ms-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);animation-timing-function:cubic-bezier(0.55,.055,.675,.19)}100%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-ms-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;-ms-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);animation-timing-function:cubic-bezier(0.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);visibility:visible}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
//本插件由www.swiper.com.cn提供
//版本1.03
function swiperAnimateCache(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["style"]?allBoxes[i].setAttribute("swiper-animate-style-cache",allBoxes[i].attributes["style"].value):allBoxes[i].setAttribute("swiper-animate-style-cache"," "),allBoxes[i].style.visibility="hidden"}function swiperAnimate(a){clearSwiperAnimate(a);var b=a.slides[a.activeIndex].querySelectorAll(".ani");for(i=0;i<b.length;i++)b[i].style.visibility="visible",effect=b[i].attributes["swiper-animate-effect"]?b[i].attributes["swiper-animate-effect"].value:"",b[i].className=b[i].className+" "+effect+" "+"animated",style=b[i].attributes["style"].value,duration=b[i].attributes["swiper-animate-duration"]?b[i].attributes["swiper-animate-duration"].value:"",duration&&(style=style+"animation-duration:"+duration+";-webkit-animation-duration:"+duration+";"),delay=b[i].attributes["swiper-animate-delay"]?b[i].attributes["swiper-animate-delay"].value:"",delay&&(style=style+"animation-delay:"+delay+";-webkit-animation-delay:"+delay+";"),b[i].setAttribute("style",style)}function clearSwiperAnimate(a){for(j=0;j<a.slides.length;j++)for(allBoxes=a.slides[j].querySelectorAll(".ani"),i=0;i<allBoxes.length;i++)allBoxes[i].attributes["swiper-animate-style-cache"]&&allBoxes[i].setAttribute("style",allBoxes[i].attributes["swiper-animate-style-cache"].value),allBoxes[i].style.visibility="hidden",allBoxes[i].className=allBoxes[i].className.replace("animated"," "),allBoxes[i].attributes["swiper-animate-effect"]&&(effect=allBoxes[i].attributes["swiper-animate-effect"].value,allBoxes[i].className=allBoxes[i].className.replace(effect," "))}
\ No newline at end of file
因为 它太大了无法显示 源差异 。您可以改为 查看blob
...@@ -2,15 +2,13 @@ ...@@ -2,15 +2,13 @@
import Vue from 'vue' import Vue from 'vue'
import request from '@/utils/fetch'; import request from '@/utils/fetch';
import wx from 'weixin-js-sdk' import wx from 'weixin-js-sdk'
import { getBaseUrl, getWxType } from "@/utils/index"; import { getWxType } from "@/utils/index";
/** 注入配置信息 */ /** 注入配置信息 */
export const wxConfig = () => { export const wxConfig = () => {
// const params = { resetURI: true, url: encodeURIComponent(location.href) }; // const params = { resetURI: true, url: encodeURIComponent(location.href) };
// 上线前是需要把域名改为线上的sc // 上线前是需要把域名改为线上的sc
let baseUrl = getBaseUrl("");
let type = '&type=' + getWxType(); // type不同,对应的appid不一样,15为线上 let type = '&type=' + getWxType(); // type不同,对应的appid不一样,15为线上
request({ url: `https://sc.yunqueyi.com/wechats/signs?url=${encodeURIComponent(location.href)}${type}` }).then(res => { request({ url: `https://sc.yunqueyi.com/wechats/signs?url=${encodeURIComponent(location.href)}${type}` }).then(res => {
// request({ url: `${baseUrl}/wechats/signs?url=${encodeURIComponent(link)}` }).then(res => {
let configs = res.data.signMap; let configs = res.data.signMap;
wx.config({ wx.config({
debug: false, debug: false,
......
<template>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<Card1></Card1>
</div>
<div class="swiper-slide">
<Card2></Card2>
</div>
<div class="swiper-slide">
<Card3></Card3>
</div>
<div class="swiper-slide">
<Card4></Card4>
</div>
<div class="swiper-slide">
<Card5></Card5>
</div>
<div class="swiper-slide">
<Card6></Card6>
</div>
</div>
<Loading v-show="showLoading" />
</div>
</template>
<script>
import Loading from "@/components/common/common-loading";
import { Progress, Toast } from "vant";
import Card1 from "@/components/annual-summary/card-1";
import Card1No from "@/components/annual-summary/card-1-no";
import Card2 from "@/components/annual-summary/card-2";
import Card3 from "@/components/annual-summary/card-3";
import Card4 from "@/components/annual-summary/card-4";
import Card5 from "@/components/annual-summary/card-5";
import Card6 from "@/components/annual-summary/card-6";
import { mapGetters, mapActions } from "vuex";
import Swiper from "swiper";
import { getElement } from '../../../../better-scroll/packages/shared-utils/src';
let _this = null;
export default {
components: {
Loading,
Card1,
Card1No,
Card2,
Card3,
Card4,
Card5,
Card6
},
data() {
return {
isWeb: window.__isWeb,
isInfresh: false,
showLoading: false
};
},
computed: {
...mapGetters(["userInfo"])
},
created() {
_this = this;
window.__getUserInfoAS = function(param) {
console.log("__getUserInfoAS", param);
_this.token = param.userToken;
_this.userMobile = param.userMobile;
_this.setUserInfo(param);
_this.checkToken();
_this.initData();
};
if (_this.isWeb) {
_this.initData();
}
window.__refresh = function() {
_this.isInfresh = true;
_this.getUserInfo();
};
_this.getUserInfo();
},
mounted() {
new Swiper(".swiper-container", {
direction: "vertical",
speed: 300,
slidesPerView: 1,
// observer: true, //修改swiper自己或子元素时,自动初始化swiper
// observeParents: true //修改swiper的父元素时,自动初始化swiper
// // slidesPerGroup : 5,
on: {
init: function() {
// swiperAnimateCache(this);
console.log('---111');
swiperAnimate(this);
},
slideChangeTransitionEnd: function(se) {
let activeIndex = se.activeIndex;
swiperAnimate(this);
console.log('---2323', se);
if (activeIndex == 1) {
}
}
}
});
},
methods: {
...mapActions(["setUserInfo"]),
// 获取数据
initData() {
let param = {
token: this.token,
setEntry: true
};
// this.showLoading = true;
// this.GET(`portal/titleTest/user/getBrushTitleInfo/${this.secondSubjectId}`, param).then(res => {
// if (res.code == "000000") {
// this.showLoading = false;
// } else {
// this.$toast(res.message);
// }
// });
},
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfoAS"
});
},
// token是否失效校验
checkToken() {
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 {
rocNative.gotoLogin();
}
this.isInfresh = false;
} else {
}
});
}
}
};
</script>
<style lang="less" scoped>
// .as-swipper-wrapper {
// transform: translate3d(0, 0, 0);
// // background: red;
// .swiper-container {
// transform: translate3d(0, 0, 0);
// overflow: hidden;
// }
// .swiper-slide {
// transform: translate3d(0, 0, 0);
// }
// }
.swiper-container {
height: 100vh;
width: 100vm;
/* height: 300px;
margin: 20px auto; */
}
.card {
height: 100vh;
}
</style>
\ No newline at end of file
<template> <template>
<div class="swiper-container"> <div class="swiper-container">
<div class="right-arrow"> <div class="right-arrow">
<!-- <img class="r1" src="~@/images/annual/right-1.png" alt /> <img class="r1" src="~@/images/annual/right-1.png" alt />
<img src="~@/images/annual/right-2.png" alt /> --> <img src="~@/images/annual/right-2.png" alt />
</div> </div>
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div v-if="!anualData.haveFlag" class="swiper-slide"> <div v-if="!anualData.haveFlag" class="swiper-slide">
......
<template>
<section class="coupon-list-wrapper" :class="{'no-pt': isWeb}">
<CommonNavbar
:isWeb="isWeb"
ref="navBarCom"
:bgColor="bgColor"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:isInMergeDetail="isInMergeDetail"
borderStyle="1px solid #fff"
></CommonNavbar>
<CouponList
v-if="dataList.length"
:dataList="dataList"
@revieveOrUse="revieveOrUse"
:fromPage="fromPage"
></CouponList>
<no-coupon v-else></no-coupon>
</section>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import CouponList from "@/components/coupon/component-list";
import NoCoupon from "@/components/coupon/no-coupon";
import { getWebPageUrl, getHactiveUrl } from "@/utils";
import { mapGetters, mapActions } from "vuex";
import { Toast } from "vant";
import { setCookie, getCookie, delCookie } from "@/utils/index";
export default {
components: {
CommonNavbar,
CouponList,
NoCoupon
},
data() {
return {
token: "",
isWeb: window.__isWeb,
bgColor: "#fff",
isShowNavbar: true,
navTitle: "优惠券",
isFixNavbar: true,
shareUrl: "",
dataList: [],
provinceId: "",
fromPage: "",
isInMergeDetail: false
};
},
computed: {
...mapGetters(["webUserInfo"])
},
watch: {
webUserInfo: {
handler(userInfo) {
console.log("userInfo", userInfo);
if (userInfo.id) {
this.getAllCoupons();
}
},
deep: true
}
},
created() {
let _this = this;
let href = location.href;
this.couponId = this.$route.query.couponId || "";
this.fromPage = this.$route.query.fromPage || "";
this.couponToken = this.$route.query.couponToken || "";
this.navTitle = this.fromPage ? "我的优惠券" : "优惠券";
this.shareUrl = getWebPageUrl(
`profexam/#/coupon-list?couponId=${this.couponId}`
);
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
location.replace(this.shareUrl);
}
localStorage.setItem("returnUrl", this.shareUrl);
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50601`
});
}
window.__getUserInfo4CouponList = function(param) {
console.log("__getUserInfo4CouponList", param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.getAllCoupons();
};
window.__refresh = function() {
_this.getUserInfo();
};
},
mounted() {
// 如果在浏览器或微信里
if (this.isWeb) {
const { token, info } = this.$store.state.user;
this.token =
token ||
this.couponToken ||
localStorage.getItem("couponToken") ||
getCookie("couponToken");
if (this.token && !info.id) {
console.log("4444 this.token", this.token);
// this.$store.dispatch('setToken', this.token);
this.commonCheckToken(() => {
this.$store.dispatch("setToken", this.token);
// this.$store.dispatch("getUserInfo");
});
return;
}
// 从登陆页面过来的
this.getAllCoupons();
} else {
this.getUserInfo();
}
},
methods: {
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo4CouponList"
});
},
// 获取我的优惠券列表
getMyCoupons() {
this.commonCheckToken(() => {
this.GET(`trade/coupon/app/myCoupons`, {}).then(res => {
if (res.code == "000000") {
this.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [],
false
);
}
});
});
},
// 主动领取优惠券
// 状态码:1已下架,请领取其他优惠券 2优惠券已失效 3已领取,快去使用优惠券 4优惠券已领完 5成功领取
receiveCouponByid(couponId) {
this.commonCheckToken(() => {
this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
({ code, data }) => {
if (code == "000000") {
console.log("data.description", data.description);
data.description && Toast(data.description);
this.searchCoupons();
}
}
);
});
},
// 处理(所有)列表数据
// couponStatus 优惠券状态:0去领取 1去使用 2已领取 3无库存 4未开始 5已过期 6已使用
handlerAllCouponList(couponList, isAll) {
if (!couponList.length) return [];
let newList = [],
obj = {};
couponList.forEach(item => {
// 是否是列表页面,否则是我的优惠券页面
item.isAll = isAll;
// 是否显示对应的规则
item.showRules = false;
// 是否可用
item.disabled =
item.couponStatus == 0 ||
item.couponStatus == 1 ||
item.couponStatus == 4;
newList.push(item);
});
console.log(newList);
return newList;
},
// 获取所有优惠券列表
getAllCoupons() {
console.log("getAllCoupons");
this.commonCheckToken(() => {
let couponId = this.couponId;
if (couponId) {
this.POST(`trade/coupon/app/receive/${couponId}`, {}).then(
({ code, data }) => {
if (code == "000000") {
if (data.description) {
this.$toast({ message: data.description, duration: 5000 });
}
}
this.searchCoupons();
}
);
} else {
this.searchCoupons();
}
});
},
// 区分是否是我的优惠券
searchCoupons() {
this.wechatShare(
{
link: this.shareUrl,
title: "我在抢优惠券,你也快来吧!",
friendtitle: "限时优惠,机不可失!",
desc: "限时优惠,机不可失!",
imgUrl: "https://file.yunqueyi.com/logo.png"
},
() => {
console.log("share success...");
}
);
if (this.fromPage) {
this.getMyCoupons();
} else {
this.searchCouponsAction();
}
},
// 查询所有优惠券列表
searchCouponsAction() {
let params = {
cardTypes: [],
couponIds: [],
goodsIds: [],
goodsTypes: []
};
this.POST(`trade/coupon/app/searchCoupons`, params).then(res => {
if (res.code == "000000") {
this.provinceId = res.data.provinceId;
this.dataList = this.handlerAllCouponList(
res.data.baseCouponModelList || [],
true
);
}
});
},
// 领取或使用 couponStatus 0: 立即领取; 1: 去使用;
revieveOrUse(item) {
// 跳转到使用页面(如果只适用一个商品,则直接跳转到商品页面;否则跳转到商品列表页面)
// 要根据用户信息,获取定位信息等,从而获取对应的商品
// TODO
if (this.fromPage) {
this.$sendBuriedData({
component_tag: `506#50602#${item.couponId}#${item.couponName}`
});
}
// 去使用
if (item.couponStatus == 1) {
let couponList = item.couponMappingModelList, index = -1;
index = couponList.findIndex( i => {
return i.goodsType == 3;
});
// 在站内,如果是职称考卡,则直接跳转到职称考首页
if(!this.isWeb && index >= 0) {
let pageUrl = getWebPageUrl(`profexam/#/index`);
this.jumpForCoupon(pageUrl);
return;
}
let pageUrl = "";
// 如果适用的商品(卡)个数多于一个,则跳转到商品列表
if (item.couponMappingModelList.length > 1) {
pageUrl = getHactiveUrl(
`/message_push/#/study-card?origin=1&couponArea=${this.provinceId}&couponToken=${this.token}`
);
this.jumpForCoupon(pageUrl);
} else {
item.couponMappingModelList.length &&
this.getCardInfoByProvinceId(item);
}
// 立即领取
} else if (item.couponStatus == 0) {
this.receiveCouponByid(item.couponId);
}
},
// 根据省ID,获取学习卡信息
getCardInfoByProvinceId(item) {
let coupon = item.couponMappingModelList[0];
let param = {
area: this.provinceId + "",
cardType: coupon.cardType || 3,
cardTypeList: [coupon.cardType || 3],
goodsType: coupon.goodsType
};
param.setEntry = true;
this.POST("trade/goods/cardList_v2", param).then(res => {
if (res.code == "000000") {
let good = (res.data && res.data[0]) || {
id: "",
name: "职称考精讲课程卡"
};
if (good.id) {
let pageUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${good.id}`
);
this.jumpForCoupon(pageUrl);
} else {
Toast("相关商品已下架");
}
}
});
},
// 根据环境跳转
jumpForCoupon(pageUrl) {
if (this.isWeb) {
location.href = pageUrl;
} else {
let paramList = [
{
key: "pageUrl",
value: pageUrl,
type: 4,
seqNo: 1
}
];
rocNative &&
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
}
};
</script>
<style lang="less" scoped>
.coupon-list-wrapper {
padding-top: 88px;
min-height: 100vh;
background: #f8f9fa;
&.no-pt {
padding-top: 10px;
}
}
</style>
\ No newline at end of file
<template>
<div class="course-detail">
<!-- 视频 -->
<div class="video-box">
<pica-video ref="picaVideo" :coverType="coverType" :download="btnClick1" @onVideoEnd="onVideoEnd" @onReplay="onReplay">
<!-- 试看结束 -->
<div class="cover" v-if="logged && coverType === 1">
<course-covers
coverTips="试看结束<br />请来云鹊医App学习完整课程"
:isSingle="true"
rightBtnText="立即购买"
@btnClick="btnClick1"
/>
</div>
<!-- 付费课程,下载App -->
<div class="cover" v-if="logged && coverType === 2">
<course-covers coverTips="本课程为付费课程,请来云鹊医App学习" :isSingle="true" rightBtnText="去云鹊医App" @btnClick="btnClick" />
</div>
<!-- 下一个提示 -->
<div class="next-countdown" v-if="coverType === 13">3秒后播放下一节</div>
<!-- 未学完提示 -->
<div class="cover" v-if="logged && coverType === 4">
<course-covers coverTips="您已学习至最后一节<br />但本课程中仍有未学完的内容" :isSingle="true" rightBtnText="继续学完本课程" @btnClick="btnClick" />
</div>
<!-- 已学完,无考试 -->
<div class="cover" v-if="logged && coverType === 5">
<course-covers coverTips="您已完成全部学习<br />来云鹊医App参加考试巩固学习成果" leftBtnText="返回项目" @btnClick="btnClick" />
</div>
<!-- 未登录 -->
<div class="cover" v-if="!logged">
<course-covers coverTips="登录后马上学习课程" :isSingle="true" rightBtnText="去登录" @btnClick="goLogin" />
</div>
</pica-video>
</div>
<!-- 内容滚动 -->
<div class="scroll-box">
<div class="scroll-content">
<div class="course-info">
<div class="course-title">
<span class="level">
{{ course.typeStr }}
</span>{{ course.courseName }}
</div>
<div class="course-num">
<span class="num">{{ course.joinNum }}</span>人已学 /
<span class="num">{{ course.favorNum }}</span>人收藏
<span v-if="course.status === 3 || course.status === 4">/ 总进度<i class="percent">100%</i></span>
<img v-if="course.status === 4" class="img" src="~@/images/has-cert-new.png" alt="" />
</div>
</div>
<!-- tab栏 -->
<div class="tab-box">
<van-sticky :offset-top="videoH">
<div class="tab-inner">
<div
class="tab-item"
:class="{'tab-active': curtTabIdx === index}"
v-for="(tab, index) in tabs"
:key="index"
@click="curtTabIdx=index">
{{ tab.name }}
</div>
<div class="tab-line" :style="{left: `${tabLeft}px`}"></div>
<DownloadButton v-if="showDownloadButton" tag="88401"></DownloadButton>
</div>
</van-sticky>
</div>
<brief-intro v-show="curtTabIdx === 0" :doctor-list="doctors" :intro="course.intro" :harvest="harvest" />
<course-catalog v-show="curtTabIdx === 1" :list="chapters" :curtId="curtLectureId" :onToggle="onToggle" :onSelect="selectLecture" :download="download" />
<course-ware v-show="curtTabIdx === 2" :url="pdfUrl" :visible="pdfVisible" :hidePpt="course.hidePpt" :showFlag="course.showFlag" />
<course-comment v-show="curtTabIdx === 3" :list="qsList" :download="download" />
</div>
</div>
<!-- 打开、下载App -->
<!-- <div class="download-box">
<img src="~@/images/icon-pica.png" alt="logo" />
<div class="content">
<p class="title">云鹊医</p>
<p class="sub-title">高效学习 轻松学医</p>
</div>
<div class="btn-download">下载</div>
<div class="btn-open">打开</div>
</div> -->
<Loading v-if="showLoading" />
</div>
</template>
<script>
import PicaVideo from '@/components/course/pica-video';
import CourseCovers from '@/components/course/course-covers';
import BriefIntro from '@/components/course/brief-intro';
import CourseCatalog from '@/components/course/course-catalog';
import CourseWare from '@/components/course/course-ware';
import CourseComment from '@/components/course/course-comment';
import Loading from "@/components/common/common-loading";
import DownloadButton from "@/components/course/download-button";
import { getPdfFileUrl, formatLeftTimeObj, deepCopy } from '@/utils';
export default {
components: {
PicaVideo,
CourseCovers,
BriefIntro,
CourseCatalog,
CourseWare,
CourseComment,
Loading,
DownloadButton
},
data() {
return {
course: {}, // 课程
doctors: [], // 医生
harvest: [], // 学习收获
tabs: [
{ name: '简介' },
{ name: '目录' },
{ name: '课件' },
{ name: '讨论' },
],
curtTabIdx: 0,
tabW: 0, // tab的宽度
videoH: 0, // 视频区高度
chapters: [], // 目录
curtLectureId: 0, // 当前播放课件id
pdfUrl: '', // 当前pdf
qsList: [], // 讨论列表
coverType: 0, // 遮罩,
showLoading: false,
showDownloadButton: false,
};
},
computed: {
logged() {
return this.$store.getters.logged;
},
tabLeft() {
const num = this.curtTabIdx + 0.5;
return this.tabW * num;
},
// 当前pdf是否可看
pdfVisible() {
const { showFlag, hidePpt } = this.course;
let visible = false;
if (showFlag === 0 && !hidePpt && this.logged) {
visible = true;
}
return visible;
}
},
mounted() {
const { token, info } = this.$store.state.user;
if (token && !info.id) {
this.$store.dispatch('getUserInfo');
}
this.projectId = sessionStorage.getItem('projectId');
this.goodsId = this.$route.query.goodsId;
if (!this.projectId) {
this.$router.replace('/not-found');
return;
}
this.getCourseInfo();
this.getCourseQas();
const { height } = this.$el.querySelector('.video-box').getBoundingClientRect();
const { width } = this.$el.querySelector('.tab-item').getBoundingClientRect();
this.videoH = height;
this.tabW = width;
this.wechatShare(undefined, undefined, true);
},
methods: {
getCourseInfo() {
const { courseId } = this.$route.query;
const projectId = this.projectId;
this.showLoading = true;
this.GET(`contents/courses/${courseId}/pcCourseInfo`, { projectId }).then(res => {
this.showLoading = false;
this.showDownloadButton = true;
if (res.code == "000000") {
const {
showFlag = 0, // 0可看,10该课程为付费课程-请去App查看,20可试看,激活/购买后才可查看
trySeeFlag = 0, // 1为试看
trySeeTime = 0, // 试看时间
courseHeader = {},
introduction = [],
directory: {
chapters = [], // 目录
lectureResourceList = [], // 课件
lastLecture = {}, // 最后观看记录
},
} = res.data;
let intro = '';
for (let item of introduction) {
if (item.type === 1) { // 医生
this.doctors = item.dataList || [];
}
if (item.type === 2) { // 课程简介
if (item.dataList && item.dataList[0]) {
intro = item.dataList[0]['intro'] || '';
}
}
if (item.type === 4) { // 学习收获
this.harvest = item.dataList || [];
}
}
this.course = { ...courseHeader, intro, showFlag, trySeeFlag, trySeeTime };
const [chaptersAll, curtLecture] = this.getAllChapters(chapters, lectureResourceList, lastLecture, showFlag, trySeeFlag, trySeeTime);
this.chapters = chaptersAll;
this.curtLectureId = curtLecture.lectureId;
this.pdfUrl = curtLecture.courseware ? getPdfFileUrl(curtLecture.courseware.filePath) : '';
// 付费课程-请去App查看;或可试看且时长为0
let enable = true;
if (showFlag === 10 || (trySeeFlag && !trySeeTime)) {
this.coverType = 2;
enable = false
}
let history = 0;
if (curtLecture.progress < 1 && !trySeeTime) {
history = curtLecture.lastTime === 1 ? 0 : curtLecture.lastTime
}
this.$refs.picaVideo.switchUrl({
chapterId: curtLecture.chapterId,
courseId: curtLecture.courseId,
lectureId: curtLecture.lectureId,
url: curtLecture.pathUrl,
proved: trySeeTime,
history,
enable, // 付费课程-请去App查看;或可试看且时长为0
});
} else {
this.$toast(res.message);
}
});
},
// 将课件挂在目录上,获取播放id
getAllChapters(chapters, resList, lastLecture, showFlag, trySeeFlag, trySeeTime) {
const lectureObj = {};
for (let item of resList) {
lectureObj[item.lectureId] = { ...item };
}
let curtLecture = {};
let unfinished = false;
for (let i = 0; i < chapters.length; i++) {
let chapter = chapters[i];
chapter.chapterNameText = `${i + 1}.${chapter.chapterName}`;
chapter.showAll = true;
for (let j = 0; j < chapter.lectures.length; j++) {
let lecture = chapter.lectures[j];
let lectureId = lecture.lectureId;
if (lectureObj[lectureId]) {
lecture.courseware = lectureObj[lectureId]
}
lecture.lectureNameText = `${j + 1}.${lecture.lectureName}`;
lecture.statusText = lecture.progress === 0 ? '未开始' : (lecture.progress === 1 ? '已学完' : `已学${parseInt(lecture.progress * 100)}%`);
let btnText = '';
if (showFlag === 10 || (trySeeFlag && !trySeeTime)) {
btnText = ''; // 不可看
}
if (showFlag === 20 && trySeeFlag && trySeeTime) {
btnText = '试看'; // 可试看
}
if (showFlag === 0) {
btnText = lecture.progress === 1 ? '复习课程' : '学习';
}
lecture.btnText = btnText;
const totalTime = formatLeftTimeObj(lecture.totalTime);
const h = totalTime.h === '00' ? '' : `${totalTime.h}:`;
lecture.totalTimeText = `${h}${totalTime.f}:${totalTime.s}`;
if (lastLecture.lectureId) {
if (lastLecture.lectureId === lecture.lectureId) {
curtLecture = { ...lecture, lastTime: lastLecture.lastTime }
}
} else {
// 取第一个未完成的
if (lecture.progress < 1 && !unfinished) {
curtLecture = { ...lecture };
unfinished = true;
}
}
}
}
return [chapters, curtLecture];
},
btnClick(index) {
const coverType = this.coverType;
switch(coverType) {
case 1:
case 2:
this.download();
break;
case 4:
this.selectLecture(this.prev);
break;
case 5:
if (index === 1) {
this.$sendBuriedData({
component_tag: `884#88402`
});
window.history.back();
} else {
this.download();
}
break;
default:
//
}
},
btnClick1() {
this.$router.push({ path: '/goods-detail', query: { goodsId: this.goodsId, projectId: this.projectId } })
},
// 折叠、展开目录
onToggle(index) {
const item = this.chapters[index];
item.showAll = !item.showAll;
this.chapters.splice(index, 1, item);
},
// 选择课程
selectLecture(lecture, isUserSelect) {
if (isUserSelect && !this.logged) {
this.goLogin();
return;
}
const { showFlag, trySeeFlag, trySeeTime, examType } = this.course;
// console.log(lecture);
if (examType === 2) { // 是考试,mustLearnIds必须完成的lectureId
this.$sendBuriedData({
component_tag: `884#88405`
});
this.$toast('请前往云鹊医APP进行考试');
return;
}
this.$sendBuriedData({
component_tag: `884#88404#${lecture.lectureId}#${lecture.lectureName}`
});
if (lecture.lectureId === this.curtLectureId) {
return;
}
let enable = true;
if (showFlag === 10 || (trySeeFlag && !trySeeTime)) {
this.coverType = 2;
enable = false
} else {
this.coverType = 0;
}
this.curtLectureId = lecture.lectureId;
this.pdfUrl = lecture.courseware ? getPdfFileUrl(lecture.courseware.filePath) : '';
let history = 0;
if (lecture.progress < 1) {
history = lecture.lastTime === 1 ? 0 : lecture.lastTime
}
this.$refs.picaVideo.switchUrlAndPlay({
chapterId: lecture.chapterId,
courseId: lecture.courseId,
lectureId: lecture.lectureId,
url: lecture.pathUrl,
proved: trySeeTime,
history,
enable, // 付费课程-请去App查看;或可试看且时长为0
});
setTimeout(() => {
this.refreshCatalog();
}, 1000);
},
// 刷新目录进度
refreshCatalog() {
const { courseId } = this.$route.query;
const projectId = this.projectId;
this.GET(`contents/courses/${courseId}/pcCourseInfo`, { projectId }).then(res => {
if (res.code == "000000") {
const {
showFlag = 0, // 0可看,10该课程为付费课程-请去App查看,20可试看,激活/购买后才可查看
trySeeFlag = 0, // 1为试看
trySeeTime = 0, // 试看时间
directory: {
chapters = [], // 目录
lectureResourceList = [], // 课件
lastLecture = {}, // 最后观看记录
},
} = res.data;
const [chaptersAll, curtLecture] = this.getAllChapters(chapters, lectureResourceList, lastLecture, showFlag, trySeeFlag, trySeeTime);
this.chapters = chaptersAll;
}
})
},
getCourseQas() {
const { courseId } = this.$route.query;
const projectId = this.projectId;
this.GET(`contents/courses/v2/${courseId}/qas`, { projectId, pageNo: 1, pageSize: 10 }).then(res => {
if (res.code == "000000") {
this.qsList = res.data.model && res.data.model.qaPostModel || [];
} else {
this.$toast(res.message);
}
});
},
// 视频播放结束
onVideoEnd(opt) {
if (opt.type === 1) {
let chapters = deepCopy(this.chapters);
let curtI = 0;
let curtJ = 0;
let curtIndex = 0;
let count = 0;
let prev; // 第一个未完成的
for (let i = 0; i < chapters.length; i++) {
let lectures = chapters[i]['lectures'];
for (let j = 0; j < lectures.length; j++) {
count += 1;
let lecture = lectures[j];
if (this.curtLectureId === lecture.lectureId) {
curtIndex = count;
curtI = i;
curtJ = j;
lecture.progress = 1;
lecture.statusText = '已学完';
lecture.btnText = '复习课程';
}
if (!prev && lecture.progress < 1) {
prev = { ...lecture }
}
}
}
if (curtIndex === count) { // 最后一个
if (prev) {
this.coverType = 4;
this.prev = prev;
} else {
this.coverType = 5;
this.course.status = 3;
}
} else { // 3秒后播放下一个
let next = chapters[curtI]['lectures'][curtJ + 1] || chapters[curtI + 1]['lectures'][0];
this.coverType = 13;
setTimeout(() => {
this.selectLecture(next);
}, 3000)
}
this.chapters = chapters;
} else if (opt.type === 2) { // 试看结束
this.coverType = 1;
}
},
onReplay() {
this.coverType = 0;
},
// goLogin() {
// this.$store.dispatch('goLogin');
// },
// 去下载app
download() {
window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
}
}
};
</script>
<style lang="less" scoped>
.course-detail{
position: relative;
height: 100%;
padding-top: 210px;
box-sizing: border-box;
.video-box{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 210px;
}
.scroll-box{
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.scroll-content{
// padding-bottom: 60px;
}
.course-info{
padding: 20px 15px;
border-bottom: 6px solid #F8F9FA;
}
.course-title{
line-height: 23px;
font-size: 18px;
font-weight: bold;
.level{
display: inline-block;
color: #fff;
font-weight: normal;
font-size: 12px;
background-color: #6A9FE9;
margin-right: 5px;
transform: translateY(-2px);
padding: 0 3px;
white-space: nowrap;
border-radius: 1px;
}
}
.course-num{
color: #676869;
font-size: 13px;
margin-top: 10px;
.num{
color: #373839;
}
.percent{
color: #4B9D8F;
}
.img{
float: right;
height: 20px;
}
}
.tab-box{
height: 50px;
}
.tab-inner{
display: flex;
position: relative;
background-color: #fff;
&::after{
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
border-bottom: 1px solid #F0F1F2;
transform: scale(0.5);
transform-origin: left center;
}
}
.tab-item{
color: #979899;
font-size: 15px;
width: 60px;
height: 50px;
line-height: 50px;
text-align: center;
}
.tab-active{
color: #373839;
font-weight: bold;
}
.tab-line{
position: absolute;
left: 30px;
bottom: 3px;
width: 10px;
height: 3px;
background-color: #449284;
border-radius: 1.5px;
transform: translate3d(-5px, 0, 0);
transition: left 0.3s;
}
.download-box{
display: flex;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
background-color: #fff;
img{
display: block;
width: 40px;
height: 40px;
margin: 10px 10px 0 15px;
}
.content{
flex: 1;
width: 50px;
padding-top: 10px;
}
.title{
font-size: 16px;
line-height: 22px;
}
.sub-title{
color: #717171;
font-size: 12px;
line-height: 18px;
}
.btn-download{
color: #449284;
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0 15px;
margin-right: 15px;
border: 1px solid #449284;
border-radius: 15px;
}
.btn-open{
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
font-size: 14px;
padding: 0 15px;
margin-right: 15px;
background-color: #449284;
border-radius: 15px;
}
}
.next-countdown{
position: absolute;
color: #fff;
right: 10px;
bottom: 44px;
font-size: 12px;
height: 24px;
line-height: 24px;
padding: 0 12px;
border-radius: 12px;
background-color: #373839;
}
}
</style>
<template>
<div class="goods-details-wrapper" :class="{'no-pt': isWeb}">
<CommonNavbar
id="header"
:isWeb="isWeb"
:bgColor="bgColor"
v-show="isShowNavbar"
:isBlack="isBlack"
:isShowShare="isShowShare"
:title="navTitle"
:shareTitle="goods.goodsName"
:shareTitleInfo="shareTitleInfo"
:isFixNavbar="isFixNavbar"
:shareUrl="shareUrl"
borderStyle="0px solid #fff"
></CommonNavbar>
<!-- 轮播 -->
<div class="swiper-box">
<van-swipe :show-indicators="false" @change="onSwiperChange">
<van-swipe-item v-for="(item, index) in swiperList" :key="index">
<img class="img" :src="item.goodsImgUrl" alt />
</van-swipe-item>
</van-swipe>
<div class="indicator">{{ swiperCurtIndex + 1 }}/{{ swiperList.length }}</div>
</div>
<!-- 商品信息 -->
<div class="info-box border-line">
<p class="title">{{ goods.goodsName }}</p>
<div class="price">
<div class="money">
<span class="yuan">{{ goods.salePriceNew.yuan }}</span>
<span class="fen">.{{ goods.salePriceNew.fen }}</span>
<span v-if="goods.hasDiscount" class="del">原价: ¥{{ goods.costPriceText }}</span>
</div>
<div class="bought">{{ goods.saledNum }}购买</div>
</div>
</div>
<!-- 购买数量、优惠券、支付方式 -->
<div class="buy-box border-line">
<div class="flex">
<div class="name">购买数量</div>
<div class="buy-num">
<div class="reduce" @click="onReduce"></div>
<div class="num">{{ goodsNum }}</div>
<div class="plus" @click="onPlus"></div>
</div>
</div>
<div class="flex buy-way">
<div class="name">优惠券</div>
<div @click="showCouponPopup" class="coupon-select coupon-pc" :class="{'no-coupon' : getCPText() == '无优惠券'}">{{getCPText()}}</div>
</div>
<div class="flex buy-way">
<div class="name">
支付方式
<span>目前只支持微信支付</span>
</div>
<div class="way">微信支付</div>
</div>
</div>
<!-- tab切换 -->
<div class="tab-box">
<div
class="tab-item"
:class="{'tab-active': curtTabIdx === index}"
v-for="(tab, index) in tabs"
:key="index"
@click="tabToggle(index)"
>{{ tab.name }}</div>
<div class="tab-line" :style="{left: `${tabLeft}px`}"></div>
</div>
<!-- 详情 -->
<div class="detail-box deep-img-w100" v-html="tabs[curtTabIdx] && tabs[curtTabIdx]['detail']"></div>
<!-- 底部购买 -->
<div class="btn-box">
<div class="money">
<p>
合计:
<span class="yuan">{{ totalPrice.yuan }}</span>
<span class="fen">.{{ totalPrice.fen }}</span>
<!-- <span v-if="goods.hasDiscount" class="del">原价: ¥{{ totalPrice.costPriceText }}</span> -->
</p>
<!-- <p v-if="totalPrice.savePrice" class="coupon">已使用优惠券,为您再优惠{{ totalPrice.savePrice }}</p> -->
</div>
<div
class="btn"
:class="[goods.isSale === 2 ? 'cannot-buy' : 'can-but']"
@click="preCreateOrder"
>{{ goods.isSale === 2 ? '商品已下架' : '确认支付' }}</div>
</div>
<Loading v-show="showLoading" />
<!-- 优惠券弹框 -->
<CouponSelectList
v-if="isShowCoupon"
:showSelectCoupon="isShowCoupon"
@cancle="closeCouponPopup"
@confirm="setCurrentPopup"
></CouponSelectList>
<CourseDialog
content="微信授权"
subContent="<p style='font-size: 16px; font-weight: bold; text-align: center;'>云鹊医申请以下权限:</p><p style='font-size: 14px; color: #999; text-align: center; padding-bottom: 10px;'>获得你的公开信息(头像,昵称等)</p>"
cancleBtnText="取消"
confirmBtnText="允许"
needSubContent
:isShowDialog="isShowDialog"
@handlerAction="handlerAction"
></CourseDialog>
<ShowCantBuyTips
subContent="您所在的省份暂无法录入该继续医学教育项目学分,请勿购买。"
cancleBtnText="我知道了"
isSingle
needSubContent
:isShowDialog="isShowCantBuyTips"
@handlerAction="isShowCantBuyTips=false"
></ShowCantBuyTips>
</div>
</template>
<script>
import { Swipe, SwipeItem } from "vant";
import Loading from "@/components/common/common-loading";
import CourseDialog from "@/components/course/course-dialog";
import ShowCantBuyTips from "@/components/course/course-dialog";
import CouponSelectList from "@/components/coupon/component-select-list";
import CommonNavbar from "@/components/common/common-navbar";
import { wxConfig, chooseWXPay } from "@/utils/wxShare";
import {
getAPPID,
getTradeType,
getWebPageUrl,
isWeiXin,
wxOauth,
debounce,
getHactiveUrl
} from "@/utils";
import { mapGetters, mapActions } from "vuex";
import { convertToYuan } from "@/utils";
import { setCookie, getCookie, delCookie } from "@/utils/index";
const isWechat = isWeiXin();
// wxConfig(location.href);
export default {
components: {
Swipe,
SwipeItem,
Loading,
CourseDialog,
CouponSelectList,
CommonNavbar,
ShowCantBuyTips
},
data() {
return {
token: "",
isWeb: window.__isWeb,
isAndroid: !window.__isAndroid,
goods: {
goodsName: "",
salePriceNew: {},
salePrice: {}
}, // 商品信息
totalPrice: {}, // 底部价格
swiperList: [], // 轮播图
swiperCurtIndex: 0, // 轮播当前下标
goodsNum: 1, // 数量
tabs: [],
curtTabIdx: 0,
tabW: 0, // tab的宽度
showLoading: false,
isShowDialog: false,
isShowCoupon: false, //是否展示激活弹框,
courseUrl: "",
defaultCouponId: "",
needSortAndSelect: true,
orderId: "",
bgColor: "#fff",
navTitle: "商品详情",
isFixNavbar: true,
isShowNavbar: true,
isBlack: true,
// shareTitle: goods.goodsName,
shareTitleInfo: "",
isShowShare: true,
isShowCantBuyTips: false,
couponToken: ""
};
},
computed: {
...mapGetters([
"userInfo",
"webUserInfo",
"currentCoupon",
"goodsInfo4Coupon",
"selectCouponList"
]),
wxInfo() {
return this.$store.state.user.wxInfo;
},
wxCode() {
return this.$store.state.user.wxCode;
},
tabLeft() {
const num = this.curtTabIdx + 0.25 + 15 / 115;
return this.tabW * num;
}
},
watch: {
webUserInfo: {
handler(userInfo) {
console.log("userInfo", userInfo);
if (userInfo.id) {
this.getGoodsInfo();
}
},
deep: true
}
},
created() {
let _this = this;
console.log("in goods detail new", 111111111);
let href = location.href;
this.shareUrl = href;
this.projectId = this.$route.query.projectId;
this.goodsId = this.$route.query.goodsId;
this.courseUrl = this.$route.query.courseUrl || "";
if(this.courseUrl) {
sessionStorage.setItem("courseUrl", this.courseUrl);
}
this.couponToken = this.$route.query.couponToken || "";
console.log('this.couponToken', this.couponToken);
this.shareUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.goodsId}`
);
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
if (this.projectId) {
this.shareUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.goodsId}&projectId=${this.projectId}`
);
} else {
this.shareUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.goodsId}`
);
}
location.replace(this.shareUrl);
}
localStorage.setItem("returnUrl", this.shareUrl);
window.__getUserInfo4GD = function(param) {
console.log("__getUserInfo4GD", param);
_this.token = param.userToken;
_this.setUserInfo(param);
_this.getGoodsInfo();
};
window.__refresh = function() {
_this.getUserInfo();
};
window.__WXpay = function(params) {
_this.showLoading = false;
_this.paycallback(params);
};
},
mounted() {
this.getTabW();
console.log("this.isWeb ... isWechat - 1", this.isWeb, isWechat);
// 数量加减
this.curtGoodsNum = this.goodsNum;
this.countTotalPrice = debounce(this.getTotalPrice, 300);
// 记录参数,授权登录返回时重新赋值,在main.js
sessionStorage.setItem(
"goodsDetailParams",
JSON.stringify(this.$route.query)
);
if (this.isWeb) {
let { token, info } = this.$store.state.user;
token =
token ||
this.couponToken ||
localStorage.getItem("couponToken") ||
getCookie("couponToken");
this.token = token;
console.log("token && !info.id", !info.id, token);
// if (!token) {
// this.goLogin();
// return;
// }
if (token && !info.id) {
// this.commonCheckToken(() => {
// this.$store.dispatch('setToken', this.token);
this.$store.dispatch("getUserInfo");
// });
// return;
}
// 从登陆页面过来时
this.getGoodsInfo();
} else {
this.getUserInfo();
}
},
methods: {
...mapActions([
"setUserInfo",
"setCurrentCoupon",
"setGoodsInfo4Coupon",
"setSelectCouponList"
]),
// 优惠券选择按钮文案
getCPText() {
let text = "";
// 有且选择了优惠券,则直接显示优惠券的优惠价格
if (this.currentCoupon.couponId) {
text = "-¥" + this.yuan(this.currentCoupon.discountAmount);
// 如果没有选择优惠券
} else {
if (this.goodsInfo4Coupon.count) {
text = this.goodsInfo4Coupon.count + "张优惠券";
} else {
text = "无优惠券";
}
}
return text;
},
// 查询我的可用优惠券
getCanUseCoupons(params) {
const { goodsType, cardType, price } = params;
this.GET(`trade/coupon/app/goodsCoupons`, {
goodsType,
cardType,
amount: price
}).then(res => {
if (res.code == "000000") {
params.count = (res.data || []).length;
this.setGoodsInfo4Coupon(params);
this.handlerCouponList(res.data || [], params.price);
// 设置优惠券个数
} else {
params.count = 0;
this.setGoodsInfo4Coupon(params);
this.setCurrentCoupon({});
this.setSelectCouponList([]);
}
});
},
// 处理数据,并且先排序,再将不可用的放在最后
handlerCouponList(couponList, goodsPrice) {
if (!couponList.length) return [];
let newList = [],
obj = {},
firstCanCoupon = null,
firstCanCouponIndex = 0,
item = {},
count = 0;
for (let i = 0; i < couponList.length; i++) {
item = couponList[i];
// 要根据商品价格及券适用类型来计算
item.disabled = !item.enableFlag;
if (!item.disabled) {
count++;
}
// 是否已经选择
item.isChecked = !!item.checkFlag;
if (!firstCanCoupon && item.isChecked) {
firstCanCoupon = item;
firstCanCouponIndex = i;
}
newList.push(item);
}
this.setCurrentCoupon(JSON.parse(JSON.stringify(firstCanCoupon)) || {});
this.setSelectCouponList(newList);
this.goodsInfo4Coupon.count = count;
this.setGoodsInfo4Coupon(this.goodsInfo4Coupon);
},
// 判断是否可用
isCanSelect(coupon, goodsPrice) {
console.log(
"isCanSelect",
coupon.requiredTotalFee,
goodsPrice,
goodsPrice >= coupon.requiredTotalFee
);
return goodsPrice >= coupon.requiredTotalFee;
},
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo4GD"
});
},
// 微信支付回调
paycallback(params) {
// 0成功 -1错误 -2 用户取消 -3 没有安装微信
// let courseUrl = encodeURIComponent(this.courseUrl);
// let courseUrl = sessionStorage.getItem("courseUrl");
let courseUrl = encodeURIComponent(sessionStorage.getItem("courseUrl") || "");
let url =
getHactiveUrl() +
`/message_push/#/order?orderBack=1&id=${this.orderId}&courseUrl=${courseUrl}`;
if (params.result == -3) {
this.$toast("您未安装微信,暂不能支付");
} else if (params.result == -2) {
this.POST(`/trade/center/order/pay_cancelled`, {
orderId: this.orderId
})
.then(res => {
this.jumpToOrder(url);
})
.catch(err => {});
} else {
this.jumpToOrder(url);
}
},
// 跳转到指定页面
jumpToOrder(pageUrl) {
let paramList = [
{
key: "pageUrl",
value: pageUrl,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
// 关闭优惠券弹框
closeCouponPopup() {
this.isShowCoupon = false;
},
// 显示优惠券弹框
showCouponPopup() {
this.commonCheckToken(() => {
this.isShowCoupon = true;
});
},
// 设置当前选中的优惠券
setCurrentPopup(currentCoupon) {
console.log("setCurrentPopup", currentCoupon);
this.setCurrentCoupon(currentCoupon);
this.getCPText();
this.isShowCoupon = false;
this.needSortAndSelect = false;
// 要重新调用计算价格接口
// this.countTotalPrice();
this.getTotalPrice(currentCoupon);
},
// tab切换
tabToggle(index) {
this.curtTabIdx = index;
this.$sendBuriedData({
component_tag: `888#8880${index + 4}`
});
},
// 获取商品信息
getGoodsInfo() {
if (!this.goodsId) {
return;
}
// this.commonCheckToken(() => {
this.GET(`trade/goods/goodInfoV3/${this.goodsId}`, {}).then(res => {
if (res.code == "000000") {
const goods = res.data;
const tabs = [];
let priceNew = goods.preferentialPrice || goods.costPrice;
let price =
goods.couponPrice || goods.preferentialPrice || goods.costPrice;
this.goods = goods;
this.defaultCouponId =
(goods.couponDTO && goods.couponDTO.couponId) || "";
// 获取到商品后,再获取优惠券
this.getCanUseCoupons({
goodsType: goods.goodsType,
cardType: goods.cardType,
price: priceNew,
count: 0
});
goods.salePriceNew = this.formatPrice(priceNew);
goods.salePrice = this.formatPrice(price);
goods.costPriceText = (goods.costPrice / 100).toFixed(2);
goods.hasDiscount = !!goods.preferentialPrice;
// goods.hasDiscount = !!(goods.couponPrice || goods.preferentialPrice);
let savePrice = 0;
if (goods.couponPrice) {
if (goods.preferentialPrice) {
savePrice = (
(goods.preferentialPrice - goods.couponPrice) /
100
).toFixed(2);
} else {
savePrice = ((goods.costPrice - goods.couponPrice) / 100).toFixed(
2
);
}
}
if (goods.goodsDescWhere) {
tabs.push({ name: "使用范围", detail: goods.goodsDescWhere });
}
if (goods.goodsDescHow) {
tabs.push({ name: "如何使用", detail: goods.goodsDescHow });
}
if (goods.goodsDescQaq) {
tabs.push({ name: "常见问题", detail: goods.goodsDescQaq });
}
this.totalPrice = {
...goods.salePrice,
preferentialPrice: goods.preferentialPrice,
costPrice: goods.costPrice,
costPriceText: goods.costPriceText,
savePrice
};
this.swiperList = (res.data && res.data.imgList) || [];
this.tabs = tabs;
this.getTabW();
let sharePrice = goods.preferentialPrice || goods.costPrice;
let shareTitleInfo = "¥" + (sharePrice / 100).toFixed(2);
shareTitleInfo += "\n" + (goods.shareContent || "");
let shareUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.goods.id}`
);
this.shareTitleInfo = shareTitleInfo;
this.wechatShare(
{
link: shareUrl,
title: goods.goodsName,
friendtitle: goods.goodsName,
desc: shareTitleInfo,
imgUrl: "https://file.yunqueyi.com/logo.png"
},
() => {
console.log("share success...");
}
);
} else {
this.$toast(res.message);
}
});
// });
},
// 多件商品的价格
// TODO,要多传优惠券id参数
getTotalPrice(currentCoupon) {
const num = this.curtGoodsNum;
let couponId = 0;
if (currentCoupon) {
couponId = currentCoupon.couponId || -1;
}
this.GET(
`trade/goods/getPrice/${this.goodsId}/${num}/${couponId}`,
{}
).then(res => {
if (res.code == "000000") {
const {
couponPrice,
preferentialPrice,
costPrice,
savePrice
} = res.data;
let price = couponPrice || preferentialPrice || costPrice;
this.totalPrice = {
...this.formatPrice(price),
preferentialPrice,
costPrice: costPrice,
costPriceText: (costPrice / 100).toFixed(2),
savePrice: savePrice ? (savePrice / 100).toFixed(2) : 0
};
this.goodsInfo4Coupon.price = preferentialPrice || costPrice;
this.setGoodsInfo4Coupon(this.goodsInfo4Coupon);
this.goodsNum = num;
if (this.needSortAndSelect) {
this.getCanUseCoupons(this.goodsInfo4Coupon);
// this.handlerCouponList(this.selectCouponList, preferentialPrice || costPrice);
}
this.needSortAndSelect = true;
} else if (res.code === "200006") {
this.$store.dispatch("logout");
}
});
},
// 价格转成元、分
formatPrice(price) {
let yuan = (price / 100).toFixed(0);
let fen = price % 100;
fen = fen < 10 ? `0${fen}` : fen;
return {
yuan,
fen
};
},
// 获取切换标签宽度
getTabW() {
if (this.tabs.length === 0) {
return;
}
this.$nextTick(() => {
const { width } = this.$el
.querySelector(".tab-item")
.getBoundingClientRect();
this.tabW = width;
});
},
// 轮播切换
onSwiperChange(index) {
this.swiperCurtIndex = index;
},
// 数量增
onPlus() {
this.$sendBuriedData({
component_tag: `888#88801`
});
this.commonCheckToken(() => {});
let num = this.curtGoodsNum;
if (
this.goods.limitPurchase &&
this.goods.limitPurchaseNum &&
num >= this.goods.limitPurchaseNum
) {
this.$toast("已达最大限购数量");
return;
}
if (this.goods.goodsStocks && num >= this.goods.goodsStocks) {
this.$toast("库存不足");
return;
}
this.curtGoodsNum = num + 1;
this.countTotalPrice();
},
// 数量减
onReduce() {
this.$sendBuriedData({
component_tag: `888#88802`
});
this.commonCheckToken(() => {});
let num = this.curtGoodsNum;
if (num <= 1) {
this.$toast("最少购买一张哦");
return;
}
this.curtGoodsNum = num - 1;
this.countTotalPrice();
},
handlerAction(type) {
if (type === 2) {
wxOauth();
}
this.isShowDialog = false;
},
// 判断是否能购买
preCreateOrder() {
this.commonCheckToken(() => {
const { goodsType, cardType } = this.goods;
console.log("goodsType, cardType", goodsType, cardType);
// 只有一类卡才做相应判断
if (goodsType == 2 && cardType == 1) {
this.GET(
`trade/goods/sale/checkProvince?goodsType=${goodsType}&cardType=${cardType}`,
{}
).then(({ data }) => {
if (data == 1) {
this.createOrder();
} else {
this.isShowCantBuyTips = true;
}
});
} else {
this.createOrder();
}
});
},
// 创建订单
createOrder() {
this.$sendBuriedData({
component_tag: `888#88803`
});
// 微信内先去授权
if (isWechat && !this.wxInfo.openid) {
this.isShowDialog = true;
return;
}
// 避免多次支付
if (this.showLoading) {
return;
}
const { id, couponDTO, isSale } = this.goods;
const { preferentialPrice, costPrice } = this.totalPrice;
if (!id || isSale !== 1) {
return;
}
// 重新使用优惠券
let couponId = (this.currentCoupon && this.currentCoupon.couponId) || 0;
const orderData = {
couponId: couponId,
// couponId: couponDTO ? couponDTO.couponId : 0,
goodsId: id,
goodsQuantity: this.goodsNum,
orderSource: 3,
preferentialPrice: this.goods.preferentialPrice,
price: this.goods.costPrice
};
console.log("orderData...", orderData);
this.showLoading = true;
// this.POST("trade/center/order/createV2", orderData)
this.POST("trade/center/order/createV4", orderData)
.then(res => {
if (res.code == "000000") {
const orderId = res.data.orderId;
this.orderId = res.data.orderId;
// if (isWechat) {
// this.goWxPayInner(orderId);
// } else {
// this.goWxPayOut(orderId);
// }
// 在站外,则调用站外支付
console.log(
"this.isWeb ... isWechat - 2 this.orderId",
this.isWeb,
isWechat,
this.orderId
);
if (this.isWeb) {
console.log("in web...");
if (isWechat) {
this.goWxPayInner(orderId);
} else {
this.goWxPayOut(orderId);
}
} else {
console.log("not in web...");
rocNative.WXpay({
__funcName: "__WXpay",
orderId: String(orderId)
});
}
if (this.projectId) {
this.createRelation(this.projectId, orderId);
}
} else {
this.$toast(res.message);
this.showLoading = false;
if (res.code === "200006") {
this.$store.dispatch("logout");
}
}
})
.catch(() => {
this.showLoading = false;
});
},
// 微信内支付
goWxPayInner(orderId) {
const data = {
openId: this.wxInfo.openid,
orderId,
payChannel: 1,
tradeType: getTradeType(),
userId: this.$store.state.user.info.id
};
this.POST("trade/center/jsapi_prepay", data)
.then(res => {
if (res.code == "000000" && res.data) {
// console.log('______prepay_____', res.data);
const that = this;
const payData = {
...res.data,
appid: res.data.appId,
timestamp: res.data.timeStamp,
success: function() {
let query = { orderId };
if (that.projectId) {
query.projectId = that.projectId;
}
that.$router.push({ path: "/prezult", query });
},
fail: function() {
that.$toast("支付失败,请重试~");
},
cancel: function() {
// that.$toast('支付取消~');
},
complete: function() {}
};
chooseWXPay(payData);
} else {
this.$toast(res.message);
}
this.showLoading = false;
})
.catch(() => {
this.showLoading = false;
});
},
// 站外微信支付
goWxPayOut(orderId) {
const data = {
// openId: getAPPID(),
orderId,
payChannel: 1,
tradeType: getTradeType()
};
this.POST("trade/center/mweb_prepay", data)
.then(res => {
if (res.code == "000000") {
if (res.data) {
let redirectUrl = this.getRedirectUrl(orderId);
let jumpLink =
res.data + "&redirect_url=" + encodeURIComponent(redirectUrl);
window.location.href = jumpLink;
}
} else {
this.$toast(res.message || "暂时不能支付");
}
this.showLoading = false;
})
.catch(() => {
this.showLoading = false;
});
},
// 设置微信重定向URL
getRedirectUrl(orderId) {
let path = `profexam/#/prezult?orderId=${orderId}`;
if (this.projectId) {
path += `&projectId=${this.projectId}`;
}
return getWebPageUrl(path);
},
// 绑定项目和订单的关系(idType=1),这里只判断cardType是否为4
createRelation(projectId, orderId) {
let idType = 1,
channel = 1;
if (this.goods.cardType == 4) {
idType = 2;
}
if (this.isWeb) {
channel = 3;
}
let cardType = this.goods.cardType;
this.POST(
`cme/projectCard/correlation/${idType}/${projectId}/${orderId}`,
{
channel: channel
}
).then(res => {
if (res.code == "000000") {
//
} else {
this.$toast(res.message);
}
});
},
// 显示元
yuan(fen) {
return convertToYuan(fen);
}
},
beforeDestroy() {
sessionStorage.removeItem("courseUrl");
},
};
</script>
<style lang="less" scoped>
.goods-details-wrapper {
padding-top: 80px;
.swiper-box {
position: relative;
.indicator {
position: absolute;
right: 10px;
bottom: 10px;
width: 40px;
height: 22px;
line-height: 22px;
color: #fff;
font-size: 12px;
text-align: center;
padding: 0 8px;
border-radius: 11px;
background: rgba(0, 0, 0, 0.2);
}
.img {
display: block;
width: 100%;
}
}
.border-line {
padding: 20px 15px;
border-bottom: 6px solid #f8f9fa;
}
.info-box {
.title {
font-size: 18px;
font-weight: bold;
padding-bottom: 12px;
}
.price {
display: flex;
align-items: baseline;
font-size: 12px;
}
.money {
flex: 1;
width: 100px;
}
.yuan {
color: #fb5b52;
font-size: 18px;
font-weight: bold;
}
.fen {
color: #fb5b52;
font-weight: bold;
}
.del {
color: #979899;
text-decoration: line-through;
margin-left: 6px;
}
.bought {
color: #979899;
}
}
.buy-box {
font-size: 14px;
.flex {
display: flex;
align-items: center;
}
.name {
flex: 1;
width: 100px;
font-weight: bold;
}
.buy-num {
display: flex;
}
.reduce {
position: relative;
width: 22px;
height: 22px;
background: url("~@/images/reduce.png") no-repeat center center;
background-size: 20px auto;
}
.num {
width: 30px;
height: 22px;
line-height: 22px;
text-align: center;
}
.plus {
position: relative;
width: 22px;
height: 22px;
background: url("~@/images/plus.png") no-repeat center center;
background-size: 20px auto;
}
.buy-way {
margin-top: 25px;
span {
color: #979899;
font-size: 12px;
margin-left: 6px;
}
}
.way {
line-height: 18px;
padding-left: 28px;
background: url("~@/images/wxpay.png") no-repeat left center;
background-size: 18px auto;
}
.coupon-select {
// line-height: 12px;
padding-right: 15px;
background: url("~@/images/coupon/arrow-right.png") no-repeat right center;
background-size: 12px auto;
transform: rotate(0deg);
// &.top {
// position: relative;
// top: -1px;
// }
}
}
.tab-box {
display: flex;
position: relative;
height: 50px;
padding: 0 15px;
background-color: #fff;
&::after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 200%;
height: 0;
border-bottom: 1px solid #f0f1f2;
transform: scale(0.5);
transform-origin: left center;
}
}
.tab-item {
color: #979899;
font-size: 15px;
width: 115px;
height: 50px;
line-height: 50px;
}
.tab-active {
color: #373839;
font-weight: bold;
}
.tab-line {
position: absolute;
left: 30px;
bottom: 3px;
width: 10px;
height: 3px;
background-color: #449284;
border-radius: 1.5px;
transform: translate3d(-5px, 0, 0);
transition: left 0.3s;
}
.detail-box {
font-size: 14px;
text-align: justify;
padding: 15px 15px 75px;
}
.btn-box {
display: flex;
align-items: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 60px;
padding: 10px 15px;
box-shadow: 0 -4px 4px rgba(240, 240, 240, 0.5);
background-color: #fff;
.money {
flex: 1;
width: 100px;
font-size: 14px;
}
.yuan {
color: #fb5b52;
font-size: 18px;
font-weight: bold;
}
.fen {
font-size: 12px;
color: #fb5b52;
font-weight: bold;
}
.del {
color: #979899;
font-size: 12px;
text-decoration: line-through;
margin-left: 6px;
}
.coupon {
color: #979899;
font-size: 12px;
}
.btn {
width: 125px;
height: 40px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 16px;
font-weight: bold;
border-radius: 20px;
}
.can-but {
background-image: linear-gradient(90deg, #ffa65f, #ff7a4b);
}
.cannot-buy {
background-color: #c7c8c9;
}
}
.coupon-pc {
font-weight: 400;
color: #fb5b52;
}
&.no-pt {
padding-top: 0px;
}
.no-coupon {
color: #979899;
}
}
</style>
<template>
<!-- 专业选择列表 -->
<div class="page-container">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="1px solid #fff"
></CommonNavbar>
<section class="page-content">
<section v-show="!existBind" class="cb-wrapper padding-top-111">
<CardBanner :hasLogin="hasLogin"></CardBanner>
</section>
<section class="body" :class="{'body-pt': !existBind}">
<ul class="left fixed" :class="{'top': !existBind}">
<li
v-for="(model, mIndex) in titleTestModelList"
:key="mIndex"
:class="{active: currentModelIndex == mIndex}"
@click="selectModel(model, mIndex)"
>
<span>{{model.title}}</span>
</li>
</ul>
<ul class="left"></ul>
<article class="right">
<ul class="list-wrapper">
<li class="list" v-for="(item, index) in listData" :key="index">
<span class="title">{{item.name}}</span>
<ul class="item">
<li
:id="'subject_' + index + '_' + sIndex"
class="card"
:class="{'no-active' : subject.openFlag == 0, 'has-bind' : subject.bindCardStatus == 1}"
v-for="(subject, sIndex) in item.secondSubjectModelList"
:key="sIndex"
@click="coopDetails(subject)"
>
<span>{{subject.name}}</span>
<span v-show="subject.code">({{subject.code}})</span>
<span v-show="subject.bindCardStatus == 1" class="buy">己购</span>
<span
v-show="subject.openFlag == 0"
class="time"
>{{formatTime2(subject.predictTime)}}上线</span>
</li>
</ul>
</li>
<li class="no-list" v-show="!listData.length">
<img src="../images/subject/no-subject.png" alt />
<span>正在更新中,敬请期待</span>
</li>
</ul>
</article>
</section>
</section>
<transition name="fade">
<article v-show="needShowBackup" @click="scrollTop" class="back-up-icon">
<img src="../images/cme/phrase2/back-top.png" alt />
</article>
</transition>
<Loading v-if="showLoading" />
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
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 { getWebPageUrl, parseTime } from "@/utils/index";
import { Toast } from "vant";
export default {
data() {
return {
existBind: 0,
currentModelIndex: 2,
titleTestModelList: [],
showLoading: false,
isWeb: window.__isWeb,
isAndroid: window.__isAndroid,
isIOS: window.__isIOS,
bgColor: "#fff",
isShow: false,
navTitle: "选择专业",
isShowNavbar: true,
isFixNavbar: true,
pointStyle: "activity",
tabIndex: 1,
joinProjectList: [], // 我的项目
otherProjectList: [], // 全部项目
token: "",
userMobile: "",
needShowBackup: false,
listData: [
{
name: "中医",
list: [
{ name: "全科中医", code: 201, bindStatus: 0 },
{ name: "中医内科学中医内科学", code: 201, bindStatus: 0 },
{ name: "全科中医", code: 201, bindStatus: 0 }
]
},
{
name: "妇科",
list: [
{ name: "妇产科学", code: 201, bindStatus: 0 },
{ name: "中医内科学中医内科学", code: 201, bindStatus: 0 },
{ name: "全科中医", code: 201, bindStatus: 0 }
]
},
{
name: "内科",
list: [
{ name: "肾内科学", code: 201, bindStatus: 0 },
{
name: "肾内科学肾内科学肾内科学肾内科学",
code: 201,
bindStatus: 0
},
{ name: "全科中医", code: 201, bindStatus: 0 }
]
}
],
isInfresh: false,
hasLogin: false,
hasResetPosition: false
};
},
computed: {
...mapGetters(["userInfo"])
},
components: {
CardBanner,
CommonNavbar,
Loading,
CommonTitle
},
created() {
var _this = this;
_this.currentModelIndex = 2;
window.__getUserInfo = function(param) {
_this.setUserInfo(param);
_this.token = param.userToken;
_this.checkToken();
_this.userMobile = param.userMobile;
_this.getListData();
console.log("__getUserInfo", param);
};
_this.getUserInfo();
if (__isWeb) {
_this.getListData();
}
window.__refresh = function() {
_this.isInfresh = true;
// _this.currentModelIndex = 0;
console.log(_this.currentModelIndex);
_this.getUserInfo();
};
// 打开页面埋点
// this.$sendBuriedData({
// component_tag: "210#0#0#0"
// });
window.addEventListener("scroll", this.scrollFun);
},
mounted() {
this.listData = [];
// this.currentModelIndex = 0;
},
methods: {
...mapActions(["setUserInfo"]),
// 选择职称
selectModel(model, index) {
this.currentModelIndex = index;
this.listData =
this.titleTestModelList[index].firstSubjectModelList || [];
this.$sendBuriedData({
component_tag: model.titleCode === '1001' ? '886#8861' : (model.titleCode === '1002' ? '886#8862' : '886#8863')
});
},
// 跳转到项目页面
coopDetails(item) {
if (item.openFlag == 0) return;
this.$sendBuriedData({
component_tag: `886#8864#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
});
// 临时添加
if (window.__isWeb) {
this.$router.push({
path: "/coop",
query: {
id: item.projectId
}
});
return;
}
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split(".").join("");
console.log("appVersionNum", appVersionNum);
if (appVersionNum < 341) {
Toast("请您下载新版本App");
return;
}
let paramList = [
{
key: "pageUrl",
value: getWebPageUrl(`profexam/#/coop?id=${item.projectId}`),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo"
});
},
// 查询列表
getListData() {
let _this = this;
let param = {
token: _this.token,
setEntry: true
};
this.showLoading = true;
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 || [];
let len = this.titleTestModelList.length > 0 ? (this.titleTestModelList.length - 1) : 0;
// 如果有绑定的卡,并且之前没有做定位,则进行定位
if (this.existBind && !this.hasResetPosition) {
this.hasResetPosition = true;
this.resetPosition(this.titleTestModelList);
// 否则直接使用当前的位置信息
} else {
this.listData =
res.data.titleTestModelList[
len
].firstSubjectModelList;
this.currentModelIndex = len;
}
} else {
this.$toast(res.message);
}
});
},
// 查找对应的职称与专业
resetPosition(list) {
if (!list.length) return;
let parentIndex = 0,
fIndex = 0,
subIndex = 0,
firstSub = [],
secondSub = [];
outloop: for (let i = 0; i < list.length; i++) {
firstSub = list[i].firstSubjectModelList;
for (let j = 0; j < firstSub.length; j++) {
secondSub = firstSub[j].secondSubjectModelList;
for (let k = 0; k < secondSub.length; k++) {
if (secondSub[k].bindCardStatus) {
parentIndex = i;
fIndex = j;
subIndex = k;
break outloop;
}
}
}
}
this.currentModelIndex = parentIndex;
this.listData =
this.titleTestModelList[parentIndex].firstSubjectModelList || [];
this.$forceUpdate();
this.resetProjectPosition(fIndex, subIndex);
},
// 将定位到的元素,滚动到最上面
resetProjectPosition(fIndex, subIndex) {
this.$nextTick(() => {
setTimeout(() => {
let scrollTop = document.getElementById(
`subject_${fIndex}_${subIndex}`
).offsetTop;
window.scrollTo(0, scrollTop - 120);
}, 100);
});
},
// 监听滚动事件
scrollFun() {
let scrollTop = window.scrollY;
if (scrollTop >= 500) {
this.needShowBackup = true;
} else {
this.needShowBackup = false;
}
},
// 滚动到顶部
scrollTop() {
window.scrollTo(0, 0);
},
// 格式化时间
formatTime(time, cFormat) {
return parseTime(time, cFormat);
},
formatTime2(time) {
if(!time) return '';
let year = time.substr(0, 4);
let month = time.substr(5, 2);
// if(month < 10) {
// month = time.substr(6, 1);
// }
return `${year}${month}月`;
},
// 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 {
rocNative.gotoLogin();
}
_this.isInfresh = false;
} else {
_this.hasLogin = true;
}
});
}
}
};
</script>
<style lang="less" scoped>
.page-content {
padding-top: 74px;
min-height: 100vh;
.body {
// min-height: 90vh;
display: flex;
flex-direction: row;
font-size: 14px;
color: #676869;
&.body-pt {
padding-top: 40px;
}
.left {
width: 130px;
background: #fff;
li {
position: relative;
display: block;
height: 60px;
line-height: 60px;
padding-left: 15px;
&.active {
color: #449284;
background: #fff;
&.active::before {
position: absolute;
left: 0;
top: 20px;
z-index: 1;
content: "";
height: 20px;
width: 3px;
border-radius: 2px;
background: #449284;
}
}
}
&.fixed {
position: fixed;
top: 74px;
left: 0;
bottom: 0;
right: 130px;
z-index: 1;
background: #f8f9fa;
&.top {
top: 114px;
}
}
}
.right {
flex: 1;
padding: 0 15px 30px;
.list-wrapper {
.list {
.title {
display: inline-block;
// height: 35px;
padding: 6px 0 10px;
// line-height: 1.2;
margin-top: 14px;
font-size: 15px;
font-weight: 700;
color: #373839;
}
.item {
li {
min-height: 60px;
position: relative;
top: 0;
left: 0;
z-index: 1;
display: flex;
flex-direction: column;
// height: 55px;
padding: 12px 0;
margin-bottom: 6px;
justify-content: center;
text-align: center;
border-radius: 4px;
background: #f8f9fa;
align-items: center;
span {
display: inline-block;
// height: 20px;
line-height: 20px;
padding: 0 20px;
}
&.has-bind {
color: #449284;
background: rgba(68, 146, 132, 0.1);
.buy {
position: absolute;
top: 0;
right: 0;
z-index: 1;
height: 15px;
line-height: 15px;
padding: 0 4px;
border-radius: 0px 4px 0px 4px;
font-size: 11px;
color: #fff;
background: #449284;
}
}
&.no-active {
color: #c7c8c9;
.time {
position: absolute;
top: 0;
right: 0;
z-index: 1;
height: 15px;
line-height: 15px;
padding: 0 4px;
border-radius: 0px 4px 0px 4px;
opacity: 0.4;
font-size: 11px;
background: rgba(0, 0, 0, 1);
}
}
}
}
}
.no-list {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
margin-top: 60px;
// width: 50px;
// height: 50px;
img {
width: 100px;
height: 100px;
}
span {
font-size: 12px;
color: #c7c8c9;
}
}
}
}
}
.cb-wrapper {
position: fixed;
z-index: 2;
width: 100%;
}
}
.back-up-icon {
position: fixed;
z-index: 10;
bottom: 50px;
right: 15px;
img {
width: 35px;
height: 35px;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</style>
<template>
<!-- 专业选择列表 -->
<div class="page-container">
<CommonNavbar
:bgColor="bgColor"
v-show="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
:burialPoint="pointStyle"
borderStyle="1px solid #fff"
></CommonNavbar>
<section class="page-content">
<table class="page-content-table">
<tr>
<td @click="changeTab(1)" :class="{'active': tabIndex === 1}">
<div class="tap-title">
<span :style="{'color': tabIndex === 1 ? '#333' : '#999'}">高级职称</span>
<span :class="{'android': isAndroid, 'ios': isIOS}"></span>
</div>
</td>
<td @click="changeTab(2)" :class="{'active': tabIndex === 2}">
<div class="tap-title">
<span :style="{'color': tabIndex === 2 ? '#333' : '#999'}">中级职称</span>
<span :class="{'android': isAndroid, 'ios': isIOS}"></span>
</div>
</td>
</tr>
</table>
<article class="page-content-list" style="margin-top: 50px;">
<CommonImgTitle></CommonImgTitle>
<div :id="'subject_1_' + index" class="subject" v-for="(item, index) in gjFirstSubjectModelList" :key="index">
<p>{{item.name}}<span v-show="item.code">{{item.code}}</span></p>
<ul class="item-wrapper">
<li @click="coopDetails(item, 1)" v-if="item.openFlag" class="item-rel">
<img v-if="item.bindCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
<div class="item">
<img src="../images/course/icon-kc-1.png" alt="">
<span>课程</span>
</div>
</li>
<li v-if="!item.openFlag && item.resourceModelList.length" class="item-pre">
<div class="pre">
<img src="../images/course/icon-kc-2.png" alt="">
<span class="pre">课程</span>
</div>
<p v-show="item.predictTime">{{formatTime2(item.predictTime)}}上线</p>
</li>
<li @click="coopDetails(item, 2)" v-if="item.directoryList.length" class="item-rel">
<img v-if="item.bindDirectoryCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
<div class="item tk">
<img src="../images/course/icon-tk-1.png" alt="">
<span>题库</span>
</div>
</li>
</ul>
</div>
</article>
<article ref="zjListRef" id="zjListRef" class="page-content-list">
<CommonImgTitle imgType=2 title="中级职称"></CommonImgTitle>
<div :id="'subject_0_' + index" class="subject" v-for="(item, index) in zjFirstSubjectModelList" :key="index">
<p>{{item.name}}<span v-show="item.code">{{item.code}}</span></p>
<ul class="item-wrapper">
<li @click="coopDetails(item, 1)" v-if="item.openFlag" class="item-rel">
<img v-if="item.bindCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
<div class="item">
<img src="../images/course/icon-kc-1.png" alt="">
<span>课程</span>
</div>
</li>
<li v-if="!item.openFlag && item.resourceModelList.length" class="item-pre">
<div class="pre">
<img src="../images/course/icon-kc-2.png" alt="">
<span class="pre">课程</span>
</div>
<p v-show="item.predictTime">{{formatTime2(item.predictTime)}}上线</p>
</li>
<li @click="coopDetails(item, 2)" v-if="item.directoryList.length" class="item-rel">
<img v-if="item.bindDirectoryCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
<div class="item tk">
<img src="../images/course/icon-tk-1.png" alt="">
<span>题库</span>
</div>
</li>
</ul>
</div>
</article>
<!-- 修复一个神奇的bug:底部与背景色重叠 -->
<div style="height: 10px;background: #F8F9FA;"></div>
</section>
<transition name="fade">
<article v-show="needShowBackup" @click="scrollTop" class="back-up-icon">
<img src="../images/cme/phrase2/back-top.png" alt />
</article>
</transition>
<Loading v-if="showLoading" />
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import Loading from "@/components/common/common-loading";
import CommonImgTitle from "@/components/course/common-img-title";
import { mapGetters, mapActions } from "vuex";
import { getWebPageUrl, parseTime } from "@/utils/index";
import { Toast } from "vant";
let zjListOffsetTop = 0;
let screenHeight = 667;
export default {
data() {
return {
existBind: 0,
showLoading: false,
isWeb: window.__isWeb,
isAndroid: window.__isAndroid,
isIOS: window.__isIOS,
bgColor: "#fff",
isShow: false,
navTitle: "选择专业",
isShowNavbar: true,
isFixNavbar: true,
pointStyle: "activity",
tabIndex: 1,
joinProjectList: [], // 我的项目
otherProjectList: [], // 全部项目
token: "",
userMobile: "",
needShowBackup: false,
listData: [],
zjFirstSubjectModelList: [],
gjFirstSubjectModelList: [],
isInfresh: false,
hasLogin: false,
hasResetPosition: false
};
},
computed: {
...mapGetters(["userInfo"])
},
components: {
CommonNavbar,
Loading,
CommonImgTitle
},
created() {
var _this = this;
window.__getUserInfo = function(param) {
_this.setUserInfo(param);
_this.token = param.userToken;
_this.checkToken();
_this.userMobile = param.userMobile;
_this.getListData();
};
_this.getUserInfo();
if (__isWeb) {
_this.getListData();
}
window.__refresh = function() {
_this.isInfresh = true;
_this.getUserInfo();
};
window.addEventListener("scroll", this.scrollFun);
},
mounted() {
},
methods: {
...mapActions(["setUserInfo"]),
// 切换列表, 滚动到列表指定位置
changeTab(index) {
if(index == 1) {
window.scrollTo(0, 0);
} else {
let scrollTop = zjListOffsetTop - 132;
if(this.isAndroid) {
scrollTop = zjListOffsetTop - 116;
}
window.scrollTo(0, scrollTop);
}
this.tabIndex = index;
},
// 跳转到项目页面或课程
coopDetails(item, type) {
// if (item.openFlag == 0) return;
this.$sendBuriedData({
component_tag: `886#8864#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
});
// 临时添加
if (window.__isWeb) {
if(type == 1) {
this.$router.push({
path: "/coop",
query: {
id: item.projectId
}
});
} else {
this.$router.push({
path: "/question-bank",
query: {
secondSubjectId: item.id
}
});
}
return;
}
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split(".").join("");
console.log("appVersionNum", appVersionNum);
if (appVersionNum < 341) {
Toast("请您下载新版本App");
return;
}
let pageUrl = getWebPageUrl(`profexam/#/coop?id=${item.projectId}`);
if(type == 2) {
pageUrl = getWebPageUrl(`profexam/#/question-bank?secondSubjectId=${item.id}`)
}
let paramList = [
{
key: "pageUrl",
value: pageUrl,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
//获取版本号
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfo"
});
},
// 查询列表
getListData() {
let _this = this;
let param = {
token: _this.token || '531EB4560CBB4653B1F2C65B7F1816EF',
setEntry: true
};
this.showLoading = true;
this.GET(`portal/titleTestApp/list`, param).then(res => {
this.showLoading = false;
if (res.code == "000000") {
this.existBind = res.data.existBind || 0;
this.zjFirstSubjectModelList = res.data.titleTestModelList[0].firstSubjectModelList[0] && res.data.titleTestModelList[0].firstSubjectModelList[0].secondSubjectModelList || [];
this.gjFirstSubjectModelList = res.data.titleTestModelList[2].firstSubjectModelList[0] && res.data.titleTestModelList[2].firstSubjectModelList[0].secondSubjectModelList || [];
// 如果有绑定的卡,并且之前没有做定位,则进行定位
if (this.existBind && !this.hasResetPosition) {
this.hasResetPosition = true;
let titleTestModelList = res.data.titleTestModelList || [];
titleTestModelList.splice(1, 1);
this.resetPosition(titleTestModelList);
}
this.$forceUpdate();
// 延迟获取中级职称
this.$nextTick(() => {
setTimeout(() => {
zjListOffsetTop = document.getElementById('zjListRef').offsetTop;
screenHeight = screen.height;
console.log('zjListOffsetTop, screenHeight', zjListOffsetTop, screenHeight);
}, 100);
});
} else {
this.$toast(res.message);
}
});
},
// 查找对应的职称与专业
resetPosition(list) {
if (!list.length) return;
let parentIndex = 0,
// fIndex = 0,
subIndex = 0,
firstSub = [],
secondSub = [];
outloop: for (let i = list.length - 1; i >= 0; i --) {
firstSub = list[i].firstSubjectModelList;
for (let j = 0; j < firstSub.length; j++) {
secondSub = firstSub[j].secondSubjectModelList;
for (let k = 0; k < secondSub.length; k++) {
if (secondSub[k].bindCardStatus || secondSub[k].bindDirectoryCardStatus) {
parentIndex = i;
// fIndex = j;
subIndex = k;
break outloop;
}
}
}
}
this.$forceUpdate();
this.resetProjectPosition(parentIndex, subIndex);
},
// 查找对应的职称与专业
resetPositionNew(list) {
console.log('in resetPosition', list);
if (!list.length) return;
let fIndex = 0,
level = 1,
firstSub = [],
secondSub = [];
outloop: for (let i = 0; i < list.length; i++) {
firstSub = list[i].firstSubjectModelList;
for (let j = 0; j < firstSub.length; j++) {
secondSub = firstSub[j].secondSubjectModelList;
if(secondSub.length) {
if(secondSub[0].bindCardStatus) {
level = 1;
}
if(secondSub[0].bindCardStatus || secondSub[0].bindDirectoryCardStatus) {
fIndex = j;
break outloop;
}
}
}
}
this.$forceUpdate();
this.resetProjectPosition(fIndex);
},
// 将定位到的元素,滚动到最上面
resetProjectPosition(parentIndex, subIndex) {
this.$nextTick(() => {
setTimeout(() => {
let scrollTop = document.getElementById(
`subject_${parentIndex}_${subIndex}`
).offsetTop;
console.log('resetProjectPosition', scrollTop);
window.scrollTo(0, (scrollTop - 120));
}, 100);
});
},
// 监听滚动事件
scrollFun() {
let scrollTop = window.scrollY;
if(scrollTop + screenHeight - 20 > zjListOffsetTop) {
this.tabIndex = 2;
} else {
this.tabIndex = 1;
}
if (scrollTop >= 500) {
this.needShowBackup = true;
} else {
this.needShowBackup = false;
}
this.$nextTick( () => {
if(window.scrollY <= 5) {
this.tabIndex = 1;
}
})
// console.log('in scrollTop + screenHeight, zjListOffsetTop', scrollTop + screenHeight, zjListOffsetTop);
},
// 滚动到顶部
scrollTop() {
window.scrollTo(0, 0);
},
// 格式化时间
formatTime(time, cFormat) {
return parseTime(time, cFormat);
},
formatTime2(time) {
if(!time) return '';
let year = time.substr(0, 4);
let month = time.substr(5, 2);
return `${year}${month}月`;
},
// 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 {
rocNative.gotoLogin();
}
_this.isInfresh = false;
} else {
_this.hasLogin = true;
}
});
}
},
// 页面销毁前注销滚动的监听事件
beforeDestroy() {
// window.removeEventListener('scroll');
},
};
</script>
<style lang="less" scoped>
.page-container {
font-size: 14px;
padding-top: 74px;
min-height: 100vh;
background: #F8F9FA;
.page-content {
// padding-top: 155px;
// min-height: 100vh;
&-table {
position: fixed;
top: 64px;
left: 0;
z-index: 100;
width: 100%;
text-align: center;
// border-bottom: 1px solid #e7e7e7;
background: #fff;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
tr {
font-size: 15px;
font-weight: 700;
height: 44px;
td {
width: 50%;
padding-top: 6px;
.tap-title {
display: flex;
flex-direction: column;
align-items: center;
color: #999;
span:nth-child(2) {
position: relative;
left: 0;
bottom: -8px;
z-index: 2;
width: 10px;
height: 3px;
background: rgba(255, 255, 255, 1);
border-radius: 3px;
}
}
&.active {
span:nth-child(2) {
background: rgba(68, 146, 132, 1);
}
span.android:nth-child(2) {
bottom: -9px;
}
span.ios:nth-child(2) {
bottom: -7px;
}
}
}
}
}
&-list {
margin: 0 15px 10px;
padding: 0 15px;
background: #fff;
padding-bottom: 10px;
border-radius: 6px;
// height: 700px;
.subject {
// padding-bottom: 10px;
& > p, & > p > span {
padding: 5px 0 10px;
font-size: 16px;
font-weight: 700;
color: #333333;
}
.item-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
.item-rel {
position: relative;
top: 0;
left: 0;
z-index: 3;
}
.item {
position: relative;
top: 0;
left: 0;
z-index: 4;
display: flex;
width: 150px;
height: 40px;
background: rgba(59, 134, 253, 0.05);
border-radius: 6px;
border: 1px solid #3B86FD;
align-items: center;
justify-content: center;
box-sizing: content-box;
& > img {
width: 14px;
height: 14px;
}
& > span {
margin-left: 4px;
font-size: 14px;
color: #3B86FD;
}
}
.buy {
position: absolute;
top: 1px;
right: 0px;
z-index: 3;
width: 34px;
height: 16px;
}
.item-pre {
display: flex;
flex-direction: column;
width: 150px;
height: 40px;
background: rgba(59, 134, 253, 0.05);
border-radius: 6px;
border: 1px solid #D7DFF0;
align-items: center;
justify-content: center;
& > .pre {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
& > img {
width: 14px;
height: 14px;
}
& > span {
margin-left: 4px;
color: #D7DFF0;
}
}
& > p {
line-height: 1.2;
font-size: 12px;
color: #94A3C1;
}
}
.tk {
background: rgba(255, 90, 110, 0.05);
border-radius: 6px;
border: 1px solid #FF5A6E;
span {
color: #FF5A6E;
}
}
}
}
}
}
}
.back-up-icon {
position: fixed;
z-index: 10;
bottom: 50px;
right: 15px;
img {
width: 35px;
height: 35px;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
</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"
:shareUrl="shareUrl"
:burialPoint="pointStyle"
:projectId="projectId"
:limitTimes="limitTimes"
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">
<!-- <div class="sk-btn-cover-new" @click="continueStudy()" > -->
<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"
:projectId="projectId"
/>
</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"
/>
<CourseDialog
:subContent="subContent"
confirmBtnText="激活"
needSubContent
:isShowDialog="showBindCardTips"
@handlerAction="handlerAction"
></CourseDialog>
</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 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 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,
shareUrl: location.href,
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 3,
orderId: 0,
},
subContent: "",
hasNoUsedCard: false,
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CellListDetail,
Loading,
CommonTcPlayer,
BasicInfo,
LearnKnow,
ItemIntro,
ItemLeader,
TeacterIntro,
CommonDialog,
CourseDialog,
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;
},
// 处理提示信息框
handlerAction(type) {
if(type == 1) {
this.$sendBuriedData({
component_tag: `882#88219`
});
this.showBindCardTips = false;
} else {
this.$sendBuriedData({
component_tag: `882#88218`
});
this.changeCardAction(this.cmeCardModels.cardKey, true)
}
},
// 查询是否买过类似的卡,但还没有绑定
hasNoUsedCardAction() {
let param = {
setEntry: true
};
this.GET(`cme/projectCard/queryNoUsedCard/${this.project.goodsType}/${this.project.cardType}`, param).then(({ data }) => {
this.hasNoUsedCard = data.hasNoUsedCard;
if (data.hasNoUsedCard == 1) {
this.cmeCardModels = data.cmeCardModels[0] || {};
this.showBindCardTips = true;
}
});
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
idType: 1,
cardKey: cardKey,
cardType: this.project.cardType || 3,
goodsType: this.project.goodsType || 3,
channel: 1,
portalProjectId: this.projectId,
setEntry: true
};
_this.changeCardErrorMsg = "";
this.POST("cme/projectCard/bind", param).then(res => {
isInTips && (_this.showBindCardTips = false);
if (res.code == "000000") {
if(res.data == 0) {
if(isInTips) {
Toast(res.message);
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
_this.showChangeCard = false;
Toast("激活成功,开始学习");
_this.getProjectInfoById();
}
} else {
Toast(res.message);
}
}).catch( e => {
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 = {
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: this.project.cardType || 3,
cardTypeList: [ this.project.cardType || 3],
goodsType: this.project.goodsType,
};
param.setEntry = true;
this.POST("trade/goods/cardList_v2", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
this.subContent = `您已购买“${this.cardInfo.goodsName}”,是否使用此卡绑定并激活当前内容?一旦使用,不可更改或退回`
}
});
},
// 获取地理位置信息
getPositionData() {
// this.showLoading = true;
console.log("getPositionData");
rocNative.getPositionData({
__funcName: "__getPositionData"
});
},
confirm() {
console.log('new confirm');
this.$sendBuriedData({
component_tag: `882#88203`
});
// 直接传入职称考项目ID(projectId)
let projectId = this.projectId;
let pageUrl = getWebPageUrl(
`profexam/#/index?id=${projectId}&projectName=${this.project.projectName}&profexamProjectId=${projectId}`
);
let courseUrl = encodeURIComponent(pageUrl);
// sessionStorage.setItem("courseUrl", courseUrl);
let paramPageUrl = getWebPageUrl(`profexam/#/goods-detail?goodsId=${this.cardInfo.id}&projectId=${projectId}&courseUrl=${courseUrl}`);
let paramList = [
{
key: "pageUrl",
value: paramPageUrl,
type: 4,
seqNo: 1
}
]
this.$refs.tcPlayerRef && this.$refs.tcPlayerRef.pause();
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
// 跳转到原生的购买页面
confirmOld() {
this.$sendBuriedData({
component_tag: `882#88203`
});
let appVersion = this.userInfo.appVersion || "";
let appVersionNum = appVersion.split(".").join("");
if (appVersionNum < 344) {
Toast("请您下载新版本App");
return;
}
// 直接传入职称考项目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
});
},
// 首次进入考试时记录(点击‘我知道了’时调用)
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 => {
// _this.showLoading = false;
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;
} 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(() => {
console.log('in setTimeout 800');
_this.showLoading = false;
}, 800);
setTimeout(() => {
console.log('in setTimeout 200');
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);
// 请求成功后统计,获取项目名
this.$sendBuriedData({
component_tag: `882#88201#${_this.projectId}#${_this.project.projectName}`
});
// 如果 hasBindCard 为false,则获取卡信息 0:未绑卡 1:已绑卡
if (!_this.hasBindCard) {
_this.preJumper();
_this.hasNoUsedCardAction();
}
// 请求成功后统计,获取项目名
this.$sendBuriedData({
component_tag: `882#88201#${_this.projectId}#${_this.project.projectName}`
});
}
});
},
// 项目负责人--详情(收起)
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].status === 2) {
// list[i].portalModuleDTOS[j].value =
// "共" + list[i].portalModuleDTOS[j].nodeCount + "节";
// } else {
// list[i].portalModuleDTOS[j].value = "尚未开始";
// }
// list[i].portalModuleDTOS[j].disabled =
// list[i].portalModuleDTOS[j].status === 2 ? false : true;
//展开项记录
if (list[i].portalModuleDTOS[j].expandStatus == 1) {
actionList.push(list[i].portalModuleDTOS[j].expandKey);
}
for (
let z = 0;
z < list[i].portalModuleDTOS[j].contentList.length;
z++
) {
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 = []
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: "projectId",
value: this.projectId,
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="less" scoped>
.page-container-merge {
.nav-top .nav-title {
height: 0px;
// padding: 18px;
}
.banner-img {
display: inherit;
width: 375px;
height: 210px;
&-1 {
position: absolute;
left: 0;
top: 180px;
width: 76px;
height: 30px;
}
&-5 {
position: absolute;
left: 0;
top: 180px;
width: 76px;
height: 30px;
}
&-10 {
position: absolute;
left: 0;
top: 180px;
width: 76px;
height: 30px;
}
}
.list-container {
// margin-bottom: 40px;
.sk-btn-cover-new {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 210px;
z-index: 100;
text-align: center;
// background: #fff;
font-size: 13px;
// border-radius: 50%;
background: rgba(51, 51, 51, 0.8);
span {
display: inline-block;
margin-top: 82px;
width: 100px;
height: 36px;
line-height: 36px;
font-size: 15px;
font-weight: 700;
border-radius: 20px;
color: #fff;
background: #449284;
&.android {
padding-top: 2px;
}
}
}
}
.intro-catalogue-container {
.title {
height: 50px;
line-height: 30px;
padding: 0 15px;
border-bottom: 1px solid #f0f1f2;
span {
display: inline-block;
line-height: 15px;
font-size: 15px;
color: #979899;
padding-right: 35px;
}
span.focus {
position: relative;
color: #373839;
}
span.focus:after {
content: "";
position: absolute;
left: 9px;
bottom: -14px;
background: #449284;
// border-bottom: 1px solid #449284;
width: 10px;
height: 3px;
border-radius: 3px;
}
}
.title.fixed-title-1 {
position: fixed;
left: 0;
top: 60px;
background: #fff;
width: 100%;
z-index: 999;
}
.title.fixed-title-2 {
position: fixed;
left: 0;
top: 0px;
background: #fff;
width: 100%;
z-index: 999;
}
.catalogue-content {
padding: 0 15px;
.catalogue-title {
// display: flex;
// flex-direction: row;
// align-items: center;
// align-content: center;
margin-top: 5px;
// margin-bottom: 16px;
.c-title {
font-size: 18px;
color: #373839;
font-weight: 700;
}
.c-sub {
margin-left: -6px;
font-size: 12px;
color: #979899;
}
}
}
.fixed-flag-height {
height: 50px;
}
}
}
.no-more-bottom {
position: relative;
width: 100%;
height: 40px;
}
</style>
<template>
<div class="not-found">
<img class="img" src="~@/images/no-content.png" alt />
<p class="tip">{{tips}}</p>
<p class="tip-2">更多内容,请前往云鹊医APP学习</p>
</div>
</template>
<script>
export default {
data() {
return {
tips: "此课程已下架,无法查看",
fromPage: "2"
};
},
mounted() {
this.fromPage = this.$route.query.fromPage || '1'; // 1: 来处项目详情页; 2: 来处课程详情页
if(this.fromPage == 2) {
this.tips = "此项目已下架, 无法查看";
}
},
methods: {}
};
</script>
<style lang="less" scoped>
.not-found {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;
.img {
width: 120px;
}
.tip {
font-size: 18px;
font-weight: 700;
color: #373839;
text-align: center;
padding: 0 15px;
}
.tip-2 {
margin-top: 12px;
font-size: 14px;
font-weight: 400;
color: #676869;
text-align: center;
padding: 0 15px;
}
}
</style>
<template>
<div class="purchase-wrapper">
<img v-show="isCorrect" class="status-img" src="../images/puchase/correct.png" />
<img v-show="!isCorrect" class="status-img" src="../images/puchase/warning.png" />
<div class="msg-content-wrapper">
<p class="msg-content" v-html="msgContent"></p>
<!-- 直接从商品过来的 -->
<p v-if="!projectId" class="msg-content-2">订单详情页打开/下载云鹊医APP查看</p>
</div>
<Button v-show="projectId" @handlerClick="gotoProject"></Button>
<Button v-if="!projectId" :isPlain="!!projectId" buttonText="去云鹊医APP" @handlerClick="download"></Button>
<CourseDialog
subContent='请在微信内完成支付,如果您已支付成功,请点击“已完成支付”按钮'
confirmBtnText="已完成支付"
needSubContent
:isShowDialog="isShowDialog"
@handlerAction="handlerAction"
></CourseDialog>
<van-overlay :show="loading" @click="show = false" class="v-overlay">
<div class="loading-wrapper" >
<van-loading type="spinner" />
<p class="text">{{projectId ? '课程解锁中' : '正在交易中'}} {{loadingTimes}}s</p>
</div>
</van-overlay>
</div>
</template>
<script>
import { getWebPageUrl, getCookie } from "@/utils/index";
import CourseDialog from "@/components/course/course-dialog";
import Button from "@/components/business/button"
let intervalId = null;
export default {
components: {
Button,
CourseDialog
},
data() {
return {
projectId: 1,
orderId: '1595497912391728990',
htmlTitle: "支付结果",
isCorrect: true,
// msgContent: "此项目已被其他学习卡绑定,您可以去绑定新的项目,或去云鹊医APP查看订单详情",
msgContent: "已解锁,您可返回项目继续学习",
loading: true,
loadingTimes: 3,
// 返回值data:0:订单进行中 1:支付并绑定成功 2:订单反馈延时,请稍后再试 3:支付失败,请重新购买 4:订单已被取消,请重新购买
bindStatus: 0,
showGoApp: true,
hasShowed: false,
isShowDialog: false,
returnUrl: "",
}
},
created() {
let { projectId, orderId } = this.$route.query;
this.projectId = projectId || 0;
this.orderId = orderId || 0;
this.returnUrl = localStorage.getItem('returnUrl');
console.log('projectId', 'orderId', this.projectId, this.orderId, this.returnUrl);
// 直接从商品过来的
// if(!this.projectId) {
// this.msgContent = "购买成功";
// }
// 等待
intervalId = setInterval( () => {
if(this.loadingTimes <= 0) {
intervalId && clearInterval(intervalId);
// 从项目购买过来的
if(this.projectId) {
this.getBindCardStatus();
// 直接从商品过来的
} else {
this.getStatusByOrderId();
}
} else {
this.loadingTimes -= 1;
}
}, 1000)
},
mounted() {
document.title = this.htmlTitle;
},
methods: {
// 弹框:手动点击“已完成支付”
handlerAction(type) {
this.isShowDialog = false;
if(type == 1) {
// if(this.projectId) {
// this.gotoProject();
// } else {
// this.download();
// }
} else {
if(this.projectId) {
this.getBindCardStatus();
} else {
this.getStatusByOrderId();
}
}
},
// 查询一次绑卡状态
getBindCardStatus() {
let _this = this;
let param = {
projectId: this.projectId,
orderId: this.orderId,
setEntry: true
};
this.GET(`cme/projectCard/status/1/${this.projectId}/${this.orderId}`, param).then(({ data }) => {
this.loading = false;
this.bindStatus = data;
// 绑定成功
if( data == 1 ) {
this.msgContent = "已解锁,您可返回项目继续学习";
this.isCorrect = true;
} else {
if(!this.hasShowed) {
this.hasShowed = true;
this.isShowDialog = true;
}
this.msgContent = "解锁延时,您可返回项目继续学习";
this.isCorrect = false;
}
}).catch( e => {
this.loading = false;
this.msgContent = "解锁延时,您可返回项目继续学习";
this.isCorrect = false;
console.log("getBindCardStatus", "调用失败...");
});
},
// 直接根据订单ID获取订单状态
getStatusByOrderId() {
let _this = this;
let param = {
orderId: this.orderId,
};
this.GET(`trade/center/order/query`, param).then(({ data }) => {
this.loading = false;
this.msgContent = "购买失败";
this.isCorrect = false;
// 订单状态: 订单状态:1待支付, 2支付中, 3支付失败, 4订单超时, 5支付成功, 6交易完成, 7交易关闭
if( data.orderDto.status == 6 ) {
this.msgContent = "购买成功";
this.isCorrect = true;
} else {
if(!this.hasShowed) {
this.hasShowed = true;
this.isShowDialog = true;
}
}
}).catch( e => {
this.loading = false;
this.msgContent = "订单反馈延时,请前往云鹊医APP查看订单详情";
this.isCorrect = false;
console.log("getStatusByOrderId", "调用失败...");
});
},
// 返回到项目详情页面
gotoProject() {
this.$sendBuriedData({
component_tag: `889#88901`
});
this.returnUrl && location.replace(this.returnUrl);
},
// 下载
download() {
this.$sendBuriedData({
component_tag: `889#88902`
});
window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
}
},
}
</script>
<style lang="less" scoped>
.purchase-wrapper {
padding-top: 60px;
// display: flex;
// flex-direction: column;
text-align: center;
.status-img {
width: 60px;
height: 60px;
}
.msg-content-wrapper {
margin-bottom: 30px;
.msg-content {
margin: 0 20px 10px;
color: #48494A;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
}
.msg-content-2 {
color: #676869;
font-size: 14px;
}
}
.v-overlay {
background-color: #fff;
padding-top: 200px;
.loading-wrapper {
text-align: center;
.text {
margin-top: 12px;
color: #A1A2A3;
font-size: 14px;
}
}
}
}
</style>
\ No newline at end of file
<template>
<div class="question-bank-wrap">
<CommonNavbar
ref="navBarCom"
:bgColor="bgColor"
v-if="isShowNavbar"
:title="navTitle"
:isFixNavbar="isFixNavbar"
borderStyle="1px solid #fff"
></CommonNavbar>
<DirectoryInfo
:directoryInfo="directoryInfo"
@handlerBook="handlerBook"
></DirectoryInfo>
<div class="question-bank-content" :class="!isWeb ? 'add-padding' : ''">
<div class="question-intro" v-if="directoryInfo.directoryImageUrl || directoryInfo.directoryIntro">
<img v-if="directoryInfo.directoryImageUrl" :src="directoryInfo.directoryImageUrl">
<p v-if="directoryInfo.directoryIntro">{{directoryInfo.directoryIntro}}</p>
</div>
<div class="course-list" v-if="subDirectoryModelList && subDirectoryModelList.length > 0">
<p class="title"><span class="line"></span>考点</p>
<div class="course-item" v-for="(item, index) in subDirectoryModelList" :key="index">
<div class="left-c">
<p class="title-c">{{item.directoryName}}</p>
<p class="join-c" v-if="!bindStatus">{{item.sumTitle}}题 | {{item.joinUserNum}}人已参与</p>
<div class="progress-course" v-else>
<div class="progress-w"><van-progress :percentage="item.finishedRatio" :stroke-width="6" color="#449284" :show-pivot="false"/></div>
<span class="mg-set">{{item.finishedRatio}}%</span><span>{{item.sumTitle}}</span>
</div>
</div>
<div class="right-btn">
<span v-if="!bindStatus && (item.freeFlag == 0)" @click="goStudy(item, '开始练习')">开始练习</span>
<span v-if="!bindStatus && (item.freeFlag == 1) && (item.freePractice > 0)" @click="goStudy(item, '免费练习')">免费练习</span>
<p v-if="!bindStatus && (item.freeFlag == 1) && (item.freePractice > 0)">可练习{{item.freePractice}}</p>
<img v-if="!bindStatus && (item.freeFlag == 1) && (item.freePractice == 0)" src="../images/question/lock.png" @click="unlockHand">
<span v-if="bindStatus == 1" @click="goStudy(item, setTxt(item.finishedRatio))">{{setTxt(item.finishedRatio)}}</span>
</div>
</div>
</div>
</div>
<BindCardButton
v-if="!bindStatus"
:cardInfo="cardInfo"
desc="激活或购买后可做题"
@changeClick="changeClick"
@gotoBuy="confirm"
></BindCardButton>
<ChangeCard
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="beforeChangeCardAction">
</ChangeCard>
<CourseDialog
:subContent="subContent"
confirmBtnText="激活"
needSubContent
:isShowDialog="showBindCardTips"
@handlerAction="handlerAction"
></CourseDialog>
<Loading v-show="showLoading" />
</div>
</template>
<script>
import CommonNavbar from "@/components/common/common-navbar";
import BindCardButton from "@/components/cme/bind-card-button";
import ChangeCard from "@/components/cme/change-card";
import CourseDialog from "@/components/course/course-dialog";
import Loading from "@/components/common/common-loading";
import DirectoryInfo from "@/components/question/directory-info";
import {Progress, Toast} from 'vant';
import { mapGetters, mapActions } from "vuex";
import { getWebPageUrl } from "@/utils/index";
export default {
components: {
CommonNavbar,
BindCardButton,
ChangeCard,
Progress,
CourseDialog,
Loading,
DirectoryInfo
},
data() {
return {
token: '',
isWeb: window.__isWeb,
isInfresh: false,
bgColor: "#fff",
isShowNavbar: true,
navTitle: '',
isFixNavbar: false,
secondSubjectId: null,
directoryInfo: {
finishedNum: 0,
wrongTitle: 0,
correctRatio: 0,
},
subDirectoryModelList: [],
userId: null,
bindStatus: 0,
cardInfo: {
id: 0
},
subContent: '',
cmeCardModels: {},
showBindCardTips: false,
showChangeCard: false,
changeCardErrorMsg: "",
hasNoUsedCard: false,
showLoading: false
}
},
created() {
let _this = this;
_this.secondSubjectId = _this.$route.query.secondSubjectId || 106;
window.__getUserInfoQB = function(param) {
console.log("__getUserInfoQB", param);
_this.token = param.userToken;
_this.userMobile = param.userMobile;
_this.setUserInfo(param);
_this.initData();
};
_this.getUserInfo();
if (_this.isWeb) {
_this.initData();
}
window.__refresh = function() {
_this.isInfresh = true;
_this.getUserInfo();
};
window.__getPositionData = function(param) {
console.log(param);
// _this.showLoading = false;
param.setEntry = true;
_this.getProvinceIdByPosition(param);
};
},
mounted() {},
computed: {
...mapGetters(["userInfo"]),
setTxt() {
let txt = '';
return function (val) {
if (val == 0) {
txt = '开始练习';
}else if (val == 100) {
txt = '重新练习';
}else {
txt = '继续练习';
}
return txt;
}
},
},
methods: {
...mapActions(["setUserInfo"]),
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfoQB"
});
},
initData() {
let param = {
token: this.token,
setEntry: true
};
this.showLoading = true;
this.GET(`portal/titleTest/user/getBrushTitleInfo/${this.secondSubjectId}`, param).then(res => {
if (res.code == "000000") {
this.directoryInfo = JSON.parse(JSON.stringify(res.data));
const { subDirectoryModelList, userId, cardType, goodsType, organizationId, provinceId, bindStatus, firstSubjectCodeName, secondSubjectName, secondSubjectCode } = this.directoryInfo;
this.subDirectoryModelList = subDirectoryModelList;
this.userId = userId;
this.bindStatus = bindStatus;
this.navTitle = `${secondSubjectName}${secondSubjectCode}`;
// this.navTitle = `${firstSubjectCodeName}-${secondSubjectName}${secondSubjectCode}`;
setTimeout(() => {
this.showLoading = false;
}, 100);
//获取底部卡信息
// 如果 bindStatus 为false,则获取卡信息 0:未绑卡 1:已绑卡
if (!this.bindStatus) {
this.preJumper();
// 查询有无已买未激活的卡
this.hasNoUsedCardAction();
}
} else {
this.$toast(res.message);
}
});
},
// token是否失效校验
checkToken() {
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 {
rocNative.gotoLogin();
}
this.isInfresh = false;
}else {
}
});
},
// 跳转前判断是否有机构,否则使用定位信息
preJumper() {
// TODO 测试代码
if (window.__isWeb) {
this.getCardInfoByProvinceId(310);
} else {
if (this.directoryInfo.organizationId != 0 && this.directoryInfo.provinceId != 0) {
this.getCardInfoByProvinceId(this.directoryInfo.provinceId);
} else {
this.getPositionData();
}
}
},
// 根据省ID,获取学习卡信息
getCardInfoByProvinceId(provinceId) {
let param = {
area: provinceId + "",
cardType: this.directoryInfo.cardType || 3,
cardTypeList: [ this.directoryInfo.cardType || 3],
goodsType: this.directoryInfo.goodsType,
};
param.setEntry = true;
this.POST("trade/goods/cardList_v2", param).then(res => {
if (res.code == "000000") {
// this.showLoading = false;
this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
this.subContent = `您已购买“${this.cardInfo.goodsName}”,是否使用此卡绑定并激活当前内容?一旦使用,不可更改或退回`
}
});
},
// 获取地理位置信息
getPositionData() {
// this.showLoading = true;
console.log("getPositionData");
rocNative.getPositionData({
__funcName: "__getPositionData"
});
},
// 根据位置信息获取省ID
getProvinceIdByPosition(param) {
param.setEntry = true;
this.POST("aggregate/cme/convertLocationToProvinceId", param)
.then(res => {
if (res.code == "000000") {
this.getCardInfoByProvinceId(res.data);
}
}
);
},
// 查询是否买过类似的卡,但还没有绑定激活
hasNoUsedCardAction() {
let param = {
setEntry: true
};
this.GET(`cme/projectCard/queryNoUsedCard/${this.directoryInfo.goodsType}/${this.directoryInfo.cardType}`, param).then(({ data }) => {
//hasNoUsedCard是否有购买未使用的学习卡:1有,0没有
this.hasNoUsedCard = data.hasNoUsedCard;
if (data.hasNoUsedCard == 1) {
this.cmeCardModels = data.cmeCardModels[0] || {};
this.showBindCardTips = true;
}
});
},
// 处理提示信息框
handlerAction(type) {
if(type == 1) {
this.$sendBuriedData({
component_tag: `885#88518`
});
this.showBindCardTips = false;
} else {
this.$sendBuriedData({
component_tag: `885#88519`
});
this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
}
},
//错题集或收藏夹
handlerBook(val) {
let commitKind = null,currentTitle = '';
if (val == 1) {
commitKind = 1;
currentTitle = '错题集';
this.$sendBuriedData({
component_tag: `885#88501`
});
}else if (val == 2) {
commitKind = 2;
currentTitle = '收藏';
this.$sendBuriedData({
component_tag: `885#88502`
});
}
this.checkTokenForNative(() => {
this.$router.push({
path: '/question-detail',
query: {
directoryId: 0,
secondSubjectId: this.secondSubjectId,
cardType: this.directoryInfo.cardType,
goodsType : this.directoryInfo.goodsType,
commitKind : commitKind,
freeFlag: 1,
currentTitle: currentTitle,
seqNo: 0,
cardId: this.cardInfo.id,
}
})
});
},
//去激活
changeClick() {
this.checkTokenForNative(() => {
this.showChangeCard = true;
});
this.$sendBuriedData({
component_tag: `885#88516`
});
},
//去购买操作-先校验登录
confirm() {
this.checkTokenForNative(() => {
this.confirmGoBuy();
})
this.$sendBuriedData({
component_tag: `885#88517`
});
},
// 新购买方法
confirmGoBuy() {
console.log('new confirm');
this.$sendBuriedData({
component_tag: `882#88203`
});
let pageUrl = getWebPageUrl(
`profexam/#/question-bank?id=${this.secondSubjectId}&secondSubjectId=${this.secondSubjectId}`
);
let courseUrl = encodeURIComponent(pageUrl);
let paramPageUrl = getWebPageUrl(`profexam/#/goods-detail?goodsId=${this.cardInfo.id}&projectId=${this.secondSubjectId}&courseUrl=${courseUrl}`);
let paramList = [
{
key: "pageUrl",
value: paramPageUrl,
type: 4,
seqNo: 1
}
]
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
// 原原生购买方法
confirmGoBuyOld() {
let appVersion = this.userInfo.appVersion || "";
let appVersionNum = appVersion.split(".").join("");
if (appVersionNum < 344) {
this.$toast("请您下载新版本App");
return;
}
// 直接传入职称考项目ID(projectId)
let pageUrl = getWebPageUrl(
`/profexam/#/question-bank?id=${this.secondSubjectId}&secondSubjectId=${this.secondSubjectId}`
);
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.studycard.StudyCardDetailActivity###PicaDo.LearningCardVC",
type: 4,
seqNo: 1
},
{
key: "goodId",
value: this.cardInfo.id,
type: 4,
seqNo: 1
},
{
key: "courseUrl",
value: encodeURIComponent(pageUrl),
// value: projectId,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
//确认激活操作-先校验登录
beforeChangeCardAction(cardKey, isInTips) {
this.checkTokenForNative(() => {
this.changeCardAction(cardKey, isInTips);
});
},
changeCardAction(cardKey, isInTips) {
let param = {
idType: 2,
cardKey: cardKey,
cardType: this.directoryInfo.cardType,
goodsType: this.directoryInfo.goodsType,
channel: 1,
portalProjectId: this.secondSubjectId,
setEntry: true
};
this.changeCardErrorMsg = "";
this.POST("cme/projectCard/bind", param).then(res => {
isInTips && (this.showBindCardTips = false);
if (res.code == "000000") {
if(res.data == 0) {
if(isInTips) {
Toast(res.message);
} else {
this.changeCardErrorMsg = "请输入正确的激活码";
}
} else {
this.showChangeCard = false;
Toast("激活成功,开始学习");
this.initData();
}
} else {
Toast(res.message);
}
}).catch( e => {
console.log('in catch', isInTips);
if(isInTips) {
Toast("无效的激活码");
this.showBindCardTips = false;
} else {
this.changeCardErrorMsg = "请输入正确的激活码";
}
});
},
//关闭激活弹层
cancleChangeCard() {
this.showChangeCard = false;
},
//各种练习
goStudy(obj, btnText) {
this.checkTokenForNative(() => {
this.$router.push({
path: '/question-detail',
query: {
directoryId: obj.directoryId,
secondSubjectId: this.secondSubjectId,
cardType: this.directoryInfo.cardType,
goodsType : this.directoryInfo.goodsType,
commitKind : 3,
freeFlag: obj.freeFlag,
currentTitle: obj.directoryName,
seqNo: obj.seqNo,
cardId: this.cardInfo.id,
}
})
});
let sPoint = ""
if(btnText === "免费练习" || btnText === "开始练习") {
sPoint = "88503";
} else if(btnText === "继续练习") {
sPoint = "88504";
} else if(btnText === "重新练习") {
sPoint = "88505";
}
if(sPoint) {
this.$sendBuriedData({
component_tag: `885#${sPoint}#${obj.directoryId}#${obj.directoryName}`
});
}
},
//解锁
unlockHand() {
this.$toast('购买后可练习');
this.$sendBuriedData({
component_tag: `885#88515`
});
},
},
}
</script>
<style lang="less" scoped>
.question-bank-wrap{
background-color: #FFFFFF;
width: 100%;
padding-bottom: 60px;
box-sizing: border-box;
.question-bank-content{
padding: 126px 16px 0;
box-sizing: border-box;
position: relative;
&.add-padding{
padding-top: 135px;
}
.question-intro{
margin-top: 15px;
background-color: #FFFFFF;
box-sizing: border-box;
box-shadow: 0 1px 12px 0 rgba(0, 0, 0, 0.05);
border-radius: 12px;
img{
width: 100%;
border-radius: 6px 6px 0 0;
display: block;
max-height: 80px;
}
p{
color: #676869;
font-size: 12px;
line-height: 18px;
padding: 12px;
/*&:first-child{
margin-top: 12px;
}*/
}
}
.course-list{
margin-top: 30px;
.title{
font-size: 18px;
line-height: 22px;
color: #373839;
.line{
display: inline-block;
width: 3px;
height: 15px;
background-color: #F68367;
border-radius: 1.5px;
margin-right: 8px;
margin-bottom: -1px;
}
}
.course-item{
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E7E8E9;
.left-c{
/*flex: 1;*/
width: 230px;
.title-c{
font-size: 15px;
color: #333333;
font-weight: 700;
line-height: 22px;
}
.join-c{
font-size: 12px;
color: #979899;
line-height: 14px;
margin-top: 7px;
}
.progress-course{
margin-top: 8px;
font-size: 12px;
color: #979899;
display: flex;
align-items: center;
.progress-w{
width: 100px;
}
.mg-set{
margin-left: 6px;
margin-right: 10px;
}
}
}
.right-btn{
display: flex;
flex-direction: column;
align-items: center;
span{
display: inline-block;
height: 25px;
line-height: 23px;
padding: 0 10px;
color: #449284;
border: 1px solid #449284;
border-radius: 15px;
font-size: 12px;
font-weight: 700;
box-sizing: border-box;
}
img{
width: 15px;
height: 15px;
margin-right: 22.5px;
}
p {
margin-top: 4px;
font-size: 12px;
color: #CAA861;
}
}
}
}
}
}
</style>
<template>
<section class="question-detail-wrapper" :style="{'position': needFixed ? 'fixed': 'static'}">
<question-header
:title="currentTitle"
:order="currentQuestion.titleNo"
:total="titleConfig.totalCount"
></question-header>
<article class="body">
<question-content ref="questionContentRef" v-show="questionList.length"></question-content>
<no-content v-show="!questionList.length" :commitKind="commitKind"></no-content>
</article>
<free-tips v-show="showFreeTips" :total="titleConfig.totalCount" @buyCard="buyCard(2)"></free-tips>
<question-footer v-show="questionList.length" @statistics="statistics" @scrollTop="scrollTop" @pageQuestion="pageQuestion"></question-footer>
<ExperienceDialog
:showDialog="experienceDialog"
:statisConfig="statisConfig"
@activeCard="activeCard"
@buyCard="buyCard(1)"
@close="closeExpDialog"
></ExperienceDialog>
<!-- 去激活 -->
<ChangeCard
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="beforeChangeCardAction"
></ChangeCard>
<Loading v-show="showLoading" />
<div class="pt-70" :class="{'pt-110': showFreeTips}"></div>
</section>
</template>
<script>
import QuestionHeader from "@/components/question/question-header";
import QuestionContent from "@/components/question/question-content";
import QuestionFooter from "@/components/question/question-footer";
import noContent from "@/components/question/no-content";
import ExperienceDialog from "@/components/question/experience-dialog";
import FreeTips from "@/components/question/free-tips";
import Loading from "@/components/common/common-loading";
import CourseDialog from "@/components/course/course-dialog";
import ChangeCard from "@/components/cme/change-card";
import { mapGetters, mapActions } from "vuex";
import { Toast } from "vant";
import { findQuestionIndexNo, contactArray, getWebPageUrl } from "@/utils";
let titleArray = ["", "错题集", "收藏夹", "题库"];
export default {
components: {
QuestionHeader,
QuestionContent,
QuestionFooter,
noContent,
ExperienceDialog,
Loading,
CourseDialog,
ChangeCard,
FreeTips
},
data() {
return {
token: "",
directoryId: "",
cardType: 3,
goodsType: 3,
currentTitle: "试题集",
commitKind: 1, // 答题来源 1:错题集 2:收藏 3:题库
experienceDialog: false, // 体验结束弹框
showChangeCard: false, //是否展示激活弹框,
changeCardErrorMsg: "",
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 3,
orderId: 0
},
subContent: "",
showLoading: false,
cardInfo: {
id: 0
},
queryParams: {
commitKind: 3, // 答题来源 1:错题集 2:收藏 3:题库
directoryId: 1748, // 题库ID,获取错题集或收藏时传0
secondSubjectId: 106, // 二级学科分类ID:用于判断学科下目录免费题数
titleNo: 0, // 起始或结束题目ID,首次进入页面时传0,系统自动定位到上次做的题
pageFlag: 0, // 翻页标记:0往前翻页 1往后翻页
pageSize: 5, // 每页大小
seqNo: 1,
},
statisConfig: {
rightNum: 0,
errorNum: 0,
rate: 0
}
};
},
computed: {
...mapGetters([
"userInfo",
"questionList",
"currentQuestion",
"totalCount",
"commonConfig",
"titleConfig"
]),
needFixed() {
return (
this.experienceDialog || this.showChangeCard
);
},
showFreeTips() {
return this.commonConfig.freeFlag == 1 && this.commitKind == 3 && !this.titleConfig.bindStatus
}
},
created() {
let _this = this;
this.directoryId = this.$route.query.directoryId || 1748; // 题库ID,获取错题集或收藏时传0
this.secondSubjectId = this.$route.query.secondSubjectId || 106; // 学科id
this.cardId = this.$route.query.cardId || 3;
this.cardType = this.$route.query.cardType || 3; // 卡类型
this.goodsType = this.$route.query.goodsType || 3; // 商品类型
this.commitKind = this.$route.query.commitKind || 3; // 答题来源 1:错题集 2:收藏 3:题库
this.freeFlag = this.$route.query.freeFlag || 0; // 0: 免费; 1: 收费;
this.currentTitle = this.$route.query.currentTitle || this.currentTitle; // 顶部导航文案
if(this.commitKind == 3) {
titleArray[3] = this.currentTitle;
}
this.queryParams.commitKind = this.commitKind;
this.queryParams.directoryId = this.directoryId;
this.queryParams.secondSubjectId = this.secondSubjectId;
this.queryParams.seqNo = this.$route.query.seqNo || 0;
window.__getUserInfoForQD = function(param) {
_this.token = param.userToken;
_this.setUserInfo(param);
_this.init();
};
if (__isWeb) {
_this.init();
} else {
this.getUserInfo();
}
window.__refresh = function() {
// _this.isInfresh = true;
_this.getUserInfo();
};
},
methods: {
...mapActions(["setUserInfo", "handlerQuestionList"]),
init() {
this.currentTitle = titleArray[this.commitKind] || "习题集";
this.$store.commit("SET_COMMON_CONIFG", {
// 0: 免费; 1: 收费; 没有绑卡且是收费题库(bindStatus == 0 && freeFlag == 1)可以走免费体验流程
freeFlag: this.freeFlag,
directoryId: this.directoryId,
secondSubjectId: this.secondSubjectId,
cardType: this.cardType,
goodsType: this.goodsType,
commitKind: this.commitKind // 答题来源 1:错题集 2:收藏 3:题库
});
this.getPractiseTitles(true);
},
// 开始翻页
pageQuestion(pageFlag, titleNo) {
this.queryParams.pageFlag = pageFlag;
this.queryParams.titleNo = titleNo;
this.getPractiseTitles();
},
// 统计当前信息
statistics() {
// 如果是收费的题库(不是错题集或收载),并且没有绑定卡
console.log(this.commonConfig.freeFlag, this.commitKind == 3, !this.titleConfig.bindStatus);
if(!this.showFreeTips) {
Toast("已是最后一题");
return;
}
let rightNum = 0,
errorNum = 0,
rate = 0;
this.questionList.forEach(item => {
if (item.commitFlag) {
if(item.myAnswer == item.answer) {
rightNum ++;
} else {
errorNum ++;
}
}
});
console.log();
if((rightNum + errorNum) > 0) {
rate = (rightNum * 100 / (rightNum + errorNum)).toFixed(0);
this.statisConfig = {
rightNum,
errorNum,
rate
}
}
this.experienceDialog = true;
},
//获取用户信息
getUserInfo() {
rocNative.getUserInfo({
__funcName: "__getUserInfoForQD"
});
},
// 去激活(体验完弹窗-打开激活弹框)
activeCard() {
this.$sendBuriedData({
component_tag: `886#88606`
});
this.checkTokenForNative(() => {
this.experienceDialog = false;
this.showChangeCard = true;
});
},
// 去购买(体验完弹窗-跳转到购买页面)
buyCard(type) {
console.log("in buyCard", type);
this.checkTokenForNative(() => {
this.confirmGoBuy();
});
if(type == 1) {
this.$sendBuriedData({
component_tag: `886#88607`
});
} else if(type == 2) {
this.$sendBuriedData({
component_tag: `886#88609`
});
}
},
// 新购买方法
confirmGoBuy() {
console.log('new confirm');
this.$sendBuriedData({
component_tag: `882#88203`
});
let pageUrl = getWebPageUrl(
`profexam/#/question-bank?id=${this.secondSubjectId}&secondSubjectId=${this.secondSubjectId}`
);
let courseUrl = encodeURIComponent(pageUrl);
let paramPageUrl = getWebPageUrl(`profexam/#/goods-detail?goodsId=${this.cardId}&projectId=${this.secondSubjectId}&courseUrl=${courseUrl}`);
let paramList = [
{
key: "pageUrl",
value: paramPageUrl,
type: 4,
seqNo: 1
}
]
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
// 跳转到(原生)购买页面
confirmGoBuyOld() {
let appVersion = this.userInfo.appVersion || "";
let appVersionNum = appVersion.split(".").join("");
if (appVersionNum < 344) {
this.$toast("请您下载新版本App");
return;
}
this.experienceDialog = false;
// 直接传入学科ID(secondSubjectId)
let pageUrl = getWebPageUrl(
`/profexam/#/question-bank?id=${this.secondSubjectId}&secondSubjectId=${this.secondSubjectId}`
);
let paramList = [
{
key: "className",
value:
"com.picahealth.yunque.activitys.studycard.StudyCardDetailActivity###PicaDo.LearningCardVC",
type: 4,
seqNo: 1
},
{
key: "goodId",
value: this.cardId,
type: 4,
seqNo: 1
},
{
key: "courseUrl",
value: encodeURIComponent(pageUrl),
// value: projectId,
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 关闭体验完弹窗
closeExpDialog() {
this.experienceDialog = false;
this.$sendBuriedData({
component_tag: `886#88608`
});
},
// 关闭激活弹框
cancleChangeCard() {
this.showChangeCard = false;
},
// 激活前
beforeChangeCardAction(cardKey) {
this.checkTokenForNative(() => {
this.changeCardAction(cardKey);
});
},
// 分页获取题目(前、后翻页)
getPractiseTitles(isFirst) {
if(isFirst) {
this.$store.commit("SET_QUESTION_LIST", []);
}
isFirst && (this.showLoading = true);
this.queryParams.token = this.userInfo.userToken || this.token;
this.queryParams.setEntry = true;
this.GET(`portal/titleTest/practise/titles`, this.queryParams).then(({ data }) => {
this.currentTitleNo = data.currentTitleNo;
data.isFirst = isFirst;
this.handlerQuestionList(data);
setTimeout(() => {
this.showLoading = false;
}, 100);
});
},
// 处理返回的数据,并存储到store中
handlerPractiseData(questionList) {
let handlerList = [],
question,
option,
optionList = [],
myAnswer = "",
answer = "";
questionList.forEach((item, index) => {
question = JSON.parse(JSON.stringify(item));
question.isAnalyzed = false;
option = {};
optionList = [];
question.options.forEach((text, i) => {
option.isCorrect = false;
option.isSelected = false;
option.text = text;
optionList.push(JSON.parse(JSON.stringify(option)));
});
question.options = optionList;
console.log("handlerList", index);
handlerList.push(question);
});
console.log("in handlerList", handlerList);
let cIndex = findQuestionIndexNo(
handlerList,
"titleNo",
this.currentTitleNo
);
this.$store.commit("SET_CURRENT_QUESTION", handlerList[cIndex]);
this.$store.commit("SET_QUESTION_LIST", handlerList);
},
// 激活Action 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey) {
let _this = this;
let param = {
idType: 2,
cardKey: cardKey,
cardType: this.cardType || 3,
goodsType: this.goodsType || 3,
channel: 1,
portalProjectId: this.directoryId,
setEntry: true
};
_this.changeCardErrorMsg = "";
this.POST("cme/projectCard/bind", param)
.then(res => {
if (res.code == "000000") {
if (!res.data) {
_this.changeCardErrorMsg = "请输入正确的激活码";
} else {
_this.showChangeCard = false;
Toast("激活成功,开始练习");
// 重新获取题库内容(从头开始)
_this.init();
}
} else {
Toast(res.message);
}
})
.catch(e => {
_this.changeCardErrorMsg = "请输入正确的激活码";
});
},
// 滚动到最上面
scrollTop() {
console.log("in scrollTop");
window.scrollTo(0, 2000);
}
}
};
</script>
<style lang="less" scoped>
.question-detail-wrapper {
padding-top: 68px;
.pt-70 {
padding-bottom: 70px;
}
.pt-110 {
padding-bottom: 110px;
}
}
</style>
\ No newline at end of file
<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视频 -->
<div class="video-box" v-if="bannerType == 2">
<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"
/>
</div>
<!-- 播放结束,下载App -->
<div class="cover" v-if="logged && coverType === 2">
<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"
/>
</div>
</pica-video>
</div>
<!-- <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>
<DownloadButton v-if="showDownloadButton"></DownloadButton>
</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>
<CellListDetailShare
:projectComponent="projectComponentDTOS"
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"
:hasBindCard="hasBindCard"
:limitTimes="limitTimes"
:logged="logged"
:projectId="projectId"
:goodsId="cardInfo.id"
/>
</div>
</div>
<!-- <CommonAdertImg needPadTop :advertInfoList="advertInfoList" position="1" /> -->
<NoMoreContent />
<div v-if="detailNum <= 9" class="no-more-bottom"></div>
</div>
<div v-if="!hasBindCard" style="padding-top: 60px"></div>
<!-- <div v-if="!hasBindCard && !isWeb" style="padding-top: 30px"></div> -->
<BindCardButton
v-if="!hasBindCard"
:cardInfo="cardInfo"
@changeClick="changeClick"
@gotoBuy="confirm"
></BindCardButton>
<!-- <BindCardButtonShare
v-if="!hasBindCard"
:cardInfo="cardInfo"
@changeClick="changeClick"
@gotoBuy="confirm"
></BindCardButtonShare>-->
<!--去激活-->
<ChangeCard
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="beforeChangeCardAction"
></ChangeCard>
<Loading v-show="showLoading" />
<!-- 主动提示:激活并去学习 -->
<CourseDialog
:subContent="subContent"
confirmBtnText="激活"
needSubContent
:isShowDialog="showBindCardTips"
@handlerAction="handlerAction"
></CourseDialog>
</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 CellListDetailShare from "@/components/business/cell-list-detail-share";
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 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 { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter";
import { Toast } from "vant";
import BindCardButton from "@/components/cme/bind-card-button";
// import BindCardButtonShare from "@/components/cme/bind-card-button-share";
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";
let cataOffsetTop = 0;
let intorOffsetTop = 0;
let titleOffsetHeight = 50;
export default {
data() {
return {
coverType: 0,
downloadTips: "打开云鹊医APP",
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: 2, // 1 图片 2视频
videoOptions: {
mp4: "",
autoplay: false, //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,
needShort: false,
showDownloadButton: false,
uuid: "",
token: "",
shareUrl: "",
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 3,
orderId: 0
},
subContent: "",
hasNoUsedCard: false,
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CellListDetailShare,
Loading,
BasicInfo,
LearnKnow,
ItemIntro,
ItemLeader,
TeacterIntro,
CourseDialog,
ExjumperButton,
// CommonAdertImg,
NoMoreContent,
BindCardButton,
// BindCardButtonShare,
ChangeCard,
CourseCovers,
DownloadButton,
PicaVideo
},
computed: {
...mapGetters(["userInfo", "logged"])
},
created() {
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) {
this.uuid = href.substr(uuidIndex + 5, 32);
} else {
this.uuid = "07F9625472D6444EBAE4BF7D2EF83BC4";
}
this.shareUrl = location.href;
if (href.indexOf("singlemessage") >= 0 || href.indexOf("wx_code") >= 0) {
this.shareUrl = getWebPageUrl(`profexam/#/sharecoop?uuid=${this.uuid}`);
location.replace(this.shareUrl);
}
localStorage.setItem('returnUrl', this.shareUrl);
const { token, info } = this.$store.state.user;
this.token = token || localStorage.getItem('couponToken') || getCookie("couponToken");
// 如果有token,但没有用户信息,则获取用户信息
if (this.token && !info.id) {
this.commonCheckToken(() => {
this.$store.dispatch("getUserInfo");
});
}
this.queryByUuid(this.uuid);
// 调用广告位接口
// this.getAdvertInfoList();
},
mounted() {
window.addEventListener("scroll", this.scrollFun);
},
beforeDestroyed() {
window.removeEventListener("scroll", this.scrollFun);
},
methods: {
...mapActions(["setUserInfo", "goLogin"]),
beforeGoLogin() {
this.$sendBuriedData({
component_tag: `882#88211`
});
this.goLogin();
},
// 解析uuid
queryByUuid(uuid) {
let param = {
uuid: uuid
};
this.GET(`portal/shareParam/queryByUuid`, param).then(res => {
if (res.code == "000000") {
this.shareParam = JSON.parse(res.data || "{}");
this.projectId = this.shareParam.projectId || 812; // 797 812
this.getProjectInfoById();
console.log("queryByUuid", res);
}
});
},
// 视频播放结束
onVideoEnd(opt) {
if (opt.type === 1) {
this.coverType = 2;
} else if (opt.type === 2) {
// 试看结束
this.coverType = 1;
}
},
onReplay() {
this.coverType = 0;
},
btnClick1() {
this.$sendBuriedData({
component_tag: `882#88220`
});
this.download();
},
btnClick2() {
this.$sendBuriedData({
component_tag: `882#88214`
});
this.download();
},
btnClick(index, type) {
this.download();
},
download(type) {
this.confirm();
// setTimeout(() => {
// window.location.href =
// "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
// }, 100);
},
// 关闭激活弹框
cancleChangeCard() {
this.showChangeCard = false;
},
// 处理提示信息框
handlerAction(type) {
if(type == 1) {
this.$sendBuriedData({
component_tag: `882#88219`
});
this.showBindCardTips = false;
} else {
this.$sendBuriedData({
component_tag: `882#88218`
});
this.beforeChangeCardAction(this.cmeCardModels.cardKey, true)
}
},
// 激活前
beforeChangeCardAction(cardKey, isInTips) {
this.commonCheckToken(() => {
this.changeCardAction(cardKey, isInTips);
});
},
// 查询是否买过类似的卡,但还没有绑定
hasNoUsedCardAction() {
let param = {
setEntry: true
};
this.GET(`cme/projectCard/queryNoUsedCard/${this.project.goodsType}/${this.project.cardType}`, param).then(({ data }) => {
this.hasNoUsedCard = data.hasNoUsedCard;
if (data.hasNoUsedCard == 1) {
this.cmeCardModels = data.cmeCardModels[0] || {};
this.showBindCardTips = true;
}
});
},
// 激活Action 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
idType: 1,
cardKey: cardKey,
cardType: this.project.cardType || 3,
goodsType: this.project.goodsType || 3,
channel: 3,
portalProjectId: this.projectId,
setEntry: true
};
_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) {
if(isInTips) {
Toast(res.message);
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
} else {
_this.showChangeCard = false;
Toast("激活成功,开始学习");
_this.getProjectInfoById();
}
} else {
Toast(res.message);
}
})
.catch(e => {
console.log('in catch', isInTips);
if(isInTips) {
Toast("无效的激活码");
_this.showBindCardTips = false;
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
});
},
// 查询教培项目广告位配置信息
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: this.project.cardType || 3,
cardTypeList: [ this.project.cardType || 3],
goodsType: this.project.goodsType,
// pageNum: 1,
// pageSize: 1
};
param.setEntry = true;
this.POST("trade/goods/cardList_v2", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.cardInfo = (res.data && res.data[0]) || { id: 0, name: "职称考精讲课程卡" };
this.subContent = `您已购买“${this.cardInfo.goodsName}”,是否使用此卡绑定并激活当前内容?一旦使用,不可更改或退回`
}
});
},
confirm() {
// this.$sendBuriedData({
// component_tag: `882#88203`
// });
this.commonCheckToken(() => {
let jumpUrl = getWebPageUrl(
`profexam/#/goods-detail?goodsId=${this.cardInfo.id}&projectId=${this.projectId}`
);
window.location.href = jumpUrl;
});
},
// 首次进入考试时记录(点击‘我知道了’时调用)
firstIntoExamAction() {
let _this = this;
let param = {
token: _this.token,
setEntry: true
};
this.NEW_POST(`cme/project/${_this.projectId}/firstIntoExam`, param).then(
res => {
if (res.code == "000000") {
this.project.firstIntoExam = false;
}
}
);
},
//去激活
changeClick() {
this.commonCheckToken(() => {
this.showChangeCard = true;
});
},
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 - 88;
} 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.token,
setEntry: true
};
// let videoUrl = this.$route.query.videoUrl || "";
let videoUrl = this.shareParam.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") {
this.showDownloadButton = true;
if (videoUrl) {
_this.limitTimes = this.shareParam.limitTimes || 0;
_this.videoOptions.mp4 = videoUrl;
_this.videoOptions.trySeeTime = this.shareParam.limitTimes || 0;
} else {
_this.limitTimes = res.data.trySeeTime;
_this.videoOptions.mp4 = res.data.attachmentUrl;
_this.videoOptions.trySeeTime = res.data.trySeeTime || 0;
}
_this.hasBindCard = res.data.cardStatus == 0 ? false : true;
if (_this.hasBindCard) {
_this.videoOptions.trySeeTime = 0;
_this.videoOptions.autoplay = false;
// 如果没有绑定卡,则查询是否有未绑定的卡
}
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.$refs.picaVideo.switchUrl({
url: mp4Url,
proved: _this.videoOptions.trySeeTime,
enable: true
});
});
// // 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);
// 请求成功后统计,获取项目名
// this.$sendBuriedData({
// component_tag: `882#88201#${_this.projectId}#${_this.project.projectName}`
// });
// 二次分享
// let shareUrl = encodeURIComponent(location.href);
// let shareUrl = location.href;
let shareUrl = getWebPageUrl(
`profexam/#/sharecoop?uuid=${this.uuid}`
);
this.wechatShare(
{
link: shareUrl,
title: this.project.projectName,
friendtitle: this.project.projectName,
desc: this.project.projectIntro,
imgUrl: "https://file.yunqueyi.com/logo.png"
},
() => {
console.log("share success...");
}
);
// 如果 hasBindCard 为false,则获取卡信息 0:未绑卡 1:已绑卡
if (!_this.hasBindCard) {
_this.preJumper();
_this.logged && _this.hasNoUsedCardAction();
}
} else {
_this.showLoading = false;
_this.$router.replace("/not-found?fromPage=2");
}
});
},
// 项目负责人--详情(收起)
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;
}
}
}
};
</script>
<style lang="less" scoped>
.page-container-merge {
.nav-top .nav-title {
height: 0px;
// padding: 18px;
}
.banner-img {
display: inherit;
width: 375px;
height: 210px;
&-1 {
position: absolute;
left: 0;
top: 180px;
width: 76px;
height: 30px;
}
&-5 {
position: absolute;
left: 0;
top: 180px;
width: 76px;
height: 30px;
}
&-10 {
position: absolute;
left: 0;
top: 180px;
width: 76px;
height: 30px;
}
}
.video-box {
position: relative;
height: 210px;
}
.list-container {
// margin-bottom: 40px;
.sk-btn-cover-new {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 210px;
z-index: 100;
text-align: center;
// background: #fff;
font-size: 13px;
// border-radius: 50%;
background: rgba(51, 51, 51, 0.8);
span {
display: inline-block;
margin-top: 82px;
width: 100px;
height: 36px;
line-height: 36px;
font-size: 15px;
font-weight: 700;
border-radius: 20px;
color: #fff;
background: #449284;
&.android {
padding-top: 2px;
}
}
}
}
.intro-catalogue-container {
.title {
position: relative;
height: 50px;
line-height: 30px;
padding: 0 15px;
border-bottom: 1px solid #f0f1f2;
& > span {
display: inline-block;
line-height: 15px;
font-size: 15px;
color: #979899;
padding-right: 35px;
}
& > span.focus {
position: relative;
color: #373839;
}
span.focus:after {
content: "";
position: absolute;
left: 9px;
bottom: -14px;
background: #449284;
// border-bottom: 1px solid #449284;
width: 10px;
height: 3px;
border-radius: 3px;
}
}
.title.fixed-title-1 {
position: fixed;
left: 0;
top: 60px;
background: #fff;
width: 100%;
z-index: 999;
}
.title.fixed-title-2 {
position: fixed;
left: 0;
top: 0;
background: #fff;
width: 100%;
z-index: 999;
}
.catalogue-content {
padding: 0 15px;
.catalogue-title {
// display: flex;
// flex-direction: row;
// align-items: center;
// align-content: center;
margin-top: 5px;
// margin-bottom: 16px;
.c-title {
font-size: 18px;
color: #373839;
font-weight: 700;
}
.c-sub {
margin-left: -6px;
font-size: 12px;
color: #979899;
}
}
}
.fixed-flag-height {
height: 50px;
}
}
.course-tips {
width: 100%;
position: absolute;
z-index: 100;
top: 0;
left: 0;
}
}
.no-more-bottom {
position: relative;
width: 100%;
height: 0;
}
</style>
<template>
<div class="test-container">
<!-- <CommonButton btnText="去学习"></CommonButton> -->
<!-- <CommonDialog content="该项目仅对河北省石家庄市的用户开放" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<CommonDialog content="您暂未认证身份,完成认证身份后可申请学分" confirmBtnText="去认证" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog>
<!-- <CommonDialog content="您暂未加入机构,加入机构后且认证身份后可申请学分" confirmBtnText="加入机构" :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<!-- <CommonDialog content="您的所属机构不在可申请范围(河北省石家庄市)内" cancleBtnText="我知道了" isSingle :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<!-- <CommonDialog content="提交成功" subContent="您可在“个人中心-证书与学分”中查看审核结果" cancleBtnText="我知道了" isSingle needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<!-- <CommonDialog content="兑换" subContent="确定要花200云鹊豆兑换课程吗?<br>我的云鹊豆:<span style='color:#FF9A4B;'>1500</span>" cancleBtnText="我再想想" confirmBtnText="确认兑换" needSubContent :isShowDialog="isShowDialog" @handlerAction="handlerDialogAction"></CommonDialog> -->
<!-- <CommonBottomInfo></CommonBottomInfo> -->
<!-- 新组件测试 -->
<!-- <CommonErrorTips></CommonErrorTips> -->
<div class="course-button-group">
<CourseButton></CourseButton>
</div>
<!-- <CourseCovers></CourseCovers> -->
<!-- <div @click="testDialog">testDialog</div> -->
<CourseIntro :intro="intro"></CourseIntro>
<BriefIntro></BriefIntro>
</div>
</template>
<script>
import CommonButton from "@/components/cme/common-button";
import CommonDialog from "@/components/cme/common-dialog";
import CommonBottomInfo from "@/components/cme/common-bottom-info";
import CommonErrorTips from "@/components/course/common-error-tips";
import CourseButton from "@/components/course/course-button";
import CourseCovers from "@/components/course/course-covers";
import BriefIntro from "@/components/course/brief-intro";
import CourseIntro from "@/components/course/course-intro";
export default {
data() {
return {
isShowDialog: true,
intro: "更多其他课程,请前往鹊医App学习更多其他课程,请前往鹊医App学习更多其他课程,请前往鹊医App学习更多其他课程,请前往鹊医App学习更多其他课程,请前往鹊医App学习更多其他课程,请前往鹊医App学习更多其他课程,请前往鹊医App学习"
};
},
components: {
// CommonButton,
CommonDialog,
// CommonBottomInfo,
// CommonErrorTips,
CourseButton,
// CourseCovers,
BriefIntro,
CourseIntro
},
mounted() {
// Toast
// this.$toast({message: '展示图片', duration: 3000 });
},
beforeDestroyed() {},
methods: {
handlerDialogAction(type) {
this.isShowDialog = false;
},
testDialog() {
this.$dialog
.confirm({
className: "course-detail",
showCancelButton: false,
// message: '激活/购买后可学习完整课程',
message: "恭喜您,已完成全部课程学习",
confirmButtonText: "我知道了"
})
.then(res => {});
}
}
};
</script>
<style lang="less" scoped>
.test-container {
// background: rgba($color: #000000, $alpha: 0.8);
}
</style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册