Skip to content

P
pica-admin-consultation
提交 964c25c9 编写于 作者: 杨广俊's avatar 杨广俊
浏览文件
操作

排序组件

上级 63d49d32
隐藏空白字符变更
内嵌 并排
正在显示 包含 405 行增加 和 83 行删除
src/componentsn/business/yqy-hot-lecturer.vue
浏览文件 @ 964c25c9
......@@ -11,7 +11,7 @@
</span>
</div>
<span class="disp-blc lect-ks">{{item.department}}</span>
<span class="disp-blc study-num">{{item.joinNum}}人已学</span>
<span class="disp-blc study-num">{{item.joinNum | formatNumber}}人已学</span>
</div>
</div>
</div>
......
src/componentsn/business/yqy-lecturer-order.ok-0115.vue 0 → 100644
浏览文件 @ 964c25c9
<template>
<section>
<!-- <article class="group-title-title">
<span class="group-title-title-main">{{groupTitle}}</span><span class="group-title-title-sub">专业领域的资深专家</span>
</article> -->
<article class="group-title">
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 1}">按名首字母</span>
<img class="first-name" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 1"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 2}">最新课程</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 2"/>
</div>
<div @click="order(3)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 3}">资源数</span>
<img class="course-num" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 3"/>
</div>
<div @click="order(4)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 4}">热门</span>
<img class="hot-degree" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 4"/>
</div>
</article>
</article>
</section>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1
}
},
props: {
groupTitle: {
type: String,
default: '课程'
},
isShowNum: {
type: Boolean,
default: true
},
groupNum: {
type: String,
default: "0"
},
showTitle: {
type: Boolean,
default: true
},
showOrder: {
type: Boolean,
default: true
}
},
computed: {
...mapGetters({
orderNum: 'orderNum'
})
},
watch: {
orderNum(val) {
this.showOrderIndex = 1
}
},
methods: {
toggle() {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
this.showOrderIndex = index
this.$emit('order', index)
},
// resetShowOrderIndex(){
// this.showOrderIndex = 1
// }
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
margin-left: px2rem(15px);
display: flex;
flex-direction: row;
&-order {
display: flex;
flex-direction: row;
padding: px2rem(10px) 0 px2rem(10px);
font-size: px2rem(13px);
&-item {
position: relative;
span {
margin-right: px2rem(30px);
}
img {
position: absolute;
top: px2rem(2px);
left: px2rem(51px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.first-name {
left: px2rem(63px);
}
.course-num {
left: px2rem(37px);
}
.hot-degree {
left: px2rem(25px);
}
.active {
color: #449284;
}
&-title {
padding: 0 px2rem(15px);
&-main {
margin-right: px2rem(6px);
font-size: px2rem(18px);
font-weight: 500;
color: #28344C;
}
&-sub {
font-size: px2rem(15px);
font-weight: 400;
color: #999;
}
}
}
</style>
src/componentsn/business/yqy-lecturer-order.vue
浏览文件 @ 964c25c9
......@@ -5,21 +5,33 @@
</article> -->
<article class="group-title">
<article v-show="showOrder" class="group-title-order">
<div @click="order(1)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 1}">按名首字母</span>
<img class="first-name" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 1"/>
<div @click="order(1, 'isLetterOrderDown', 'doctorFirstNameChar')"
:class="{'active': showOrderIndex === 1}" class="group-title-order-item">
<span>按名首字母</span>
<img class="first-name default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 1"/>
<img class="first-name" src="../../images/lecturer/sort-down.png" v-show="isLetterOrderDown && showOrderIndex === 1"/>
<img class="first-name" src="../../images/lecturer/sort-up.png" v-show="!isLetterOrderDown && showOrderIndex === 1"/>
</div>
<div @click="order(2)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 2}">最新课程</span>
<img src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 2"/>
<div @click="order(2, 'isNewCourseOrderDown', 'newTime')"
:class="{'active': showOrderIndex === 2}" class="group-title-order-item">
<span >最新课程</span>
<img class="new-course-default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 2"/>
<img src="../../images/lecturer/sort-down.png" v-show="isNewCourseOrderDown && showOrderIndex === 2"/>
<img src="../../images/lecturer/sort-up.png" v-show="!isNewCourseOrderDown && showOrderIndex === 2"/>
</div>
<div @click="order(3)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 3}">资源数</span>
<img class="course-num" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 3"/>
<div @click="order(3, 'isResourceNumOrderDown', 'resourceNum')"
:class="{'active': showOrderIndex === 3}" class="group-title-order-item">
<span>资源数</span>
<img class="course-num default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 3"/>
<img class="course-num" src="../../images/lecturer/sort-down.png" v-show="isResourceNumOrderDown && showOrderIndex === 3"/>
<img class="course-num" src="../../images/lecturer/sort-up.png" v-show="!isResourceNumOrderDown && showOrderIndex === 3"/>
</div>
<div @click="order(4)" class="group-title-order-item">
<span :class="{'active': showOrderIndex === 4}">热门</span>
<img class="hot-degree" src="../../images/sousuo/sort-down.png" v-show="showOrderIndex === 4"/>
<div @click="order(4, 'isHotOrderDown', 'totalNum')"
:class="{'active': showOrderIndex === 4}" class="group-title-order-item">
<span>热门</span>
<img class="hot-degree default" src="../../images/lecturer/sort-default.png" v-show="showOrderIndex !== 4"/>
<img class="hot-degree" src="../../images/lecturer/sort-down.png" v-show="isHotOrderDown && showOrderIndex === 4"/>
<img class="hot-degree" src="../../images/lecturer/sort-up.png" v-show="!isHotOrderDown && showOrderIndex === 4"/>
</div>
</article>
</article>
......@@ -31,7 +43,11 @@ import { mapGetters } from 'vuex'
export default {
data() {
return {
showOrderIndex: 1
showOrderIndex: 1,
isLetterOrderDown: true,
isNewCourseOrderDown: true,
isResourceNumOrderDown: true,
isHotOrderDown: true,
}
},
props: {
......@@ -71,9 +87,11 @@ export default {
this.showTitle = !showTitle
this.showOrder = !showOrder
},
order(index) {
order(index, orderType, orderName) {
console.log(index, orderType, orderName)
this.showOrderIndex = index
this.$emit('order', index)
this[orderType] = !this[orderType]
this.$emit('order', orderName, this[orderType])
},
// resetShowOrderIndex(){
// this.showOrderIndex = 1
......@@ -95,29 +113,65 @@ export default {
font-size: px2rem(13px);
&-item {
position: relative;
span {
margin-right: px2rem(30px);
}
display: block;
padding: px2rem(2px) px2rem(20px) px2rem(2px) px2rem(10px);
margin-right: px2rem(10px);
border: 1px solid #F6F6F6;
border-radius: px2rem(25px);
background: #F6F6F6;
// border: 1px solid #449284;
// span {
// // margin-right: px2rem(30px);
// }
img {
position: absolute;
top: px2rem(2px);
left: px2rem(51px);
top: px2rem(4px);
left: px2rem(63px);
height: px2rem(15px);
width: px2rem(15px);
}
}
}
.first-name {
left: px2rem(63px);
left: px2rem(76px);
}
.first-name.default {
top: px2rem(6px);
left: px2rem(78px);
height: px2rem(10px);
width: px2rem(10px);
}
.new-course-default {
top: px2rem(6px);
left: px2rem(65px);
height: px2rem(10px);
width: px2rem(10px);
}
.course-num {
left: px2rem(37px);
left: px2rem(50px);
}
.course-num.default {
top: px2rem(6px);
left: px2rem(52px);
height: px2rem(10px);
width: px2rem(10px);
}
.hot-degree {
left: px2rem(25px);
left: px2rem(37px);
}
.hot-degree.default {
top: px2rem(6px);
left: px2rem(39px);
height: px2rem(10px);
width: px2rem(10px);
}
.active {
color: #449284;
background:rgba(68,146,132,0.06);
border: 1px solid #449284;
span {
color: #449284;
}
}
&-title {
padding: 0 px2rem(15px);
......
src/componentsn/business/yqy-lecturer-select-content.vue
浏览文件 @ 964c25c9
......@@ -190,7 +190,7 @@ export default {
para = {
provinceId: this.provinceId,
cityId: this.cityId,
countyId: 0,
countyId: this.countyId,
levelGrade: this.levelGrade,
departmentId: this.departmentId,
setEntry: 'headers'
......@@ -198,9 +198,13 @@ export default {
this.GET('contents/courseDoctor/v1/getAllTeacher', para).then(res => {
if(res.code == '000000'){
// _this.parmDataDoctList = res.data && res.data.list || []
let selTitle = this.selectedAreaSubName || this.selectedAreaName
if (selTitle === '全部'){
selTitle = this.selectedAreaName
}
this.$emit('selectedData',
res.data && res.data.list || [],
this.selectedAreaSubName || this.selectedAreaName,
selTitle,
this.selectedLevelName, this.selectedDepartName)
}
......@@ -226,13 +230,12 @@ export default {
orginAreaList.forEach((element, index) => {
if( index === 0 ){
handleList.push({id: element.id, name: element.name,
cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: ''}, element.cities, 42, false)})
cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: element.id}, element.cities, 42, false)})
} else {
handleList.push({id: element.id, name: element.name,
cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: ''}, element.cities, 41)})
cities: this.decorateCitiesData({id: 0, name: '全部', provinceId: element.id}, element.cities, 41)})
}
});
console.log(handleList)
handleList.unshift({id:'0',name:'全国',cities: this.decorateCitiesData({id: 0, name: '全国', provinceId: 0}, [], 41)})
handleList.push({id:'',name:'',cities: []})
handleList.push({id:'',name:'',cities: []})
......@@ -299,8 +302,15 @@ export default {
if(item.name){
this.selectedAreaSubIndex = index
this.selectedAreaSubName = item.name
this.cityId = item.id
this.provinceId = item.provinceId
if(item.isMunicipality){
this.cityId = item.cityId
this.countyId = item.id
this.provinceId = item.provinceId
} else {
this.cityId = item.id
this.countyId = 0
this.provinceId = item.provinceId
}
this.closeSelectedPage()
this.getYqDoctorDataByCD()
}
......@@ -419,9 +429,6 @@ export default {
}
.font-style {
@include sc(0.6rem, #666);
}
.top-evaluat{
}
@keyframes myPullDown{
from {padding-top: 0;}
......
src/componentsn/business/yqy-lecturer-select.ok-0115.vue 0 → 100644
浏览文件 @ 964c25c9
<template>
<section>
<article class="group-title">
<section class="group-title-order">
<div @click="selectedType(1)" class="group-title-order-item">
<span>{{selectedAreaName}}</span><img src="../../images/lecturer/select-down.png"/>
</div>
<div @click="selectedType(2)" class="group-title-order-item">
<span>{{selectedLevelName}}</span><img src="../../images/lecturer/select-down.png"/>
</div>
<div @click="selectedType(3)" class="group-title-order-item">
<span>{{selectedDepartName}}</span><img src="../../images/lecturer/select-down.png"/>
</div>
</section>
</article>
</section>
</template>
<script>
export default {
data() {
return {
selectedTypeIndex: 1
}
},
props: {
selectedAreaName: {
type: String,
default: '全国'
},
selectedLevelName: {
type: String,
default: '全部等级'
},
selectedDepartName: {
type: String,
default: '全部科室'
}
},
computed: {
// ...mapGetters({
// // orderNum: 'orderNum'
// })
},
watch: {
// orderNum(val) {
// this.showOrderIndex = 1
// }
},
methods: {
selectedType(index) {
this.selectedTypeIndex = index
this.$emit('selectedType', index)
},
}
}
</script>
<style lang="scss" scoped>
@import '../../style/mixin.scss';
.group-title {
display: flex;
flex-direction: row;
margin: px2rem(6px) px2rem(25px) px2rem(2px);
&-order {
display: flex;
flex-direction: row;
width: px2rem(325px);
justify-content: space-between;
font-size: px2rem(13px);
&-item {
span {
font-size: px2rem(15px);
color: #333;
}
img {
position: relative;
top: px2rem(1px);
left: px2rem(1px);
height: px2rem(11px);
width: px2rem(11px);
}
}
}
}
.active {
color: #449284;
}
</style>
src/componentsn/business/yqy-teacher-list.vue
浏览文件 @ 964c25c9
<template>
<section>
<YqyLecturerOrder groupTitle="全部讲师" :groupNum="groupNum" :showTitle="showTitle" :showOrder="showOrder" @order="orderAction"/>
<div class="font-style">
<div class="teach-opt">
<div class="teach-list">
......@@ -9,8 +8,8 @@
@click="goToPage(item)">
<div class="tea-img" :style="'background:'+ item.bgColor">
<img :src="item.doctorAvatarImg">
<span class="learn-p">{{item.totalNum}}人已学</span>
<span class="learn-p-cnum">课程：共{{item.resourceNum}}门</span>
<span class="learn-p">{{item.totalNum | formatNumber}}人已学</span>
<span class="learn-p-cnum">课程: 共{{item.resourceNum}}门</span>
<!-- <span class="learn-p">{{item.joinNum | yLocalString}}人已学</span> -->
</div>
<div class="tea-txt">
......@@ -23,6 +22,10 @@
</div>
</div>
</div>
<div class="no-content" v-show="!cParamData.length">
<img class="no-content-img" src="../../images/lecturer/no-content.png" alt=" ">
<span class="no-content-desc">暂无相关内容</span>
</div>
</div>
</div>
</div>
......@@ -33,7 +36,6 @@
import { mapGetters } from 'vuex'
import { jumpWebPageUrl } from '@/utils/index'
// import GroupTitle from '@/componentsn/business/group-title';
import YqyLecturerOrder from '@/componentsn/business/yqy-lecturer-order';
export default {
data() {
......@@ -56,32 +58,19 @@ export default {
parmData: {
type: Array,
default: () => []
},
groupNum: {
type: String,
default: '0'
},
showTitle: {
type: Boolean,
default: false
},
showOrder: {
type: Boolean,
default: true
}
},
mounted() {
// window.__refresh = function (parm) {
// _this.getData();
// }
window.addEventListener('scroll', this.handleScroll)
// window.addEventListener('scroll', this.handleScroll)
},
computed: {
...mapGetters({
cSearchText: 'cSearchText',
userInfo: 'userInfo',
orderNum: 'orderNum'
}),
cParamData() {
if (this.parmData && this.parmData.length) {
......@@ -92,11 +81,6 @@ export default {
}
},
watch: {
orderNum(val) {
if (this.showOrder) {
this.orderAction(1, true)
}
}
},
methods: {
//跳转
......@@ -153,20 +137,6 @@ export default {
}
return d
},
orderAction(orderIndex, notBP) {
// if(!notBP) {
// this.pageBurialPoin({
// ...m_search_result_lecturer_order,
// labelValue: orderIndex,
// createdTime: new Date().getTime(),
// })
// }
// this.searchForOrder('3', this.cSearchText, orderIndex, this.groupNum, this.parmData).then( param => {
// this.list = param
// })
}
}
}
</script>
......@@ -182,6 +152,23 @@ body {
}
@import '../../style/mixin';
.no-content {
display: flex;
flex-direction: column;
margin: px2rem(40px) 0 px2rem(50px);
align-items: center;
img {
width: px2rem(125px);
height: px2rem(125px);
}
span {
height: px2rem(21px);
line-height: px2rem(21px);
font-size: px2rem(15px);
font-weight: 400;
color:rgba(153,153,153,1);
}
}
.mint-header {
background-color: rgba($color: #000000, $alpha: 0)
......@@ -257,7 +244,7 @@ body {
}
.learn-p {
padding-left: px2rem(5px);
padding-left: px2rem(6px);
position: absolute;
width: 100%;
left: 0;
......@@ -271,7 +258,7 @@ body {
line-height: px2rem(22px);
&-cnum {
position: absolute;
right: px2rem(10px);
right: px2rem(8px);
bottom: 0;
color: #fff;
font-size: px2rem(11px);
......
src/main.js
浏览文件 @ 964c25c9
......@@ -24,8 +24,16 @@ Vue.use(VueLazyload, {
// lazyComponent: true
})
Vue.filter('filterName2', function (item) {
return '222'
Vue.filter('formatNumber', function(num, precision, separator) {
var parts;
if (!isNaN(parseFloat(num)) && isFinite(num)) {
num = Number(num);
num = (typeof precision !== 'undefined' ? num.toFixed(precision) : num).toString();
parts = num.split('.');
parts[0] = parts[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + (separator || ','));
return parts.join('.');
}
return '';
})
// 可调试
......
src/utils/filter.js
浏览文件 @ 964c25c9
......@@ -4,6 +4,18 @@ const vueFilter = {
// 通用状态过滤器
formatStatus: function(value) {
return !value ? '正常' : '停用'
},
formatNumber: function(num, precision, separator) {
var parts;
if (!isNaN(parseFloat(num)) && isFinite(num)) {
num = Number(num);
num = (typeof precision !== 'undefined' ? num.toFixed(precision) : num).toString();
parts = num.split('.');
parts[0] = parts[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1' + (separator || ','));
return parts.join('.');
}
return '';
}
}
......
src/views/index.vue
浏览文件 @ 964c25c9
......@@ -16,13 +16,10 @@
<!-- 热门讲师 -->
<YqyHotLecturer />
<!-- 全部讲师标题 -->
<!-- 讲师标题 -->
<YqyLecturerTitle/>
<!-- 全部讲师选择标题 -->
<!-- <YqyLecturerSelect
@selectedType="selectedTypeFromTitle"
/> -->
<!-- 讲师选择标题 -->
<YqyLecturerSelect
@selectedType="selectedTypeFromTitle"
:selectedAreaName="selectedTitleTitle"
......@@ -30,9 +27,14 @@
:selectedDepartName="selectedDepartName"
/>
<!-- 全部讲师列表 -->
<!-- 讲师排序 -->
<YqyLecturerOrder groupTitle="全部讲师" @order="orderAction"/>
<!-- 讲师列表 -->
<YqyTeacherList :parmData="parmDataDoctList"/>
<YqyLecturerSelectContent
<!-- 讲师选择组件 - 弹框 -->
<YqyLecturerSelectContent
ref="lecturerSelContRef"
:isShowSelectionB="showSelectedPage"
@selectedData="selectedLecturerList"
......@@ -51,6 +53,7 @@ import BackTop from '@/componentsn/business/backTop';
import YqyHomeHeader from '@/componentsn/business/yqy-home-header';
import YqyLecturerTitle from '@/componentsn/business/yqy-lecturer-title';
import YqyLecturerSelect from '@/componentsn/business/yqy-lecturer-select';
import YqyLecturerOrder from '@/componentsn/business/yqy-lecturer-order';
import YqyLecturerSelectContent from '@/componentsn/business/yqy-lecturer-select-content';
import YqyHotLecturer from '@/componentsn/business/yqy-hot-lecturer';
import YqyTeacherList from '@/componentsn/business/yqy-teacher-list'
......@@ -82,7 +85,7 @@ export default {
statusBarHeight: 0,
userMobile: '',
isFailSwiper: 1,
selectedTitleTitle: '',
selectedTitleTitle: '全国',
selectedAreaName: '全国',
selectedAreaSubName: '',
selectedLevelName: '全部等级',
......@@ -96,6 +99,7 @@ export default {
YqyHomeHeader,
YqyLecturerTitle,
YqyLecturerSelect,
YqyLecturerOrder,
YqyLecturerSelectContent,
YqyHotLecturer,
YqyTeacherList,
......@@ -151,6 +155,29 @@ export default {
},
methods: {
// 排序
orderAction(orderName, isSortUp) {
let orderType = isSortUp ? 1 : -1
// sortLecturerData()
let orderData = this.parmDataDoctList.slice()
console.log('this.orderData', orderData)
orderData.sort((a, b)=> {
if (orderName === 'doctorFirstNameChar') {
return (a[orderName].charCodeAt(0) - b[orderName].charCodeAt(0)) * orderType
} else if(orderName === 'newTime') {
if(isSortUp) {
return ((new Date(a[orderName]).getTime())/1000 > (new Date(b[orderName]).getTime())/1000) ? 1 : -1
} else {
return ((new Date(a[orderName]).getTime())/1000 < (new Date(b[orderName]).getTime())/1000) ? 1 : -1
}
} else {
return (a[orderName] - b[orderName]) * orderType
}
})
this.parmDataDoctList = orderData
},
// 选择器组件回调
selectedLecturerList(paramList, selectedTitle, selectedLevelName, selectedDepartName) {
this.parmDataDoctList = paramList
this.selectedTitleTitle = selectedTitle
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或