You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
346 lines
7.2 KiB
346 lines
7.2 KiB
<template>
|
|
<view>
|
|
<view class="flex justify-center lf-m-t-20">
|
|
<!-- <image src="../../static/images/bill.png" mode="widthFix" style="height: 1220rpx;width: 686rpx;"></image> -->
|
|
<image v-if="imagePath" :src="imagePath" mode="widthFix"></image>
|
|
</view>
|
|
|
|
<tki-qrcode v-if="info.avatar" style="visibility: hidden;position: fixed;left: -500rpx;" ref="qrcode" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
|
|
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="info.avatar" />
|
|
|
|
<tki-qrcode v-else ref="qrcode" style="visibility: hidden;position: fixed;left: -500rpx;" @result="qrR" :val="checkArea" :size="115" unit="px" background="#fff"
|
|
foreground="#000" pdground="#000" :onval="true" :loadMake="true" :icon="require('@/static/images/system/payfail.png')" />
|
|
|
|
<view class="canvas-box">
|
|
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
|
|
</view>
|
|
|
|
<view class="btn-bottom" style="bottom: 40rpx;">
|
|
<view class="padding-lr-lg">
|
|
<button class="cu-btn block bg-orange lg" style="border-radius: 42rpx;" @tap="saveBill()">
|
|
<text class="text-df text-white">保存</text>
|
|
</button>
|
|
</view>
|
|
|
|
<view class="flex justify-center align-center lf-m-t-30">
|
|
<view class="lf-color-gray lf-font-28">https：//hbdsufiewhuifusikj.com</view>
|
|
<view class="lf-font-24 text-orange lf-m-l-30" @click="copy('https：//hbdsufiewhuifusikj.com')">复制</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tkiQrcode from "tki-qrcode"; // 二维码生成器
|
|
export default {
|
|
data() {
|
|
return {
|
|
base64Img: '',
|
|
checkArea: 'Cannot find module',
|
|
maskHidden: false,
|
|
info: {
|
|
avatar: '',
|
|
nickname: '',
|
|
id: '',
|
|
tel: '',
|
|
tags: []
|
|
},
|
|
showLogin: true,
|
|
imagePath: '',
|
|
|
|
userToken: ''
|
|
}
|
|
},
|
|
components: {
|
|
tkiQrcode
|
|
},
|
|
onLoad() {
|
|
wx.showToast({
|
|
title: '生成海报中...',
|
|
icon: 'loading',
|
|
duration: 1000
|
|
});
|
|
this.getData();
|
|
this.createNewImg();
|
|
},
|
|
methods:{
|
|
//保存头像
|
|
saveAvatar() {
|
|
var that = this
|
|
console.log(that.info.avatar)
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: that.info.avatar,
|
|
success(res) {
|
|
wx.showModal({
|
|
content: '图片已保存到相册，赶紧晒一下吧~',
|
|
showCancel: false,
|
|
confirmText: '好的',
|
|
confirmColor: '#333',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
that.maskHidden = false
|
|
}
|
|
},
|
|
fail: function(res) {
|
|
that.maskHidden = false
|
|
console.log(res)
|
|
}
|
|
})
|
|
},
|
|
fail(err) {
|
|
console.log(err)
|
|
}
|
|
})
|
|
},
|
|
qrR(data) {
|
|
this.base64Img = data;
|
|
console.log('base64',this.base64Img)
|
|
},
|
|
getData() {
|
|
let userinfo = uni.getStorageSync('userinfo') || {};
|
|
if (userinfo) {
|
|
this.info = userinfo
|
|
console.log('用户数据缓存',this.info)
|
|
} else {
|
|
this.$http(this.API.API_USER_CENTER).then(res => {
|
|
this.info = res.data;
|
|
console.log('用户数据接口',this.info)
|
|
})
|
|
}
|
|
},
|
|
createNewImg() {
|
|
var that = this;
|
|
var context = wx.createCanvasContext('mycanvas');
|
|
var path = "../../static/images/bill.png";
|
|
context.drawImage(path, 0, 0, 375, 667);
|
|
//绘制二维码
|
|
var path1 = "../../static/logo.png";
|
|
context.drawImage(path1, 24, 530,120, 120);
|
|
//绘制名字
|
|
// context.setFontSize(24);
|
|
// context.setFillStyle('#fff');
|
|
// context.setTextAlign('center');
|
|
// context.fillText(name, 34, 620);
|
|
context.stroke();
|
|
context.draw();
|
|
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
|
|
setTimeout(function() {
|
|
wx.canvasToTempFilePath({
|
|
canvasId: 'mycanvas',
|
|
success: function(res) {
|
|
that.imagePath = res.tempFilePath;
|
|
if(that.imagePath) {
|
|
that.canvasHidden = true
|
|
that.maskHidden = true
|
|
}
|
|
console.log('海报生成成功')
|
|
console.log(res)
|
|
console.log('图片链接', that.imagePath)
|
|
},
|
|
fail: function(res) {
|
|
console.log(res);
|
|
}
|
|
});
|
|
}, 900);
|
|
},
|
|
saveBill() {
|
|
var that = this
|
|
wx.saveImageToPhotosAlbum({
|
|
filePath: that.imagePath,
|
|
success(res) {
|
|
wx.showModal({
|
|
content: '图片已保存到相册，赶紧晒一下吧~',
|
|
showCancel: false,
|
|
confirmText: '好的',
|
|
confirmColor: '#333',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
console.log('用户点击确定');
|
|
that.maskHidden = false
|
|
}
|
|
},
|
|
fail: function(res) {
|
|
that.maskHidden = false
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
formSubmit() {
|
|
var that = this;
|
|
wx.showToast({
|
|
title: '生成海报中...',
|
|
icon: 'loading',
|
|
duration: 1000
|
|
});
|
|
wx.hideToast()
|
|
that.createNewImg()
|
|
},
|
|
// 点击复制
|
|
copy(text) {
|
|
uni.setClipboardData({
|
|
data: text
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.bgImg {
|
|
display: block;
|
|
width: 100%;
|
|
height: 366rpx;
|
|
}
|
|
|
|
.mine {
|
|
display: block;
|
|
text-align: center;
|
|
color: #333;
|
|
margin-top: 44rpx;
|
|
}
|
|
|
|
.code {
|
|
display: block;
|
|
text-align: center;
|
|
color: #333;
|
|
font-size: 76rpx;
|
|
font-weight: bold;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.who {
|
|
display: block;
|
|
margin-top: 80rpx;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
.inputBox {
|
|
text-align: center;
|
|
margin-top: 44rpx;
|
|
}
|
|
|
|
.input {
|
|
text-align: center;
|
|
width: 440rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
background: #f5f5f5;
|
|
font-size: 32rpx;
|
|
display: inline-block;
|
|
}
|
|
|
|
.btn {
|
|
width: 160rpx;
|
|
height: 88rpx;
|
|
border-radius: 44rpx;
|
|
background: linear-gradient(90deg, rgba(255, 226, 0, 1), rgba(255, 200, 11, 1));
|
|
box-shadow: 0px 4px 8px 0px rgba(255, 200, 11, 0.5);
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
display: inline-block;
|
|
line-height: 88rpx;
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
button[class="btn"]::after {
|
|
border: 0;
|
|
}
|
|
|
|
.tishi {
|
|
display: block;
|
|
text-align: center;
|
|
color: #999;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.shareText {
|
|
display: block;
|
|
text-align: center;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
margin-top: 100rpx;
|
|
}
|
|
|
|
.imgBox {
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-top: 60rpx;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
.img {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.m_l {
|
|
margin-left: 180rpx;
|
|
}
|
|
|
|
.zfbtn {
|
|
display: inline-block;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
outline: none;
|
|
border: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
button[class="zfbtn"]::after {
|
|
border: 0;
|
|
}
|
|
|
|
button[class="zfbtn m_l"]::after {
|
|
border: 0;
|
|
}
|
|
|
|
.imagePathBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.7);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.shengcheng {
|
|
width: 80%;
|
|
height: 80%;
|
|
position: fixed;
|
|
top: 50rpx;
|
|
left: 50%;
|
|
margin-left: -40%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.baocun {
|
|
display: block;
|
|
width: 80%;
|
|
height: 80rpx;
|
|
padding: 0;
|
|
line-height: 80rpx;
|
|
text-align: center;
|
|
position: fixed;
|
|
bottom: 50rpx;
|
|
left: 10%;
|
|
background: #ffe200;
|
|
color: #333;
|
|
font-size: 32rpx;
|
|
border-radius: 44rpx;
|
|
}
|
|
|
|
button[class="baocun"]::after {
|
|
border: 0;
|
|
}
|
|
</style>
|