增加海报生成组件
This commit is contained in:
parent
66d0881429
commit
b6eb3b0d35
|
|
@ -0,0 +1,18 @@
|
|||
## 3.0.8（2024-10-03）
|
||||
组件优化
|
||||
## 3.0.6（2024-07-14）
|
||||
组件优化
|
||||
## 3.0.2（2023-07-29）
|
||||
组件优化
|
||||
## 3.0.1（2023-07-28）
|
||||
组件说明优化
|
||||
## 3.0（2023-07-22）
|
||||
优化使用说明，小程序设置网络图片地址，需要是服务器白名单IP，本地图片无限制
|
||||
## 2.0.1（2023-07-11）
|
||||
兼容微信小程序 优化使用说明
|
||||
## 2.0（2023-07-11）
|
||||
组件优化, 兼容小程序
|
||||
## 1.0.1（2023-07-11）
|
||||
组件优化
|
||||
## 1.0.0（2023-07-02）
|
||||
组件初始化
|
||||
|
|
@ -0,0 +1,449 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 绘制canvas -->
|
||||
<canvas class="mycanvas" canvas-id="mycanvas" :style="'width:' + (windowWidth-60) + 'px;height:520px'"></canvas>
|
||||
|
||||
<block>
|
||||
<!-- 展示图片 -->
|
||||
<image class="imgs" :style="'width:' + (windowWidth-60) + 'px;height:520px'" :src="imgUrl" mode=""></image>
|
||||
|
||||
</block>
|
||||
|
||||
|
||||
<!-- #ifndef H5 -->
|
||||
<view class="saveImg" @tap="saveImg" :style="'background:' + colors">
|
||||
保存图片
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<p class="tips">长按图片进行保存</p>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uQRCode from './uqrcode.js'
|
||||
|
||||
export default {
|
||||
mixins: [{
|
||||
methods: {
|
||||
setData: function(obj, callback) {
|
||||
let that = this;
|
||||
const handleData = (tepData, tepKey, afterKey) => {
|
||||
tepKey = tepKey.split('.');
|
||||
tepKey.forEach(item => {
|
||||
if (tepData[item] === null || tepData[item] === undefined) {
|
||||
let reg = /^[0-9]+$/;
|
||||
tepData[item] = reg.test(afterKey) ? [] : {};
|
||||
tepData = tepData[item];
|
||||
} else {
|
||||
tepData = tepData[item];
|
||||
}
|
||||
});
|
||||
return tepData;
|
||||
};
|
||||
const isFn = function(value) {
|
||||
return typeof value == 'function' || false;
|
||||
};
|
||||
Object.keys(obj).forEach(function(key) {
|
||||
let val = obj[key];
|
||||
key = key.replace(/\]/g, '').replace(/\[/g, '.');
|
||||
let front, after;
|
||||
let index_after = key.lastIndexOf('.');
|
||||
if (index_after != -1) {
|
||||
after = key.slice(index_after + 1);
|
||||
front = handleData(that, key.slice(0, index_after), after);
|
||||
} else {
|
||||
after = key;
|
||||
front = that;
|
||||
}
|
||||
if (front.$data && front.$data[after] === undefined) {
|
||||
Object.defineProperty(front, after, {
|
||||
get() {
|
||||
return front.$data[after];
|
||||
},
|
||||
set(newValue) {
|
||||
front.$data[after] = newValue;
|
||||
that.$forceUpdate();
|
||||
},
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
front[after] = val;
|
||||
} else {
|
||||
that.$set(front, after, val);
|
||||
}
|
||||
});
|
||||
isFn(callback) && this.$nextTick(callback);
|
||||
}
|
||||
}
|
||||
}],
|
||||
data() {
|
||||
return {
|
||||
windowWidth: '',
|
||||
windowHeight: '',
|
||||
colors: "#fa436a",
|
||||
ctx: '',
|
||||
imgUrl: '',
|
||||
isShow: false,
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
props: {
|
||||
// 海报生成数据
|
||||
posterData: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getSystem();
|
||||
|
||||
this.setPoster();
|
||||
},
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function() {},
|
||||
methods: {
|
||||
getSystem() {
|
||||
let that = this;
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
console.log(res);
|
||||
that.setData({
|
||||
windowHeight: res.windowHeight,
|
||||
windowWidth: res.windowWidth
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setPoster() {
|
||||
uni.showLoading({
|
||||
title: '海报生成中...'
|
||||
})
|
||||
let ctx = uni.createCanvasContext('mycanvas', this); // 绘制背景
|
||||
ctx.fillStyle = "#FFFFFF"
|
||||
ctx.fillRect(0, 0, this.windowWidth - 60, 520)
|
||||
/**
|
||||
* 绘制名称
|
||||
*/
|
||||
const setText = (context, fs, color, x, y, c, bold) => {
|
||||
context.setFillStyle(color);
|
||||
context.setTextAlign('left');
|
||||
if (bold) {
|
||||
context.font = 'normal bold 20px Arial,sans-serif';
|
||||
} else {
|
||||
context.font = 'normal 20px Arial,sans-serif';
|
||||
}
|
||||
context.setFontSize(fs);
|
||||
context.fillText(c, x, y);
|
||||
context.restore();
|
||||
};
|
||||
setText(ctx, 14, '#333', 85, 35, this.posterData.name, 'bold');
|
||||
setText(ctx, 12, '#999', 85, 58, '为您挑选了一个好礼物');
|
||||
ctx.save();
|
||||
/**
|
||||
* 绘制头像
|
||||
*/
|
||||
ctx.beginPath();
|
||||
let avatar_width = 60; //头像宽度
|
||||
let avatar_height = 60; //头像高度
|
||||
let avatar_x = 15; //头像的x坐标
|
||||
let avatar_y = 15; //头像的y坐标
|
||||
let radius = 8 //头像的圆角弧度
|
||||
// 绘制圆角头像
|
||||
this.setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius)
|
||||
// 绘制圆形图片
|
||||
// this.setCircular(ctx, avatar_width, avatar_height, avatar_x, avatar_y)
|
||||
|
||||
// 绘制商品图片
|
||||
this.setGoodsImg(ctx)
|
||||
|
||||
// 绘制商品价格
|
||||
let pirce = '￥ ' + this.posterData.money
|
||||
this.setGoodsPrice(ctx, 20, this.colors, 15, 410, pirce)
|
||||
// 绘制商品名称
|
||||
this.setGoodsName(ctx)
|
||||
|
||||
},
|
||||
|
||||
setEwm(ctx) {
|
||||
|
||||
|
||||
console.log('生成二维码')
|
||||
let code_widht = 100; //二维码宽度
|
||||
let code_height = 100; //二维码高度
|
||||
let x = this.windowWidth - 170
|
||||
|
||||
|
||||
let myThis = this;
|
||||
console.log(this.windowWidth);
|
||||
|
||||
|
||||
uQRCode.make({
|
||||
canvasId: 'mycanvas',
|
||||
componentInstance: this,
|
||||
text: this.posterData.url,
|
||||
size: 200,
|
||||
margin: 10,
|
||||
fileType: 'png',
|
||||
success: res => {
|
||||
console.log('生成二维码3')
|
||||
|
||||
console.log('res = ' + res);
|
||||
|
||||
ctx.drawImage(res, x, 410, code_widht, code_height);
|
||||
|
||||
setTimeout(() => { //必须延时执行 不然h5不显示
|
||||
ctx.save();
|
||||
ctx.draw(false, () => {
|
||||
setTimeout(() => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'mycanvas',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.imgUrl = res.tempFilePath
|
||||
}
|
||||
}, this)
|
||||
}, 300)
|
||||
})
|
||||
uni.hideLoading()
|
||||
}, 1000)
|
||||
|
||||
},
|
||||
complete: () => {
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius) {
|
||||
/**
|
||||
* 绘制圆角
|
||||
*/
|
||||
ctx.arc(avatar_x + radius, avatar_y + radius, radius, Math.PI, Math.PI * 3 / 2);
|
||||
ctx.lineTo(avatar_width - radius + avatar_x, avatar_y);
|
||||
ctx.arc(avatar_width - radius + avatar_x, radius + avatar_y, radius, Math.PI * 3 / 2, Math.PI * 2);
|
||||
ctx.lineTo(avatar_width + avatar_x, avatar_height + avatar_y - radius);
|
||||
ctx.arc(avatar_width - radius + avatar_x, avatar_height - radius + avatar_y, radius, 0, Math.PI * 1 / 2);
|
||||
ctx.lineTo(radius + avatar_x, avatar_height + avatar_y);
|
||||
ctx.arc(radius + avatar_x, avatar_height - radius + avatar_y, radius, Math.PI * 1 / 2, Math.PI);
|
||||
// 开始填充
|
||||
ctx.strokeStyle = "#fff";
|
||||
ctx.fill() //保证图片无bug填充
|
||||
ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
|
||||
|
||||
ctx.drawImage(this.posterData.logo, avatar_x, avatar_y, avatar_width, avatar_height);
|
||||
ctx.closePath()
|
||||
ctx.restore();
|
||||
},
|
||||
setCircular(ctx, avatar_width, avatar_height, avatar_x, avatar_y) { //绘制圆形图片
|
||||
/**
|
||||
* 绘制圆形
|
||||
*/
|
||||
//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
|
||||
ctx.arc(avatar_width / 2 + avatar_x, avatar_height / 2 + avatar_y, avatar_width / 2, 0, Math.PI * 2,
|
||||
false); //画圆
|
||||
// 开始填充
|
||||
ctx.strokeStyle = "#fff";
|
||||
ctx.fill() //保证图片无bug填充
|
||||
ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
|
||||
|
||||
ctx.drawImage(this.posterData.logo, avatar_x, avatar_y, avatar_width, avatar_height);
|
||||
ctx.closePath()
|
||||
ctx.restore();
|
||||
},
|
||||
setGoodsImg(ctx) { //绘制中间商品图片
|
||||
let width = this.windowWidth - 90
|
||||
ctx.drawImage(this.posterData.img, 15, 95, width, width);
|
||||
ctx.save();
|
||||
},
|
||||
setGoodsPrice(ctx, fs, color, x, y, c, bold) { //绘制商品价格
|
||||
ctx.setFillStyle(color);
|
||||
ctx.setTextAlign('left');
|
||||
if (bold) {
|
||||
ctx.font = 'normal bold 20px Arial,sans-serif';
|
||||
} else {
|
||||
ctx.font = 'normal 20px Arial,sans-serif';
|
||||
}
|
||||
ctx.setFontSize(fs);
|
||||
ctx.fillText(c, x, y);
|
||||
ctx.restore();
|
||||
},
|
||||
setGoodsName(ctx) { //绘制商品名称
|
||||
let obj = {
|
||||
x: 20, //绘制文本的左上角x坐标位置
|
||||
y: 440, //绘制文本的左上角y坐标位置
|
||||
width: 210,
|
||||
height: 20,
|
||||
line: 2,
|
||||
color: '#202020',
|
||||
size: 14, //字体的字号
|
||||
align: 'left',
|
||||
baseline: 'top',
|
||||
text: this.posterData.title,
|
||||
bold: true
|
||||
};
|
||||
var td = Math.ceil(obj.width / (obj.size));
|
||||
var tr = Math.ceil(obj.text.length / td);
|
||||
for (var i = 0; i < tr; i++) {
|
||||
var txt = {
|
||||
x: obj.x,
|
||||
y: obj.y + (i * obj.height),
|
||||
color: obj.color,
|
||||
size: obj.size,
|
||||
align: obj.align,
|
||||
baseline: obj.baseline,
|
||||
text: obj.text.substring(i * td, (i + 1) * td),
|
||||
bold: obj.bold
|
||||
};
|
||||
if (i < obj.line) {
|
||||
if (i == obj.line - 1) {
|
||||
txt.text = txt.text.substring(0, txt.text.length - 3) + '......';
|
||||
}
|
||||
this.drawText(ctx, txt);
|
||||
}
|
||||
}
|
||||
// 绘制二维码
|
||||
this.setEwm(ctx);
|
||||
},
|
||||
/**
|
||||
* 渲染文字
|
||||
*
|
||||
* @param {Object} obj
|
||||
*/
|
||||
drawText: function(ctx, obj) {
|
||||
console.log('渲染文字', obj)
|
||||
ctx.save();
|
||||
ctx.setFillStyle(obj.color);
|
||||
ctx.setFontSize(obj.size);
|
||||
ctx.setTextAlign(obj.align);
|
||||
ctx.setTextBaseline(obj.baseline);
|
||||
if (obj.bold) {
|
||||
console.log('字体加粗')
|
||||
ctx.fillText(obj.text, obj.x, obj.y - 0.1);
|
||||
ctx.fillText(obj.text, obj.x - 0.1, obj.y);
|
||||
}
|
||||
ctx.fillText(obj.text, obj.x, obj.y);
|
||||
if (obj.bold) {
|
||||
ctx.fillText(obj.text, obj.x, obj.y + 0.1);
|
||||
ctx.fillText(obj.text, obj.x + 0.1, obj.y);
|
||||
}
|
||||
ctx.restore();
|
||||
},
|
||||
saveImg() {
|
||||
//保存图片
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
});
|
||||
let that = this;
|
||||
// #ifdef MP
|
||||
uni.getSetting({
|
||||
success(res) {
|
||||
uni.hideLoading();
|
||||
console.log(res)
|
||||
if (!res.authSetting['scope.writePhotosAlbum']) {
|
||||
wx.authorize({
|
||||
scope: 'scope.writePhotosAlbum',
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.imgUrl,
|
||||
success(re) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
setTimeout(() => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.imgUrl,
|
||||
success(re) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail(err) {
|
||||
console.log(err);
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}, 1000);
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.mycanvas {
|
||||
margin: 0 auto;
|
||||
border-radius: 10upx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.saveImg {
|
||||
width: 70%;
|
||||
height: 80upx;
|
||||
line-height: 80upx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: #4DB8E4;
|
||||
border-radius: 10upx;
|
||||
margin: 40upx auto 20upx;
|
||||
}
|
||||
|
||||
.imgs {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
border-radius: 10upx;
|
||||
transform: translateX(-50%);
|
||||
/* 遮挡二维码 */
|
||||
background-color: white;
|
||||
/* 置于上层 */
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.tips {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 24upx;
|
||||
margin-top: 20upx;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,86 @@
|
|||
{
|
||||
"id": "cc-beautyPoster",
|
||||
"displayName": "一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片",
|
||||
"version": "3.0.8",
|
||||
"description": "一款基于canvas的精美商品海报生成组件 根据个性化数据生成商品海报图 长按保存图片",
|
||||
"keywords": [
|
||||
"海报",
|
||||
"canvas",
|
||||
"商品海报",
|
||||
"朋友圈海报",
|
||||
"海报生成"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.8.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "y",
|
||||
"快手": "y",
|
||||
"飞书": "y",
|
||||
"京东": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
# cc-beautyPoster
|
||||
|
||||
|
||||
|
||||
##uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板
|
||||
|
||||
###●组件模板规划：
|
||||
由前端组件开发出品的精品组件页面模板，将陆续发布，预计高达约几百种供您使用，是快速快发项目、创业的必备精品。
|
||||
|
||||
合集地址： uni-app模板合集地址：(https://ext.dcloud.net.cn/publisher?id=274945) 如查看全部页面模板，请前往上述uniapp插件市场合集地址；
|
||||
|
||||
###●组件模板效果图：
|
||||
可下载项目后预览，效果图见右侧图片；
|
||||
|
||||
###●组件模板费用：
|
||||
学习：免费下载，进行学习，无费用；
|
||||
|
||||
使用/商用：本页面地址赞赏10元后，可终身商用；
|
||||
|
||||
###●组件模板使用版权/商用：
|
||||
本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏10元
|
||||
|
||||
（仅需10元获取精品页面模板代码-物有所值，1个组件页面市场价100元 ）
|
||||
|
||||
赞赏10后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）
|
||||
|
||||
|
||||
### 我的技术公众号(私信可加前端技术交流群)
|
||||
|
||||
群内气氛挺不错的，应该或许可能大概，算是为数不多的，专搞技术的前端群，偶尔聊天摸鱼
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### 使用方法
|
||||
```使用方法
|
||||
|
||||
<!-- posterData： 海报数据 -->
|
||||
<cc-beautyPoster :posterData="posterData"></cc-beautyPoster>
|
||||
|
||||
<!-- 海报数据字段 注意小程序下网络图片地址需要是服务器设置的白名单地址 本地图片无限制！ -->
|
||||
posterData: {
|
||||
// 用户姓名
|
||||
name: '小明',
|
||||
// 用户头像
|
||||
logo: '/static/images/headIcon.jpg',
|
||||
// 商品名称
|
||||
title: '精美时尚苹果手机一部',
|
||||
// 商品价格
|
||||
money: '5200.90',
|
||||
// 商品图片(小程序需要换成自己服务器白名单设置的地址)
|
||||
img: '/static/images/goods.jpg',
|
||||
// 商品链接
|
||||
url: 'https://www.apple.com.cn/iphone/'
|
||||
|
||||
|
||||
},
|
||||
|
||||
```
|
||||
|
||||
#### HTML代码实现部分
|
||||
```html
|
||||
<template>
|
||||
<view class="content">
|
||||
|
||||
<button style="margin-top: 38px;" @click="openPoster">生成商品海报</button>
|
||||
|
||||
<!-- 海报弹框 -->
|
||||
<uni-popup ref="popup" type="center">
|
||||
<view class="center_poter" style="margin: 0 auto;" v-if="shows">
|
||||
<!-- #ifndef MP -->
|
||||
<image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
|
||||
</image>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP -->
|
||||
<cover-image class="close_btn" src="/static/images/goods/close.png" @click="hidePoster">
|
||||
</cover-image>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- posterData： 海报数据 -->
|
||||
<cc-beautyPoster :posterData="posterData"></cc-beautyPoster>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uniPopup from '@/components/uni-popup/uni-popup.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniPopup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
shows: false,
|
||||
posterData: {
|
||||
// 用户姓名
|
||||
name: '小明',
|
||||
// 用户头像
|
||||
logo: '/static/images/headIcon.jpg',
|
||||
// 商品名称
|
||||
title: '精美时尚苹果手机一部',
|
||||
// 商品价格
|
||||
money: '5200.90',
|
||||
// 商品图片(小程序需要换成自己服务器白名单设置的地址)
|
||||
img: '/static/images/goods.jpg',
|
||||
// 商品链接
|
||||
url: 'https://www.apple.com.cn/iphone/'
|
||||
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
//生成海报
|
||||
openPoster() {
|
||||
this.shows = false
|
||||
uni.showLoading({
|
||||
title: '海报绘制中..'
|
||||
})
|
||||
this.$refs.popup.open()
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
this.shows = true
|
||||
}, 400)
|
||||
},
|
||||
|
||||
//关闭海报
|
||||
hidePoster() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
.center_poter {
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
|
||||
.close_btn {
|
||||
width: 40upx;
|
||||
height: 40upx;
|
||||
background-color: rgba($color: #000000, $alpha: .3);
|
||||
position: absolute;
|
||||
top: 5upx;
|
||||
right: 5upx;
|
||||
z-index: 500;
|
||||
padding: 5upx;
|
||||
border-radius: 6upx;
|
||||
z-index: 999;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Loading…
Reference in New Issue