修复自由页 专题页 二级列表 背景色 背景图动态设置

src/main/java/com/caimei/www/pojo/page/PageContent.java

@@ -49,5 +49,15 @@ public class PageContent implements Serializable {
      */
     private List<Parameter> pageContents;
 
+    /**
+     * 背景色
+     */
+    private String backgroundColour;
+
+    /**
+     * 背景图
+     */
+    private String backgroundImage;
+
     private static final long serialVersionUID = 1L;
 }

src/main/resources/mapper/SinglePageMapper.xml

@@ -2,14 +2,14 @@
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.caimei.www.mapper.SinglePageDao">
     <select id="getFreePageById" resultType="com.caimei.www.pojo.page.PageContent">
-        select  a.id, a.type, a.title, a.keywords, a.description, f.content
+        select  a.id, a.type, a.title, a.keywords, a.description, f.content, a.backgroundColour, a.backgroundImage
         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
         and a.id=#{id}
     </select>
     <select id="getTopicPageById" resultType="com.caimei.www.pojo.page.PageContent">
-        select  a.id, a.type, a.title, a.keywords, a.description, a.headImage as image, a.headText as content
+        select  a.id, a.type, a.title, a.keywords, a.description, a.headImage as image, a.headText as content, a.backgroundColour, a.backgroundImage
         from cm_page a
         where a.type=1 and a.enabledStatus=1
         and a.id=#{id}

src/main/resources/static/css/activity/activityTopic.css

@@ -1,6 +1,7 @@
 a:hover{color:#333}
 .clearfix::after{content:'';display:block;clear:both}
-.mg-bottom{padding-bottom: 6vw;}
+.bg-repeat{background-repeat: repeat-x;}
+.bg-cover{background-size: cover;}
 @-webkit-keyframes my-fade-ease{0%{opacity:0}
 100%{opacity:0.8}
 }@keyframes my-fade-ease{0%{opacity:0}
@@ -153,6 +154,7 @@ a:hover{color:#333}
 }
 
 @media screen and (max-width:768px){
+    .activity{padding-bottom: 6vw;}
     .banner{width:100vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden}
     .banner img{display:block;width:100vw;height:48vw;max-width:unset}
     .show-more{padding-top:6vw;width:100vw;text-align:center}

src/main/resources/static/js/activity/activityTopic.js

@@ -14,6 +14,7 @@ var activity = new Vue({
             userId: '',
             source: 1
         },
+        bgClass:'',
         isPc: window.isPC
     },
     filters: {
@@ -90,6 +91,11 @@ var activity = new Vue({
                 if (res.code === 0) {
                     _self.floorList = res.data.floorList;
                     _self.pageInfo = res.data.page;
+                    if( _self.pageInfo.backgroundImageWay == 1){
+                        _self.bgClass = 'bg-repeat';
+                    }else{
+                        _self.bgClass = 'bg-cover';
+                    }
                     setTimeout(function () {
                         _self.fromatFloorProductStatus(_self.floorList);
                         if (_self.isPc) {

src/main/resources/static/js/common/serviceapi/pages.service.js

@@ -16,6 +16,18 @@ var PagesApi = {
                 callback(res);
             });
         },
+        /* 自由页数据 */
+        GetPageFree: function (params, callback) {
+            Http.AjaxService({
+                url:'/commodity/home/free',
+                type:'GET',
+                data:params,
+                json:false,
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
         /* 活动商品专题列表 */
         GetPromotionsListData: function (params, callback) {
             Http.AjaxService({

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

@@ -1,19 +1,39 @@
 var freePage = new Vue({
     el: "#freePage",
     data: {
-
+        pageId:0,
+        bgClass:'',
+        pageInfo:{}
     },
     computed: {
 
     },
     methods: {
-
+        getFloorDatas: function () {
+            var _self = this;
+            if(_self.pageId ===0){return;}
+            PagesApi.GetPageFree({id: _self.pageId}, function (response) {
+                if (response.code === 0) {
+                    _self.pageInfo =  response.data;
+                    if( _self.pageInfo.backgroundImageWay == 1){
+                        _self.bgClass = 'bg-repeat';
+                    }else{
+                        _self.bgClass = 'bg-cover';
+                    }
+                } else {
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            });
+        },
     },
     created: function () {
 
     },
     mounted: function () {
         var _self = this;
+        var paramsArr = window.location.pathname.split(".")[0].split("-");
+        this.pageId  =  paramsArr.length>=1 ? paramsArr[1] : '';
+        this.getFloorDatas();
        if (!isPC) {
             var scale = $(window).width()/1184;
             var beforeHeight = $(".freePage").height();

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

@@ -4,7 +4,9 @@ var topicPage = new Vue({
         pageId: 0,
         floorDatas: [],
         buttonName:'',
-        buttonLink:''
+        buttonLink:'',
+        bgClass:'',
+        pageInfo:{}
     },
     methods: {
         getFloorDatas: function () {
@@ -14,6 +16,12 @@ var topicPage = new Vue({
                 if (response.code === 0) {
                     var data = response.data;
                     _self.floorDatas = data.floorList;
+                    _self.pageInfo = data.page;
+                    if( _self.pageInfo.backgroundImageWay == 1){
+                        _self.bgClass = 'bg-repeat';
+                    }else{
+                        _self.bgClass = 'bg-cover';
+                    }
                     _self.buttonLink = data.page.buttonLink;
                     _self.buttonName = data.page.buttonName;
                 } else {

src/main/resources/templates/activity/activityTopic.html

@@ -15,7 +15,12 @@
   <!-- 引用头部 -->
   <template th:replace="components/header"></template>
 
-  <div id="activity" class="activity" v-cloak :class="isPC ? '' : 'mg-bottom' ">
+  <div id="activity"
+       class="activity"
+       v-cloak
+       :class="bgClass"
+       :style="{backgroundColor:pageInfo.backgroundColour,backgroundImage:'url('+pageInfo.backgroundImage+')'}"
+  >
     <!--  loading  -->
     <div v-if="listLoading" class="loading">
         <img src="/img/base/loading.gif">

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

@@ -29,7 +29,10 @@
 <template th:replace="components/header"></template>
 
 <!-- 自由页面 -->
-<div id="freePage">
+<div id="freePage"
+     :class="bgClass"
+     :style="{backgroundColor:pageInfo.backgroundColour,backgroundImage:'url('+pageInfo.backgroundImage+')'}"
+>
     <template v-if="isPC">
         <div class="freePage" th:utext="${pageData.content}"></div>
     </template>
@@ -41,6 +44,7 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pages.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/single-page/page.js(v=${version})}"></script>
 
 </body>

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

@@ -14,7 +14,10 @@
 <template th:replace="components/header"></template>
 
 <!-- 二级页面 -->
-<div id="topicPage">
+<div id="topicPage"
+     :class="bgClass"
+     :style="{backgroundColor:pageInfo.backgroundColour,backgroundImage:'url('+pageInfo.backgroundImage+')'}"
+>
     <div class="pageTop">
         <img th:src="${pageData.image}">
         <p th:if="not${#strings.isEmpty(pageData.content)}" th:utext="${pageData.content}"></p>