专题活动列表

src/main/java/com/caimei/www/controller/RedirectController.java

@@ -12,16 +12,49 @@ import org.springframework.web.bind.annotation.PathVariable;
  */
 @Controller
 public class RedirectController {
-
+	/**
+	 * 商品详情【旧】
+	 */
 	@GetMapping("/product-{id}.html")
 	public String toProduct(@PathVariable("id") Integer productId) {
 		return "redirect:/product/detail.html?id=" + productId;
 	}
-
+	/**
+	 * 二级页面（找产品/找仪器/找项目/正品联盟）【旧】
+	 */
+	@GetMapping("/cmpage/info-1-{id}.html")
+	public String toTopic(@PathVariable("id") Integer type) {
+		return "redirect:/topic.html?type=" + type;
+	}
+	/**
+	 * 项目仪器详情【旧】
+	 */
 	@GetMapping("/cmpage/info-2-{id}.html")
 	public String toInstrument(@PathVariable("id") Integer instrumentId) {
 		return "redirect:/instrument/detail.html?id=" + instrumentId;
 	}
+	/**
+	 * 直播页面【旧】
+	 */
+	@GetMapping("/cmpage/info-3-{id}.html")
+	public String toLive(@PathVariable("id") Integer id) {
+		return "redirect:/live.html?id=" + id;
+	}
+	/**
+	 * 自由页面【旧】
+	 */
+	@GetMapping("/cmpage/info-4-{id}.html")
+	public String toFreePage(@PathVariable("id") Integer id) {
+		return "redirect:/page.html?id=" + id;
+	}
+	/**
+	 * 专题活动列表页【旧】
+	 */
+	@GetMapping("/cmpage/area.html")
+	public String toPpromotions() {
+		return "redirect:/promotions.html";
+	}
+
 
 
 }

src/main/java/com/caimei/www/controller/SinglePageController.java

@@ -1,9 +1,11 @@
 package com.caimei.www.controller;
 
 import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.content.PageContent;
 import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.service.SinglePageService;
+import com.github.pagehelper.PageInfo;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
@@ -52,27 +54,11 @@ public class SinglePageController extends BaseController {
         return TOPIC_PATH;
     }
 
-    /**
-     * 二级专题数据
-     * @return
-     */
-    @GetMapping("/page/topic")
-    @ResponseBody
-    public JsonModel<List<PageFloor>> getTopicDataById(@RequestParam("type") Integer id) {
-        return singlePageService.getTopicDataById(id);
-    }
-
-
-
-
-
-
-
     /**
      * 专题活动列表页
      */
     @GetMapping("/promotions.html")
-    public String promotions(final Model model) {
+    public String promotions() {
         return PROMOTIONS_PATH;
     }
 
@@ -105,4 +91,24 @@ public class SinglePageController extends BaseController {
         return MAINTENANCE_PATH;
     }
 
+
+    /**
+     * 二级专题数据
+     * @return
+     */
+    @GetMapping("/page/topic")
+    @ResponseBody
+    public JsonModel<List<PageFloor>> getTopicDataById(@RequestParam("type") Integer id) {
+        return singlePageService.getTopicDataById(id);
+    }
+
+    /**
+     * 专题活动列表数据
+     * @return
+     */
+    @GetMapping("/promotions/list")
+    @ResponseBody
+    public JsonModel<PageInfo<ImageLink>> gePromotionsList(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue = "20") int pageSize) {
+        return singlePageService.gePromotionsList(pageNum, pageSize);
+    }
 }

src/main/java/com/caimei/www/mapper/SinglePageDao.java

@@ -43,4 +43,10 @@ public interface SinglePageDao {
      * @return
      */
     List<ImageLink> getDataByFloorId(Integer floorId);
+
+    /**
+     * 专题活动列表数据
+     * @return
+     */
+    List<ImageLink> getPromotionsList();
 }

src/main/java/com/caimei/www/pojo/content/ImageLink.java

