Commit 4f71768e authored by wangwei's avatar wangwei

页面编写

parent a39ba6ee
......@@ -14,6 +14,9 @@ npm run dev
# build for production with minification
npm run build
# build for production with minification
npm run build-test
# build for production and view the bundle analyzer report
npm run build --report
```
......
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_746649_38wf4o8u4cv.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_746649_7dsnjecwkpg.css">
<title>singsing-new-admin</title>
</head>
<body>
......
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div>
盒子列表
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
......@@ -7,6 +7,7 @@
<script>
export default {
}
</script>
<style scoped>
......
<template>
<div>
发货列表
</div>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
<template>
<el-container>
<el-aside width="250px">
<el-menu
:default-active="index">
<el-submenu v-for="data in leftList" :key="data.id" :index="data.name">
<template slot="title">
<span>{{data.name}}({{data.children | lengthNum}})
</span>
</template>
<el-submenu class="list2" :index="item.name" v-for="item in data.children" :key="item.id">
<span slot="title">
{{item.name}}
</span>
<div @click="chooseId(i)" v-for="i in item.children" :key="i.name">
<el-menu-item class="list3" :index="i.name">
{{i.name}}
</el-menu-item>
</div>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<that-list :id="id"></that-list>
</el-main>
</el-container>
</template>
<script>
import {getEntityMenuApi,sortCategoryApi} from "../../service/api";
import thatList from './list'
export default {
data(){
return {
leftList:[],
index:'',
id:''
}
},
components:{
thatList
},
filters:{
lengthNum:function (value) {
if(value){
return value.length
}else{
return '0'
}
}
},
methods:{
getList(){
getEntityMenuApi('').then(res=>{
this.leftList = res;
this.$store.commit('mainCanShow')
})
},
upIndex(data,item){
let i = item.indexOf(data);
if(i>0){
let json = {
category_up_id : data.id ,
category_down_id : item[i-1].id
};
sortCategoryApi(json).then(res=>{
this.getList()
})
}
},
downIndex(data,item){
let i = item.indexOf(data);
let lth=item.length - 1;
if(i < lth){
let json = {
category_up_id :item[i+1].id,
category_down_id:data.id
};
sortCategoryApi(json).then(res=>{
this.getList()
})
}
},
editIndex(data){
alert(21)
},
delIndex(data){
alert(21)
},
chooseId(data){
this.id = data.id
console.log(this.id)
}
},
mounted(){
this.getList()
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.el-container{
height: 100%;
.el-menu{
height: 100%;
.el-submenu{
.btn-block{
margin-left: 10px;
transition: all 1s;
display: none;
i{
color: #aaaaaa;
font-size: 14px;
&:hover{
color: #3a8ee6;
}
}
}
.list2:hover .list2-btn{
display: inline-block;
}
.list3:hover .list3-btn{
display: inline-block;
}
}
}
}
</style>
<template>
<div>
<div class="add-block">
<el-button class="add-btn">+新增课时</el-button>
</div>
<el-card v-for="data in list" :key="data.id" class="box-card">
<div class="id">
<img :src="data.cover">
</div>
<div class="btn">
<el-button
type=""
icon="el-icon-arrow-down"
circle size="mini"
@click="downLesson()">
</el-button>
<el-button
type=""
icon="el-icon-arrow-up"
circle size="mini"
@click="upLesson()">
</el-button>
<el-button
type=""
icon="el-icon-edit"
circle size="mini"
@click="editLesson()">
</el-button>
<el-button
type=""
icon="el-icon-delete"
circle size="mini"
@click="delLseeon()">
</el-button>
</div>
<div class="name">
{{data.title}}
<el-tag size="mini">level{{data.min_level}}-level{{data.max_level}}</el-tag>
<el-tag type="success" size="mini">{{data.min_age}}-{{data.max_age}}</el-tag>
</div>
</el-card>
</div>
</template>
<script>
import {getEntityApi} from "../../service/api";
export default {
name: "list",
props:[
'id'
],
data(){
return {
list:[]
}
},
created(){
if(this.id !== '' && this.id !== null)this.getList()
},
methods:{
getList(){
console.log(this.id);
getEntityApi(this.id).then(res=>{
this.list = res.list
})
},
delLseeon(){
},
},
watch:{
id(value){
if(value !== '' && value !== null)this.getList()
}
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.box-card{
margin: 10px 0;
cursor: pointer;
padding: 0;
&:hover{
background: #3a8ee6;
color: white;
}
.id{
margin-right: 20px;
width: 4em;
text-align: center;
float: left;
img{
width: 100%;
}
}
.btn{
float: right;
}
.name{
span{
display: inline-block;
text-align: center;
}
}
}
.add-block{
.clear-both;
.add-btn{
float: right;
}
}
</style>
......@@ -10,14 +10,15 @@
class="el-menu-vertical-demo">
<div class="menu-btn" @click="menuType = !menuType">
<i v-if="!menuType" class="iconfont icon-shouqi"></i>
<i v-if="menuType" class="iconfont icon-zhankai"></i>
<i v-if="menuType"
class="iconfont icon-zhankai"></i>
</div>
<el-submenu v-for="data in menuList" :index="data.value">
<el-submenu v-for="(data,index) in menuList" :index="data.value" :key="index">
<template slot="title">
<i :class="'iconfont menu-icon '+data.icon"></i>
<span>{{data.value}}</span>
</template>
<el-menu-item v-for="item in data.list" :index="item.path" class="item">{{item.value}}</el-menu-item>
<el-menu-item v-for="(item,i) in data.list" :index="item.path" :key="i" class="item">{{item.value}}</el-menu-item>
</el-submenu>
</el-menu>
</template>
......@@ -52,17 +53,17 @@
width: 200px;
}
.el-menu{
background: #333;
background: @bg-b;
color: white;
overflow: auto;
height: 100%;
.menu-btn{
height: 40px;
background: #444444;
line-height: 40px;
height: 35px;
background: @bg-b-s;
line-height: 35px;
/*text-align: center;*/
i{
font-size: 30px;
font-size: 26px;
float: right;
padding: 0 15px;
}
......@@ -75,7 +76,7 @@
right: 5px;
}
.el-menu-item{
background: #222;
background: @main-font-color;
}
.template{
color: black;
......
......@@ -59,12 +59,10 @@
position: absolute;
top: -4px;
right: -4px;
transition: all .3s;
transition: all .1s;
color: @secondary-font-color;
&:hover{
transform: scale(1.5,1.5);
top: -6px;
right: -6px;
transform: scale(1.2,1.2);
color: red;
}
}
......
<template>
<div>
素材列表
</div>
</template>
<script>
export default {
name: "index"
}
</script>
......
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
<template>
<el-dialog
:title="title"
center
append-to-body
:visible.sync="show"
width="800px">
<div v-loading="loading">
<el-form ref="form" :model="form" :rules="rules" >
</el-form>
<span slot="footer" class="dialog-footer" v-if="type !== 1">
<el-button @click="show = false">取 消</el-button>
<el-button type="primary" @click="sub">确 定</el-button>
</span>
</div>
</el-dialog>
</template>
<script>
import {getTeacherDetailApi,addTeacherApi,editTeacherApi} from "../../service/api";
import {TEACHERTYPE} from "../../util/wordbook";
export default {
name: "dialogObj",
props:[
'dialogObj'
],
data(){
return{
show:false,
id: '',
statusOption:[
{
label:'正常',
value:0
},
{
label:'禁用',
value:1
}
],
typeOption:[
{
label:'老师',
value:0
},{
label:'新星妈妈',
value:1
},{
label:'推广人',
value:2
},{
label:'市场',
value:3
}
],
loading:true,
type:0,
title:'',
form:{
name:'',
type:0,
qr:'',
alias:'',
status:0,
},
rules:{
name:[
{ required: true, message: '请输入名称', trigger: 'change' }
],
qr:[
{ required: true, message: '请输入二维码', trigger: 'change' }
]
},
teacherDetail:{}
}
},
methods:{
sub(){
switch(this.dialogObj.type){
case 2:
this.$refs['form'].validate((valid) => {
if(valid){
editTeacherApi(this.id,this.form).then(res=>{
this.$message({
type: 'success',
message: '修改成功!'
});
this.$emit("reflash");
this.show = false;
})
}
});
break;
case 0:
this.$refs['form'].validate((valid) => {
if(valid){
addTeacherApi(this.form).then(res=>{
this.$message({
type: 'success',
message: '新增成功!'
});
this.$emit("reflash");
this.show = false;
})
}
});
break
}
},
initDialog(){
switch(this.dialogObj.type){
case 0:
this.title = '新增教师';
this.show = this.dialogObj.show;
this.type = 0;
this.form.name = "";
this.form.alias = "";
this.form.qr = "";
this.form.type = 0;
this.form.status = 0;
this.loading = false;
break;
case 1:
this.title = '教师详情';
this.show = this.dialogObj.show;
this.id = this.dialogObj.id;
this.type = 1;
getTeacherDetailApi(this.id).then(res=>{
this.teacherDetail = res;
this.loading = false
});
break;
case 2:
this.title = '编辑';
this.show = this.dialogObj.show;
this.id = this.dialogObj.id;
this.type = 2;
getTeacherDetailApi(this.id).then(res=>{
this.form.name = res.name;
this.form.alias = res.alias;
this.form.qr = res.qr;
this.form.type = res.type;
this.form.status = res.status;
this.loading = false
});
break
}
}
},
watch:{
dialogObj:{
handler: function () {
this.loading = true;
this.initDialog()
},
deep: true
},
show(value){
this.$emit("changeShow",value);
}
}
}
</script>
<style scoped lang="less">
.el-col{
height: 50px;
text-align: center;
margin-bottom: 20px;
line-height: 40px;
.el-select{
width: 100%;
}
img{
width: 50px;
border-radius: 100px;
}
label{
color: #5982e6;
}
}
.dialog-footer{
display: block;
text-align: center;
}
</style>
<template>
<div class="single">
<el-form ref="searchFrom" :model="searchFrom" label-width="80px">
<el-row>
<el-col :span="4">
<el-form-item label="单品名称">
<el-input v-model="searchFrom.name" placeholder="名称"
size="small"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-button
type="primary"
plain
size="small"
@click="">
搜索
</el-button>
<el-button
type="success"
plain
size="small"
@click="">
添加单品
</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-table
:data="tableData"
:default-sort = "{prop: 'num', order: 'descending'}"
style="width: 100%">
<el-table-column
prop="id"
label="id">
</el-table-column>
<el-table-column
prop="name"
label="名称">
</el-table-column>
<el-table-column
prop="num"
sortable
label="库存">
</el-table-column>
<el-table-column
width="200"
label="操作">
<template slot-scope="scope">
<el-button size="mini" plain type="warning" @click="edit(scope.row)">
编辑
</el-button>
<el-button size="mini" plain type="danger" @click="edit(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<page :total="total" v-model="nowPage"/>
<dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getUser"/>
</div>
</template>
<script>
import {getSingleListApi} from "../../service/api";
import page from '../framework/page'
import dialogCom from './dialog'
export default {
name: "index",
components:{
page,
dialogCom
},
data(){
return {
total:0,
nowPage:0,
searchFrom: {
name:''
},
tableData:[]
}
},
created(){
this.initPage()
},
methods:{
initPage(){
getSingleListApi(this.searchFrom.name).then(res=>{
this.tableData = res.list;
this.total = res.total
})
},
}
}
</script>
<style scoped lang="less">
@import "../../util/public";
.single{
.main-block
}
</style>
<template>
<div>
<transition name="el-fade-in">
<el-menu
style="float: left;height: 100%"
:unique-opened="true"
:default-active="menuIndex"
:collapse="menuType">
<div class="menu-btn" @click="menuType = !menuType">
<span v-if="!menuType">收起</span>
<span v-if="menuType">展开</span>
</div>
<div v-for="data in menuList" :key="data.id" @click="toPath(data)">
<el-menu-item :index="data.name" >
<i :class="'iconfont '+data.icon"></i>
<span slot="title">{{data.value}}</span>
</el-menu-item>
</div>
</el-menu>
</transition>
<div class="content">
<router-view class="child-view"/>
</div>
</div>
</template>
<script>
export default {
data(){
return {
menuList:this.$store.state.menuList.find((a)=>{return a.name === 'system'}).children,
menuType:false,
menuIndex:this.$route.name,
}
},
mounted(){
this.$store.commit('mainCanShow')
},
methods:{
//菜单跳转
toPath(data){
let router = data.routerName;
this.menuIndex = data.name;
this.$router.push({name:router})
}
},
watch:{
$route(to){
let data = {
name:'system',
to:to
};
if(to.matched[1].name === 'system')this.$store.commit('changeParentRouter',data)
}
}
//缓存为role则跳到role
}
</script>
<style scoped lang="less">
@import "../../util/public";
.menu-btn{
text-align: center;
height: 30px;
line-height: 30px;
font-size: 12px;
background: #3a8ee6;
color: @main-font-color;
}
.content{
height: 100%;
display: flex;
}
</style>
<template>
</template>
<script>
export default {
name: "index"
}
</script>
<style scoped>
</style>
......@@ -7,13 +7,21 @@ import index from '@/components/framework'
import main from '@/components/main'
import login from '@/components/login'
import resources from '@/components/resources'
import system from '@/components/system/index'
import admin from '@/components/system/admin'
import role from '@/components/system/role'
import user from '@/components/user'
import teacher from '@/components/teacher'
import lesson from '@/components/lesson'
import entity from '@/components/entity'
import box from '@/components/box'
import single from '@/components/single'
import periods from '@/components/periods';
import classList from '@/components/class'
import order from '@/components/order'
import shop from '@/components/shop'
import consignment from '@/components/consignment'
import notice from '@/components/notice'
import weChat from '@/components/weChat'
import help from '@/components/help'
Vue.use(Router);
const router =new Router({
......@@ -36,14 +44,42 @@ const router =new Router({
path: '',
name:'first',
component: main
},{
path: '/help',
name:'help',
component: help
},{
path: '/notice',
name:'notice',
component: notice
},{
path: '/weChat',
name:'weChat',
component: weChat
},{
path: '/resources',
name:'resources',
component: resources
},{
path: '/entity',
name:'entity',
component: entity
path: '/periods',
name:'periods',
component: periods
},{
path: '/shop',
name:'shop',
component: shop
},{
path: '/consignment',
name:'consignment',
component: consignment
},{
path: '/single',
name:'single',
component: single
},{
path: '/box',
name:'box',
component: box
},{
path: '/lesson',
name:'lesson',
......@@ -57,27 +93,23 @@ const router =new Router({
name:'teacher',
component: teacher
},{
path:'/system',
name:'system',
component:system ,
redirect:{name:'admin'},
children:[
{
path: '',
redirect:{name:'admin'}
},
{
path: 'admin',
path: '/admin',
name:'admin',
component: admin
},
{
path: 'role',
},{
path: '/role',
name:'role',
component: role
},
]
}
{
path: '/class',
name:'class',
component: classList
},{
path: '/order',
name:'order',
component: order
},
]
}
]
......
......@@ -143,22 +143,20 @@ const sortCategoryUrl = `${_baseUrl}api/admin/category/sort`;
export const sortCategoryApi = function (json) {
return Vue.prototype.$patch(sortCategoryUrl,json)
};
//添加元素
const addElementUrl = `${_baseUrl}api/admin/element/add/`
//获取分类下的元素列表
const getCateDetailListUrl = `${_baseUrl}api/admin/element/list/0?category_id=`;
export const getCateListApi = function (id) {
return Vue.prototype.$fetch(`${getCateDetailListUrl}${id}`)
};
//获取实物列表
const getEntityUrl = `${_baseUrl}api/admin/element/list/2?category_id=`;
export const getEntityApi = function (id) {
return Vue.prototype.$fetch(`${getEntityUrl}${id}`)
// 获取单品列表
const getSingleListUrl = `${_baseUrl}api/admin/item/stock/list`;
export const getSingleListApi = function (name) {
return Vue.prototype.$fetch(`${getSingleListUrl}?name=${name}`)
};
//查询实物、菜单分类
const getEntityMenuUrl = `${_baseUrl}api/admin/category/list/1`;
export const getEntityMenuApi = function (pid) {
return Vue.prototype.$fetch(getEntityMenuUrl,{'pid':pid})
// 获取单品详情
const getSingleDetailUrl = `${_baseUrl}api/admin/item/stock/info/`;
export const getSingleDetailApi = function (id) {
return Vue.prototype.$fetch(`${getSingleDetailUrl}${id}`)
};
......@@ -33,8 +33,8 @@ export default [
},
{
value:'期数列表',
routerName:'resources',
path:'/123'
routerName:'periods',
path:'/periods'
}
]
},{
......@@ -76,8 +76,8 @@ export default [
},
{
value:'发货管理',
routerName:'logistics',
path:'/logistics'
routerName:'consignment',
path:'/consignment'
}
]
},{
......@@ -87,8 +87,8 @@ export default [
list: [
{
value:'单品列表',
routerName:'entity',
path:'/entity'
routerName:'single',
path:'/single'
},
{
value:'盒子列表',
......
//颜色参数
@bg-b: #2f2f3c;
@bg-b: #333;
@bg-b-s:#444;
@black-line:#191919;
@gray-line:#666;
@light-line:#ddd;
......@@ -12,6 +13,11 @@
.fl-r{
float: right;
}
.main-block{
margin: 5px;
background: white;
padding: 5px;
}
html{
font-family: "Helvetica Neue",
Helvetica,
......
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