Banner管理

shop/src/main/java/com/zskk/shop/controller/admin/BannerController.java

@@ -28,7 +28,7 @@ public class BannerController extends AbstractController {
 	@RequestMapping("/list")
 	@ResponseBody
 	public ControllerResult list(){
-		return new ControllerResult(bannerService.queryAllOnline());
+		return new ControllerResult(bannerService.queryAll());
 	}
 	
 	@RequestMapping("/get")

shop/src/main/java/com/zskk/shop/controller/h5/H5IndexController.java

@@ -56,7 +56,7 @@ public class H5IndexController extends AbstractController {
 	public String index(Model model, @RequestParam(name="search", required=false) String search, @RequestParam(name="label", required=false) Integer label){
 		List<GoodBean> beans 		= this.getGoodList(label, search);
 		List<SysLabel> labels		= this.queryAllSysLabel();
-		List<Banner> banners		= bannerService.queryAllOnline();
+		List<Banner> banners		= bannerService.queryOnlines();
 		
 		model.addAttribute("beans", beans);
 		model.addAttribute("labels", labels);

shop/src/main/java/com/zskk/shop/service/BannerService.java

@@ -46,7 +46,7 @@ public class BannerService {
 	 * 查询全部上线的banner
 	 * @return
 	 */
-	public List<Banner> queryOnline(){
+	public List<Banner> queryOnlines(){
 		return bannerMapper.queryOnlineBanners();
 	}
 	
@@ -54,8 +54,8 @@ public class BannerService {
 	 * 查询全部banner
 	 * @return
 	 */
-	public List<Banner> queryAllOnline(){
-		return bannerMapper.queryOnlineBanners();
+	public List<Banner> queryAll(){
+		return bannerMapper.queryAllBanners();
 	}
 	
 	/**
@@ -102,7 +102,7 @@ public class BannerService {
 			throw new ZSKKException(ErrorConstant.PARAM_ERROR);
 		}
 		banner.setStatus(status);
-		bannerMapper.updateBanner(banner);
+		bannerMapper.setStatus(banner);
 		return banner;
 	}
 	

shop/src/main/resource/templates/h5/indexv2.html

@@ -43,14 +43,8 @@
         <div class="scroll relative">
             <div class="scroll_box" id="scroll_img">
                 <ul class="scroll_wrap">
-                    <li>
-                        <a href="#"><img src="/h5/images/1.jpg" width="100%" /></a>
-                    </li>
-                    <li>
-                        <a href="#"><img src="/h5/images/2.jpg" width="100%" /></a>
-                    </li>
-                    <li>
-                        <a href="#"><img src="/h5/images/3.jpg" width="100%" /></a>
+                    <li th:each="banner:${banners}">
+                        <a th:attr="href=${banner.url}"><img th:attr="src=${banner.icon}" width="100%" /></a>
                     </li>
                 </ul>
             </div>

shop/static/manager/src/api/index.js

@@ -90,5 +90,10 @@ export default {
     getAllSysConfig: (params, vue) => post(`${serverPath}manage/config/getAll`, params, vue),
     releaseSysConfig: (params, vue) => post(`${serverPath}manage/config/release`, params, vue),
 
+    bannerList: (params, vue) => post(`${serverPath}manage/banner/list`, params, vue),
+    bannerGet: (params, vue) => post(`${serverPath}manage/banner/get`, params, vue),
+    bannerSave: (params, vue) => post(`${serverPath}manage/banner/save`, params, vue),
+    bannerSetStatus: (params, vue) => post(`${serverPath}manage/banner/setstatus`, params, vue),
+
     loginout: (params, vue) => post(`${serverPath}help/loginout`, params, vue),
 }

shop/static/manager/src/components/Sidebar.vue

@@ -44,6 +44,7 @@ export default {
       items.push({ icon: '', index: '/manageUser', title: '用户管理'})
       items.push({ icon: '', index: '/faqManage', title: '常见问题'})
       items.push({ icon: '', index: '/sysConfig', title: '系统配置'})
+      items.push({ icon: '', index: '/bannerManage', title: 'Banner管理'})
       this.items  = items
       for (var i in items){
           var item = items[i]

shop/static/manager/src/components/page/banner/BannerManager.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <el-button type="primary" @click="goEdit({id:0})">添加</el-button>
+        <el-table :data="items">
+            <el-table-column label="标题" prop="title"></el-table-column>
+            <el-table-column label="宣传图" prop="icon"></el-table-column>
+            <el-table-column label="跳转地址" prop="url"></el-table-column>
+            <el-table-column label="状态">
+                <template slot-scope="scope">
+                    <template v-if="scope.row.status === 1">
+                        <p class="online">启用</p>
+                    </template>
+                    <template v-else>
+                        <p class="offline">禁用</p>
+                    </template>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作">
+                <template slot-scope="scope">
+                    <template v-if="scope.row.status == 0">
+                        <el-button type="success" @click="setStatus(scope.row)">启用</el-button>
+                    </template>
+                    <template v-else>
+                        <el-button type="danger" @click="setStatus(scope.row)">禁用</el-button>
+                    </template>
+
+                    <el-button type="text" size="small" @click="goEdit(scope.row)">编辑</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      items: []
+    }
+  },
+  methods: {
+    getItems: function() {
+      this.$http.bannerList({}, this).then(res => {
+        if (res.code === 0) {
+          this.items = res.obj
+        }
+      })
+    },
+    setStatus: function(row) {
+      var status = row.status === 1 ? 0 : 1
+      var msg = status === 1 ? '启用' : '禁用'
+      this.$confirm(
+        '您确定要将此Banner设置为 "' + msg + '" , 是否继续?',
+        '提示',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        this.$http
+          .bannerSetStatus({ id: row.id, status: status }, this)
+          .then(res => {
+            if (res.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success'
+              })
+              row.status = status
+            }
+          })
+      })
+    },
+    goEdit:function(row){
+        this.$router.push({ path: '/editBanner', query: { id: row.id } })
+    }
+  },
+  mounted: function() {
+    this.getItems()
+  }
+}
+</script>
+<style>
+.online {
+  color: #67c23a;
+}
+.offline {
+  color: #f56c6c;
+}
+</style>

shop/static/manager/src/components/page/banner/EditBanner.vue

@@ -0,0 +1,101 @@
+<template>
+    <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item label="标题">
+            <el-input v-model="form.title"></el-input>
+        </el-form-item>
+        <el-form-item label="宣传图">
+            <el-upload class="avatar-uploader" :action="uploadAction" :show-file-list="false" :on-success="onUploadSuccess" :before-upload="onBeforeUpload">
+                <img v-if="form.icon" :src="form.icon" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+        </el-form-item>
+        <el-form-item label="跳转地址">
+
+            <el-input v-model="form.url"></el-input>
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="save">保存</el-button>
+            <el-button @click="goBack">取消</el-button>
+        </el-form-item>
+    </el-form>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      uploadAction: process.env.SERVER_PATH + 'upload',
+      form: {
+        id: 0,
+        title: '',
+        icon: '',
+        url: ''
+      }
+    }
+  },
+  methods: {
+    save: function() {
+      var that = this
+      this.$http
+        .bannerSave(
+          {
+            id: this.form.id,
+            title: this.form.title,
+            icon: this.form.icon,
+            url: this.form.url
+          },
+          this
+        )
+        .then(res => {
+          if (res.code === 0) {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1000,
+              onClose: function() {
+                that.goBack()
+              }
+            })
+          }
+        })
+    },
+    goBack: function() {
+      this.$router.back()
+    },
+    onBeforeUpload: function(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isPNG = file.type === 'image/png'
+
+      if (!isJPG && !isPNG) {
+        this.$message.error('上传商品图标只能是 JPG/PNG 格式!')
+        return false
+      } else {
+        return true
+      }
+    },
+    onUploadSuccess: function(res, file) {
+      if (res.code != 0) {
+        this.$message.error(
+          '上传图片失败 原因:' + res.msg + '(' + res.code + ')'
+        )
+        return
+      } else {
+        this.form.icon = res.obj
+      }
+    }
+  },
+  mounted: function() {
+    var id = this.$route.query.id
+    if (id === 0) {
+      return
+    }
+    this.form.id = id
+    this.$http.bannerGet({ id: id }, this).then(res => {
+      if (res.code === 0) {
+        this.form.title = res.obj.title
+        this.form.icon = res.obj.icon
+        this.form.url = res.obj.url
+      }
+    })
+  }
+}
+</script>

shop/static/manager/src/router/index.js

@@ -61,6 +61,14 @@ export default new Router({
                 {
                     path: '/editSysConfig',
                     component: resolve => require(['../components/page/config/EditShopConfig'], resolve)
+                },
+                {
+                    path: '/bannerManage',
+                    component: resolve => require(['../components/page/banner/BannerManager'], resolve)
+                },
+                {
+                    path: 'editBanner',
+                    component: resolve => require(['../components/page/banner/EditBanner'], resolve)
                 }
             ]
         },