@@ -13,7 +13,9 @@ import java.util.Date;
 @Data
 public class ImageLink {
 	private Integer id;
+	private Integer status;
 	private String title;
+	private String detail;
 	private String link;
 	private String image;
 	/** 活动开始时间 */

src/main/java/com/caimei/www/service/SinglePageService.java

@@ -1,8 +1,10 @@
 package com.caimei.www.service;
 
 import com.caimei.www.pojo.JsonModel;
+import com.caimei.www.pojo.content.ImageLink;
 import com.caimei.www.pojo.content.PageContent;
 import com.caimei.www.pojo.content.PageFloor;
+import com.github.pagehelper.PageInfo;
 
 import java.util.List;
 
@@ -20,4 +22,6 @@ public interface SinglePageService {
     PageContent getTopicPageById(Integer id);
     /** 二级专题数据 */
     JsonModel<List<PageFloor>> getTopicDataById(Integer id);
+    /** 专题活动列表数据 */
+    JsonModel<PageInfo<ImageLink>> gePromotionsList(int pageNum, int pageSize);
 }

src/main/java/com/caimei/www/service/impl/SinglePageServiceImpl.java

@@ -7,11 +7,15 @@ import com.caimei.www.pojo.content.PageContent;
 import com.caimei.www.pojo.content.PageFloor;
 import com.caimei.www.service.SinglePageService;
 import com.caimei.www.utils.ImageUtil;
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 import org.springframework.util.CollectionUtils;
 
 import javax.annotation.Resource;
+import java.text.SimpleDateFormat;
+import java.util.Date;
 import java.util.List;
 
 /**
@@ -69,4 +73,38 @@ public class SinglePageServiceImpl implements SinglePageService {
         }
         return JsonModel.success(pageFloors);
     }
+
+    /**
+     * 专题活动列表数据
+     *
+     * @param pageNum
+     * @param pageSize
+     */
+    @Override
+    public JsonModel<PageInfo<ImageLink>> gePromotionsList(int pageNum, int pageSize) {
+        PageHelper.startPage(pageNum, pageSize);
+        List<ImageLink>  promotionsList = singlePageDao.getPromotionsList();
+        if (!CollectionUtils.isEmpty(promotionsList)) {
+            long currentTime = System.currentTimeMillis();
+            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
+            promotionsList.forEach(item -> {
+                if(null != item.getBeginTime() && null != item.getEndTime() && (item.getEndTime().getTime() > item.getBeginTime().getTime() ) && (item.getBeginTime().getTime() > currentTime)){
+                    //即将开始: 活动开始时间小于当前时间
+                    item.setStatus(1);
+                }
+                if(null != item.getBeginTime() && null != item.getEndTime() && (item.getEndTime().getTime() > currentTime ) && (item.getBeginTime().getTime() < currentTime)) {
+                    //进行中: 当前时间小于活动开始，小于活动结束时间
+                    item.setStatus(2);
+                }
+                if(null != item.getBeginTime() && null != item.getEndTime() && (currentTime > item.getEndTime().getTime()) && (item.getEndTime().getTime() > item.getBeginTime().getTime())) {
+                    //已结束: 活动结束时间小于结束时间
+                    item.setStatus(3);
+                }
+                String format = sdf.format(item.getBeginTime())+"～"+sdf.format(item.getEndTime());
+                item.setDetail(format);
+            });
+        }
+        PageInfo<ImageLink> pageInfo = new PageInfo(promotionsList);
+        return JsonModel.success(pageInfo);
+    }
 }

src/main/resources/mapper/SinglePageMapper.xml

@@ -5,13 +5,13 @@
         select  a.id, a.type, a.title, a.keywords, a.description, f.content
         from cm_page a
         left join cm_page_freedom f on a.id=f.pageId
-        where a.type='4' and a.enabledStatus='1' and f.type='1'
+        where a.type=4 and a.enabledStatus=1 and f.type=1
         and a.id=#{id}
     </select>
     <select id="getTopicPageById" resultType="com.caimei.www.pojo.content.PageContent">
         select  a.id, a.type, a.title, a.keywords, a.description, a.headImage as image, a.headText as content
         from cm_page a
-        where a.type='1' and a.enabledStatus='1'
+        where a.type=1 and a.enabledStatus=1
         and a.id=#{id}
     </select>
 
@@ -34,4 +34,16 @@
         where b.centreId=#{floorId} and  a.enabledStatus=1
         order  by a.sort desc,a.createDate desc
     </select>
