.

src/components/SingleUpload.vue

@@ -0,0 +1,139 @@
+<template>
+    <el-upload
+        class="single-upload"
+        :action="uploadUrl"
+        :headers="headers"
+        :show-file-list="false"
+        :on-success="onSuccess"
+        :before-upload="beforeUpload"
+    >
+        <div></div>
+        <div class="wrapper">
+            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            <div v-if="loading" class="loading">
+                <i class="el-icon-loading"></i>
+            </div>
+        </div>
+        <div slot="tip" class="el-upload__tip">
+            <slot></slot>
+        </div>
+    </el-upload>
+</template>
+<script>
+export default {
+    created() {
+        this.uploadUrl = this.url || this.$baseUrl + '/upload/file';
+        this.updateImageUrl(this.value);
+    },
+    props: {
+        value: String,
+        usePrefix: {
+            type: Boolean,
+            default: true,
+        },
+        url: {
+            type: String,
+        },
+    },
+    data() {
+        return {
+            imageUrl: '',
+            loading: false,
+        };
+    },
+    computed: {
+        headers() {
+            return {
+                Authorization: 'Bearer ' + localStorage.getItem('token'),
+            };
+        },
+    },
+    methods: {
+        onSuccess(res, file) {
+            this.loading = false;
+            this.imageUrl = URL.createObjectURL(file.raw);
+            var newVal = '';
+            if (res.data instanceof Array) {
+                newVal = res.data[0];
+            } else {
+                newVal = res.data;
+            }
+            this.$emit('input', newVal);
+        },
+        onError(err, file, fileList) {
+            this.loading = false;
+        },
+        beforeUpload(file) {
+            this.loading = true;
+            return true;
+        },
+        updateImageUrl(url) {
+            this.imageUrl = url;
+        },
+    },
+    watch: {
+        value(val) {
+            this.updateImageUrl(val);
+        },
+    },
+};
+</script>
+<style lang="less" scoped>
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    background-color: #fbfdff;
+
+    &:hover {
+        border-color: #409eff;
+    }
+}
+
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+
+    &:hover {
+        border-color: #409eff;
+    }
+}
+
+.wrapper {
+    position: relative;
+}
+
+.single-upload .el-upload {
+    position: relative;
+}
+
+.loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.6);
+    color: #333;
+    font-size: 24px;
+}
+</style>

src/main.js

@@ -7,6 +7,7 @@ import store from './store';
 import http from './plugins/http';
 import Pagination from '@/components/Pagination';
 import MultiUpload from '@/components/MultiUpload';
+import SingleUpload from '@/components/SingleUpload';
 import 'normalize.css/normalize.css';
 import 'element-ui/lib/theme-chalk/index.css';
 import 'vue-awesome/icons';
@@ -17,6 +18,7 @@ Vue.use(http);
 Vue.component('v-icon', Icon);
 Vue.component('pagination', Pagination);
 Vue.component('multi-upload', MultiUpload);
+Vue.component('single-upload', SingleUpload);
 store.commit('setSmallScreen', window.innerWidth <= 640);
 window.onresize = () => {
     store.commit('setSmallScreen', window.innerWidth <= 640);

src/router.js

@@ -41,6 +41,11 @@ const router = new Router({
                     name: 'productEdit',
                     component: () => import(/* webpackChunkName: "products" */ './views/ProductEdit.vue'),
                 },
+                {
+                    path: '/shopBanner',
+                    name: 'shopBanner',
+                    component: () => import(/* webpackChunkName: "shopBanner" */ './views/ShopBanner.vue'),
+                },
             ],
         },
     ],

src/views/Home.vue

@@ -81,7 +81,7 @@ export default {
     },
 };
 </script>
