Skip to content

P
pica.cloud.web-education-admin
提交 996f8eb7 编写于 作者: gjyang's avatar gjyang
浏览文件
操作

1.整理项目 

2.搜索页面
上级 b35e212e
隐藏空白字符变更
内嵌 并排
正在显示 包含 810 行增加 和 3983 行删除
src/components/business-new/yqy-home-header.vue
浏览文件 @ 996f8eb7
<template> <template>
<div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}"> <div :class="searchFix?'header fixed' : 'header' " id="search-top" :style="{height:menuptop}">
<div class="search-menu"> <div class="search-menu">
<!-- <div :class="isTransparent?'search-transparent':'bgWhite'" class="search"> <div :class="isTransparent?'search-transparent':'bgWhite'" class="search">
<input type="search" :class="isTransparent?'search-transparent':''" class="input" v-model="searchVal" :placeholder="placeholder" :disabled="disabled" /> <input type="search" :class="isTransparent?'search-transparent':''" class="input" v-model="searchVal" :placeholder="placeholder" :disabled="disabled" />
<img v-if="searchFix" class="search-img" src='../../images/search-grey.png'> <img v-if="searchFix" class="search-img" src='../../images/search-grey.png'>
<img v-else class="search-img" src='../../images/search-white.png'> <img v-else class="search-img" src='../../images/search-white.png'>
</div> --> </div>
<div class="bgFill" :style="{height:ptop}"></div> <div class="bgFill" :style="{height:ptop}"></div>
<div class="fixBox"> <!-- <div class="fixBox">
<div class="header-right" @click="goToPage"> <div class="header-right" @click="goToPage">
<img v-if="searchFix" class="info" src='../../images/msg1.png'> <img v-if="searchFix" class="info" src='../../images/msg1.png'>
<img v-else class="info" src='../../images/msg1.png'> <img v-else class="info" src='../../images/msg1.png'>
<div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="msgCount>0">{{msgCount>99?'99+':msgCount}}</div> <div :class="isMax?'num-max':'num-min'" class="info-count fs10" v-show="msgCount>0">{{msgCount>99?'99+':msgCount}}</div>
</div> </div>
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>
......
src/components/business/history-search.vue 0 → 100644
浏览文件 @ 996f8eb7
<template>
<article class="history-search">
<header class="history-search-title">
<span>历史搜索</span>
<img src="../../images/search-grey.png" alt="删除">
</header>
<section class="history-search-content">
<span v-for="(item, index) in sourceData" :key="index">{{item.name}}</span>
</section>
</article>
</template>
<script>
export default {
props: {
sourceData: {
type: Array,
default: () => [{name:'222'},{name:'222'},{name:'222'},{name:'222'},{name:'222'},{name:'222'},{name:'222'}]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.history-search {
margin: px2rem(15px);
&-title {
width: 100%;
justify-content: space-between;
display: inline-flex;
span {
padding: px2rem(4px) px2rem(4px);
font-size: px2rem(12px);
color: 6;
}
}
&-content {
}
}
</style>
src/components/business/search-header.1.vue 0 → 100644
浏览文件 @ 996f8eb7
<template>
<div id="search-top" :style="{height:menuptop}">
<div class="search-menu">
<div class="search-transparent search">
<input type="search" :class="isTransparent?'search-transparent':''" class="input" v-model="searchVal" :placeholder="placeholder" :disabled="disabled" />
<img class="search-img" src='../../images/search-grey.png'>
</div>
<div class="bgFill" :style="{height:ptop}"></div>
<div class="fixBox">
<div class="header-right" @click="goToPage">
取消
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
placeholder: '即将上线，敬请期待',
disabled: 'disabled',
searchVal: '',
isTransparent: false, //更改颜色 背景
isMax: false,//消息数量是否大于99
count: '',
isShowMsg: true,
ptop: 0,
menuptop: 0,
popHeight: 0
}
},
props:{
msgCount:{
type:String,
default:''
},
statusBarHeight:{
type:Number,
default:0
},
searchFix:{
type: Boolean,
default: false,
}
},
watch:{
// searchFix:function(n){
// if(n){
// alert(this.searchFix)
// }
// }
},
created(){
let _this = this;
window.__getStatusBarHeight = function(parm){
//lert(parm.statusBarHeight)
if(window.__isAndroid){
_this.popHeight = parseInt(parm.statusBarHeight)/2.5
}else{
_this.popHeight = parm.statusBarHeight
}
_this.ptop = _this.popHeight+'px';
_this.menuptop = _this.popHeight+'px'
// alert(parm.statusBarHeight);
}
this.getStatusHight()
},
mounted(){
// this.getStatusHight();
// if(window.__isAndroid){
// this.popHeight = this.statusBarHeight/2
// }else{
// this.popHeight = this.statusBarHeight
// }
// this.count = this.msgCount;
// this.ptop = this.popHeight+7+'px';
// this.menuptop = this.popHeight+7+'px'
// console.log(this.statusBarHeight);
// if(this.msgCount == ''){
// this.isShowMsg = false
// }
// if(this.count>=99){
// this.count += '+';
// this.isMax = true
// }
},
methods: {
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
goToPage(){
// alert("000");
this.$emit('setAppMsg',false)
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_notification',
actionCode:'c_notification',
})
rocNative.readMessage();
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.search-transparent{
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
}
.search-transparent::-webkit-input-placeholder{
color:#fff;
}
.white{
color: #fff;
}
.header-right{
width: px2rem(20px);
height: px2rem(20px);
// position: relative;
// margin-top: px2rem(5px);
float: right;
font-size: px2rem(5px);
// img {
// width: 100%;
// height: 100%;
// display: block;
// }
}
.bgFill{
background: inherit;
height: 20px;
}
.fs30{
font-size: px2rem(15px);
}
.gxy-study{
margin-right: px2rem(19px);
}
.gxy{
font-size: px2rem(25px);
margin: px2rem(25px) 0 px2rem(11px) 0;
}
.header{
width: 100%;
/*//height: px2rem(50px);*/
position: relative;
}
.fixed {
.search-menu{
position: fixed;
z-index: 110;
top:0;
left: 0;
}
.fixBox{
background: #44A99B;
height:px2rem(30px);
padding:0 px2rem(25px);
/* padding-top: px2rem(7px)*/
}
.bgFill{
background: #44A99B;
}
.search-transparent::-webkit-input-placeholder{
color:#666;
}
.search{
border-color:#ddd;
}
.info-count{
background: #FB5B52;
color: #fff
}
}
.fixBox{
padding:0 px2rem(25px);
height: px2rem(30px);
/* padding-top: px2rem(7px)*/
}
.search-menu{
width: 100%;
position: absolute;
}
.search{
width: px2rem(290px);
height: px2rem(30px);
border-radius: px2rem(19px);
float: left;
}
.input{
outline: none;
border: none;
float: left;
font-size: px2rem(13px);
margin: px2rem(6px) 0 px2rem(6px) px2rem(15px);
line-height: px2rem(18px);
width: 80%;
}
.search-img{
width: px2rem(16px);
height: px2rem(16px);
margin: px2rem(6px) px2rem(15px) px2rem(9px) 0;
float: right;
}
.info-count{
position:absolute;
top: -(px2rem(5px));
left: (px2rem(10px));
/*max-width: px2rem(25px);*/
padding:0 px2rem(3px);
height: px2rem(15px);
line-height: px2rem(15px);
border-radius: px2rem(15px);
text-align: center;
font-size:px2rem(12px);
font-weight: bold;
background-color: #fff;
color: RGBA(53, 134, 126, 1);
}
.num-min{
max-width: px2rem(25px);
min-width: px2rem(15px);
/*padding:0;*/
}
.num-max{
width: auto;
/* background-color: RGBA(251, 91, 82, 1);
color: #fff;*/
}
.hot-tag{
width: 100%;
height: px2rem(150px);
}
.hotTagTitle{
font-size: px2rem(18px);
padding: px2rem(73px) px2rem(15px);
float: left;
background-color: #fff;
}
.cource{
width: 100%;
height: px2rem(350px);
}
.font-title{
font-size: px2rem(18px);
padding: 0 0 px2rem(21px) px2rem(15px);
float: left;
width: 100%;
text-align: left;
}
.title{
font-size: px2rem(16px);
}
.cource-left{
float: left;
padding-left: px2rem(15px);
}
.need-left{
float: left;
padding: 0 0 px2rem(40px) px2rem(15px);
}
.cource-time{
float: left;
}
.cource-img{
width: px2rem(170px);
height: px2rem(96px);
margin-bottom: px2rem(10px);
}
.cource-more{
font-size: px2rem(15px);
color: #999999;
}
.need{
width: 100%;
height: px2rem(325px);
margin-top: px2rem(35px);
}
</style>
src/components/business/search-header.vue 0 → 100644
浏览文件 @ 996f8eb7
<template>
<article class="search-wrapper">
<section class="search-wrapper-input">
<img src='../../images/search-grey.png'>
<input value="搜索疾病、课程、讲师"/>
</section>
<section class="search-wrapper-cancle">
<span>取消</span>
</section>
</article>
</template>
<script>
export default {
methods: {
cancel() {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
.search-wrapper {
display: flex;
position: relative;
top: 0;
left: 0;
flex-direction: row;
padding: px2rem(20px) px2rem(10px) px2rem(10px) px2rem(15px);
text-align: center;
align-items: center;
&-input {
width: px2rem(290px);
height: px2rem(30px);
border: 1px solid #efefef;
border-radius: px2rem(18px);
background: rgba(245, 246, 246, 1);
img {
position: relative;
top: px2rem(-18px);
left: px2rem(0px);
width: px2rem(14px);
height: px2rem(14px);
}
input {
position: relative;
top: px2rem(-20px);
left: px2rem(-8px);
width: px2rem(240px);
text-decoration-color: #bbb;
color: #bbb;
font-size: px2rem(13px);
font-weight: 400;
background: rgba(245, 246, 246, 1);
}
}
&-cancle {
position: relative;
top: 0;
left: px2rem(15px);
// width: px2rem(60px);
font-size: px2rem(14px);
color: #999;
span {
padding: px2rem(4px);
}
}
}
</style>
src/components/business/search-label.vue 0 → 100644
浏览文件 @ 996f8eb7
<template>
<article v-if="allTags&&allTags.length>0" class="search-tag search-label">
<!-- <section :style="{'text-align': direction}" class="search-tag-title">
{{title}}
</section> -->
<header class="history-search-title">
<span>{{title}}</span>
<img v-show="showDelete" src="../../images/sousuo/recicle.png" alt="删除">
</header>
<div class="search-tag-item"
@click="hotLabel(item.resourceType, item.structureId, item.resourceUrl, item.labelName, item)"
v-for="(item, index) in allTags" :key="index" >
<span class="item-name">{{item.doctorName}}</span>
</div>
</article>
</template>
<script>
import {mapMutations} from 'vuex'
export default {
name: 'YqyHotLabel',
props: {
allTags: {
type: Array
},
direction: {
type: String,
default: 'left'
},
title: {
type: String,
default: '历史搜索'
},
hasBanner: {
type: Boolean,
default: false
},
hasInfo: {
type: Boolean,
default: false
},
showDelete: {
type: Boolean,
default: true
}
},
data () {
return {
}
},
mounted(){
},
methods: {
...mapMutations([
'SET_CLEAR_VUEX'
]),
hotLabel(val,id,url,name,item){
this.$emit('hotLabel',id,name)
//讲师集
switch (val) {
case 1:
this.SET_CLEAR_VUEX()
this.jumpToCourse(item.resourceId);
break;
case 2:
this.SET_CLEAR_VUEX()
//window.location.href=url;
this.jumpToCartoon(url,name)
break;
case 3:
this.SET_CLEAR_VUEX()
this.$router.push({path:'/lecturer',query:{id:id}})
break;
default:
break;
}
},
dispatchEventByModuleCode(itemData) {
let modeCode = itemData.appModuleInfo.code
let paramList = itemData.appModuleInfo.paramList ? itemData.appModuleInfo.paramList : ''
if( modeCode === 'M001' || modeCode === 'M002' || modeCode === 'M003') {
paramList = ''
} else if( modeCode === 'M100' || modeCode === 'M300' ) {
let urlPara = this.getUrlPara(paramList)
paramList[0].value += urlPara
}
if(typeof paramList === 'string' && !paramList){
paramList = []
}
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//跳到相应的课程
jumpToCourse(id){
let itemData={
"title":"测试课介绍页",
"imageUrl":"https://test-file.yunqueyi.com/image/jpeg/2018/09/18/20180918103322254-f8bba621.jpg",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${id}`,
"type":1,
"seqNo":2
}
]
}
};
this.dispatchEventByModuleCode(itemData);
},
// 跳到漫画详情页
jumpToCartoon(url,name) {
let itemData={
"title":"测试课介绍页",
"imageUrl":"https://test-file.yunqueyi.com/image/jpeg/2018/09/18/20180918103322254-f8bba621.jpg",
"appModuleInfo":{
"code":"M300",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"pageUrl",
"value": url,
"type":4,
"seqNo":1
},{
"key":"showTitle",
"value": true,
"type":1,
"seqNo":2
},{
"key":"title",
"value": name,
"type":1,
"seqNo":2
}
]
}
};
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: itemData.appModuleInfo.paramList
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.search-tag {
padding: 0 px2rem(15px) 0;
}
.search-label {
width: 100%;
background-color: #fff;
margin-bottom: px2rem(6px);
}
.search-tag-title {
font-size: px2rem(12px);
font-weight: bold;
}
.search-tag-item {
display: inline-flex;
height: px2rem(30px);
margin: px2rem(0px) px2rem(15px) 0 0;
text-align: center;
align-items: center;
.item-name {
padding: px2rem(6px) px2rem(15px) px2rem(8px);
border-radius: px2rem(15px);
background-color: #F8F8F8;
color: #999;
font-size: px2rem(13px);
}
}
.history-search-title {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: space-between;
span {
// padding: px2rem(4px) px2rem(4px);
font-size: px2rem(12px);
color: 6;
}
img {
width: px2rem(20px);
height: px2rem(20px);
padding: px2rem(4px);
}
}
</style>
src/components/business/split-line.1.vue 0 → 100644
浏览文件 @ 996f8eb7
<template>
<section :style="{'line-width':lineWidth, 'border-color': borderColor, 'border-style': borderStyle, 'border-width': borderWidth}">
</section>
</template>
<script>
export default {
props: {
lineWidth: {
type: String,
default: 'px2rem(375px)'
},
borderWidth: {
type: String,
default: '1px'
},
borderStyle: {
type: String,
default: 'solid'
},
borderColor: {
type: String,
default: '#e7e7e7'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
</style>
src/components/business/split-line.vue 0 → 100644
浏览文件 @ 996f8eb7
<template>
<section :style="{'line-width':lineWidth, 'border-color': borderColor, 'border-style': borderStyle, 'border-width': borderWidth}">
</section>
</template>
<script>
export default {
props: {
lineWidth: {
type: String,
default: 'px2rem(375px)'
},
borderWidth: {
type: String,
default: '1px'
},
borderStyle: {
type: String,
default: 'solid'
},
borderColor: {
type: String,
default: '#e7e7e7'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
// @import '../../style/global.scss';
</style>
src/components/teachers/teach-top.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<div class="teach-top">
<span class="back" @click="backPre">
<img src="../../images/left-icon.png">
</span>
<div class="tc title">{{parmObj}}</div>
<div class="tc count" v-if="isShowCount">{{studyCount.toLocaleString()}}人学习&nbsp;&nbsp;&nbsp;&nbsp;{{followCount.toLocaleString()}}人关注</div>
</div>
</template>
<script>
export default {
data () {
return {
parmObj:''
}
},
props:{
isShowCount:{
default:false,
type:Boolean
},
followCount:{
type:Number,
default:0
},
studyCount:{
type:Number,
default:0
},
statusBarHeight:{
type:Number,
default:0
},
},
mounted(){
this.parmObj = this.isShowCount ? '讲师集' : '讲师之'
///console.log(this.followCount);
},
methods: {
backPre(){
///alert("999");
rocNative.goBack()
// this.$router.back(-1);
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../../style/mixin.scss';
@import '../../style/global.scss';
.teach-top{
width: 100%;
height: px2rem(185px);
position: relative;
@include bis('../../images/headerTop.png');
.tc{
text-align: center;
}
.back{
position: absolute;
left:px2rem(18px);
top: px2rem(25px);
display: inline-block;
width: px2rem(50px);
height: px2rem(50px);
img{
width: px2rem(25px);
height: px2rem(25px);
}
}
.title{
font-size: px2rem(25px);
color: #fff;
padding: px2rem(55px) 0 px2rem(8px) 0;
font-weight: 500
}
.count{
font-size: px2rem(15px);
line-height: px2rem(21px);
color: #fff;
}
}
</style>
src/main.js
浏览文件 @ 996f8eb7
...@@ -16,7 +16,6 @@ import 'mint-ui/lib/style.css' ...@@ -16,7 +16,6 @@ import 'mint-ui/lib/style.css'
import VueLazyload from 'vue-lazyload' import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, { Vue.use(VueLazyload, {
preLoad: 3, preLoad: 3,
// loading: 'http://pica-pro.oss-cn-shanghai.aliyuncs.com/h5/app_home/2018/12/5-121204193935-51.gif',
// loading: 'images/change.png', // loading: 'images/change.png',
// error: 'https://file.yunqueyi.com/File/course_doctor/2018-11/20/web_454.png', // error: 'https://file.yunqueyi.com/File/course_doctor/2018-11/20/web_454.png',
error: require('./images/evaluatBg.png'), error: require('./images/evaluatBg.png'),
......
src/router/router.js
浏览文件 @ 996f8eb7
import App from '../App' import App from '../App'
const home = r => require.ensure([], () => r(require('../views/home/home-new')), 'home') const index = r => require.ensure([], () => r(require('../views/index')), 'index')
const activity = r => require.ensure([], () => r(require('../views/activity/activity')), 'activity') const search = r => require.ensure([], () => r(require('../views/search-index')), 'search')
const teachers = r => require.ensure([], () => r(require('../views/teachers/index')), 'teachers')
const teachersDetail = r => require.ensure([], () => r(require('../views/teachers/detail')), 'teachersDetail')
const spCooperation = r => require.ensure([], () => r(require('../views/spCooperation/spCooperation')), 'spCooperation')
//const gpranking = r => require.ensure([], () => r(require('../views/gpranking/gpranking.vue')), 'gpranking')
export default [{ export default [{
path: '/', path: '/',
...@@ -16,34 +10,17 @@ export default [{ ...@@ -16,34 +10,17 @@ export default [{
//地址为空时跳转home页面 //地址为空时跳转home页面
{ {
path: '', path: '',
redirect: '/home' redirect: '/index'
}, },
//首页城市列表页 //首页城市列表页
{ {
path: '/home', path: '/index',
component: home component: index
}, },
//首页城市列表页
{ {
path: '/activity', path: '/search',
component: activity component: search
},
{
path: '/teachers',
component: teachers
},
{
path: '/teachersDetail',
component: teachersDetail
},
{
path: '/spCooperation',
component: spCooperation
}, },
//学习评价gpranking页面
// {
// path: '/gpranking',
// component: gpranking
// }
] ]
}] }]
src/style/common.scss
浏览文件 @ 996f8eb7
...@@ -28,7 +28,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l ...@@ -28,7 +28,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
{ {
width: 0px; width: 0px;
height: 0px; height: 0px;
background-color: #F5F5F5; background-color: #fff;
} }
/*定义滚动条轨道 内阴影+圆角*/ /*定义滚动条轨道 内阴影+圆角*/
...@@ -36,7 +36,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l ...@@ -36,7 +36,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
{ {
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0); -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0);
border-radius: 10px; border-radius: 10px;
background-color: #F5F5F5; background-color: #fff;
} }
/*定义滑块 内阴影+圆角*/ /*定义滑块 内阴影+圆角*/
...@@ -56,10 +56,9 @@ textarea { -webkit-appearance: none;} ...@@ -56,10 +56,9 @@ textarea { -webkit-appearance: none;}
html,body{ html,body{
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: #F5F5F5; background-color: #fff;
} }
.clear:after{ .clear:after{
content: ''; content: '';
display: block; display: block;
......
src/utils/index-old.js 已删除 100644 → 0
浏览文件 @ b35e212e
/**
* Created by Anndy Yang on 18/03/18.
*/
Date.prototype.format = function (fmt) {
var o = {
'M+': this.getMonth() + 1, // 月份
'd+': this.getDate(), // 日
'h+': this.getHours(), // 小时
'm+': this.getMinutes(), // 分
's+': this.getSeconds(), // 秒
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
'S': this.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
}
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (('' + time).length === 10) time = parseInt(time) * 1000
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
export function formatTime(time, option) {
time = +time * 1000
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
let des = ''
if (diff < 30) {
des = '刚刚'
} else if (diff < 3600) { // less 1 hour
des = Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
des = Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
des = '1天前'
}
if (option) {
return parseTime(time, option)
} else {
if (des) {
return des + ' (' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ')'
} else {
return d.getMonth() + 1 + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
}
}
}
// 将树形结构任意两个key修改成对应的特定key
// {id: '', name: ''} => {id: '', label: ''}
export function convertTreeData(originData, orgId = 'id', orgLabel = 'name', targetId = 'id', targetLabel = 'label') {
const targetData = []
let targetObj = {}
for (let i = 0; i < originData.length; i++) {
targetObj = {}
targetObj[targetId] = originData[i][orgId]
targetObj[targetLabel] = originData[i][orgLabel]
targetData.push(targetObj)
if (originData[i].children && originData[i].children.length > 0) {
targetObj.children = convertTreeData(originData[i].children, orgId, orgLabel, targetId, targetLabel)
}
}
return targetData
}
/**
* JSON数组去重
* @param: [array] json Array
* @param: [string] 唯一的key名，根据此键名进行去重
*/
export function uniqueArray(array, key) {
const result = [array[0]]
for (let i = 1; i < array.length; i++) {
const item = array[i]
let repeat = false
for (let j = 0; j < result.length; j++) {
if (item[key] === result[j][key]) {
repeat = true
break
}
}
if (!repeat) {
result.push(item)
}
}
return result
}
export function resizeHeight(cMinusHeight = 152, iMinuxHeight = 210, refHeightId = 'sidebarWrapperId',
containerHeightId = 'appContainerId', innerHeightId = 'elTableId') {
if (!p_getElm(refHeightId) || !p_getElm(containerHeightId) || !p_getElm(innerHeightId)) {
// window.onresize = null
logger.warn('No certain dom id!!!');
}
let containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
if (p_getElm('elTableIdInner')) {
p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px'
}
window.onresize = function () {
containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
if (p_getElm('elTableIdInner')) {
p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px'
}
}
}
function p_getElm(elmId) {
return document.getElementById(elmId)
}
export function getHostnameAndPort() {
const NODE_ENV = process.env.NODE_ENV
if (NODE_ENV === 'production') {
return location.hostname + ':' + location.port
} else {
return '192.168.80.191:8080'
}
}
function setRouterParm(paramList) {
let parm = {};
if (paramList.length <= 1) {
return '';
}
for (let i = 1; i < paramList.length; i++) {
parm[paramList[i].key] = paramList[i].value;
}
return parm;
}
export function setEventByModuleCode(itemData) {
let modeCode = itemData.appModuleInfo.code || '';
let paramList = itemData.appModuleInfo.paramList ? itemData.appModuleInfo.paramList : ''
if (modeCode === 'M001' || modeCode === 'M002' || modeCode === 'M003') {
paramList = ''
} else if (modeCode === 'M100' || modeCode === 'M300') {
let urlPara = getUrlParmByCode(paramList);
paramList[0] && (paramList[0].value += urlPara);
} else if (modeCode === 'M400') {
let path = paramList[0]['key'];
let v = paramList[0]['value'];
let query = setRouterParm(paramList);
//console.log(Vue);
// this.$router.push({
// path: v,
// query:query
// })
}
if (typeof paramList === 'string' && !paramList) {
paramList = []
}
return paramList;
}
function getUrlParmByCode(paramList) {
if (paramList.length <= 1) {
return ''
}
let dataStr = ''
let list = [];
for (let i = 1; i < paramList.length; i++) {
list.push(paramList[i].key + '=' + paramList[i].value)
}
dataStr = list.join('&')
if (dataStr !== '') {
return '?' + dataStr
}
return ''
}
export function pageJumpUrl() {
let url = {
pageListUrl: 'https://test1-contents.yunqueyi.com/content_list',
detailUrl: 'https://test1-contents.yunqueyi.com/content_detail'
};
return url;
}
// test1地址
const baseUrl = 'http://dev-sc.yunqueyi.com/' || 'http://10.177.10.238:10201/' || 'http://test1-sc.yunqueyi.com/'
const apiUrl = 'http://dev-api.yunqueyi.com/' || 'http://10.177.10.238:10201' || 'http://test1-api.yunqueyi.com/'
const devApiUri = 'http://dev-api.yunqueyi.com/'
// // uat地址
// const baseUrl = 'http://uat-sc.yunqueyi.com/'
// const apiUrl = 'http://uat-api.yunqueyi.com/'
// // pro地址
// const baseUrl = 'http://sc.yunqueyi.com/'
// const apiUrl = 'http://api.yunqueyi.com/'
// 为每个URL添加应用校验密钥
export function getBaseUrl(url, str) {
if (str == 'dev-api') {
return devApiUri + url
}
return baseUrl + url
}
export function getApiUrl(url) {
return apiUrl + url
}
src/utils/index.1.js 已删除 100644 → 0
浏览文件 @ b35e212e
/**
* Created by Anndy Yang on 18/03/18.
*/
Date.prototype.format = function(fmt) {
var o = {
'M+': this.getMonth() + 1, // 月份
'd+': this.getDate(), // 日
'h+': this.getHours(), // 小时
'm+': this.getMinutes(), // 分
's+': this.getSeconds(), // 秒
'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
'S': this.getMilliseconds() // 毫秒
}
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
}
for (var k in o) {
if (new RegExp('(' + k + ')').test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
}
}
return fmt
}
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if (('' + time).length === 10) time = parseInt(time) * 1000
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
let value = formatObj[key]
if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]
if (result.length > 0 && value < 10) {
value = '0' + value
}
return value || 0
})
return time_str
}
export function formatTime(time, option) {
time = +time * 1000
const d = new Date(time)
const now = Date.now()
const diff = (now - d) / 1000
let des = ''
if (diff < 30) {
des = '刚刚'
} else if (diff < 3600) { // less 1 hour
des = Math.ceil(diff / 60) + '分钟前'
} else if (diff < 3600 * 24) {
des = Math.ceil(diff / 3600) + '小时前'
} else if (diff < 3600 * 24 * 2) {
des = '1天前'
}
if (option) {
return parseTime(time, option)
} else {
if (des) {
return des + ' (' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + ')'
} else {
return d.getMonth() + 1 + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
}
}
}
// 将树形结构任意两个key修改成对应的特定key
// {id: '', name: ''} => {id: '', label: ''}
export function convertTreeData(originData, orgId = 'id', orgLabel = 'name', targetId = 'id', targetLabel = 'label') {
const targetData = []
let targetObj = {}
for (let i = 0; i < originData.length; i++) {
targetObj = {}
targetObj[targetId] = originData[i][orgId]
targetObj[targetLabel] = originData[i][orgLabel]
targetData.push(targetObj)
if (originData[i].children && originData[i].children.length > 0) {
targetObj.children = convertTreeData(originData[i].children, orgId, orgLabel, targetId, targetLabel)
}
}
return targetData
}
/**
* JSON数组去重
* @param: [array] json Array
* @param: [string] 唯一的key名，根据此键名进行去重
*/
export function uniqueArray(array, key) {
const result = [array[0]]
for (let i = 1; i < array.length; i++) {
const item = array[i]
let repeat = false
for (let j = 0; j < result.length; j++) {
if (item[key] === result[j][key]) {
repeat = true
break
}
}
if (!repeat) {
result.push(item)
}
}
return result
}
export function resizeHeight(cMinusHeight = 152, iMinuxHeight = 210, refHeightId = 'sidebarWrapperId',
containerHeightId = 'appContainerId', innerHeightId = 'elTableId'){
if (!p_getElm(refHeightId) || !p_getElm(containerHeightId) || !p_getElm(innerHeightId)) {
// window.onresize = null
logger.warn('No certain dom id!!!');
}
let containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
if(p_getElm('elTableIdInner')){
p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px'
}
window.onresize = function() {
containerHeight = p_getElm(refHeightId).getBoundingClientRect().height - 50
p_getElm(containerHeightId).style.height = containerHeight - cMinusHeight + 'px'
p_getElm(innerHeightId).style.height = containerHeight - iMinuxHeight + 'px'
if (p_getElm('elTableIdInner')) {
p_getElm('elTableIdInner').style.height = containerHeight - iMinuxHeight + 'px'
}
}
}
function p_getElm(elmId) {
return document.getElementById(elmId)
}
export function getHostnameAndPort() {
const NODE_ENV = process.env.NODE_ENV
if (NODE_ENV === 'production') {
return location.hostname + ':' + location.port
} else {
return '192.168.80.191:8080'
}
}
function setRouterParm(paramList){
let parm = {};
if(paramList.length<=1){
return '';
}
for(let i=1;i<paramList.length;i++){
parm[paramList[i].key] = paramList[i].value;
}
return parm;
}
export function setEventByModuleCode(itemData){
let modeCode = itemData.appModuleInfo.code || '';
let paramList = itemData.appModuleInfo.paramList ? itemData.appModuleInfo.paramList : ''
if( modeCode === 'M001' || modeCode === 'M002' || modeCode === 'M003') {
paramList = ''
}else if( modeCode === 'M100' || modeCode === 'M300' ) {
let urlPara = getUrlParmByCode(paramList);
paramList[0] && (paramList[0].value += urlPara);
}else if( modeCode === 'M400') {
let path = paramList[0]['key'];
let v = paramList[0]['value'];
let query = setRouterParm(paramList);
//console.log(Vue);
// this.$router.push({
// path: v,
// query:query
// })
}
if(typeof paramList === 'string' && !paramList){
paramList = []
}
return paramList;
}
function getUrlParmByCode(paramList) {
if ( paramList.length <= 1) {
return ''
}
let dataStr = ''
let list = [];
for( let i = 1; i < paramList.length; i ++) {
list.push(paramList[i].key + '=' + paramList[i].value)
}
dataStr = list.join('&')
if (dataStr !== '') {
return '?' + dataStr
}
return ''
}
export function pageJumpUrl(){
let url = {
pageListUrl : 'https://test1-contents.yunqueyi.com/content_list',
detailUrl : 'https://test1-contents.yunqueyi.com/content_detail'
};
return url;
}
// test1地址
// const baseUrl = 'http://dev-sc.yunqueyi.com/' || 'http://10.177.10.238:10201/' || 'http://test1-sc.yunqueyi.com/'
// const apiUrl = 'http://dev-api.yunqueyi.com'http://dev-sc.yunqueyi.com/'/'||'http://10.177.10.238:10201' || 'http://test1-api.yunqueyi.com/'
// const devApiUri = 'http://dev-api.yunqueyi.com/'
// // uat地址
const baseUrl = 'http://test1-sc.yunqueyi.com/'
const apiUrl = 'http://test1-api.yunqueyi.com/'
// // pro地址
// const baseUrl = 'http://sc.yunqueyi.com/'
// const apiUrl = 'http://api.yunqueyi.com/'
// 为每个URL添加应用校验密钥
export function getBaseUrl(url,str) {
return baseUrl + url
}
export function getApiUrl(url) {
return apiUrl + url
}
src/utils/index.js
浏览文件 @ 996f8eb7
/** /**
* Created by Anndy Yang on 18/03/18. * Created by Anndy Yang on 18/03/18.
*/ */
Date.prototype.format = function(fmt) { Date.prototype.format = function(fmt) {
var o = { var o = {
'M+': this.getMonth() + 1, // 月份 'M+': this.getMonth() + 1, // 月份
...@@ -55,8 +54,6 @@ export function parseTime(time, cFormat) { ...@@ -55,8 +54,6 @@ export function parseTime(time, cFormat) {
return time_str return time_str
} }
export function formatTime(time, option) { export function formatTime(time, option) {
time = +time * 1000 time = +time * 1000
const d = new Date(time) const d = new Date(time)
...@@ -241,8 +238,6 @@ export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/' ...@@ -241,8 +238,6 @@ export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/'
// const evaluatPageUrl = 'http://10.177.10.225:9001/#/home' || 'https://test1-phome.yunqueyi.com/gpr/#/home' // const evaluatPageUrl = 'http://10.177.10.225:9001/#/home' || 'https://test1-phome.yunqueyi.com/gpr/#/home'
// export const jumpWebPageUrl = 'https://test1-phome.yunqueyi.com/appl/#/' // export const jumpWebPageUrl = 'https://test1-phome.yunqueyi.com/appl/#/'
// const baseUrl = 'https://uat-sc.yunqueyi.com/' // const baseUrl = 'https://uat-sc.yunqueyi.com/'
// const apiUrl = 'https://uat-api.yunqueyi.com/' // const apiUrl = 'https://uat-api.yunqueyi.com/'
// const evaluatPageUrl = 'https://uat-phome.yunqueyi.com/gpr/#/home' // const evaluatPageUrl = 'https://uat-phome.yunqueyi.com/gpr/#/home'
...@@ -255,15 +250,11 @@ export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/' ...@@ -255,15 +250,11 @@ export const jumpWebPageUrl = 'https://dev-phome.yunqueyi.com/appl/#/'
// export const jumpWebPageUrl = 'https://phome.yunqueyi.com/appl/#/' // export const jumpWebPageUrl = 'https://phome.yunqueyi.com/appl/#/'
// 为每个URL添加应用校验密钥 // 获取BaseUrl
export function getBaseUrl(url,str) { export function getBaseUrl(url,str) {
return baseUrl + url return baseUrl + url
} }
export function getApiUrl(url) { export function getApiUrl(url) {
return apiUrl + url return apiUrl + url
} }
src/utils/yqyServerRegister.js
浏览文件 @ 996f8eb7
...@@ -4,12 +4,6 @@ ...@@ -4,12 +4,6 @@
e.rocNative = { e.rocNative = {
// 参数说明 e:回传回来的移动端服务名称; t:前端自己传递的回调JS方法 // 参数说明 e:回传回来的移动端服务名称; t:前端自己传递的回调JS方法
__nativeCall: function (e, t, n) { __nativeCall: function (e, t, n) {
///alert(t);
// if (t === '__gotoAuthentication') {
// __gotoAuthentication()
// }
// var a = i[e];
// delete i[e], "function" == typeof a && a(t, n)
if(t == '__nativeCallMsg'){ if(t == '__nativeCallMsg'){
__nativeCallMsg(n) __nativeCallMsg(n)
} }
...@@ -35,9 +29,6 @@ ...@@ -35,9 +29,6 @@
if(t == 'getToken'){ if(t == 'getToken'){
__getToken(n); __getToken(n);
} }
}, },
__callNative: function (t, a, o) { __callNative: function (t, a, o) {
"function" == typeof o && (n++ , i[n] = o); "function" == typeof o && (n++ , i[n] = o);
...@@ -46,21 +37,15 @@ ...@@ -46,21 +37,15 @@
var param = a === undefined ? {} : a; var param = a === undefined ? {} : a;
var r = JSON.stringify({ var r = JSON.stringify({
name: t, name: t,
// callbackId: "function" == typeof o ? n : -1,
callbackId: __funcName, callbackId: __funcName,
param: param param: param
}); });
//alert(r);
if (e.__rocAndroid) { if (e.__rocAndroid) {
// alert(r);
e.__rocAndroid.postMessage(r); e.__rocAndroid.postMessage(r);
// e.__isAndroid = true;
return true; return true;
} }
if (e.webkit && window.webkit.messageHandlers.rociOS) { if (e.webkit && window.webkit.messageHandlers.rociOS) {
//alert(r)
window.webkit.messageHandlers.rociOS.postMessage(r) window.webkit.messageHandlers.rociOS.postMessage(r)
// e.__isIOS = true;
return true; return true;
} }
return false; return false;
...@@ -90,7 +75,7 @@ ...@@ -90,7 +75,7 @@
}) })
} }
}) })
}("dispatchEventByModuleCode", "gotoAuthentication", "shareWechat", "backPreviousPage", "bindingWechat", "gotoLogin", "getDeviceInfo", "goBack", "appBuryingPointEntrust", "getAuthPermission", "getAppVersionCode", "getToken", "gotoNewActivity", "gotoNewActivityWithParams", "gotoNewWebActivity", "gotoYidianActivity", "readMessage", "openFiveMintusAudio", "getStatusBarSize", "showNativeDialog", "showNativeToast", "gotoViewTop", "appInit", "checkPermissions", "getStatusBarHeight","setTabMiniIcon","getUserInfo","pauseAudioView") }("dispatchEventByModuleCode", "gotoAuthentication", "shareWechat", "backPreviousPage", "bindingWechat", "gotoLogin", "getDeviceInfo", "goBack", "appBuryingPointEntrust", "getAuthPermission", "getAppVersionCode", "getToken", "gotoNewActivity", "gotoNewActivityWithParams", "gotoNewWebActivity", "gotoYidianActivity", "readMessage", "openFiveMintusAudio", "getStatusBarSize", "showNativeDialog", "showNativeToast", "gotoViewTop", "appInit", "checkPermissions", "getStatusBarHeight","setTabMiniIcon","getUserInfo","pauseAudioView");
if (e.__rocAndroid) { if (e.__rocAndroid) {
e.__isAndroid = true e.__isAndroid = true
e.__isIOS = false e.__isIOS = false
...@@ -107,13 +92,4 @@ ...@@ -107,13 +92,4 @@
if(window.__isIOS){ if(window.__isIOS){
rocNative.appInit() rocNative.appInit()
} }
}(window); }(window);
window.__gotoAuthentication = function (params) {
alert('I am in __gotoAuthentication')
}
// console.log(33344)
// if (__isIOS){
// // rocNative.appInit()
// }
src/views/activity/activity.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<section>
<TopNav :bgColor="bgColor" :title="navTitle" :isNavFix="isNavFix" :burialPoint="pointStyle"></TopNav>
<section class="activity-box">
<div class="activity-count">共{{list.length}}个活动</div>
<div class="activity-list">
<div class="activity-item" v-for="(item,index) in list" :key="index" @click="goToPage(item)">
<img v-lazy="item.imageUrl" class="img"/>
<!-- <div class="time">活动时间：9月3日-9月9日</div> -->
</div>
<div class="no-show" v-if="list.length.length == 0">
暂无数据
</div>
</div>
<BackTop v-if="isShowBackTop" :burialPoint="pointStyle"></BackTop>
</section>
</section>
</template>
<script>
// import { setEventByModuleCode } from '@/utils/index'
import TopNav from '../../components/common/topNav';
import BackTop from '../../components/common/backTop';
export default {
data(){
return {
tittle:'',
list:[],
bgColor:'#fff',
navTitle:'活动',
isBorder:true,
isNavFix:true,
id:'1',
tabName:'测试',
tabList:[],
isShowBackTop:false,
pointStyle:'activity',
userToken:null
}
},
components:{
TopNav,
BackTop
},
created(){
let _this = this;
window.__getUserInfo = function(parm){
let jh = JSON.stringify(parm)
_this.token = parm.userToken;
}
//_this.token = 'AF22B142535B440883135309BBF3F3B0'
this.getBaseInfo();
},
mounted(){
this.getTabData();
window.addEventListener('scroll', this.scrollFun);
},
beforeDestroyed(){
window.removeEventListener('scroll', this.scrollFun)
},
methods:{
//获取版本号
getBaseInfo(){
rocNative.getUserInfo({
__funcName: '__getUserInfo'
})
},
scrollFun(){
let scrollTop = document.documentElement.scrollTop;
this.isShowBackTop = scrollTop > 0 ? true : false;
// if(scrollTop > 0){
// this.isShowBackTop = true;
// }
},
goToPage(itemData){
this.pageBurialPoin({
menuLevel:2,
menuFromCode:'m_home',
menuCode:'m_content_list',
functionCode:'f_activity',
actionCode:'c_title',
labelId:itemData.id,
labelValue :itemData.title,
})
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
//查询tab
getTabData(){
let _this = this,
parm = {
id:_this.id,
setEntry: 'headers',
}
_this.GET('contents/contentList/tabById',parm).then(function(res){
if(res.code === '000000'){
_this.navTitle = res.data.name || '';
_this.tabName = _this.tabList[0] || '';
// if(_this.tabList.length>0){
// _this.tabName = _this.tabList[0] || '';
// }
_this.getData();
}else{
//alert(res.message)
}
})
},
//查询内容
getData(){
let _this = this,
parm = {
id:_this.id,
tabName : _this.tabName,
setEntry: 'headers',
token:_this.userToken
}
// if(_this.tabName != ''){
// parm.tabName = _this.tabName
// }
_this.GET('contents/contentList/contentById',parm).then(function(res){
if(res.code === '000000'){
_this.list = res.data.contentList && res.data.contentList.contentList || [];
}
})
}
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.activity-box{
padding: px2rem(15px);
background: #fff;
}
.no-show{
font-size: px2rem(15px);
color: #999;
text-align: center;
}
.activity-count{
color: #999;
font-size: px2rem(15px);
}
.activity-item{
position: relative;
width: px2rem(345px);
max-height: px2rem(170px);
margin-top:px2rem(15px);
box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
display: block;
overflow: hidden;
.img{
width: 100%;
max-height: 100%;
}
.time{
position: absolute;
color:#fff;
height: px2rem(25px);
line-height: px2rem(25px);
background: RGBA(0, 0, 0, 0.1);
border-radius: 0 0 px2rem(5px) px2rem(5px);
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
font-size: px2rem(14px);
padding-left: px2rem(5px);
}
}
</style>
src/views/gpranking/CompareTable.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<div>
<!-- 类型4：常规样式：左三右三 -->
<div v-if="type==4" class="rank-table-content">
<!-- 我的 -->
<div class="my-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.self" :key="index">
<div class="normal" v-if="!value.isMessage">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
<div class="special" v-if="value.isMessage">
{{value.name}}
</div>
</div>
</div>
<!-- 学院/省内/国内 -->
<div class="other-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
<div class="normal">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
</div>
</div>
</div>
<!-- 类型5：左二右三，类型6：左一右三 -->
<div v-if="type==5||type==6" class="rank-table-content">
<!-- 我的 -->
<div class="my-rank-content content">
<!-- 左侧为两个：一小一大 -->
<div v-if="type==5" class="item">
<div class="normal">
<span class="num">1</span>
<span class="text">{{cmpTableData.self[0].name}}</span>
</div>
</div>
<div v-if="type==5" class="multi-row double-row">{{cmpTableData.self[1].name}}</div>
<!-- 左侧只有一个框 -->
<div v-if="type==6" class="multi-row triple-row">{{cmpTableData.self[0].name}}</div>
</div>
<!-- 学院/省内/国内 -->
<div class="other-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
<div class="normal">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
</div>
</div>
</div>
<!-- 类型1：左二右二下一,类型2：左一右一下一 -->
<div v-if="type==1||type==2||type==3">
<!-- 上 -->
<div class="rank-table-content" v-if="type==1||type==2">
<!-- 我的 -->
<div class="my-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.self" :key="index">
<div class="normal" v-if="!value.isMessage">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
<div class="special" v-if="value.isMessage">
{{value.name}}
</div>
</div>
</div>
<!-- 学院/省内/国内 -->
<div class="other-rank-content content">
<div class="item" v-for="(value,index) in cmpTableData.other" :key="index">
<div class="normal">
<span class="num">{{index+1}}</span>
<span class="text">{{value.name}}</span>
</div>
</div>
</div>
</div>
<!-- 下 -->
<div v-if="type==1" class="multi-col single-row special-message">
{{cmpTableData.commonMessage}}
</div>
<div v-if="type==2" class="multi-col double-row special-message">
{{cmpTableData.commonMessage}}
</div>
<div v-if="type==3" class="multi-col triple-row special-message">
{{cmpTableData.commonMessage}}
</div>
</div>
</div>
</template>
<script>
export default {
name:'CompareTable',
created(){
console.log(this.cmpTableData);
},
props:{
cmpTableData:{
type:Object,
default:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
}
},
type:{
type:Number,
default:4//type===4时为正常的样式
}
},
}
</script>
<style lang="scss" scoped>
@import 'src/style/mixin';
/*公用的样式*/
.rank-table-content{
display:flex;
display:-webkit-flex;
flex-direction:row;
}
.rank-table-content .content.my-rank-content{
width:px2rem(157.5px);//包含右边的border
}
.rank-table-content .content.other-rank-content{
width:px2rem(157px);
}
.content.my-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
.content.other-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
}
.rank-table-content .content .item{
height:px2rem(58px);
display:flex;display:-webkit-flex;justify-content:center;align-items:center;
.normal span{
font-size:px2rem(12px);
display:inline-block;
vertical-align:middle;//行内块垂直居中
}
.normal span.num{
width:px2rem(13px);
height:px2rem(13px);
line-height:px2rem(13px);
text-align:center;
background-color: rgb(202,168,97);
border-radius: px2rem(6.5px);
color:#fff;
font-weight:400;
}
.normal span.text{
width:px2rem(114px);
line-height:px2rem(16px);
text-align:center;
// padding-left:px2rem(10px);
font-weight:400;
}
.special{
font-size:px2rem(12px);
text-align:center;
padding:px2rem(20px);
color:#999;
}
}
//多行公共代码：type5/type6/
.rank-table-content .content .multi-row{
display:table-cell;
vertical-align: middle;
font-size:px2rem(12px);
text-align:center;
padding:0 px2rem(20px);
color:#999;
}
//type5
.rank-table-content .my-rank-content.content .multi-row.double-row{
height:px2rem(116.5px);//58*2+0.5
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
//type6
.rank-table-content .my-rank-content.content .multi-row.triple-row{
height:px2rem(175px);//58*2+0.5
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
//多行公共代码：type1/type2/type3
.special-message{
display:table-cell;
vertical-align: middle;
font-size:px2rem(12px);
text-align:center;
padding:0 px2rem(20px);
color:#999;
}
.multi-col{
border-top:px2rem(0.5px) solid rgb(236,238,241);
width:px2rem(315px);
}
.multi-col.single-row{
height:px2rem(58px);
}
.multi-col.double-row{
height:px2rem(116.5px);
}
.multi-col.triple-row{
height:px2rem(175px);
}
</style>
src/views/gpranking/gpranking.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<div class="main">
<div class="basic">
<!-- 背景图片 -->
<!-- <img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt=""> -->
<div class="bg"></div>
<!-- 个人信息 -->
<div class="info-box">
<personal-information
:profile-image="personalInfo.imageUrl"
:profile-name="personalInfo.name"
:date="personalInfo.date"
:days="personalInfo.days"
></personal-information>
</div>
<!-- <div class="info">
<div class="info-profile">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
</div>
<div class="info-detail">
<div class="info-detail-name">
王小呆
</div>
<div class="info-detail-others">自<span>2016.3.23</span>起&nbsp;&nbsp;您与云鹊医相识已经<span>483</span>天啦
</div>
</div>
<div class="arrow-right">
<img src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/arrowRight.png" alt="">
</div>
</div> -->
</div>
<div class="detail">
<div class="tab-header">
<div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
<div class="text">
本院
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
<div class="text">
本省
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
<div class="text">
全国
</div>
<div class="bar">
</div>
</div>
</div>
<div class="tab">
<!-- 近七天成长路径 -->
<div class="sub grow-path">
<header class="title">30天成长路径</header>
<!-- 图表 -->
<div id="growPath" class="grow-path-chart">
</div>
</div>
<!-- 学习情况 -->
<div class="sub study-condition">
<header class="title">学习情况</header>
<!-- 图表 -->
<div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">
</div>
<!-- 新的对比 -->
<div class="study-cmp">
<!-- 头部tab -->
<header>
<div class="tab-name" :class="{active:currentStudyTab===0}" @click="toggleStudyTab(0)">完成课程</div>
<div class="tab-name" :class="{active:currentStudyTab===1}" @click="toggleStudyTab(1)">完成考试</div>
<div class="tab-name" :class="{active:currentStudyTab===2}" @click="toggleStudyTab(2)">获得证书</div>
</header>
<!--表格-->
<div class="rank-table">
<!-- header -->
<header>
<div class="rank-name my-rank">我的最近Top3</div>
<div class="rank-name other-rank">院内Top3</div>
</header>
<!-- 测试组件 -->
<compare-table :cmp-table-data=cmpTableDataTest3 :type=type></compare-table>
</div>
</div>
</div>
<!-- 为你推荐 -->
<div class="recommend-for-you">
<recommend-list :title="recommendTitle" title-position="center" :recommends="recommendList"></recommend-list>
</div>
<!-- 其它为你推荐 -->
<recommend-list
title="你可能需要"
title-position="left"
has-change=true
has-more=true
has-course-tag=true
tag-position="right"
:recommends="recommendListTest"></recommend-list>
<!-- 课程列表 -->
<course-list
title="你可能需要"
title-position="left"
has-change=true
has-more=true
has-course-tag=true
tag-position="right"
:courses="courseList"></course-list>
</div>
</div>
</div>
</template>
<script>
// import RecommendList from './RecommendList.vue'
// import RecommendListTest from './RecommendListTest.vue'
import CompareTable from './CompareTable.vue'
import RecommendList from 'src/components/common/yqy/RecommendList.vue'
import CourseList from 'src/components/common/yqy/CourseList.vue'
import PersonalInformation from 'src/components/common/yqy/PersonalInformation.vue'
var echarts=require('echarts');
export default {
name:'gpranking',
components:{
// RecommendList,
RecommendList,
CourseList,
PersonalInformation,
CompareTable
},
data(){
return{
//记录全国/全省/本院tab ----0/1/2
currentTab:0,
//记录课程/考试/证书 ----0/1/2
currentStudyTab:0,
//记录准确的 ‘全国-课程’这种组合 ----00/01/02/10/11/12/20/21/22
currentChosen:'00',
//共六种表格样式-----4：normal,
type:3,
//提示信息列表，
messageList:{
institute:{
course:{
messageA:'您完成的课程太少了，赶紧去学习喔',
messageB:'您和您所在的医院已完成的课程数太少了，赶紧去学习哦！'
},
exam:{
messageA:'您完成的考试太少了，去测试一下自己的水平吧',
messageB:'您和您所在的医院已完成的考试太少了，赶紧去学习哦！'
},
certificate:{
messageA:'您获得的证书太少了，赶紧去考证吧！',
messageB:'您和您所在的医院已获得的证书不足3张，赶紧去学习哦！'
}
},
province:{
course:{
messageA:'您完成的课程太少了，赶紧去学习喔',
messageB:'您和您所在的省已完成的课程数太少了，赶紧去学习哦！'
},
exam:{
messageA:'您完成的考试太少了，去测试一下自己的水平吧',
messageB:'您和您所在省已完成的考试太少了，赶紧去学习哦！'
},
certificate:{
messageA:'您获得的证书太少了，赶紧去考证吧！',
messageB:'您和您所在的省已获得的证书不足3张，赶紧去学习哦！'
}
},
country:{
course:{
messageA:'您完成的课程太少了，赶紧去学习喔',
messageB:''
},
exam:{
messageA:'您完成的考试太少了，去测试一下自己的水平吧',
messageB:''
},
certificate:{
messageA:'您获得的证书太少了，赶紧去考证吧！',
messageB:''
}
}
},
//图表数据
//30天成长
growPathDataSet: [
['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
['10.6','15','22','2','4'],
['10.7','15','24','2','4'],
['10.8','17','28','2','4'],
['10.9','15','18','2','4'],
['今天','15','20','2','4']
],
//学习情况
studyConditionDataSet: [
['content', '我的', '本院平均'],
['完成课程', 56,69],
['完成考试', 23,45],
['获得证书', 8,20],
],
OptionGrowPath:{},//30天成长路径///////
OptionStudyCondition:{},
//为你推荐数据：
recommendTitle:"为你推荐",
recommendList:[],
recommendListTest:[],
courseList:[],
personalInfo:{"name":"王小呆","date":"2016.3.23","days":555,"imageUrl":"https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png"},
cmpTableHeader:{institute:"院内",province:"省内",country:"国内"},
cmpTableData:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
},
cmpTableDataTest4:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您获得的证书太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
},
cmpTableDataTest5:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:true,name:'您获得的考试太少了，赶紧去考证吧！'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{name:'治疗药物检测的临床意义'}
]
},
cmpTableDataTest6:{
self:[
{isMessage:false,name:'您获得的考试太少了，赶紧去考证吧！'},
{isMessage:false,name:'遗传性耳聋诊断与咨询遗传性耳聋诊断与咨询'},
{isMessage:true,name:'您和您的学院，获得的证书太少了，快去学习吧'},
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
{isMessage:true,name:'您和您的学院，获得的证书太少了，快去学习吧'},
]
},
cmpTableDataTest1:{
self:[
{isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:false,name:'治疗药物检测的临床意义'},
// {isMessage:true,name:'暂无'},
// {isMessage:true,name:'暂无'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
{name:'治疗药物检测的临床意义是什么'},
],
commonMessage:'您和您的学院，获得的证书太少了，快去学习吧'
},
cmpTableDataTest2:{
self:[
// {isMessage:false,name:'治疗药物检测的临床意义'},
{isMessage:true,name:'暂无'},
// {isMessage:true,name:'暂无'}
],
other:[
{name:'聚集糖尿病治疗与管理'},
],
commonMessage:'您和您的学院，获得的证书太少了，快去学习吧'
},
cmpTableDataTest3:{
commonMessage:'您和您所在地，获得的证书太少了，快去学习吧'
}
}
},
mounted(){
this.handleData();
// this.generateExample();
this.generateStudyConditionChart();
this.generateGrowPathChart();
//为你推荐
this.getRecommendList();
},
methods:{
handleData:function(){
this.OptionGrowPath={
// title:{
// show:true,
// },
legend:{
itemHeight:6,//图例的高度
itemGap:10,//图例间距
itemWidth:10,//图例的宽度
textStyle:{//整体设置文字部分的样式
color:'#666',
fontSize:12,
fontweight:400,
height:16.5,
lineHeight:16.5,
padding:[0,30,0,0],
// borderColor:'#ccc',
// borderWidth:2,
},
data:[
{
name:'我的学习时长',
icon:'line',
},
{
name:'我的学习课程',
},
{
name:'平均学习时长',
icon:'line',
},
{
name:'平均学习课程',
}
],
},
dataset: {
//提供一份数据
source: this.growPathDataSet,
},
grid:{
left:0,
right:0,
bottom:0
},
xAxis:
{
type:'category',
axisLine:{
lineStyle:{
type:'solid',
color:'#EDEEF0',
width:'2',
},
},
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
},
axisTick:{
show:false,
// length:10
},
data:[
{value:'10.6',
textStyle:{fontweight:'bold',color:'#000'}},
'10.7', '10.8','10.9', '今天'],
},
yAxis:[
{
type:'value',
name:'时长',
// interval:25,
min:0,
// max:60,
axisLabel:{
formatter:`{value}min`
},
show:false
},
{
type:'value',
name:'课程',
min:0,
// max:6,
axisLabel:{
formatter:`{value}`
},
show:false
}
],
series:[
//['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
{
type:'line',
symbol:'none',
smooth:true,
itemStyle:{'color':'#449284'}
},{
type:'line',
symbol:'none',
smooth:true,
itemStyle:{'color':'#CAA861'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#CAA861'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'rgba(202,168,97,0.2)'}//透明度以这种方式设置，才会在图例中有效果
}
]
};
this.OptionStudyCondition={
// color:{},
legend: {},
tooltip: {},
dataset: {
//提供一份数据
source:this.studyConditionDataSet,
},
grid:{
show:false,
left:0,
right:0,
// bottom:0
},
textStyle:{
color:'#444'
},
xAxis: {
type: 'category',
// name:'xxxx',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
triggerEvent:true,
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
clickable:true
},
axisTick:{
show:false,
// length:10
},
// data:[
// {value:'课程',
// textStyle:{fontweight:'bold',color:'#000'}},
// '完成课程', '完成考试','获得证书', '参与项目'],
},
yAxis: {
show:false,
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
barGap:0,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.84
}
},
{
type: 'bar',
barGap:0.1,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.34
}
}
]
};
},
getRecommendList(){
this.recommendList=[
{name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'},
{name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png'}
],
this.recommendListTest=[
{name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
{name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'治疗'},
{name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'随访'},
{name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
],
this.courseList=[
{name:'肖丹',num:'666人',time:'刚刚',saveStatus:true,title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'诊断'},
{name:'肖小丹',num:'1.1k',time:'3小时前',saveStatus:false,title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'糖尿病'},
{name:'肖丹丹',num:'668',time:'3小时前',saveStatus:false,title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'心脏病'},
{name:'肖丹丹',num:'669',time:'3小时前',saveStatus:true,title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/recommendPic.png',courseTag:'检查'},
]
},
toggleTab:function(tab){
this.currentTab=tab;
this.currentChosen=`${this.currentTab}${this.currentStudyTab}`;
console.log(this.currentTab,this.currentStudyTab,this.currentChosen);
//将相应的数据分别给
},
toggleStudyTab:function(tab){
this.currentStudyTab=tab;
this.currentChosen=`${this.currentTab}${this.currentStudyTab}`;
console.log(this.currentTab,this.currentStudyTab,this.currentChosen)
},
generateGrowPathChart:function(){
let growPathChart=echarts.init(document.getElementById('growPath'));
growPathChart.setOption(this.OptionGrowPath);
growPathChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
});
// s
},
generateStudyConditionChart:function(){
let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
studyConditionChart.setOption(this.OptionStudyCondition);
// studyConditionChart.on('axisareaselected',function(){
// console.log('xxx')
// })
studyConditionChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
if(params.componentType=='xAxis'){
// console.log(params.value)
}
});
}
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
/*****************************************basic信息******************************************/
.main{
background-color:$fc;//整体背景为蓝色
}
.basic{
width:px2rem(375px);
height:px2rem(150px);
position:relative;
}
.basic .bg{/*图片响应式:内容自动向下排列*/
width:px2rem(375px);
height:px2rem(119px);
background-color:#41B1A3;
// background-color:linear-gradient(25deg,rgba(65,177,163,1) 0%,rgba(74,158,143,1) 100%);
// margin-bottom:px2rem(51px)
}
.basic .info-box{
@include cl;//水平居中
position: absolute;
top:px2rem(80px);
}
/****************************************具体信息*****************************************/
.detail{
display:flex;
flex-direction: column;
/* justify-content:center; */
width:100%;
padding-top:px2rem(20px);
padding-right:px2rem(15px);
padding-left:px2rem(15px);
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.tab-header{
display:flex;
justify-content:center;
width:100%;
height:px2rem(34.5px);
box-shadow: 0 px2rem(2px) px2rem(4px) 0 rgba(0,0,0,0.04)
}
.tab-header .tab-header-name{
width:px2rem(30px);
height:px2rem(17px);
line-height:px2rem(17px);
font-size:px2rem(15px);
font-weight:400;
color:rgb(153,153,153)
/* padding:1rem; */
/* margin:0 2rem; */
}
.tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
margin-right:px2rem(67.5px);
}
.tab-header .tab-header-name .text{
height:px2rem(17px);
line-height:px2rem(17px);
}
.tab-header .tab-header-name.active .bar{
width:px2rem(10px);
height:px2rem(3px);
margin-top:px2rem(9.5px);
margin-left:px2rem(10px);
background:#449284;
border-radius:px2rem(1.5px);
}
.tab-header .tab-header-name.active{
font-weight:500;
color:rgb(51,51,51)
}
.tab{
width:100%;
}
.sub.grow-path,.sub.study-condition{
padding:0 px2rem(5px);
}
.sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
margin-top:px2rem(25px);
margin-bottom:px2rem(11px);
height:px2rem(25px);
line-height:px2rem(25px);
font-size:px2rem(18px);
font-weight:400;
color:#333;
text-align:center;
}
.sub.grow-path>.title{
margin-top:px2rem(25px);
}
.sub.study-condition>.title{
margin-top:px2rem(20px);
}
/*成长情况*/
.grow-path-chart{
width:100%;
height:px2rem(282px);/*(33+532)/2*/
}
/*学习情况*/
///////新设计的学习情况
.study-cmp{
width:px2rem(345px);
// min-height:px2rem(254.5px);
min-height:px2rem(284.5px);
box-shadow:0px 10px 30px 0px rgba(0,57,47,0.05);
border-radius:10px;
}
.study-cmp>header{
height:px2rem(36.5px);
display:flex;
display:-webkit-flex;
flex-direction:row;
}
.study-cmp .tab-name{
width:px2rem(115px);
height:px2rem(36.5px);
line-height:px2rem(36.5px);
font-size:px2rem(12px);
text-align:center;
background-color:#f5f5f5;
}
.study-cmp .tab-name:nth-child(1),.study-cmp .tab-name:nth-child(2){
border-right: px2rem(0.5px) solid #e7e7e7;
}
.study-cmp .tab-name.active{
background-color:#fff;
}
.rank-table{
margin:px2rem(21.5px) px2rem(15px) px2rem(28px) px2rem(15px);//上右下左
border:px2rem(0.5px) solid rgb(236,238,241);
}
.rank-table>header{
display:flex;
display:-webkit-flex;
flex-direction:row;
height:px2rem(37px);
}
.rank-table .rank-name{
width:px2rem(157.5px);
height:px2rem(37px);
line-height:px2rem(37px);
text-align:center;
font-weight:500;
font-size:px2rem(12px);
color:#333;
}
.rank-table .rank-name.my-rank{
background-color:rgba(227,188,122,0.1);
}
.rank-table .rank-name.other-rank{
background-color:rgba(68,146,132,0.1);
}
//具体内容的样式
.rank-table-content{
display:flex;
display:-webkit-flex;
flex-direction:row;
}
.rank-table-content .content.my-rank-content{
width:px2rem(157px);
}
.rank-table-content .content.other-rank-content{
width:px2rem(157px);
}
.rank-table-content .content .item{
height:px2rem(58px);
display:flex;display:-webkit-flex;justify-content:center;align-items:center;
.normal span{
font-size:px2rem(12px);
display:inline-block;
vertical-align:middle;//行内块垂直居中
}
.normal span.num{
width:px2rem(13px);
height:px2rem(13px);
line-height:px2rem(13px);
text-align:center;
background-color: rgb(202,168,97);
border-radius: px2rem(6.5px);
color:#fff;
font-weight:400;
}
.normal span.text{
width:px2rem(114px);
line-height:px2rem(16px);
text-align:center;
// padding-left:px2rem(10px);
font-weight:400;
}
.special{
font-size:px2rem(12px);
text-align:center;
padding:px2rem(20px);
color:#999;
}
}
.content.my-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
border-right:px2rem(0.5px) solid rgb(236,238,241);
}
.content.other-rank-content .item{
border-top:px2rem(0.5px) solid rgb(236,238,241);
}
////////////////////////
/*为你推荐*/
.recommend-for-you{
padding-top:px2rem(5px);/*补充推荐list组件里不足的顶部间距*/
}
</style>
src/views/gpranking/gprankingOld.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<div class="main">
<div class="basic">
<!-- 背景图片 -->
<img class="bg" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/basicBg.png" alt="">
<!-- 个人信息 -->
<div class="info">
<!-- 左侧头像 -->
<div class="info-profile">
<img src="../images/profile.jpg" alt="">
</div>
<!-- 右侧个人信息 -->
<ul class="info-detail">
<li>
<span class="info-detail-name">王小呆</span>
<span class="info-detail-others">学习能手</span>
</li>
<li>
<span class="info-detail-others">自2016.3.23起</span>
<span class="info-detail-others">您与云鹊医相识已经483天啦</span>
</li>
</ul>
</div>
</div>
<div class="detail">
<div class="tab-header">
<div class="tab-header-name" :class="{active:currentTab===0}" @click="toggleTab(0)">
<div class="text">
本院
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===1}" @click="toggleTab(1)">
<div class="text">
本省
</div>
<div class="bar">
</div>
</div>
<div class="tab-header-name" :class="{active:currentTab===2}" @click="toggleTab(2)">
<div class="text">
全国
</div>
<div class="bar">
</div>
</div>
</div>
<div class="tab">
<!-- 近七天成长路径 -->
<div class="sub grow-path">
<header class="title">近7天成长路径</header>
<!-- 图表 -->
<div id="growPath" class="grow-path-chart">
</div>
</div>
<!-- 学习情况 -->
<div class="sub study-condition">
<header class="title">学习情况</header>
<!-- 图表 -->
<div class="study-conditon-chart" id="studyCondition" style="width:100%;height:400px;">
</div>
<!-- 对比 -->
<div class="study-condition-cmp">
<header>
<div class="title">我的Top3</div>
<div class="title">院内Top3</div>
</header>
<div class="rank">
<div class="rank-sec my-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
<div class="rank-sec all-rank">
<div class="rank-item">
<div class="rank-num">1</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">2</div>
<div class="rank-name">聚集糖尿病治疗与管理</div>
</div>
<div class="rank-item">
<div class="rank-num">3</div>
<div class="rank-name">治疗药物检测的临床意义</div>
</div>
</div>
</div>
</div>
</div>
<!-- 为你推荐 -->
<div class="recommend-for-you">
<recommend-list-test :title="recommendTitle" position="center" :recommends="recommendList"></recommend-list-test>
</div>
<!-- 其它为你推荐 -->
<recommend-list-test
title="你可能需要"
title-position="center"
has-more=true
has-course-tag=true
tag-position="right"
:recommends="recommendListTest"></recommend-list-test>
</div>
</div>
</div>
</template>
<script>
import RecommendList from './RecommendList.vue'
import RecommendListTest from './RecommendListTest.vue'
var echarts=require('echarts');
export default {
name:'gpranking',
components:{
RecommendList,
RecommendListTest
},
data(){
return{
currentTab:0,
//编辑的数据
basicInfo:{"name":"王小呆","level":"学习小能手","date":"2016.3.23","days":555,"imgLink":""},
//图表数据
OptionStudyCondition:{},
OptionGrowPath:{},
//为你推荐数据：
recommendTitle:"为你推荐",
recommendList:[],
recommendListTest:[]
}
},
mounted(){
this.getData();
// this.generateExample();
this.generateStudyConditionChart();
this.generateGrowPathChart();
//为你推荐
this.getRecommendList();
},
methods:{
getData:function(){
this.OptionGrowPath={
title:{
show:true,
},
legend:{
data:[
{
name:'我的学习时长',
icon:'line',
textStyle:{
// color:'blue'
}
},
{
name:'我的学习课程',
},
{
name:'平均学习时长',
icon:'line',
},
{
name:'平均学习课程',
}
],
top:0,
padding:10,
// show:false
},
dataset: {
//提供一份数据
source: [
['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
['10.6','15','22','2','4'],
['10.7','15','24','2','4'],
['10.8','17','28','2','4'],
['10.9','15','18','2','4'],
['10.10','17','19','2','4'],
['今天','15','20','2','4']
]
},
grid:{
left:0,
right:0,
bottom:0
},
xAxis:[
{
type:'category',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
},
axisTick:{
show:false,
// length:10
},
}
],
yAxis:[
{
type:'value',
name:'时长',
// interval:25,
min:0,
max:40,
axisLabel:{
formatter:`{value}min`
},
show:false
// show:true
},
{
type:'value',
name:'课程',
min:0,
max:10,
axisLabel:{
formatter:`{value}`
},
show:false
}
],
series:[
//['content','我的学习时长','平均学习时长','我的学习课程','平均学习课程'],
{
type:'line',
symbol:'none',
itemStyle:{'color':'#FFCE67'}
},{
type:'line',
symbol:'none',
itemStyle:{'color':'#FFCE67','opacity':0.4}//折线上的效果不好
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#FFCE67'}
},{
type:'bar',
yAxisIndex:1,
label:{
show:true,
position:'top'
},
barGap:0.1,
barCategoryGap:'30px',
itemStyle:{'color':'#FFCE67','opacity':0.4}
}
]
};
this.OptionStudyCondition={
// color:{},
legend: {},
tooltip: {},
dataset: {
//提供一份数据
source: [
['content', '我的', '本院平均'],
['在学课程', 12, 10],
['完成课程', 56,62],
['完成考试', 23,45],
['获得证书', 8,20],
['参与项目', 4,6]
]
},
grid:{
show:false,
left:0,
right:0,
// bottom:0
},
textStyle:{
color:'#444'
},
xAxis: {
type: 'category',
// name:'xxxx',
axisLine:{
lineStyle:{
type:'solid',
color:'#aaa',
width:'4',
},
},
triggerEvent:true,
axisLabel:{
show:true,
textStyle:{
// color:'#aaa', //坐标值具体的颜色
// color:'rgb(255,0,0)',
},
fontSize:'10px',
clickable:true
},
axisTick:{
show:false,
// length:10
},
data:[
{value:'在学课程',
textStyle:{fontweight:'bold',color:'#000'}},
'完成课程', '完成考试','获得证书', '参与项目'],
},
yAxis: {
show:false,
},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
series: [
{
type: 'bar',
barGap:0,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.84
}
},
{
type: 'bar',
barGap:0.1,
barCategoryGap:'30px',
label:{
show:true,
position:'top'
},
itemStyle:{
'color':'#5489FD',
'opacity':0.34
}
}
]
};
},
getRecommendList(){
this.recommendList=[
{name:'肖丹丹',num:'671',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'672',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'673',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'},
{name:'肖丹丹',num:'674',title:'患者心理学入门文字很长文字很长文字很长文字很长',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png'}
],
this.recommendListTest=[
{name:'肖丹',num:'666',title:'高血压急诊处理原则',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'诊断'},
{name:'肖小丹',num:'667',title:'中青年高血压的特点与防治',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'治疗'},
{name:'肖丹丹',num:'668',title:'高血压急诊',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'669',title:'高血压急诊处理原则机器使用方法',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'检查'},
{name:'肖丹丹',num:'670',title:'全科医学中医患关系',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'患者顺从度改善经验谈',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'基层医疗患者管理',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'},
{name:'肖丹丹',num:'670',title:'患者心理学入门',imgUrl:'https://pica-pro.oss-cn-shanghai.aliyuncs.com/gpranking/bg.png',courseTag:'随访'}
]
},
toggleTab:function(tab){
this.currentTab=tab;
},
generateGrowPathChart:function(){
let growPathChart=echarts.init(document.getElementById('growPath'));
growPathChart.setOption(this.OptionGrowPath);
growPathChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
});
// s
},
generateStudyConditionChart:function(){
let studyConditionChart=echarts.init(document.getElementById('studyCondition'));
studyConditionChart.setOption(this.OptionStudyCondition);
// studyConditionChart.on('axisareaselected',function(){
// console.log('xxx')
// })
studyConditionChart.on('click',function(params){
if(params.value){
alert("单击了"+params.name+"柱状图");
}else{
alert("单击了"+params.name+"x轴标签");
}
// console.log(params)
if(params.componentType=='xAxis'){
// console.log(params.value)
}
});
}
}
}
</script>
<style scoped>
/*****************************************basic信息******************************************/
.basic{
width:100%;
/* min-height:358px; */
position:relative;
}
.basic .bg{/*图片响应式:内容自动向下排列*/
width:100%;
/* height:380px; */
}
.basic .info{
/*实现多个元素水平方向上居中*/
display:flex;
display:-webkit-flex;
flex-direction:row;
justify-content: center;
position: absolute;
top:7.8rem;/*整体距离顶部的位置*/
width:100%;
}
.basic .info-profile {
margin-right:1rem;
}
.basic .info-profile img{
width:4.5rem;
height:4.5rem;
border-radius:2.25rem;
}
.basic .info-detail{
display:flex;
flex-direction:column;
}
.basic .info-detail li{
margin-bottom:0.3rem;
text-align:left;
color:#fff;
}
.basic .info-detail .info-detail-name{
margin-right:0.6rem;
height:2.25rem;
line-height:2.25rem;
font-size:1.6rem;
font-weight:500;
}
.basic .info-detail .info-detail-others{
margin-right:0.6rem;
height:2rem;
line-height:2rem;
font-size:1.3rem;
font-weight:400;
}
/****************************************具体信息*****************************************/
.detail{
display:flex;
flex-direction: column;
/* justify-content:center; */
width:100%;
padding:0 1.5rem;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.tab-header{
display:flex;
justify-content:center;
width:100%;
height:3.45rem;
}
.tab-header .tab-header-name{
width:3rem;
font-size:1.5rem;
font-weight:400;
color:rgb(153,153,153)
/* padding:1rem; */
/* margin:0 2rem; */
}
.tab-header .tab-header-name:nth-child(1),.tab-header .tab-header-name:nth-child(2){
margin-right:6.75rem;
}
.tab-header .tab-header-name .text{
height:1.7rem;
line-height:1.7rem;
}
.tab-header .tab-header-name.active .bar{
width:1rem;
height:0.3rem;
margin-top:0.95rem;
margin-left:1rem;/*(3-1)/2*/
background:rgba(84,137,253,1);
border-radius:0.15rem;
}
.tab-header .tab-header-name.active{
font-weight:500;
color:rgba(51,51,51)
}
.tab{
width:100%;
}
.sub.grow-path,.sub.study-condition{
/* margin-left:2rem;
margin-right:2rem; */
padding:0 0.5rem;
}
/* .sub.recommend-for-you{
margin-left:1.5rem;
margin-right:1.5rem;
} */
.sub>.title{/*整体控制每个部分标题与内容之间的间距与样式*/
margin-top:2.5rem;
margin-bottom:1.1rem;
height:2.5rem;
line-height:2.5rem;
font-size:1.8rem;
color:#333;
text-align:center;
}
/*成长情况*/
.grow-path-chart{
width:100%;
min-height:27rem;/*(33+1125-543)/20*/
}
/*学习情况*/
.study-condition-cmp{
width:100%;
height:23.9rem;
background-color:rgb(234,241,255);
}
.study-condition-cmp>header{
display:flex;
display: -webkit-flex;
flex-direction:row;
height:3.75rem;
line-height:3.75rem;
font-size:1.2rem;
font-weight: 400;
}
.study-condition-cmp>header>.title{
width:50%;
text-align:center;
}
.study-condition-cmp .rank{
display:flex;
display: -webkit-flex;
flex-direction:row;
}
.study-condition-cmp .rank .rank-sec{
background-color: #fff;
width:50%;
}
.study-condition-cmp .rank .rank-sec.my-rank{
margin-right:1.4rem;
/* border-top-right-radius: 0.5rem; */
/* border-bottom-right-radius: 0.5rem; */
}
.study-condition-cmp .rank .rank-sec.all-rank{
margin-left:1.4rem;
/* border-top-left-radius: 0.5rem; */
/* border-bottom-left-radius: 0.5rem; */
}
.study-condition-cmp .rank .rank-sec .rank-item{
display:flex;
display:-webkit-flex;
flex-flow:row;
-ms-flex-flow: row;
align-items: center;
background-color:rgb(234,241,255);
color:#666;
border-radius: 0.15rem;
height:5.2rem;/*?*/
}
/*控制rank-item的具体margin状况*/
.study-condition-cmp .rank .rank-sec.my-rank .rank-item{
margin:0.7rem 0.75rem 1rem 0;
}
.study-condition-cmp .rank .rank-sec.all-rank .rank-item{
margin:0.7rem 0 1rem 0.75rem;
}
.study-condition-cmp .rank .rank-sec .rank-item:nth-last-child(1){
margin-bottom:0.7rem;
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-num{
width:1.3rem;
height:1.3rem;
text-align:center;
line-height:1.3rem;
background-color: #709CFE;
color:#fff;
font-weight:400;
font-size:1.2rem;
border-radius: 0.65rem;
margin-left:1rem;
margin-right:0.7rem;
/* margin:0 0.5rem; */
}
.study-condition-cmp .rank .rank-sec .rank-item .rank-name{
font-size:1.3rem;
font-weight:400;
margin-right:0.95rem;
color:rgb(102,102,102);
height:3.7rem;
line-height:1.85rem;
}
/*为你推荐*/
.recommend-for-you{
padding-top:0.5rem;/*补充推荐list组件里不足的顶部间距*/
}
</style>
src/views/home/home.1.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<section class="font-style">
<section class="home-header">
<mt-header>
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
<article style="width: 100%;text-align:center;">
<YqyHomeHeader/>
<img class="logo_img" src='../../images/header-bg-2.png' />
</article>
</section>
<section class="home-body">
<span @click="pushView('http://10.177.10.121:8080/yqy/index.html?1')"> pushView 1</span>
<span @click="goBack"> goBack 2</span>
<span @click="toast('Hi, 你好，宾宾！')"> toast 3</span>
<YqyHotLabel/>
<YqyHomePorter/>
<YqyHomeBanner/>
<YqyHomeKeepon/>
<YqyHomeAdv/>
<YqyCategoryThree1/>
<YqyFiveMinutes/>
<YqyHotTeacher/>
<YqyTeacherList/>
<!-- <YqyTeacherInfo/> -->
</section>
<section class="home-bottom">
<!-- <yqyTest/> -->
</section>
</section>
</template>
<script>
import { Header } from 'mint-ui';
// import yqyTest from '@/components/common/yqy/yqyTest'
import YqyHotLabel from '../../components/business/yqy-hot-label';
import YqyHotTeacher from '../../components/business/yqy-hot-teacher';
import YqyTeacherList from '../../components/business/yqy-teacher-list';
import YqyTeacherInfo from '../../components/business/yqy-teacher-info';
import YqyHomeHeader from '../../components/business/yqy-home-header';
import YqyHomeAdv from '../../components/business/yqy-home-adv';
import YqyFiveMinutes from '../../components/business/yqy-five-minutes';
import YqyCategoryThree1 from '../../components/business/yqy-category-three-1';
import YqyHomeBanner from '../../components/business/yqy-home-banner';
import YqyHomeKeepon from '../../components/business/yqy-home-keepon';
import YqyHomePorter from '../../components/business/yqy-home-porter';
export default {
data(){
return {
}
},
components:{
Header,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter
},
mounted(){
// this.init()
},
computed:{
},
methods:{
init() {
this.API_GET('contents/homeButton/msg', {}).then( res => {
logger.debug(res)
this.$log.debug(res)
})
let para = {
sysCode: 27,
token: this.token,
setEntry: 'headers'
}
this.GET('analysis/activityDetail', para).then( res => {
logger.debug(res)
})
para = {
sysCode: 27,
rankingType: 27,
flag: 1,
token: this.token,
setEntry: 'headers'
}
this.GET('exams/rankings', para).then( res => {
logger.debug(res)
})
},
pushView : function(page){
console.log('pushView');
rocNative.pushView({
url : page
}).then(function(res) {
console.log('pushView then' + JSON.stringify(res));
}).catch(function(res){
console.log('pushView catch' + JSON.stringify(res));
});
},
goBack: function (msg) {
console.log('goBack');
rocNative.goBack()
.then(function(res) {
console.log('goBack then' + JSON.stringify(res));
}).catch(function(res){
console.log('goBack catch' + JSON.stringify(res));
});
},
toast : function(msg){
console.log('toast');
rocNative.toast({
msg: msg
}).then(function(res) {
console.log('toast then' + JSON.stringify(res));
}).catch(function(res){
console.log('toast catch' + JSON.stringify(res));
});
},
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
@include sc(0.6rem, #666);
}
.home-header {
height: px2rem(202px);
@include bis('../../images/552064153@2x.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
src/views/home/home.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<section class="font-style">
<section class="home-header">
<mt-header>
<router-link to="/" slot="left">
<mt-button icon="back"></mt-button>
</router-link>
<mt-button icon="more" slot="right"></mt-button>
</mt-header>
<article style="width: 100%;text-align:center;">
<YqyHeaderTop :resourceData="header"/>
</article>
</section>
<section class="home-body">
<YqyHomeBanner :resourceData="resourceData"/>
<YqyHotLabel :allTags="allTags"/>
<YqyNewClass/>
<YqyTeacherList :teacherData="teacherData" :courceData="courceData"/>
<YqyTeacherList :teacherData="needData" :courceData="needcourceData"/>
</section>
<section class="home-bottom">
</section>
</section>
</template>
<script>
import { Header } from 'mint-ui';
// import yqyTest from '@/components/common/yqy/yqyTest'
import YqyHotLabel from '../../components/business/yqy-hot-label';
import YqyHotTeacher from '../../components/business/yqy-hot-teacher';
import YqyTeacherList from '../../components/business/yqy-teacher-list';
import YqyTeacherInfo from '../../components/business/yqy-teacher-info';
import YqyHomeHeader from '../../components/business/yqy-home-header';
import YqyHomeAdv from '../../components/business/yqy-home-adv';
import YqyFiveMinutes from '../../components/business/yqy-five-minutes';
import YqyCategoryThree1 from '../../components/business/yqy-category-three-1';
import YqyHomeBanner from '../../components/business/yqy-home-banner';
import YqyHomeKeepon from '../../components/business/yqy-home-keepon';
import YqyHomePorter from '../../components/business/yqy-home-porter';
import YqyHeaderTop from '../../components/business/yqy-header-top';
import YqyNewClass from '../../components/business/yqy-new-class';
export default {
components:{
Header,
// yqyTest
YqyHotLabel,
YqyHotTeacher,
YqyTeacherList,
YqyTeacherInfo,
YqyHomeHeader,
YqyHomeAdv,
YqyFiveMinutes,
YqyCategoryThree1,
YqyHomeBanner,
YqyHomeKeepon,
YqyHomePorter,
YqyHeaderTop,
YqyNewClass
},
data(){
return {
header: {
title: '糖1111尿病',
studyCount: 2700000,
follower: 10000
},
resourceData: [
{img: '../../images/Shape@2x.png',
name: '检查'},
{img: '../../images/Shape@2x.png',
name: '诊断'},
{img: '../../images/Shape@2x.png',
name: '治疗'},
{img: '../../images/Shape@2x.png',
name: '随访'},
{img: '../../images/Shape@2x.png',
name: '研究'}
],
allTags: ['老年性高血压','早期症状','饮食禁忌','讲师集'],
teacherData: {
title: '课程教学',
hasSelect: true,
showMoreBtn: false,
firstOption: '综111合',
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: [
{
isCheck: false,
title: '在学人数'
},
{
isCheck: false,
title: '最新发布'
}
]
},
courceData: {
selected: '综合1',
hasHospital: false,
hasType: false,
data: [
{
img: '../../images/Shape@2x.png',
name: '全科医学中医患关系全科医学中医患关系',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '患者顺从度改善经验谈',
isLeft: true,
hospital: '阜外医院',
color: 'green',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '基层医疗患者管理',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '患者心理学入门患者心理学入门',
isLeft: true,
hospital: '阜外医院',
color: 'pink',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '基层医疗患者管理',
isLeft: true,
hospital: '阜外医院',
color: 'yellow',
teacher: '肖丹',
count: 477
},
{
img: '../../images/Shape@2x.png',
name: '患者心理学入门患者心理学入门',
isLeft: true,
hospital: '阜外医院',
color: 'blue',
teacher: '肖丹',
count: 477
}
]
},
needData: {
title: '您可能需要',
hasSelect: false,
showMoreBtn: false,
selectOptions: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
],
options: ['学习人数', '发布时间']
},
needcourceData: {
selected: '综合1',
hasHospital: false,
hasType: true,
data: [
{
img: '../../images/Shape@2x.png',
name: '口服降糖药物的药理作用及临床用法',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '治疗'
},
{
img: '../../images/Shape@2x.png',
name: '高血压伴糖尿病的治疗',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '诊断'
},
{
img: '../../images/Shape@2x.png',
name: '口服降糖药物的药理作用及临床用法',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '检查'
},
{
img: '../../images/Shape@2x.png',
name: '高血压伴糖尿病的规范化治疗',
isLeft: true,
hospital: '阜外医院',
color: 'RGBA(74, 135, 212, 1)',
teacher: '肖丹',
count: 477,
type: '随访'
}
]
}
}
},
mounted(){
// this.init()
},
computed:{
},
methods:{
init() {
this.API_GET('contents/homeButton/msg', {}).then( res => {
logger.debug(res)
this.$log.debug(res)
})
let para = {
sysCode: 27,
token: this.token,
setEntry: 'headers'
}
this.GET('analysis/activityDetail', para).then( res => {
logger.debug(res)
})
para = {
sysCode: 27,
rankingType: 27,
flag: 1,
token: this.token,
setEntry: 'headers'
}
this.GET('exams/rankings', para).then( res => {
logger.debug(res)
})
},
pushView : function(page){
console.log('pushView');
rocNative.pushView({
url : page
}).then(function(res) {
console.log('pushView then' + JSON.stringify(res));
}).catch(function(res){
console.log('pushView catch' + JSON.stringify(res));
});
},
goBack: function (msg) {
console.log('goBack');
rocNative.goBack()
.then(function(res) {
console.log('goBack then' + JSON.stringify(res));
}).catch(function(res){
console.log('goBack catch' + JSON.stringify(res));
});
},
toast : function(msg){
console.log('toast');
rocNative.toast({
msg: msg
}).then(function(res) {
console.log('toast then' + JSON.stringify(res));
}).catch(function(res){
console.log('toast catch' + JSON.stringify(res));
});
},
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
@include sc(0.6rem, #666);
}
.home-header {
height: px2rem(202px);
@include bis('../../images/552064153@2x.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
src/views/home/home-new.vue → src/views/index.vue
浏览文件 @ 996f8eb7
...@@ -74,19 +74,19 @@ ...@@ -74,19 +74,19 @@
<script> <script>
import { Swipe, SwipeItem ,Header} from 'mint-ui'; import { Swipe, SwipeItem ,Header} from 'mint-ui';
// import { setEventByModuleCode } from '@/utils/index' // import { setEventByModuleCode } from '@/utils/index'
// import pullRefresh from '../../components/common/pullrefresh' // import pullRefresh from '../components/common/pullrefresh'
import {mapState, mapMutations} from 'vuex' import {mapState, mapMutations} from 'vuex'
import BackTop from '../../components/common/backTop'; import BackTop from '../components/common/backTop';
import YqyTeacherList from '../../components/business-new/yqy-teacher-list'; import YqyTeacherList from '../components/business-new/yqy-teacher-list';
import YqyTopEvaluat from '../../components/business-new/yqy-home-learn-evaluation'; import YqyTopEvaluat from '../components/business-new/yqy-home-learn-evaluation';
import YqyHomeHeader from '../../components/business-new/yqy-home-header'; import YqyHomeHeader from '../components/business-new/yqy-home-header';
import YqyHomeAdv from '../../components/business-new/yqy-home-adv'; import YqyHomeAdv from '../components/business-new/yqy-home-adv';
import YqyFiveMinutes from '../../components/business-new/yqy-five-minutes'; import YqyFiveMinutes from '../components/business-new/yqy-five-minutes';
import YqyCategoryThree1 from '../../components/business-new/yqy-category-three-1'; import YqyCategoryThree1 from '../components/business-new/yqy-category-three-1';
import YqyHomeBanner from '../../components/business-new/yqy-home-banner'; import YqyHomeBanner from '../components/business-new/yqy-home-banner';
import YqyHomeKeepon from '../../components/business-new/yqy-home-keepon'; import YqyHomeKeepon from '../components/business-new/yqy-home-keepon';
import YqyHomePorter from '../../components/business-new/yqy-home-porter'; import YqyHomePorter from '../components/business-new/yqy-home-porter';
import YqyHomeAdjust from '../../components/business-new/yqy-adjust'; import YqyHomeAdjust from '../components/business-new/yqy-adjust';
export default { export default {
data(){ data(){
return { return {
...@@ -104,15 +104,15 @@ export default { ...@@ -104,15 +104,15 @@ export default {
keeponData:{}, //继续学习 keeponData:{}, //继续学习
isShowKeep:false, isShowKeep:false,
listCategory:[{ listCategory:[{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
}], //专题分类数据 }], //专题分类数据
yqDoctorList:[],//云雀名师数据 yqDoctorList:[],//云雀名师数据
newsDatalist:[],//最新课程 newsDatalist:[],//最新课程
...@@ -123,20 +123,20 @@ export default { ...@@ -123,20 +123,20 @@ export default {
stopPropagation:true, stopPropagation:true,
isIntStyle:'', isIntStyle:'',
listSwiper:[{ listSwiper:[{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
}],//轮播图数据 }],//轮播图数据
listMiddle: [{ listMiddle: [{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
},{ },{
"imageUrl": require('../../images/error.png') "imageUrl": require('../images/error.png')
}],//中间栏数据 }],//中间栏数据
scrollTimer:null, scrollTimer:null,
scrollTop:0, scrollTop:0,
...@@ -890,8 +890,8 @@ export default { ...@@ -890,8 +890,8 @@ export default {
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../style/mixin'; @import '../style/mixin';
@import '../../style/swiper.min.css'; @import '../style/swiper.min.css';
.banner-container{ .banner-container{
height: px2rem(210px) height: px2rem(210px)
} }
...@@ -976,7 +976,7 @@ export default { ...@@ -976,7 +976,7 @@ export default {
height: px2rem(202px); height: px2rem(202px);
.swiper{ .swiper{
height: 100%; height: 100%;
/* @include bis('../../images/552064153@2x.png');*/ /* @include bis('../images/552064153@2x.png');*/
} }
......
src/views/search-index.vue 0 → 100644
浏览文件 @ 996f8eb7
<template>
<div>
<SearchHeader/>
<SplitLine/>
<!-- <HistorySearch/> -->
<SearchLabel :allTags="allTags"/>
<SearchLabel title="热门搜索" :showDelete="false" :allTags="allTags"/>
</div>
</template>
<script>
import SearchHeader from '../components/business/search-header';
import SplitLine from '../components/business/split-line';
import HistorySearch from '../components/business/history-search';
import SearchLabel from '../components/business/search-label';
export default {
data(){
return {
showDelete: false,
allTags: [{"doctorId":452,"doctorName":"刘飞刘","doctorImg":"https://file.yunqueyi.com/File/course_doctor/2018-11/19/452.png","doctorAvatarImg":"https://file.yunqueyi.com/image/jpeg/2018/10/12/20181012134114808-5339c711.jpg","doctorHospital":"沈阳市第四人民医院","joinNum":818,"resourceNum":1,"structureId":132},{"doctorId":424,"doctorName":"阮园阮园阮园","doctorImg":"https://file.yunqueyi.com/File/course_doctor/2018-11/19/424.png","doctorAvatarImg":"https://file.yunqueyi.com/image/jpeg/2018/08/30/20180830111232896-de2f9015.jpg","doctorHospital":"浙江医院","joinNum":533,"resourceNum":2,"structureId":132},{"doctorId":351,"doctorName":"李翔李翔李翔","doctorImg":"https://file.yunqueyi.com/File/course_doctor/2018-11/19/351.png","doctorAvatarImg":"https://file.yunqueyi.com/File/course_doctor/2017-04/06/lixiang.jpg","doctorHospital":"解放军306医院全军糖尿病中心","joinNum":503,"resourceNum":2,"structureId":132},{"doctorId":360,"doctorName":"高蕾莉","doctorImg":"https://file.yunqueyi.com/File/course_doctor/2018-11/20/360.png","doctorAvatarImg":"https://file.yunqueyi.com/File/course_doctor/2018-11/20/web_360.png","doctorHospital":"北京大学人民医院","joinNum":376,"resourceNum":1,"structureId":132}]
}
},
components: {
SearchHeader,
SplitLine,
HistorySearch,
SearchLabel
},
created(){
},
mounted(){
},
methods: {
getStatusHight(){
rocNative.getStatusBarHeight({
__funcName: '__getStatusBarHeight'
})
},
goToPage(){
// alert("000");
this.$emit('setAppMsg',false)
this.pageBurialPoin({
menuLevel:1,
menuCode:'m_home',
functionCode:'f_notification',
actionCode:'c_notification',
})
rocNative.readMessage();
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import '../style/mixin.scss';
@import '../style/global.scss';
</style>
src/views/spCooperation/spCooperation.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<section>
<TopNav :bgColor="bgColor" :title="navTitle"></TopNav>
<section class="cooper-box">
<div class="cooper-count">共4个活动</div>
<div class="cooper-list">
<div class="cooper-item" v-for="(item,index) in list" :key="index">
<img src="../../images/Shape@2x.png" class="tag-img"/>
<div class="txt">国家基本公共卫生服务项目基层高血压管理办公室</div>
<span class="throw-img">
<img src="../../images/grey-throw.png" />
</span>
</div>
</div>
<BackTop></BackTop>
</section>
</section>
</template>
<script>
import BackTop from '../../components/common/backTop';
import TopNav from '../../components/common/topNav';
export default {
data(){
return {
//tittle:'转型合作',
navTitle:'转型合作',
bgColor:'#fff',
list:[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
}
},
components:{
BackTop,
TopNav
},
mounted(){
document.tittle = this.tittle;
},
methods:{
},
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin';
.cooper-box{
padding: px2rem(15px);
background: #fff;
}
.cooper-count{
color: #999;
font-size: px2rem(15px);
}
.cooper-item{
position: relative;
width: px2rem(345px);
margin-top:px2rem(15px);
box-shadow: 0 px2rem(2px) px2rem(6px) RGBA(42, 94, 161, 0.15);
padding:px2rem(14px) px2rem(30px) px2rem(14px) px2rem(17px);
.img{
width: 100%;
height: 100%;
}
.tag-img{
width:px2rem(48px);
height: px2rem(48px);
float: left;
}
.txt{
font-size: px2rem(15px);
margin-left:px2rem(59px);
}
.throw-img{
position: absolute;
top:50%;
right: px2rem(11px);;
width:px2rem(14px);
height: px2rem(14px);
margin-top:-(px2rem(7px));
img{
display: block;
width: 100%;
height: 100%
}
}
.time{
position: absolute;
color:#fff;
height: px2rem(25px);
line-height: px2rem(25px);
background: RGBA(0, 0, 0, 0.1);
border-radius: 0 0 px2rem(5px) px2rem(5px);
width: 100%;
bottom: 0;
left: 0;
z-index: 10;
font-size: px2rem(14px);
padding-left: px2rem(5px);
}
}
</style>
src/views/teachers/detail.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<section class="font-style">
<teacherTop></teacherTop>
<div class="teach-opt">
<div class="tea-detail">
<div class="head-img">
<img v-lazy="doctorParm.doctor.app_image_url">
</div>
<p class="detail-name">{{doctorParm.doctor.name}}</p>
<p class="detail-intr">
{{doctorParm.doctor.hospital}} {{doctorParm.doctor.title}}
</p>
<div class="detail-info">
<div class="info-item">
<span class="detail-count">{{doctorParm.studyCount}}</span>
<p>学习人数</p>
</div>
<div class="info-item">
<span class="detail-count">{{doctorParm.followCount}}</span>
<p>关注人数</p>
</div>
</div>
</div>
<div class="tea-new-title plr15">新课上线</div>
<div class="tea-new-line plr15">
<div class="item-new-box">
<div class="item-line" v-for="(item,index) in newsList">
<div class="line-img" @click="goToPage(item)">
<img v-lazy="item.imageUrl">
<span class="tag" v-if="item.structureName">{{item.structureName}}</span>
<span class="line-play" @click.stop="goToPage(item)">
<img src="../../images/grey-play.png">
</span>
</div>
<div class="line-name">
{{item.courseName}}
</div>
<div class="line-info">
<span>{{item.publishTime}} | {{item.joinNum}}人已学</span>
<span @click.stop="collectFun(item.favorFlag,item.courseId)" :class="item.favorFlag == 2 ? 'btn collect' : 'btn collected'">
{{item.favorFlag == 2?'收藏':'已收藏'}}
</span>
<!-- <span class='btn collected'>已收藏</span> -->
</div>
</div>
<div class="no-more" v-if="newsList.length == 0">暂无数据</div>
</div>
</div>
<div class="grey-box"></div>
<div class="teach-title plr15">课程教学</div>
<div class="opt-span plr15">
<span class="" @click="sortFun">学习人数
<img src="../../images/sort-d.png" v-if="dir == 2">
<img src="../../images/sort-u.png" v-if="dir == 1">
</span>
</div>
<div class="teach-list plr15">
<div :class="index%2==1?'list-item mr0':'list-item'" v-for="(item,index) in list" @click="goToPage(item)">
<div class="tea-img">
<img v-lazy="item.imageUrl">
<span class="learn-p">{{item.joinNum}}人已学</span>
</div>
<div class="tea-txt">
<!-- <p class="tea-name">{{item.doctorName}}</p> -->
<div class="tea-position">
{{item.courseName}}
</div>
</div>
</div>
<div class="no-more" v-if="list.length == 0">暂无数据</div>
</div>
</div>
</section>
</template>
<script>
import teacherTop from '../../components/teachers/teach-top';
export default {
components:{
teacherTop
},
data(){
return {
list:[],
newsList:[],
dir:2,
doctorId:'',
doctorParm:{
studyCount:0,
followCount:0,
doctor:{
app_image_url:'',
name:'',
title:'',
}
}
}
},
mounted(){
this.doctorId = this.$route.query.id;
this.getBaseData();
this.getNewClass();
this.getCourse();
},
computed:{
},
methods:{
//跳转
goToPage(item){
let itemData={
"title":item.name,
"imageUrl":"",
"appModuleInfo":{
"code":"M200",
"type":4,
"name":"课程介绍页",
"paramFlag":1,
"paramList":[
{
"key":"className",
"value":"com.picahealth.yunque.activitys.courseplaynew.CourseIntroduceActivity###WeexCourseIntroViewController",
"type":4,
"seqNo":1
},
{
"key":"courseId",
"value":`${item.courseId}`,
"type":1,
"seqNo":2
}
]
}
};
let paramList = this.setEventByModuleCode(itemData);
rocNative.dispatchEventByModuleCode({
modeCode: itemData.appModuleInfo.code,
jsonString: paramList
})
},
collectFun(status,id){
status = status == 1 ? 2 : 1;
let _this = this,
parm = {
token:_this.$route.query.userToken,
type:status,
courseId:id,
setEntry: 'headers'
}
_this.POST('contents/favors',parm).then(function(res){
if(res.code === '000000'){
_this.handelData(id,status);
}
})
},
handelData(id,status){
let d = this.newsList;
for(let i=0;i<d.length;i++){
if(id == d[i].courseId){
d[i].favorFlag = status;
}
}
},
sortFun(){
this.dir = this.dir == 2 ? 1 : 2;
this.getCourse();
},
//课程教学
getCourse(){
let _this = this,
para = {
token:_this.$route.query.userToken,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/courseList/'+_this.doctorId+'/orderby/1/dir/'+_this.dir;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.list = res.data || [];
}
})
},
//新课程
getNewClass(){
let _this = this,
para = {
token:_this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/latestCourseList/'+_this.doctorId;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.newsList = res.data || [];
}
})
},
//基础信息
getBaseData(){
let _this = this,
para = {
token:_this.token,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/doctorDetail/'+_this.doctorId;
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.doctorParm = {
followCount:res.data.followCount,
studyCount:res.data.studyCount,
doctor:res.data.doctor
}
}
})
}
}
}
</script>
<style>
body{background: #fff;height: auto;}
</style>
<style lang="scss" scoped>
body{background: #fff}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.tea-detail{
height: px2rem(154px);
position: absolute;
width: 100%;
left: 0;
top:-(px2rem(64px));
z-index: 10;
@include bis('../../images/detaiBg.png');
.head-img{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 100%;
margin: -(px2rem(10px)) auto 0;
background: #D8D8D8;
text-align: center;
img{
width: px2rem(45px);
height: px2rem(45px);
border-radius: 50%;
}
}
.detail-name{
margin-top:px2rem(3px);
line-height: px2rem(20px);
font-size: px2rem(14px);
color:#333;
text-align: center;
}
.detail-intr{
text-align: center;
line-height: px2rem(17px);
height: px2rem(17px);
overflow: hidden;
width: 90%;
margin:0 auto;
font-size: px2rem(12px);
color:#666;
}
.detail-info{
overflow: hidden;
margin-top: px2rem(12px);
.info-item{
width: 50%;
float: left;
text-align: center;
span{
line-height: px2rem(20px);
font-size: px2rem(14px);
color:#333;
}
p{
line-height: px2rem(17px);
font-size: px2rem(12px);
color:#666;
}
}
}
}
.tea-new-title{
font-size: px2rem(18px);
margin: px2rem(15px) 0;
color:#333;
}
.tea-new-line.plr15{padding-left:px2rem(17px);}
.tea-new-line{
width: 100%;
overflow: hidden;
overflow-x: scroll;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline: 0;
-webkit-overflow-scrolling : touch;
height: px2rem(273px);
.item-new-box{
width: px2rem(10000000px);
}
.item-line{
width: px2rem(345px);
padding-bottom: px2rem(23px);
float: left;
margin-right: px2rem(10px);
.line-img{
width: px2rem(345px);
height: px2rem(191px);
position: relative;
.line-play{
position: absolute;
width: px2rem(60px);
height: px2rem(60px);
left:50%;
top:50%;
margin:-(px2rem(30px)) 0 0 -(px2rem(30px));
}
.tag{
display: inline-block;
background: #fff;
border:1px solid #C3DCFB;
position: absolute;
top:px2rem(5px);
left: px2rem(5px);
font-size: px2rem(10px);
line-height: px2rem(16px);
padding: 0 px2rem(10px);
border-radius: px2rem(2px);
color:#4A87D4;
}
img{
width: 100%;
height:100%;
}
}
.line-name{
margin-top: px2rem(10px);
font-size: px2rem(16px);
line-height: px2rem(16px);
width: 100%;
overflow: hidden;
height: px2rem(16px);
color:#333;
}
.line-info{
overflow: hidden;
margin-top: px2rem(10px);
span{
display: inline-block;
font-size: px2rem(12px);
color: #999;
line-height: px2rem(18px);
float: left;
}
.btn{
color:#666;
background: #F7F8F9;
padding: 0 px2rem(5px);
float: right;
margin-right: px2rem(5px);
}
.collected{
color: #F47A48;
background: RGBA(244, 122, 72, 0.04);
}
}
}
}
.grey-box{
width: 100%;
height: px2rem(6px);
background: #F8F8F8;
}
.plr15{
padding-right: px2rem(15px);
padding-left: px2rem(15px);
}
.teach-opt{
padding:px2rem(90px) 0 px2rem(30px) 0;
position: relative;
.teach-title{
font-size: px2rem(18px);
padding-bottom: px2rem(15px);
padding-top: px2rem(15px);
color:#333;
}
.teach-list{
overflow: hidden;
}
.no-more{
text-align: center;
color:#999;
font-size: px2rem(12px);
}
.opt-span{
span{
color:#449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(15px);
line-height: px2rem(15px);
img{
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item{
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0{
margin-right: 0
}
.tea-txt{
padding:px2rem(7px);
}
.tea-img{
width: px2rem(170px);
height: px2rem(96px);
position: relative;
img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
}
.learn-p{
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left:0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
color:#fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name{
color:#333;
font-size: px2rem(14px);
padding: px2rem(7px) 0 px2rem(3px) 0;
}
.tea-position{
height: px2rem(38px);
font-size: px2rem(14px);
line-height: px2rem(19px);
color:#333;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
src/views/teachers/index.vue 已删除 100644 → 0
浏览文件 @ b35e212e
<template>
<section class="font-style">
<teacherTop :isShowCount="isShowCount" :studyCount="studyCount" :followCount="followCount"></teacherTop>
<div class="teach-opt">
<div class="teach-title">讲师名录</div>
<div class="opt-span">
<span class="" @click="sortFun">人气
<img src="../../images/sort-u.png" v-if="dir == 1">
<img src="../../images/sort-d.png" v-if="dir == 2">
</span>
</div>
<div class="teach-list">
<div :class="index%2==1?'list-item mr0':'list-item'" v-for="(item,index) in list" @click="goToDetail(item.doctorId)">
<div class="tea-img" :style="'background:'+item.bgColor">
<img v-lazy="item.doctorImg">
<span class="learn-p">{{item.joinNum}}人已学</span>
</div>
<div class="tea-txt">
<p class="tea-name">{{item.doctorName}}</p>
<div class="tea-position">
{{item.doctorHospital}}
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import teacherTop from '../../components/teachers/teach-top';
export default {
components:{
teacherTop
},
data(){
return {
list:[{},{},{}],
isShowCount:true,
followCount:0,
studyCount:0,
col:1, //0综合，1人气，2资源数，3姓名首字母
dir:2,//1:正序 2：逆序
}
},
mounted(){
this.getData();
},
computed:{
},
methods:{
goToDetail(id){
let _this = this;
this.$router.push({
path: '/teachersDetail',
query:{
id:id
}
})
},
//排序
sortFun(){
this.dir = this.dir == 1 ? 2 : 1;
this.getData()
},
randomBg(d){
for(let i=0;i<d.length;i++){
if(i%4 == 0){
d[i].bgColor = '#EBF6F1'
}else if(i%4 == 1){
d[i].bgColor = '#EDF3FA'
}else if(i%4 == 2){
d[i].bgColor = '#F0F0FA'
}else if(i%4 == 3){
d[i].bgColor = '#F6EFE6'
}
}
/// console.log(d);
},
getData(){
let _this = this,
para = {
token:_this.$route.query.userToken,
setEntry: 'headers'
}
let url = '/contents/courseDoctor/getAllTeacher/orderby/'+_this.col+'/dir/'+_this.dir
this.GET(url, para).then(res => {
if(res.code == '000000'){
_this.list = res.data.teacherList || [];
_this.followCount = res.data.followCount || 0;
_this.studyCount = res.data.studyCount || 0;
if(_this.list.length>0){
_this.randomBg(_this.list);
}
}
})
}
}
}
</script>
<style>
body{background: #fff}
</style>
<style lang="scss" scoped>
body{background: #fff}
@import '../../style/mixin';
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
}
.font-style {
width: 100%;
overflow: hidden;
@include sc(0.6rem, #666);
}
.teach-opt{
padding:px2rem(26px) px2rem(15px) px2rem(15px) px2rem(15px);
.teach-title{
font-size: px2rem(18px);
padding-bottom: px2rem(15px);
color:#333;
}
.teach-list{
overflow: hidden;
}
.opt-span{
span{
color:#449284;
font-size: px2rem(13px);
display: inline-block;
vertical-align: middle;
height: px2rem(15px);
line-height: px2rem(15px);
img{
display: inline-block;
width: px2rem(15px);
height: px2rem(15px);
vertical-align: middle;
}
}
}
.list-item{
width: px2rem(170px);
margin-right: px2rem(5px);
margin-top: px2rem(15px);
float: left;
box-shadow: 0 px2rem(4px) px2rem(6px) RGBA(0, 0, 0, 0.06);
}
.mr0{
margin-right: 0
}
.tea-txt{
padding:px2rem(7px);
}
.tea-img{
width: px2rem(170px);
height: px2rem(83px);
position: relative;
img{
width: 100%;
height: 100%;
display: block;
border-radius: px2rem(3px) px2rem(3px) 0 0 ;
}
.learn-p{
padding-left: px2rem(5px);
position: absolute;
width: 100%;
left:0;
bottom: 0;
background: #333;
background: -webkit-linear-gradient(left, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -o-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: -moz-linear-gradient(right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
background: linear-gradient(to right, RGBA(0, 0, 0, 0.2),RGBA(0, 0, 0, 0));
color:#fff;
font-size: px2rem(11px);
height: px2rem(20px);
line-height: px2rem(20px);
}
}
.tea-name{
color:#333;
font-size: px2rem(14px);
padding: px2rem(7px) 0 px2rem(3px) 0;
}
.tea-position{
height: px2rem(30px);
font-size: px2rem(12px);
line-height: px2rem(15px);
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
}
}
.home-header {
height: px2rem(185px);
@include bis('../../images/headerTop.png');
.logo_img{
height: px2rem(85px);
width: px2rem(345px);
text-align: center;
}
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或