From 9900068d5c87d433942174756c2edff85a126d7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=80=81=E5=8F=B6?= Date: Fri, 19 Nov 2021 12:06:58 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BA=97=E9=93=BA=E6=B5=B7=E6=8A=A5=E6=A8=A1?= =?UTF-8?q?=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.json | 3 +- commons/js/config.js | 2 + commons/js/utils/apiQuery.js | 7 ++ components/storePoster/index.js | 70 ++++++++----- pages/distribute/storePoster/index.js | 97 +++++++++++++++++-- pages/distribute/storePoster/index.wxml | 30 +++--- pages/distribute/storePoster/index.wxss | 16 ++- .../distribute/storePoster/modelList/index.js | 86 ++++++++++++++++ .../storePoster/modelList/index.json | 4 + .../storePoster/modelList/index.wxml | 20 ++++ .../storePoster/modelList/index.wxss | 1 + 11 files changed, 276 insertions(+), 60 deletions(-) create mode 100644 pages/distribute/storePoster/modelList/index.js create mode 100644 pages/distribute/storePoster/modelList/index.json create mode 100644 pages/distribute/storePoster/modelList/index.wxml create mode 100644 pages/distribute/storePoster/modelList/index.wxss diff --git a/app.json b/app.json index 394b910..4cabb7e 100644 --- a/app.json +++ b/app.json @@ -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": [ { diff --git a/commons/js/config.js b/commons/js/config.js index f4e2e9c..5939773 100644 --- a/commons/js/config.js +++ b/commons/js/config.js @@ -89,6 +89,8 @@ api = { appDelivery:'app/delivery', //获取车辆确定随车资料 + materialHomeBiz_posters:'material/home/biz_posters', //店铺海报模版 + } //远程图片存储地址 diff --git a/commons/js/utils/apiQuery.js b/commons/js/utils/apiQuery.js index d554ca0..46aa1ff 100644 --- a/commons/js/utils/apiQuery.js +++ b/commons/js/utils/apiQuery.js @@ -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; \ No newline at end of file diff --git a/components/storePoster/index.js b/components/storePoster/index.js index f4348d6..1f17ec9 100644 --- a/components/storePoster/index.js +++ b/components/storePoster/index.js @@ -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) + } } }, diff --git a/pages/distribute/storePoster/index.js b/pages/distribute/storePoster/index.js index 06a9c80..f3cef89 100644 --- a/pages/distribute/storePoster/index.js +++ b/pages/distribute/storePoster/index.js @@ -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 == ''){ diff --git a/pages/distribute/storePoster/index.wxml b/pages/distribute/storePoster/index.wxml index 18ddcfc..b9b8ea6 100644 --- a/pages/distribute/storePoster/index.wxml +++ b/pages/distribute/storePoster/index.wxml @@ -1,24 +1,26 @@ - - - - - - - 换个美图 - - + + + + + + + + 换个美图 + + + - - {{poster.storName}} - {{poster.storaAddress}} + + {{poster.storName}} + {{poster.storaAddress}} - + 选择模板 - \ No newline at end of file + \ No newline at end of file diff --git a/pages/distribute/storePoster/index.wxss b/pages/distribute/storePoster/index.wxss index 657991d..35addae 100644 --- a/pages/distribute/storePoster/index.wxss +++ b/pages/distribute/storePoster/index.wxss @@ -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; } \ No newline at end of file diff --git a/pages/distribute/storePoster/modelList/index.js b/pages/distribute/storePoster/modelList/index.js new file mode 100644 index 0000000..73b6e02 --- /dev/null +++ b/pages/distribute/storePoster/modelList/index.js @@ -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) + } + } + }, + +}) \ No newline at end of file diff --git a/pages/distribute/storePoster/modelList/index.json b/pages/distribute/storePoster/modelList/index.json new file mode 100644 index 0000000..732374a --- /dev/null +++ b/pages/distribute/storePoster/modelList/index.json @@ -0,0 +1,4 @@ +{ + "navigationBarTitleText": "选择模板", + "usingComponents": {} +} \ No newline at end of file diff --git a/pages/distribute/storePoster/modelList/index.wxml b/pages/distribute/storePoster/modelList/index.wxml new file mode 100644 index 0000000..86c36a6 --- /dev/null +++ b/pages/distribute/storePoster/modelList/index.wxml @@ -0,0 +1,20 @@ + + + + + + + {{item.title}} + + + + + + + + {{item.title}} + + + + + \ No newline at end of file diff --git a/pages/distribute/storePoster/modelList/index.wxss b/pages/distribute/storePoster/modelList/index.wxss new file mode 100644 index 0000000..515ba5a --- /dev/null +++ b/pages/distribute/storePoster/modelList/index.wxss @@ -0,0 +1 @@ +/* pages/distribute/storePoster/modelList/index.wxss */ \ No newline at end of file