品牌招商

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

@@ -7,14 +7,17 @@ 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.http.server.reactive.ServerHttpResponse;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
+import reactor.core.publisher.Mono;
 
+import java.io.FileNotFoundException;
+import java.io.UnsupportedEncodingException;
 import java.util.List;
-import java.util.Map;
 
 /**
  * 二级页面
@@ -111,4 +114,15 @@ public class SinglePageController extends BaseController {
     public JsonModel<PageInfo<ImageLink>> gePromotionsList(@RequestParam(value = "pageNum", defaultValue = "1") int pageNum, @RequestParam(value = "pageSize", defaultValue = "20") int pageSize) {
         return singlePageService.gePromotionsList(pageNum, pageSize);
     }
+
+    /**
+     * 品牌招商表格下载
+     */
+    @GetMapping("/investment/export")
+    public Mono<Void> downloadByWriteWith(ServerHttpResponse response) throws UnsupportedEncodingException, FileNotFoundException {
+        return singlePageService.downloadByWriteWith(response);
+    }
+
+
+
 }

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

@@ -5,7 +5,11 @@ 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 org.springframework.http.server.reactive.ServerHttpResponse;
+import reactor.core.publisher.Mono;
 
+import java.io.FileNotFoundException;
+import java.io.UnsupportedEncodingException;
 import java.util.List;
 
 /**
@@ -24,4 +28,6 @@ public interface SinglePageService {
     JsonModel<List<PageFloor>> getTopicDataById(Integer id);
     /** 专题活动列表数据 */
     JsonModel<PageInfo<ImageLink>> gePromotionsList(int pageNum, int pageSize);
+    /** 品牌招商表格下载 */
+    Mono<Void> downloadByWriteWith(ServerHttpResponse response) throws UnsupportedEncodingException, FileNotFoundException;
 }

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

@@ -10,12 +10,18 @@ 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.http.HttpHeaders;
+import org.springframework.http.MediaType;
+import org.springframework.http.ZeroCopyHttpOutputMessage;
+import org.springframework.http.server.reactive.ServerHttpResponse;
 import org.springframework.stereotype.Service;
 import org.springframework.util.CollectionUtils;
+import reactor.core.publisher.Mono;
 
 import javax.annotation.Resource;
+import java.io.*;
+import java.net.URLEncoder;
 import java.text.SimpleDateFormat;
-import java.util.Date;
 import java.util.List;
 
 /**
@@ -107,4 +113,19 @@ public class SinglePageServiceImpl implements SinglePageService {
         PageInfo<ImageLink> pageInfo = new PageInfo(promotionsList);
         return JsonModel.success(pageInfo);
     }
+
+    /**
+     * 品牌招商表格下载
+     *
+     * @param response
+     */
+    @Override
+    public Mono<Void> downloadByWriteWith(ServerHttpResponse response) throws UnsupportedEncodingException {
+        ZeroCopyHttpOutputMessage zeroCopyResponse = (ZeroCopyHttpOutputMessage) response;
+        response.getHeaders().set(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=" + URLEncoder.encode("采美365网国际品牌招商资料填写表.xls", "UTF-8"));
+        response.getHeaders().setContentType(MediaType.APPLICATION_OCTET_STREAM);
+        String templateFile = "/mnt/newdatadrive/data/custom/www-export-template/investment_template.xlsx";
+        File file = new File(templateFile);
+        return zeroCopyResponse.writeWith(file, 0, file.length());
+    }
 }

src/main/resources/static/js/index.js

@@ -204,9 +204,9 @@ var homeData = new Vue({
                     setTimeout(function () {
                         distance = scoll;
                     },0);
-                    $('.floorTit').each(function (i,l) {
+                    $('.floorTit').each(function (i,e) {
                         //每个元素距离顶部的距离
-                        var top = $(this).offset().top;
+                        var top = $(e).offset().top;
                         if(scoll > distance){
                             if(scoll >= (top-300)){
                                 $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");

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

@@ -4,18 +4,99 @@
 <head>
     <title>采美365网-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
     <template th:replace="components/headLink"></template>
+    <style type="text/css">
+        /** PC */
+        @media screen and (min-width:768px){#investment .wrap{width:1184px;margin:0 auto -30px auto}
+            #investment .wrap img{display:block;width:100%}
+            #investment .wrap .btn{position:fixed;right:50%;margin-right:-510px;width:235px;top:200px}
+            #investment .wrap .btn a{display:block;width:235px;height:45px;margin-bottom:16px}
+            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
+            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
+            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
+        }
+        /** 移动端 */
+        @media screen and (max-width:768px){#investment .wrap{width:100vw;margin:0 auto;position:relative}
+            #investment .wrap img{display:block;width:100%}
+            #investment .wrap .btn{position:absolute;left:23vw;bottom:4vw}
+            #investment .wrap .btn a{display:inline-block;width:54vw;height:12vw;background-size:100%}
+            #investment .more{background:url(/img/investment/pc_more.png) no-repeat center center}
+            #investment .back{background:url(/img/investment/pc_back.png) no-repeat center center}
+            #investment .down{background:url(/img/investment/pc_download.png) no-repeat center center}
+        }
+    </style>
 </head>
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
 
 <!-- 品牌招商介绍 -->
-<div id="container">
-
+<div id="investment">
+    <div class="wrap">
+        <div v-if="isPC">
+            <template v-if="firstPage">
+                <img src="/img/investment/pc_1.jpg">
+                <img src="/img/investment/pc_2.jpg">
+                <img src="/img/investment/pc_3.jpg">
+                <div class="btn">
+                    <a href="javascript:void(0);" class="more" @click="showMore()"></a>
+                    <a href="javascript:void(0);" class="down" @click="toDownload()"></a>
+                </div>
+            </template>
+            <template v-else>
+                <img src="/img/investment/pc_4.jpg">
+                <div class="btn">
+                    <a href="javascript:void(0);" class="back" @click="goBack()"></a>
+                    <a href="javascript:void(0);" class="down" @click="toDownload()"></a>
+                </div>
+            </template>
+        </div>
+        <div v-else>
+            <template v-if="firstPage">
+                <img src="/img/investment/h5_1.jpg">
+                <img src="/img/investment/h5_2.jpg">
+                <img src="/img/investment/h5_3.jpg">
+                <div class="btn">
+                    <a href="javascript:void(0);" class="more" @click="showMore()"></a>
+                </div>
+            </template>
+            <template v-else>
+                <img src="/img/investment/h5_4.jpg">
+                <img src="/img/investment/h5_5.jpg">
+                <div class="btn">
+                    <a href="javascript:void(0);" class="back" @click="goBack()"></a>
+                </div>
+            </template>
+        </div>
+    </div>
 </div>
 
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
+<script type="text/javascript">
+var investment = new Vue({
+    el: "#investment",
+    data: {
+        firstPage: true
+    },
+    methods: {
+        showMore: function(){
+            $("html,body").animate({scrollTop:0},500);
+            this.firstPage = false;
+        },
+        goBack: function(){
+            $("html,body").animate({scrollTop:0},500);
+            this.firstPage = true;
+        },
+        toDownload: function(){
+            $.get("investment/export").done(function (r) {
+                if (r.code === 0 && r.data) {
+                    window.location.href =  r.data;
+                }
+            });
+        }
+    }
+});
+</script>
 </body>
 </html>