+    <select id="getPromotionsList" resultType="com.caimei.www.pojo.content.ImageLink">
+        select  a.id as id,
+                a.title as title,
+                a.link as link,
+                a.image as image,
+                a.beginTime as beginTime,
+                a.endTime as endTime
+        from cm_page_image a
+        where a.type=4 and a.enabledStatus=1
+        order by a.sort desc,a.createDate desc
+    </select>
+
 </mapper>

src/main/resources/static/css/base/base.h5.css

@@ -107,6 +107,7 @@
 .productItem .item .btn{height:9vw;line-height:9vw}
 .productItem .item .btn{display:inline-block;width:35.8vw;height:9vw;text-align:center;overflow:hidden;color:#F94B4B;background:#FEF6F3;border-radius:2px}
 .productItem .item .btn.add{background:#FEF6F3;color:#E15616;}
+.noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
 /*登录弹框*/
 .loginAlert{display:none;background-color:rgba(74,79,88,.7);z-index:999}
 .loginAlert .box{box-sizing:border-box;width:74.6vw;height:80vw;padding-top:7.6vw;position:relative;top:50%;margin:-40vw auto 0 auto;font-size:3.7vw;background:#FFF;border-radius:1.6vw;color:#4A4F58;line-height:5.4vw;text-align:center}

src/main/resources/static/css/instrument/search.css

@@ -28,7 +28,6 @@ li{list-style:none}
     .empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw}
     .empty img{width:40vw;height:40vw}
     .empty a{color:#E15616}
-    .noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
     .instrumentList{width:96vw;margin:2.6vw auto 0;overflow: hidden;}
     .instrumentList>ul{width:100vw;}
     .instrumentItem{width:45.4vw;height:40vw;background:#FFF;border-radius:2px;margin:0 1.3vw 2.6vw 1.3vw;}

src/main/resources/static/css/product/list.css

@@ -45,7 +45,6 @@ li{list-style:none}
     .empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw;}
     .empty img{width:40vw;height:40vw;}
     .empty a{color:#E15616;}
-    .noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
     .productList{width:96.6vw;margin:1.3vw auto;box-sizing:border-box}
 
 }

src/main/resources/static/css/single-page/promotions.css

@@ -0,0 +1,31 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    .promotions{width:100%;background:#FFF;position:relative;margin-top:16px}
+    .promotions a{display:block;font-size:20px;}
+    .promotions img{display:block;width:100%;height:auto}
+    .promotions p{position:absolute;left:0;bottom:0;width:100%;height:48px;line-height:48px;box-sizing:border-box;padding:0 360px 0 16px;background:rgba(255,255,255,.8);color:#E15616;}
+    .promotions .time{position:absolute;right:0;color:#FFF;height:48px;line-height:48px;padding:0 16px;background:-webkit-linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);background:-moz-linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);background:-o-linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);background:linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);opacity:.8}
+    .promotions .finish{position:absolute;left:0;bottom:0;width:100%;height:100%;background:rgba(255,255,255,.8) url(/img/common/act-end.png) no-repeat center center}
+
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+.promotions{width:100%;min-height:32vw;background:#FFF;position:relative;margin-bottom:2.6vw}
+.promotions a{display:block;font-size:3.1vw;white-space:nowrap}
+.promotions img{display:block;width:100%;height:auto}
+.promotions p{position:absolute;left:0;bottom:0;width:100%;height:9.6vw;line-height:9.6vw;box-sizing:border-box;padding:0 1vw;background:rgba(255,255,255,.8);color:#E15616;font-size:3.4vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.promotions .time{position:absolute;top:0;left:50%;transform:translateX(-50%);color:#FFF;height:6.4vw;line-height:6.4vw;padding:0 2.6vw;background:-webkit-linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);background:-moz-linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);background:-o-linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);background:linear-gradient(135deg,rgba(249,75,75,1) 0%,rgba(188,60,255,1) 100%);opacity:.8}
+.promotions .finish{position:absolute;left:0;bottom:0;width:100%;height:100%;background:rgba(255,255,255,.8) url(/img/common/act-end.png) no-repeat center center;background-size:32%;}
+
+
+
+}
+

src/main/resources/static/css/supplier/search.css

@@ -42,7 +42,6 @@ li{list-style:none}
     .empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw}
     .empty img{width:40vw;height:40vw}
     .empty a{color:#E15616}
-    .noMore{height:10vw;line-height:10vw;text-align:center;color:#ccc}
     .supplierItem{width:100vw;margin:2.8vw auto 0;box-sizing:border-box;padding:2.6vw 3.3vw;background:#FFF;overflow:hidden}
     .supplierItem .left{padding-left:13.6vw;position:relative}
     .supplierItem .left .logo{position:absolute;left:0;top:0;width:12.2vw;height:12.2vw}

src/main/resources/static/js/single-page/promotions.js

@@ -0,0 +1,110 @@
+var promotionsList = new Vue({
+    el: "#promotionsList",
+    data: {
+        searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        params: {
+            size: 0,
+            num: 0
+        },
+        listData: [],
+        listRecord: 0,
+        pageInput: ''
+    },
+    computed: {
+        pageTotal: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function () {
+            var total = Math.ceil(this.listRecord / this.params.size);
+            total = total > 0 ? total : 1;
+            var index = this.params.num, arr = [];
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+                return arr;
+            }
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    methods: {
+        toPagination: function (pageNum) {
+            if (pageNum <= this.pageTotal) {
+                var params = {pageNum: pageNum};
+                window.location.href = updateUrlParam(params);
+            }
+        },
+        checkNum: function () {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        gePromotionsList: function () {
+            var _self = this;
+            $.getJSON("/promotions/list", {
+                pageSize: this.params.size,
+                pageNum: this.params.num
+            }).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.listRecord = r.data.total;
+                    if(isPC){
+                        _self.listData = r.data.list;
+                    }else{
+                        _self.listData = _self.listData.concat(r.data.list);
+                    }
+                }
+                _self.listLoading = false;
+                _self.requestFlag = true;
+            });
+        },
+
+    },
+    created: function () {
+        if (isPC) {
+            this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 10;
+            this.params.num = getUrlParam("pageNum") ? getUrlParam("pageNum") * 1 : 1;
+        } else {
+            this.params.size = 10;
+            this.params.num = 1;
+        }
+        // 获取列表数据
+        this.gePromotionsList();
+    },
+    mounted: function () {
+        var _self = this;
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+            //移动端上垃加载更多
+            $(window).on('scroll', function(){
+                var scrollTop = $(this).scrollTop();
+                var scrollHeight = $(document).height();
+                var windowHeight = window.innerHeight;
+                if (scrollTop + windowHeight >= scrollHeight) {
+                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                    var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
+                    var next = _self.params.num+1;
+                    if(next <= totalPage){
+                        _self.params.num = next;
+                        if (_self.requestFlag){
+                            // 获取列表数据
+                            _self.gePromotionsList();
+                        }
+                        _self.requestFlag = false;
+                    }else{
+                        //到底了
+                        _self.noMore = true;
+                        $('footer').removeClass("noneImportant");
+                    }
+                }
+            });
+        }
+    }
+});

src/main/resources/templates/single-page/live.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
+    <template th:replace="components/headLink"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 专题活动列表页 -->
+<div id="container">
+
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/footLink"></template>
+</body>
+</html>

src/main/resources/templates/single-page/promotions.html

@@ -4,18 +4,43 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/headLink"></template>
+    <link th:href="@{/css/single-page/promotions.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
-<!-- 专题活动列表页 -->
-<div id="container">
-
+<!-- 二级页面 -->
+<div id="promotionsList">
+    <ul class="wrap">
+        <li class="promotions" v-for="item in listData"><a :href="item.link">
+            <img :src="item.image">
+            <p v-text="item.title"></p>
+            <span v-if="item.status==1" class="time" v-text="''+item.detail">活动时间：活动即将开始</span>
+            <span v-if="item.status==2" class="time" v-text="'活动时间：'+item.detail"></span>
+            <span v-if="item.status==3" class="finish"></span>
+        </a></li>
+    </ul>
+    <!--分页-->
+    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
+    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
+        <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
+        <template v-for="n in showPageBtn">
+            <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
+            <span v-else>···</span>
+        </template>
+        <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
+        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+        <span>跳至</span>
+        <input v-model="pageInput" @blur="checkNum()"/>
+        <span>页</span>&nbsp;
+        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+    </div>
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/single-page/promotions.js(v=${version})}"></script>
 </body>
 </html>