admin/lichebao
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

店铺海报模版

Browse Source
This commit is contained in:
老叶
2021-11-19 12:06:58 +08:00
parent ae439f366b
commit 9900068d5c
11 changed files with 276 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.json
+2 -1
View File
@@ -27,7 +27,8 @@
"pages/distribute/special/index",
"pages/customer/optDefeat/index",
"pages/order/edit/index",
"pages/distribute/storePoster/index"
"pages/distribute/storePoster/index",
"pages/distribute/storePoster/modelList/index"
],
"echarts": [
{
commons/js/config.js
+2
View File
@@ -89,6 +89,8 @@ api = {
appDelivery:'app/delivery', //获取车辆确定随车资料
materialHomeBiz_posters:'material/home/biz_posters', //店铺海报模版
}
//远程图片存储地址
commons/js/utils/apiQuery.js
+7
View File
@@ -565,4 +565,11 @@ apiQuery.getAppDelivery = function (params) {
})
}
//店铺海报模版
apiQuery.getMaterialHomeBiz_posters = function (params) {
return new Promise(function (resolve, reject) {
HttpRequest(false, Config.api.materialHomeBiz_posters, 2, params, "GET", resolve, reject)
})
}
export default apiQuery;
components/storePoster/index.js
+44 -26
View File
@@ -17,6 +17,10 @@ Component({
type: String,
value: ''
},
model: {
type:Object,
value:{}
},
storName: {
type: String,
value: ''
@@ -29,7 +33,6 @@ Component({
//组件的初始数据
data: {
storePosterFt: _.config.imgUrl + 'distribute/storePosterFt.jpg?211108',
imgs: [],
tempPosterPath: '',
showOptBtn:false,//操作按钮显示
@@ -37,16 +40,10 @@ Component({
attached: function () {
isGetImgInfo = false
this.getImageInfo(this.data.storePosterFt, 0)
},
//数据监听
observers: {
'qrcode': function (e) {
if (e) {
this.getImageInfo(this.data.qrcode, 2)
}
},
'isShow': function (e) {
if (e) {
this.setData({
@@ -55,11 +52,25 @@ Component({
this.createPoster()
}
},
'model': function (e) {
if (e) {
console.log(this.data.model)
this.getImageInfo(this.data.model.posterFt, 0)
if(this.data.model.type==1){
this.getImageInfo(this.data.model.posterBg, 3)
}
}
},
'customImg': function (e) {
if (e) {
this.getImageInfo(this.data.customImg, 1)
}
},
'qrcode': function (e) {
if (e) {
this.getImageInfo(this.data.qrcode, 2)
}
},
},
//组件的方法列表
@@ -88,47 +99,50 @@ Component({
},
//自定义海报
customizePoster(CTX){
defaultPoster(CTX){
if(this.data.customImg){
let that = this
let width = 580
let picheight = (parseFloat(this.data.imgs[1].height)/parseFloat(this.data.imgs[1].width))*580
let optheight = 20
let ftheight = 345
let width = 600
let picheight = (parseFloat(this.data.imgs[1].height)/parseFloat(this.data.imgs[1].width))*(width-this.data.model.marginLR*2)
this.setData({
canvasInfo:{
width: width+20+'px',
height: picheight+optheight+ftheight+20+'px'
width: width+'px',
height: this.data.model.tpHeight+this.data.model.ftHeight+picheight+'px'
}
})
CTX.setFillStyle('#ffffff')
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, picheight)
}
CTX.setFillStyle(this.data.model.bgColor)
CTX.fillRect(0, 0,width, this.data.model.tpHeight+this.data.model.ftHeight+picheight)
//底图
if(that.data.model.type==1){
CTX.drawImage(that.data.imgs[3].path, 0, 0, that.data.imgs[3].width, that.data.imgs[3].height, 0, 0, width, this.data.model.tpHeight)
}
//底部图
if (that.data.imgs[0]) {
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)
CTX.drawImage(that.data.imgs[0].path, 0, 0, that.data.imgs[0].width, that.data.imgs[0].height, 0, this.data.model.tpHeight+picheight, width, this.data.model.ftHeight)
}
//上传图
if (that.data.imgs[1]) {
CTX.drawImage(that.data.imgs[1].path, 0, 0, that.data.imgs[1].width, that.data.imgs[1].height, this.data.model.marginLR, this.data.model.tpHeight, width-this.data.model.marginLR*2, picheight)
}
//二维码
if (that.data.imgs[2]) {
Canvas.circleImage(CTX,that.data.imgs[2].path,417, 10+picheight+optheight+175,70)
Canvas.circleImage(CTX,that.data.imgs[2].path,417, this.data.model.tpHeight+picheight+170,70)
}
//店铺名
if (that.data.storName) {
Canvas.drawTextOverflow(CTX, that.data.storName, 230, 1, 24, '#fff', 30, 88, 10+picheight+optheight+57)
Canvas.drawTextOverflow(CTX, that.data.storName, 230, 1, 24, this.data.model.color, 30, 88, this.data.model.tpHeight+picheight+72)
}
//地址
if (that.data.storaAddress) {
Canvas.drawTextOverflow(CTX, that.data.storaAddress, 200, 1, 18, '#fff', 24, 113, 10+picheight+optheight+99)
Canvas.drawTextOverflow(CTX, that.data.storaAddress, 200, 1, 18, this.data.model.color, 24, 113, this.data.model.tpHeight+picheight+104)
}
setTimeout(function(){
@@ -155,7 +169,11 @@ Component({
tempPosterPath: ''
})
let ctx = wx.createCanvasContext('postercanvas', that)
that.customizePoster(ctx)
if(that.data.posterBg){
that.customizePoster(ctx)
}else{
that.defaultPoster(ctx)
}
}
},
pages/distribute/storePoster/index.js
+88 -9
View File
@@ -4,24 +4,85 @@ Page({
data: {
poster_full_url:'',
imgUrl: _.config.imgUrl,//静态图片路径
mdIndex:0,
list:[
// {
// title:'店铺常规模板',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-0.jpg',
// type:0,//0默认无头部 1有头部
// tpHeight:10,//上传图距离顶部高度
// ftHeight:350,//底部图高度
// marginLR:10,//上传图距离左右位置
// posterBg:'',//头部背景图
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-0.jpg',//底部背景图
// bgColor:'#fff',//背景色
// color:'#fff',//字体颜色
// },
// {
// title:'恭喜提车模板',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-1.jpg',
// type:1,
// tpHeight:215,
// ftHeight:350,
// marginLR:20,
// posterBg:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterBg-1.jpg',
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-1.jpg',
// bgColor:'#dd3535',
// color:'#dd3535',
// },
// {
// title:'新车到店模板',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-2.jpg',
// type:1,
// tpHeight:175,
// ftHeight:350,
// marginLR:30,
// posterBg:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterBg-2.jpg',
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-2.jpg',
// bgColor:'#2a9267',
// color:'#3f392d',
// },
// {
// title:'恭喜成单啦',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-3.jpg',
// type:1,
// tpHeight:215,
// ftHeight:350,
// marginLR:20,
// posterBg:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterBg-3.jpg',
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-3.jpg',
// bgColor:'#db3333',
// color:'#fff',
// },
],
poster: {
isShow: false,
qrcode:'',
customPoster:'',
storName: '泉州鲤城区4s店',
storaAddress:'泉州市鲤城区>',
storName: '',
storaAddress:'',
},
},
onLoad: function (options) {
this.getMaterialHomeQrcode()
this.getMaterialHomeBiz()
this.getMaterialHomeBiz_posters()
},
//获取二维码
//店铺海报模版
getMaterialHomeBiz_posters(){
_.apiQuery.getMaterialHomeBiz_posters().then(res => {
this.setData({
list:res.data.lists,
})
})
},
//获取店铺名地址
getMaterialHomeBiz(){
_.apiQuery.getMaterialHomeBiz().then(res => {
this.setData({
poster_full_url:res.data.posters?res.data.posters:'',
//poster_full_url:res.data.posters?res.data.posters:'',
'poster.storName':res.data.biz_name,
'poster.storaAddress':res.data.address,
})
@@ -65,13 +126,17 @@ Page({
wx.hideLoading();
if (resp.data.code == 200) {
///保存店铺海报
_.apiQuery.putMaterialHomePosters({posters:resp.data.data.url}).then(resw => {
that.setData({
poster_full_url:resp.data.data.full_url,
})
that.setData({
poster_full_url:resp.data.data.full_url,
})
///保存店铺海报
// _.apiQuery.putMaterialHomePosters({posters:resp.data.data.url}).then(resw => {
// that.setData({
// poster_full_url:resp.data.data.full_url,
// })
// })
}
},
@@ -88,6 +153,20 @@ Page({
})
},
//切换index
changeModel(index){
this.setData({
mdIndex:index,
})
},
//推送链接
pushLink(e) {
if(e.currentTarget.dataset.url){
_.$router.openUrlScheme(e.currentTarget.dataset.url)
}
},
//生成海报
showPoster(e){
if(this.data.poster_full_url == ''){
pages/distribute/storePoster/index.wxml
+16 -14
View File
@@ -1,24 +1,26 @@
<view class="inner30" wx:if="{{poster.qrcode}}">
<view class="relative bg-fff inner10 box-shadow-000-10-10 ulib-r10 overflowhidden">
<view bindtap="chooseImg">
<block wx:if="{{poster_full_url==''}}">
<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 class="relative box-shadow-000-10-10 img-top-cover ulib-r10 overflowhidden" style="background-image:url({{list[mdIndex].posterBg}});background-color:{{list[mdIndex].bgColor}}" >
<view style="padding-top:{{(690/600)*list[mdIndex].tpHeight}}rpx;padding-left:{{(690/600)*list[mdIndex].marginLR}}rpx;padding-right:{{(690/600)*list[mdIndex].marginLR}}rpx;">
<view class="relative" bindtap="chooseImg">
<block wx:if="{{poster_full_url==''}}">
<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>
<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="relative wp100 img-fill-cover" style="height:{{(690/600)*list[mdIndex].ftHeight}}rpx;background-image:url({{list[mdIndex].posterFt}});color:{{list[mdIndex].color}};">
<view class="poster-name text-nowrap font-30">{{poster.storName}}</view>
<view class="poster-address text-nowrap font-24">{{poster.storaAddress}}</view>
<view class="poster-code"><image class="block img-160x160 ulib-r750" src="{{poster.qrcode}}" mode="scaleToFill" /></view>
</view>
</view>
<view class="mt50 pb50 fn-flex">
<!-- <view class="fn-flex-item bds-2-f9394d font-32 color-f9394d ulib-r750 text-center ml20 mr20 pt25" bindtap="pushLink" data-url="lcb://navigateToMiniPrograms??appId=wx98e64c11aac45966@path=/pages/storeInfo/index?biz_id={{userInfo.biz_id}}">预览</view> -->
<view class="fn-flex-item relative bds-2-f9394d font-32 color-f9394d ulib-r750 text-center ml20 mr20" bindtap="pushLink" data-url="/pages/distribute/storePoster/modelList/index"><view class="absolute left-0 right-0 box-middle">选择模板</view></view>
<button class="fn-flex-item btn-f9394d font-32 color-fff ulib-r750 text-center ml20 mr20 pt10 pb10" bindtap="showPoster">生成海报</button>
</view>
</view>
<storePoster isShow="{{poster.isShow}}" customImg="{{poster.customPoster}}" qrcode="{{poster.qrcode}}" storName="{{poster.storName}}" storaAddress="{{poster.storaAddress}}"></storePoster>
<storePoster isShow="{{poster.isShow}}" model="{{list[mdIndex]}}" customImg="{{poster.customPoster}}" qrcode="{{poster.qrcode}}" storName="{{poster.storName}}" storaAddress="{{poster.storaAddress}}"></storePoster>
pages/distribute/storePoster/index.wxss
+6 -10
View File
@@ -1,21 +1,17 @@
.posterFt{
width:670rpx;
height:399rpx;
}
.poster-name{
position:absolute;
top:35rpx;
left:90rpx;
top:55rpx;
left:105rpx;
width:280rpx;
}
.poster-address{
position:absolute;
top:89rpx;
left:113rpx;
top:95rpx;
left:128rpx;
width:255rpx;
}
.poster-code{
position:absolute;
top:202rpx;
left:470rpx;
top:195rpx;
left:480rpx;
}
pages/distribute/storePoster/modelList/index.js
+86
View File
@@ -0,0 +1,86 @@
import _ from '../../../../commons/js/commons'
Page({
data: {
list:[
// {
// title:'店铺常规模板',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-0.jpg',
// type:0,//0默认无头部 1有头部
// tpHeight:10,//上传图距离顶部高度
// ftHeight:350,//底部图高度
// marginLR:10,//上传图距离左右位置
// posterBg:'',//头部背景图
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-0.jpg',//底部背景图
// bgColor:'#fff',//背景色
// color:'#fff',//字体颜色
// },
// {
// title:'恭喜提车模板',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-1.jpg',
// type:1,
// tpHeight:215,
// ftHeight:350,
// marginLR:20,
// posterBg:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterBg-1.jpg',
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-1.jpg',
// bgColor:'#dd3535',
// color:'#dd3535',
// },
// {
// title:'新车到店模板',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-2.jpg',
// type:1,
// tpHeight:175,
// ftHeight:350,
// marginLR:30,
// posterBg:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterBg-2.jpg',
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-2.jpg',
// bgColor:'#2a9267',
// color:'#3f392d',
// },
// {
// title:'恭喜成单啦',
// cover:'https://qs.haodian.cn/wechat_app/lichebao/distribute/md-3.jpg',
// type:1,
// tpHeight:215,
// ftHeight:350,
// marginLR:20,
// posterBg:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterBg-3.jpg',
// posterFt:'https://qs.haodian.cn/wechat_app/lichebao/distribute/posterFt-3.jpg',
// bgColor:'#db3333',
// color:'#fff',
// },
],
},
onLoad: function (options) {
this.getMaterialHomeBiz_posters()
},
//店铺海报模版
getMaterialHomeBiz_posters(){
_.apiQuery.getMaterialHomeBiz_posters().then(res => {
this.setData({
list:res.data.lists,
})
})
},
//选择模板
selectModel(e){
//刷新列表页
let pages = getCurrentPages();
let prevPage = null; //上一个页面
if (pages.length >= 2) {
prevPage = pages[pages.length - 2]; //上一个页面
if(prevPage.route == 'pages/distribute/storePoster/index'){
prevPage.changeModel(e.currentTarget.dataset.index)
setTimeout(function(){
wx.navigateBack({
delta: 1
})
},500)
}
}
},
})
pages/distribute/storePoster/modelList/index.json
+4
View File
@@ -0,0 +1,4 @@
{
"navigationBarTitleText": "选择模板",
"usingComponents": {}
}
pages/distribute/storePoster/modelList/index.wxml
+20
View File
@@ -0,0 +1,20 @@
<view class="container">
<view class="fn-flex pl30 pr30">
<view class="fn-flex-item pr15">
<block wx:for="{{list}}" wx:key="index">
<view class="mt10" wx:if="{{index%2 == 0}}" bindtap="selectModel" data-index="{{index}}">
<image class="block wp100 box-shadow-000-10-10 ulib-r10" src="{{item.cover}}" mode="widthFix" />
<view class="pt20 pb20 text-center font-28">{{item.title}}</view>
</view>
</block>
</view>
<view class="fn-flex-item pl15">
<block wx:for="{{list}}" wx:key="index">
<view class="mt10" wx:if="{{index%2 != 0}}" bindtap="selectModel" data-index="{{index}}">
<image class="block wp100 box-shadow-000-10-10 ulib-r10" src="{{item.cover}}" mode="widthFix" />
<view class="pt20 pb20 text-center font-28">{{item.title}}</view>
</view>
</block>
</view>
</view>
</view>
pages/distribute/storePoster/modelList/index.wxss
+1
View File
@@ -0,0 +1 @@
/* pages/distribute/storePoster/modelList/index.wxss */