修改app兼容性问题

components/canvasShow/basics/banner.vue

@@ -1,68 +1,67 @@
 <template>
   <div class="banner" :class="'terminal' + terminal">
-    <swiper class="swiper" :indicator-dots="true" :autoplay="true" :style="{'height':componentContent.height + 'rpx'}">
-      <swiper-item class="banner-item" v-for="(item,index) in bannerList" :key="index" :style="{backgroundImage: 'url('+ item.bannerUrl +')','height':componentContent.height + 'rpx'}">
-        <div class="a-link" @click="jumpLink(item.linkObj)"><img class="img" :src="item.bannerUrl" v-show="item.bannerUrl" mode="widthFix"></div>
+    <swiper class="swiper" :indicator-dots="false" :autoplay="true" :style="{'height':bannerHeight + 'rpx'}" @change="swiperChange">
+      <swiper-item class="banner-item" v-for="(item,index) in bannerList" :key="index" :style="{backgroundImage: 'url('+ item.bannerUrl +')','height':bannerHeight + 'rpx'}"  @click="jumpLink(item.linkObj)">
+        <!--        <div class="a-link" @click="jumpLink(item.linkObj)"><img class="img" :src="item.bannerUrl" v-show="item.bannerUrl" mode="widthFix"></div>-->
       </swiper-item>
     </swiper>
-    <div class="swiper-pagination" slot="pagination"></div>
+    <view class="swiper-dots" v-if="bannerList && bannerList.length > 1">
+      <text class="dot" :class="index === swiperCurrent  && 'dot-active'" v-for="(dot, index) in bannerList.length"
+            :key="index"></text>
+    </view>
   </div>
 </template>
 
 <script>
