Skip to content

A
admin-base
Commit 7c9f9441 authored by wangwei's avatar wangwei
Browse files
Options

页面编写

parent 4f71768e
Hide whitespace changes
Inline Side-by-side
Showing with 379 additions and 116 deletions
config/dev.env.js
View file @ 7c9f9441
......@@ -5,5 +5,6 @@ const prodEnv = require('./prod.env');
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_URL: '"/"',
IMAGE_URL_HEAD:'"http://cdn.singsingenglish.com/"',
INVITE_URL:'"http://wechat.test.singsingenglish.com"',
});
config/index.js
View file @ 7c9f9441
......@@ -14,6 +14,7 @@ module.exports = {
proxyTable: {
'/api': {
target: 'http://local.base-api.sing.com', // 接口的域名
// target: 'wechat.test.singsingenglish.com',
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
}
},
......
src/components/box/boxDialog.vue 0 → 100644
View file @ 7c9f9441
<template>
</template>
<script>
export default {
name: "boxDialog"
}
</script>
<style scoped>
</style>
src/components/box/boxTypeList.vue 0 → 100644
View file @ 7c9f9441
<template>
<div :class="{'box-type-list':true,'closed':close}">
<div class="close-btn" @click="close = !close">
<i class="el-icon-arrow-right" v-if="!close"></i>
<i class="el-icon-arrow-left" v-if="close"></i>
</div>
<el-card class="box-card">
<div slot="header">
<span>盒子类型</span>
<el-button style="float: right; padding: 3px 0;" type="text">新增类型</el-button>
</div>
<el-card v-for="o in list" shadow="hover" :key="o.id" :class="{text:true,'now-card':o.id === nowId}">
<div class="name" @click="changeCateGory(o.id)">
{{o.name}}
</div>
<div class="btn-block">
<el-button type="primary" icon="el-icon-search" circle plain size="mini"></el-button>
<el-button type="warning" icon="el-icon-edit" circle plain size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" circle plain size="mini"></el-button>
</div>
</el-card>
</el-card>
</div>
</template>
<script>
import {getBoxTypeListApi} from "../../service/api";
export default {
name: "boxTypeList",
data () {
return {
list:[],
nowId:'',
close:false
}
},
mounted(){
this.getBoxTypeList()
},
methods: {
getBoxTypeList(){
getBoxTypeListApi().then(res=>{
this.list = res
})
},
changeCateGory(id){
this.nowId = id
this.$emit('changeCategoryId',id)
}
}
}
</script>
<style scoped lang="less">
.box-type-list{
position: absolute;
top: 0;
right: -270px;
bottom: 0;
width: 280px;
border-left: 1px solid #aae0ff;
padding: 0;
margin: 0;
transition: all .3s;
&:hover{
right: 0;
}
.close-btn{
height: 80px;
line-height: 80px;
width: 20px;
background: #aae0ff;
color: white;
position: absolute;
top: 50%;
cursor: pointer;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
margin-top: -40px;
text-align: center;
left: -20px;
}
.box-card{
height: 100%;
margin: 0;
border: none;
box-shadow: none;
padding: 0;
display: block;
overflow: auto;
.text{
margin: 5px 0;
position: relative;
height: 65px;
cursor: pointer;
&.now-card{
background: #409EFF;
color: white;
}
.name{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 100px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
padding: 20px;
}
.btn-block{
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 20px;
z-index: 2;
.el-button{
margin: 0;
}
}
}
}
}
</style>
src/components/box/index.vue
View file @ 7c9f9441
<template>
<div>
盒子列表
<div class="box-index">
<box-type-list @changeCategoryId="changeCategoryId"/>
<div class="add-block">
<el-button class="add-btn" type="success">+新增盒子</el-button>
</div>
<el-row>
<el-col :span="4" v-for="(data, index) in list" :key="o">
<el-card :body-style="{ padding: '0px' }" shadow="hover">
<img v-if="data.cover !== ''" :src="defaultImgPath + data.cover" class="image">
<div style="padding: 14px;">
<span>
{{data.title}}
</span>
<div class="bottom clearfix">
<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 class="btn-block">
<el-button type="primary" icon="el-icon-search" circle plain size="mini"></el-button>
<el-button type="warning" icon="el-icon-edit" circle plain size="mini"></el-button>
<el-button type="danger" icon="el-icon-delete" circle plain size="mini"></el-button>
</div>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "index"
import { getBoxListApi } from "../../service/api";
import BoxTypeList from './boxTypeList'
export default {
name: "index",
components:{
BoxTypeList
},
data(){
return {
category_id:'',
defaultImgPath:process.env.IMAGE_URL_HEAD ,
list:[]
}
},
mounted(){
},
methods: {
initPage (id){
getBoxListApi(id).then(res=>{
this.list = res.list
})
},
changeCategoryId(data){
this.category_id = data
}
},
watch:{
category_id(value){
this.initPage(value)
}
}
}
</script>
<style scoped>
<style scoped lang="less">
.box-index{
overflow: hidden;
padding: 20px;
display: block;
.add-block{
display: block;
text-align: right;
margin: 10px 0;
}
}
</style>
src/components/single/dialog.vue
View file @ 7c9f9441
......@@ -7,9 +7,43 @@
width="800px">
<div v-loading="loading">
<el-form ref="form" :model="form" :rules="rules" >
<el-row>
<el-col :span="4"><label>单品名称</label></el-col>
<el-col :span="8">
<el-form-item prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<label>数量</label>
</el-col>
<el-col :span="8">
<el-form-item>
<el-input-number v-model="form.num"></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<label>封面图片</label>
</el-col>
<el-col :span="20">
<div class="upload-block">
<el-upload
action="/api/public/upload"
:class="{disabled:!uploadShow}"
:before-upload="beforeAvatarUpload"
list-type="picture-card"
:file-list="imageList"
:on-success="handleAvatarSuccess"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer" v-if="type !== 1">
<span slot="footer" class="dialog-footer">
<el-button @click="show = false">取 消</el-button>
<el-button type="primary" @click="sub">确 定</el-button>
</span>
......@@ -18,8 +52,7 @@
</template>
<script>
import {getTeacherDetailApi,addTeacherApi,editTeacherApi} from "../../service/api";
import {TEACHERTYPE} from "../../util/wordbook";
import {getSingleDetailApi,addSingleApi,editSingleApi} from "../../service/api";
export default {
name: "dialogObj",
props:[
......@@ -27,61 +60,28 @@
],
data(){
return{
show:false,
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' }
]
loading: true,
uploadShow: true,
type: 0,
title: '',
form:{ name: '', num: 0, cover: ''},
imageList: [],
rules: {
},
teacherDetail:{}
teacherDetail: {}
}
},
methods:{
sub(){
switch(this.dialogObj.type){
case 2:
case 0:
this.$refs['form'].validate((valid) => {
if(valid){
editTeacherApi(this.id,this.form).then(res=>{
this.form.cover = this.imageList[0].name;
addSingleApi(this.form).then(()=>{
this.$message({
type: 'success',
message: '修改成功!'
......@@ -92,10 +92,11 @@
}
});
break;
case 0:
case 1:
this.$refs['form'].validate((valid) => {
if(valid){
addTeacherApi(this.form).then(res=>{
this.form.cover = this.imageList[0].name;
editSingleApi(this.id,this.form).then(()=>{
this.$message({
type: 'success',
message: '新增成功!'
......@@ -108,45 +109,52 @@
break
}
},
handleAvatarSuccess(res) {
this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
},
beforeAvatarUpload(){
this.uploadShow = false
},
handleRemove(){
this.uploadShow = true
},
initDialog(){
switch(this.dialogObj.type){
case 0:
this.title = '新增教师';
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.imageList = [];
this.form = {
name: '',
num: 0,
cover: ''
};
this.uploadShow = true;
this.loading = false;
break;
case 1:
this.title = '教师详情';
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
getSingleDetailApi(this.dialogObj.id).then(res=>{
this.loading = false;
this.form = {
name:res.name,
num:res.num,
cover:res.cover
};
if(this.form.cover && this.form.cover !== ''){
this.imageList = [{name:res.cover,url:process.env.IMAGE_URL_HEAD + res.cover}];
this.uploadShow = false
}else{
this.imageList = [];
this.uploadShow = true
}
});
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:{
......@@ -166,19 +174,18 @@
<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;
.upload-block{
height: 150px;
}
label{
color: #5982e6;
text-align: center;
display: block;
}
}
.dialog-footer{
......@@ -186,3 +193,9 @@
text-align: center;
}
</style>
<style>
.disabled .el-upload--picture-card {
display: none !important;
}
</style>
src/components/single/index.vue
View file @ 7c9f9441
......@@ -10,18 +10,10 @@
</el-col>
<el-col :span="4">
<el-form-item>
<el-button
type="primary"
plain
size="small"
@click="">
<el-button type="primary" plain size="small" @click="initPage">
搜索
</el-button>
<el-button
type="success"
plain
size="small"
@click="">
<el-button type="success" plain size="small" @click="onAdd">
添加单品
</el-button>
</el-form-item>
......@@ -52,19 +44,19 @@
<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 size="mini" plain type="danger" @click="delthat(scope.row)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<page :total="total" v-model="nowPage"/>
<dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="getUser"/>
<dialog-com :dialogObj="dialogObj" @changeShow="changeShow" @reflash="initPage"/>
</div>
</template>
<script>
import {getSingleListApi} from "../../service/api";
import {getSingleListApi,delSingleApi} from "../../service/api";
import page from '../framework/page'
import dialogCom from './dialog'
export default {
......@@ -80,7 +72,12 @@
searchFrom: {
name:''
},
tableData:[]
tableData:[],
dialogObj:{
type:0,
show:false,
id:''
},
}
},
created(){
......@@ -93,6 +90,37 @@
this.total = res.total
})
},
changeShow() {
},
delthat(data){
this.$confirm('此操作将删除该单品?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
delSingleApi(data.id).then(res=>{
this.$message({
type: 'success',
message: '删除成功!'
});
});
this.initPage()
});
},
onAdd(){
this.dialogObj = {
type: 0,
show: true,
}
},
edit(data) {
this.dialogObj = {
type: 1,
show: true,
id: data.id
}
},
}
}
</script>
......
src/router/index.js
View file @ 7c9f9441
......@@ -14,7 +14,7 @@ import teacher from '@/components/teacher'
import lesson from '@/components/lesson'
import box from '@/components/box'
import single from '@/components/single'
import periods from '@/components/periods';
import periods from '@/components/periods'
import classList from '@/components/class'
import order from '@/components/order'
import shop from '@/components/shop'
......@@ -115,19 +115,12 @@ const router =new Router({
]
});
router.beforeEach((to,from,next)=> {
//在已登录状态下不允许退回登录页面去
// if (to.name === 'login' && store.state.token) {
// next(false);
// return;
// }
//获取cookie里的token
store.commit('mainCanShow');
if(Cookie.get('cc_token')){
store.dispatch('setToken',Cookie.get('cc_token'));
if(Cookie.get('cc_user_name') !== null){
store.dispatch('setUserName',Cookie.get('cc_user_name'))
}else{
}
}
store.state.nowTab = to.name;
......@@ -142,10 +135,9 @@ router.beforeEach((to,from,next)=> {
}
}
}
if(store.state.openedTab.indexOf(thisMenu) < 0){
store.state.openedTab.push(thisMenu);
console.log(store.state.openedTab)
}
if(store.state.openedTab.indexOf(thisMenu) < 0){
store.state.openedTab.push(thisMenu);
}
}
// 登录拦截
if (to.matched.some(record => record.meta.skip_auth !== true) && !store.state.token) {
......@@ -157,4 +149,4 @@ router.beforeEach((to,from,next)=> {
}
});
export default router;
export default router;
src/service/api.js
View file @ 7c9f9441
......@@ -151,12 +151,36 @@ export const getCateListApi = function (id) {
// 获取单品列表
const getSingleListUrl = `${_baseUrl}api/admin/item/stock/list`;
export const getSingleListApi = function (name) {
return Vue.prototype.$fetch(`${getSingleListUrl}?name=${name}`)
return Vue.prototype.$fetch(`${getSingleListUrl}`,{name:name})
};
// 获取单品详情
const getSingleDetailUrl = `${_baseUrl}api/admin/item/stock/info/`;
export const getSingleDetailApi = function (id) {
return Vue.prototype.$fetch(`${getSingleDetailUrl}${id}`)
};
// 删除单品
const delSingleUrl = `${_baseUrl}api/admin/item/stock/`;
export const delSingleApi = function (id) {
return Vue.prototype.$del(`${delSingleUrl}${id}`)
};
// 新增单品
const addSingleUrl = `${_baseUrl}api/admin/item/stock/add`;
export const addSingleApi = function (json) {
return Vue.prototype.$post(addSingleUrl,json)
};
// 修改单品
const editSingleUrl = `${_baseUrl}api/admin/item/stock/info/`;
export const editSingleApi = function (id,json) {
return Vue.prototype.$put(`${editSingleUrl}${id}`,json)
};
// 获取盒子分类
const getBoxTypeListUrl = `${_baseUrl}api/admin/category/list/1`;
export const getBoxTypeListApi = function () {
return Vue.prototype.$fetch(getBoxTypeListUrl)
};
// 获取盒子列表
const getBoxListUrl = `${_baseUrl}api/admin/item/box/list/`;
export const getBoxListApi = function (id) {
return Vue.prototype.$fetch(`${getBoxListUrl}${id}`)
};
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