Skip to content

V
VS_OUTSOURCE
Commit 7110ee17 authored by fangshupeng's avatar fangshupeng
Browse files
Options

移动端页面功能前端完善

parent cd16077d
Hide whitespace changes
Inline Side-by-side
Showing with 1558 additions and 63 deletions
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/DocumentDetail.vue 0 → 100644
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div></div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'DocumentDetail',
components: {
VHeader: () => import('@/common/header/VHeader')
},
data () {
return {
title: '文档详情'
}
},
methods: {
},
created () {
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
}
}
</script>
<style lang="less" scoped>
.content {
background: white;
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/FavorShare.vue
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<tabs :menus="menus" :position="'bottom'"></tabs>
<tabs :menus="tabsMenus" :mode="'2'" :position="'bottom'"></tabs>
<search-fold></search-fold>
<file-list :mode="'favorShare'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile"></file-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div>
......@@ -16,27 +16,72 @@ import BScroll from 'better-scroll'
export default {
name: 'FavorShare',
components: {
VHeader: () => import('@/common/header/VHeader'),
Tabs: () => import('@/common/tab/Tabs')
Tabs: () => import('@/common/tab/Tabs'),
TabBar: () => import('@/common/tabBar/TabBar'),
FileList: () => import('./components/FileList'),
SearchFold: () => import('./components/SearchFold')
},
data () {
return {
title: 'Template',
menus: [
tabsMenus: [
{
label: '我上次的',
path: '/education/myResources/index',
belongTo: '/education/myResources/index'
label: '我上传的',
path: '/education/myResources/myUpload',
belongTo: 'myUpload'
},
{
label: '收藏分享',
path: '/education/myResources/favorShare',
belongTo: '/education/myResources/favorShare'
belongTo: 'favorShare'
}
],
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'favorShare'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
fileList: [
{
name: '我收藏的.docx',
icon: 'document',
fileType: 'myFavor',
showFunBtn: false
},
{
name: '我分享的.docx',
icon: 'document',
fileType: 'myShare',
showFunBtn: false
},
{
name: '分享给我的.docx',
icon: 'document',
fileType: 'shareToMe',
showFunBtn: false
}
]
}
},
methods: {
toggleShowBtn (item) {
/* 显示功能按钮 */
item.showFunBtn = !item.showFunBtn
},
openFile (item) {
/* 打开文档 */
this.$router.push({
path: '/education/documentDetail'
})
}
},
created () {
},
......@@ -51,4 +96,7 @@ export default {
</script>
<style lang="less" scoped>
.content {
background: white;
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/Index.vue
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<tabs :menus="menus" :position="'bottom'"></tabs>
<searchs></searchs>
<group title="个人文件夹（2）">
<!-- <group-title slot="title">I'm a title<span style="float:right;">right</span></group-title> -->
<cell title="教案文件夹">
<div slot="icon">11</div>
<div slot="after-title">
常规文件夹 共1000个文档
</div>
</cell>
<cell title="cell"></cell>
</group>
<tabs :menus="tabsMenus" :mode="'2'" :position="'bottom'"></tabs>
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
:list-title="folderListItem.listTitle"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div>
......@@ -24,36 +21,118 @@
<script>
import BScroll from 'better-scroll'
import { Group, Cell } from 'vux'
export default {
name: 'Index',
components: {
VHeader: () => import('@/common/header/VHeader'),
Tabs: () => import('@/common/tab/Tabs'),
TabBar: () => import('@/common/tabBar/TabBar'),
Searchs: () => import('./components/Searchs'),
Group,
Cell
FolderList: () => import('./components/FolderList')
},
data () {
return {
title: 'Template',
menus: [
tabsMenus: [
{
label: '我上次的',
path: '/education/myResources/index',
belongTo: '/education/myResources/index'
label: '我上传的',
path: '/education/myResources/myUpload',
belongTo: 'myUpload'
},
{
label: '收藏分享',
path: '/education/myResources/favorShare',
belongTo: '/education/myResources/favorShare'
belongTo: 'favorShare'
}
]
],
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUpload'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
currentList: {},
listData: {
firstLevel: [
{
listTitle: '个人文件夹 (2)',
list: [
{
title: '乱七八糟文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '不三不四文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
},
{
listTitle: '学校文件夹 (20)',
list: [
{
title: '教案文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '工作计划文件夹',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '总结',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
}
]
}
}
},
methods: {
},
created () {
intoFolder (item) {
/* 点击文件夹进入下一级 */
if (item.isFolder) {
let routerName
let routerPath
if (item.nextIsFolder) {
routerPath = '/education/myResources/myUpload/folderLevel'
routerName = 'myUploadFolderLevel'
} else {
routerPath = '/education/myResources/myUpload/fileLevel'
routerName = 'myUploadFileLevel'
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
}
})
}
}
},
mounted () {
this.$nextTick(() => {
......@@ -61,6 +140,7 @@ export default {
click: true
})
})
this.currentList = this.listData.firstLevel
}
}
</script>
......@@ -68,6 +148,8 @@ export default {
<style lang="less" scoped>
.content {
background: white;
.search-ctn {
padding: 10px 15px;
}
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/MyUploadFileLevel.vue 0 → 100644
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<search-fold></search-fold>
<file-list :mode="'myUpload'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'MyUploadFileLevel',
components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
FileList: () => import('./components/FileList'),
SearchFold: () => import('./components/SearchFold')
},
data () {
return {
title: '文档列表',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFileLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
fileList: [
{
name: '德育负责人操作手册.docx',
icon: 'document',
showFunBtn: false
},
{
name: '德育负责人账号.docx',
icon: 'document',
showFunBtn: false
},
{
name: '功能模板说明文档.docx',
icon: 'document',
showFunBtn: false
}
]
}
},
methods: {
toggleShowBtn (item) {
/* 显示功能按钮 */
item.showFunBtn = !item.showFunBtn
},
openFile (item) {
/* 打开文档 */
this.$router.push({
path: '/education/documentDetail'
})
},
shareFile (item) {
/* 分享文档 */
this.$router.push({
path: '/education/share'
})
}
},
created () {
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) {
this.title = this.$route.query.title
}
}
}
</script>
<style lang="less" scoped>
.content {
background: white;
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/MyUploadFolderLevel.vue 0 → 100644
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'MyUploadFolderLevel',
components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
Searchs: () => import('./components/Searchs'),
FolderList: () => import('./components/FolderList')
},
data () {
return {
title: '文件夹名称',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFolderLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
currentList: {},
listData: {
secondLevel: [
{
list: [
{
title: '第二级文件夹1',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'thirdLevel'
},
{
title: '第二级文件夹2',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'thirdLevel'
},
{
title: '第二级文件夹3',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'thirdLevel'
}
]
}
],
thirdLevel: [
{
list: [
{
title: '第三级文件夹1',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: false,
folderData: 'fileLevel'
}
]
}
]
}
}
},
methods: {
intoFolder (item) {
/* 点击文件夹进入下一级 */
if (item.isFolder) {
let routerName
let routerPath
if (item.nextIsFolder) {
routerPath = '/education/myResources/myUpload/folderLevel'
routerName = 'myUploadFolderLevel'
} else {
routerPath = '/education/myResources/myUpload/fileLevel'
routerName = 'myUploadFileLevel'
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
}
})
}
}
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) {
this.title = this.$route.query.title
this.currentList = this.listData[this.$route.query.folder]
}
},
watch: {
$route (val) {
if (val.query) {
this.title = val.query.title
this.currentList = this.listData[val.query.folder]
}
}
}
}
</script>
<style lang="less" scoped>
.content {
background: white;
.search-ctn {
padding: 15px;
}
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/Share.vue 0 → 100644
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<x-button class="add-btn" plain @click.native="teacherSelectorShow = true"><i class="iconfont">&#xe862;</i> 添加分享教师</x-button>
<div class="share-header">
<span class="dashed"></span>
<span class="person-count">已分享名单(100人)</span>
<span class="dashed"></span>
</div>
<div class="search-ctn">
<searchs></searchs>
</div>
<div class="share-list">
<x-button class="person" v-for="(person, index) of 10" :key="index" mini>
<div class="name-ctn">
<span class="name">张飞</span>
<i class="iconfont">&#xe827;</i>
</div>
</x-button>
</div>
</div>
</div>
<teacher-selector :show="teacherSelectorShow" @handleSubmit="teacherSelectorShow = false"></teacher-selector>
</div>
</template>
<script>
import { XButton } from 'vux'
import BScroll from 'better-scroll'
export default {
name: 'Share',
components: {
VHeader: () => import('@/common/header/VHeader'),
TeacherSelector: () => import('@/common/selector/TeacherSelector'),
Searchs: () => import('./components/Searchs'),
XButton
},
data () {
return {
title: '分享文档',
teacherSelectorShow: false
}
},
methods: {
},
created () {
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
}
}
</script>
<style lang="less" scoped>
.content {
padding: 0 20px;
background: white;
/deep/ .add-btn {
margin-top: 20px;
margin-bottom: 15px;
border-style: dashed;
color: #1890FF;
border-color: #1890FF;
font-size: 18px;
}
.share-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 25px;
.dashed {
flex: 1;
border-top: 3px dashed #AAAAAA;
}
.person-count {
padding: 0 10px;
font-size: 18px;
color: #7F7F7F;
}
}
.search-ctn {
margin-top: 15px;
}
/deep/ .share-list {
margin-top: 25px;
.person {
margin: 18px 0;
width: 25%;
height: 45px;
margin-right: 8%;
background: #F1F5F8;
&:after{
border: none;
}
&:first-child {
margin-top: 0;
}
&:active {
background: rgb(228, 228, 228);
}
.name-ctn {
display: flex;
justify-content: space-between;
align-items: center;
.name {
padding-left: 5px;
padding-top: 2px;
font-size: 18px;
}
.iconfont {
font-size: 20px;
margin-right: -5px;
}
}
}
}
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/FileList.vue 0 → 100644
View file @ 7110ee17
<template>
<div>
<div v-if="mode === 'favorShare'" class="radio-ctn">
<div class="radio-item" v-for="(radioItem, index) of radioOption" :key="index">
<label :class="{'radio-active': radioItem.value === radioValue}" class="radio-label" :for="radioItem.value">{{ radioItem.label }}</label>
<input type="radio" v-show="false" name="favor" v-model="radioValue" :id="radioItem.value" :value="radioItem.value">
</div>
<!-- <span class="radio-item">我收藏的</span>
<span class="radio-item">我分享的</span>
<span class="radio-item">分享给我的</span> -->
</div>
<group class="cellgroup-ctn">
<cell v-show="mode !== 'favorShare' || radioValue === 'all' || item.fileType === radioValue" v-for="(item, index) of list" :key="index" :title="item.name" @click.native="showBtns(item)">
<i slot="icon" class="iconfont">&#xe890;</i>
<div slot="after-title" class="after-title-ctn">
<p v-if="mode === 'favorShare'" class="document-descript">某某某 2020-08-13 12:00</p>
<div v-show="item.showFunBtn" class="btns-ctn" @click.stop>
<span class="btn-item" @click="handleOpen(item)">打开</span>
<span class="btn-item">下载</span>
<span class="btn-item" v-if="mode === 'myUpload'" @click="renameDialog = true">重命名</span>
<span class="btn-item" v-if="mode === 'myUpload'" @click="handleShare(item)">分享</span>
<span class="btn-item" style="color:#D9001B" v-if="mode === 'myUpload' || (mode === 'favorShare' && item.fileType === 'shareToMe')" @click="deleteDialog = true">删除</span>
<span class="btn-item" style="color:#D9001B" v-if="mode === 'favorShare' && item.fileType === 'myFavor'">取消收藏</span>
<span class="btn-item" style="color:#D9001B" v-if="mode === 'favorShare' && item.fileType === 'myShare'">取消分享</span>
</div>
</div>
</cell>
</group>
<!-- 重命名弹窗 -->
<div v-transfer-dom>
<x-dialog v-model="renameDialog" hide-on-blur :dialog-style="{'max-width': '300px', width: '80%'}">
<div class="rename-ctn">
<div class="headers">
<span>重命名</span>
<span @click="renameDialog = false"><i slot="icon" class="iconfont">&#xe827;</i></span>
</div>
<x-input class="rename-input" v-model="renameValue" placeholder="请输入名称..."></x-input>
<div class="btn-ctn">
<x-button class="reset" mini plain @click.native="renameDialog = false">取消</x-button>
<x-button class="inquire" mini @click.native="renameDialog = false">确定</x-button>
</div>
</div>
</x-dialog>
</div>
<!-- 删除确认弹窗 -->
<div v-transfer-dom>
<x-dialog v-model="deleteDialog" hide-on-blur :dialog-style="{'max-width': '300px', width: '80%'}">
<div class="delete-ctn">
<div class="headers">
<span>删除确认</span>
<span @click="deleteDialog = false"><i slot="icon" class="iconfont">&#xe827;</i></span>
</div>
<p class="tips">删除后不可恢复，确认要删除此文档吗</p>
<div class="btn-ctn">
<x-button class="reset" mini plain @click.native="deleteDialog = false">取消</x-button>
<x-button class="inquire" mini @click.native="deleteDialog = false">确定</x-button>
</div>
</div>
</x-dialog>
</div>
</div>
</template>
<script>
import { Group, Cell, XInput, XDialog, XButton, TransferDomDirective as TransferDom } from 'vux'
export default {
name: 'FileList',
directives: {
TransferDom
},
props: {
mode: { // myUpload：我上传页面，favorShare：收藏分享页面，schoolResources：学校资源库
type: String,
default: 'myUpload'
},
list: {
type: Array,
default: () => {
return []
}
}
},
components: {
Group,
Cell,
XInput,
XButton,
XDialog
},
data () {
return {
radioValue: 'all', // 类型框的值 (all: 全部，myFavor：我收藏的，myShare：我分享的，shareToMe：分享给我的)
radioOption: [
{
label: '全部',
value: 'all'
},
{
label: '我收藏的',
value: 'myFavor'
},
{
label: '我分享的',
value: 'myShare'
},
{
label: '分享给我的',
value: 'shareToMe'
}
],
renameDialog: false,
renameValue: '',
deleteDialog: false
}
},
methods: {
showBtns (item) {
this.$emit('handleClickItem', item)
},
handleOpen (item) {
/* 打开文档 */
this.$emit('handleOpen', item)
},
handleShare (item) {
/* 分享文档 */
this.$emit('handleShare', item)
}
},
mounted () {
}
}
</script>
<style lang="less" scoped>
.radio-ctn {
padding: 20px;
display: flex;
.radio-item {
margin-right: 10px;
.radio-label {
display: inline-block;
height: 35px;
line-height: 35px;
padding: 0 15px;
border-radius: 30px;
background: #F2F2F2;
color: #333333;
text-align: center;
}
.radio-active {
background: #1890FF !important;
color: white !important;
}
}
}
/deep/ .cellgroup-ctn {
.weui-cells{
margin-top: 0;
padding-left: 25px;
&:before, &:after{
border: none;
}
.weui-cell {
align-items: flex-start;
padding-top: 25px;
padding-bottom: 20px;
padding-left: 0;
&:before {
border-top: none;
}
border-bottom: 0.02rem solid #F2F2F2;
.iconfont {
display:block;
margin-right: 7px;
margin-top: -2px;
font-size: 30px;
}
.vux-cell-bd {
.vux-label {
font-size: 18px;
font-weight: 500;
}
.after-title-ctn {
.document-descript {
font-size: 14px;
color: rgb(128, 128, 128);
margin-top: 6px;
}
.btns-ctn {
margin: 25px 0 -5px -20px;
.btn-item {
display: inline-block;
width: 18%;
font-size: 14px;
color: #1890FF;
text-align: center;
&:not(:last-child){
border-right: 0.02rem solid #D9D9D9;
}
}
}
}
}
}
}
}
.rename-ctn, .delete-ctn {
padding: 20px;
font-size: 18px;
color: black;
.headers {
display: flex;
justify-content: space-between;
height: 30px;
line-height: 30px;
.iconfont {
font-size: 22px;
}
}
/deep/ .rename-input {
margin-top: 20px;
margin-bottom: 10px;
border: 0.02rem solid #AAAAAA;
border-radius: 5px;
&:before {
border: none;
}
}
.tips {
text-align: left;
color: rgb(39, 39, 39);
font-size: 16px;
margin: 20px 0 35px 0;
}
/deep/ .btn-ctn {
text-align: center;
padding: 20px 0 10px 0;
.weui-btn {
width: 120px;
height: 40px;
font-size: 18px;
}
.reset {
margin-right: 30px;
border-color: #1890FF;
color: #1890FF;
}
.inquire {
background: #1890FF;
color: white;
}
}
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/FolderList.vue 0 → 100644
View file @ 7110ee17
<template>
<div>
<group :title="listTitle" class="cellgroup-ctn">
<cell v-for="(item, index) of list" :key="index" :title="item.title" @click.native="folderClick(item)">
<i slot="icon" class="iconfont">&#xe166;</i>
<div slot="after-title" class="descript">
{{ item.descript }}
</div>
</cell>
</group>
</div>
</template>
<script>
import { Group, Cell } from 'vux'
export default {
name: 'FolderList',
props: {
listTitle: {
type: String,
default: ''
},
list: {
type: Array,
default: () => {
return []
}
}
},
components: {
Group,
Cell
},
data () {
return {
}
},
methods: {
folderClick (item) {
this.$emit('folderClick', item)
}
}
}
</script>
<style lang="less" scoped>
/deep/ .cellgroup-ctn {
.weui-cells__title {
margin-bottom: 15px;
font-size: 18px;
}
.weui-cells{
margin-top: 0;
padding-left: 25px;
&:before, &:after{
border: none;
}
.weui-cell {
align-items: flex-start;
padding-top: 20px;
padding-bottom: 15px;
padding-left: 0;
&:before {
border-top: none;
}
border-bottom: 0.02rem solid #F2F2F2;
.iconfont {
display:block;
margin-right: 10px;
margin-top: -5px;
font-size: 35px;
}
.vux-cell-bd {
.vux-label {
font-size: 18px;
font-weight: bold;
}
.descript {
font-size: 14px;
color: rgb(128, 128, 128);
margin-top: 6px;
}
}
}
}
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/SearchFold.vue 0 → 100644
View file @ 7110ee17
<template>
<div class="search-fold-ctn">
<div class="fold-header" @click="foldShow = !foldShow">
<span>全部记录 (10)</span>
<i v-show="!foldShow" class="iconfont">&#xe113;</i>
<i v-show="foldShow" class="iconfont">&#xe114;</i>
</div>
<div v-show="foldShow" class="fold-ctn">
<popup-radio class="timerSelect" title="选择学期" :options="options" v-model="selectValue" placeholder="请选择学期...">
</popup-radio>
<x-input label-width="6em" :title='`<span>搜索</span>`' v-model="searchValue" placeholder="请输入文档标题关键字搜索...">
<!-- <i slot="right-full-height" class="iconfont">&#xe112;</i> -->
</x-input>
<div class="btn-ctn">
<x-button class="reset" mini plain @click.native="reset">重置</x-button>
<x-button class="inquire" mini>查询</x-button>
</div>
</div>
</div>
</template>
<script>
import { XInput, Group, PopupRadio, XButton } from 'vux'
export default {
name: 'SearchFold',
components: {
XInput,
Group,
PopupRadio,
XButton
},
data () {
return {
foldShow: '', // 文档列表是否展开
selectValue: '', // 学期选择的值
searchValue: '', // 搜索的值
options: ['全部', '第一学期', '第二学期']
}
},
methods: {
reset () {
this.selectValue = ''
this.searchValue = ''
}
}
}
</script>
<style lang="less" scoped>
.search-fold-ctn {
.fold-header {
text-align: center;
height: 40px;
line-height: 40px;
font-size: 18px;
background: #F2F2F2;
.iconfont {
color: #1890FF;
}
}
/deep/ .fold-ctn {
font-size: 18px;
&:before {
border: none;
}
.timerSelect {
border-bottom: 1px solid #D7D7D7;
height: 55px;
.vux-cell-primary {
-webkit-box-flex: none;
-ms-flex: none;
flex: none;
}
.vux-cell-bd {
width: 108px;
p {
width: 108px;
.vux-label {
color: black;
width: 108px;
padding-left: 5px;
font-size: 18px;
padding-top: 10px;
}
}
}
.weui-cell__ft {
margin-left: 6px;
flex: 1;
.vux-cell-value, .vux-cell-placeholder{
display: inline-block;
width: 100%;
text-align: left;
font-size: 18px;
}
.vux-cell-value {
color: rgb(75, 75, 75);
}
.vux-cell-placeholder {
color: rgb(117, 117, 117);
}
&:after {
width: 8px;
height: 8px;
margin-right: 5px;
border-color: rgb(163, 163, 163);
}
}
}
.vux-x-input {
border-bottom: 1px solid #D7D7D7;
height: 55px;
&:before {
border: none;
}
.weui-cell__hd {
padding-left: 5px;
}
.iconfont {
line-height: 45px;
font-size: 18px;
margin-right: 15px;
}
}
}
/deep/ .btn-ctn {
text-align: center;
padding: 20px 0 5px 0;
.weui-btn {
width: 120px;
height: 45px;
font-size: 18px;
}
.reset {
margin-right: 30px;
border-color: #1890FF;
color: #1890FF;
}
.inquire {
background: #1890FF;
color: white;
}
}
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/myResources/components/Searchs.vue
View file @ 7110ee17
<template>
<div class="search-box">
<search placeholder="请输入文档标题关键字搜索..." :auto-fixed="false"></search>
<search v-model="value" placeholder="请输入文档标题关键字搜索..." :auto-fixed="false"></search>
</div>
</template>
......@@ -13,6 +13,7 @@ export default {
},
data () {
return {
value: ''
}
},
methods: {
......@@ -22,33 +23,25 @@ export default {
<style lang="less" scoped>
/deep/ .vux-search-box {
padding: 15px 20px;
.weui-search-bar {
border: none;
&:before {
&:before, &:after {
border:none;
}
&:after {
border: none;
}
background: #F2F2F2;
border-radius: 20px;
border-radius: 30px;
.weui-search-bar__form {
&:before {
border-radius: 20px;
background: #F2F2F2;
}
&:after {
&:before, &:after {
border: none;
border-radius: 20px;
border-radius: 30px;
background: #F2F2F2;
}
.weui-search-bar__box {
border-radius: 20px;
border-radius: 30px;
}
.weui-search-bar__label {
background: #F2F2F2;
border-radius: 20px;
border-radius: 30px;
}
}
}
......
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/schoolResources/Index.vue
View file @ 7110ee17
<template>
<div class="container">
<div class="content" ref="contentWrapper">
<div>
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
:list-title="folderListItem.listTitle"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'Index',
components: {
TabBar: () => import('@/common/tabBar/TabBar'),
Searchs: () => import('./../myResources/components/Searchs'),
FolderList: () => import('./../myResources/components/FolderList')
},
data () {
return {
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUpload'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolResources'
}
],
currentList: {},
listData: {
firstLevel: [
{
list: [
{
title: '教案文件夹',
descript: '常规文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '方案文件夹',
descript: '常规文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
},
{
title: '总结',
descript: '任务文件夹 共10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'secondLevel'
}
]
}
]
}
}
},
methods: {
intoFolder (item) {
/* 点击文件夹进入下一级 */
if (item.isFolder) {
let routerName
let routerPath
if (item.nextIsFolder) {
routerPath = '/education/schoolResources/folderLevel'
routerName = 'schoolFolderLevel'
} else {
routerPath = '/education/schoolResources/fileLevel'
routerName = 'schoolFileLevel'
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
}
})
}
}
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
this.currentList = this.listData.firstLevel
}
}
</script>
<style lang="less" scoped>
.content {
background: white;
.search-ctn {
padding: 20px 15px 10px 15px;
}
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/schoolResources/SchoolFileLevel.vue 0 → 100644
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<search-fold></search-fold>
<file-list :mode="'schoolResources'" :list="fileList" @handleClickItem="toggleShowBtn" @handleOpen="openFile" @handleShare="shareFile"></file-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'SchoolFileLevel',
components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
FileList: () => import('./../myResources/components/FileList'),
SearchFold: () => import('./../myResources/components/SearchFold')
},
data () {
return {
title: '文档列表',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFileLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolFileLevel'
}
],
fileList: [
{
name: '德育负责人操作手册.docx',
icon: 'document',
showFunBtn: false
},
{
name: '德育负责人账号.docx',
icon: 'document',
showFunBtn: false
},
{
name: '功能模板说明文档.docx',
icon: 'document',
showFunBtn: false
}
]
}
},
methods: {
toggleShowBtn (item) {
/* 显示功能按钮 */
item.showFunBtn = !item.showFunBtn
},
openFile (item) {
/* 打开文档 */
this.$router.push({
path: '/education/documentDetail'
})
},
shareFile (item) {
/* 分享文档 */
this.$router.push({
path: '/education/share'
})
}
},
created () {
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) {
this.title = this.$route.query.title
}
}
}
</script>
<style lang="less" scoped>
.content {
background: white;
}
</style>
VSSCMP_WEIXIN/teacher/src/pages/education/schoolBasedResources/schoolResources/SchoolFolderLevel.vue 0 → 100644
View file @ 7110ee17
<template>
<div class="container">
<v-header :title="title">
<span slot="action" class="header-slot pull-right"></span>
</v-header>
<div class="content" ref="contentWrapper">
<div>
<div class="search-ctn">
<searchs></searchs>
</div>
<folder-list
v-for="(folderListItem, folderListIndex) of currentList"
:key="folderListIndex"
:list="folderListItem.list"
@folderClick="intoFolder">
</folder-list>
<tab-bar :menus="tabBarMenus"></tab-bar>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'SchoolFolderLevel',
components: {
VHeader: () => import('@/common/header/VHeader'),
TabBar: () => import('@/common/tabBar/TabBar'),
Searchs: () => import('./../myResources/components/Searchs'),
FolderList: () => import('./../myResources/components/FolderList')
},
data () {
return {
title: '文件夹名称',
tabBarMenus: [
{
label: '我的资源',
icon: '&#xe89e;',
path: '/education/myResources/myUpload',
belongTo: 'myUploadFolderLevel'
},
{
label: '学习资源库',
icon: '&#xe87d;',
path: '/education/schoolResources/index',
belongTo: 'schoolFolderLevel'
}
],
currentList: {},
listData: {
secondLevel: [
{
list: [
{
title: '第二级文件夹1',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'thirdLevel'
},
{
title: '第二级文件夹2',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'thirdLevel'
},
{
title: '第二级文件夹3',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: true,
folderData: 'thirdLevel'
}
]
}
],
thirdLevel: [
{
list: [
{
title: '第三级文件夹1',
descript: '我上传了10个文档',
isFolder: true,
nextIsFolder: false,
folderData: 'fileLevel'
}
]
}
]
}
}
},
methods: {
intoFolder (item) {
/* 点击文件夹进入下一级 */
if (item.isFolder) {
let routerName
let routerPath
if (item.nextIsFolder) {
routerPath = '/education/schoolResources/folderLevel'
routerName = 'schoolFolderLevel'
} else {
routerPath = '/education/schoolResources/fileLevel'
routerName = 'schoolFileLevel'
}
this.$router.push({
name: routerName,
path: routerPath,
query: {
folder: item.folderData,
title: item.title
}
})
}
}
},
mounted () {
this.$nextTick(() => {
this.scroll = new BScroll(this.$refs.contentWrapper, {
click: true
})
})
if (this.$route.query) {
this.title = this.$route.query.title
this.currentList = this.listData[this.$route.query.folder]
}
},
watch: {
$route (val) {
if (val.query) {
this.title = val.query.title
this.currentList = this.listData[val.query.folder]
}
}
}
}
</script>
<style lang="less" scoped>
.content {
background: white;
.search-ctn {
padding: 15px;
}
}
</style>
VSSCMP_WEIXIN/teacher/src/routers/education/schoolBasedResourcesRouter.js
View file @ 7110ee17
// 我的资源
// 我的资源-我上传的
const MY_RESOURCES = [
{
path: '/education/myResources/index',
path: '/education/myResources/myUpload',
name: 'myResources',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve)
component: resolve => require(['pages/education/schoolBasedResources/myResources/Index'], resolve),
meta: {
belongTo: 'myUpload'
}
}
]
// 我上传的-文件夹列表
const MYUPLOAD_FOLDER_LEVEL = [
{
path: '/education/myResources/myUpload/folderLevel',
name: 'myUploadFolderLevel',
component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFolderLevel'], resolve),
meta: {
belongTo: 'myUploadFolderLevel'
}
}
]
// 我上传的-文件列表（非文件夹）
const MYUPLOAD_FILE_LEVEL = [
{
path: '/education/myResources/myUpload/fileLevel',
name: 'myUploadFileLevel',
component: resolve => require(['pages/education/schoolBasedResources/myResources/MyUploadFileLevel'], resolve),
meta: {
belongTo: 'myUploadFileLevel'
}
}
]
......@@ -11,8 +38,35 @@ const MY_RESOURCES = [
const MY_RESOURCES_FAVORSHARE = [
{
path: '/education/myResources/favorShare',
name: 'FavorShare',
component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve)
name: 'favorShare',
component: resolve => require(['pages/education/schoolBasedResources/myResources/FavorShare'], resolve),
meta: {
belongTo: 'favorShare'
}
}
]
// 文档详情
const DOCUMENT_DETAIL = [
{
path: '/education/documentDetail',
name: 'documentDetail',
component: resolve => require(['pages/education/schoolBasedResources/myResources/DocumentDetail'], resolve),
meta: {
belongTo: 'documentDetail'
}
}
]
// 分享页面
const SHARE = [
{
path: '/education/share',
name: 'share',
component: resolve => require(['pages/education/schoolBasedResources/myResources/Share'], resolve),
meta: {
belongTo: 'share'
}
}
]
......@@ -21,12 +75,45 @@ const SCHOOL_RESOURCES = [
{
path: '/education/schoolResources/index',
name: 'schoolResources',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/Index'], resolve)
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/Index'], resolve),
meta: {
belongTo: 'schoolResources'
}
}
]
// 学校资源-文件夹列表
const SCHOOL_FOLDER_LEVEL = [
{
path: '/education/schoolResources/folderLevel',
name: 'schoolFolderLevel',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/SchoolFolderLevel'], resolve),
meta: {
belongTo: 'schoolFolderLevel'
}
}
]
// 学校资源-文件列表（非文件夹）
const SCHOOL_FILE_LEVEL = [
{
path: '/education/schoolResources/fileLevel',
name: 'schoolFileLevel',
component: resolve => require(['pages/education/schoolBasedResources/schoolResources/SchoolFileLevel'], resolve),
meta: {
belongTo: 'schoolFileLevel'
}
}
]
export default [
...MY_RESOURCES,
...MYUPLOAD_FOLDER_LEVEL,
...MY_RESOURCES_FAVORSHARE,
...SCHOOL_RESOURCES
...SCHOOL_RESOURCES,
...MYUPLOAD_FILE_LEVEL,
...SCHOOL_FOLDER_LEVEL,
...SCHOOL_FILE_LEVEL,
...DOCUMENT_DETAIL,
...SHARE
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment