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

Merge branch 'release' of...

Merge branch 'release' of http://192.168.110.53/com.pica.cloud.education.frontend/pica-cooperation-cme into release
{ {
"presets": ["env", "es2015", "stage-2"], "presets": [
"@babel/preset-env"
],
"plugins": [ "plugins": [
"add-module-exports", "add-module-exports",
"transform-runtime", [
"@babel/plugin-transform-runtime",
{
"corejs": 2
}
],
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings",
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions"
], ],
"comments": false, "comments": false
} }
...@@ -4,8 +4,8 @@ var utils = require('./utils') ...@@ -4,8 +4,8 @@ var utils = require('./utils')
var projectRoot = path.resolve(__dirname, '../') var projectRoot = path.resolve(__dirname, '../')
var env = process.env.NODE_ENV var env = process.env.NODE_ENV
// check env & config/index.js to decide weither to enable CSS Sourcemaps for the // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
// various preprocessor loaders added to vue-loader at the end of this file // various preprocessor loaders added to vue-loader at the end of this file
var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
var useCssSourceMap = cssSourceMapDev || cssSourceMapProd var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
...@@ -69,6 +69,15 @@ module.exports = { ...@@ -69,6 +69,15 @@ module.exports = {
postcss: [ postcss: [
require('autoprefixer')({ require('autoprefixer')({
browsers: ['last 10 versions'] browsers: ['last 10 versions']
}),
require('postcss-pxtorem')({
rootValue: 37.5,
unitPrecision: 5,
propWhiteList: [],
selectorBlackList: [/^html$/],
replace: true,
mediaQuery: false,
minPixelValue: 2
}) })
] ]
} }
......
...@@ -23,7 +23,7 @@ module.exports = { ...@@ -23,7 +23,7 @@ module.exports = {
NODE_ENV: '"development"', NODE_ENV: '"development"',
BUILD_ENV: '"' + process.env.BUILD_ENV + '"' BUILD_ENV: '"' + process.env.BUILD_ENV + '"'
}, },
port: 8009, port: 8020,
assetsSubDirectory: 'static', assetsSubDirectory: 'static',
assetsPublicPath: '/', assetsPublicPath: '/',
// proxyTable: { // proxyTable: {
...@@ -35,7 +35,7 @@ module.exports = { ...@@ -35,7 +35,7 @@ module.exports = {
context: [ //代理路径 context: [ //代理路径
'/test' '/test'
], ],
proxypath: 'http://localhost:9000', proxypath: 'http://localhost:9009',
cssSourceMap: true cssSourceMap: true
} }
} }
\ No newline at end of file
因为 它太大了无法显示 源差异 。您可以改为 查看blob
...@@ -15,37 +15,41 @@ ...@@ -15,37 +15,41 @@
"build:pro": "cross-env BUILD_ENV=pro node build/build.js" "build:pro": "cross-env BUILD_ENV=pro node build/build.js"
}, },
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.2.5", "@babel/polyfill": "^7.10.4",
"axios": "0.16.2", "axios": "0.16.2",
"better-scroll": "^0.1.15", "clipboard": "^2.0.6",
"echarts": "^4.2.0-rc.2", "pdfjs-dist": "^2.4.456",
"fastclick": "^1.0.6",
"img-vuer": "^0.17.2",
"iscroll": "^5.2.0",
"js-cookie": "^2.2.0",
"pica-topic-stencil": "^1.0.8", "pica-topic-stencil": "^1.0.8",
"showdown": "^1.6.4",
"vant": "^2.2.15", "vant": "^2.2.15",
"vconsole": "^3.3.4", "vconsole": "^3.3.4",
"vue": "^2.1.0", "vue": "^2.1.0",
"vue-router": "^2.1.1", "vue-router": "^2.1.1",
"vuex": "^2.0.0", "vuex": "^2.0.0",
"web-buried-point": "^2.1.0" "web-buried-point": "^2.1.0",
"weixin-js-sdk": "^1.4.0-test"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/register": "^7.0.0",
"@babel/runtime-corejs2": "^7.0.0",
"autoprefixer": "^6.4.0", "autoprefixer": "^6.4.0",
"autoprefixer-loader": "^3.2.0", "autoprefixer-loader": "^3.2.0",
"babel-core": "^6.0.0", "babel-core": "^7.0.0-bridge.0",
"babel-loader": "^6.0.0", "babel-loader": "7.1.1",
"babel-plugin-add-module-exports": "^1.0.0", "babel-plugin-add-module-exports": "^1.0.0",
"babel-plugin-component": "^1.1.1", "babel-plugin-component": "^1.1.1",
"babel-plugin-import": "^1.11.0", "babel-plugin-import": "^1.11.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"babel-runtime": "^6.23.0",
"chalk": "^1.1.3", "chalk": "^1.1.3",
"connect-history-api-fallback": "^1.1.0", "connect-history-api-fallback": "^1.1.0",
"cross-env": "^5.0.0", "cross-env": "^5.0.0",
...@@ -61,13 +65,9 @@ ...@@ -61,13 +65,9 @@
"less": "^2.7.1", "less": "^2.7.1",
"less-loader": "^2.2.3", "less-loader": "^2.2.3",
"node-gyp": "^3.4.0", "node-gyp": "^3.4.0",
"node-sass": "^4.9.2",
"opn": "^4.0.2", "opn": "^4.0.2",
"ora": "^0.3.0", "ora": "^0.3.0",
"sass": "^0.5.0", "postcss-pxtorem": "^5.1.1",
"sass-loader": "^4.1.1",
"scss": "^0.2.4",
"scss-loader": "0.0.1",
"semver": "^5.3.0", "semver": "^5.3.0",
"shelljs": "^0.7.4", "shelljs": "^0.7.4",
"style-loader": "^0.13.1", "style-loader": "^0.13.1",
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</script> </script>
<style lang="scss"> <style lang="less">
@import './style/mixin'; @import './style/mixin';
@import './style/common'; @import './style/common';
@import './style/global'; @import './style/global';
......
...@@ -44,15 +44,14 @@ export default { ...@@ -44,15 +44,14 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.back-btn { .back-btn {
position: fixed; position: fixed;
width: px2rem(35px); width: 35px;
height: px2rem(35px); height: 35px;
right: px2rem(15px); right: 15px;
z-index: 100; z-index: 100;
bottom: px2rem(80px); bottom: 80px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
......
<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"
:disabled="portalModule.disabled"
@click.native="chooseItem(portalModule)"
>
<!-- @click.native="chooseItem(item)" -->
<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"
>
<!-- :class="{'text-action-no': item.useFlag == 2}" -->
{{getActionText(item.status, item.type)}}
</span>
<span
v-else-if="!hasBindCard && item.type == 2 && cmeType == 2"
@click="gotoExamOrCourse(item, 'sk')"
class="text-action"
style="background: #f28662;border: none;color: #fff;"
>
<!-- :class="{'text-action-no': item.useFlag == 2}" -->
去试看
</span>
<span
v-else
@click="gotoExamOrCourse(item)"
class="text-action"
:class="{'text-action-no': item.useFlag == 2}"
>
{{getActionText(item.status, item.type)}}
</span>
<!-- <img @click="toastToBuy" class="key" v-show="!hasBindCard" src="../../images/cme/phrase2/key.png" alt=""> -->
<div class="foot-line"
v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId">
</div>
</div>
<span v-if="item.certificateFlag == 2">
<img class="cert-img" :class="{'space2': item.height == 2 }" src="../../images/has-cert-new.png">
</span>
</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 CertShow from "@/components/business/cert-show";
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-detail-share",
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,
},
cmeType: {
type: Number | String,
default: 0,
},
logged: {
type: Boolean,
default: false
},
projectId: {
type: Number | String,
default: 0
},
goodsId: {
type: Number | String,
default: 0,
}
},
components: {
MergeTitle,
CertShow,
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: `883#88316#${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}`
// });
// }
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);
} else if (item.type == 2) {
this.gotoCourse(item.id);
}
},
// 跳转到课程
gotoCourse(courseId) {
let param = {
token: this.token,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
if (res.code !== "000000") {
Toast('登陆后可学习课程');
} else {
this.jumpToCourse(courseId);
}
});
},
// 跳转到课程
jumpToCourse: function(courseId) {
if(!isWeiXin()) {
Toast('请前往云鹊医APP学习课程');
return;
}
let jumpUrl = getWebPageUrl(`profexam/#/course-detail?courseId=${courseId}&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 ? '去考试' : '去学习';
}
if(!this.hasBindCard && type == 2) {
actionText = '去试看'
}
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(item) {
if(item) {
this.$sendBuriedData({
component_tag: `883#88315#${item.id}#${item.name}`
});
}
Toast('购买后可学习课程');
}
}
};
</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;
}
}
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>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<van-collapse-item <van-collapse-item
v-for="(portalModule, index) in component.portalModuleDTOS" v-for="(portalModule, index) in component.portalModuleDTOS"
:key="index" :key="index"
:title="(parseInt(index) + 1) + '.' + portalModule.moduleName | shortName(19)" :title="portalModule.moduleName | shortName(19)"
:name="portalModule.expandKey" :name="portalModule.expandKey"
:value="portalModule.value" :value="portalModule.value"
:disabled="portalModule.disabled" :disabled="portalModule.disabled"
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<article @click.stop="deleteFlow()" class="cell-container"> <article @click.stop="deleteFlow()" class="cell-container">
<span class="" v-for="(item, index) in portalModule.contentList" :key="index"> <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 v-if="index > 0 && portalModule.contentList[index].templetId!= portalModule.contentList[index-1].templetId" class="bottom-line"></div>
<div class="cell-container-item" @click="gotoExamOrCourse(item)" > <div class="cell-container-item" >
<div class="name"> <div class="name">
<div class="name-img"> <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 == 1" class="img-icon" src="../../images/exam.png">
...@@ -29,26 +29,26 @@ ...@@ -29,26 +29,26 @@
<img v-if="item.type == 2 && item.useFlag == 1" class="img-icon" src="../../images/learn.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"> <img v-if="item.type == 2 && item.useFlag == 2" class="img-icon" src="../../images/learn-dark.png">
</div> </div>
<!-- <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> <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="cert-img" src="../../images/has-owner-cert.png">
</span> -->
</div> </div>
<!-- 'bg-13': item.status == 13 -->
<span <span
v-if="!hasBindCard && item.type == 2 && cmeType == 2"
@click="gotoExamOrCourse(item)"
class="text-action"
style="background: #f28662;border: none;color: #fff;"
>
<!-- :class="{'text-action-no': item.useFlag == 2}" -->
去试看
</span>
<span
v-else
@click="gotoExamOrCourse(item)"
class="text-action" class="text-action"
:class="{'text-action-no': item.useFlag == 2}" :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, item.type)}}
{{getActionText(item.status)}}
</span> </span>
<!-- <div class="connect-line" <!-- <img @click="toastToBuy" class="key" v-show="!hasBindCard" src="../../images/cme/phrase2/key.png" alt=""> -->
:class="{'len1': item.height === 1, 'len2': item.height === '1','len3': item.height === 2, 'len4': item.height === '2', 'line-complete': index+1 < portalModule.contentList.length && portalModule.contentList[index+1].useFlag == 1}"
v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId">
</div> -->
<div class="foot-line" <div class="foot-line"
v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId"> v-if="index+1 < portalModule.contentList.length && portalModule.contentList[index].templetId == portalModule.contentList[index+1].templetId">
</div> </div>
...@@ -60,12 +60,7 @@ ...@@ -60,12 +60,7 @@
</article> </article>
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
<!-- <Toast ref="toastTitle"></Toast> -->
<!-- <div v-if="index+1 < projectComponent.length" class="line-component"></div> -->
</div> </div>
<!-- <NoMoreContent v-if="detailNum > 9" /> -->
<NoMoreContent />
<div v-if="detailNum <= 9" class="no-more-bottom"></div>
<van-dialog <van-dialog
v-model="dialogState" v-model="dialogState"
title="标题" title="标题"
...@@ -75,11 +70,9 @@ ...@@ -75,11 +70,9 @@
</template> </template>
<script> <script>
// import CommonTitle from "@/components/common/common-title";
import MergeTitle from "@/components/business/merge-title"; import MergeTitle from "@/components/business/merge-title";
import NoMoreContent from "@/components/business/no-more-content"; import NoMoreContent from "@/components/business/no-more-content";
import CertShow from "@/components/business/cert-show"; import CertShow from "@/components/business/cert-show";
// import Toast from "@/components/common/common-toast";
import { Collapse, CollapseItem, Dialog, Toast } from 'vant'; import { Collapse, CollapseItem, Dialog, Toast } from 'vant';
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { getAppVersion } from "@/utils"; import { getAppVersion } from "@/utils";
...@@ -89,21 +82,21 @@ const actionMap = { ...@@ -89,21 +82,21 @@ const actionMap = {
12: "再考一次", 12: "再考一次",
13: "已通过", 13: "已通过",
14: "已完成", 14: "已完成",
15: "去刷分", 15: "已通过",
16: "未通过", 16: "未通过",
21: "去学习", 21: "去学习",
22: "继续学习", 22: "继续学习",
23: "去复习" 23: "去复习"
}; };
const sendBuriedDataMap = { const sendBuriedDataMap = {
11: "211012", // 11: "8824",
12: "211013", // 12: "211013",
21: "211009", 21: "8821",
22: "211010", 22: "8822",
23: "211011" 23: "8823"
} }
export default { export default {
name: "cell-list-item", name: "cell-list-detail",
data() { data() {
return { return {
appVersion: "200", appVersion: "200",
...@@ -114,14 +107,10 @@ export default { ...@@ -114,14 +107,10 @@ export default {
}; };
}, },
props: { props: {
// moduleName: { hasBindCard: {
// type: String, type: Boolean,
// default: "" default: false
// }, },
// paramData: {
// type: Array,
// default: () => []
// },
projectComponent: { projectComponent: {
type: Array, type: Array,
default: () => [] default: () => []
...@@ -137,6 +126,14 @@ export default { ...@@ -137,6 +126,14 @@ export default {
courseRequire: { courseRequire: {
type: Number | String, type: Number | String,
default: 0, default: 0,
},
limitTimes: {
type: Number | String,
default: 0,
},
cmeType: {
type: Number | String,
default: 0,
} }
}, },
computed: { computed: {
...@@ -144,10 +141,8 @@ export default { ...@@ -144,10 +141,8 @@ export default {
}, },
components: { components: {
MergeTitle, MergeTitle,
// CommonTitle,
CertShow, CertShow,
NoMoreContent, NoMoreContent,
// Toast,
Dialog, Dialog,
}, },
watch:{ watch:{
...@@ -167,13 +162,21 @@ export default { ...@@ -167,13 +162,21 @@ export default {
// 跳转到考试或课程 type 1: 考试; 2: 课程 // 跳转到考试或课程 type 1: 考试; 2: 课程
// 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试 // 如果是考试,将根据appVersion判断是新考试还是老考试,如果是301或之前的,都是老考试
gotoExamOrCourse(item) { gotoExamOrCourse(item) {
this.$parent.$refs.tcPlayerRef && this.$parent.$refs.tcPlayerRef.pause();
// 埋点:去学习、继续学习、复习、去考试、重考
let actionCode = sendBuriedDataMap[item.status];
if(actionCode) {
this.$sendBuriedData({
component_tag: `882#${actionCode}#${this.projectId}`
});
}
let appVersion = getAppVersion(this.userInfo.appVersion); let appVersion = getAppVersion(this.userInfo.appVersion);
if (item.useFlag == 2) return; if (item.useFlag == 2) return;
if (window.__isWeb) { // if (window.__isWeb) {
// this.$refs.toastTitle.toast("请您下载App"); // // this.$refs.toastTitle.toast("请您下载App");
Toast('请您下载App'); // Toast('请您下载App');
return; // return;
} // }
if (item.type == 1) { if (item.type == 1) {
if (appVersion <= 300) { if (appVersion <= 300) {
// this.$refs.toastTitle.toast("请您下载新版本App"); // this.$refs.toastTitle.toast("请您下载新版本App");
...@@ -185,22 +188,32 @@ export default { ...@@ -185,22 +188,32 @@ export default {
} else if (item.type == 2) { } else if (item.type == 2) {
this.gotoCourse(item.id); this.gotoCourse(item.id);
} }
// 埋点:去学习、继续学习、复习、去考试、重考
let actionCode = sendBuriedDataMap[item.status];
if(actionCode) {
this.$sendBuriedData({
component_tag: `211#${actionCode}#${this.projectId}`
});
}
}, },
// 跳转到课程 // 跳转到课程
gotoCourse: function(courseId) { gotoCourse: function(courseId) {
let appVersion = getAppVersion(this.userInfo.appVersion);
// 弹框提示下载新版本可以试看
if(appVersion < 343 && !this.hasBindCard) {
this.$dialog.confirm({
className: 'con-dialog',
showCancelButton: false,
// message: '激活/购买后可学习完整课程',
message: '升级最新版本可试看课程',
confirmButtonText: '我知道了',
}).then(res => {
})
return;
}
let paramList = [] let paramList = []
let limitTimes = this.limitTimes - 0;
if(this.hasBindCard) {
limitTimes = -1;
}
paramList = [ paramList = [
{ {
key: "className", key: "className",
// value: "com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController", value: "com.picahealth.yunque.activitys.courseplaynew.MyTcPlayVideoActivity###CourseMultiMediaPlayController",
type: 4, type: 4,
seqNo: 1 seqNo: 1
...@@ -223,7 +236,20 @@ export default { ...@@ -223,7 +236,20 @@ export default {
type: 4, type: 4,
seqNo: 1 seqNo: 1
}, },
{
key: "limitTimes",
value: limitTimes,
type: 4,
seqNo: 1
},
{
key: "projectId",
value: this.projectId,
type: 4,
seqNo: 1
},
]; ];
console.log('gotoCourse', paramList);
rocNative.dispatchEventByModuleCode({ rocNative.dispatchEventByModuleCode({
modeCode: "M200", modeCode: "M200",
jsonString: paramList jsonString: paramList
...@@ -252,8 +278,15 @@ export default { ...@@ -252,8 +278,15 @@ export default {
jsonString: paramList jsonString: paramList
}); });
}, },
getActionText(status) { getActionText(status, type) {
return actionMap[status]; let actionText = actionMap[status];
if(!actionText) {
actionText = type == 1 ? '去考试' : '去学习';
}
if(!this.hasBindCard && type == 2) {
actionText = '去试看'
}
return actionText;
}, },
// showDialog(introduce) { // showDialog(introduce) {
// Dialog.alert({ // Dialog.alert({
...@@ -281,25 +314,29 @@ export default { ...@@ -281,25 +314,29 @@ export default {
console.log('item',item); console.log('item',item);
Toast('尚未开始,敬请期待'); Toast('尚未开始,敬请期待');
} }
},
// 弹框提示
toastToBuy() {
Toast('购买后可学习课程');
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="less">
@import "../../style/mixin";
.van-dialog { .van-dialog {
transform: translate(-50%,-50%); transform: translate(-50%,-50%);
width: px2rem(300px); width: 300px;
border-radius: px2rem(3px); border-radius: 3px;
.van-dialog__header { .van-dialog__header {
padding-top: px2rem(30px); padding-top: 30px;
font-size: px2rem(18px); font-size: 18px;
color: #333333; color: #333333;
} }
.van-dialog__content { .van-dialog__content {
.van-dialog__message--has-title { .van-dialog__message--has-title {
padding-top: px2rem(14px); padding-top: 14px;
text-align: left; text-align: left;
color: #676869; color: #676869;
font-weight:400; font-weight:400;
...@@ -309,7 +346,7 @@ export default { ...@@ -309,7 +346,7 @@ export default {
.van-button { .van-button {
.van-button__text { .van-button__text {
color: #449284; color: #449284;
font-size: px2rem(17px); font-size: 17px;
} }
} }
} }
...@@ -317,17 +354,17 @@ export default { ...@@ -317,17 +354,17 @@ export default {
.van-toast { .van-toast {
// background: #000000; // background: #000000;
div { div {
font-size:px2rem(12px); font-size:12px;
color: #FFFFFF; color: #FFFFFF;
} }
} }
.van-toast--text { .van-toast--text {
padding: px2rem(7px) px2rem(8px); padding: 7px 8px;
} }
.no-more-bottom { .no-more-bottom {
position: relative; position: relative;
width: 100%; width: 100%;
height: px2rem(40px); height: 40px;
} }
.cell-detail { .cell-detail {
.van-hairline--top::after , .van-hairline--top-bottom::after { .van-hairline--top::after , .van-hairline--top-bottom::after {
...@@ -335,38 +372,39 @@ export default { ...@@ -335,38 +372,39 @@ export default {
} }
.van-collapse-item { .van-collapse-item {
.van-cell { .van-cell {
margin: px2rem(9px) auto 0 auto; margin: 9px auto 0 auto;
width: px2rem(345px); // width: 345px;
min-height: px2rem(48px); width: 100%;
border-radius: px2rem(6px); min-height: 48px;
border-radius: 6px;
} }
.van-collapse-item__title { .van-collapse-item__title {
background: #F8F9FA; background: #F8F9FA;
.van-cell__title { .van-cell__title {
max-width: px2rem(200px); max-width: 200px;
vertical-align: middle; vertical-align: middle;
line-height: px2rem(30px); line-height: 30px;
flex: auto; flex: auto;
span { span {
color: #373839; color: #373839;
font-weight:500; font-weight:500;
font-size: px2rem(15px); font-size: 15px;
height: px2rem(15px); height: 15px;
line-height: px2rem(15px); line-height: 15px;
} }
} }
.van-cell__value { .van-cell__value {
// max-width: px2rem(80px); // max-width: 80px;
line-height: px2rem(30px); line-height: 30px;
span { span {
color: #979899; color: #979899;
font-weight:500; font-weight:500;
font-size: px2rem(14px); font-size: 14px;
line-height: px2rem(14px); line-height: 14px;
} }
} }
.van-icon { .van-icon {
margin-top: px2rem(3px); margin-top: 3px;
color: #999999; color: #999999;
} }
} }
...@@ -376,16 +414,16 @@ export default { ...@@ -376,16 +414,16 @@ export default {
span { span {
color: #449284; color: #449284;
font-weight:500; font-weight:500;
font-size: px2rem(15px); font-size: 15px;
line-height: px2rem(15px); line-height: 15px;
} }
} }
.van-cell__value { .van-cell__value {
span { span {
color: #449284; color: #449284;
font-weight:500; font-weight:500;
font-size: px2rem(14px); font-size: 14px;
line-height: px2rem(14px); line-height: 14px;
} }
} }
.van-icon { .van-icon {
...@@ -408,90 +446,88 @@ export default { ...@@ -408,90 +446,88 @@ export default {
} }
.line-component { .line-component {
position: relative; position: relative;
margin-top: px2rem(20px); margin-top: 20px;
margin-left: 0; margin-left: 0;
width: px2rem(373px); width: 373px;
height: px2rem(6px); height: 6px;
background: #F8F9FA; background: #F8F9FA;
} }
} }
.cell-container { .cell-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: px2rem(20px) px2rem(0px) px2rem(-28px) px2rem(0px); margin: 20px 0px -28px 0px;
&-item { &-item {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// margin: px2rem(6px) px2rem(0px); margin-bottom: 39px;
// height: px2rem(51px); line-height: 51px;
margin-bottom: px2rem(39px); font-size: 15px;
line-height: px2rem(51px);
font-size: px2rem(15px);
// padding: px2rem(0px) px2rem(15px);
// background: rgba(248, 249, 250, 1);
// border-bottom: 1px solid #f0f0f0;
// border-radius: px2rem(6px);
justify-content: space-between; justify-content: space-between;
// align-items: center; align-items: center;
.name { .name {
display: flex;
align-items: center;
flex: 1;
width: 100px;
.name-img { .name-img {
position: relative; position: relative;
z-index: 9; z-index: 9;
margin-right: px2rem(6px); margin-right: 6px;
width: px2rem(20px); width: 20px;
height: px2rem(20px); height: 20px;
float: left; float: left;
.img-icon { .img-icon {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: px2rem(20px); width: 20px;
height: px2rem(20px); height: 20px;
} }
} }
&-logo { &-logo {
position: relative; position: relative;
z-index: 9; z-index: 9;
margin-right: px2rem(6px); margin-right: 6px;
width: px2rem(20px); width: 20px;
height: px2rem(20px); height: 20px;
text-align: center; text-align: center;
background:rgba(68,146,132,1); background:rgba(68,146,132,1);
font-size: px2rem(12px); font-size: 12px;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #FFFFFF;
border-radius: 50%; border-radius: 50%;
float: left; float: left;
line-height: px2rem(22px); line-height: 22px;
// display:table; // display:table;
// overflow:hidden; // overflow:hidden;
// span { // span {
// color: #FFFFFF; // color: #FFFFFF;
// font-size: px2rem(12px); // font-size: 12px;
// font-weight: 700; // font-weight: 700;
// display: table-cell; // display: table-cell;
// text-align: center; // text-align: center;
// vertical-align: middle; // vertical-align: middle;
// line-height: px2rem(20px); // line-height: 20px;
// } // }
// &::before { // &::before {
// position: absolute; // position: absolute;
// top: px2rem(-6px); // top: -6px;
// left: px2rem(8px); // left: 8px;
// display: inline-block; // display: inline-block;
// height: px2rem(6px); // height: 6px;
// width: px2rem(4px); // width: 4px;
// background: #FFFFFF; // background: #FFFFFF;
// content: ""; // content: "";
// } // }
// &::after { // &::after {
// position: absolute; // position: absolute;
// top: px2rem(20px); // top: 20px;
// left: px2rem(8px); // left: 8px;
// display: inline-block; // display: inline-block;
// height: px2rem(6px); // height: 6px;
// width: px2rem(4px); // width: 4px;
// background: #FFFFFF; // background: #FFFFFF;
// content: ""; // content: "";
// } // }
...@@ -503,81 +539,87 @@ export default { ...@@ -503,81 +539,87 @@ export default {
background:rgba(231, 232, 233, 1); background:rgba(231, 232, 233, 1);
} }
&-title { &-title {
flex: 1;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
width: px2rem(231px); // width: 231px;
font-size: px2rem(15px); font-size: 15px;
font-weight: 700; font-weight: 700;
line-height: px2rem(22px); line-height: 22px;
color: #333333; color: #333333;
float: left; padding-right: 10px;
// float: left;
} }
&-title-no { &-title-no {
color: #979899; color: #979899;
} }
// &::before { // &::before {
// position: relative; // position: relative;
// top: px2rem(3px); // top: 3px;
// display: inline-block; // display: inline-block;
// width: px2rem(4px); // width: 4px;
// content: ""; // content: "";
// margin-right: px2rem(5px); // margin-right: 5px;
// height: px2rem(16px); // height: 16px;
// background: #449284; // background: #449284;
// border-radius: px2rem(3px); // border-radius: 3px;
// } // }
// span { // span {
// img { // img {
// margin-top: px2rem(4px); // margin-top: 4px;
// position: relative; // position: relative;
// top: px2rem(2px); // top: 2px;
// width: px2rem(70px); // width: 70px;
// height: px2rem(20px); // height: 20px;
// } // }
// } // }
} }
.text-action { .text-action {
width: px2rem(68px); width: 68px;
height: px2rem(25px); height: 25px;
line-height: px2rem(25px); line-height: 25px;
text-align: center; text-align: center;
font-size: px2rem(12px); font-size: 12px;
font-weight: 700; font-weight: 700;
border-radius: px2rem(15px); border-radius: 15px;
border: px2rem(1px) solid rgba(68, 146, 132, 0.6); border: 1px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1); color: rgba(68, 146, 132, 1);
img { img {
position: relative; position: relative;
left: px2rem(2px); left: 2px;
top: px2rem(3px); top: 3px;
width: px2rem(8px); width: 8px;
height: px2rem(12px); height: 12px;
} }
&-no { &-no {
border: px2rem(1px) solid #c7c8c9; border: 1px solid #c7c8c9;
color: #c7c8c9; color: #c7c8c9;
} }
} }
.key {
width: 15px;
height: 15px;
}
} }
span { span {
.cert-img { .cert-img {
margin-left: px2rem(26px); margin-left: 26px;
position: relative; position: relative;
top: px2rem(-34px); top: -34px;
width: px2rem(70px); width: 70px;
height: px2rem(20px); height: 20px;
} }
.space2 { .space2 {
top: px2rem(-34px); top: -34px;
} }
} }
.connect-line { .connect-line {
position: absolute; position: absolute;
// top: px2rem(32px); // top: 32px;
top: px2rem(3px); top: 3px;
left: px2rem(8.5px); left: 8.5px;
height: px2rem(42px); height: 42px;
width: px2rem(3px); width: 3px;
background: #F8F9FA; background: #F8F9FA;
// border: 0.5px dashed rgba(240, 241, 244, 1); // border: 0.5px dashed rgba(240, 241, 244, 1);
} }
...@@ -585,40 +627,40 @@ export default { ...@@ -585,40 +627,40 @@ export default {
background: #E3EFED; background: #E3EFED;
} }
.len4 { .len4 {
// height: px2rem(100px); // height: 100px;
height: px2rem(106px); height: 106px;
} }
.len3 { .len3 {
// height: px2rem(82px); // height: 82px;
height: px2rem(88px); height: 88px;
} }
.len2 { .len2 {
// height: px2rem(82px); // height: 82px;
height: px2rem(88px); height: 88px;
} }
.len1 { .len1 {
// height: px2rem(62px); // height: 62px;
height: px2rem(68px); height: 68px;
} }
.bottom-line { .bottom-line {
position: relative; position: relative;
margin: px2rem(-19px) 0 px2rem(20px) 0; margin: -19px 0 20px 0;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
height: px2rem(6px); height: 6px;
background: #F8F9FA; background: #F8F9FA;
border-radius: px2rem(2px); border-radius: 2px;
// border-bottom: 0.5px solid #F0F1F2; // border-bottom: 0.5px solid #F0F1F2;
} }
.foot-line { .foot-line {
position: absolute; position: absolute;
width: px2rem(311px); width: 311px;
margin-left: px2rem(34.5px); margin-left: 34.5px;
height: px2rem(1px); height: 1px;
background: #E7E8E9; background: #E7E8E9;
// border-bottom: 0.5px solid #E7E8E9; // border-bottom: 0.5px solid #E7E8E9;
transform: scaleY(0.5); transform: scaleY(0.5);
bottom: px2rem(-20px); bottom: -20px;
} }
} }
.bg-13 { .bg-13 {
......
...@@ -51,7 +51,7 @@ const actionMap = { ...@@ -51,7 +51,7 @@ const actionMap = {
12: "再考一次", 12: "再考一次",
13: "已通过", 13: "已通过",
14: "已完成", 14: "已完成",
15: "去刷分", 15: "已通过",
16: "未通过", 16: "未通过",
21: "去学习", 21: "去学习",
22: "继续学习", 22: "继续学习",
...@@ -77,6 +77,10 @@ export default { ...@@ -77,6 +77,10 @@ export default {
courseRequire: { courseRequire: {
type: Number, type: Number,
default: 0, default: 0,
},
projectId: {
type: Number | String,
default: 0,
} }
}, },
computed: { computed: {
...@@ -143,7 +147,14 @@ export default { ...@@ -143,7 +147,14 @@ export default {
type: 4, type: 4,
seqNo: 1 seqNo: 1
}, },
{
key: "projectId",
value: this.projectId,
type: 4,
seqNo: 1
},
]; ];
console.log('gotoCourse', paramList);
rocNative.dispatchEventByModuleCode({ rocNative.dispatchEventByModuleCode({
modeCode: "M200", modeCode: "M200",
jsonString: paramList jsonString: paramList
...@@ -179,70 +190,69 @@ export default { ...@@ -179,70 +190,69 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.cell-container { .cell-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 px2rem(15px); margin: 0 15px;
&-item { &-item {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// margin: px2rem(6px) px2rem(0px); // margin: 6px 0px;
// height: px2rem(51px); // height: 51px;
margin-bottom: px2rem(32px); margin-bottom: 32px;
line-height: px2rem(51px); line-height: 51px;
font-size: px2rem(15px); font-size: 15px;
// padding: px2rem(0px) px2rem(15px); // padding: 0px 15px;
// background: rgba(248, 249, 250, 1); // background: rgba(248, 249, 250, 1);
// border-bottom: 1px solid #f0f0f0; // border-bottom: 1px solid #f0f0f0;
// border-radius: px2rem(6px); // border-radius: 6px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.name { .name {
&-logo { &-logo {
position: relative; position: relative;
z-index: 9; z-index: 9;
margin-right: px2rem(6px); margin-right: 6px;
width: px2rem(20px); width: 20px;
height: px2rem(20px); height: 20px;
text-align: center; text-align: center;
background:rgba(68,146,132,1); background:rgba(68,146,132,1);
font-size: px2rem(12px); font-size: 12px;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #FFFFFF;
border-radius: 50%; border-radius: 50%;
float: left; float: left;
line-height: px2rem(22px); line-height: 22px;
// display:table; // display:table;
// overflow:hidden; // overflow:hidden;
// span { // span {
// color: #FFFFFF; // color: #FFFFFF;
// font-size: px2rem(12px); // font-size: 12px;
// font-weight: 700; // font-weight: 700;
// display: table-cell; // display: table-cell;
// text-align: center; // text-align: center;
// vertical-align: middle; // vertical-align: middle;
// line-height: px2rem(20px); // line-height: 20px;
// } // }
&::before { &::before {
position: absolute; position: absolute;
top: px2rem(-6px); top: -6px;
left: px2rem(8px); left: 8px;
display: inline-block; display: inline-block;
height: px2rem(6px); height: 6px;
width: px2rem(4px); width: 4px;
background: #FFFFFF; background: #FFFFFF;
content: ""; content: "";
} }
&::after { &::after {
position: absolute; position: absolute;
top: px2rem(20px); top: 20px;
left: px2rem(8px); left: 8px;
display: inline-block; display: inline-block;
height: px2rem(6px); height: 6px;
width: px2rem(4px); width: 4px;
background: #FFFFFF; background: #FFFFFF;
content: ""; content: "";
} }
...@@ -254,57 +264,59 @@ export default { ...@@ -254,57 +264,59 @@ export default {
background:rgba(231, 232, 233, 1); background:rgba(231, 232, 233, 1);
} }
&-title { &-title {
flex: 1;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
width: px2rem(231px); // width: 231px;
font-size: px2rem(15px); font-size: 15px;
font-weight: 700; font-weight: 700;
line-height: px2rem(21px); line-height: 21px;
color: #373839; color: #373839;
float: left; padding-right: 10px;
// float: left;
} }
&-title-no { &-title-no {
color: rgba(151, 152, 153, 1); color: rgba(151, 152, 153, 1);
} }
// &::before { // &::before {
// position: relative; // position: relative;
// top: px2rem(3px); // top: 3px;
// display: inline-block; // display: inline-block;
// width: px2rem(4px); // width: 4px;
// content: ""; // content: "";
// margin-right: px2rem(5px); // margin-right: 5px;
// height: px2rem(16px); // height: 16px;
// background: #449284; // background: #449284;
// border-radius: px2rem(3px); // border-radius: 3px;
// } // }
// span { // span {
// img { // img {
// margin-top: px2rem(4px); // margin-top: 4px;
// position: relative; // position: relative;
// top: px2rem(2px); // top: 2px;
// width: px2rem(70px); // width: 70px;
// height: px2rem(20px); // height: 20px;
// } // }
// } // }
} }
.text-action { .text-action {
width: px2rem(68px); width: 68px;
height: px2rem(25px); height: 25px;
line-height: px2rem(25px); line-height: 25px;
text-align: center; text-align: center;
font-size: px2rem(12px); font-size: 12px;
font-weight: 700; font-weight: 700;
border-radius: px2rem(15px); border-radius: 15px;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// opacity: 0.45; // opacity: 0.45;
border: 0.5px solid rgba(68, 146, 132, 0.6); border: 0.5px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1); color: rgba(68, 146, 132, 1);
img { img {
position: relative; position: relative;
left: px2rem(2px); left: 2px;
top: px2rem(3px); top: 3px;
width: px2rem(8px); width: 8px;
height: px2rem(12px); height: 12px;
} }
&-no { &-no {
border: 0.5px solid #c7c8c9; border: 0.5px solid #c7c8c9;
...@@ -317,40 +329,40 @@ export default { ...@@ -317,40 +329,40 @@ export default {
} }
span { span {
img { img {
margin-left: px2rem(26px); margin-left: 26px;
position: relative; position: relative;
top: px2rem(-28px); top: -28px;
width: px2rem(70px); width: 70px;
height: px2rem(20px); height: 20px;
} }
.space2 { .space2 {
top: px2rem(-26px); top: -26px;
} }
} }
.connect-line { .connect-line {
position: absolute; position: absolute;
// top: px2rem(32px); // top: 32px;
top: px2rem(3px); top: 3px;
left: px2rem(9.5px); left: 9.5px;
height: px2rem(42px); height: 42px;
width: 0.5px; width: 0.5px;
border: 0.5px dashed rgba(240, 241, 244, 1); border: 0.5px dashed rgba(240, 241, 244, 1);
} }
.len4 { .len4 {
height: px2rem(100px); height: 100px;
} }
.len3 { .len3 {
height: px2rem(82px); height: 82px;
} }
.len2 { .len2 {
height: px2rem(82px); height: 82px;
} }
.len1 { .len1 {
height: px2rem(62px); height: 62px;
} }
.bottom-line { .bottom-line {
position: relative; position: relative;
margin: px2rem(6px) 0 px2rem(28px) 0; margin: 6px 0 28px 0;
bottom: 0px; bottom: 0px;
width: 100%; width: 100%;
border-bottom: 0.5px solid #F0F1F2; border-bottom: 0.5px solid #F0F1F2;
......
...@@ -33,14 +33,14 @@ export default { ...@@ -33,14 +33,14 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.cert-show-container { .cert-show-container {
display: flex; display: flex;
margin: px2rem(10px) px2rem(15px) 0 px2rem(15px); margin: 10px 15px 0 15px;
img { img {
width: px2rem(345px); // width: 345px;
height: px2rem(70px); width: 100%;
height: 70px;
} }
} }
</style> </style>
......
...@@ -75,7 +75,7 @@ export default { ...@@ -75,7 +75,7 @@ export default {
}); });
return; return;
} }
let pageUrl = getWebPageUrl('coopv2/#/comp2'); let pageUrl = getWebPageUrl('cme/#/comp2');
let moduleName = encodeURIComponent(item.moduleName) let moduleName = encodeURIComponent(item.moduleName)
let paramList = [ let paramList = [
{ {
...@@ -94,51 +94,50 @@ export default { ...@@ -94,51 +94,50 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.comp-container { .comp-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0 px2rem(15px); margin: 0 15px;
&-item { &-item {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin: px2rem(6px) px2rem(0px); margin: 6px 0px;
height: px2rem(51px); height: 51px;
// line-height: px2rem(51px); // line-height: 51px;
font-size: px2rem(15px); font-size: 15px;
padding: px2rem(0px) px2rem(15px); padding: 0px 15px;
background: rgba(248, 249, 250, 1); background: rgba(248, 249, 250, 1);
border-radius: px2rem(6px); border-radius: 6px;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.name { .name {
max-width: px2rem(240px); max-width: 240px;
font-size: px2rem(15px); font-size: 15px;
line-height: px2rem(25px) !important; line-height: 25px !important;
color: #676869; color: #676869;
} }
.action { .action {
width: px2rem(60px); width: 60px;
height: px2rem(25px); height: 25px;
line-height: px2rem(25px); line-height: 25px;
text-align: center; text-align: center;
font-size: px2rem(12px); font-size: 12px;
font-weight: 700; font-weight: 700;
border-radius: px2rem(15px); border-radius: 15px;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// opacity: 0.45; // opacity: 0.45;
border: 1px solid rgba(68, 146, 132, 0.6); border: 1px solid rgba(68, 146, 132, 0.6);
color: rgba(68, 146, 132, 1); color: rgba(68, 146, 132, 1);
} }
.action-no { .action-no {
width: px2rem(60px); width: 60px;
height: px2rem(25px); height: 25px;
line-height: px2rem(25px); line-height: 25px;
text-align: center; text-align: center;
font-size: px2rem(12px); font-size: 12px;
font-weight: 700; font-weight: 700;
border-radius: px2rem(15px); border-radius: 15px;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
// opacity: 0.45; // opacity: 0.45;
border: 1px solid #E7E8E9; border: 1px solid #E7E8E9;
...@@ -150,7 +149,7 @@ export default { ...@@ -150,7 +149,7 @@ export default {
} }
} }
.ht-for-m16 { .ht-for-m16 {
height: px2rem(66px); height: 66px;
} }
</style> </style>
...@@ -18,30 +18,17 @@ ...@@ -18,30 +18,17 @@
</div> </div>
<div class="coop-item-right"> <div class="coop-item-right">
<span class="coop-item-right-title">{{item.name}}</span> <span class="coop-item-right-title">{{item.name}}</span>
<span class="coop-item-right-other">{{item.level}} | {{item.credit}} | {{item.scope}}</span> <span v-if="item.cmeType == 2" class="coop-item-right-other">{{item.level}} | {{item.scope}}</span>
<!-- <span v-if="item.pType == 1" <span v-if="item.cmeType != 2" class="coop-item-right-other">{{item.level}} | {{item.credit}} | {{item.scope}}</span>
class="coop-item-right-other" <span class="coop-item-right-other">
>起止日期 {{item.oldTime}}</span>--> {{item.startDate | formatTime('{y}.{m}.{d}')}}{{item.endDate | formatTime('{y}.{m}.{d}')}}
<!-- <span v-else <span v-if="item.cmeType == 2 && item.cardStatus != 1" class="active sk"><span>可试看</span></span>
class="coop-item-right-other" <span v-if="item.cmeType == 2 && item.cardStatus == 1" class="active"><span>已激活</span></span>
>起止日期 {{item.projectBegintimeLong | formatTime}}-{{item.projectEndtimeLong | formatTime}}</span>--> </span>
<span class="coop-item-right-other">{{item.startDate | formatTime('{y}.{m}.{d}')}}{{item.endDate | formatTime('{y}.{m}.{d}')}}</span>
</div> </div>
</div> </div>
<NoMoreContent v-show="paramData.length > 9"></NoMoreContent> <NoMoreContent v-show="paramData.length > 9"></NoMoreContent>
<NoContent v-show="!paramData.length && isShow" :tabNum="tabTo"></NoContent> <NoContent v-show="!paramData.length && isShow" :tabNum="tabTo"></NoContent>
<!--<UpdateDialog :showGoUpdate="showGoUpdate" @goUpdateHandler="goUpdateHandler"></UpdateDialog>-->
<!-- <van-popup
v-model="showGoUpdate"
position="bottom"
:style="{ height: '4.427rem' }"
>
<div class="update-dialog-content">
<p class="title">该项目仅对河北石家庄市的用户开放</p>
<p class="update-btn v-hairline-top confirm-btn" @click="goUpdateHandler">确定</p>
<p class="update-btn v-hairline-top" @click="showGoUpdate = false">取消</p>
</div>
</van-popup>-->
</section> </section>
</template> </template>
...@@ -52,7 +39,7 @@ import UpdateDialog from "@/components/business/update-dialog"; ...@@ -52,7 +39,7 @@ import UpdateDialog from "@/components/business/update-dialog";
import { setEventByModuleCode, deepCopy, getWebPageUrl } from "@/utils/index"; import { setEventByModuleCode, deepCopy, getWebPageUrl } from "@/utils/index";
import { getAppVersion } from "@/utils"; import { getAppVersion } from "@/utils";
import { mapActions, mapGetters } from "vuex"; import { mapActions, mapGetters } from "vuex";
import { Popup } from "vant"; import { Popup, Toast } from "vant";
export default { export default {
name: "coop-list-item", name: "coop-list-item",
...@@ -83,12 +70,18 @@ export default { ...@@ -83,12 +70,18 @@ export default {
userMobile: { userMobile: {
type: String, type: String,
default: "" default: ""
} },
provinceId: {
type: String | Number,
default: 0
},
organizationId: {
type: String | Number,
default: 0
},
}, },
computed: { computed: {
...mapGetters(["userInfo"]) ...mapGetters(["userInfo"])
// cBgColor() {
// }
}, },
components: { components: {
NoMoreContent, NoMoreContent,
...@@ -123,11 +116,38 @@ export default { ...@@ -123,11 +116,38 @@ export default {
} }
}, },
coopDetails(item) { coopDetails(item) {
this.$sendBuriedData({
component_tag: `880#8803#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
});
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
console.log('appVersionNum', appVersionNum);
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
// 临时添加
if(window.__isWeb) {
this.$router.push({
path: "/coop",
query: {
id: item.id,
coopType: this.coopType,
courseRequire: item.courseRequire,
provinceId: this.provinceId,
organizationId: this.organizationId
}
});
return;
}
if (this.userMobile) { if (this.userMobile) {
let paramList = [ let paramList = [
{ {
key: "pageUrl", key: "pageUrl",
value: getWebPageUrl(`cme/#/coop?id=${item.id}&courseRequire=${item.courseRequire}`), value: getWebPageUrl(`cme/#/coop?id=${item.id}&courseRequire=${item.courseRequire}&provinceId=${this.provinceId}&organizationId=${this.organizationId}`),
type: 4, type: 4,
seqNo: 1 seqNo: 1
} }
...@@ -139,104 +159,8 @@ export default { ...@@ -139,104 +159,8 @@ export default {
} else { } else {
rocNative.gotoLogin(); rocNative.gotoLogin();
} }
this.$sendBuriedData({
component_tag: `210#210002#${item.id}#${item.name}` //'210#210002#0#'+item.projectName
});
// if (item.courseRequire == 1) { //对课程完成度有控制,需判断版本号
// let appVersion = getAppVersion(this.userInfo.appVersion);
// // alert('版本'+appVersion)
// let flag = appVersion < 315;
// if (flag === true) {
// // 小于315版本,添加去更新弹层
// this.showGoUpdate = true;
// }else {
// // 跳转到老项目
// if(this.tabTo != 3) {
// this.setProjectTabIndex(this.tabTo)
// }
// if (item.pType == 1) {
// this.goToPage(item);
// // 跳转到新项目
// } else {
// this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
// }
// }
// } else {
// // 跳转到老项目
// if(this.tabTo != 3) {
// this.setProjectTabIndex(this.tabTo)
// }
// if (item.pType == 1) {
// this.goToPage(item);
// // 跳转到新项目
// } else {
// this.showModule(item, this.coopType, this.tabTo, item.courseRequire)
// // this.$router.push({
// // path: "/coop",
// // query: {
// // id: item.id,
// // coopType: this.coopType
// // }
// // });
// }
// }
}, },
// 跳转到新项目
// showModule(item, coopType, tabTo, courseRequire) {
// if (window.__isWeb) {
// if(item.parent === false) {
// this.$router.push({
// path: "/coop",
// query: {
// id: item.id,
// coopType: coopType,
// tabTo: tabTo,
// courseRequire: courseRequire,
// }
// });
// } else {
// this.$router.push({
// path: "/parent",
// query: {
// entryId: item.entryId,
// }
// });
// }
// return;
// }
// let pageUrl = "";
// let paramList = [];
// if(item.parent === false) {
// pageUrl = getWebPageUrl('coopv2/#/coop');
// paramList = [
// {
// key: "pageUrl",
// value: pageUrl + `?id=${item.id}&coopType=${coopType}&tabTo=${tabTo}&courseRequire=${courseRequire}`,
// type: 4,
// seqNo: 1
// }
// ]
// } else {
// pageUrl = getWebPageUrl('coopv2/#/parent');
// paramList = [
// {
// key: "pageUrl",
// value: pageUrl + `?entryId=${item.entryId}`,
// type: 4,
// seqNo: 1
// }
// ]
// }
// rocNative.dispatchEventByModuleCode({
// modeCode: "M300",
// jsonString: paramList
// });
// },
goToPage(item) { goToPage(item) {
let _this = this; let _this = this;
// 如果是湖北考试项目,则做相应权限判断 湖北的projectId=3 // 如果是湖北考试项目,则做相应权限判断 湖北的projectId=3
...@@ -309,41 +233,40 @@ export default { ...@@ -309,41 +233,40 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.coop-container { .coop-container {
position: relative; position: relative;
margin: px2rem(0px) px2rem(15px); margin: 0px 15px;
&-status { &-status {
position: absolute; position: absolute;
top: px2rem(6px); top: 6px;
left: 0; left: 0;
// display: block; // display: block;
width: px2rem(44px); width: 44px;
height: px2rem(18px); height: 18px;
line-height: px2rem(18px); line-height: 18px;
padding: px2rem(0px) 0 0 px2rem(4px); padding: 0px 0 0 4px;
background: rgba(88, 144, 221, 1); background: rgba(88, 144, 221, 1);
color: #fff; color: #fff;
font-size: px2rem(11px); font-size: 11px;
border-top-right-radius: px2rem(3px); border-top-right-radius: 3px;
border-bottom-right-radius: px2rem(3px); border-bottom-right-radius: 3px;
} }
} }
.coop-item { .coop-item {
display: flex; display: flex;
width: 100%; width: 100%;
height: px2rem(128px); height: 128px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
background: #fff; background: #fff;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: px2rem(115px); width: 115px;
height: px2rem(86px); height: 86px;
margin-right: px2rem(15px); margin-right: 15px;
border-radius: px2rem(3px); border-radius: 3px;
} }
&-left { &-left {
display: flex; display: flex;
...@@ -352,44 +275,64 @@ export default { ...@@ -352,44 +275,64 @@ export default {
} }
&-right { &-right {
display: flex; display: flex;
width: px2rem(215px); width: 215px;
flex-direction: column; flex-direction: column;
padding-top: px2rem(4px); padding-top: 4px;
&-title { &-title {
height: px2rem(50px); height: 50px;
line-height: px2rem(20px); line-height: 20px;
font-size: px2rem(16px); font-size: 16px;
font-weight: 700; font-weight: 700;
color: rgba(55, 56, 57, 1); color: rgba(55, 56, 57, 1);
} }
&-other { &-other {
height: px2rem(21px); height: 21px;
line-height: px2rem(20px); line-height: 20px;
font-size: px2rem(13px); font-size: 13px;
font-weight: 400; font-weight: 400;
color: rgba(151, 152, 153, 1); color: rgba(151, 152, 153, 1);
width: px2rem(210px); width: 210px;
overflow : hidden; overflow : hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space:nowrap; white-space:nowrap;
.active {
position: absolute;
z-index: 1;
right: 0;
height: 18px;
line-height: 18px;
color: #CAA861;
border-radius: 3px;
// border: 1px solid rgba(202,168,97,1);
&.sk {
color: rgba(68, 146, 132, 1);
}
span {
position: relative;
top: -0.5px;
z-index: 2;
font-size: 11px;
padding: 0 4px;
}
}
} }
} }
} }
.update-dialog-content { .update-dialog-content {
padding: 0 px2rem(15px); padding: 0 15px;
box-sizing: border-box; box-sizing: border-box;
.title { .title {
text-align: center; text-align: center;
color: #373839; color: #373839;
font-size: px2rem(18px); font-size: 18px;
padding: px2rem(15px) 0; padding: 15px 0;
line-height: px2rem(25px); line-height: 25px;
} }
.update-btn { .update-btn {
text-align: center; text-align: center;
height: px2rem(55px); height: 55px;
line-height: px2rem(55px); line-height: 55px;
font-size: px2rem(16px); font-size: 16px;
color: #979899; color: #979899;
&.confirm-btn { &.confirm-btn {
color: #449284; color: #449284;
......
...@@ -174,26 +174,25 @@ export default { ...@@ -174,26 +174,25 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.mater-container { .mater-container {
position: relative; position: relative;
margin: px2rem(0px) px2rem(15px); margin: 0px 15px;
} }
.mater-item { .mater-item {
display: flex; display: flex;
// width: 100%; // width: 100%;
height: px2rem(80px); height: 80px;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
background: #fff; background: #fff;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
img { img {
width: px2rem(35px); width: 35px;
height: px2rem(37px); height: 37px;
margin-right: px2rem(10px); margin-right: 10px;
border-radius: px2rem(3px) px2rem(2px) px2rem(2px) px2rem(3px); border-radius: 3px 2px 2px 3px;
} }
&-left { &-left {
display: flex; display: flex;
...@@ -202,40 +201,40 @@ export default { ...@@ -202,40 +201,40 @@ export default {
} }
&-right { &-right {
display: flex; display: flex;
// width: px2rem(215px); // width: 215px;
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
padding-top: px2rem(4px); padding-top: 4px;
&-title { &-title {
// height: px2rem(50px); // height: 50px;
line-height: px2rem(23px); line-height: 23px;
font-size: px2rem(15px); font-size: 15px;
font-weight: 700; font-weight: 700;
color: rgba(55, 56, 57, 1); color: rgba(55, 56, 57, 1);
} }
&-other { &-other {
height: px2rem(22px); height: 22px;
line-height: px2rem(20px); line-height: 20px;
font-size: px2rem(13px); font-size: 13px;
font-weight: 400; font-weight: 400;
color: rgba(151, 152, 153, 1); color: rgba(151, 152, 153, 1);
} }
} }
.mater-details { .mater-details {
position: relative; position: relative;
right: px2rem(-10px); right: -10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
span { span {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(14px); font-size: 14px;
font-weight: 700; font-weight: 700;
color: #666; color: #666;
} }
img { img {
width: px2rem(15px); width: 15px;
height: px2rem(16px); height: 16px;
} }
} }
} }
......
...@@ -97,52 +97,52 @@ export default { ...@@ -97,52 +97,52 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.comp-title-container { .comp-title-container {
margin-top: px2rem(17px); margin-top: 17px;
padding-left: px2rem(15px); padding-left: 15px;
// display: flex; // display: flex;
// flex-direction: row; // flex-direction: row;
// justify-content: space-between; // justify-content: space-between;
.comp-text { .comp-text {
position: relative; position: relative;
width: px2rem(345px); // width: 345px;
width: 100%;
overflow: hidden; overflow: hidden;
} }
} }
.comp-title { .comp-title {
position: relative; position: relative;
width: px2rem(238px); width: 238px;
float: left; float: left;
line-height: px2rem(30px); line-height: 30px;
} }
.comp-title-explain { .comp-title-explain {
position: relative; position: relative;
float: right; float: right;
// margin-right: px2rem(15px); // margin-right: 15px;
margin-top: px2rem(3px); margin-top: 3px;
span { span {
font-size: px2rem(14px); font-size: 14px;
font-weight: 400; font-weight: 400;
color: rgba(12, 21, 39, 0.4); color: rgba(12, 21, 39, 0.4);
// margin-right: px2rem(3px); // margin-right: 3px;
line-height: px2rem(18px); line-height: 18px;
height: px2rem(18px); height: 18px;
vertical-align: middle; vertical-align: middle;
} }
img { img {
width: px2rem(8px); width: 8px;
height: px2rem(12px); height: 12px;
vertical-align: middle; vertical-align: middle;
} }
} }
.cert-img { .cert-img {
margin-top: px2rem(1px); margin-top: 1px;
.banner-img { .banner-img {
width: px2rem(70px); width: 70px;
height: px2rem(20px); height: 20px;
padding-top: px2rem(2px); padding-top: 2px;
} }
} }
</style> </style>
\ No newline at end of file
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
class="nc-container-img" class="nc-container-img"
src="../../images/cme/no-content.png" src="../../images/cme/no-content.png"
> >
<span v-if="tabNum == 1" class="nc-container-text">您还未参加CME项目哦~</span> <span v-if="tabNum == 1" class="nc-container-text">您还未参加继教项目哦~</span>
<span v-if="tabNum == 2" class="nc-container-text">当前无可学CME项目哦~</span> <span v-if="tabNum == 2" class="nc-container-text">当前无可学继教项目哦~</span>
</section> </section>
</template> </template>
...@@ -24,27 +24,26 @@ export default { ...@@ -24,27 +24,26 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.nc-container { .nc-container {
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
margin-top: px2rem(150px); margin-top: 100px;
margin-bottom: px2rem(20px); margin-bottom: 20px;
text-align: center; text-align: center;
// margin: 0 auto; // margin: 0 auto;
&-img { &-img {
margin-left: px2rem(100px); margin-left: 100px;
width: px2rem(150px); width: 150px;
height: px2rem(150px); height: 150px;
} }
&-text { &-text {
height: px2rem(21px); height: 21px;
line-height: px2rem(21px); line-height: 21px;
font-size: px2rem(15px); font-size: 15px;
font-weight: 400; font-weight: 400;
color: rgba(153, 153, 153, 1); color: rgba(153, 153, 153, 1);
} }
......
...@@ -17,13 +17,12 @@ ...@@ -17,13 +17,12 @@
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.nc-container { .nc-container {
display: flex; display: flex;
&-content { &-content {
width: 100%; width: 100%;
height: px2rem(62px); height: 62px;
} }
} }
</style> </style>
......
...@@ -19,35 +19,34 @@ export default { ...@@ -19,35 +19,34 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.nc-container { .nc-container {
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
margin-top: px2rem(70px); margin-top: 70px;
text-align: center; text-align: center;
// margin: 0 auto; // margin: 0 auto;
&-img { &-img {
width: px2rem(60px); width: 60px;
height: px2rem(72px); height: 72px;
margin-left: px2rem(157px); margin-left: 157px;
margin-bottom: px2rem(15px); margin-bottom: 15px;
} }
&-text1 { &-text1 {
height: px2rem(15px); height: 15px;
line-height: px2rem(15px); line-height: 15px;
font-size: px2rem(15px); font-size: 15px;
font-weight: 500; font-weight: 500;
color:rgba(103, 104, 105, 1); color:rgba(103, 104, 105, 1);
} }
&-text2 { &-text2 {
height: px2rem(16px); height: 16px;
line-height: px2rem(16px); line-height: 16px;
margin-top: px2rem(6px); margin-top: 6px;
font-size: px2rem(13px); font-size: 13px;
font-weight: 400; font-weight: 400;
color: rgba(151, 152, 153, 1); color: rgba(151, 152, 153, 1);
} }
......
...@@ -48,49 +48,48 @@ export default { ...@@ -48,49 +48,48 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.item-notice-wrapper { .item-notice-wrapper {
.content { .content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: px2rem(32px); height: 32px;
line-height: px2rem(32px); line-height: 32px;
padding: 0 px2rem(15px); padding: 0 15px;
text-align: left; text-align: left;
align-items: center; align-items: center;
background: #FEFAF5; background: #FEFAF5;
img { img {
width: px2rem(12px); width: 12px;
height: px2rem(12px); height: 12px;
line-height: px2rem(32px); line-height: 32px;
} }
span { span {
font-size: px2rem(13px); font-size: 13px;
text-align: left; text-align: left;
&.gg { &.gg {
// width: px2rem(30px); // width: 30px;
padding: px2rem(1px) px2rem(5px) 0; padding: 1px 5px 0;
font-size: px2rem(13px); font-size: 13px;
font-weight: 700; font-weight: 700;
color: #835800; color: #835800;
} }
&.vtc-line { &.vtc-line {
margin-top: px2rem(0px); margin-top: 0px;
width: px2rem(1px); width: 1px;
height: px2rem(15px); height: 15px;
background: #835800; background: #835800;
} }
&.content { &.content {
display: block; display: block;
flex: 1; flex: 1;
padding-top: px2rem(1px); padding-top: 1px;
// padding-left: px2rem(5px) !important; // padding-left: 5px !important;
padding: 0 px2rem(10px) 0 px2rem(5px); padding: 0 10px 0 5px;
height: px2rem(32px); height: 32px;
line-height: px2rem(32px); line-height: 32px;
text-align: left; text-align: left;
font-size: px2rem(13px); font-size: 13px;
font-weight: 700; font-weight: 700;
color: #E6A23C; color: #E6A23C;
white-space: nowrap; white-space: nowrap;
......
...@@ -150,8 +150,7 @@ export default { ...@@ -150,8 +150,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.pop-sign-box { .pop-sign-box {
position: fixed; position: fixed;
width: 100%; width: 100%;
...@@ -162,67 +161,67 @@ export default { ...@@ -162,67 +161,67 @@ export default {
.pop-box { .pop-box {
background: #fff; background: #fff;
// background: #00FF00 url(../../images/tankuang.png) no-repeat center center ; // background: #00FF00 url(../../images/tankuang.png) no-repeat center center ;
width: px2rem(280px); width: 280px;
height: px2rem(312px); height: 312px;
border-radius: px2rem(7px); border-radius: 7px;
position: absolute; position: absolute;
z-index: 112; z-index: 112;
text-align: center; text-align: center;
left: 50%; left: 50%;
top: 50%; top: 50%;
margin: px2rem(-180px) 0 0 px2rem(-140px); margin: -180px 0 0 -140px;
img { img {
width: px2rem(280px); width: 280px;
height: px2rem(312px); height: 312px;
vertical-align: middle; vertical-align: middle;
} }
&-btn { &-btn {
position: relative; position: relative;
top: px2rem(-62px); top: -62px;
display: inline-block; display: inline-block;
width: px2rem(215px); width: 215px;
height: px2rem(44px); height: 44px;
line-height: px2rem(44px); line-height: 44px;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(16px); font-size: 16px;
background: linear-gradient( background: linear-gradient(
360deg, 360deg,
rgba(255, 227, 97, 1) 0%, rgba(255, 227, 97, 1) 0%,
rgba(255, 217, 121, 1) 100% rgba(255, 217, 121, 1) 100%
); );
box-shadow: 0px px2rem(4px) px2rem(4px) 0px rgba(0, 0, 0, 0.09); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.09);
border-radius: px2rem(22px); border-radius: 22px;
color: #a78400; color: #a78400;
font-weight: 700; font-weight: 700;
} }
} }
.pop-text { .pop-text {
position: absolute; position: absolute;
top: px2rem(160px); top: 160px;
width: 100%; width: 100%;
text-align: center; text-align: center;
&-joy { &-joy {
color: #ff9a4b; color: #ff9a4b;
font-size: px2rem(24px); font-size: 24px;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-weight: 700; font-weight: 700;
} }
&-tips { &-tips {
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
color: #ff9a4b; color: #ff9a4b;
font-size: px2rem(14px); font-size: 14px;
font-weight: 400; font-weight: 400;
padding: px2rem(8px) px2rem(10px) px2rem(24px) px2rem(10px); padding: 8px 10px 24px 10px;
} }
} }
// .si-joy { // .si-joy {
// color: #ff7c26; // color: #ff7c26;
// font-size: px2rem(18px); // font-size: 18px;
// } // }
// .si-tips { // .si-tips {
// color: #666; // color: #666;
// font-size: px2rem(14px); // font-size: 14px;
// padding: px2rem(8px) px2rem(10px) px2rem(24px) px2rem(10px); // padding: 8px 10px 24px 10px;
// } // }
.pop-mask { .pop-mask {
position: absolute; position: absolute;
...@@ -233,18 +232,18 @@ export default { ...@@ -233,18 +232,18 @@ export default {
} }
.sin-close { .sin-close {
position: absolute; position: absolute;
width: px2rem(30px); width: 30px;
height: px2rem(30px); height: 30px;
bottom: px2rem(-50px); bottom: -50px;
margin-left: px2rem(-15px); margin-left: -15px;
left: 50%; left: 50%;
img { img {
width: px2rem(30px); width: 30px;
height: px2rem(30px); height: 30px;
display: block; display: block;
} }
} }
// font-size:px2rem(12px) ; // font-size:12px ;
} }
</style> </style>
...@@ -60,8 +60,7 @@ export default { ...@@ -60,8 +60,7 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.pop-notice-wrapper { .pop-notice-wrapper {
position: fixed; position: fixed;
width: 100%; width: 100%;
...@@ -69,7 +68,7 @@ export default { ...@@ -69,7 +68,7 @@ export default {
left: 0; left: 0;
top: 0; top: 0;
z-index: 110; z-index: 110;
font-size: px2rem(20px); font-size: 20px;
.mask { .mask {
position: absolute; position: absolute;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
...@@ -82,19 +81,19 @@ export default { ...@@ -82,19 +81,19 @@ export default {
left: 50%; left: 50%;
top: 50%; top: 50%;
z-index: 112; z-index: 112;
width: px2rem(300px); width: 300px;
// height: px2rem(185px); // height: 185px;
margin: px2rem(-150px) 0 0 px2rem(-150px); margin: -150px 0 0 -150px;
border-radius: px2rem(3px); border-radius: 3px;
text-align: center; text-align: center;
background: #fff; background: #fff;
.top { .top {
padding: px2rem(30px); padding: 30px;
.title { .title {
display: inline-block; display: inline-block;
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(28px); line-height: 28px;
word-break: break-all; word-break: break-all;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
...@@ -103,10 +102,10 @@ export default { ...@@ -103,10 +102,10 @@ export default {
text-align: left; text-align: left;
word-break: break-all; word-break: break-all;
display: inline-block; display: inline-block;
margin: px2rem(14px) 0; margin: 14px 0;
font-size: px2rem(14px); font-size: 14px;
height: px2rem(21px); height: 21px;
line-height: px2rem(21px); line-height: 21px;
font-weight: 400; font-weight: 400;
color: #676869; color: #676869;
.b { .b {
...@@ -115,18 +114,18 @@ export default { ...@@ -115,18 +114,18 @@ export default {
} }
} }
.line { .line {
width: px2rem(300px); width: 300px;
height: px2rem(1px); height: 1px;
background: rgba(240, 241, 242, 1); background: rgba(240, 241, 242, 1);
} }
.bottom { .bottom {
text-align: center; text-align: center;
font-size: px2rem(17px); font-size: 17px;
height: px2rem(50px); height: 50px;
line-height: px2rem(50px); line-height: 50px;
font-weight: 400; font-weight: 400;
span { span {
font-size: px2rem(17px); font-size: 17px;
color: #449284; color: #449284;
} }
} }
......
...@@ -31,8 +31,7 @@ export default { ...@@ -31,8 +31,7 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.dialog-mask-container{ .dialog-mask-container{
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -54,24 +53,24 @@ export default { ...@@ -54,24 +53,24 @@ export default {
top: 50%; top: 50%;
left: 50%; left: 50%;
overflow: hidden; overflow: hidden;
width: px2rem(300px); width: 300px;
font-size: px2rem(18px); font-size: 18px;
-webkit-transition: .3s; -webkit-transition: .3s;
transition: .3s; transition: .3s;
border-radius: px2rem(4px); border-radius: 4px;
background-color: #fff; background-color: #fff;
-webkit-transform: translate3d(-50%,-50%,0); -webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
.dialog-content{ .dialog-content{
padding: px2rem(30px) px2rem(22px); padding: 30px 22px;
text-align: center; text-align: center;
font-size: px2rem(18px); font-size: 18px;
color: #373839; color: #373839;
} }
.dialog-footer{ .dialog-footer{
height: px2rem(50px); height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
&.v-hairline-top::after{ &.v-hairline-top::after{
...@@ -80,9 +79,9 @@ export default { ...@@ -80,9 +79,9 @@ export default {
span{ span{
display: inline-block; display: inline-block;
width: 50%; width: 50%;
height: px2rem(50px); height: 50px;
line-height: px2rem(50px); line-height: 50px;
font-size: px2rem(17px); font-size: 17px;
text-align: center; text-align: center;
color: #979899; color: #979899;
&.v-hairline-left::after{ &.v-hairline-left::after{
......
<template>
<section @click="jumpToCardList" class="I-card-item-wrapper">
<article class="item">
<img class="left-icon" src="../../images/cme/phrase2/I-img.png" alt />
<article class="center">
<span class="top">国家级继续医学教育项目(远程)</span>
<span class="bottom">上百个项目持续更新上线</span>
</article>
<img class="right-icon" src="../../images/cme/phrase2/arr-right.png" alt />
</article>
</section>
</template>
<script>
import { Toast } from 'vant';
import { getWebPageUrl } from "@/utils/index";
import { mapGetters } from "vuex";
export default {
data() {
return {};
},
props: {
oneLevelUrl: {
type: String,
default: ""
},
provinceId: {
type: String | Number,
default: ""
},
organizationId: {
type: String | Number,
default: ""
},
cmeToken: {
type: String,
default: ""
}
},
computed: {
...mapGetters(["userInfo"])
},
methods: {
// 跳转I类学习详情(介绍)页面
jumpToCardList() {
this.$sendBuriedData({
component_tag: "880#8802"
});
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
console.log('appVersionNum', appVersionNum);
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
if (!this.userInfo.userMobile) {
rocNative.gotoLogin();
return;
}
if (window.__isWeb) {
console.log("in jumpToCardList");
return;
} else {
let pageUrl = getWebPageUrl("cme/#/icredit-detail");
let paramList = [
{
key: "pageUrl",
value: `${pageUrl}?provinceId=${this.provinceId}&organizationId=${this.organizationId}&cmeToken=${this.cmeToken}&oneLevelUrl=` + encodeURIComponent(this.oneLevelUrl),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
}
}
}
};
</script>
<style lang="less" scoped>
.I-card-item-wrapper {
// width: 100%;
margin: 0 15px;
.item {
// width: 100%;
display: flex;
height: 72px;
flex-direction: row;
align-content: space-between;
align-items: center;
// box-sizing: border-box;
padding: 0 15px;
background: #f8f9fa;
border-radius: 6px;
.left-icon {
width: 40px;
height: 40px;
margin-right: 15px;
}
.center {
position: relative;
top: -4px;
left: 0;
display: flex;
flex-direction: column;
flex: 1;
height: 40px;
align-content: flex-start;
text-align: left;
.top {
height: 26px;
line-height: 26px;
font-size: 16px;
font-weight: 700;
color: rgba(55, 56, 57, 1);
}
.bottom {
font-size: 14px;
font-weight: 400;
color: rgba(151, 152, 153, 1);
}
}
.right-icon {
width: 15px;
height: 15px;
}
}
}
</style>
\ No newline at end of file
<template> <template>
<div class="basic-container"> <div class="basic-container">
<div class="basic-title">基本信息</div> <div class="basic-title">基本信息</div>
<div class="content"> <!-- <div v-if="projectNo" class="content">
<span>项目编号</span> <span>项目编号</span>
<span>{{projectNo}}</span> <span>{{projectNo}}</span>
</div> </div> -->
<div class="content"> <div class="pro-name">
<span>学习收获</span> <span class="title">项目名称</span>
<span>{{level}} {{projectCredit}}</span> <span class="name">{{projectName}}</span>
</div> </div>
<div class="content"> <!-- <div class="content"> -->
<span>申请范围</span> <!-- <span>学习收获</span>
<span>{{scope}}</span> <span>
</div> {{level}}
<div class="remind" v-if="remind"> <b v-show="cmeType !=2" class="split"></b>
<span>{{remind}}</span> {{ cmeType !=2 ? projectCredit : ''}}
</div> </span> -->
<div class="content"> <!-- <span>{{level}} | {{projectCredit}}</span> -->
<span>起止时间</span> <!-- </div> -->
<span>{{startDate | formatTime('{y}.{m}.{d}')}}{{endDate | formatTime('{y}.{m}.{d}')}}</span> <div class="content">
</div> <!-- <span>申请范围</span> -->
<div class="content"> <span>学习范围</span>
<span>发起机构</span> <span>{{scope}}</span>
<span>{{organName}}</span>
</div>
</div> </div>
<div class="remind" v-if="remind && cmeType != 2">
<span>{{remind}}</span>
</div>
<div class="content">
<span>起止时间</span>
<span>{{startDate | formatTime('{y}.{m}.{d}')}}{{endDate | formatTime('{y}.{m}.{d}')}}</span>
</div>
<div class="content">
<!-- <span>{{cmeType == 2 ? '主办单位' : '发起机构'}}</span> -->
<!-- <span>主办单位</span> -->
<!-- <span>申办单位</span> -->
<span>出版单位</span>
<span>{{organName}}</span>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
projectNo: { projectNo: {
type: String, type: String,
default: "GWKX-20180326-42843" default: "GWKX-20180326-42843"
}, },
credit: { credit: {
type: String, type: String,
default: "" default: ""
}, },
level: { level: {
type: String, type: String,
default: "" default: ""
}, },
scope: { scope: {
type: String, type: String,
default: "" default: ""
}, },
startDate: { startDate: {
type: Number, type: Number,
default: "" default: ""
}, },
endDate: { endDate: {
type: Number, type: Number,
default: "" default: ""
}, },
organName: { organName: {
type: String, type: String,
default: "" default: ""
}, },
remind: { remind: {
type: String, type: String,
default: "" default: ""
}, },
projectCredit: { projectCredit: {
type: String, type: String,
default: "" default: ""
} },
cmeType: {
type: String | Number,
default: 2
},
projectName: {
type: String,
default: ""
} }
} }
};
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.basic-container { .basic-container {
padding-bottom: px2rem(20px); padding-bottom: 20px;
margin: px2rem(30px) px2rem(15px) 0px; margin: 30px 15px 0px;
border-bottom: px2rem(1px) solid #E7E8E9; // border-bottom: 1px solid #e7e8e9;
.basic-title { .basic-title {
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(18px); line-height: 18px;
color: #373839; color: #373839;
font-weight: 700; 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;
} }
.content {
margin-top: px2rem(16px);
height: px2rem(16px); }
line-height: px2rem(0px); .remind {
span { line-height: 14px;
display: inline-block; margin-top: 10px;
font-size: px2rem(14px); span {
} position: relative;
span:first-child { display: inline-block;
color: #979899; padding: 5px 10px;
} margin-left: 78px;
span:last-child { font-size: 14px;
margin-left: px2rem(15px); color: #fb5b52;
color: #676869; background: #fceeed;
} border-radius: 4px;
} }
.remind { span:after {
line-height: px2rem(14px); content: "";
margin-top: px2rem(10px); position: absolute;
span { left: 10px;
position: relative; bottom: 20px;
display: inline-block; width: 0;
padding: px2rem(5px) px2rem(10px); height: 0;
margin-left: px2rem(78px); border-width: 0 8px 8px;
font-size: px2rem(14px); border-style: solid;
color: #FB5B52; border-color: transparent transparent #fceeed;
background: #FCEEED;
border-radius: px2rem(4px);
}
span:after {
content: "";
position: absolute;
left: px2rem(10px);
bottom: px2rem(20px);
width: 0;
height: 0;
border-width: 0 px2rem(8px) px2rem(8px);
border-style: solid;
border-color: transparent transparent #FCEEED;
}
} }
}
} }
</style> </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: `883#88317`
});
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>激活或购买后可学习课程</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.$sendBuriedData({
component_tag: `883#88324`
});
this.$emit("changeClick")
},
gotoBuy() {
this.$sendBuriedData({
component_tag: `883#88323`
});
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: {
userMobile: {
type: String | Number,
default: ''
}
},
computed: {
...mapGetters(["userInfo"])
},
methods: {
// 跳转到学习卡列表页面
jumpToCardList() {
// 如果没有登录,则要去登录页面
// 打开页面埋点
this.$sendBuriedData({
component_tag: "880#8801"
});
let appVersion = this.userInfo.appVersion;
let appVersionNum = appVersion.split('.').join('');
console.log('appVersionNum', appVersionNum);
if(appVersionNum < 341) {
Toast('请您下载新版本App');
return;
}
if (!this.userMobile) {
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>
\ No newline at end of file
<template>
<section class="card-popup-wrapper">
<van-popup
v-model="isShow"
position="center"
@click-overlay="clickOverlay"
>
<article class="content">
<p class="title">学分项目必须使用学习卡</p>
<p class="title">请先购买学习卡</p>
<section class="card-info">
<img v-if="cardInfo.cardType == 1" class="icon" src="../../images/cme/phrase2/I-card-icon.png" alt />
<img v-else class="icon" src="../../images/cme/phrase2/II-card-icon.png" alt />
<div class="info2">
<span class="name">{{cardInfo.goodsName}}</span>
<p>
<span class="price">{{(cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span><span v-show="cardInfo.preferentialPrice" class="discount"><del> 原价¥{{cardInfo.costPrice | formatMoney}}</del></span>
</p>
</div>
<!-- <div class="info2">
<span class="name">已购买去学习已购买去学购买去学习买</span>
<p>
<span class="price">¥100</span><span class="discount"><del> 原价¥120</del></span>
</p>
</div> -->
</section>
<div class="line"></div>
<div class="btn">
<span class="left" @click="cancle">已购买去学习</span>
<span class="vert-line"></span>
<span class="right" @click="confirm">去购买</span>
</div>
</article>
</van-popup>
</section>
</template>
<script>
import { Popup } from "vant";
export default {
data() {
return {
}
},
props: {
isShow: {
type: Boolean,
default: false,
},
cardInfo: {
id: 10031,
goodsVersion: 1,
cardType: 1,
costPrice: 0,
preferentialPrice: 0,
goodsDesc: "",
goodsName: "学习卡",
goodsType: 2,
isSale: 1,
}
},
methods: {
clickOverlay() {
this.$emit('clickOverlay');
},
cancle() {
this.$emit('cancle');
},
confirm() {
this.$emit('confirm');
}
},
}
</script>
<style lang="less" scoped>
.card-popup-wrapper {
.content {
font-size: 14px;
width: 300px;
// height: 245px;
padding-top: 30px;
.title {
text-align: center;
font-size: 18px;
font-weight: 700;
}
.card-info {
display: flex;
flex-direction: row;
align-items: center;
height: 76px;
margin: 15px;
padding: 0 8px;
background: #F8F9FA;
border-radius: 6px;
font-size: 14px;
.icon {
width: 60px;
height: 60px;
margin-right: 8px;
}
.info {
width: 100%;
position: relative;
top: 0;
left: 0;
.name {
position: absolute;
top: -30px;
left: 4px;
}
p {
position: absolute;
bottom: -34px;
left: 0px;
display: flex;
align-items: center;
.price {
color: #FB5B52;
font-size: 18px;
font-weight: 700;
margin-right: 8px;
}
.discount {
color: #979899;
}
}
}
.info2 {
display: flex;
flex-direction: column;
// .name {
// position: absolute;
// top: -30px;
// left: 4px;
// }
p {
display: flex;
align-items: center;
height: 24px;
line-height: 24px;
.price {
color: #FB5B52;
font-size: 18px;
font-weight: 700;
margin-right: 8px;
}
.discount {
color: #979899;
}
}
}
}
.line {
margin-top: 30px;
height: 1px;
background: #F0F1F2;
}
.btn {
width: 100%;
display: flex;
flex-direction: row;
// justify-content: space-between;
align-items: center;
height: 50px;
// margin-top: 15px;
font-size: 17px;
.left {
flex: 1;
text-align: center;
color: #979899;
// border-right: 1px solid #F0F1F2;
}
.vert-line {
border-right: 1px solid #F0F1F2;
// width: 1px;
height: 100%;
}
.right {
flex: 1;
text-align: center;
color: #449284;
}
}
}
.van-popup.van-popup--center {
border-radius: 4px;
}
}
</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="请输入激活码"
/>
<!-- <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: `883#88325`
});
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 = ''
}
}
};
</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>
\ No newline at end of file
...@@ -74,7 +74,7 @@ export default { ...@@ -74,7 +74,7 @@ export default {
default: "" default: ""
}, },
projectId: { projectId: {
type: String, type: String | Number,
default: "1" default: "1"
}, },
inScope: { inScope: {
...@@ -208,11 +208,10 @@ export default { ...@@ -208,11 +208,10 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.step-content { .step-content {
position: relative; position: relative;
height: px2rem(110px); height: 110px;
background: rgba(248, 249, 250, 1); background: rgba(248, 249, 250, 1);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -221,25 +220,25 @@ export default { ...@@ -221,25 +220,25 @@ export default {
.step-item { .step-item {
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
padding-top: px2rem(20px); padding-top: 20px;
line-height: px2rem(20px); line-height: 20px;
span { span {
display: inline-block; display: inline-block;
width: px2rem(20px); width: 20px;
height: px2rem(20px); height: 20px;
line-height: px2rem(17px); line-height: 17px;
border-radius: 50%; border-radius: 50%;
background: #676869; background: #676869;
border: 2px solid rgba(255, 255, 255, 1); border: 2px solid rgba(255, 255, 255, 1);
color: #fff; color: #fff;
font-size: px2rem(12px); font-size: 12px;
font-weight: 700; font-weight: 700;
} }
span.actived { span.actived {
background: #449284; background: #449284;
} }
p { p {
font-size: px2rem(13px); font-size: 13px;
color: #373839; color: #373839;
} }
p.actived { p.actived {
...@@ -248,19 +247,19 @@ export default { ...@@ -248,19 +247,19 @@ export default {
} }
.step-line { .step-line {
position: absolute; position: absolute;
top: px2rem(58px); top: 58px;
width: px2rem(75px); width: 75px;
height: px2rem(3px); height: 3px;
background: #dadde1; background: #dadde1;
} }
.step-one-line { .step-one-line {
left: px2rem(56px); left: 56px;
} }
.step-two-line { .step-two-line {
left: px2rem(150px); left: 150px;
} }
.step-three-line { .step-three-line {
right: px2rem(56px); right: 56px;
} }
.step-one-line.actived, .step-one-line.actived,
.step-two-line.actived, .step-two-line.actived,
...@@ -269,113 +268,113 @@ export default { ...@@ -269,113 +268,113 @@ export default {
} }
.step-text { .step-text {
position: absolute; position: absolute;
top: px2rem(25px); top: 25px;
padding: px2rem(4px) px2rem(6px); padding: 4px 6px;
background: #449284; background: #449284;
border-radius: px2rem(10px); border-radius: 10px;
font-size: px2rem(12px); font-size: 12px;
line-height: px2rem(12px); line-height: 12px;
color: #fff; color: #fff;
img { img {
display: inline-block; display: inline-block;
width: px2rem(6px); width: 6px;
height: px2rem(9px); height: 9px;
padding-left: px2rem(4px); padding-left: 4px;
} }
} }
.step1-text { .step1-text {
left: px2rem(20px); left: 20px;
} }
.step1-text:after { .step1-text:after {
content: ""; content: "";
width: px2rem(0px); width: 0px;
height: px2rem(0px); height: 0px;
border-top: px2rem(7px) solid #449284; border-top: 7px solid #449284;
border-left: px2rem(7px) solid transparent; border-left: 7px solid transparent;
border-right: px2rem(7px) solid transparent; border-right: 7px solid transparent;
position: absolute; position: absolute;
top: px2rem(18px); top: 18px;
left: px2rem(21px); left: 21px;
} }
.step2-text { .step2-text {
left: px2rem(106px); left: 106px;
} }
.step2-text:after, .step2-text:after,
.step3-text:after { .step3-text:after {
content: ""; content: "";
width: px2rem(0px); width: 0px;
height: px2rem(0px); height: 0px;
border-top: px2rem(7px) solid #449284; border-top: 7px solid #449284;
border-left: px2rem(7px) solid transparent; border-left: 7px solid transparent;
border-right: px2rem(7px) solid transparent; border-right: 7px solid transparent;
position: absolute; position: absolute;
top: px2rem(18px); top: 18px;
left: px2rem(29px); left: 29px;
} }
.step3-text { .step3-text {
left: px2rem(207px); left: 207px;
} }
.step3-text:after { .step3-text:after {
content: ""; content: "";
width: px2rem(0px); width: 0px;
height: px2rem(0px); height: 0px;
border-top: px2rem(7px) solid #449284; border-top: 7px solid #449284;
border-left: px2rem(7px) solid transparent; border-left: 7px solid transparent;
border-right: px2rem(7px) solid transparent; border-right: 7px solid transparent;
position: absolute; position: absolute;
top: px2rem(18px); top: 18px;
left: px2rem(21px); left: 21px;
} }
.step4-text { .step4-text {
right: px2rem(20px); right: 20px;
} }
.step4-text:after { .step4-text:after {
content: ""; content: "";
width: px2rem(0px); width: 0px;
height: px2rem(0px); height: 0px;
border-top: px2rem(7px) solid #449284; border-top: 7px solid #449284;
border-left: px2rem(7px) solid transparent; border-left: 7px solid transparent;
border-right: px2rem(7px) solid transparent; border-right: 7px solid transparent;
position: absolute; position: absolute;
top: px2rem(18px); top: 18px;
right: px2rem(20px); right: 20px;
} }
.apply-score-content { .apply-score-content {
display: flex; display: flex;
position: absolute; position: absolute;
left: px2rem(105px); left: 105px;
top: px2rem(-42px); top: -42px;
background: #000; background: #000;
opacity: 0.6; opacity: 0.6;
width: px2rem(236px); width: 236px;
height: px2rem(51px); height: 51px;
border-radius: px2rem(6px); border-radius: 6px;
.title { .title {
font-size: px2rem(12px); font-size: 12px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
margin: px2rem(7px) px2rem(11px) 0 px2rem(0px); margin: 7px 11px 0 0px;
width: px2rem(133px); width: 133px;
} }
.lm { .lm {
width: px2rem(41px); width: 41px;
img { img {
display: inline-block; display: inline-block;
width: px2rem(20px); width: 20px;
padding: 0 0 px2rem(7px) px2rem(15px); padding: 0 0 7px 15px;
} }
} }
.line { .line {
width: px2rem(1px); width: 1px;
height: px2rem(51px); height: 51px;
background: #fff; background: #fff;
opacity: 0.18; opacity: 0.18;
} }
.rm { .rm {
width: px2rem(41px); width: 41px;
img { img {
display: inline-block; display: inline-block;
width: px2rem(15px); width: 15px;
padding: 0 px2rem(15px) px2rem(7px); padding: 0 15px 7px;
} }
} }
} }
......
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.common-bottom-info-wrapper { .common-bottom-info-wrapper {
position: fixed; position: fixed;
width: 100%; width: 100%;
......
...@@ -27,19 +27,18 @@ export default { ...@@ -27,19 +27,18 @@ export default {
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.common-button-wrapper { .common-button-wrapper {
font-size: px2rem(14px); font-size: 14px;
margin: px2rem(20px) px2rem(15px); margin: 20px 15px;
text-align: center; text-align: center;
&.button-default { &.button-default {
span { span {
display: block; display: block;
height: px2rem(50px); height: 50px;
line-height: px2rem(50px); line-height: 50px;
width: 100%; width: 100%;
border-radius: px2rem(25px); border-radius: 25px;
font-size: 17px; font-size: 17px;
font-weight: 700; font-weight: 700;
color: #FFFFFF; color: #FFFFFF;
......
...@@ -5,8 +5,8 @@ ...@@ -5,8 +5,8 @@
<div class="dialog-content">{{content}}</div> <div class="dialog-content">{{content}}</div>
<div v-show="needSubContent" class="dialog-sub-content" v-html="subContent"></div> <div v-show="needSubContent" class="dialog-sub-content" v-html="subContent"></div>
<div class="dialog-footer v-hairline-top"> <div class="dialog-footer v-hairline-top">
<span :class="{'single-btn': isSingle}" @click.stop.prevent="handlerAction(1)">{{cancleBtnText}}</span> <span :class="{'single-btn': isSingle}" @click="handlerAction(1)">{{cancleBtnText}}</span>
<span v-show="!isSingle" class="confirm-btn v-hairline-left" @click.stop.prevent="handlerAction(2)">{{confirmBtnText}}</span> <span v-show="!isSingle" class="confirm-btn v-hairline-left" @click="handlerAction(2)">{{confirmBtnText}}</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -56,8 +56,7 @@ export default { ...@@ -56,8 +56,7 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.common-dialog-wrraper { .common-dialog-wrraper {
position: fixed; position: fixed;
top: 0; top: 0;
...@@ -79,35 +78,35 @@ export default { ...@@ -79,35 +78,35 @@ export default {
top: 50%; top: 50%;
left: 50%; left: 50%;
overflow: hidden; overflow: hidden;
width: px2rem(300px); width: 300px;
font-size: px2rem(18px); font-size: 18px;
-webkit-transition: 0.3s; -webkit-transition: 0.3s;
transition: 0.3s; transition: 0.3s;
border-radius: px2rem(4px); border-radius: 4px;
background-color: #fff; background-color: #fff;
-webkit-transform: translate3d(-50%, -50%, 0); -webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
.dialog-content { .dialog-content {
// margin: px2rem(30px) px2rem(22px); // margin: 30px 22px;
margin: px2rem(30px); margin: 30px;
text-align: center; text-align: center;
font-size: px2rem(18px); font-size: 18px;
font-weight: 400; font-weight: 400;
color: #373839; color: #373839;
} }
.dialog-sub-content { .dialog-sub-content {
margin: px2rem(-16px) px2rem(30px) px2rem(30px); margin: -16px 30px 30px;
// margin: px2rem(-16px) px2rem(22px) px2rem(30px); // margin: -16px 22px 30px;
text-align: left; text-align: left;
font-size: px2rem(14px); font-size: 14px;
line-height: px2rem(24px); line-height: 24px;
font-weight: 400; font-weight: 400;
color: #676869; color: #676869;
} }
.dialog-footer { .dialog-footer {
height: px2rem(50px); height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
&.v-hairline-top::after { &.v-hairline-top::after {
...@@ -117,9 +116,9 @@ export default { ...@@ -117,9 +116,9 @@ export default {
display: inline-block; display: inline-block;
// width: 50%; // width: 50%;
flex: 1; flex: 1;
height: px2rem(50px); height: 50px;
line-height: px2rem(50px); line-height: 50px;
font-size: px2rem(17px); font-size: 17px;
text-align: center; text-align: center;
color: #979899; color: #979899;
&.v-hairline-left::after { &.v-hairline-left::after {
...@@ -151,5 +150,11 @@ export default { ...@@ -151,5 +150,11 @@ export default {
border: 0 solid #f0f1f2; border: 0 solid #f0f1f2;
} }
} }
&.shikan {
.dialog-sub-content {
text-align: center;
font-size: 16px;
}
}
} }
</style> </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>
\ No newline at end of file
<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>
...@@ -40,41 +40,40 @@ export default { ...@@ -40,41 +40,40 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.item-intro-container { .item-intro-container {
padding-bottom: px2rem(20px); padding-bottom: 20px;
margin: px2rem(30px) px2rem(15px) 0px; margin: 30px 15px 0px;
border-bottom: px2rem(1px) solid #E7E8E9; border-bottom: 1px solid #E7E8E9;
.basic-title { .basic-title {
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(18px); line-height: 18px;
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
} }
.content { .content {
position: relative; position: relative;
margin-top: px2rem(16px); margin-top: 16px;
.text { .text {
font-size: px2rem(14px); font-size: 14px;
line-height: px2rem(21px); line-height: 21px;
color: #676869; color: #676869;
} }
.desc { .desc {
// position: absolute; // position: absolute;
// right: 0; // right: 0;
// bottom: px2rem(1px); // bottom: 1px;
text-align: right; text-align: right;
background: #fff; background: #fff;
line-height: px2rem(14px); line-height: 14px;
z-index: 99; z-index: 99;
span { span {
font-size: px2rem(14px); font-size: 14px;
line-height: px2rem(14px); line-height: 14px;
color: #449284; color: #449284;
} }
img { img {
width: px2rem(12px); width: 12px;
} }
} }
} }
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
</div> </div>
<div class="content"> <div class="content">
<div class="text">{{leaderText}}</div> <div class="text" v-html="leaderText"></div>
<div v-if="leaderText.length > 70" class="desc" @click="allText"> <div v-if="leaderText.length > 70" class="desc" @click="allText">
<span>{{btnText}}</span> <span>{{btnText}}</span>
<img v-if="!allTextFlag" src="../../images/down.png" /> <img v-if="!allTextFlag" src="../../images/down.png" />
...@@ -53,58 +53,60 @@ export default { ...@@ -53,58 +53,60 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.item-leader-container { .item-leader-container {
padding-bottom: px2rem(20px); padding-bottom: 20px;
margin: px2rem(30px) px2rem(15px) 0px; margin: 30px 15px 0px;
border-bottom: px2rem(1px) solid #e7e8e9; border-bottom: 1px solid #e7e8e9;
.basic-title { .basic-title {
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(18px); line-height: 18px;
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
} }
.leader-info { .leader-info {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: px2rem(16px); margin-top: 16px;
img { img {
display: inline-block; display: inline-block;
width: px2rem(44px); width: 44px;
height: px2rem(44px); height: 44px;
border-radius: 50%; border-radius: 50%;
} }
.leader-text { .leader-text {
margin-left: px2rem(16px); flex: 1;
margin-top: px2rem(6px); width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con { .leader-con {
line-height: px2rem(14px); line-height: 14px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
white-space: nowrap;
span { span {
font-size: px2rem(16px); font-size: 16px;
color: #676869; color: #676869;
} }
span:first-child { span:first-child {
font-size: px2rem(16px); font-size: 16px;
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
} }
.leader-title { .leader-title {
width: px2rem(220px); width: 220px;
overflow : hidden; overflow : hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space:nowrap; white-space:nowrap;
line-height: px2rem(16px); line-height: 16px;
margin-left: px2rem(10px); margin-left: 10px;
} }
} }
.address { .address {
margin-top: px2rem(5px); margin-top: 5px;
font-size: px2rem(13px); font-size: 13px;
color: #979899; color: #979899;
width: px2rem(240px); width: 240px;
overflow : hidden; overflow : hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space:nowrap; white-space:nowrap;
...@@ -113,26 +115,26 @@ export default { ...@@ -113,26 +115,26 @@ export default {
} }
.content { .content {
position: relative; position: relative;
margin-top: px2rem(16px); margin-top: 16px;
.text { .text {
font-size: px2rem(14px); font-size: 14px;
line-height: px2rem(21px); line-height: 21px;
color: #676869; color: #676869;
} }
.desc { .desc {
// position: absolute; // position: absolute;
// right: 0; // right: 0;
// bottom: px2rem(1px); // bottom: 1px;
text-align: right; text-align: right;
background: #fff; background: #fff;
line-height: px2rem(14px); line-height: 14px;
z-index: 99; z-index: 99;
span { span {
font-size: px2rem(14px); font-size: 14px;
color: #449284; color: #449284;
} }
img { img {
width: px2rem(12px); width: 12px;
} }
} }
} }
......
...@@ -16,22 +16,22 @@ export default { ...@@ -16,22 +16,22 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.learn-know-container { .learn-know-container {
margin: px2rem(30px) px2rem(15px) px2rem(20px); margin: 30px 15px 20px;
.basic-title { .basic-title {
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(18px); line-height: 18px;
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
} }
.content { .content {
margin-top: px2rem(16px); margin-top: 16px;
line-height: px2rem(21px); line-height: 21px;
span { span {
display: inline-block; display: inline-block;
font-size: px2rem(14px); text-align: justify;
font-size: 14px;
color: #676869; color: #676869;
} }
} }
......
<template> <template>
<div class="teacter-intro-container"> <div class="teacter-intro-container">
<div class="basic-title">讲师介绍</div> <div class="basic-title">讲师介绍</div>
<div class="leader-info" v-for="(item,index) in doctorList" :key="index"> <div class="leader-info" v-for="(item,index) in current" :key="index">
<img :src="item.appImageUrl"/> <img :src="item.appImageUrl" />
<div class="leader-text"> <div class="leader-text">
<div class="leader-con"> <div class="leader-con">
<span>{{item.name}}</span> <span>{{item.name}}</span>
<span class="leader-title">{{item.title}}</span> <span class="leader-title">{{item.title}}</span>
</div>
<div class="address">{{item.hospital}}</div>
</div>
</div> </div>
<div class="address">{{item.hospital}}</div>
</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> </template>
<script> <script>
export default { export default {
props: { props: {
doctorList: { doctorList: {
type: Array, type: Array,
default: () => [] default: () => []
}
},
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
} }
} },
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.$sendBuriedData({
component_tag: `883#88322`
});
this.current = this.one;
} else {
this.$sendBuriedData({
component_tag: `883#88321`
});
this.current = this.all;
}
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.teacter-intro-container { .teacter-intro-container {
margin: px2rem(30px) px2rem(15px) 0px; margin: 30px 15px 0px;
.basic-title { .basic-title {
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(18px); line-height: 18px;
color: #373839; color: #373839;
font-weight: 700; 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-info { .leader-text {
flex: 1;
width: 100px;
margin-left: 16px;
margin-top: 6px;
.leader-con {
line-height: 14px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: px2rem(16px); white-space: nowrap;
padding-bottom: px2rem(16px); span {
img { font-size: 16px;
display: inline-block; color: #676869;
width: px2rem(44px); }
height: px2rem(44px); span:first-child {
border-radius: 50%; font-size: 16px;
color: #373839;
font-weight: 700;
line-height: 1.1;
} }
.leader-text { .leader-title {
margin-left: px2rem(16px); width: 220px;
margin-top: px2rem(6px); overflow: hidden;
.leader-con { text-overflow: ellipsis;
line-height: px2rem(14px); white-space: nowrap;
display: flex; line-height: 16px;
flex-direction: row; margin-left: 10px;
span {
font-size: px2rem(16px);
color: #676869;
}
span:first-child {
font-size: px2rem(16px);
color: #373839;
font-weight: 700;
}
.leader-title {
width: px2rem(220px);
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
line-height: px2rem(16px);
margin-left: px2rem(10px);
}
}
.address {
margin-top: px2rem(5px);
font-size: px2rem(13px);
color: #979899;
width: px2rem(240px);
overflow : hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
} }
}
.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> </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>
...@@ -65,10 +65,9 @@ export default { ...@@ -65,10 +65,9 @@ export default {
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.comp-title { .comp-title {
display: flex; display: flex;
padding-left: px2rem(15px); padding-left: 15px;
} }
</style> </style>
...@@ -84,10 +84,9 @@ export default { ...@@ -84,10 +84,9 @@ export default {
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.comp-title { .comp-title {
display: flex; display: flex;
padding-left: px2rem(15px); padding-left: 15px;
} }
</style> </style>
...@@ -51,18 +51,17 @@ export default { ...@@ -51,18 +51,17 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.desc-container { .desc-container {
padding: px2rem(20px) px2rem(15px); padding: 20px 15px;
.desc-title { .desc-title {
display: flex; display: flex;
padding-bottom: 0px; padding-bottom: 0px;
line-height: px2rem(22px); line-height: 22px;
font-weight: 700; font-weight: 700;
span { span {
font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
font-size: px2rem(18px); font-size: 18px;
font-weight: 700; font-weight: 700;
color: #333333; color: #333333;
} }
...@@ -71,13 +70,13 @@ export default { ...@@ -71,13 +70,13 @@ export default {
display: flex; display: flex;
position: relative; position: relative;
word-break: normal; word-break: normal;
// margin-bottom: px2rem(40px); // margin-bottom: 40px;
// height: px2rem(60px); // height: 60px;
.desc_text { .desc_text {
padding-top: px2rem(6px); padding-top: 6px;
font-size: px2rem(13px); font-size: 13px;
color: #676869; color: #676869;
line-height: px2rem(25px); line-height: 25px;
letter-spacing: 1px; letter-spacing: 1px;
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
......
...@@ -17,8 +17,7 @@ ...@@ -17,8 +17,7 @@
</template> </template>
<style lang="scss" scoped> <style lang="less" scoped>
@import '../../style/mixin';
.loader { .loader {
&-mask { &-mask {
position: fixed; position: fixed;
...@@ -26,14 +25,14 @@ ...@@ -26,14 +25,14 @@
left: 0; left: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: 200; z-index: 10000;
background: rgba(0, 0, 0, 0); background: rgba(0, 0, 0, 0.5);
} }
svg { svg {
position: fixed; position: fixed;
top: px2rem(280px); top: 280px;
left: px2rem(166px); left: 166px;
z-index: 201; z-index: 9999;
} }
} }
......
...@@ -124,23 +124,22 @@ export default { ...@@ -124,23 +124,22 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.back { .back {
position: absolute; position: absolute;
left: px2rem(8px); left: 8px;
top: px2rem(15px); top: 15px;
display: inline-block; display: inline-block;
width: px2rem(50px); width: 50px;
height: px2rem(50px); height: 50px;
img { img {
padding: px2rem(10px); padding: 10px;
width: px2rem(25px); width: 25px;
height: px2rem(25px); height: 25px;
} }
} }
.nav-top { .nav-top {
// height: px2rem(65px); // height: 65px;
background: #fff; background: #fff;
color: #333; color: #333;
position: relative; position: relative;
...@@ -148,10 +147,10 @@ export default { ...@@ -148,10 +147,10 @@ export default {
.nav-back { .nav-back {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: px2rem(16px); left: 16px;
top: 0; top: 0;
height: px2rem(25px); height: 25px;
width: px2rem(25px); width: 25px;
// -ms-transform: translate(180deg); // -ms-transform: translate(180deg);
// -webkit-transform: (180deg); // -webkit-transform: (180deg);
// transform: rotate(180deg); // transform: rotate(180deg);
...@@ -172,33 +171,33 @@ export default { ...@@ -172,33 +171,33 @@ export default {
} }
.nav-share { .nav-share {
position: absolute; position: absolute;
right: px2rem(16px); right: 16px;
top: 0; top: 0;
height: px2rem(25px); height: 25px;
width: px2rem(25px); width: 25px;
} }
.nav-title { .nav-title {
position: relative; position: relative;
top: px2rem(10px); top: 10px;
left: 0; left: 0;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
/* padding:0 px2rem(33px);*/ /* padding:0 33px;*/
height: px2rem(36px); height: 36px;
&-title { &-title {
height: px2rem(18px); height: 18px;
font-size: px2rem(18px); font-size: 18px;
font-weight: 500; font-weight: 500;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
line-height: px2rem(26px); line-height: 26px;
} }
} }
.nav-part { .nav-part {
width: 100%; width: 100%;
font-size: px2rem(18px); font-size: 18px;
text-align: center; text-align: center;
padding: 0 0 px2rem(10px) 0; padding: 0 0 10px 0;
/* height: px2rem(25px);*/ /* height: 25px;*/
} }
} }
...@@ -207,6 +206,6 @@ export default { ...@@ -207,6 +206,6 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;
/* height: px2rem(25px);*/ /* height: 25px;*/
} }
</style> </style>
\ No newline at end of file
<template> <template>
<section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight"> <section v-if="!isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'" :style="'height:' + navHeight">
<!-- <section v-if="isWeb" :class="isFixNavbar ? 'nav-top fixed' : 'nav-top'"> -->
<div <div
class="nav-part" class="nav-part"
:style="'background:' + bgColor + ';' :style="'background:' + bgColor + ';'
...@@ -10,8 +9,6 @@ ...@@ -10,8 +9,6 @@
<span class="nav-back" @click="goBack"> <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-black.png" alt="">
<img v-show="!isBlack" src="../../images/left-array-whiter.png" alt=""> <img v-show="!isBlack" src="../../images/left-array-whiter.png" alt="">
<!-- <img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/left-icon.png"> -->
<!-- <img class="nav-back" src="../../images//grey-throw.png"/> -->
</span> </span>
<span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span> <span class="nav-title-title" v-show="bgColor!=='none'">{{title}}</span>
<span v-if="isShowShare" class="nav-share" @click="goShare"> <span v-if="isShowShare" class="nav-share" @click="goShare">
...@@ -25,6 +22,8 @@ ...@@ -25,6 +22,8 @@
</section> </section>
</template> </template>
<script> <script>
import { getWebPageUrl } from "@/utils/index";
import { mapGetters } from 'vuex';
export default { export default {
name: "common-navbar", name: "common-navbar",
data() { data() {
...@@ -35,7 +34,8 @@ export default { ...@@ -35,7 +34,8 @@ export default {
fontSize: 37.5, fontSize: 37.5,
content: "", content: "",
shareImageUrl: shareImageUrl:
"https://file.yunqueyi.com/logo.png?version=" + new Date().getTime() "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime(),
shareUrl: ''
}; };
}, },
props: { props: {
...@@ -79,15 +79,18 @@ export default { ...@@ -79,15 +79,18 @@ export default {
shareTitleInfo: { shareTitleInfo: {
type: String, type: String,
default: "" default: ""
},
projectId: {
type: String,
default: ""
},
limitTimes: {
type: String | Number,
default: 0
} }
}, },
computed: { computed: {
// bgColor2() { ...mapGetters(["userInfo"]),
// return this.bgColor
// },
// borderStyle() {
// return this.bgColor === 'no{ne' ? '0px solid #e7e7e7' : '1px solid #e7e7e7'
// },
navHeight() { navHeight() {
if (this.isFixNavbar) { if (this.isFixNavbar) {
return 0; return 0;
...@@ -108,28 +111,63 @@ export default { ...@@ -108,28 +111,63 @@ export default {
methods: { methods: {
//返回 //返回
goBack() { goBack() {
// if (this.burialPoint == "activity") {
// this.pageBurialPoin(this.objPoint);
// }
// if (this.backMethod === "inner" || window.__isWeb) {
// this.$router.back(-1);
// } else {
// rocNative.goBack();
// }
rocNative.goBack(); rocNative.goBack();
}, },
//分享
// 生成分享的url
goShare() { goShare() {
let url = location.href, this.$sendBuriedData({
_this = this; component_tag: `883#88309`
});
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: 2, // 业务类型 1:教培项目 2:继教项目 3:职称考项目
token: _this.userInfo.userToken,
setEntry: true
};
_this.POST("portal/shareParam/save", param).then(res => {
if (res.code == "000000") {
let url = getWebPageUrl(`cme/#/sharecoop?uuid=${res.data}`);
_this.shareUrl = url;
this.goShareAction();
}
}).catch( e => {
console.error(e);;
});
},
//分享
goShareAction() {
// 这里要改造
// let url = location.href,
let _this = this;
console.log("######### in goShare", {
type: 6,
shareId: 0,
shareUrl: _this.shareUrl,
title1: _this.shareTitle,
title2: _this.shareTitleInfo,
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
});
rocNative.shareWechat({ rocNative.shareWechat({
// url: url,
// title: '_this.title',
// content: '_this.content',
// shareImageUrl: '_this.shareImageUrl'
type: 6, type: 6,
shareId: 0, shareId: 0,
shareUrl: url, shareUrl: _this.shareUrl,
title1: _this.shareTitle, title1: _this.shareTitle,
title2: _this.shareTitleInfo, title2: _this.shareTitleInfo,
shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime() shareImageUrl: "https://file.yunqueyi.com/logo.png?version=" + new Date().getTime()
...@@ -138,23 +176,22 @@ export default { ...@@ -138,23 +176,22 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.back { .back {
position: absolute; position: absolute;
left: px2rem(px); left: px;
top: px2rem(15px); top: 15px;
display: inline-block; display: inline-block;
width: px2rem(50px); width: 50px;
height: px2rem(50px); height: 50px;
img { img {
padding: px2rem(10px); padding: 10px;
width: px2rem(25px); width: 25px;
height: px2rem(25px); height: 25px;
} }
} }
.nav-top { .nav-top {
// height: px2rem(65px); // height: 65px;
background: #fff; background: #fff;
color: #333; color: #333;
position: relative; position: relative;
...@@ -162,12 +199,12 @@ export default { ...@@ -162,12 +199,12 @@ export default {
.nav-back { .nav-back {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
left: px2rem(0px); left: 0px;
top: 0; top: 0;
height: px2rem(25px); height: 25px;
width: px2rem(55px); width: 55px;
padding-left: px2rem(15px); padding-left: 15px;
padding-right: px2rem(15px); padding-right: 15px;
// -ms-transform: translate(180deg); // -ms-transform: translate(180deg);
// -webkit-transform: (180deg); // -webkit-transform: (180deg);
// transform: rotate(180deg); // transform: rotate(180deg);
...@@ -188,33 +225,33 @@ export default { ...@@ -188,33 +225,33 @@ export default {
} }
.nav-share { .nav-share {
position: absolute; position: absolute;
right: px2rem(16px); right: 16px;
top: 0; top: 0;
height: px2rem(25px); height: 25px;
width: px2rem(25px); width: 25px;
} }
.nav-title { .nav-title {
position: relative; position: relative;
top: px2rem(10px); top: 10px;
left: 0; left: 0;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
/* padding:0 px2rem(33px);*/ /* padding:0 33px;*/
height: px2rem(36px); height: 36px;
&-title { &-title {
height: px2rem(18px); height: 18px;
font-size: px2rem(18px); font-size: 18px;
font-weight: 700; font-weight: 700;
color: rgba(51, 51, 51, 1); color: rgba(51, 51, 51, 1);
line-height: px2rem(26px); line-height: 26px;
} }
} }
.nav-part { .nav-part {
width: 100%; width: 100%;
font-size: px2rem(18px); font-size: 18px;
text-align: center; text-align: center;
padding: 0 0 px2rem(10px) 0; padding: 0 0 10px 0;
/* height: px2rem(25px);*/ /* height: 25px;*/
} }
} }
...@@ -223,6 +260,6 @@ export default { ...@@ -223,6 +260,6 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;
/* height: px2rem(25px);*/ /* height: 25px;*/
} }
</style> </style>
\ No newline at end of file
...@@ -23,8 +23,7 @@ export default { ...@@ -23,8 +23,7 @@ export default {
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.split-line { .split-line {
display: flex; display: flex;
} }
......
...@@ -62,8 +62,19 @@ export default { ...@@ -62,8 +62,19 @@ export default {
listener: this.listener, listener: this.listener,
...this.options ...this.options
}; };
options.width = htmlWidth options.width = htmlWidth;
this.tcPlayer = new TcPlayer(this.id, options);
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() { reset() {
if (this.tcPlayer) { if (this.tcPlayer) {
...@@ -124,11 +135,10 @@ export default { ...@@ -124,11 +135,10 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.banner-img { .banner-img {
// display: inherit; // display: inherit;
width: px2rem(375px); width: 375px;
height: px2rem(210px); height: 210px;
} }
</style> </style>
\ No newline at end of file
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
'padding-top': cPaddingTop, 'padding-top': cPaddingTop,
'padding-bottom': cPaddingBottom 'padding-bottom': cPaddingBottom
}" }"
>{{title | shortName(13)}}</span> >{{title | shortName(16)}}</span>
<!-- <img <!-- <img
v-show="isShowCert" v-show="isShowCert"
:style="{ :style="{
...@@ -109,10 +109,9 @@ export default { ...@@ -109,10 +109,9 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.comp-title-container { .comp-title-container {
padding-left: px2rem(15px); padding-left: 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
...@@ -127,39 +126,39 @@ export default { ...@@ -127,39 +126,39 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-right: px2rem(15px); margin-right: 15px;
span { span {
font-size: px2rem(14px); font-size: 14px;
font-weight: 400; font-weight: 400;
color: rgba(40, 52, 76, 0.4); color: rgba(40, 52, 76, 0.4);
} }
img { img {
width: px2rem(15px); width: 15px;
height: px2rem(16px); height: 16px;
} }
} }
&-explain { &-explain {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
margin-right: px2rem(15px); margin-right: 15px;
span { span {
font-size: px2rem(14px); font-size: 14px;
font-weight: 400; font-weight: 400;
color: rgba(40, 52, 76, 0.4); color: rgba(40, 52, 76, 0.4);
margin-right: px2rem(3px); margin-right: 3px;
line-height: px2rem(14px); line-height: 14px;
} }
img { img {
width: px2rem(8px); width: 8px;
height: px2rem(14px); height: 14px;
} }
} }
} }
.banner-img { .banner-img {
width: px2rem(70px); width: 70px;
height: px2rem(20px); height: 20px;
padding-top: px2rem(2px); padding-top: 2px;
} }
</style> </style>
...@@ -26,8 +26,7 @@ export default { ...@@ -26,8 +26,7 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.loader { .loader {
&-mask { &-mask {
position: fixed; position: fixed;
...@@ -43,10 +42,10 @@ export default { ...@@ -43,10 +42,10 @@ export default {
width: 100%; width: 100%;
left: 0; left: 0;
z-index: 301; z-index: 301;
bottom: px2rem(30px); bottom: 30px;
text-align: center; text-align: center;
span { span {
padding: px2rem(2px) px2rem(10px); padding: 2px 10px;
background: #eee; background: #eee;
} }
} }
......
...@@ -67,10 +67,9 @@ export default { ...@@ -67,10 +67,9 @@ export default {
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../../style/mixin";
.comp-title { .comp-title {
display: flex; display: flex;
padding-left: px2rem(15px); padding-left: 15px;
} }
</style> </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-covers-wrapper">
<span class="tips" v-html="coverTips"></span>
<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: 210px;
// 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
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">云鹊医App</span> -->
可试看{{ 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.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: `883#88313`
});
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: 22px;
height: 30px;
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>
...@@ -6,13 +6,16 @@ import store from './store/' ...@@ -6,13 +6,16 @@ import store from './store/'
const mixins = require('@/utils/mixins'); const mixins = require('@/utils/mixins');
import '@/utils/rem' // 引入自适应 import '@/utils/rem' // 引入自适应
import '@/utils/yqy-bridge' // 移动端服务 import '@/utils/yqy-bridge' // 移动端服务
// import FastClick from 'fastclick'
import vueFilters from '@/utils/filter' import vueFilters from '@/utils/filter'
import VConsole from 'vconsole/dist/vconsole.min.js' import VConsole from 'vconsole/dist/vconsole.min.js'
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 "@/utils/wxShare"
//注册到vue原型上
Vue.prototype.clipboard = clipboard;
if(!(process.env.BUILD_ENV === 'uat' || process.env.BUILD_ENV === 'pro')) { if(!(process.env.BUILD_ENV === 'uat' || process.env.BUILD_ENV === 'pro')) {
// if(!(process.env.BUILD_ENV === 'pro')) { // if(!(process.env.BUILD_ENV === 'pro')) {
...@@ -23,18 +26,11 @@ if(!(process.env.BUILD_ENV === 'uat' || process.env.BUILD_ENV === 'pro')) { ...@@ -23,18 +26,11 @@ if(!(process.env.BUILD_ENV === 'uat' || process.env.BUILD_ENV === 'pro')) {
// Vue.config.devtools = true; // Vue.config.devtools = true;
// 注册所有公用过滤器 // 注册所有公用过滤器
for(let key in vueFilters) { for(let key in vueFilters) {
Vue.filter(key, vueFilters[key]) Vue.filter(key, vueFilters[key])
} }
// if ('addEventListener' in document) {
// document.addEventListener('DOMContentLoaded', function() {
// FastClick.attach(document.body);
// }, false);
// }
// Vue.use(DiscussTopicStencil)
Vue.use(VueRouter) Vue.use(VueRouter)
const router = new VueRouter({ const router = new VueRouter({
routes, routes,
...@@ -52,6 +48,18 @@ const router = new VueRouter({ ...@@ -52,6 +48,18 @@ const router = new VueRouter({
} }
}) })
router.beforeEach((to, from, next) => {
let query = { ...to.query };
// 登录token保存并替换路径
if (query.token && query.token != 'undefined') {
store.dispatch('setToken', query.token);
delete query.token;
next({ path: to.path, query: query, replace: true });
return;
}
next();
})
// 加入混合 // 加入混合
Vue.mixin({ Vue.mixin({
...mixins ...mixins
...@@ -60,7 +68,7 @@ Vue.mixin({ ...@@ -60,7 +68,7 @@ Vue.mixin({
// import { buriedURL } from './apiConfig'; // import { buriedURL } from './apiConfig';
let domain = ''; let domain = '';
if (process.env.BUILD_ENV === 'prod') { if (process.env.BUILD_ENV === 'pro') {
domain = 'https://sc.yunqueyi.com'; domain = 'https://sc.yunqueyi.com';
} else if (process.env.BUILD_ENV === 'test') { } else if (process.env.BUILD_ENV === 'test') {
domain = 'https://test1-sc.yunqueyi.com'; domain = 'https://test1-sc.yunqueyi.com';
......
因为 它太大了无法显示 源差异 。您可以改为 查看blob
...@@ -5,10 +5,14 @@ const complist = r => require.ensure([], () => r(require('../views/component-det ...@@ -5,10 +5,14 @@ const complist = r => require.ensure([], () => r(require('../views/component-det
const cooplist = r => require.ensure([], () => r(require('../views/cooperation-details')), 'cooplist') const cooplist = r => require.ensure([], () => r(require('../views/cooperation-details')), 'cooplist')
const parent = r => require.ensure([], () => r(require('../views/parent-page')), 'parent') const parent = r => require.ensure([], () => r(require('../views/parent-page')), 'parent')
const merge = r => require.ensure([], () => r(require('../views/merge-detail')), 'merge') 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 test = r => require.ensure([], () => r(require('../views/test-components')), 'test-components')
const creditedit = r => require.ensure([], () => r(require('../views/credit-edit')), 'credit-edit') const creditedit = r => require.ensure([], () => r(require('../views/credit-edit')), 'credit-edit')
const creditdetail = r => require.ensure([], () => r(require('../views/credit-detail')), 'credit-detail') const creditdetail = r => require.ensure([], () => r(require('../views/credit-detail')), 'credit-detail')
const excgtips = r => require.ensure([], () => r(require('../views/exchange-tips')), 'exchange-tips') const excgtips = r => require.ensure([], () => r(require('../views/exchange-tips')), 'exchange-tips')
const icreditdetail = r => require.ensure([], () => r(require('../views/I-credit-detail')), 'I-credit-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')
export default [{ export default [{
path: '/', path: '/',
...@@ -41,6 +45,10 @@ export default [{ ...@@ -41,6 +45,10 @@ export default [{
{ {
path: '/coop', path: '/coop',
component: merge component: merge
},
{
path: '/sharecoop',
component: shareMerge
}, },
{ {
path: '/test', path: '/test',
...@@ -57,7 +65,18 @@ export default [{ ...@@ -57,7 +65,18 @@ export default [{
{ {
path: '/excg-tips', path: '/excg-tips',
component: excgtips component: excgtips
},
{
path: '/icredit-detail',
component: icreditdetail
},
{
path: '/not-found',
component: notFound
},
{
path: '/goods-detail',
component: goodsDetail
}, },
] ]
}] }]
const getters = { const getters = {
userInfo: state => state.coop.userInfo, userInfo: state => state.coop.userInfo,
statusBarHeight: state => state.coop.statusBarHeight, statusBarHeight: state => state.coop.statusBarHeight,
projectTabIndex: state => state.coop.projectTabIndex 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),
} }
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 coop from './modules/coop'
import user from './modules/user'
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 coop,
user
}, },
getters getters
}) })
......
...@@ -2,7 +2,29 @@ const coop = { ...@@ -2,7 +2,29 @@ const coop = {
state: { state: {
userInfo: {}, userInfo: {},
statusBarHeight: {}, statusBarHeight: {},
projectTabIndex: 1 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: { mutations: {
SET_USER_INFO: (state, userInfo) => { SET_USER_INFO: (state, userInfo) => {
...@@ -14,6 +36,18 @@ const coop = { ...@@ -14,6 +36,18 @@ const coop = {
SET_PROJECT_TAB_INDEX: (state, projectTabIndex) => { SET_PROJECT_TAB_INDEX: (state, projectTabIndex) => {
state.projectTabIndex = 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: { actions: {
setUserInfo({ commit }, userInfo) { setUserInfo({ commit }, userInfo) {
...@@ -25,6 +59,18 @@ const coop = { ...@@ -25,6 +59,18 @@ const coop = {
setProjectTabIndex({ commit }, projectTabIndex) { setProjectTabIndex({ commit }, projectTabIndex) {
commit('SET_PROJECT_TAB_INDEX', 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)
},
} }
} }
......
import { Toast } from 'vant';
import fetch from '@/utils/fetch';
import { getBaseUrl } from '@/utils/index'
import { preLoadImg } from '@/utils/index';
import { envConfig } from '@/utils/env-config'
import { setCookie, delCookie } from '@/utils/index';
const user = {
state: {
token: localStorage.getItem('token') || '',
info: {}, // 用户信息
},
mutations: {
SET_TOKEN: (state, payload) => {
state.token = payload;
},
SET_USER_INFO_2: (state, payload) => {
state.info = payload;
},
},
actions: {
// 外部登陆返回设置token
setToken({ commit, dispatch }, params) {
commit('SET_TOKEN', params);
localStorage.setItem('token', params);
setCookie('token', 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.log(err);
}
},
// 通过登陆
goLogin() {
window.location.href = envConfig[process.env.BUILD_ENV]['webPageUrl'] + "/pica_login?target_url=" + encodeURIComponent(location.href);
},
// 登出
logout({ state, commit }) {
commit('SET_TOKEN', '');
commit('SET_USER_INFO_2', {});
localStorage.removeItem('token');
delCookie('token')
},
},
}
export default user;
...@@ -12,7 +12,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l ...@@ -12,7 +12,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
font-style: normal; font-style: normal;
text-decoration: none; text-decoration: none;
border: none; border: none;
// font-size: px2rem(14px); // font-size: 14;
// color: #333; // color: #333;
font-weight: normal; font-weight: normal;
// font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei"; // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";
......
@import './common.scss'; @import './common.less';
//定位 //定位
.relative{ .relative{
position: relative; position: relative;
...@@ -25,46 +25,46 @@ ...@@ -25,46 +25,46 @@
text-align: center; text-align: center;
} }
.line20{ .line20{
margin-top: px2rem(10px); margin-top: 10;
} }
.mb42{ .mb42{
margin-bottom: px2rem(21px); margin-bottom: 21;
} }
.marginLR40{ .marginLR40{
margin: 0 px2rem(20px); margin: 0 20;
} }
.fs10{ .fs10{
font-size: px2rem(10px); font-size: 10;
} }
.fs11{ .fs11{
font-size: px2rem(11px); font-size: 11;
} }
.fs13{ .fs13{
font-size: px2rem(13px); font-size: 13;
} }
.fs14{ .fs14{
font-size: px2rem(14px); font-size: 14;
} }
.fs22{ .fs22{
font-size: px2rem(11px); font-size: 11;
} }
.fs24{ .fs24{
font-size: px2rem(12px); font-size: 12;
} }
.fs26{ .fs26{
font-size: px2rem(13px); font-size: 13;
} }
.fs28{ .fs28{
font-size: px2rem(14px); font-size: 14;
} }
.fs32{ .fs32{
font-size: px2rem(16px); font-size: 16;
} }
.fs30{ .fs30{
font-size: px2rem(15px); font-size: 15;
} }
.fs50{ .fs50{
font-size: px2rem(25px); font-size: 25;
} }
.fw{ .fw{
font-weight: 700; font-weight: 700;
...@@ -81,12 +81,12 @@ ...@@ -81,12 +81,12 @@
color: #fff; color: #fff;
} }
.fs30{ .fs30{
font-size: px2rem(15px); font-size: 15;
} }
.van-cell { .van-cell {
padding: px2rem(17px) px2rem(15px) !important; padding: 17px 15px !important;
font-size: px2rem(15px) !important; font-size: 15px !important;
color: #373839 !important; color: #373839 !important;
} }
.van-cell:not(:last-child)::after { .van-cell:not(:last-child)::after {
...@@ -96,7 +96,7 @@ ...@@ -96,7 +96,7 @@
text-align: right !important; text-align: right !important;
} }
// .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after { // .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
// border-width: px2rem(1px) 0 !important; // border-width: 1px 0 !important;
// } // }
// .van-hairline, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom { // .van-hairline, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom {
// position: inherit !important; // position: inherit !important;
...@@ -104,9 +104,64 @@ ...@@ -104,9 +104,64 @@
// .van-hairline--top { // .van-hairline--top {
// } // }
// .van-field__label, .van-field__body { // .van-field__label, .van-field__body {
// height: px2rem(15px) !important; // height: 15px !important;
// line-height: px2rem(15px) !important; // line-height: 15px !important;
// } // }
.van-cell__title span { .van-cell__title span {
font-weight: 700 !important; font-weight: 700 !important;
}
.bind-cart-wrapper .van-field__control {
border-radius: 4px;
border: 1px solid #C7C8C9;
padding: 7px;
text-align: left !important;
}
.bind-cart-wrapper .van-cell__title .van-field__label {
span {
font-size: 15px !important;
color: #373839 !important;
}
}
.bind-cart-wrapper .van-field__label {
width: 56px !important;
padding-top: 8px;
}
.bind-cart-wrapper .van-cell {
padding: 0.54rem 0 !important;
}
.bind-cart-wrapper .van-field__body {
box-shadow: none !important;
}
.bind-cart-wrapper .van-field__control {
box-shadow: none !important;
}
.bind-cart-wrapper .van-field__control input{
box-shadow: none !important;
}
/*定义滚动条轨道 内阴影+圆角*/
.bind-cart-wrapper ::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
box-shadow: inset 0 0 0 rgba(0,0,0,0);
// border-radius: 10px;
background-color: #fff;
}
/*定义滑块 内阴影+圆角*/
.bind-cart-wrapper ::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
box-shadow: inset 0 0 0 rgba(0,0,0,0);
background-color: #fff;
}
.bind-cart-wrapper .van-cell:not(:last-child)::after {
border: none !important;
} }
\ No newline at end of file
@blue: #3190e8;
@bc: #e4e4e4;
@fc:#fff;
$blue: #3190e8;
$bc: #e4e4e4;
$fc:#fff;
// 背景图片地址和大小
@mixin bis($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 100% 100%;
}
@mixin borderRadius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
//定位全屏
@mixin allcover{
position:absolute;
top:0;
right:0;
}
//定位上下左右居中
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
//定位上下居中
@mixin ct {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
//定位左右居中
@mixin cl {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
//宽高
@mixin wh($width, $height){
width: $width;
height: $height;
}
//字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
font: #{$size}/#{$line-height} $family;
}
//字体大小,颜色
@mixin sc($size, $color){
font-size: $size;
color: $color;
}
//flex 布局和 子元素 对其方式
@mixin fj($type: space-between){
display: flex;
justify-content: $type;
}
@function px2rem($px){
$rem: 37.5px;
@return ($px / $rem) + rem;
}
\ No newline at end of file
...@@ -12,4 +12,4 @@ ...@@ -12,4 +12,4 @@
* *
* Released on: December 13, 2016 * 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)}} .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(50;filter:blur(50;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 \ No newline at end of file
...@@ -7,41 +7,55 @@ export const envConfig = { ...@@ -7,41 +7,55 @@ export const envConfig = {
// baseUrl: 'https://dev-sc.yunqueyi.com/', // baseUrl: 'https://dev-sc.yunqueyi.com/',
// baseUrl: 'http://10.177.15.180:10202/', // baseUrl: 'http://10.177.15.180:10202/',
// baseUrl: 'http://192.168.140.14:10201/', // baseUrl: 'http://192.168.140.14:10201/',
apiUrl: 'https://dev-api.yunqueyi.com/', apiUrl: 'https://dev-api.yunqueyi.com/',
webPageUrl: 'https://dev-phome.yunqueyi.com/', webPageUrl: 'https://dev-phome.yunqueyi.com/',
baseUrl: 'https://test1-sc.yunqueyi.com/', baseUrl: 'https://dev-sc.yunqueyi.com/',
hactiveUrl: 'https://dev-hactive.yunqueyi.com',
appId: 'wxf4e66242d31c81c2', // 用于微信授权登录
// baseUrl: 'https://test1-sc.yunqueyi.com/', // baseUrl: 'https://test1-sc.yunqueyi.com/',
// apiUrl: 'https://test1-api.yunqueyi.com/', // apiUrl: 'https://test1-api.yunqueyi.com/',
// webPageUrl: 'https://test1-phome.yunqueyi.com/' // webPageUrl: 'https://test1-phome.yunqueyi.com/'
// hactiveUrl: 'https://dev-hactive.yunqueyi.com',
// baseUrl: 'https://uat-sc.yunqueyi.com/', // baseUrl: 'https://uat-sc.yunqueyi.com/',
// apiUrl: 'https://uat-api.yunqueyi.com/', // apiUrl: 'https://uat-api.yunqueyi.com/',
// webPageUrl: 'https://uat-phome.yunqueyi.com/' // webPageUrl: 'https://uat-phome.yunqueyi.com/',
// hactiveUrl: 'https://uat-hactive.yunqueyi.com',
// baseUrl: 'https://sc.yunqueyi.com/', // baseUrl: 'https://sc.yunqueyi.com/',
// apiUrl: 'https://api.yunqueyi.com/', // apiUrl: 'https://api.yunqueyi.com/',
// webPageUrl: 'https://phome.yunqueyi.com/' // webPageUrl: 'https://phome.yunqueyi.com/',
// hactiveUrl: 'https://hactive.yunqueyi.com',
// appId: 'wx2c577552a2d28550', // 用于微信授权登录
}, },
dev: { dev: {
baseUrl: 'https://dev-sc.yunqueyi.com/', baseUrl: 'https://dev-sc.yunqueyi.com/',
apiUrl: 'https://dev-api.yunqueyi.com/', apiUrl: 'https://dev-api.yunqueyi.com/',
webPageUrl: 'https://dev-phome.yunqueyi.com/' webPageUrl: 'https://dev-phome.yunqueyi.com/',
hactiveUrl: 'https://dev-hactive.yunqueyi.com',
appId: 'wxf4e66242d31c81c2', // 用于微信授权登录
}, },
test: { test: {
baseUrl: 'https://test1-sc.yunqueyi.com/', baseUrl: 'https://test1-sc.yunqueyi.com/',
apiUrl: 'https://test1-api.yunqueyi.com/', apiUrl: 'https://test1-api.yunqueyi.com/',
webPageUrl: 'https://test1-phome.yunqueyi.com/' webPageUrl: 'https://test1-phome.yunqueyi.com/',
hactiveUrl: 'https://test1-hactive.yunqueyi.com',
appId: 'wxcaad75b7fff5659c', // 用于微信授权登录
}, },
uat: { uat: {
baseUrl: 'https://uat-sc.yunqueyi.com/', baseUrl: 'https://uat-sc.yunqueyi.com/',
apiUrl: 'https://uat-api.yunqueyi.com/', apiUrl: 'https://uat-api.yunqueyi.com/',
webPageUrl: 'https://uat-phome.yunqueyi.com/' webPageUrl: 'https://uat-phome.yunqueyi.com/',
hactiveUrl: 'https://uat-hactive.yunqueyi.com',
appId: 'wx342ef0e5afee54a7', // 用于微信授权登录
}, },
pro: { pro: {
baseUrl: 'https://sc.yunqueyi.com/', baseUrl: 'https://sc.yunqueyi.com/',
apiUrl: 'https://api.yunqueyi.com/', apiUrl: 'https://api.yunqueyi.com/',
webPageUrl: 'https://phome.yunqueyi.com/' webPageUrl: 'https://phome.yunqueyi.com/',
hactiveUrl: 'https://hactive.yunqueyi.com',
appId: 'wx2c577552a2d28550', // 用于微信授权登录
} }
} }
...@@ -11,17 +11,17 @@ const service = axios.create({ ...@@ -11,17 +11,17 @@ const service = axios.create({
// request拦截器 // request拦截器
service.interceptors.request.use(config => { service.interceptors.request.use(config => {
// debugger if (config.data && config.data.token) {
if (config.data && config.data.setEntry) {
config.headers['sysCode'] = config.data.sysCode || 10 config.headers['sysCode'] = config.data.sysCode || 10
if(config.data.token){ if (config.data.token) {
config.headers['token'] = config.data.token || '0F32D60C3D7042158BCF1FB574E482BE' config.headers['token'] = config.data.token || 'CAF8336E76514F07BF195EFCEBE60775'
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境 if (process.env.BUILD_ENV == "development") { // 本地开发环境
config.headers['token'] = config.data.token || 'DA2A4E43343E47DEB4C4B708288D02D4' || 'F5CE3BAEC4934864B1022C1C4D39EB40'; config.headers['token'] = config.data.token || '14587B3BBD77434EAFE8755FB1856008';
} }
// delete config.data.token; delete config.data.setEntry;
delete config.data.token;
} }
config.headers['deviceInfo'] = JSON.stringify({ "app_channel": "", "app_mac": "", "app_uuid": "", "app_version": "", "device_brand": "", "device_ip": "", "device_model": "", "device_net": "", "device_ops": "", "resolution_wh": "", "system_level": "", "device_type": '10' }) config.headers['deviceInfo'] = JSON.stringify({ "app_channel": "", "app_mac": "", "app_uuid": "", "app_version": "", "device_brand": "", "device_ip": "", "device_model": "", "device_net": "", "device_ops": "", "resolution_wh": "", "system_level": "", "device_type": '10' })
} }
return config return config
...@@ -37,7 +37,7 @@ service.interceptors.response.use( ...@@ -37,7 +37,7 @@ service.interceptors.response.use(
/* /*
baseUrl时,返回000000为成功 baseUrl时,返回000000为成功
apiUrl时,返回200为成功 apiUrl时,返回200为成功
*/ */
if (res.code !== '000000' && response.respCode === 200) { if (res.code !== '000000' && response.respCode === 200) {
return Promise.reject('error') return Promise.reject('error')
} else { } else {
......
...@@ -84,6 +84,10 @@ const vueFilter = { ...@@ -84,6 +84,10 @@ const vueFilter = {
return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2) return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
} }
return size; return size;
},
formatMoney(money = 0) {
if(!money) return 0;
return (money / 100).toFixed(2);
} }
} }
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
* Created by Anndy Yang on 19/02/28. * Created by Anndy Yang on 19/02/28.
*/ */
import { envConfig } from '@/utils/env-config' import { envConfig } from '@/utils/env-config'
const { BUILD_ENV } = process.env;
// 获取SC服务器域名地址 // 获取SC服务器域名地址
export function getBaseUrl(url) { export function getBaseUrl(url) {
...@@ -18,6 +19,16 @@ export function getWebPageUrl(url) { ...@@ -18,6 +19,16 @@ export function getWebPageUrl(url) {
return getConfigByEnvType('webPageUrl') + (url || '') return getConfigByEnvType('webPageUrl') + (url || '')
} }
// 获取推送域名地址(message_push)
export function getHactiveUrl(url) {
return getConfigByEnvType('hactiveUrl') + (url || '')
}
// 获取微信APPID
export function getAPPID() {
return getConfigByEnvType('appId')
}
// 根据不同环境,生成URL // 根据不同环境,生成URL
function getConfigByEnvType(urlType) { function getConfigByEnvType(urlType) {
return envConfig[process.env.BUILD_ENV][urlType] return envConfig[process.env.BUILD_ENV][urlType]
...@@ -138,4 +149,72 @@ export function gotoPage(context, pageUrl) { ...@@ -138,4 +149,72 @@ export function gotoPage(context, pageUrl) {
jsonString: paramList jsonString: paramList
}); });
} }
} }
\ No newline at end of file
// 判断是否是微信浏览器
export function isWeiXin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true;
} else {
return false;
}
}
function formatNum(n) {
return n * 1 < 10 ? `0${n}` : n;
}
// 传入秒,计算出剩余时间的时分秒
export function formatLeftTimeObj(time, hasZero = true) {
if (typeof time !== 'number') {
time = parseInt(time)
}
// time = parseInt(time / 1000)
// const d = parseInt(time / 86400)
// time = time - d * 86400
const h = parseInt(time / 3600)
time = time - h * 3600
const f = parseInt(time / 60)
const s = parseInt(time - f * 60)
return {
// d: hasZero ? formatNum(d) : d,
h: hasZero ? formatNum(h) : h,
f: hasZero ? formatNum(f) : f,
s: hasZero ? formatNum(s) : s,
}
}
export const setCookie = (name, value, time) => {
var expires = 30 * 24 * 60 * 60 * 1000; //一天
var date = new Date(+new Date() + expires);
if (time) {
document.cookie =
name +
'=' +
escape(value) +
'; path=/' +
';expires=' +
date.toUTCString();
} else {
document.cookie = name + '=' + escape(value) + '; path=/';
}
};
export const delCookie = key => {
var expires = -1 * 24 * 60 * 60 * 1000; //一天
var date = new Date(+new Date() + expires);
document.cookie =
key + '=' + escape('') + '; path=/' + ';expires=' + date.toUTCString(); //这里只需要把Cookie保质期退回一天便可以删除
};
export const getCookie = key => {
var cookieArr = document.cookie.split('; ');
for (var i = 0; i < cookieArr.length; i++) {
var arr = cookieArr[i].split('=');
if (arr[0] === key) {
return arr[1];
}
}
return '';
};
\ No newline at end of file
...@@ -13,7 +13,7 @@ module.exports = { ...@@ -13,7 +13,7 @@ module.exports = {
query = this.$route.query query = this.$route.query
} }
// alert('this.token' + this.token) // alert('this.token' + this.token)
this.token = this.getUrlKey('token') || (query && query.token) || '9B62E5874DA94979A54DB3E9DFC1443F' this.token = this.getUrlKey('token') || (query && query.token)
}, },
mounted() { mounted() {
...@@ -109,8 +109,7 @@ module.exports = { ...@@ -109,8 +109,7 @@ module.exports = {
// 通用GET请求 // 通用GET请求
GET(api, para, callback, str) { GET(api, para, callback, str) {
// debugger para.token = para.token || this.token || ''
para.token = para.token || this.token || '006EAC5D201B4547A27C842505F0E368'
let url = api + this.getUrlPara(para) let url = api + this.getUrlPara(para)
return fetch({ return fetch({
url: getBaseUrl(url), url: getBaseUrl(url),
...@@ -120,7 +119,7 @@ module.exports = { ...@@ -120,7 +119,7 @@ module.exports = {
}, },
NEW_GET(api, para, callback, str) { NEW_GET(api, para, callback, str) {
para.token = para.token || this.token || '006EAC5D201B4547A27C842505F0E368' para.token = para.token || this.token || ''
let url = api + this.getUrlPara(para) let url = api + this.getUrlPara(para)
return fetch({ return fetch({
url: getBaseUrl(url), url: getBaseUrl(url),
...@@ -208,5 +207,19 @@ module.exports = { ...@@ -208,5 +207,19 @@ module.exports = {
return null return null
}, },
// 通用token校验
commonCheckToken(noLoggedCallback) {
let param = {
token: this.token,
setEntry: true
};
this.GET("campaign/admin/task/checkToken", param).then(res => {
if (res.code !== "000000") {
this.goLogin();
} else {
noLoggedCallback && noLoggedCallback()
}
});
}
} }
} }
因为 它太大了无法显示 源差异 。您可以改为 查看blob
因为 它太大了无法显示 源差异 。您可以改为 查看blob
/* eslint-disable */
import Vue from 'vue'
import request from '@/utils/fetch';
import wx from 'weixin-js-sdk'
import { getBaseUrl } from "@/utils/index";
/** 注入配置信息 */
export const wxConfig = (link) => {
console.log("#####1111link: ", link)
// const params = { resetURI: true, url: encodeURIComponent(location.href) };
// 上线前是需要把域名改为线上的sc
let baseUrl = getBaseUrl("");
request({ url: `https://sc.yunqueyi.com/wechats/signs?url=${encodeURIComponent(link)}` }).then(res => {
// request({ url: `${baseUrl}/wechats/signs?url=${encodeURIComponent(link)}` }).then(res => {
let configs = res.data.signMap;
wx.config({
debug: false,
appId: configs.appId,
nonceStr: configs.nonceStr,
timestamp: configs.timestamp,
signature: configs.signature,
jsApiList: [
'hideMenuItems',
'previewImage',
'checkJsApi',
'chooseWXPay',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone',
'getLocation',
'openLocation',
'translateVoice'
]
});
});;
};
/**
* wxShare 分享
* @param option
*/
export const wxShare = (option = {}, successCB = () => {}) => {
wx.ready(() => {
// 分享给朋友
wx.onMenuShareAppMessage({
title: option.title,
desc: option.desc,
link: option.link,
imgUrl: option.imgUrl,
success: function(res) {
// 用户确认分享后执行的回调函数
successCB(res);
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title: option.friendtitle || option.title, // 标题
desc: option.desc,
link: option.link, // 链接
imgUrl: option.imgUrl, // 分享图标
success: function(res) {
successCB(res);
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
};
export const wxDisabledShare = () => {
console.log('in wxDisabledShare');
wx.ready(() => {
wx.hideMenuItems({
menuList: [
'menuItem:share:appMessage',
'menuItem:share:timeline',
'menuItem:share:qq',
'menuItem:share:weiboApp',
'menuItem:share:QZone'
]
});
});
};
/**
*
* @param source
* @param option
*/
export const wechatShare = async (option = {}, successCB = () => {}) => {
const shareOption = {
link: location.href,
title: `云鹊医!`,
friendtitle: `讨论进行中,速来围观!`,
desc: '参与讨论,一起畅谈医学那些事!快来看看吧~',
imgUrl: 'https://file.yunqueyi.com/logo.png',
...option
};
console.log("#####2222link: ", shareOption.link)
wxConfig(shareOption.link);
wxShare(shareOption, successCB);
};
Vue.prototype.wechatShare = wechatShare
Vue.prototype.wxDisabledShare = wxDisabledShare;
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
}) })
} }
}) })
}("gotoLogin", "dispatchEventByModuleCode", "gotoAuthentication", "shareWechat", "backPreviousPage", "bindingWechat", "getDeviceInfo", "goBack", "appBuryingPointEntrust", "getAuthPermission", "getAppVersionCode", "getToken", "gotoNewActivity", "gotoNewActivityWithParams", "gotoNewWebActivity", "gotoYidianActivity", "readMessage", "openFiveMintusAudio", "getStatusBarSize", "showNativeDialog", "showNativeToast", "gotoViewTop", "appInit", "checkPermissions", "getStatusBarHeight", "setTabMiniIcon", "getUserInfo", "pauseAudioView", "sendBuriedPoint", "openErrorDebug", "upGradeVersion", "getLocalData"); }("gotoLogin", "dispatchEventByModuleCode", "gotoAuthentication", "shareWechat", "backPreviousPage", "bindingWechat", "getDeviceInfo", "goBack", "appBuryingPointEntrust", "getAuthPermission", "getAppVersionCode", "getToken", "gotoNewActivity", "gotoNewActivityWithParams", "gotoNewWebActivity", "gotoYidianActivity", "readMessage", "openFiveMintusAudio", "getStatusBarSize", "showNativeDialog", "showNativeToast", "gotoViewTop", "appInit", "checkPermissions", "getStatusBarHeight", "setTabMiniIcon", "getUserInfo", "pauseAudioView", "sendBuriedPoint", "openErrorDebug", "upGradeVersion", "getLocalData", "getPositionData");
if (e.__rocAndroid) { if (e.__rocAndroid) {
e.__isAndroid = true e.__isAndroid = true
e.__isIOS = false e.__isIOS = false
......
<template>
<section class="cd-wrapper">
<CommonNavbar
:bgColor="bgColor"
v-show="showNavBar"
title
:isFixNavbar="isFixNavbar"
borderStyle="0px solid #fff"
></CommonNavbar>
<img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-1.png" />
<img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-2.png" />
<img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-3.png" />
<img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-4.png" />
<img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-5.png" />
<img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-6.png" />
<!-- <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-7.png" /> -->
<ExjumperButton @btnClick="isBuy(1)" btnText="立即学习" type="primary"></ExjumperButton>
<!-- <img @click="isBuy(1)" class="img" src="https://file.yunqueyi.com/h5/images/tinified/i-detail-8.png"> -->
<CardPopup
:cardInfo="cardInfo"
:isShow="isShowPopup"
@clickOverlay="clickOverlay"
@cancle="jumpToCardList"
@confirm="confirm"
></CardPopup>
<Loading v-if="showLoading" />
</section>
</template>
<script>
import ExjumperButton from "@/components/cme/exjumper-button";
import CommonNavbar from "@/components/common/common-navbar";
import CardPopup from "@/components/cme/card-popup";
import Loading from "@/components/common/common-loading";
import { getWebPageUrl } from "@/utils/index";
import { Toast } from "vant";
export default {
data() {
return {
bgColor: "#fff",
bgColor: "none",
showNavBar: true,
isShowPopup: false,
isFixNavbar: true,
oneLevelUrl: "",
provinceId: 0,
organizationId: 0,
cardInfo: {
id: 0
},
cmeToken: "",
showLoading: false
};
},
components: {
CommonNavbar,
CardPopup,
ExjumperButton,
Loading
},
created() {
let _this = this;
window.__getPositionData = function(param) {
console.log(param);
// _this.showLoading = false;
param.setEntry = true;
_this.getProvinceIdByPosition(param);
};
this.oneLevelUrl = decodeURIComponent(
(this.$route.query && this.$route.query.oneLevelUrl) || ""
);
this.provinceId = (this.$route.query && this.$route.query.provinceId) || 0;
this.organizationId =
(this.$route.query && this.$route.query.organizationId) || 0;
this.cmeToken = (this.$route.query && this.$route.query.cmeToken) || "";
// this.getProvinceIdByPosition();
},
methods: {
// 点击弹层
clickOverlay() {
console.log("clickOverlay");
this.isShowPopup = false;
},
// 判断用户是否购买过I类学习卡
isBuy(cardType) {
this.$sendBuriedData({
component_tag: `881#8811`
});
this.showLoading = true;
let param = {
cardType: cardType,
token: this.cmeToken,
setEntry: true
};
this.GET("trade/storage/card/isBuy", param).then(res => {
if (res.code == "000000") {
// 如果购买过,则直接跳转到中华医学会页面
if (res.data) {
this.jumpToCardList();
} else {
this.preJumper();
}
}
// else {
// Toast(res.message);
// }
});
},
// 跳转前判断是否有机构,否则使用定位信息
preJumper() {
if (this.organizationId != 0 && this.provinceId != 0) {
this.getCardInfoByProvinceId(this.provinceId);
} else {
this.getPositionData();
}
},
// 获取地理位置信息
getPositionData() {
console.log("getPositionData");
rocNative.getPositionData({
__funcName: "__getPositionData"
});
},
// 根据省ID,获取学习卡信息
getCardInfoByProvinceId(provinceId) {
let param = {
area: provinceId + "",
cardType: 1,
goodsType: 2,
cardTypeList: [1],
// pageNum: 1,
// pageSize: 1
};
this.POST("trade/goods/cardList_v2", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
this.isShowPopup = true;
this.cardInfo = (res.data && res.data[0]) || { id: 0 };
}
});
},
// 根据位置信息获取省ID
getProvinceIdByPosition(param) {
param.setEntry = true;
this.POST("aggregate/cme/convertLocationToProvinceId", param).then(
res => {
if (res.code == "000000") {
this.getCardInfoByProvinceId(res.data || 0);
} else {
this.getCardInfoByProvinceId(0);
}
}
);
},
// 新购买方法
confirm() {
console.log('new confirm');
this.$sendBuriedData({
component_tag: `882#88203`
});
// 直接传入职称考项目ID(projectId)
let courseUrl = encodeURIComponent(this.oneLevelUrl);
let paramPageUrl = getWebPageUrl(`profexam/#/goods-detail?goodsId=${this.cardInfo.id}&courseUrl=${courseUrl}`);
let paramList = [
{
key: "pageUrl",
value: paramPageUrl,
type: 4,
seqNo: 1
}
]
rocNative.dispatchEventByModuleCode({
modeCode: "M300",
jsonString: paramList
});
},
// 跳转到原生的购买页面
confirmOld() {
this.isShowPopup = false;
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(this.oneLevelUrl),
type: 4,
seqNo: 1
}
];
rocNative.dispatchEventByModuleCode({
modeCode: "M200",
jsonString: paramList
});
},
// 跳转I类学习详情页面(中华医学会项目列表页面)
jumpToCardList() {
this.showLoading = false;
this.isShowPopup = false;
if (window.__isWeb) {
return;
} else {
let pageUrl = this.oneLevelUrl;
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
});
}
}
}
};
</script>
<style lang="less" scoped>
.cd-wrapper {
background: #f8f9fa;
padding-bottom: 80px;
.img {
margin-top: -15px;
width: 100%;
}
}
</style>
...@@ -61,12 +61,11 @@ export default { ...@@ -61,12 +61,11 @@ export default {
methods: {} methods: {}
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../style/mixin";
.banner-img { .banner-img {
display: inherit; display: inherit;
width: px2rem(375px); width: 375px;
height: px2rem(243px); height: 243px;
} }
</style> </style>
...@@ -19,20 +19,25 @@ ...@@ -19,20 +19,25 @@
>--> >-->
<!-- <div v-if="bannerType == 1" class="page-content-img-container"> --> <!-- <div v-if="bannerType == 1" class="page-content-img-container"> -->
<div v-if="bannerType == 1" class="page-content-img-container"> <div v-if="bannerType == 1" class="page-content-img-container">
<img class="banner-img" :src="attachmentUrl"> <img class="banner-img" :src="attachmentUrl" />
<img v-show="pStatus == 1" class="banner-img-1" src="../images/status-join.png"> <img v-show="pStatus == 1" class="banner-img-1" src="../images/status-join.png" />
<img v-show="pStatus == 5" class="banner-img-5" src="../images/status-keep-on.png"> <img v-show="pStatus == 5" class="banner-img-5" src="../images/status-keep-on.png" />
<img v-show="pStatus == 10" class="banner-img-10" src="../images/status-end.png"> <img v-show="pStatus == 10" class="banner-img-10" src="../images/status-end.png" />
</div> </div>
<!-- <CommonBannerVideo v-if="bannerType == 1" :videoOptions="videoOptions"></CommonBannerVideo> --> <!-- <CommonBannerVideo v-if="bannerType == 1" :videoOptions="videoOptions"></CommonBannerVideo> -->
<CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer> <CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer>
<CommonDescription :descTitle="projectName" :value="projectIntro"></CommonDescription> <CommonDescription :descTitle="projectName" :value="projectIntro"></CommonDescription>
<CommonSpliteLine></CommonSpliteLine> <CommonSpliteLine></CommonSpliteLine>
<CellListItem :paramData="contentList" :moduleName="moduleName" :courseRequire="courseRequire"></CellListItem> <CellListItem
:paramData="contentList"
:moduleName="moduleName"
:courseRequire="courseRequire"
:projectId="projectId"
></CellListItem>
<!-- <CellListDetail :paramData="contentList" :moduleName="moduleName"></CellListDetail> --> <!-- <CellListDetail :paramData="contentList" :moduleName="moduleName"></CellListDetail> -->
</div> </div>
<Loading v-show="showLoading"/> <Loading v-show="showLoading" />
</div> </div>
</template> </template>
<script> <script>
...@@ -46,7 +51,7 @@ import CommonBannerVideo from "@/components/common/common-banner-video"; ...@@ -46,7 +51,7 @@ import CommonBannerVideo from "@/components/common/common-banner-video";
import CommonTcPlayer from "@/components/common/common-tcplayer"; import CommonTcPlayer from "@/components/common/common-tcplayer";
import Loading from "@/components/common/common-loading"; import Loading from "@/components/common/common-loading";
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
import vueFilters from '@/utils/filter' import vueFilters from "@/utils/filter";
export default { export default {
data() { data() {
return { return {
...@@ -139,9 +144,9 @@ export default { ...@@ -139,9 +144,9 @@ export default {
__funcName: "__getUserInfo4Comp" __funcName: "__getUserInfo4Comp"
}); });
if (window.__isWeb && process.env.BUILD_ENV == "development") { if (window.__isWeb && process.env.BUILD_ENV == "development") {
console.log('projectId',this.projectId); console.log("projectId", this.projectId);
let param = { let param = {
userToken: 'ED9F3381362641858B2B1F90C92A8050', userToken: "ED9F3381362641858B2B1F90C92A8050"
}; };
__getUserInfo4Comp(param); __getUserInfo4Comp(param);
} }
...@@ -190,20 +195,20 @@ export default { ...@@ -190,20 +195,20 @@ export default {
}, },
setContent(data) { setContent(data) {
let list = data; let list = data;
for(let i=0;i<list.length;i++) { for (let i = 0; i < list.length; i++) {
let len = vueFilters.strLength(list[i].name); let len = vueFilters.strLength(list[i].name);
let certificate = list[i].certificateFlag; let certificate = list[i].certificateFlag;
if(len > 30 && certificate == 2) { if (len > 30 && certificate == 2) {
list[i].height = "2"; list[i].height = "2";
} else if (len > 30 && certificate != 2) { } else if (len > 30 && certificate != 2) {
list[i].height = 2; list[i].height = 2;
} else if (len <= 30 && certificate == 2) { } else if (len <= 30 && certificate == 2) {
list[i].height = "1"; list[i].height = "1";
} else if(len <= 30 && certificate != 2) { } else if (len <= 30 && certificate != 2) {
list[i].height = 1; list[i].height = 1;
} }
} }
console.log('contentList!',list); console.log("contentList!", list);
return list; return list;
}, },
// 获取内容列表 // 获取内容列表
...@@ -213,7 +218,7 @@ export default { ...@@ -213,7 +218,7 @@ export default {
moduleId: _this.moduleId, moduleId: _this.moduleId,
token: _this.userInfo.userToken, token: _this.userInfo.userToken,
setEntry: true, setEntry: true,
projectId: _this.projectId, projectId: _this.projectId
}; };
_this.showLoading = true; _this.showLoading = true;
this.GET("portal/portalApp/contentList", param).then(res => { this.GET("portal/portalApp/contentList", param).then(res => {
...@@ -237,42 +242,41 @@ export default { ...@@ -237,42 +242,41 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" > <style lang="less" >
@import "../style/mixin";
.page-container-comp { .page-container-comp {
.nav-top .nav-title { .nav-top .nav-title {
height: px2rem(0px); height: 0px;
padding: px2rem(18px); padding: 18px;
}
.banner-img {
display: inherit;
width: px2rem(375px);
height: px2rem(210px);
&-1 {
position: absolute;
left: 0;
top: px2rem(180px);
width: px2rem(76px);
height: px2rem(30px);
} }
&-5 { .banner-img {
position: absolute; display: inherit;
left: 0; width: 375px;
top: px2rem(180px); height: 210px;
width: px2rem(76px); &-1 {
height: px2rem(30px); 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: 148px;
height: 30px;
}
} }
&-10 { .list-container {
position: absolute; margin-bottom: 40px;
left: 0;
top: px2rem(180px);
width: px2rem(148px);
height: px2rem(30px);
} }
} }
.list-container {
margin-bottom: px2rem(40px);
}
}
</style> </style>
...@@ -265,36 +265,35 @@ export default { ...@@ -265,36 +265,35 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../style/mixin";
.banner-img { .banner-img {
display: inherit; display: inherit;
width: px2rem(375px); width: 375px;
height: px2rem(210px); height: 210px;
&-1 { &-1 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(76px); width: 76px;
height: px2rem(30px); height: 30px;
} }
&-5 { &-5 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(76px); width: 76px;
height: px2rem(30px); height: 30px;
} }
&-10 { &-10 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(148px); width: 148px;
height: px2rem(30px); height: 30px;
} }
} }
.list-container { .list-container {
margin-bottom: px2rem(40px); margin-bottom: 40px;
} }
</style> </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>
...@@ -301,47 +301,45 @@ export default { ...@@ -301,47 +301,45 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../style/mixin";
.credit-detail { .credit-detail {
&-wrapper { &-wrapper {
.tips { .tips {
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
margin: px2rem(10px) 0 px2rem(10px); margin: 10px 0 10px;
border-radius: px2rem(4px); border-radius: 4px;
padding: px2rem(10px); padding: 10px;
font-weight: 400; font-weight: 400;
font-size: px2rem(12px); font-size: 12px;
// height: px2rem(32px); // height: 32px;
line-height: px2rem(12px); line-height: 12px;
color: #979899; color: #979899;
background: #f8f9fa; background: #f8f9fa;
.triangle { .triangle {
position: absolute; position: absolute;
top: px2rem(-5px); top: -5px;
transform: rotateZ(45deg); transform: rotateZ(45deg);
right: px2rem(10px); right: 10px;
width: px2rem(10px); width: 10px;
height: px2rem(10px); height: 10px;
background: #f8f9fa; background: #f8f9fa;
} }
} }
.info { .info {
font-size: px2rem(14px); font-size: 14px;
font-weight: 400; font-weight: 400;
margin-bottom: px2rem(50px); margin-bottom: 50px;
.credit-basic { .credit-basic {
margin: px2rem(20px) px2rem(15px); margin: 20px 15px;
} }
.credit-user { .credit-user {
margin: px2rem(20px) px2rem(15px); margin: 20px 15px;
} }
ul { ul {
...@@ -349,8 +347,8 @@ export default { ...@@ -349,8 +347,8 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
height: px2rem(30px); height: 30px;
line-height: px2rem(30px); line-height: 30px;
span { span {
&:nth-child(1) { &:nth-child(1) {
......
...@@ -159,39 +159,38 @@ export default { ...@@ -159,39 +159,38 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="less">
@import "../style/mixin";
.credit-edit-wrapper { .credit-edit-wrapper {
.group { .group {
margin: 10px 15px; margin: 10px 15px;
} }
.tips { .tips {
margin: px2rem(10px) px2rem(15px) px2rem(50px); margin: 10px 15px 50px;
font-weight: 400; font-weight: 400;
font-size: px2rem(14px); font-size: 14px;
line-height: px2rem(21px); line-height: 21px;
color: #979899; color: #979899;
} }
.van-cell__title .van-field__label { .van-cell__title .van-field__label {
line-height: px2rem(30px) !important; line-height: 30px !important;
height: px2rem(20px) !important; height: 20px !important;
} }
.van-cell { .van-cell {
padding: px2rem(20px) 0 !important; padding: 20px 0 !important;
font-size: px2rem(15px) !important; font-size: 15px !important;
color: #373839 !important; color: #373839 !important;
} }
.van-cell__title span { .van-cell__title span {
font-weight: 400 !important; font-weight: 400 !important;
} }
.van-field__body { .van-field__body {
line-height: px2rem(30px) !important; line-height: 30px !important;
height: px2rem(20px) !important; height: 20px !important;
} }
.van-field__control { .van-field__control {
padding-top: px2rem(8px) !important; padding-top: 8px !important;
line-height: px2rem(20px) !important; line-height: 20px !important;
font-size: px2rem(15px); font-size: 15px;
} }
} }
......
...@@ -20,36 +20,35 @@ ...@@ -20,36 +20,35 @@
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../style/mixin";
.header { .header {
width: 100%; width: 100%;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
text-align: center; text-align: center;
padding: px2rem(26px) 0 px2rem(20px); padding: 26px 0 20px;
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(18px); line-height: 18px;
color: #333333; color: #333333;
background: #fff; background: #fff;
// img { // img {
// position: absolute; // position: absolute;
// right: px2rem(20px); // right: 20px;
// width: px2rem(13px); // width: 13px;
// height: px2rem(13px); // height: 13px;
// } // }
} }
.exchange-tips-wrapper { .exchange-tips-wrapper {
padding-top: px2rem(40px); padding-top: 40px;
margin: px2rem(20px); margin: 20px;
font-size: px2rem(16px); font-size: 16px;
.content { .content {
.title { .title {
line-height: px2rem(18px); line-height: 18px;
font-weight: 700; font-weight: 700;
color: #373839; color: #373839;
margin: px2rem(12px) 0; margin: 12px 0;
} }
.text { .text {
color: #676869; color: #676869;
......
<template>
<div class="goods-details-wrapper">
商品详情页面
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
.goods-details-wrapper {
font-size: 14px;
}
</style>
\ No newline at end of file
...@@ -10,65 +10,91 @@ ...@@ -10,65 +10,91 @@
borderStyle="1px solid #fff" borderStyle="1px solid #fff"
></CommonNavbar> ></CommonNavbar>
<section class="page-content"> <section class="page-content">
<!-- {{token}} -->
<table class="page-content-table"> <table class="page-content-table">
<tr> <tr>
<td @click="changeTab(1)" :class="{'active': tabIndex === 1}"> <td @click="changeTab(1)" :class="{'active': tabIndex === 1}">
<div class="tap-title"> <div class="tap-title">
<span :style="{'color': tabIndex === 1 ? '#333' : '#999'}">我的项目</span> <span :style="{'color': tabIndex === 1 ? '#333' : '#999'}">我的项目</span>
<span></span> <span :class="{'android': isAndroid, 'ios': isIOS}"></span>
</div> </div>
</td> </td>
<td @click="changeTab(2)" :class="{'active': tabIndex === 2}"> <td @click="changeTab(2)" :class="{'active': tabIndex === 2}">
<div class="tap-title"> <div class="tap-title">
<!-- <span>其它项目</span> -->
<span :style="{'color': tabIndex === 2 ? '#333' : '#999'}">全部项目</span> <span :style="{'color': tabIndex === 2 ? '#333' : '#999'}">全部项目</span>
<span></span> <span :class="{'android': isAndroid, 'ios': isIOS}"></span>
</div> </div>
</td> </td>
</tr> </tr>
</table> </table>
<!-- <article v-show="isShow" class="cb-wrapper" :class="{'padding-top-111': !isWeb}">
<CardBanner :userMobile="userMobile"></CardBanner>
</article> -->
<article class="page-content-list"> <article class="page-content-list">
<CommonTitle title="国家级继续医学教育项目(远程)" :isShowCert="false"></CommonTitle>
<ICardItem :oneLevelUrl="oneLevelUrl" :provinceId="provinceId" :organizationId="organizationId" :cmeToken="token"></ICardItem>
<CommonTitle
class="mt-10"
v-show="isShow && ((tabIndex === 1 && joinProjectList.length) || (tabIndex === 2 && otherProjectList.length))"
:title="tabIndex === 1 ? '我的继续医学教育课程' : '继续医学教育课程'"
:isShowCert="false"
/>
<section v-if="tabIndex === 1"> <section v-if="tabIndex === 1">
<CoopListItem <CoopListItem
:paramData="joinProjectList" :paramData="joinProjectList"
:coopType="1" :coopType="1"
:tabTo="1" :tabTo="1"
:isShow="isShow" :isShow="isShow"
:userMobile="userMobile"></CoopListItem> :userMobile="userMobile"
:provinceId="provinceId"
:organizationId="organizationId"
></CoopListItem>
</section> </section>
<section v-if="tabIndex === 2"> <section v-if="tabIndex === 2">
<CoopListItem <CoopListItem
:paramData="otherProjectList" :paramData="otherProjectList"
:coopType="1" :coopType="1"
:tabTo="2" :tabTo="2"
:isShow="isShow" :isShow="isShow"
:userMobile="userMobile"></CoopListItem> :userMobile="userMobile"
:provinceId="provinceId"
:organizationId="organizationId"
></CoopListItem>
</section> </section>
</article> </article>
</section> </section>
<Toast ref="toastTitle"></Toast>
<Loading v-if="showLoading"/>
<!-- <div> <!-- <div>
<iframe src="https://www.baidu.com" id="mobsf" frameborder="0" style="width:100%;height:500px;"></iframe> <iframe src="https://www.baidu.com" id="mobsf" frameborder="0" style="width:100%;height:500px;"></iframe>
</div>--> </div>-->
<!-- <discuss-topic-stencil /> --> <!-- <discuss-topic-stencil /> -->
<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" />
<!-- <CardPopup :showGoUpdate="showGoUpdate"></CardPopup> -->
</div> </div>
</template> </template>
<script> <script>
import CommonNavbar from "@/components/common/common-navbar"; import CommonNavbar from "@/components/common/common-navbar";
import CoopListItem from "@/components/business/coop-list-item"; import CoopListItem from "@/components/business/coop-list-item";
import Loading from "@/components/common/common-loading"; import Loading from "@/components/common/common-loading";
import Toast from "@/components/common/common-toast"; import CardBanner from "@/components/cme/card-banner";
import ICardItem from "@/components/cme/I-card-item";
// import CardPopup from "@/components/cme/card-popup";
import CommonTitle from "@/components/common/common-title";
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
export default { export default {
data() { data() {
return { return {
showLoading: false, showLoading: false,
isWeb: window.__isWeb,
isAndroid: window.__isAndroid,
isIOS: window.__isIOS,
bgColor: "#fff", bgColor: "#fff",
isShow: false, isShow: false,
navTitle: "CME项目", navTitle: "继教课程",
compTitle: "组件名称", compTitle: "组件名称",
isShowNavbar: true, isShowNavbar: true,
isFixNavbar: false, isFixNavbar: false,
...@@ -79,11 +105,16 @@ export default { ...@@ -79,11 +105,16 @@ export default {
otherProjectList: [], // 全部项目 otherProjectList: [], // 全部项目
token: "", token: "",
toastTitle: "", toastTitle: "",
userMobile: "" userMobile: "",
needShowBackup: false,
showGoUpdate: false,
oneLevelUrl: '',
provinceId: 0,
organizationId: 0,
}; };
}, },
computed: { computed: {
...mapGetters(["projectTabIndex"]) ...mapGetters(["projectTabIndex", "organizationInfo"])
}, },
components: { components: {
...@@ -91,7 +122,10 @@ export default { ...@@ -91,7 +122,10 @@ export default {
CommonNavbar, CommonNavbar,
CoopListItem, CoopListItem,
Loading, Loading,
Toast, CardBanner,
CommonTitle,
ICardItem,
// CardPopup
}, },
created() { created() {
var _this = this; var _this = this;
...@@ -100,6 +134,7 @@ export default { ...@@ -100,6 +134,7 @@ export default {
_this.token = param.userToken; _this.token = param.userToken;
_this.userMobile = param.userMobile; _this.userMobile = param.userMobile;
_this.getCoopData(); _this.getCoopData();
console.log('__getUserInfo', param);
}; };
_this.getUserInfo(); _this.getUserInfo();
if (__isWeb) { if (__isWeb) {
...@@ -108,41 +143,50 @@ export default { ...@@ -108,41 +143,50 @@ export default {
window.__refresh = function() { window.__refresh = function() {
//_this.tabIndex = _this.projectTabIndex; //_this.tabIndex = _this.projectTabIndex;
_this.getUserInfo(); _this.getUserInfo();
// document.documentElement.scrollTop = 0;
// document.body.scrollTop = 0;
}; };
// 打开页面埋点 // 打开页面埋点
this.$sendBuriedData({ this.$sendBuriedData({
action: '打开页面', component_tag: "210#0#0#0"
component_tag: '210#0#0#0'
}); });
// TEST
// window.__getPositionData = function(param) {
// console.log(param)
// }
// TEST
// this.getPositionData();
window.addEventListener("scroll", this.scrollFun);
}, },
mounted() { mounted() {
var _this = this; var _this = this;
this.tabIndex = this.projectTabIndex; this.tabIndex = this.projectTabIndex;
// let param = {
// id: 12 };
// this.API_GET("app/certificate/downLoad", param).then(res => {
// });
document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
}, },
methods: { methods: {
...mapActions(["setUserInfo"]), ...mapActions(["setUserInfo", "setOrganizationInfo", "setJumpURLForI"]),
// //获取位置信息 测试代码 TEST
// getPositionData() {
// console.log('getPositionData');
// rocNative.getPositionData({
// __funcName: "__getPositionData"
// });
// },
//获取版本号 //获取版本号
getUserInfo() { getUserInfo() {
rocNative.getUserInfo({ rocNative.getUserInfo({
__funcName: "__getUserInfo" __funcName: "__getUserInfo"
}); });
}, },
// 切换列表
changeTab(index) { changeTab(index) {
let tag = index == 1 ? '210#210001#0' : '210#210001#1'; let tag = index == 1 ? "210#210001#0" : "210#210001#1";
this.tabIndex = index; this.tabIndex = index;
if(index == 1 && !this.userMobile) { if (index == 1 && !this.userMobile) {
rocNative.gotoLogin(); rocNative.gotoLogin();
this.tabIndex = 2; this.tabIndex = 2;
} }
...@@ -150,103 +194,75 @@ export default { ...@@ -150,103 +194,75 @@ export default {
component_tag: tag component_tag: tag
}); });
}, },
// 获取所有项目:我的项目、其它项目 // 获取所有项目:我的项目、其它项目
getCoopData() { getCoopData() {
// debugger
let _this = this; let _this = this;
let param = { let param = {
token: _this.token, token: _this.token,
setEntry: true setEntry: true
}; };
let cachedJoinProjectList = [] _this.joinProjectList = [];
let cachedOtherProjectList = [] _this.otherProjectList = [];
_this.otherProjectList = []
_this.showLoading = true; _this.showLoading = true;
this.GET("cme/project/list", param).then( this.GET("cme/project/list", param).then(res => {
res => { _this.showLoading = false;
_this.showLoading = false; if (res.code == "000000") {
if (res.code == "000000") { // let organizationInfo = {}
// let oldProjects1 = []; _this.joinProjectList = res.data.myCMEProjectListDtoList;
// let oldProjects2 = []; _this.otherProjectList = res.data.allCMEProjectListDtoList;
// for(let i = 0; i < res.data.oldProjects.length; i++) { _this.provinceId = res.data.provinceId;
// if(res.data.oldProjects[i].roleFlag == 1) { _this.organizationId = res.data.organizationId;
// oldProjects1.push(res.data.oldProjects[i]); _this.oneLevelUrl = res.data.oneLevelUrl; // I类学习卡列表地址
// } else if (res.data.oldProjects[i].roleFlag == 0) {
// oldProjects2.push(res.data.oldProjects[i]);
// }
// }
// console.log('项目1',oldProjects1,'项目2',oldProjects2);
cachedJoinProjectList = res.data.myCMEProjectListDtoList; // 不做相应判断
cachedOtherProjectList = res.data.allCMEProjectListDtoList; if (_this.userMobile) {
_this.joinProjectList = res.data.myCMEProjectListDtoList; _this.tabIndex = 1;
_this.otherProjectList = res.data.allCMEProjectListDtoList; } else {
// cachedJoinProjectList = _this.handleOldProject( _this.tabIndex = 2;
// oldProjects1, }
// res.data.myProjectList if (_this.joinProjectList && _this.joinProjectList.length === 0) {
// ); _this.tabIndex = 2;
// cachedOtherProjectList = _this.handleOldProject(
// oldProjects2,
// res.data.otherProjectList
// );
// 如果用户已经登陆,则将"至今"的几个项目移到我的列表中
if(_this.userMobile) {
// cachedOtherProjectList.map(item => {
// if(item.projectName && item.projectName.indexOf('国家基本公共卫生服务项目基层高血压管理办公室') >= 0) {
// cachedJoinProjectList.unshift(item);
// } else {
// _this.otherProjectList.push(item);
// }
// })
_this.tabIndex = 1;
} else {
_this.tabIndex = 2;
// _this.otherProjectList = cachedOtherProjectList
}
// _this.joinProjectList = cachedJoinProjectList;
if (_this.joinProjectList && _this.joinProjectList.length === 0) {
_this.tabIndex = 2;
}
_this.isShow = true
// console.log('otherProjectList',_this.otherProjectList);
} }
_this.isShow = true;
} }
); });
}, },
handleOldProject(oldProjects, otherProjectList) {
let oldList = oldProjects.map(item => { // 监听滚动事件
item.pType = 1; scrollFun() {
return item; let scrollTop = window.scrollY;
}), if (scrollTop >= 500) {
otherList = otherProjectList.map(item => { this.needShowBackup = true;
item.pType = 2; } else {
return item; this.needShowBackup = false;
}); }
return oldList.concat(otherList);
}, },
// 滚动到顶部
scrollTop() {
window.scrollTo(0, 0);
},
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../style/mixin";
.page-content { .page-content {
&-table { &-table {
position: fixed; position: fixed;
z-index: 1; z-index: 100;
width: 100%; width: 100%;
text-align: center; text-align: center;
border-bottom: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7;
background: #fff; background: #fff;
tr { tr {
font-size: px2rem(15px); font-size: 15px;
font-weight: 700; font-weight: 700;
height: px2rem(44px); height: 44px;
td { td {
width: 50%; width: 50%;
padding-top: px2rem(6px); padding-top: 6px;
.tap-title { .tap-title {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -255,25 +271,63 @@ export default { ...@@ -255,25 +271,63 @@ export default {
span:nth-child(2) { span:nth-child(2) {
position: relative; position: relative;
left: 0; left: 0;
bottom: px2rem(-9px); bottom: -8px;
z-index: 2; z-index: 2;
width: px2rem(10px); width: 10px;
height: px2rem(3px); height: 3px;
background: rgba(255, 255, 255, 1); background: rgba(255, 255, 255, 1);
border-radius: px2rem(3px); border-radius: 3px;
} }
} }
&.active { &.active {
span:nth-child(2) { span:nth-child(2) {
background: rgba(68, 146, 132, 1); background: rgba(68, 146, 132, 1);
} }
span.android:nth-child(2) {
bottom: -12px;
}
span.ios:nth-child(2) {
bottom: -10px;
}
} }
} }
} }
} }
.cb-wrapper {
width: 100%;
position: fixed;
top: 49px;
left: 0;
z-index: 90;
// margin-bottom: 30px;
&.padding-top-111 {
top: 111px;
}
}
&-list { &-list {
padding-top: px2rem(50px); padding-top: 50px;
.mt-10 {
margin-bottom: -10px;
}
}
}
.back-up-icon {
position: fixed;
z-index: 110;
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> </style>
<template> <template>
<!-- 组件详情页面:模块列表及其下面的元件列表 --> <!-- 组件详情页面:模块列表及其下面的元件列表 -->
<div class="page-container-merge"> <div class="page-container-merge" :style="{'position': isShowEJDialog ? 'fixed' : 'static'}">
<CommonNavbar <CommonNavbar
id="header" id="header"
:bgColor="bgColor" :bgColor="bgColor"
...@@ -11,44 +11,58 @@ ...@@ -11,44 +11,58 @@
:shareTitle="project.projectName" :shareTitle="project.projectName"
:shareTitleInfo="project.projectIntro" :shareTitleInfo="project.projectIntro"
:isFixNavbar="isFixNavbar" :isFixNavbar="isFixNavbar"
:shareUrl="shareUrl"
:burialPoint="pointStyle" :burialPoint="pointStyle"
:projectId="projectId"
:limitTimes="limitTimes"
borderStyle="0px solid #fff" borderStyle="0px solid #fff"
:backMethod="from" :backMethod="from"
></CommonNavbar> ></CommonNavbar>
<div class="page-content list-container"> <div class="page-content list-container">
<!-- banner图片 --> <!-- banner图片 -->
<div v-if="bannerType == 1" class="page-content-img-container"> <div @click="gotoCourse()" v-if="bannerType == 1" class="page-content-img-container" style="position:relative;">
<img class="banner-img" :src="attachmentUrl" /> <img class="banner-img" :src="attachmentUrl" />
<!-- <img v-show="project.status == 1" class="banner-img-1" src="../images/status-join.png" /> -->
<img v-show="project.status == 5" class="banner-img-5" src="../images/status-keep-on.png" /> <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" /> <img v-show="project.status == 10" class="banner-img-10" src="../images/status-end-cme.png" />
</div> </div>
<!-- banner视频 --> <!-- banner视频 -->
<CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer> <CommonTcPlayer ref="tcPlayerRef" v-if="bannerType == 2" style="flex" :options="videoOptions" @sk-tip="isShowSkDialog=true"></CommonTcPlayer>
<div class="sk-btn-cover-new" @click="continueStudy()" v-if="bannerType == 2 && hasBindCard" >
<span :class="{'android': isAndroid}">继续学习</span>
</div>
<!-- 项目标题 --> <!-- 项目标题 -->
<CommonDescription <CommonDescription
:projectName="project.projectName" :projectName="project.projectName"
:studyNum="project.studyNum" :studyNum="project.studyNum"
:subject="project.subject" :subject="project.subject"
/> />
<CommonAdertImg :advertInfoList="advertInfoList" position="0" />
<!-- 步骤条 --> <!-- 步骤条 -->
<CmeStep <div v-if="project.cmeType != 2">
:currentProgress="project.currentProgress" <CmeStep
:studyProgress="project.studyProgress" :currentProgress="project.currentProgress"
:credit="project.credit" :studyProgress="project.studyProgress"
:creditId="project.creditId" :credit="project.credit"
:certificateUrl="project.certificateUrl" :creditId="project.creditId"
:inScope="project.inScope" :certificateUrl="project.certificateUrl"
:projectId="projectId" :inScope="project.inScope"
:certificateId="project.certificateId" :projectId="projectId"
@applicationCredit="applicationCredit" :certificateId="project.certificateId"
/> @applicationCredit="applicationCredit"
/>
</div>
<!-- 简介和目录 --> <!-- 简介和目录 -->
<div class="intro-catalogue-container"> <div class="intro-catalogue-container">
<div id="content-title" class="title" :class="{'fixed-title-1': (fixedFlag && !isWeb), 'fixed-title-2': (fixedFlag && isWeb)}"> <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="jumpIntro">简介</span>
<span :class="{'focus': !tabFlag}" @click="jumpCatalogue">目录</span> <span :class="{'focus': !tabFlag}" @click="jumpCatalogue">目录</span>
</div> </div>
<div v-show="fixedFlag" class="fixed-flag-height"></div>
<div id="intro-content" class="intro-content"> <div id="intro-content" class="intro-content">
<BasicInfo <BasicInfo
:projectNo="project.projectNo" :projectNo="project.projectNo"
...@@ -60,15 +74,19 @@ ...@@ -60,15 +74,19 @@
:organName="project.organName" :organName="project.organName"
:remind="project.remind" :remind="project.remind"
:projectCredit="project.projectCredit" :projectCredit="project.projectCredit"
:cmeType="project.cmeType"
:projectName="project.projectName"
/> />
<LearnKnow :mustKnow="project.mustKnow"></LearnKnow> <LearnKnow :mustKnow="project.mustKnow"></LearnKnow>
<CommonSpliteLine></CommonSpliteLine> <CommonSpliteLine></CommonSpliteLine>
<ItemIntro :textContent="textContent" @itemIntroText="itemIntroText"></ItemIntro> <ItemIntro :textContent="textContent" @itemIntroText="itemIntroText"></ItemIntro>
<ItemLeader <ItemLeader
:projectLeader="projectLeader" v-if="projectLeader"
:leaderText="leaderText" :projectLeader="projectLeader"
@changeLeaderText="changeLeaderText"/> :leaderText="leaderText"
<TeacterIntro :doctorList="doctorList"></TeacterIntro> @changeLeaderText="changeLeaderText"
/>
<TeacterIntro v-if="doctorList.length" :doctorList="doctorList"></TeacterIntro>
</div> </div>
<CommonSpliteLine></CommonSpliteLine> <CommonSpliteLine></CommonSpliteLine>
<div id="catalogue-content" class="catalogue-content"> <div id="catalogue-content" class="catalogue-content">
...@@ -78,11 +96,17 @@ ...@@ -78,11 +96,17 @@
:actionList="actionList" :actionList="actionList"
:detailNum="detailNum" :detailNum="detailNum"
:courseRequire="courseRequire" :courseRequire="courseRequire"
:hasBindCard="hasBindCard"
:limitTimes="limitTimes"
:cmeType="project.cmeType"
/> />
</div> </div>
</div> </div>
<CommonAdertImg needPadTop :advertInfoList="advertInfoList" position="1" />
<NoMoreContent />
<div v-if="detailNum <= 9" class="no-more-bottom"></div>
</div> </div>
<Loading v-show="showLoading" />
<!-- 弹框 --> <!-- 弹框 -->
<CommonDialog <CommonDialog
:isShowDialog="isShowDialog" :isShowDialog="isShowDialog"
...@@ -92,6 +116,77 @@ ...@@ -92,6 +116,77 @@
:content="dialogContent" :content="dialogContent"
@handlerAction="handlerAction" @handlerAction="handlerAction"
/> />
<!-- 弹框 -->
<ExjumperDialog
:isShowDialog="isShowEJDialog"
isSingle
needSubContent
content="请确保您已经在云鹊平台购买学员优惠学习卡"
subContent="1. 跳转后点击“购买学习”,注册登录“中华医学教育在线”平台(首次登录需用手机号注册)<br/>2. 支付方式选择 “学习卡支付”,输入在云鹊平台已购学习卡的激活码,即可参加考试申请学分"
cancleBtnText="我知道了"
@handlerAction="handlerEJAction"
/>
<ExjumperButton
@btnClick="beforeJumpToExam"
v-if="project.cmeType == 2 && hasBindCard"
:btnText="project.currentProgress > 1 ? '参加考试' : '学完全部课程,可参加考试'"
:type="project.currentProgress > 1 ? 'primary' : 'disabled'"
></ExjumperButton>
<div v-if="project.cmeType == 2 && !isWeb" style="padding-top: 30px"></div>
<BindCardButton
v-if="project.cmeType == 2 && !hasBindCard && !isWeb"
:cardInfo="cardInfo"
@changeClick="changeClick"
@gotoBuy="confirm"
></BindCardButton>
<!--去激活-->
<ChangeCard
:changeErrorMsg="changeCardErrorMsg"
:isShow="showChangeCard"
@cancle="cancleChangeCard"
@confirm="changeCardAction">
</ChangeCard>
<!-- <CardPopup :cardInfo="cardInfo" :isShow="isShowPopup" @clickOverlay="clickOverlay" @cancle="jumpToCardList()" @confirm="confirm"></CardPopup> -->
<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="handlerActionTips"
></CourseDialog>
</div> </div>
</template> </template>
<script> <script>
...@@ -112,16 +207,32 @@ import ItemIntro from "@/components/cme/item-intro"; ...@@ -112,16 +207,32 @@ import ItemIntro from "@/components/cme/item-intro";
import ItemLeader from "@/components/cme/item-leader"; import ItemLeader from "@/components/cme/item-leader";
import TeacterIntro from "@/components/cme/teacter-intro"; import TeacterIntro from "@/components/cme/teacter-intro";
import CommonDialog from "@/components/cme/common-dialog"; import CommonDialog from "@/components/cme/common-dialog";
import CourseDialog from "@/components/course/course-dialog";
import ExjumperDialog from "@/components/cme/exjumper-dialog";
import ExjumperButton from "@/components/cme/exjumper-button";
import NoMoreContent from "@/components/business/no-more-content";
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 } from "@/utils/index"; import { getWebPageUrl, gotoPage, getAppVersion } from "@/utils/index";
import { mapGetters, mapActions } from "vuex"; import { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter"; import vueFilters from "@/utils/filter";
import { Toast } from "vant";
// import CardPopup from "@/components/cme/card-popup";
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 { export default {
data() { data() {
return { return {
// token: "9B62E5874DA94979A54DB3E9DFC1443F", // token: "9B62E5874DA94979A54DB3E9DFC1443F",
isWeb: window.__isWeb, isWeb: window.__isWeb,
isAndroid: __isAndroid,
textContent: "", textContent: "",
leaderText: "", leaderText: "",
pageTitle: "", pageTitle: "",
...@@ -132,7 +243,8 @@ export default { ...@@ -132,7 +243,8 @@ export default {
confirmBtnText: "", // 弹框按钮 confirmBtnText: "", // 弹框按钮
cancleBtnText: "", cancleBtnText: "",
isShowDialog: false, isShowDialog: false,
tabFlag: true, // 显示目录还是简介 isShowEJDialog: false,
tabFlag: false, // 显示目录还是简介
fixedFlag: false, // 目录和简介是否固定 fixedFlag: false, // 目录和简介是否固定
project: { project: {
credit: "", // 学分 credit: "", // 学分
...@@ -155,8 +267,21 @@ export default { ...@@ -155,8 +267,21 @@ export default {
certificateUrl: "", // 证书url certificateUrl: "", // 证书url
inScope: 0, // 是否在范围内判断 inScope: 0, // 是否在范围内判断
projectCredit: "", // 学分 projectCredit: "", // 学分
certificateId: "0" certificateId: "0",
cmeType: 1, // 1: 自营项目; 2: 中华医学会二类
examBtnUrl: "", // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录
cardStatus: 0,
cardKey: '',
// cmeType=2时不显示进度,
// projectNo为空时不显示项目编号,
// projectLeader为空时不显示项目负责人,
// inScope=0时考试按钮不显示,
// currentProgress>1时考试按钮显示并可用
}, },
hasBindCard: false, // 是否绑定过学习卡或激活过 没有绑定,则显示绑定按钮
limitTimes: 60,
projectLeader: {}, projectLeader: {},
doctorList: [], doctorList: [],
from: "inner", from: "inner",
...@@ -170,13 +295,16 @@ export default { ...@@ -170,13 +295,16 @@ export default {
bannerType: 1, // 1 图片 2视频 bannerType: 1, // 1 图片 2视频
videoOptions: { videoOptions: {
mp4: "", mp4: "",
autoplay: false, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的 autoplay: true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
coverpic: require("../images/video-cover.png"), coverpic: require("../images/video-cover.png"),
width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度 width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度
height: "210" //视频的显示高度,请尽量使用视频分辨率高度 height: "210", //视频的显示高度,请尽量使用视频分辨率高度
trySeeTime: '',
x5_fullscreen: false,
}, },
//projectStatus: 1, //1没有获得证书 2是获得全部证书 //projectStatus: 1, //1没有获得证书 2是获得全部证书
attachmentUrl: require("../images/banner-default.png"), // attachmentUrl: require("../images/banner-default.png"),
attachmentUrl: require("../images/video-cover.png"),
bgColor: "none", bgColor: "none",
navTitle: "项目详情", navTitle: "项目详情",
// compTitle: "组件名称", // compTitle: "组件名称",
...@@ -187,7 +315,33 @@ export default { ...@@ -187,7 +315,33 @@ export default {
actionList: [], actionList: [],
detailNum: 0, detailNum: 0,
courseRequire: 0, courseRequire: 0,
clientType: 0 clientType: 0,
// currentProgress>1时考试按钮显示并可用
btnType: "primary", // primary: 可跳转时(currentProgress = 1); disabled: 不可跳转时
btnText: "学完全部课程,可参加考试", // 参加考试(currentProgress = 1); 或者学完全部课程,可参加考试
provinceId: "",
organizationId: "",
isShowPopup: false,
cardInfo: {
id: 0
},
advertInfoList: [],
showChangeCard: false, //是否展示激活弹框,
changeCardErrorMsg: "",
continueStudyType: 0,
skCourseId: 0,
isShowSkDialog: false,
isShowIOSDownloadDialog: false,
shareUrl: location.href,
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 2,
orderId: 0
},
subContent: "",
hasNoUsedCard: false,
}; };
}, },
components: { components: {
...@@ -203,20 +357,45 @@ export default { ...@@ -203,20 +357,45 @@ export default {
ItemIntro, ItemIntro,
ItemLeader, ItemLeader,
TeacterIntro, TeacterIntro,
CommonDialog CommonDialog,
CourseDialog,
ExjumperButton,
ExjumperDialog,
// CardPopup,
CommonAdertImg,
NoMoreContent,
BindCardButton,
ChangeCard,
ShiKanCommonDialog,
IOSDownloadDialog
}, },
computed: { computed: {
...mapGetters(["userInfo"]) ...mapGetters(["userInfo"])
}, },
created() { created() {
let _this = this; let _this = this;
this.from = this.$route.query.from || this.from || "native"; this.from = this.$route.query.from || this.from || "native";
this.projectId = this.$route.query.id || 1; this.projectId = this.$route.query.id || 1;
this.courseRequire = this.$route.query.courseRequire; // 此两个参数将由接口返回
// this.courseRequire = this.$route.query.courseRequire;
// this.provinceId = this.$route.query && this.$route.query.provinceId || 0;
// this.organizationId = this.$route.query && this.$route.query.organizationId || 0;
console.log('#######location', location);
window.__getUserInfo64Comp = function(param) { window.__getUserInfo64Comp = function(param) {
// appVersion 安卓 3.2.2 iOS
console.log("__getUserInfo64Comp", param);
_this.token = param.userToken; _this.token = param.userToken;
_this.setUserInfo(param); _this.setUserInfo(param);
let appVersion = param.appVersion || '300';
let appVersionNum = appVersion.split(".").join("");
// 如果是iOS系统并且版本小于344,则提示升级
if(__isIOS && appVersionNum < 344) {
_this.isShowIOSDownloadDialog = true;
}
_this.checkToken(); _this.checkToken();
_this.getProjectParticularsV2(); _this.getProjectParticularsV2();
}; };
...@@ -225,6 +404,7 @@ export default { ...@@ -225,6 +404,7 @@ export default {
// let param = {}; // let param = {};
// __getUserInfo64Comp(param); // __getUserInfo64Comp(param);
// } // }
if (__isWeb) { if (__isWeb) {
_this.getProjectParticularsV2(); _this.getProjectParticularsV2();
} }
...@@ -234,9 +414,18 @@ export default { ...@@ -234,9 +414,18 @@ export default {
// 打开页面埋点 // 打开页面埋点
this.$sendBuriedData({ this.$sendBuriedData({
action: "打开页面", // action: "打开页面",
component_tag: `211#0#${this.projectId}#0` component_tag: `211#0#${this.projectId}#0`
}); });
window.__getPositionData = function(param) {
console.log(param);
// _this.showLoading = false;
param.setEntry = true;
_this.getProvinceIdByPosition(param);
};
// 调用广告位接口
this.getAdvertInfoList();
}, },
mounted() { mounted() {
window.addEventListener("scroll", this.scrollFun); window.addEventListener("scroll", this.scrollFun);
...@@ -247,28 +436,366 @@ export default { ...@@ -247,28 +436,366 @@ export default {
}, },
methods: { methods: {
...mapActions(["setUserInfo"]), ...mapActions(["setUserInfo"]),
skAction() {
},
cancleChangeCard() {
this.showChangeCard = false;
},
// 查询是否买过类似的卡,但还没有绑定
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;
}
});
},
// 处理提示信息框
handlerActionTips(type) {
if(type == 1) {
this.$sendBuriedData({
component_tag: `883#88319`
});
this.showBindCardTips = false;
} else {
this.$sendBuriedData({
component_tag: `883#88318`
});
this.changeCardAction(this.cmeCardModels.cardKey, true);
}
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
idType: 1,
cardKey: cardKey,
cardType: this.project.cardType || 2,
goodsType: this.project.goodsType || 2,
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) {
if(isInTips) {
Toast(res.message);
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
} else {
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
_this.showChangeCard = false;
Toast("激活成功,开始学习");
_this.getProjectParticularsV2();
}
} else {
}
}).catch( e => {
if(isInTips) {
Toast("无效的激活码");
_this.showBindCardTips = false;
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
});
},
// 复制卡密
copyLink() {
let _this = this;
let clipboard = new this.clipboard(".cobyOrderSn");
clipboard.on("success", function() {
Toast("已成功复制激活码");
});
clipboard.on("error", function() {
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);
}
});
},
// 点击弹层
clickOverlay() {
console.log("clickOverlay");
// this.isShowPopup = false;
},
// 点击“参与考试”
beforeJumpToExam() {
this.$sendBuriedData({
component_tag: `882#8824`
});
// 如果是首次,则弹出弹框
if (this.project.firstIntoExam) {
this.isShowEJDialog = true;
} else {
// this.isBuy(2);
this.jumpToCardList();
}
},
// 第一次跳转弹框,点击时调用相应接口
handlerEJAction() {
this.$sendBuriedData({
component_tag: `883#8831`
});
this.isShowEJDialog = false;
this.jumpToCardList();
// this.isBuy(2);
this.firstIntoExamAction();
},
// 判断用户是否购买过I类学习卡
// isBuy(cardType) {
// this.showLoading = true;
// // alert(this.showLoading)
// let param = {
// cardType: cardType,
// setEntry: true,
// }
// this.GET("trade/storage/card/isBuy", param).then(res => {
// if (res.code == "000000") {
// // 如果购买过,则直接跳转到中华医学会页面
// if(res.data) {
// this.jumpToCardList();
// } else {
// this.preJumper();
// }
// }
// });
// },
// 跳转II类学习详情页面(中华医学会项目详情页面)
jumpToCardList() {
this.$sendBuriedData({
component_tag: `885#8851`
});
this.showLoading = false;
// this.isShowPopup = 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);
},
// 关闭视频
closePlayer() {
},
// 跳转前判断是否有机构,否则使用定位信息
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 || 2,
cardTypeList: [ this.project.cardType || 3],
goodsType: this.project.goodsType,
// pageNum: 1,
// pageSize: 1
};
this.POST("trade/goods/cardList_v2", param).then(res => {
if (res.code == "000000") {
this.showLoading = false;
// this.isShowPopup = true;
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.project.projectId;
let projectId = this.projectId;
let pageUrl = getWebPageUrl(
`/cme/#/coop?id=${projectId}&cmeProjectId=${projectId}`
);
let courseUrl = encodeURIComponent(pageUrl);
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() {
let appVersion = this.userInfo.appVersion || "";
let appVersionNum = appVersion.split(".").join("");
if (appVersionNum < 341) {
Toast("请您下载新版本App");
return;
}
this.$sendBuriedData({
component_tag: `885#8852`
});
// this.isShowPopup = false;
// let pageUrl = this.project.examBtnUrl;
// 直接传入项目ID(projectId)
let projectId = this.project.projectId;
let pageUrl = getWebPageUrl(
`/cme/#/coop?id=${projectId}&cmeProjectId=${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() { getUserInfo() {
rocNative.getUserInfo({ rocNative.getUserInfo({
__funcName: "__getUserInfo64Comp" __funcName: "__getUserInfo64Comp"
}); });
}, },
scrollFun() {
let scrollTop =
document.body.scrollTop || document.documentElement.scrollTop;
const catalogue = document.getElementById("catalogue-content");
const h = catalogue.offsetTop - 600;
if (scrollTop > 20) {
this.isBlack = true;
this.bgColor = "#fff";
} else {
this.isBlack = false;
this.bgColor = "none";
}
this.fixedFlag = scrollTop > 300 ? true : false;
this.tabFlag = scrollTop > h ? false : true;
},
// token是否失效校验 // token是否失效校验
checkToken() { checkToken() {
let _this = this; let _this = this;
...@@ -280,6 +807,7 @@ export default { ...@@ -280,6 +807,7 @@ export default {
if (res.code !== "000000") { if (res.code !== "000000") {
//未登录 跳转登录页 //未登录 跳转登录页
console.log("跳登录"); console.log("跳登录");
_this.$refs.tcPlayerRef && _this.$refs.tcPlayerRef.pause();
rocNative.gotoLogin(); rocNative.gotoLogin();
} else { } else {
// if (!_this.premissionFlag) { // if (!_this.premissionFlag) {
...@@ -289,6 +817,7 @@ export default { ...@@ -289,6 +817,7 @@ export default {
} }
}); });
}, },
//(判断是否加入机构,是否为认证用户,是否在申请范围内) //(判断是否加入机构,是否为认证用户,是否在申请范围内)
permission() { permission() {
let _this = this; let _this = this;
...@@ -299,7 +828,10 @@ export default { ...@@ -299,7 +828,10 @@ export default {
setEntry: true setEntry: true
}; };
_this.NEW_POST("cme/credit/rangeCheck", param).then(res => { _this.NEW_POST("cme/credit/rangeCheck", param).then(res => {
if (res.code == "219004" || res.code == "219012") { if (
_this.project.cmeType != 2 &&
(res.code == "219004" || res.code == "219012")
) {
// 未加入机构 219004 不在申请范围 219012 // 未加入机构 219004 不在申请范围 219012
this.dialogContent = `该项目仅对${_this.project.scope}的用户开放`; this.dialogContent = `该项目仅对${_this.project.scope}的用户开放`;
this.cancleBtnText = "我知道了"; this.cancleBtnText = "我知道了";
...@@ -310,6 +842,7 @@ export default { ...@@ -310,6 +842,7 @@ export default {
} }
}); });
}, },
// 立即申请学分 // 立即申请学分
applicationCredit() { applicationCredit() {
let _this = this; let _this = this;
...@@ -332,7 +865,7 @@ export default { ...@@ -332,7 +865,7 @@ export default {
permCode: "009014" permCode: "009014"
}; };
rocNative.checkPermissions(params); rocNative.checkPermissions(params);
} }
// else if (res.code == "219012") { // else if (res.code == "219012") {
// this.dialogContent = res.message; // this.dialogContent = res.message;
// this.cancleBtnText = "我知道了"; // this.cancleBtnText = "我知道了";
...@@ -347,21 +880,67 @@ export default { ...@@ -347,21 +880,67 @@ export default {
} }
}); });
}, },
//去激活
changeClick(msg) {
console.log("in changeClick");
this.showChangeCard = true;
},
// 弹框按钮事件 // 弹框按钮事件
handlerAction(data) { handlerAction(data) {
this.isShowDialog = false; this.isShowDialog = false;
}, },
scrollFun() {
//如果是第一次的弹框,则直接退出
if(this.isShowEJDialog) return;
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() { jumpIntro() {
this.tabFlag = true; if (!this.tabFlag) {
this.fixedFlag = true; this.tabFlag = true;
const intro = document.getElementById("intro-content"); }
const title = document.getElementById("content-title"); if (!this.fixedFlag) {
this.fixedFlag = true;
}
let h; let h;
if(this.isWeb) { if (this.isWeb) {
h = intro.offsetTop - title.offsetHeight; h = intorOffsetTop - 30 - titleOffsetHeight;
}else { } else {
h = intro.offsetTop - 75 - title.offsetHeight; h = intorOffsetTop - 85 - titleOffsetHeight;
} }
window.scrollTo(0, h); window.scrollTo(0, h);
this.isBlack = true; this.isBlack = true;
...@@ -370,17 +949,20 @@ export default { ...@@ -370,17 +949,20 @@ export default {
component_tag: `211#211007#${this.projectId}` component_tag: `211#211007#${this.projectId}`
}); });
}, },
// 锚点到目录 // 锚点到目录
jumpCatalogue() { jumpCatalogue() {
this.tabFlag = false; if (this.tabFlag) {
this.fixedFlag = true; this.tabFlag = false;
const catalogue = document.getElementById("catalogue-content"); }
const title = document.getElementById("content-title"); if (!this.fixedFlag) {
this.fixedFlag = true;
}
let h; let h;
if(this.isWeb) { if (this.isWeb) {
h = catalogue.offsetTop - title.offsetHeight; h = cataOffsetTop - titleOffsetHeight;
}else { } else {
h = catalogue.offsetTop - 85 - title.offsetHeight; h = cataOffsetTop - 100;
} }
window.scrollTo(0, h); window.scrollTo(0, h);
this.isBlack = true; this.isBlack = true;
...@@ -389,6 +971,7 @@ export default { ...@@ -389,6 +971,7 @@ export default {
component_tag: `211#211008#${this.projectId}` component_tag: `211#211008#${this.projectId}`
}); });
}, },
// 获取项目详情 // 获取项目详情
getProjectParticularsV2() { getProjectParticularsV2() {
let _this = this; let _this = this;
...@@ -396,30 +979,67 @@ export default { ...@@ -396,30 +979,67 @@ export default {
token: _this.userInfo.userToken || this.token, token: _this.userInfo.userToken || this.token,
setEntry: true setEntry: true
}; };
// _this.showLoading = true; let videoUrl = this.$route.query.videoUrl || '';
if(videoUrl) {
param.trySeeFlag = 0;
} else {
param.trySeeFlag = 1;
}
_this.showLoading = true;
this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => { this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
if (res.code == "000000") { if (res.code == "000000") {
// 先设置视频URL再显示视频组件 ------------ BEGIN // 首先使用配置中的参数中的获取视频地址及视频时间
if (res.data.attachmentType == 2) { if(videoUrl) {
_this.videoOptions.mp4 = res.data.attachmentUrl; _this.limitTimes = this.$route.query.trySeeTime || 300000;
_this.videoOptions.mp4 = videoUrl;
_this.videoOptions.trySeeTime = this.$route.query.trySeeTime || 300000;
} else { } else {
_this.attachmentUrl = res.data.attachmentUrl; _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;
} }
_this.bannerType = res.data.attachmentType; let mp4Url = _this.videoOptions.mp4;
if (_this.bannerType == 2) { // 判断是否是mp4
_this.clientType = __isWeb ? 1 : __isAndroid ? 2 : 3; 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 = 1;
_this.bannerType = res.data.attachmentType;
} }
// 先设置视频URL再显示视频组件 ------------ END
console.log('location', location);
console.log('_this.videoOptions.mp4, trySeeTime, autoplay', _this.videoOptions.mp4, _this.videoOptions.trySeeTime, _this.videoOptions.autoplay);
// 如果绑定了卡,则提示学习下一节
_this.project = res.data; _this.project = res.data;
if(_this.project.projectIntro) {
_this.textContent = _this.project.projectIntro.length > 70 ? _this.project.projectIntro.slice(0, 70) + "..." : this.project.projectIntro; 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.project.mustKnow = _this.project.mustKnow.replace(
/(\r\n)|\r|\n/g,
"<br>"
);
_this.projectLeader = res.data.projectLeader || {}; _this.projectLeader = res.data.projectLeader;
if(_this.projectLeader.info) { if (_this.projectLeader && _this.projectLeader.info) {
_this.leaderText = _this.projectLeader.info.length > 70 ? _this.projectLeader.info.slice(0, 70) + "..." : 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.doctorList = res.data.doctorList;
...@@ -428,32 +1048,78 @@ export default { ...@@ -428,32 +1048,78 @@ export default {
res.data.projectComponentDTOS res.data.projectComponentDTOS
); );
if(!_this.isWeb && !_this.premissionFlag) { if (!_this.isWeb && !_this.premissionFlag) {
_this.premissionFlag = true; _this.premissionFlag = true;
_this.permission(); // 提示是否有机构和在申请范围内 _this.permission(); // 提示是否有机构和在申请范围内
} }
// 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(
"getProjectParticularsV2",
cataOffsetTop,
intorOffsetTop
);
// 直接跳转 cmeType == 2
// if (_this.project.jumpToContents || this.project.cmeType == 2) {
if (_this.hasBindCard) {
setTimeout(() => {
this.jumpCatalogue();
}, 200);
}
// _this.copyLink();
}, 200);
setTimeout(() => {
_this.showLoading = false;
}, 800);
// 如果 hasBindCard 为false,则获取卡信息 0:未绑卡 1:已绑卡
if (!_this.hasBindCard) {
_this.preJumper();
_this.hasNoUsedCardAction();
}
} }
//_this.showLoading = false;
}); });
}, },
// 项目负责人--详情(收起) // 项目负责人--详情(收起)
changeLeaderText(data) { changeLeaderText(data) {
let _this = this; let _this = this;
if(_this.projectLeader.info) { if (_this.projectLeader.info) {
if(!data.allTextFlag) { if (!data.allTextFlag) {
_this.leaderText = _this.projectLeader.info.length > 70 ? _this.projectLeader.info.slice(0, 70) + "..." : this.projectLeader.info; _this.leaderText =
}else { _this.projectLeader.info.length > 70
? _this.projectLeader.info.slice(0, 70) + "..."
: this.projectLeader.info;
} else {
_this.leaderText = _this.projectLeader.info; _this.leaderText = _this.projectLeader.info;
} }
} }
}, },
// 项目介绍 // 项目介绍
itemIntroText(data) { itemIntroText(data) {
let _this = this; let _this = this;
if(_this.project.projectIntro) { if (_this.project.projectIntro) {
if(!data.allTextFlag) { if (!data.allTextFlag) {
_this.textContent = _this.project.projectIntro.length > 70 ? _this.project.projectIntro.slice(0, 70) + "..." : this.project.projectIntro; _this.textContent =
}else { _this.project.projectIntro.length > 70
? _this.project.projectIntro.slice(0, 70) + "..."
: this.project.projectIntro;
} else {
_this.textContent = _this.project.projectIntro; _this.textContent = _this.project.projectIntro;
} }
} }
...@@ -463,6 +1129,8 @@ export default { ...@@ -463,6 +1129,8 @@ export default {
let list = data; let list = data;
let actionList = []; let actionList = [];
let detailNum = 0; let detailNum = 0;
let hasFindCourseOrExam = false;
let item = null;
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].portalModuleDTOS.length; j++) { for (let j = 0; j < list[i].portalModuleDTOS.length; j++) {
detailNum++; detailNum++;
...@@ -508,138 +1176,224 @@ export default { ...@@ -508,138 +1176,224 @@ export default {
} else if (len <= 30 && certificate != 2) { } else if (len <= 30 && certificate != 2) {
return 1; return 1;
} }
} },
// 获取单个模块信息
// getComponentInfoById(componentId) {
// let _this = this;
// let param = {
// componentId: componentId,
// token: _this.userInfo.userToken,
// setEntry: true
// };
// this.GET("portal/portalApp/component", param).then(res => {
// if (res.code == "000000") {
// _this.attachmentUrl = res.data.imageUrl;
// _this.projectIntro = res.data.introduce;
// _this.projectName = res.data.name;
// }
// });
// },
// 获取单个项目信息 // 查找没有学习完成的课程或考试
// getCoopInfo(projectId) { continueStudy() {
// let _this = this; let courseIdOrExamId = '';
// let param = { let portalModuleDTOS = [];
// portalProjectId: projectId, let contentList = [];
// token: _this.userInfo.userToken, let item = {};
// setEntry: true let firstItem = null;
// }; outloop: for(let i = 0; i < this.projectComponentDTOS.length; i ++) {
// this.GET("portal/portalApp/queryProjectParticulars", param).then(res => { portalModuleDTOS = this.projectComponentDTOS[i].portalModuleDTOS;
// if (res.code == "000000") { for(let j = 0; j < portalModuleDTOS.length; j ++) {
// // 先设置视频URL再显示视频组件 ------------ BEGIN contentList = portalModuleDTOS[j].contentList;
// if (res.data.attachmentType == 2) { for(let k = 0; k < contentList.length; k ++) {
// _this.videoOptions.mp4 = res.data.attachmentUrl; item = contentList[k];
// } else { if(!firstItem && item.id) {
// _this.attachmentUrl = res.data.attachmentUrl; firstItem = item;
// } }
// _this.bannerType = res.data.attachmentType; if( (item.type == 1 && item.id && (item.useFlag != 2) && (item.status == 11 || item.status == 12))
// if(_this.bannerType == 2) { || (item.type == 2 && item.id && (item.useFlag != 2) && (item.status == 21 || item.status == 22)) ) {
// _this.clientType = __isWeb ? 1 : __isAndroid ? 2 : 3; this.continueStudyType = item.type;
// } this.skCourseId = item.id;
// // 先设置视频URL再显示视频组件 ------------ END 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();
}
},
// _this.projectIntro = res.data.projectIntro; // 跳转到考试
// _this.projectName = res.data.projectName; gotoExamNew: function(examId) {
// _this.pStatus = res.data.status; let paramList = [
// } {
// }); key: "className",
// }, value:
// setContent(data) { "com.picahealth.yunque.activitys.exammodule.ExamPreActivity###PicaDo.ExamModuleManager",
// let list = data; type: 4,
// for(let i=0;i<list.length;i++) { seqNo: 1
// let len = vueFilters.strLength(list[i].name); },
// let certificate = list[i].certificateFlag; {
// if(len > 30 && certificate == 2) { key: "examId",
// list[i].height = "2"; value: this.skCourseId,
// } else if (len > 30 && certificate != 2) { type: 4,
// list[i].height = 2; seqNo: 1
// } else if (len <= 30 && certificate == 2) { }
// list[i].height = "1"; ];
// } else if(len <= 30 && certificate != 2) {
// list[i].height = 1; rocNative.dispatchEventByModuleCode({
// } modeCode: "M200",
// } jsonString: paramList
// console.log('contentList!',list); });
// return list; },
// },
// 获取内容列表 // 跳转到课程
// getContentList(moduleId) { gotoCourseNew: function() {
// let _this = this; // if(this.hasBindCard || this.project.cmeType != 2) return;
// let param = { // let courseId = '';
// moduleId: _this.moduleId, let appVersion = getAppVersion(this.userInfo.appVersion);
// token: _this.userInfo.userToken, // 弹框提示下载新版本可以试看
// setEntry: true, if(appVersion < 343 && !this.hasBindCard) {
// projectId: _this.projectId, this.$dialog.confirm({
// }; className: 'con-dialog',
// _this.showLoading = true; showCancelButton: false,
// this.GET("portal/portalApp/contentList", param).then(res => { // message: '激活/购买后可学习完整课程',
// // _this.showLoading = false; message: '升级最新版本可试看课程',
// if (res.code == "000000") { confirmButtonText: '我知道了',
// _this.contentList = _this.setContent(res.data.contentList); }).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
},
];
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> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../style/mixin";
.page-container-merge { .page-container-merge {
.nav-top .nav-title { .nav-top .nav-title {
height: px2rem(0px); height: 0px;
// padding: px2rem(18px); // padding: 18px;
} }
.banner-img { .banner-img {
display: inherit; display: inherit;
width: px2rem(375px); width: 375px;
height: px2rem(210px); height: 210px;
&-1 { &-1 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(76px); width: 76px;
height: px2rem(30px); height: 30px;
} }
&-5 { &-5 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(76px); width: 76px;
height: px2rem(30px); height: 30px;
} }
&-10 { &-10 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(76px); width: 76px;
height: px2rem(30px); height: 30px;
} }
} }
.list-container { .list-container {
// margin-bottom: px2rem(40px); // margin-bottom: 40px;
.sk-btn-cover {
position: absolute;
top: 82px;
left: 163px;
z-index: 100;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #fff;
color: rgba(68, 146, 132, 1);
font-size: 13px;
border-radius: 50%;
}
.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;
} }
// opacity: ;
}
} }
.intro-catalogue-container { .intro-catalogue-container {
.title { .title {
height: px2rem(50px); height: 50px;
line-height: px2rem(30px); line-height: 30px;
padding: 0 px2rem(15px); padding: 0 15px;
border-bottom: 1px solid #f0f1f2; border-bottom: 1px solid #f0f1f2;
span { span {
display: inline-block; display: inline-block;
line-height: px2rem(15px); line-height: 15px;
font-size: px2rem(15px); font-size: 15px;
color: #979899; color: #979899;
padding-right: px2rem(35px); padding-right: 35px;
} }
span.focus { span.focus {
position: relative; position: relative;
...@@ -648,19 +1402,19 @@ export default { ...@@ -648,19 +1402,19 @@ export default {
span.focus:after { span.focus:after {
content: ""; content: "";
position: absolute; position: absolute;
left: px2rem(7px); left: 9px;
bottom: px2rem(-14px); bottom: -14px;
background: #449284; background: #449284;
// border-bottom: px2rem(1px) solid #449284; // border-bottom: 1px solid #449284;
width: px2rem(10px); width: 10px;
height: px2rem(3px); height: 3px;
border-radius: px2rem(3px); border-radius: 3px;
} }
} }
.title.fixed-title-1 { .title.fixed-title-1 {
position: fixed; position: fixed;
left: 0; left: 0;
top: px2rem(60px); top: 60px;
background: #fff; background: #fff;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
...@@ -668,20 +1422,28 @@ export default { ...@@ -668,20 +1422,28 @@ export default {
.title.fixed-title-2 { .title.fixed-title-2 {
position: fixed; position: fixed;
left: 0; left: 0;
top: px2rem(0px); top: 0px;
background: #fff; background: #fff;
width: 100%; width: 100%;
z-index: 999; z-index: 999;
} }
.catalogue-content { .catalogue-content {
padding: px2rem(30px) px2rem(15px) 0; padding: 30px 15px 0;
.catalogue-title { .catalogue-title {
font-size: px2rem(18px); font-size: 18px;
color: #373839; color: #373839;
font-weight: 700; font-weight: 700;
margin-bottom: px2rem(16px); margin-bottom: 16px;
} }
} }
.fixed-flag-height {
height: 50px;
}
} }
} }
.no-more-bottom {
position: relative;
width: 100%;
height: 40px;
}
</style> </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 || '2'; // 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>
...@@ -28,7 +28,6 @@ ...@@ -28,7 +28,6 @@
<CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer> <CommonTcPlayer v-if="bannerType == 2" style="flex" :options="videoOptions"></CommonTcPlayer>
<CommonDescription :descTitle="projectName" :value="projectIntro"></CommonDescription> <CommonDescription :descTitle="projectName" :value="projectIntro"></CommonDescription>
<CommonSpliteLine></CommonSpliteLine> <CommonSpliteLine></CommonSpliteLine>
<!-- <CellListItem :paramData="contentList" :moduleName="moduleName"></CellListItem> -->
<div v-if="visibleFlag == 1" class="project-num">{{ childrenList.length }} 个项目</div> <div v-if="visibleFlag == 1" class="project-num">{{ childrenList.length }} 个项目</div>
<CoopListItem v-if="visibleFlag == 1" :paramData="childrenList" :coopType="1" :tabTo="3" :isShow="isShow"></CoopListItem> <CoopListItem v-if="visibleFlag == 1" :paramData="childrenList" :coopType="1" :tabTo="3" :isShow="isShow"></CoopListItem>
<NoPermContent v-if="visibleFlag == 2"></NoPermContent> <NoPermContent v-if="visibleFlag == 2"></NoPermContent>
...@@ -54,11 +53,7 @@ export default { ...@@ -54,11 +53,7 @@ export default {
from: "inner", from: "inner",
isBlack: false, isBlack: false,
showLoading: false, showLoading: false,
projectId: 1,
componentId: 1,
moduleId: 1,
contentList: [], contentList: [],
moduleName: "",
bannerType: 1, bannerType: 1,
videoOptions: { videoOptions: {
mp4: "", mp4: "",
...@@ -109,25 +104,17 @@ export default { ...@@ -109,25 +104,17 @@ export default {
created() { created() {
let _this = this; let _this = this;
this.from = this.$route.query.from || this.from || "native"; this.from = this.$route.query.from || this.from || "native";
this.projectId = this.$route.query.projectId;
this.componentId = this.$route.query.componentId;
this.moduleId = this.$route.query.moduleId;
this.moduleName = this.$route.query.moduleName;
this.entryId = this.$route.query.entryId; this.entryId = this.$route.query.entryId;
window.__getUserInfo4Comp = function(param) { window.__getUserInfo4Comp = function(param) {
_this.token = param.userToken; _this.token = param.userToken;
_this.setUserInfo(param); _this.setUserInfo(param);
_this.checkToken(); _this.checkToken();
// _this.getContentList(_this.moduleId);
// _this.getComponentInfoById(_this.componentId);
_this.getChildrenProject(_this.entryId); _this.getChildrenProject(_this.entryId);
}; };
// this.getCoopInfo(this.projectId);
window.__refresh = function() { window.__refresh = function() {
// _this.getContentList(_this.moduleId);
_this.getChildrenProject(_this.entryId); _this.getChildrenProject(_this.entryId);
}; };
_this.getUserInfo(); _this.getUserInfo();
...@@ -147,55 +134,13 @@ export default { ...@@ -147,55 +134,13 @@ export default {
__funcName: "__getUserInfo4Comp" __funcName: "__getUserInfo4Comp"
}); });
if (window.__isWeb && process.env.BUILD_ENV == "development") { if (window.__isWeb && process.env.BUILD_ENV == "development") {
console.log('projectId',this.projectId);
let param = { let param = {
userToken: 'ED9F3381362641858B2B1F90C92A8050', userToken: 'ED9F3381362641858B2B1F90C92A8050',
}; };
__getUserInfo4Comp(param); __getUserInfo4Comp(param);
} }
}, },
// 获取单个模块信息
getComponentInfoById(componentId) {
let _this = this;
let param = {
componentId: componentId,
token: _this.userInfo.userToken,
setEntry: true
};
this.GET("portal/portalApp/component", param).then(res => {
if (res.code == "000000") {
_this.attachmentUrl = res.data.imageUrl;
_this.projectIntro = res.data.introduce;
_this.projectName = res.data.name;
}
});
},
// 获取单个项目信息
getCoopInfo(projectId) {
let _this = this;
let param = {
portalProjectId: projectId,
token: _this.userInfo.userToken,
setEntry: true
};
this.GET("portal/portalApp/queryProjectParticulars", param).then(res => {
if (res.code == "000000") {
// 先设置视频URL再显示视频组件 ------------ BEGIN
if (res.data.attachmentType == 2) {
_this.videoOptions.mp4 = res.data.attachmentUrl;
} else {
_this.attachmentUrl = res.data.attachmentUrl;
}
_this.bannerType = res.data.attachmentType;
// 先设置视频URL再显示视频组件 ------------ END
_this.projectIntro = res.data.projectIntro;
_this.projectName = res.data.projectName;
_this.pStatus = res.data.status;
}
});
},
checkToken() { checkToken() {
let _this = this; let _this = this;
let param = { let param = {
...@@ -252,49 +197,46 @@ export default { ...@@ -252,49 +197,46 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" > <style lang="less" >
@import "../style/mixin";
.page-container-parent { .page-container-parent {
.nav-top .nav-title { .nav-top .nav-title {
height: px2rem(0px); height: 0px;
padding: px2rem(18px); padding: 18px;
} }
.banner-img { .banner-img {
display: inherit; display: inherit;
width: px2rem(375px); width: 375px;
height: px2rem(210px); height: 210px;
&-1 { &-1 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(76px); width: 76px;
height: px2rem(30px); height: 30px;
} }
&-5 { &-5 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(76px); width: 76px;
height: px2rem(30px); height: 30px;
} }
&-10 { &-10 {
position: absolute; position: absolute;
left: 0; left: 0;
top: px2rem(180px); top: 180px;
width: px2rem(148px); width: 148px;
height: px2rem(30px); height: 30px;
} }
} }
.list-container {
// margin-bottom: px2rem(40px);
}
.project-num { .project-num {
position: relative; position: relative;
height: px2rem(18px); height: 18px;
margin: px2rem(20px) 0 px2rem(15px) px2rem(15px); margin: 20px 0 15px 15px;
font-weight: 500; font-weight: 500;
font-size: px2rem(18px); font-size: 18px;
line-height: px2rem(18px); line-height: 18px;
} }
} }
</style> </style>
\ No newline at end of file
<template>
<!-- 组件详情页面:模块列表及其下面的元件列表 -->
<div class="page-container-merge" :style="{'position': isShowEJDialog ? 'fixed' : 'static'}">
<!-- <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
@click="gotoCourse()"
v-if="bannerType == 1"
class="page-content-img-container"
style="position:relative;"
>
<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="APP购买更优惠"
@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>
<!-- 项目标题 -->
<CommonDescription
:projectName="project.projectName"
:studyNum="project.studyNum"
:subject="project.subject"
/>
<!-- <CommonAdertImg :advertInfoList="advertInfoList" position="0" /> -->
<!-- 步骤条 -->
<div v-if="project.cmeType != 2">
<CmeStep
:currentProgress="project.currentProgress"
:studyProgress="project.studyProgress"
:credit="project.credit"
:creditId="project.creditId"
:certificateUrl="project.certificateUrl"
:inScope="project.inScope"
:projectId="projectId"
:certificateId="project.certificateId"
@applicationCredit="applicationCredit"
/>
</div>
<!-- 简介和目录 -->
<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 class="download-abs" @click="gotoDownload">
<img src="../images/cme/course/pica-icon.png" alt />
<span :class="{'short': needShort}">{{downloadTips}}</span>
</div>
</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"
:cmeType="project.cmeType"
:projectName="project.projectName"
/>
<LearnKnow :mustKnow="project.mustKnow"></LearnKnow>
<CommonSpliteLine></CommonSpliteLine>
<ItemIntro :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">目录</div>
<CellListDetailShare
:projectComponent="projectComponentDTOS"
:actionList="actionList"
:detailNum="detailNum"
:courseRequire="courseRequire"
:hasBindCard="hasBindCard"
:limitTimes="limitTimes"
:cmeType="project.cmeType"
: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>
<!-- 弹框 -->
<CommonDialog
:isShowDialog="isShowDialog"
:isSingle="isSingle"
:cancleBtnText="cancleBtnText"
:confirmBtnText="confirmBtnText"
:content="dialogContent"
@handlerAction="handlerAction"
/>
<!-- 弹框 -->
<ExjumperDialog
:isShowDialog="isShowEJDialog"
isSingle
needSubContent
content="请确保您已经在云鹊平台购买学员优惠学习卡"
subContent="1. 跳转后点击“购买学习”,注册登录“中华医学教育在线”平台(首次登录需用手机号注册)<br/>2. 支付方式选择 “学习卡支付”,输入在云鹊平台已购学习卡的激活码,即可参加考试申请学分"
cancleBtnText="我知道了"
@handlerAction="handlerEJAction"
/>
<ExjumperButton
@btnClick="beforeJumpToExam"
v-if="project.cmeType == 2 && hasBindCard"
:btnText="project.currentProgress > 1 ? '参加考试' : '学完全部课程,可参加考试'"
:type="project.currentProgress > 1 ? 'primary' : 'disabled'"
></ExjumperButton>
<!-- <div v-if="project.cmeType == 2 && !isWeb" style="padding-top: 30px"></div> -->
<div style="padding-top: 20px"></div>
<BindCardButton
v-if="project.cmeType == 2 && !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" />
<div>
<span
ref="copyLinkBtn"
data-clipboard-action="copy"
class="cobyOrderSn"
:data-clipboard-text="this.project.cardKey"
@click="copyLink"
></span>
</div>
<CourseDialog
:subContent="subContent"
confirmBtnText="激活并去学习"
needSubContent
:isShowDialog="showBindCardTips"
@handlerAction="handlerActionTips"
></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 CmeStep from "@/components/cme/cme-step";
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 ExjumperDialog from "@/components/cme/exjumper-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 } from "@/utils/index";
import { mapGetters, mapActions } from "vuex";
import vueFilters from "@/utils/filter";
import { Toast } from "vant";
// import CardPopup from "@/components/cme/card-popup";
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 PicaVideo from "@/components/course/pica-video";
import { getCookie } from "@/utils/index";
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,
premissionFlag: false,
isSingle: false,
dialogContent: "", // 弹框内容
confirmBtnText: "", // 弹框按钮
cancleBtnText: "",
isShowDialog: false,
isShowEJDialog: false,
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",
cmeType: 2, // 1: 自营项目; 2: 中华医学会二类
examBtnUrl: "", // 考试按钮跳转连接
firstIntoExam: false, // true弹框,是否首次进入考试,用于首次跳转弹框提示,只跟项目和人员有关
jumpToContents: false, // 是否跳转到目录
cardStatus: 0,
cardKey: ""
// cmeType=2时不显示进度,
// projectNo为空时不显示项目编号,
// projectLeader为空时不显示项目负责人,
// inScope=0时考试按钮不显示,
// currentProgress>1时考试按钮显示并可用
},
hasBindCard: false, // 是否绑定过学习卡或激活过 没有绑定,则显示绑定按钮
limitTimes: 60,
projectLeader: {},
doctorList: [],
from: "inner",
isBlack: false,
showLoading: false,
projectId: "1",
contentList: [],
bannerType: 2, // 1 图片 2视频
videoOptions: {
mp4: "",
autoplay: false, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的
coverpic: require("../images/video-cover.png"),
width: "415", //视频的显示宽度,请尽量使用视频分辨率宽度
height: "210", //视频的显示高度,请尽量使用视频分辨率高度
trySeeTime: "",
x5_fullscreen: false
},
// 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: "",
skCourseId: 0,
isShowSkDialog: false,
isShowEndDialog: false,
isShowFFDialog: false,
needShort: false,
uuid: "",
token: "",
shareUrl: "",
shareParam: {},
showBindCardTips: false,
cmeCardModels: {
cardNo: "",
cardKey: "",
cardType: 2,
orderId: 0
},
subContent: "",
hasNoUsedCard: false,
};
},
components: {
CommonNavbar,
CommonDescription,
CommonSpliteLine,
CellListDetailShare,
Loading,
CmeStep,
BasicInfo,
LearnKnow,
ItemIntro,
ItemLeader,
TeacterIntro,
CommonDialog,
CourseDialog,
ExjumperButton,
ExjumperDialog,
// CardPopup,
// CommonAdertImg,
NoMoreContent,
BindCardButton,
// BindCardButtonShare,
ChangeCard,
CourseCovers,
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(`cme/#/sharecoop?uuid=${this.uuid}`);
location.replace(this.shareUrl);
}
localStorage.setItem('returnUrl', this.shareUrl);
const { token, info } = this.$store.state.user;
this.token = getCookie("token") || token;
// 如果有token,但没有用户信息,则获取用户信息
if (this.token && !info.id) {
this.$store.dispatch("setToken", this.token);
// 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: `883#88311`
});
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 || 178; // 178
this.getProjectParticularsV2();
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: `883#88310`
component_tag: `883#88320`
});
this.download();
},
btnClick2() {
this.$sendBuriedData({
component_tag: `883#88314`
});
this.download();
},
btnClick(index, type) {
this.download();
},
download() {
this.confirm();
// setTimeout(() => {
// window.location.href =
// "https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
// }, 100);
},
gotoDownload() {
this.$sendBuriedData({
component_tag: `883#88312`
});
window.location.href =
"https://a.app.qq.com/o/simple.jsp?pkgname=com.picahealth.yunque";
},
cancleChangeCard() {
this.showChangeCard = false;
},
// 处理提示信息框
handlerActionTips(type) {
if (type == 1) {
this.$sendBuriedData({
component_tag: `883#88319`
});
this.showBindCardTips = false;
} else {
this.$sendBuriedData({
component_tag: `883#88318`
});
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;
}
});
},
// 激活 返回值:0绑定失败,1绑定成功
changeCardAction(cardKey, isInTips) {
let _this = this;
let param = {
idType: 1,
cardKey: cardKey,
cardType: this.project.cardType || 2,
goodsType: this.project.goodsType || 2,
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.getProjectParticularsV2();
}
} else {
Toast(res.message);
}
})
.catch(e => {
if (isInTips) {
Toast("无效的激活码");
_this.showBindCardTips = false;
} else {
_this.changeCardErrorMsg = "请输入正确的激活码";
}
});
},
// 复制卡密
copyLink() {
let _this = this;
let clipboard = new this.clipboard(".cobyOrderSn");
clipboard.on("success", function() {
Toast("已成功复制激活码");
});
clipboard.on("error", function() {
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);
}
});
},
// 点击弹层
clickOverlay() {
console.log("clickOverlay");
},
// 点击“参与考试”
beforeJumpToExam() {
// this.$sendBuriedData({
// component_tag: `882#8824`
// });
// 如果是首次,则弹出弹框
if (this.project.firstIntoExam) {
this.isShowEJDialog = true;
} else {
this.jumpToCardList();
}
},
// 第一次跳转弹框,点击时调用相应接口
handlerEJAction() {
// this.$sendBuriedData({
// component_tag: `883#8831`
// });
this.isShowEJDialog = false;
this.jumpToCardList();
this.firstIntoExamAction();
},
// 跳转II类学习详情页面(中华医学会项目详情页面)
jumpToCardList() {
// this.$sendBuriedData({
// component_tag: `885#8851`
// });
this.showLoading = false;
// 复制卡密
this.$refs.copyLinkBtn.click();
window.location.href = this.project.examBtnUrl;
},
// 跳转前判断是否有机构,否则使用定位信息
preJumper() {
this.getCardInfoByProvinceId(this.provinceId || "");
},
// 根据省ID,获取学习卡信息
getCardInfoByProvinceId(provinceId) {
let param = {
area: provinceId + "",
cardType: this.project.cardType || 2,
cardTypeList: [ this.project.cardType || 3],
goodsType: this.project.goodsType,
// pageNum: 1,
// pageSize: 1
};
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;
}
}
);
},
//(判断是否加入机构,是否为认证用户,是否在申请范围内)
permission() {
let _this = this;
let param = {
id: _this.projectId,
creditId: _this.project.creditId,
token: _this.token,
setEntry: true
};
_this.NEW_POST("cme/credit/rangeCheck", param).then(res => {
if (
_this.project.cmeType != 2 &&
(res.code == "219004" || res.code == "219012")
) {
// 未加入机构 219004 不在申请范围 219012
this.dialogContent = `该项目仅对${_this.project.scope}的用户开放`;
this.cancleBtnText = "我知道了";
this.isShowDialog = true;
this.isSingle = true;
} else {
this.isShowDialog = false;
}
});
},
// 立即申请学分
applicationCredit() {
let _this = this;
let param = {
id: _this.projectId,
creditId: _this.project.creditId,
token: _this.token,
setEntry: true
};
_this.NEW_POST("cme/credit/applyCheck", param).then(res => {
if (res.code == "000000") {
gotoPage(
_this,
`cme/#/credit-edit?creditId=${_this.project.creditId}`
);
} else if (res.code == "219004" || res.code == "219005") {
// 未加入机构 219004 未身份认证 219005 不在申请范围 219012
let params = {
__funcName: "__checkPermissions",
permCode: "009014"
};
rocNative.checkPermissions(params);
} else {
this.dialogContent = res.message;
this.cancleBtnText = "我知道了";
this.isShowDialog = true;
this.isSingle = true;
}
});
},
//去激活
changeClick() {
this.commonCheckToken(() => {
this.showChangeCard = true;
});
},
// 弹框按钮事件
handlerAction(data) {
this.isShowDialog = false;
},
scrollFun() {
//如果是第一次的弹框,则直接退出
if (this.isShowEJDialog) return;
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}`
// });
},
// 获取项目详情
getProjectParticularsV2() {
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;
}
_this.showLoading = true;
this.NEW_GET(`cme/project/${_this.projectId}/info`, param).then(res => {
if (res.code == "000000") {
// 首先使用配置中的参数中的获取视频地址及视频时间
setTimeout(() => {
this.downloadTips = "";
this.needShort = true;
}, 5000);
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
});
});
} 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.projectComponentDTOS = _this.setListData(
res.data.projectComponentDTOS
);
if (!_this.isWeb && !_this.premissionFlag) {
_this.premissionFlag = true;
_this.permission(); // 提示是否有机构和在申请范围内
}
// 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(
"getProjectParticularsV2",
cataOffsetTop,
intorOffsetTop
);
// if (_this.hasBindCard) {
// setTimeout(() => {
// this.jumpCatalogue();
// }, 200);
// }
}, 200);
setTimeout(() => {
_this.showLoading = false;
}, 800);
// let shareUrl = encodeURIComponent(location.href);
let shareUrl = getWebPageUrl(`cme/#/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 hasFindCourseOrExam = false;
let item = null;
for (let i = 0; i < list.length; i++) {
for (let j = 0; j < list[i].portalModuleDTOS.length; j++) {
detailNum++;
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++
) {
list[i].portalModuleDTOS[j].contentList[z].height = _this.getHight(
list[i].portalModuleDTOS[j].contentList[z]
);
}
}
}
_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;
}
},
// 跳转到考试
gotoExamNew: function() {
Toast("请前往APP进行考试");
},
// 跳转到课程(H5)
gotoCourseNew: function() {
window.location.href = "";
}
}
};
</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 {
position: absolute;
top: 82px;
left: 163px;
z-index: 100;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background: #fff;
color: rgba(68, 146, 132, 1);
font-size: 13px;
border-radius: 50%;
}
.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;
}
}
// opacity: ;
}
}
.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: 0px;
background: #fff;
width: 100%;
z-index: 999;
}
.catalogue-content {
padding: 30px 15px 0;
.catalogue-title {
font-size: 18px;
color: #373839;
font-weight: 700;
margin-bottom: 16px;
}
}
.fixed-flag-height {
height: 50px;
}
}
}
.no-more-bottom {
position: relative;
width: 100%;
height: 40px;
}
.course-tips {
width: 100%;
position: absolute;
z-index: 100;
top: 0;
left: 0;
}
.download-abs {
display: flex;
// width: 100%;
position: absolute;
// z-index: 1001;
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>
...@@ -38,7 +38,6 @@ export default { ...@@ -38,7 +38,6 @@ export default {
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="less" scoped>
@import "../style/mixin";
</style> </style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册