-<style lang="less" scoped>
+<style lang="less">
 .el-aside {
     height: 100%;
     width: auto !important;
@@ -91,6 +91,7 @@ export default {
         display: flex;
         flex-direction: column;
         .logo {
+            background: shade(#324157, 20%);
             height: 60px;
             line-height: 60px;
             min-height: 60px;
@@ -101,6 +102,7 @@ export default {
             flex-basis: 0;
             flex-grow: 1;
             overflow: auto;
+            border: none !important;
             &::-webkit-scrollbar {
                 display: none;
             }
@@ -146,6 +148,7 @@ export default {
         }
         .logo {
             position: relative;
+            border-right: none;
             .btn-close {
                 color: white;
                 font-size: 24px;
@@ -174,6 +177,18 @@ export default {
     .page {
         background: white;
         padding: 20px 20px 1px 20px;
+        .action-container {
+            display: flex;
+            align-content: center;
+            margin-bottom: 15px;
+            .action {
+                display: flex;
+                margin-right: 20px;
+            }
+            .search-box {
+                width: 250px;
+            }
+        }
     }
 }
 </style>

src/views/ProductEdit.vue

@@ -128,7 +128,7 @@ export default {
                 .then(res => {
                     this.loading = false;
                     if (res.data.success) {
-                        this.formData.id = res.data.data.id;
+                        this.formData = res.data.data;
                         this.$message.success('保存成功');
                     } else {
                         console.log(res);

src/views/ShopBanner.vue

@@ -0,0 +1,127 @@
+<template>
+    <div>
+        <div class="action-container">
+            <div class="action">
+                <el-button icon="el-icon-plus" size="small" @click="add">添加</el-button>
+            </div>
+        </div>
+
+        <el-table :data="tableData">
+            <el-table-column prop="name" label="名称"></el-table-column>
+            <el-table-column prop="pic" label="图片">
+                <template slot-scope="{ row }">
+                    <el-image
+                        style="width: 100px; height: 80px"
+                        fit="cover"
+                        :src="row.pic"
+                        :preview-src-list="[row.pic]"
+                    ></el-image>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" width="200" align="center">
+                <template slot-scope="{ row }">
+                    <el-button size="mini" type="primary" @click="edit(row)">编辑</el-button>
+                    <el-button size="mini" type="danger" @click="del(row)">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-dialog :visible.sync="showDialog" title="编辑Banner">
+            <el-form :model="formData" ref="form" label-width="80px" size="small">
+                <el-form-item prop="name" label="名称">
+                    <el-input v-model="formData.name"></el-input>
+                </el-form-item>
+                <el-form-item prop="pic" label="图片">
+                    <single-upload v-model="formData.pic"></single-upload>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="showDialog = false" size="small">取消</el-button>
+                <el-button type="primary" :loading="loading" @click="save" size="small">保存</el-button>
+            </span>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            tableData: [],
+            formData: {},
+            showDialog: false,
+            loading: false,
+        };
+    },
+    created() {
+        this.getData();
+    },
+    methods: {
+        getData() {
+            this.$http
+                .get('/shopBanner/all')
+                .then(res => {
+                    if (res.success) {
+                        this.tableData = res.data;
+                    }
+                })
+                .catch(e => {
+                    console.log(e);
+                });
+        },
+        edit(row) {
+            this.formData = { ...row };
+            this.showDialog = true;
+        },
+        add() {
+            this.formData = {};
+            this.showDialog = true;
+        },
+        save() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.loading = true;
+                    this.$http
+                        .post('/shopBanner/save', this.formData)
+                        .then(res => {
+                            this.loading = false;
+                            this.showDialog = false;
+                            if (res.success) {
+                                this.$message.success('保存成功');
+                                this.getData();
+                            } else {
+                                this.$message.error(res.error);
+                            }
+                        })
+                        .catch(e => {
+                            this.loading = false;
+                            console.log(e);
+                        });
+                } else {
+                    return false;
+                }
+            });
+        },
+        del(row) {
+            this.$confirm('此操作不可恢复, 是否继续删除?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning',
+            })
+                .then(() => {
+                    return this.$axios.delete(`/shopBanner/${row.id}`);
+                })
+                .then(res => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(e => {
+                    console.log(e);
+                });
+        },
+    },
+};
+</script>
+
+<style>
+</style>

src/views/Users.vue

@@ -4,7 +4,12 @@
             <el-table-column prop="id" label="ID" width="120"></el-table-column>
             <el-table-column prop="avatar" label="头像" width="80" align="center">
                 <template slot-scope="{ row }">
-                    <img :src="row.avatar" class="avatar" />
+                    <el-image
+                        style="width: 30px; height: 30px; display: block; margin: auto;"
+                        fit="cover"
+                        :src="row.avatar"
+                        :preview-src-list="[row.avatar]"
+                    ></el-image>
                 </template>
             </el-table-column>
             <el-table-column prop="username" label="用户名" min-width="150" class-name="ellipsis"></el-table-column>