店铺推广静态

components/storePoster/index.js

@@ -29,7 +29,7 @@ Component({
 
   //组件的初始数据
   data: {
-    storePosterFt: _.config.imgUrl + 'distribute/storePosterFt.jpg',
+    storePosterFt: _.config.imgUrl + 'distribute/storePosterFt.jpg?211111',
     imgs: [],
     tempPosterPath: '',
     showOptBtn:false,//操作按钮显示
@@ -106,35 +106,44 @@ Component({
       if(this.data.customImg){
         let that = this
         let width = 580
-        let height = (parseFloat(this.data.imgs[1].height)/parseFloat(this.data.imgs[1].width))*580 + 370
+        let picheight = (parseFloat(this.data.imgs[1].height)/parseFloat(this.data.imgs[1].width))*580
+        let optheight = 20
+        let ftheight = 348
         this.setData({
           canvasInfo:{
             width: width+20+'px',
-            height: height+20+'px'
+            height: picheight+optheight+ftheight+20+'px'
           }
         })
 
         CTX.setFillStyle('#ffffff')
-        CTX.fillRect(0, 0,width, height)
+        CTX.fillRect(0, 0,width+20, picheight+optheight+ftheight+20)
         
         //头图
         if (that.data.imgs[1]) {
-          CTX.drawImage(that.data.imgs[1].path, 0, 0, that.data.imgs[1].width, that.data.imgs[1].height, 10, 10, width-20, height-390)
+          CTX.drawImage(that.data.imgs[1].path, 0, 0, that.data.imgs[1].width, that.data.imgs[1].height, 10, 10, width, picheight)
         }
 
         //底图
         if (that.data.imgs[0]) {
-          CTX.drawImage(that.data.imgs[0].path, 0, 0, that.data.imgs[1].width, that.data.imgs[1].height, 10, height-390, width-20, 390)
+          CTX.drawImage(that.data.imgs[0].path, 0, 0, that.data.imgs[1].width, that.data.imgs[1].height, 10, 10+picheight+optheight, width, ftheight)
         }
-
-        // //标语
-        // if (that.data.slogan) {
-        //   Canvas.drawTextOverflow(CTX, that.data.slogan, 180, 2, 11, '#666', 17, 20, (that.data.imgs[3].height-100)/2)
-        // }
       
         //二维码
         if (that.data.imgs[2]) {
-          Canvas.circleImage(CTX,that.data.imgs[2].path,399, height-188,71)
+          Canvas.circleImage(CTX,that.data.imgs[2].path,420, 10+picheight+optheight+153,67)
+        }
+
+        //店铺名
+        Canvas.drawTextOverflow(CTX, '店铺名店铺名店铺名店铺名店铺名店铺名店铺名店铺名', 230, 1, 24, '#fff', 30, 88, 10+picheight+optheight+52)
+        if (that.data.storName) { 
+          Canvas.drawTextOverflow(CTX, that.data.storName, 340, 1, 24, '#f00', 30, 40, 250)
+        }
+
+        //地址
+        Canvas.drawTextOverflow(CTX, '店铺名店铺名店铺名店铺名店铺名店铺名店铺名店铺名', 200, 1, 18, '#fff', 24, 108, 10+picheight+optheight+89)
+        if (that.data.storaAddress) {
+          //Canvas.drawTextOverflow(CTX, that.data.storaAddress, 180, 1, 11, '#666', 17, 20, (that.data.imgs[3].height-100)/2)
         }
 
         setTimeout(function(){

components/storePoster/index.wxml

@@ -3,14 +3,13 @@
   <view class="poster-bg absolute top-0 bottom-0 left-0 right-0" bindtap="hidePoster"></view>
   <view class="poster-main poster-main-img absolute box-center-middle">
     <canvas canvas-id='postercanvas' class='canvas absolute box-center-middle' style="width:{{canvasInfo.width}};height:{{canvasInfo.height}}"></canvas>
-    <view wx:if="{{showOptBtn}}" class="overflowhidden ulib-r10">
+    <view wx:if="{{showOptBtn}}" class="overflowhidden">
       <scroll-view scroll-y="true" style="max-height:900rpx;">
-        <image class="block wp100 ulib-r10" wx:if="{{tempPosterPath}}" src="{{tempPosterPath}}" mode="widthFix" catchtap="preview" />
+        <image class="block wp100" wx:if="{{tempPosterPath}}" src="{{tempPosterPath}}" mode="widthFix" catchtap="preview" />
       </scroll-view>
     </view>
     <view class="mt40 fn-flex" wx:if="{{showOptBtn}}">
-      <button class="fn-flex-item bds-2-fff btn-no-bg font-32 color-fff ulib-r750 text-center ml20 mr20" catchtap="pushLink" data-url="/pages/distribute/special/index?id={{qccodeid}}">专题预览</button>
-      <button class=" fn-flex-item btn-f9394d font-32 color-fff ulib-r750 text-center ml20 mr20" hover-class="btn-f9394d-hover" catchtap="saveToAblum">保存分享</button>
+      <button class="fn-flex-item btn-f9394d font-32 color-fff ulib-r750 text-center ml20 mr20" hover-class="btn-f9394d-hover" catchtap="saveToAblum">保存分享</button>
     </view>
   </view>
 </view>

pages/distribute/storePoster/index.wxml

@@ -9,7 +9,7 @@
         <image class="block wp100" src="{{poster_full_url}}" mode="widthFix" />
       </block>
     </view>
-    <view class="relative posterFt img-fill-cover" style="background-image:url({{imgUrl}}distribute/storePosterFt.jpg);">
+    <view class="mt20 relative posterFt img-fill-cover" style="background-image:url({{imgUrl}}distribute/storePosterFt.jpg?211109);">
       <view class="poster-name text-nowrap font-30 color-fff">泉州鲤城区4s店泉州鲤城区4s店</view>
       <view class="poster-address text-nowrap font-24 color-fff">泉州市鲤城区泉州市鲤城区></view>
       <view class="poster-code"><image class="block img-160x160 ulib-r750" src="{{code}}" mode="scaleToFill" /></view>

pages/distribute/storePoster/index.wxss

@@ -1,21 +1,21 @@
 .posterFt{
   width:670rpx;
-  height:428rpx;
+  height:402rpx;
 }
 .poster-name{
   position:absolute;
-  top:65rpx;
+  top:40rpx;
   left:90rpx;
   width:280rpx;
 }
 .poster-address{
   position:absolute;
-  top:117rpx;
+  top:92rpx;
   left:115rpx;
   width:255rpx;
 }
 .poster-code{
   position:absolute;
-  top:232rpx;
+  top:206rpx;
   left:470rpx;
 }