Hooke / muse-ui-test

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
fa8d967f 1 parent 61f77eae

add 开发页面

Inline Side-by-side
Showing 16 changed files with 413 additions and 30 deletions
......@@ -40,9 +40,88 @@ export default new Router({
},
name: '',
children: [{
path: '/table',
name: '我的介绍',
path: '/info',
component: r => {
require(['./views/test'], r)
require(['./views/maintain/me/info'], r)
}
}, {
name: '课程管理',
path: '/class',
component: r => {
require(['./views/maintain/class'], r)
}
}, {
name: '视频管理',
path: '/video',
component: r => {
require(['./views/maintain/video'], r)
}
}, {
name: '课程标签管理',
path: '/course_tag',
component: r => {
require(['./views/maintain/tag/course_tag'], r)
}
}, {
name: '教师标签管理',
path: '/teacher_tag',
component: r => {
require(['./views/maintain/tag/teacher_tag'], r)
}
}, {
name: '我的账户',
path: '/account',
component: r => {
require(['./views/maintain/me/account'], r)
}
}, {
name: '关注我的',
path: '/attention',
component: r => {
require(['./views/maintain/me/attention'], r)
}
}, {
name: '我的联系信息',
path: '/contact',
component: r => {
require(['./views/maintain/me/contact'], r)
}
}, {
name: '权限管理',
path: '/auth',
component: r => {
require(['./views/maintain/auth'], r)
}
}, {
name: '系统参数管理',
path: '/parameter',
component: r => {
require(['./views/maintain/parameter'], r)
}
}, {
name: '讲师管理',
path: '/teacher',
component: r => {
require(['./views/maintain/teacher'], r)
}
}, {
name: '培训机构管理',
path: '/organization',
component: r => {
require(['./views/maintain/organization'], r)
}
}, {
name: '订单管理',
path: '/order',
component: r => {
require(['./views/maintain/order'], r)
}
}, {
name: '第三方接口管理',
path: '/api',
component: r => {
require(['./views/maintain/api'], r)
}
}]
}
......
<template>
<div id="app">
<mu-drawer :open.sync="side_show" :docked="docked" :right="position === 'right'" :z-depth="1">
<mu-list :value="default_list_index" @change="listChange">
<mu-list-item :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" button active-class="is-selected">
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
</mu-list>
<mu-list :value="default_list_index" @change="listChange" toggle-nested>
<mu-list-item button :ripple="false" nested :open="open === 'send'" @toggle-nested="open = arguments[0] ? 'send' : ''">
<mu-list-item-action>
<mu-icon value="send"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>展开项</mu-list-item-title>
<mu-list-item-action>
<mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
</mu-list-item-action>
<mu-list-item button :ripple="false" slot="nested" :value="k" v-for="(v, k) in side_menu" :key="k" :to="v.url" @click="goTo()" active-class="is-selected">
<mu-list :value="default_list_title" @change="listChange" toggle-nested>
<div v-for="(v, k) in side_menu" :key="k" >
<mu-list-item v-if="v.sub.length"
button :ripple="false" nested :open="open === v.title" @toggle-nested="toggleChage">
<mu-list-item-action>
<mu-icon value="list"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
<mu-list-item-action>
<mu-icon class="toggle-icon" size="24" value="keyboard_arrow_down"></mu-icon>
</mu-list-item-action>
<mu-list-item button :ripple="false" slot="nested" :value="x.title" v-for="(x, key) in v.sub" :key="key" :to="x.url" @click="goTo()" active-class="is-selected">
<mu-list-item-title>{{ x.title }}</mu-list-item-title>
</mu-list-item>
</mu-list-item>
<mu-list-item v-else :value="v.title" :to="v.url" @click="goTo()" button active-class="is-selected">
<mu-list-item-action>
<mu-icon value="menu"></mu-icon>
</mu-list-item-action>
<mu-list-item-title>{{ v.title }}</mu-list-item-title>
</mu-list-item>
</mu-list-item>
</div>
</mu-list>
</mu-drawer>
<mu-appbar :class="['mu-appbar-header', {'is-open': side_show}]" color="primary">
......@@ -26,7 +30,7 @@
<mu-icon value="menu"></mu-icon>
</mu-button>
<p style="text-align: left;">讲师管理系统</p>
<!-- <mu-button flat slot="right">登录</mu-button> -->
<mu-button flat slot="right">登录</mu-button>
<mu-menu slot="right" :open.sync="menu_open">
<mu-button flat>
<mu-avatar :size="25" color="#FFFFFF">
......@@ -35,6 +39,11 @@
<p v-if="side_show" style="margin-left: 10px;">牛讲师</p>
</mu-button>
<mu-list slot="content">
<mu-list-item button @click="menuClick('register')">
<mu-list-item-content>
<mu-list-item-title>注册</mu-list-item-title>
</mu-list-item-content>
</mu-list-item>
<mu-list-item button @click="menuClick('404')">
<mu-list-item-content>
<mu-list-item-title>404</mu-list-item-title>
......@@ -54,8 +63,11 @@
</mu-menu>
</mu-appbar>
<div :class="['main-contain', {'is-open': side_show}]">
<div style="text-align: left; margin-left: 20px; margin-bottom: 20px;">
{{side_menu[default_list_index]['title']}}
<div v-if="default_list_title !== '首页'" style="text-align: left; margin-left: 20px; margin-bottom: 20px;">
{{default_list_title}}
</div>
<div v-if="default_list_title === '首页'" style="background-color: #FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<router-view/>
</div>
......@@ -78,28 +90,98 @@ export default {
this.resize($('body').width());
});
// 默认选中
this.default_list_index = localStorage.getItem('default_list_index') ? +localStorage.getItem('default_list_index') : 0;
this.default_list_title = localStorage.getItem('default_list_title') ? localStorage.getItem('default_list_title') : '首页';
this.open = localStorage.getItem('default_open_menu') ? localStorage.getItem('default_open_menu') : '';
//
$('body').css('background', '#FAFAFA')
},
data () {
return {
default_list_index: 0,
default_list_title: '首页',
menu_open: false,
side_show: false,
screen_width: '',
docked: false,
position: 'left',
side_menu: [{
title: '课程管理',
auth: '',
title: '首页',
auth: ['C', 'S'],
sub: [],
url: '/'
}, {
title: '我的管理',
auth: ['C', 'S'],
sub: [{
title: '我的介绍',
auth: ['C', 'S'],
url: '/info'
}, {
title: '我的账户',
auth: ['C'],
url: '/account'
}, {
title: '关注我的',
auth: ['C'],
url: '/attention'
}, {
title: '联系信息',
auth: ['S'],
url: '/contact'
}]
}, {
title: '课程管理',
auth: ['C', 'P'],
sub: [],
url: '/class'
}, {
title: '视频管理',
auth: ['C'],
sub: [],
url: '/video'
}, {
title: '讲师管理',
auth: '',
url: '/table'
auth: ['P'],
sub: [],
url: '/teacher'
}, {
title: '标签管理',
auth: ['C'],
sub: [{
title: '讲师标签',
auth: ['C'],
url: '/teacher_tag'
}, {
title: '课程标签',
auth: ['C'],
url: '/course_tag'
}]
}, {
title: '权限管理',
auth: ['P'],
sub: [],
url: '/auth'
}, {
title: '系统参数管理',
auth: ['P'],
sub: [],
url: '/parameter'
}, {
title: '培训机构管理',
auth: ['P'],
sub: [],
url: '/organization'
}, {
title: '订单管理',
auth: ['P'],
sub: [],
url: '/order'
}, {
title: '第三方接口管理',
auth: ['P'],
sub: [],
url: '/api'
}],
open: 'send'
open: ''
}
},
methods: {
......@@ -118,14 +200,29 @@ export default {
this.side_show = false;
$(window).resize()
},
toggleChage (v) {
// console.warn(v);
// if (v) {
// localStorage.setItem('default_open_menu', this.open)
// }
},
goTo (v) {
this.resize($('body').width());
},
listChange (v) {
//
if (!_.isUndefined(v)) {
this.default_list_index = v;
localStorage.setItem('default_list_index', v)
this.default_list_title = v;
localStorage.setItem('default_list_title', v);
// 默认打开菜单栏名称
_.each(this.side_menu, x => {
_.each(x.sub, y => {
if (y.title === v) {
this.open = x.title
localStorage.setItem('default_open_menu', x.title)
}
})
})
}
},
menuClick (v) {
......
<template lang="html">
<div class="">
"对于微信支付，支付宝等接口的设置管理；
根据开发文档的API来实现这些支付功能；"
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
"对于平台的权限统一管理，权限分：
管理员、维护人员、系统管理员；"
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
维护我的课程；
讲师首页里显示课程列表；
进入课程列表，可以编辑课程的具体内容；
可以对课程进修增加、编辑的操作；
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
通过微信及支付宝的方式充值；
显示账户余额；
待付账单管理；
已付账单的查询；
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
显示看过我的首页、课程、视频的培训机构；
普通讲师（未付费）不能看到培训机构的联系方式，VIP讲师（已付费）可以看到；
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
"显示培训机构的联系方式；
通过程序来判断，只有vip的讲师才能查看具体联系信息；"
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
维护我的介绍信息；讲师首页显示我的介绍；
可以更改自己的登录密码；
可以更改手机号码；
<br/>
"培训机构维护机构的介绍信息；
培训机构详情页显示的介绍详情；"
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
"管理订单，订单状态及查询功能
对应支付订单；
可以实现查找；
更新订单状态；
可以通过搜索功能查找订单；"
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
"管理培训机构相关信息
对机构信息可以实现增删改操作；
对机构信息可以搜索机构名称进行查询；"
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
对于系统相关的参数设置
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
"管理讲师的相关信息；
对讲师信息能做增删改操作；
对讲师可以实现查询名称；"
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>
<template lang="html">
<div class="">
维护我的视频；讲师首页里显示视频列表；
可以维护视频内容，修改或删除视频URL；
维护视频相关的标题，标签等信息；
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
</style>