-// import { directive, Swiper, SwiperSlide } from 'vue-awesome-swiper'
-// import 'swiper/css/swiper.css'
-  import {funMixin} from '../config/mixin'
-  export default {
-    name: 'cereBanner',
-    mixins: [funMixin],
-    data () {
-      return {
-        // swiperOption: {
-        //   autoplay: false, // 可选选项，自动滑动
-        //   loop: true,
-        //   pagination: {
-        //     el: '.swiper-pagination'
-        //   }
-        // }
-      }
-    },
-    props: {
-      terminal: {
-        type: Number,
-        default: 4
-      },
-      componentContent: {
-        type: Object
-      }
-    },
-    // components: {
-    //   Swiper,
-    //   SwiperSlide
-    // },
-    // directives: {
-    //   swiper: directive
-    // },
-    mounted() {
-      this.$forceUpdate() // 刷新轮播图
+import {funMixin} from '../config/mixin'
+export default {
+  name: 'cereBanner',
+  mixins: [funMixin],
+  data () {
+    return {
+      bannerHeight: 0,
+      swiperCurrent: 0
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
     },
-    computed: {
-      bannerList: function () {
-        console.log(this.componentContent)
-        return this.componentContent.bannerData.filter(function (item) {
-          return item.bannerUrl
-        })
-      }
+    componentContent: {
+      type: Object
+    }
+  },
+  mounted() {
+    this.bannerHeight = this.componentContent.height
+    this.$forceUpdate() // 刷新轮播图
+  },
+  computed: {
+    bannerList: function () {
+      console.log(this.componentContent)
+      return this.componentContent.bannerData.filter(function (item) {
+        return item.bannerUrl
+      })
+    }
+  },
+  methods:{
+    swiperChange(e) {
+      this.swiperCurrent = e.detail.current;
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
 .banner{
-  .banner-item {
+  position: relative;
+  .banner-item{
     width: 100%;
-    img {
-      width: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto 100%;
+    img{
+      display: none;
     }
   }
   &.terminal4{
@@ -81,49 +80,28 @@
       }
     }
   }
-  ::v-deep .uni-swiper-dots{
-      display: flex;
-      justify-content: center;
-      bottom: 20upx;
-      width: 100%;
-     .uni-swiper-dot{
-        width: 30upx;
-        height: 4upx;
-        background: #fff;
-        opacity: 0.5;
-        border-radius: 2upx;
-        margin: 0 7.5upx;
-       .uni-swiper-dot-active{
-          opacity: 1;
-          width: 58upx;
-        }
-      }
-  }
 
-  /* wx-swiper-dots wx-swiper-dots-horizontal */
-  wx-swiper .wx-swiper-dot-active{
-    width: 40rpx;
-    border-radius: 10rpx;
-    background: #eb544d;
+  .swiper-dots {
+    display: flex;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20upx;
+    z-index: 200;
+    .dot {
+      width: 12upx;
+      height: 12upx;
+      background: #FFFFFF;
+      border-radius: 6upx;
+      opacity: 0.2;
+      margin: 0 10upx;
+    }
+
+    .dot-active {
+      opacity: 1;
+      width: 24upx;
+    }
   }
 
-  //.swiper-pagination{
-  //  display: flex;
-  //  justify-content: center;
-  //  bottom: 20upx;
-  //  width: 100%;
-  //  ::v-deep .swiper-pagination-bullet{
-  //    width: 30upx;
-  //    height: 4upx;
-  //    background: #fff;
-  //    opacity: 0.5;
-  //    border-radius: 2upx;
-  //    margin: 0 7.5upx;
-  //  }
-  //  ::v-deep .swiper-pagination-bullet-active{
-  //    opacity: 1;
-  //    width: 58upx;
-  //  }
-  //}
 }
 </style>

components/canvasShow/basics/brandList.vue

@@ -17,113 +17,115 @@
 </template>
 
 <script>
-  import {funMixin} from '../config/mixin'
-  export default {
-    name: 'brandList',
-    mixins: [funMixin],
-    props: {
-      terminal: {
-        type: Number,
-        default: 4
-      },
-      componentContent: {
-        type: Object
-      }
+import {funMixin} from '../config/mixin'
+export default {
+  name: 'brandList',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    componentContent: {
+      type: Object
     }
   }
+}
 </script>
 <style lang="scss" scoped>
-  .brand-list{
-    color: #fff;
-    padding: 20upx 0;
-    .hom-title{
-      font-size: 22upx;
-      color: #333;
-      line-height: 1em;
-      margin-bottom: 23upx;
-      font-weight: bold;
-    }
-    .content-warp{
+.brand-list{
+  color: #fff;
+  padding: 20upx 0;
+  .hom-title{
+    font-size: 22upx;
+    color: #333;
+    line-height: 1em;
+    margin-bottom: 23upx;
+    font-weight: bold;
+  }
+  .content-warp{
+    display: flex;
+  }
+  .first{
+    width: 24%;
+    padding-top: 10upx;
+    .item{
+      background-color: #7A8594;
+      height: 336upx;
       display: flex;
+      flex-direction: column;
+      justify-content: center;
+      .h3{
+        font-size: 30upx;
+        line-height: 46upx;
+        margin-bottom: 10upx;
+      }
     }
-    .first{
-      width: 24%;
-      padding-top: 10upx;
+  }
+  .ul{
+    width: 100%;
+    .li{
+      width: 25%;
+      float: left;
+      padding: 10upx 0 0 10upx;
+      box-sizing: border-box;
       .item{
-        background-color: #7A8594;
-        height: 336upx;
+        height: auto;
         display: flex;
         flex-direction: column;
         justify-content: center;
-        .h3{
-          font-size: 30upx;
-          line-height: 46upx;
-          margin-bottom: 10upx;
+        .imgBox {
+          padding-bottom: 80%;
+          background-color: #cacaca;
+          position: relative;
         }
-      }
-    }
-    .ul{
-      width: 100%;
-      .li{
-        width: 25%;
-        float: left;
-        padding: 10upx 0 0 10upx;
-        .item{
-          height: auto;
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          .imgBox {
-            padding-bottom: 80%;
-            background-color: #cacaca;
-            position: relative;
-          }
-          .h4{
-            font-size: 18upx;
-            color: #333333;
-            text-align: center;
-            height: 40upx;
-            line-height: 40upx;
-          }
-          .p{
-            font-size: 12upx;
-            margin: 7upx 0 12upx;
-          }
-          img {
-            max-width: 100%;
-            height: 100%;
-            max-height: 100%;
-            position: absolute;
-            margin: auto;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-          }
+        .h4{
+          font-size: 18upx;
+          color: #333333;
+          text-align: center;
+          height: 40upx;
+          line-height: 40upx;
+        }
+        .p{
+          font-size: 12upx;
+          margin: 7upx 0 12upx;
+        }
+        img {
+          max-width: 100%;
+          height: 100%;
+          max-height: 100%;
+          position: absolute;
+          margin: auto;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
         }
       }
     }
   }
-  .terminal1,.terminal2,.terminal3{
-    &.brand-list{
-      width: 710upx;
-      margin: 0 auto;
-      .content-warp{
-        display: block;
-      }
-      .first{
-        width: 100%;
-      }
-      .ul{
-        width: auto;
-        margin-left: -10upx;
-        .li{
-          width: 50%;
-          .item {
-            padding-left: 0;
-          }
+}
+.terminal1,.terminal2,.terminal3{
+  &.brand-list{
+    width: 710upx;
+    margin: 0 auto;
+    .content-warp{
+      display: block;
+    }
+    .first{
+      width: 100%;
+    }
+    .ul{
+      width: auto;
+      margin-left: -15upx;
+      .li{
+        width: 50%;
+        padding: 15upx 0 0 15upx;
+        .item {
+          padding-left: 0;
         }
       }
     }
   }
+}
 </style>

components/canvasShow/basics/categoryList.vue

@@ -4,11 +4,11 @@
     <div class="content-warp">
       <div class="ul clearfix" :class="{number5: componentContent.categoryData.length === 5}">
         <div class="li" v-for="(item) of componentContent.categoryData" :key="item.id">
-            <a class="item a-link" @click="jumpCategory(item)">
+          <a class="item a-link" @click="jumpCategory(item)">
             <div class="imgBox">
-               <img ref="getHeight" :src="item.img" v-show="item.img" :alt="item.name">
+              <img ref="getHeight" :src="item.img" v-show="item.img" :alt="item.name">
             </div>
-            </a>
+          </a>
         </div>
       </div>
     </div>
@@ -17,94 +17,93 @@
 
 <script>
 import {funMixin} from '../config/mixin'
-  export default {
-    name: 'categoryList',
-    mixins: [funMixin],
-    props: {
-      terminal: {
-        type: Number,
-        default: 4
-      },
-      componentContent: {
-        type: Object
-      }
+export default {
+  name: 'categoryList',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    componentContent: {
+      type: Object
     }
   }
+}
 </script>
 <style lang="scss" scoped>
-  .category-list{
-    padding: 20upx 0;
-    .hom-title{
-      font-size: 22upx;
-      color: #333;
-      line-height: 1em;
-      margin-bottom: 23upx;
-      font-weight: bold;
-      text-align: center;
-    }
-    .content-warp{
+.category-list{
+  padding: 20upx 0;
+  .hom-title{
+    font-size: 22upx;
+    color: #333;
+    line-height: 1em;
+    margin-bottom: 23upx;
+    font-weight: bold;
+    text-align: center;
+  }
+  .content-warp{
+    display: flex;
+    .ul{
+      width: 100%;
       display: flex;
-      .ul{
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-        .li{
-          flex: 1;
-          padding: 10upx 0 0 10upx;
-          .item{
-            height: auto;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            .imgBox {
-              padding-bottom: 80%;
-              background-color: #cacaca;
-              position: relative;
-            }
-            img {
-              max-width: 100%;
-              height: 100%;
-              max-height: 100%;
-              position: absolute;
-              margin: auto;
-              top: 0;
-              right: 0;
-              bottom: 0;
-              left: 0;
-            }
+      flex-wrap: wrap;
+      .li{
+        flex: 1;
+        padding: 10upx 0 0 10upx;
+        box-sizing: border-box;
+        .item{
+          height: auto;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          .imgBox {
+            padding-bottom: 80%;
+            background-color: #cacaca;
+            position: relative;
+          }
+          img {
+            max-width: 100%;
+            height: 100%;
+            max-height: 100%;
+            position: absolute;
+            margin: auto;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
           }
         }
       }
-      .number5 {
-        display: block;
-        .li {
-          width: 25%;
-          float: left;
-        }
-        .li:nth-child(1) {
-          width: 50%;
-        }
+    }
+    .number5 {
+      display: block;
+      .li {
+        width: 25%;
+        float: left;
+      }
+      .li:nth-child(1) {
+        width: 50%;
       }
     }
   }
-  @media screen and (max-width: 768px) {
-    .category-list .content-warp .ul .li{
-      flex: 0 0 50%;
-      width: 0;
-    }
+}
+@media screen and (max-width: 768px) {
+  .category-list .content-warp .ul .li{
+    flex: 0 0 50%;
   }
-  .terminal1,.terminal2,.terminal3{
-    width: 710upx;
-    margin: 0 auto;
-    &.category-list .content-warp .ul{
+}
+.terminal1,.terminal2,.terminal3{
+  &.category-list .content-warp{
+    display: block;
+    .ul{
       margin: -15upx 0 0 -15upx;
+      width: auto;
       .li{
         flex: 0 0 50%;
-        width: 0;
-        &:nth-child(1){
-          width: 0;
-        }
+        padding: 15upx 0 0 15upx;
       }
     }
   }
+}
 </style>

components/canvasShow/basics/coupon/app/index.vue

@@ -2,8 +2,14 @@
   <div class="coupon">
     <div class="coupon-list">
       <div class="coupon-item" v-for="(item,index) in couponsData" :key="index" :class="item.state && item.state !== 3 && 'isReceive'">
+        <!-- #ifdef MP-WEIXIN -->
         <img class="coupon-item-bg" src="../../../static/images/coupon/bg-coupon.png" v-if="item.state && item.state === 3" mode="widthFix">
         <img class="coupon-item-bg" src="../../../static/images/coupon/bg-coupon2.png" v-else mode="widthFix">
+        <!-- #endif -->
+        <!-- #ifdef H5 || APP-PLUS -->
+        <image class="coupon-item-bg" src="../../../static/images/coupon/bg-coupon.png" v-if="item.state && item.state === 3" mode="widthFix">
+        <image class="coupon-item-bg" src="../../../static/images/coupon/bg-coupon2.png" v-else mode="widthFix">
+        <!-- #endif -->
         <div class="coupon-item-cont">
         <div class="coupon-item-content">
           <div class="coupon-item-price">
@@ -12,7 +18,7 @@
             <div class="b" v-else>{{item.reduceMoney}}</div>
             <div class="b" v-if="item.couponType == 2">折券</div>
           </div>
-          <div class="coupon-item-date">{{item.startTime.split(' ')[0]}} - {{item.endTime.split(' ')[0]}}</div>
+          <div class="coupon-item-date">{{item.activityStartTime.split(' ')[0].replace(/-/g, '.')}}-{{item.activityEndTime.split(' ')[0].replace(/-/g, '.')}}</div>
           <div class="coupon-item-text">{{item.content}}</div>
         </div>
         <button v-if="item.state === 0" class="coupon-item-btn">已领取</button>

components/canvasShow/basics/custom.vue

@@ -1,26 +1,24 @@
 <template>
-  <div class="custom warp" :class="'terminal' + terminal">
+  <div class="custom" :class="'terminal' + terminal">
     <div class="rowLayout" v-if="componentContent.layoutType ==='L1' || componentContent.layoutType ==='L2' || componentContent.layoutType ==='L3' || componentContent.layoutType ==='L4'">
       <div class="customLayout" :style="{'padding':'0 ' + componentContent.pageSpacing + 'px','marginLeft':(-componentContent.imgClearance) +'px'}">
         <div class="ul clearfix" :class="'layout'+componentContent.layoutType">
-          <a class="a-link" @click="jumpLink(item.linkObj)">
-          <div class='li' v-if="item.src" v-for="(item,index) of componentContent.imgData" :key="index" :style="{'backgroundImage':'url(' + item.src + ')','width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','paddingLeft':componentContent.imgClearance +'px'}">
-<!--           <img class="img" :src="item.src" v-if="item.src" mode="widthFix">-->
+          <div class='li' v-for="(item,index) of componentContent.imgData" :key="index" :style="{'width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','paddingLeft':componentContent.imgClearance +'px'}">
+            <a class="a-link" @click="jumpLink(item.linkObj)"><img class="img" :src="item.src" v-if="item.src" mode="widthFix"></a>
           </div>
-          </a>
         </div>
       </div>
     </div>
-    <div class="boxLayout" v-else :style="{'padding':'0 ' + componentContent.pageSpacing + 'px','paddingBottom':componentContent.maxH !== 0?getItemValue(componentContent.maxH) + '%': '100%'}">
-      <div class="boxLayoutInner">
-        <div class="boxWarp">
-          <div class="customLayout" :style="{'marginLeft':(-componentContent.imgClearance) +'px','top':(-componentContent.imgClearance) +'px'}">
-            <div class="ul clearfix" :class="'layout'+componentContent.layoutType">
-              <a class="a-link" @click="jumpLink(item.linkObj)">
-                <div class='li' v-for="(item,index) of componentContent.imgData" v-if="item.src" :key="index" :style="{'backgroundImage':'url(' + item.src + ')','width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','padding':componentContent.imgClearance +'px 0 0 ' + componentContent.imgClearance +'px'}">
-<!--                  <img class="img" :src="item.src" v-if="item.src" mode="widthFix">-->
+    <div v-else :style="{'padding':'0 ' + componentContent.pageSpacing + 'upx'}">
+      <div class="boxLayout" :style="{'paddingBottom':componentContent.maxH !== 0?getItemValue(componentContent.maxH) + '%': '100%'}">
+        <div class="boxLayoutInner">
+          <div class="boxWarp">
+            <div class="customLayout" :style="{'marginLeft':(-componentContent.imgClearance) +'px','top':(-componentContent.imgClearance) +'px'}">
+              <div class="ul clearfix" :class="'layout'+componentContent.layoutType">
+                <div class='li' v-for="(item,index) of componentContent.imgData" :key="index" :style="{'width':getItemValue(item.width) + '%','height':getItemValue(item.height) + '%','left':getItemValue(item.left) + '%','top':getItemValue(item.top) + '%','padding':componentContent.imgClearance +'px 0 0 ' + componentContent.imgClearance +'px'}">
+                  <a class="a-link" @click="jumpLink(item.linkObj)"><img class="img" :src="item.src" v-if="item.src" mode="widthFix"></a>
                 </div>
-              </a>
+              </div>
             </div>
           </div>
         </div>
@@ -30,214 +28,211 @@
 </template>
 
 <script>
-  import {funMixin} from '../config/mixin'
-  export default {
-    name: 'customComponent',
-    mixins: [funMixin],
-    data () {
-      return {
-      }
-    },
-    props: {
-      terminal: {
-        type: Number,
-        default: 4
-      },
-      componentContent: {
-        type: Object
-      }
+import {funMixin} from '../config/mixin'
+export default {
+  name: 'customComponent',
+  mixins: [funMixin],
+  data () {
+    return {
+    }
+  },
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
     },
-    methods: {
-      // 计算生成格子百分比
-      getItemValue (val) {
-        const density = parseInt(this.componentContent.density)
-        if (val === 0 || density === 0) {
-          return 0
-        }
-        return (val / density * 10000 / 100.00)// 小数点后两位百分比
-      }
+    componentContent: {
+      type: Object
+    }
+  },
+  methods: {
+    // 计算生成格子百分比
+    getItemValue (val) {
+      const density = parseInt(this.componentContent.density)
+      if (val === 0 || density === 0) {
+        return 0
+      }
+      return (val / density * 10000 / 100.00)// 小数点后两位百分比
     }
   }
+}
 </script>
 
 <style lang="scss" scoped>
-  .custom{
-	  width: 710upx;
-	  margin: 0 auto;
-    .boxLayout{
+.custom{
+  //width: 710upx;
+  //margin: 0 auto;
+  .boxLayout{
+    position: relative;
+    .boxLayoutInner{
+      padding-bottom: 100%;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 0;
+    }
+    .boxWarp{
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      overflow: hidden;
+    }
+  }
+  .customLayout{
+    position: relative;
+    .ul{
+      display: flex;
+      flex-wrap: wrap;
       position: relative;
-      .boxLayoutInner{
-        padding-bottom: 100%;
-        position: absolute;
+    }
+    .li{
+      box-sizing: border-box;
+      .img{
         width: 100%;
-        left: 0;
-        top: 0;
+        display: block;
       }
-      .boxWarp{
+    }
+    .layoutL1 .li{
+      flex: 0 0 100%;
+    }
+    .layoutL2 .li{
+      flex: 0 0 50%;
+    }
+    .layoutL3 .li{
+      flex: 0 0 33.3%;
+    }
+    .layoutL4 .li{
+      flex: 0 0 25%;
+    }
+    .layoutT2B2{
+      padding-bottom: 100%;
+      .li{
+        width: 50%;
+        height: 50%;
         position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        top: 0;
-        overflow: hidden;
+        .img{
+          width: 100%;
+          height: 100%;
+        }
+        &:nth-child(1){
+          left: 0;
+          top: 0;
+        }
+        &:nth-child(2){
+          right: 0;
+          top: 0;
+        }
+        &:nth-child(3){
+          left: 0;
+          bottom: 0;
+        }
+        &:nth-child(4){
+          right: 0;
+          bottom: 0;
+        }
       }
     }
-    .customLayout{
-      position: relative;
-      .ul{
-        display: flex;
-        flex-wrap: wrap;
-        position: relative;
-      }
+    .layoutL1R2{
+      padding-bottom: 100%;
       .li{
-		 box-sizing: border-box;
-        background-position: center center;
-        background-size: contain;
-        background-repeat: no-repeat;
+        width: 50%;
+        height: 50%;
+        position: absolute;
         .img{
           width: 100%;
-          display: block;
+          height: 100%;
+        }
+        &:nth-child(1){
+          height: 100%;
+          left: 0;
+          top: 0;
+        }
+        &:nth-child(2){
+          right: 0;
+          top: 0;
+        }
+        &:nth-child(3){
+          right: 0;
+          bottom: 0;
         }
       }
-      .layoutL1 .li{
-        flex: 0 0 100%;
-      }
-      .layoutL2 .li{
-        flex: 0 0 50%;
-      }
-      .layoutL3 .li{
-        flex: 0 0 33.3%;
-      }
-      .layoutL4 .li{
-        flex: 0 0 25%;
+    }
+    .layoutT1B2{
+      padding-bottom: 100%;
+      .li{
+        width: 50%;
+        height: 50%;
+        position: absolute;
+        .img{
+          width: 100%;
+          height: 100%;
+        }
+        &:nth-child(1){
+          width: 100%;
+          left: 0;
+          top: 0;
+        }
+        &:nth-child(2){
+          left: 0;
+          bottom: 0;
+        }
+        &:nth-child(3){
+          right: 0;
+          bottom: 0;
+        }
       }
-      .layoutT2B2{
-        padding-bottom: 100%;
-        .li{
+    }
+    .layoutL1T1B2{
+      padding-bottom: 50%;
+      .li{
+        position: absolute;
+        .img{
+          width: 100%;
+          height: 100%;
+        }
+        &:nth-child(1){
           width: 50%;
-          height: 50%;
-          position: absolute;
-          .img{
-            width: 100%;
-            height: 100%;
-          }
-          &:nth-child(1){
-            left: 0;
-            top: 0;
-          }
-          &:nth-child(2){
-            right: 0;
-            top: 0;
-          }
-          &:nth-child(3){
-            left: 0;
-            bottom: 0;
-          }
-          &:nth-child(4){
-            right: 0;
-            bottom: 0;
-          }
+          height: 100%;
+          left: 0;
+          top: 0;
         }
-      }
-      .layoutL1R2{
-        padding-bottom: 100%;
-        .li{
+        &:nth-child(2){
+          right: 0;
+          top: 0;
           width: 50%;
           height: 50%;
-          position: absolute;
-          .img{
-            width: 100%;
-            height: 100%;
-          }
-          &:nth-child(1){
-            height: 100%;
-            left: 0;
-            top: 0;
-          }
-          &:nth-child(2){
-            right: 0;
-            top: 0;
-          }
-          &:nth-child(3){
-            right: 0;
-            bottom: 0;
-          }
         }
-      }
-      .layoutT1B2{
-        padding-bottom: 100%;
-        .li{
-          width: 50%;
+        &:nth-child(3){
+          left: 50%;
+          bottom: 0;
+          width: 25%;
           height: 50%;
-          position: absolute;
-          .img{
-            width: 100%;
-            height: 100%;
-          }
-          &:nth-child(1){
-            width: 100%;
-            left: 0;
-            top: 0;
-          }
-          &:nth-child(2){
-            left: 0;
-            bottom: 0;
-          }
-          &:nth-child(3){
-            right: 0;
-            bottom: 0;
-          }
         }
-      }
-      .layoutL1T1B2{
-        padding-bottom: 50%;
-        .li{
-          position: absolute;
-          .img{
-            width: 100%;
-            height: 100%;
-          }
-          &:nth-child(1){
-            width: 50%;
-            height: 100%;
-            left: 0;
-            top: 0;
-          }
-          &:nth-child(2){
-            right: 0;
-            top: 0;
-            width: 50%;
-            height: 50%;
-          }
-          &:nth-child(3){
-            left: 50%;
-            bottom: 0;
-            width: 25%;
-            height: 50%;
-          }
-          &:nth-child(4){
-            right: 0;
-            bottom: 0;
-            width: 25%;
-            height: 50%;
-          }
+        &:nth-child(4){
+          right: 0;
+          bottom: 0;
+          width: 25%;
+          height: 50%;
         }
       }
-      .layoutaverage{
-        padding-bottom: 100%;
-        .li{
-          position: absolute;
-          .img{
-            width: 100%;
-            height: 100%;
-          }
+    }
+    .layoutaverage{
+      padding-bottom: 100%;
+      .li{
+        position: absolute;
+        .img{
+          width: 100%;
+          height: 100%;
         }
       }
-      // #ifdef MP
-      .layoutaverage{
-        padding-bottom: 91%;
-      }
-      // #endif
     }
+    // #ifdef MP
+    .layoutaverage{
+      padding-bottom: 91%;
+    }
+    // #endif
   }
+}
 </style>

components/canvasShow/basics/discount/app/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="hom-pro-list">
     <div class="title">
+      <!-- #ifdef MP-WEIXIN -->
       <img class="title-img" src="../../../static/images/discount/img-title.png" alt="限时折扣" mode="widthFix"/>
+      <!-- #endif -->
+      <!-- #ifdef H5 || APP-PLUS -->
+      <image class="title-img" src="../../../static/images/discount/img-title.png" alt="限时折扣" mode="widthFix"/>
+      <!-- #endif -->
     </div>
     <div v-if="componentContent.arrangeType == '横向滑动' && productData.products.length > 2" class="product-list">
       <swiper ref="mySwiper" class="swiper product-list-box" :indicator-dots="true" :autoplay="true" :display-multiple-items="2">
@@ -14,7 +19,12 @@
             <label class="product-name">{{item.productName}}</label>
             <div>
               <div class="flag">
-                <img src="../../../static/images/discount/flag-discount2.png" alt="限时折扣" mode="widthFix"/>
+                <!-- #ifdef MP-WEIXIN -->
+                <img class="icon" src="../../../static/images/discount/flag-discount2.png" alt="限时折扣" mode="widthFix"/>
+                <!-- #endif -->
+                <!-- #ifdef H5 || APP-PLUS -->
+                <image class="icon" src="../../../static/images/discount/flag-discount2.png" alt="限时折扣" mode="widthFix"/>
+                <!-- #endif -->
               </div>
               <label class="buy-count">剩余{{item.stockNumber}}件</label>
             </div>
@@ -43,7 +53,12 @@
             <label class="product-name">{{item.productName}}</label>
             <div>
               <div class="flag">
-                <img src="../../../static/images/discount/flag-discount2.png" alt="限时折扣" mode="widthFix"/>
+                <!-- #ifdef MP-WEIXIN -->
+                <img class="icon" src="../../../static/images/discount/flag-discount2.png" alt="限时折扣" mode="widthFix"/>
+                <!-- #endif -->
+                <!-- #ifdef H5 || APP-PLUS -->
+                <image class="icon" src="../../../static/images/discount/flag-discount2.png" alt="限时折扣" mode="widthFix"/>
+                <!-- #endif -->
               </div>
               <label class="buy-count">剩余{{item.stockNumber}}件</label>
             </div>
@@ -179,8 +194,10 @@ export default {
       .flag{
         float: left;
         margin-right: 20upx;
-        img{
-          width: 100upx;
+        .icon{
+          width: 100rpx;
+          height: 40rpx;
+          display: block;
         }
       }
       .buy-count{

components/canvasShow/basics/group/app/index.vue

@@ -3,31 +3,38 @@
     <div class="group-warp">
       <div class="title">
         <label>
+          <!-- #ifdef MP-WEIXIN -->
           <img class="title-img" src="../../../static/images/group/img-title.png" alt="拼团专区" mode="widthFix"/>
-        </label>
-        <a v-show="componentContent.showMore" class="btn-all a-link" @click="jumpGroupWorks(productData)">更多<i class="iconfont icon-arrow-right"></i></a>
-      </div>
-      <div>
-      <swiper class="swiper pro-box" :indicator-dots="true" :autoplay="true" :display-multiple-items="3">
-        <swiper-item class="swiper-slide pro-item-warp" v-for="(item,index) in productData.products" :key="index" @click="jumpProductDetail(item)">
-         <div class="pro-item-inner">
-           <div class="pro-item">
-             <div class="pro-item-img">
-               <img v-show="item.image" class="img" :src="item.image">
-             </div>
-             <div class="pro-item-info">
-               <label class="name">{{item.productName}}</label>
-               <div class="price">
-                 <label class="unit">¥ </label>
-                 <label class="val"> {{item.price}}</label>
-               </div>
-               <label class="buyCount">{{item.workUsers?item.workUsers:0}}人已拼</label>
-             </div>
-           </div>
-         </div>
-        </swiper-item>
-      </swiper>
-<!--      <div class="pagination group-pagination"></div>-->
+          <!-- #endif -->
+          <!-- #ifdef H5 || APP-PLUS -->
+          <image class="title-img" src="../../../static/images/group/img-title.png" alt="拼团专区" mode="widthFix"/>
+          <!-- #endif -->
+         </label>
+         <a v-show="componentContent.showMore" class="btn-all a-link" @click="jumpGroupWorks(productData)">更多<i class="iconfont icon-arrow-right"></i></a>
+       </div>
+       <div>
+       <swiper class="swiper pro-box" :indicator-dots="productData.show" :autoplay="true" :display-multiple-items="3">
+         <swiper-item class="swiper-slide pro-item-warp" v-for="(item,index) in productData.products" :key="index" @click="jumpProductDetail(item)">
+          <div class="pro-item-inner">
+            <div class="pro-item">
+              <div class="pro-item-img">
+                <img v-show="item.image" class="img" :src="item.image">
+              </div>
+              <div class="pro-item-info">
+                <label class="name">{{item.productName}}</label>
+                <div class="price">
+                  <label class="unit">¥ </label>
+                  <label class="val"> {{item.price}}</label>
+                </div>
+                <label class="buyCount">{{item.workUsers?item.workUsers:0}}人已拼</label>
+              </div>
+            </div>
+          </div>
+         </swiper-item>
+         <swiper-item v-if="productData.products.length" class="swiper-slide pro-item-warp" v-for="item in (3 - productData.products.length)">
+         </swiper-item>
+       </swiper>
+ <!--      <div class="pagination group-pagination"></div>-->
       </div>
     </div>
   </div>
@@ -53,6 +60,8 @@ export default {
       //   }
       // }
     }
+  },
+  mounted() {
   }
 }
 </script>

components/canvasShow/basics/group/mixin.js

@@ -59,6 +59,11 @@ export const commonMixin = {
           }
           this.sendReq(params, (res) => {
             _.productData.products = res.data
+            if (_.productData.products.length > 2) {
+              _.productData.show = true
+            } else {
+              _.productData.show = false
+            }
           })
         } else if(_.typeId === 3) {
           if(_.componentContent.shopGroupWorkId){

components/canvasShow/basics/imageTextList.vue

@@ -59,6 +59,7 @@
       .li{
         flex: 0 0 50%;
         padding: 15upx 0 0 15upx;
+        box-sizing: border-box;
         .item{
           .itemImgBox {
             height: auto;

components/canvasShow/basics/newProduct/app/index.vue

@@ -10,12 +10,22 @@
             <div class="product-swiper-info">
               <label class="product-name">{{item.productName}}</label>
               <div class="price-warp">
-                <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png"></image>
+                <!-- #ifdef MP-WEIXIN -->
+                <img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
+                <img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
+                <img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
+                <img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
+                <img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
+                <img class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png">
+                <!-- #endif -->
+                <!-- #ifdef H5 || APP-PLUS -->
+                <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
+                <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
+                <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
+                <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
+                <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
+                <image class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png">
+                <!-- #endif -->
                 <div class="price">
                   ¥ {{item.price}}
                 </div>

components/canvasShow/basics/price/app/index.vue

@@ -3,7 +3,12 @@
     <div class="group-warp">
       <div class="title">
         <label>
+          <!-- #ifdef MP-WEIXIN -->
           <img class="title-img" src="../../../static/images/price/img-title.png" alt="组合优惠" mode="widthFix"/>
+          <!-- #endif -->
+          <!-- #ifdef H5 || APP-PLUS -->
+          <image class="title-img" src="../../../static/images/price/img-title.png" alt="组合优惠" mode="widthFix"/>
+          <!-- #endif -->
         </label>
         <div class="price-text">
           <swiper class="swiper" :autoplay="true" :vertical="true">

components/canvasShow/basics/product/app/index.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="hom-pro-list">
     <div class="title">
+      <!-- #ifdef MP-WEIXIN -->
       <img class="title-img" src="../../../static/images/product/img-title.png" alt="商品推荐" mode="widthFix"/>
+      <!-- #endif -->
+      <!-- #ifdef H5 || APP-PLUS -->
+      <image class="title-img" src="../../../static/images/product/img-title.png" alt="商品推荐" mode="widthFix"/>
+      <!-- #endif -->
     </div>
     <div v-if="componentContent.arrangeType == '横向滑动' && productData.length > 2" class="product-list">
       <swiper ref="mySwiper" class="swiper product-list-box" :indicator-dots="true" :autoplay="true" :display-multiple-items="2">
@@ -22,12 +27,22 @@
                 <label class="buy-count">{{item.users?item.users: 0}}人付款</label>
               </div>
               <div class="price-warp">
-                <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png"></image>
+                <!-- #ifdef MP-WEIXIN -->
+                <img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
+                <img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
+                <img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
+                <img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
+                <img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
+                <img class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png">
+                <!-- #endif -->
+                <!-- #ifdef H5 || APP-PLUS -->
+                <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
+                <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
+                <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
+                <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
+                <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
+                <image class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png">
+                <!-- #endif -->
                 <div class="price">
                   ¥ {{item.price}}
                 </div>
@@ -60,12 +75,22 @@
                 <label class="buy-count">{{item.users?item.users: 0}}人付款</label>
               </div>
               <div class="price-warp">
-                <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image>
-                <image class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png"></image>
+                <!-- #ifdef MP-WEIXIN -->
+                <img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
+                <img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
+                <img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
+                <img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
+                <img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
+                <img class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png">
+                <!-- #endif -->
+                <!-- #ifdef H5 || APP-PLUS -->
+                <image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
+                <image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
+                <image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
+                <image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
+                <image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
+                <image class="iconImg" v-if="item.activityType == 8" src="../../../static/images/memberCenterIcon.png">
+                <!-- #endif -->
                 <div class="price">
                   ¥ {{item.price}}
                 </div>

components/canvasShow/basics/spike/app/index.vue

@@ -3,7 +3,12 @@
     <div class="spike-card" v-if="productData.products && productData.products.length>0">
       <div class="spike-card-top">
         <h2 class="spike-card-top-title">
+          <!-- #ifdef MP-WEIXIN -->
           <img class="title-img" src="../../../static/images/spike/img-title.png" alt="秒杀专区" mode="widthFix"/>
+          <!-- #endif -->
+          <!-- #ifdef H5 || APP-PLUS -->
+          <image class="title-img" src="../../../static/images/spike/img-title.png" alt="秒杀专区" mode="widthFix"/>
+          <!-- #endif -->
         </h2>
         <div class="spike-card-top-time" v-if="state===2">
           活动已结束
@@ -52,7 +57,7 @@ export default {
   background: #F8F8F8;
   padding: 20upx;
   &-card{
-    height: 498upx;
+    height: 430upx;
     background: #FFFFFF;
     border-radius: 20upx;
     &-top{
@@ -111,7 +116,7 @@ export default {
       }
       &-img{
         width: 162upx;
-        height: 196upx;
+        height: 162upx;
         margin-right: 10upx;
         float: left;
         img {

components/canvasShow/basics/vip/app/index.vue

@@ -2,7 +2,12 @@
   <div class="vip">
     <div class="vip-card">
       <div class="vip-title">
+        <!-- #ifdef MP-WEIXIN -->
+        <img class="title-img" src="../../../static/images/vip/img-title.png" alt="会员专区" mode="widthFix"/>
+        <!-- #endif -->
+        <!-- #ifdef H5 || APP-PLUS -->
         <image class="title-img" src="../../../static/images/vip/img-title.png" alt="会员专区" mode="widthFix"/>
+        <!-- #endif -->
         <a v-show="componentContent.showMore" class="btn-more a-link" @click="jumpVip">更多<i class="iconfont icon-arrow-right"></i></a>
       </div>
       <div>
@@ -24,7 +29,12 @@
               </div>
               <div class="price-warp">
                 <div class="flag">
-                  <image src="../../../static/images/vip/flag-vip.png" alt="会员价" class="flagImg"/>
+                  <!-- #ifdef MP-WEIXIN -->
+                  <img src="../../../static/images/vip/flag-vip.png" alt="会员价" class="flagImg"/>
+                  <!-- #endif -->
+                  <!-- #ifdef H5 || APP-PLUS -->
+                  <image class="flagImg" src="../../../static/images/vip/flag-vip.png" alt="会员专区" mode="widthFix"/>
+                  <!-- #endif -->
                 </div>
                 <div class="price">
                   ¥ {{item.price}}
@@ -44,7 +54,7 @@
           <div class="vip-item-warp" v-for="(itemJ,indexJ) in listTemp" :key="indexJ">
             <div class="vip-item"  v-for="(item,index) in itemJ" :key="index" @click="jumpProductDetail(item)">
               <div class="vip-item-img">
-                <image v-show="item.image" class="img" :src="item.image">
+                <img v-show="item.image" class="img" :src="item.image">
               </div>
               <div class="vip-item-info">
                 <h3 class="name">
@@ -58,7 +68,12 @@
                 </div>
                 <div class="price-warp">
                   <div class="flag">
-                    <image src="../../../static/images/vip/flag-vip.png" alt="会员价" class="flagImg"/>
+                    <!-- #ifdef MP-WEIXIN -->
+                    <img src="../../../static/images/vip/flag-vip.png" alt="会员价" class="flagImg"/>
+                    <!-- #endif -->
+                    <!-- #ifdef H5 || APP-PLUS -->
+                    <image class="flagImg" src="../../../static/images/vip/flag-vip.png" alt="会员专区" mode="widthFix"/>
+                    <!-- #endif -->
                   </div>
                   <div class="price">
                     ¥ {{item.price}}
@@ -171,7 +186,7 @@ export default {
       position: relative;
       .name{
         font-size: 28upx;
-        height: 80rpx;
+        height: 75rpx;
         line-height: 40upx;
         color: #333333;
         padding: 30upx 0 10upx;
@@ -179,8 +194,13 @@ export default {
         text-overflow:ellipsis;
         display:-webkit-box;
         -webkit-box-orient:vertical;
-        -webkit-line-clamp:2;
+        -webkit-line-clamp:1;
       }
+      // #ifdef H5 || APP-PLUS
+      .name{
+        height: 40rpx;
+      }
+      // #endif
       .stock{
         color: #C5AA7B;
         font-size: 20upx;

components/canvasShow/canvasShowPage.vue

@@ -140,7 +140,7 @@
 
 <style lang="scss">
   .warp{
-    width: 710px;
+    width: 710upx;
     margin: 0 auto;
     max-width: 100%;
     &.terminal4{

components/canvasShow/config/mixin/funMixin.js

@@ -153,6 +153,9 @@ export const tool = {
     },
     // 跳转到公告详情
     jumpNoticeDetail(item){
+      uni.navigateTo({
+        url: '/pages_category_page2/userModule/messageDetail?noticeId=' + item.noticeId
+      })
     },
     // 领取优惠券
     // receiveCoupon(item) {