店铺推广静态页
This commit is contained in:
@@ -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(){
|
||||
|
||||
@@ -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}}">
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user