Skip to content

7
7-Eleven
Commit a9334d7a by 赵雅纹
Options

海报

parent 6a609556
Showing with 552 additions and 4 deletions
src/component/sharePoster/sharePoster.js 0 → 100644
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
avater: { // 图片
type: String,
value: ''
},
productDesc: { // 产品描述
type: String,
value: ''
},
userAvatar: { // 头像
type: String,
value: ''
},
codeimg: { // 二维码
type: String,
value: ''
}
},
/**
* 组件的初始数据
*/
data: {
productCode: "",
showpost: false,
imgHeight: 0,
productCode: "" //二维码
},
ready: function () {
},
/**
* 组件的方法列表
*/
methods: {
//下载产品图片
getAvaterInfo: function () {
wx.showLoading({
title: '生成中...',
mask: true,
});
var that = this;
that.setData({
showpost: true
})
var productImage = that.data.avater;
if (productImage) {
wx.downloadFile({
url: productImage,
success: function (res) {
wx.hideLoading();
if (res.statusCode === 200) {
var productSrc = res.tempFilePath;
that.calculateImg(productSrc, function (data) {
that.getQrCode(productSrc, data);
})
} else {
wx.showToast({
title: '产品图片下载失败！',
icon: 'none',
duration: 2000,
success: function () {
var productSrc = "";
that.getQrCode(productSrc);
}
})
}
}
})
} else {
wx.hideLoading();
var productSrc = "";
that.getQrCode(productSrc);
}
},
//下载二维码
getQrCode: function (productSrc, imgInfo = "") {
wx.showLoading({
title: '生成中...',
mask: true,
});
var that = this;
var productCode = that.data.codeimg;
if (productCode) {
wx.downloadFile({
url: productCode,
success: function (res) {
wx.hideLoading();
if (res.statusCode === 200) {
var codeSrc = res.tempFilePath;
that.sharePosteCanvas(productSrc, codeSrc, imgInfo);
} else {
wx.showToast({
title: '二维码下载失败！',
icon: 'none',
duration: 2000,
success: function () {
var codeSrc = "";
that.sharePosteCanvas(productSrc, codeSrc, imgInfo);
}
})
}
}
})
} else {
wx.hideLoading();
var codeSrc = "";
that.sharePosteCanvas(productSrc, codeSrc);
}
},
//canvas绘制分享海报
sharePosteCanvas: function (avaterSrc, codeSrc, imgInfo) {
wx.showLoading({
title: '生成中...',
mask: true,
})
var that = this;
const ctx = wx.createCanvasContext('myCanvas', that);
var width = "";
const query = wx.createSelectorQuery().in(this);
query.select('#canvas-container').boundingClientRect(function (rect) {
var height = rect.height;
var right = rect.right;
width = rect.width;
var left = rect.left;
console.log(rect)
ctx.setFillStyle('#fff');
ctx.fillRect(0, 0, rect.width, height);
//头像
if (avaterSrc) {
if (imgInfo) {
var imgheght = parseFloat(imgInfo);
}
ctx.drawImage(avaterSrc, 0, 0, width, 270);
ctx.setFontSize(14);
ctx.setFillStyle('#d8d8d8');
ctx.setTextAlign('left');
}
//产品名称
if (that.data.userAvatar) {
console.log(imgheght)
ctx.drawImage(that.data.userAvatar, 12, 306, 25, 25);
ctx.setFontSize(14);
ctx.setFillStyle('#d8d8d8');
ctx.setTextAlign('left');
// ctx.fillText(that.data.userAvatar, left - 15, imgheght + 110); //电话
}
if (that.data.productDesc){
ctx.setFontSize(9);
ctx.setFillStyle('#333333');
ctx.setTextAlign('left');
ctx.fillText(that.data.productDesc, 41, 312); //电话
}
//产品金额
// if (that.data.price || that.data.price == 0) {
// ctx.setFontSize(25);
// ctx.setFillStyle('#F57509');
// ctx.setTextAlign('left');
// var price = that.data.price;
// if (!isNaN(price)) {
// price = "¥" + that.data.price
// }
// ctx.fillText(price, left - 15, imgheght + 110); //电话
// }
// 绘制二维码
if (codeSrc) {
ctx.drawImage(codeSrc, 143.5, 281, 50, 50)
ctx.setFontSize(10);
ctx.setFillStyle('#000');
// ctx.fillText("微信扫码或长按保存图片", left + 165, imgheght + 110);
}
}).exec()
setTimeout(function () {
ctx.draw();
wx.hideLoading();
}, 1000)
},
textByteLength(text, num) { // text为传入的文本 num为单行显示的字节长度
let strLength = 0; // text byte length
let rows = 1;
let str = 0;
let arr = [];
for (let j = 0; j < text.length; j++) {
if (text.charCodeAt(j) > 255) {
strLength += 2;
if (strLength > rows * num) {
strLength++;
arr.push(text.slice(str, j));
str = j;
rows++;
}
} else {
strLength++;
if (strLength > rows * num) {
arr.push(text.slice(str, j));
str = j;
rows++;
}
}
}
arr.push(text.slice(str, text.length));
return [strLength, arr, rows] // [处理文字的总字节长度，每行显示内容的数组，行数]
},
//点击保存到相册
saveShareImg: function () {
var that = this;
wx.showLoading({
title: '正在保存',
mask: true,
})
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
wx.hideLoading();
var tempFilePath = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
wx.showModal({
content: '图片已保存到相册，赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
that.closePoste();
if (res.confirm) { }
},
fail: function (res) {
console.log(res)
}
})
},
fail: function (res) {
wx.showToast({
title: res.errMsg,
icon: 'none',
duration: 2000
})
}
})
},
fail: function (err) {
console.log(err)
}
}, that);
}, 1000);
},
//计算图片尺寸
calculateImg: function (src, cb) {
var that = this;
wx.getImageInfo({
src: src,
success(res) {
wx.getSystemInfo({
success(res2) {
var ratio = res.width / res.height;
var imgHeight = 352.5;
that.setData({
imgHeight: imgHeight
})
cb(imgHeight - 130);
}
})
}
})
}
},
//快速分享到朋友圈
quickShare(){
}
})
\ No newline at end of file
src/component/sharePoster/sharePoster.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
src/component/sharePoster/sharePoster.wxml 0 → 100644
<view class="commodity_screen2" bindtap='closePoste' style='opacity: 0.5;' wx:if="{{showpost}}"></view>
<view class='poste_box' bindlongpress='saveShareImg' hidden='{{!showpost}}'>
<view class='poste_content' id='canvas-container'>
<canvas canvas-id="myCanvas" style="width:100%;height:{{imgHeight}}px;" />
</view>
<view class="save-poster">
<button class="save-btn" bindtap="saveShareImg">保存海报</button>
<view class="save-btn-desc">适用于朋友圈分享</view>
</view>
</view>
<view class="quick-share" bindtap="quickShare" hidden='{{!showpost}}'>
快速分享
</view>
src/component/sharePoster/sharePoster.wxss 0 → 100644
/* component/sharePoster/sharePoster.wxss */
.commodity_screen2 {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.65;
overflow: hidden;
z-index: 9999;
color: #fff;
}
.commodity_attr_box2 {
width: 90%;
overflow: hidden;
position: fixed;
left: 50%;
top: 50%;
z-index: 9999;
background: #fff;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: #fff;
padding-top: 20rpx;
padding-bottom: 30rpx;
}
.codeImg{
text-align: center;
margin-top: 35px;
}
.codeImg image{
width: 200rpx;
height: 200rpx;
}
.shareCode{
text-align: center;
font-size: 16px;
padding: 20rpx 0 50rpx 0;
}
.getUserInfo{
width: 225rpx;
height: 100rpx;
opacity: 0;
position: absolute;
top: -5rpx;
}
.cart{
width:120rpx;
}
.title_product{
margin-top: 20rpx;
text-align: center;
font-weight: bold;
font-size: 32rpx;
padding-left: 50rpx;
}
.content_product{
width: 93%;
margin-left: auto;
margin-right:auto;
text-align: center;
margin-top: 30rpx;
}
.content_product image{
width: 630rpx;
height: 630rpx;
}
.footer-desc{
width: 93%;
margin-top: 30rpx;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.left-title-price{
width: 60%;
margin-top: 30rpx;
}
.right-code{
width: 50%;
height: 250rpx;
display: flex;
justify-content: flex-end;
position: relative;
}
.border-code{
width: 220rpx;
height: 220rpx;
border: 2px solid #D80122;
}
.right-line{
width: 250rpx;
height: 170rpx;
position: absolute;
z-index: 666;
margin-top: 30rpx;
margin-left: 10rpx;
background-color: #fff;
}
.right-line2{
width: 170rpx;
height: 250rpx;
position: absolute;
z-index: 666;
margin-left: -30rpx;
background-color: #fff;
}
.right-line3{
width: 150rpx;
height: 35rpx;
position: absolute;
z-index: 667;
left: 100rpx;
top: 210rpx;
background-color: #fff;
font-size: 18rpx;
color: #5D5D5D;
}
.border-code image{
width: 200rpx;
height: 200rpx;
left: 70rpx;
z-index: 999;
position:absolute;
}
.product-price{
padding-top: 50rpx;
color: #D80122;
}
.product-name{
font-size: 32rpx;
}
/* 海报 */
.poste_box{
width: 100%;
z-index: 9999;
display: flex;
display: -webkit-flex;
justify-content: center;
overflow: hidden;
}
.poste_content{
width: 410rpx;
margin: auto;
overflow: hidden;
margin-top: 153rpx;
background-color: #fff;
position: absolute;
top: 0;
z-index: 9999;
border-radius: 5rpx;
}
.saveposte{
width: 100%;
border-top: 1rpx solid #ddd;
}
.saveposte image{
width: 100%;
}
.close-poste{
width: 100%;
height: 80rpx;
position: absolute;
bottom: -200rpx;
z-index: 9999;
text-align: center;
}
.close-poste image{
width: 80rpx;
height: 50rpx;
z-index: 9999;
border-radius: 50%;
}
.showImages{
position: absolute;
top: 0;
width: 56rpx;
height: 56rpx;
}
.save-poster{
position: absolute;
top: 909rpx;
z-index: 9999;
text-align: center;
}
.save-btn{
width: 340rpx;
height: 80rpx;
border-radius: 40rpx;
line-height: 80rpx;
background-color: rgba(255, 51, 51, 1);
box-shadow: 0px 2rpx 9rpx 0px rgba(255, 51, 51, 0.6);
color: #ffffff;
font-size: 32rpx;
}
.save-btn-desc{
color: #ffffff;
font-size: 22rpx;
margin-top: 12rpx;
}
.quick-share{
position: fixed;
bottom: 0;
height: 88rpx;
line-height: 88rpx;
width: 750rpx;
text-align: center;
color: #ffffff;
font-size: 26rpx;
z-index: 9999;
background-color: rgba(255, 255, 255, 0.2);
}
\ No newline at end of file
src/pages/extendProduct/extendProduct.js
......@@ -7,14 +7,15 @@ Page({
data: {
currentTab: 0,
isAllSelect: false,
showShareModal:false
showShareModal:false,
shareShowPic: true,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.selectComponent('#getPoster').getAvaterInfo()
},
//滑动切换
......@@ -86,6 +87,11 @@ Page({
})
},
//生成卡片
onTapPoster(){
this.selectComponent('#getPoster').getAvaterInfo()
},
/**
* 生命周期函数--监听页面显示
*/
......
src/pages/extendProduct/extendProduct.json
{
"navigationBarTitleText": "推广商品",
"usingComponents": {
"share-modal": "/component/shareModal/shareModal"
"share-modal": "/component/shareModal/shareModal",
"share-poster": "/component/sharePoster/sharePoster"
}
}
\ No newline at end of file
src/pages/extendProduct/extendProduct.wxml
......@@ -71,7 +71,7 @@
<image mode="widthFix"></image>
<text>快速分享</text>
</view>
<view class="share-button">
<view class="share-button" bindtap="onTapPoster">
<image mode="widthFix"></image>
<text>生成卡片</text>
</view>
......@@ -115,3 +115,5 @@
</swiper>
</view>
<share-modal show="{{showShareModal}}" />
<share-poster id="getPoster" bindmyevent="myEventListener" avater="http://t2.hddhhn.com/uploads/tu/201806/9999/91480c0c87.jpg" codeimg="http://i4.hexun.com/2018-07-05/193365388.jpg" productDesc="1111" userAvatar="http://t2.hddhhn.com/uploads/tu/201806/9999/91480c0c87.jpg"></share-poster>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment