店铺推广静态页

This commit is contained in:
老叶
2021-11-08 14:00:39 +08:00
parent 734c0a7c4f
commit 6f197fe44e
5 changed files with 21 additions and 23 deletions
+6 -8
View File
@@ -29,7 +29,7 @@ Component({
//组件的初始数据
data: {
storePosterFt: _.config.imgUrl + 'distribute/storePosterFt.jpg?211111',
storePosterFt: _.config.imgUrl + 'distribute/storePosterFt.jpg?211108',
imgs: [],
tempPosterPath: '',
showOptBtn:false,//操作按钮显示
@@ -108,7 +108,7 @@ Component({
let width = 580
let picheight = (parseFloat(this.data.imgs[1].height)/parseFloat(this.data.imgs[1].width))*580
let optheight = 20
let ftheight = 348
let ftheight = 345
this.setData({
canvasInfo:{
width: width+20+'px',
@@ -126,24 +126,22 @@ Component({
//底图
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, 10+picheight+optheight, width, ftheight)
CTX.drawImage(that.data.imgs[0].path, 0, 0, that.data.imgs[0].width, that.data.imgs[0].height, 10, 10+picheight+optheight, width, ftheight)
}
//二维码
if (that.data.imgs[2]) {
Canvas.circleImage(CTX,that.data.imgs[2].path,420, 10+picheight+optheight+153,67)
Canvas.circleImage(CTX,that.data.imgs[2].path,417, 10+picheight+optheight+175,70)
}
//店铺名
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, that.data.storName, 230, 1, 24, '#fff', 30, 88, 10+picheight+optheight+57)
}
//地址
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)
Canvas.drawTextOverflow(CTX, that.data.storaAddress, 200, 1, 18, '#fff', 24, 113, 10+picheight+optheight+99)
}
setTimeout(function(){
+2 -2
View File
@@ -4,8 +4,8 @@
<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">
<scroll-view scroll-y="true" style="max-height:900rpx;">
<image class="block wp100" wx:if="{{tempPosterPath}}" src="{{tempPosterPath}}" mode="widthFix" catchtap="preview" />
<scroll-view scroll-y="true" style="max-height:1000rpx;">
<image class="block wp100 ulib-r10" wx:if="{{tempPosterPath}}" src="{{tempPosterPath}}" mode="widthFix" catchtap="preview" />
</scroll-view>
</view>
<view class="mt40 fn-flex" wx:if="{{showOptBtn}}">
+3 -3
View File
@@ -2,15 +2,15 @@ import _ from '../../../commons/js/commons'
const app = getApp()
Page({
data: {
poster_full_url:'https://img.liche.cn/liche/liche/202111/p_a403eaaf794e8ab54e1e1c22b0c8e30f.jpg',
poster_full_url:'',
poster_url:'',
imgUrl: _.config.imgUrl,//静态图片路径
poster: {
isShow: false,
isCreateQrcode: false,
customPoster:'',
storName: '泉州鲤城区4s店泉州鲤城区4s店',
storaAddress:'泉州市鲤城区泉州市鲤城区>',
storName: '泉州鲤城区4s店',
storaAddress:'泉州市鲤城区>',
},
},
onLoad: function (options) {
+5 -5
View File
@@ -2,16 +2,16 @@
<view class="relative bg-fff inner10 box-shadow-000-10-10 ulib-r10 overflowhidden">
<view bindtap="chooseImg">
<block wx:if="{{poster_full_url==''}}">
<view class="absolute top-0 right-0 pt5 pb5 pl10 pr10 bg-f9394d font-24 color-fff z-index-1 ulib-rlb10"><i class="iconfont icon-shuaxin"></i>换个美图</view>
<image class="block wp100" src="{{imgUrl}}distribute/upload.jpg" mode="widthFix" />
</block>
<block wx:else>
<view class="absolute top-0 right-0 pt5 pb5 pl10 pr10 bg-f9394d font-24 color-fff z-index-1 ulib-rlb10"><i class="iconfont icon-shuaxin"></i>换个美图</view>
<image class="block wp100" src="{{poster_full_url}}" mode="widthFix" />
</block>
</view>
<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="mt20 relative posterFt img-fill-cover" style="background-image:url({{imgUrl}}distribute/storePosterFt.jpg?211108);">
<view class="poster-name text-nowrap font-30 color-fff">{{poster.storName}}</view>
<view class="poster-address text-nowrap font-24 color-fff">{{poster.storaAddress}}</view>
<view class="poster-code"><image class="block img-160x160 ulib-r750" src="{{code}}" mode="scaleToFill" /></view>
</view>
</view>
@@ -21,4 +21,4 @@
</view>
</view>
<storePoster isShow="{{poster.isShow}}" customImg="{{poster.customPoster}}" isCreateQrcode="{{poster.isCreateQrcode}}" qccodeid="{{poster.qrcodeid}}" slogan="{{poster.slogan}}" moments="{{poster.moments}}"></storePoster>
<storePoster isShow="{{poster.isShow}}" customImg="{{poster.customPoster}}" isCreateQrcode="{{poster.isCreateQrcode}}" storName="{{poster.storName}}" storaAddress="{{poster.storaAddress}}"></storePoster>
+5 -5
View File
@@ -1,21 +1,21 @@
.posterFt{
width:670rpx;
height:402rpx;
height:399rpx;
}
.poster-name{
position:absolute;
top:40rpx;
top:35rpx;
left:90rpx;
width:280rpx;
}
.poster-address{
position:absolute;
top:92rpx;
left:115rpx;
top:89rpx;
left:113rpx;
width:255rpx;
}
.poster-code{
position:absolute;
top:206rpx;
top:202rpx;
left:470rpx;
}