TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

[二维码可分享]

Browse Source
This commit is contained in:
张冬雪
2021-10-25 11:50:52 +08:00
parent b80e1d69e4
commit b93f540824
3 changed files with 659 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

546
pages/instrument/Spread.vue
View File

@@ -1,237 +1,325 @@
<template>
<view class="content">
<view class="codeContent">
<view class="codeTop">
<image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image>
<view class="codeTop-title">
<view class="codeTop-name">
{{companyInfo.name}}
</view>
<view class="codeTop-tips">
邀请你 加入链商星球
</view>
</view>
</view>
<view class="codeCode">
<image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image>
<!-- 先默认死数据 -->
<!-- <image class="codeImg-code" src="/static/user/wallet-code.png" mode="aspectFill"></image> -->
<view class="codeImg-text">
长按二维码，进行保存
</view>
</view>
</view>
<!-- <canvas class="codeImg" canvas-id="qrcodeCard"></canvas> -->
</view>
<view class="shareContent">
<view class="codeContent" v-if="!posterShow" @click="coverCode">
<view class="codeTop">
<image class="codeTop-cover" :src="companyInfo.cover" mode="aspectFill"></image>
<view class="codeTop-title">
<view class="codeTop-name">{{companyInfo.name}}</view>
<view class="codeTop-tips">邀请你 加入链商星球</view>
</view>
</view>
<view class="codeCode">
<image class="codeImg-code" :src="companyInfo.code" mode="aspectFill"></image>
<view class="codeImg-text">点击二维码，进行保存</view>
</view>
</view>
<!-- 分享二维码 -->
<canvas class="my-canvas" canvas-id="myCanvass" id="myCanvass" />
<view v-if="posterShow">
<view class="posterBack"></view>
<view class="poster">
<view class="poster-img">
<image class="img" :src="posterImg" mode="widthFix" />
</view>
<view class="poster-btn">
<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
<view class="operate" @tap="posterShow = false">取消</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { companiesCode } from '@/apis/interfaces/store'
export default {
data() {
return {
companyInfo : ''
}
},
created() {
companiesCode().then(res=>{
console.log(res.code)
this.companyInfo = res
})
},
methods: {
// 绘制图片
shareCanvas(e){
uni.showLoading({
title: '加载中',
})
// 下载头像
let avatarImg = new Promise(success=>{
uni.getImageInfo({
src : this.companyInfo.cover,
success : res => {
success(res.path)
}
})
})
// 下载二维码
let codeImg = new Promise(success => {
uni.getImageInfo({
src : this.companyInfo.code,
success : res => {
success(res.path)
}
})
})
Promise.all([avatarImg, codeImg]).then(res => {
// 绘制海报
const ctx = uni.createCanvasContext('qrcodeCard')
ctx.save()
// 绘制背景图片
ctx.drawImage('../../static/icons/store_downBack', 0, 0, 375, 603)
// 绘制头像
ctx.drawImage(res[0], 0, 0, 60, 60)
// 绘制二维码
ctx.drawImage(res[1], 140, 250, 110, 110)
// 文字
ctx.setFontSize(16)
ctx.fillText(this.companyInfo.name, 194, 180 , 270)
ctx.setFontSize(16)
ctx.fillText('邀请你加入易货平台', 194, 180 , 270)
ctx.save();
ctx.beginPath(); //开始绘制
ctx.arc(50 / 2 + 170, 50 / 2 + 110, 50 / 2, 0, Math.PI * 2, false);
ctx.clip();
// 保存图片
ctx.draw(true, () => {
uni.hideLoading()
uni.canvasToTempFilePath({
canvasId: 'qrcodeCard',
x: 0,
y: 0,
success: res => {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success : res=>{
if (res.errMsg == "saveImageToPhotosAlbum:ok"){
uni.showToast({
title: '分享海报已保存至相册',
icon : 'none'
})
}else{
uni.hideLoading()
}
},
fail : err=>{
if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
uni.showModal({
title : '提示',
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
confirmColor: '#d82526',
confirmText : '去设置',
success : res=>{
if (res.confirm){
uni.openSetting()
}
}
})
}
}
})
}
})
})
}).catch(err=>{
uni.showToast({
title: '海报下载，请检查网络',
icon : 'none'
})
})
}
}
}
import {
companiesCode
} from '@/apis/interfaces/store'
import {
saveImageToPhotosAlbum,
showToast,
downloadFile
} from '@/uni_modules/sakura-canvas/js_sdk/util'
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
let draw = null
export default {
data() {
return {
companyInfo: {},
posterShow: false, // 是否显示下载弹窗页面
}
},
onShow() {
companiesCode().then(res => {
this.companyInfo = res
})
},
methods: {
// 生成海报
async coverCode() {
let img = this.companyInfo.code
let name = this.companyInfo.name
let avatar = this.companyInfo.cover
draw = new Draw({
width: 375,
height: 460,
canvasId: 'myCanvass',
_this: this,
background: {
type: 'color',
color: 'white',
w: 375,
h: 460,
},
})
let res = await draw.createdSharePoster(({
bgObj
}) => {
let {
width,
height
} = bgObj
this.Popinvite = bgObj
// 绘制内容
return [
// 用户昵称
{
type: 'text',
x: 120,
y: 80,
zIndex: 99,
w: width - (20 * 2),
text: name,
color: '#333',
font: {
size: 20
}
},
// 描述
{
type: 'text',
x: 120,
y: 110,
zIndex: 99,
w: width - (20 * 2),
text:'邀请你 加入链商星球',
color: '#999',
font: {
size: 16
}
},
// 用户头像
{
type: 'image',
x: 24,
y: 60,
src: avatar,
w: 80,
h: 80,
drawType: 'arc',
zIndex: 99,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#cacaca' // 图片边框颜色 默认无颜色
},
// 二维码
{
type: 'image',
x: 80,
y: 190,
w: 200,
h: 200,
zIndex: 99,
src: img,
borderWidth: 5, // 图片边框大小 默认0
borderColor: '#cacaca' // 图片边框颜色 默认无颜色
}
]
})
if (!res.success) return
this.posterImg = res.data
this.posterShow = true
},
// 保存图片
async saveImage() {
let {
posterImg
} = this
let res = await saveImageToPhotosAlbum(posterImg)
if (!res.success) return
showToast('保存成功,去相册分享给朋友吧')
this.posterShow = false
}
}
}
</script>
<style lang="scss" scoped>
.content {
background: #7c52fc;
height: 100vh;
width: 100vw;
}
.codeContent {
position: relative;
left: 0;
right: 0;
top: 0;
.codeTop {
position: absolute;
left: 5%;
top: 240rpx;
width: 90%;
background-color: #FFFFFF;
border-radius: 30rpx;
padding: 0 50rpx;
box-sizing: border-box;
box-shadow: 0 0 40rpx rgba(94,59,201,.5);
z-index: 2;
display: flex;
height: 200rpx;
.codeTop-cover {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin: 40rpx 30rpx 0 0;
border: 4rpx solid #FFFFFF;
box-shadow: 0 5rpx 10rpx rgba(94,59,201,.3);
}
.codeTop-title {
padding-top: 50rpx;
.codeTop-name {
font-weight: 600;
font-size: 36rpx;
margin-bottom: 10rpx;
}
.codeTop-tips {
color: $text-gray-m;
}
}
}
.codeCode {
background-color: #FFFFFF;
box-shadow: 0 0 40rpx rgba(27, 0, 111,.4);
position: absolute;
padding: 400rpx 0 200rpx;
left: 10%;
top: 160rpx;
width: 80%;
border-radius: 30rpx;
z-index: 1;
text-align: center;
.codeImg-code {
width: 360rpx;
height: 360rpx;
margin: 0 0 20rpx;
border: 2px solid #f3f3f3;
padding: 30rpx;
box-sizing: border-box;
}
.codeImg-text {
font-size: 32rpx;
color: $text-color;
}
}
}
.codeBnt {
background-color: #7c52fc;
text-align: center;
border-radius: 10rpx;
line-height: 90rpx;
font-weight: 600;
font-size: $title-size;
color: #FFFFFF;
box-shadow: 2px 0 5px rgb(124, 82, 252);
position: relative;
}
/* canvas */
.codeImg {
position: absolute;
left: -1000%;
height: 603px;
width: 375px;
background: white;
}
.shareContent {
background: #7c52fc;
height: 100vh;
width: 100vw;
}
.codeContent {
position: relative;
left: 0;
right: 0;
top: 0;
.codeTop {
position: absolute;
left: 5%;
top: 240rpx;
width: 90%;
background-color: #FFFFFF;
border-radius: 30rpx;
padding: 0 50rpx;
box-sizing: border-box;
box-shadow: 0 0 40rpx rgba(94, 59, 201, .5);
z-index: 2;
display: flex;
height: 200rpx;
.codeTop-cover {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
margin: 40rpx 30rpx 0 0;
border: 4rpx solid #FFFFFF;
box-shadow: 0 5rpx 10rpx rgba(94, 59, 201, .3);
}
.codeTop-title {
padding-top: 50rpx;
.codeTop-name {
font-weight: 600;
font-size: 36rpx;
margin-bottom: 10rpx;
}
.codeTop-tips {
color: $text-gray-m;
}
}
}
.codeCode {
background-color: #FFFFFF;
box-shadow: 0 0 40rpx rgba(27, 0, 111, .4);
position: absolute;
padding: 400rpx 0 200rpx;
left: 10%;
top: 160rpx;
width: 80%;
border-radius: 30rpx;
z-index: 1;
text-align: center;
.codeImg-code {
width: 360rpx;
height: 360rpx;
margin: 0 0 20rpx;
border: 2px solid #f3f3f3;
padding: 30rpx;
box-sizing: border-box;
}
.codeImg-text {
font-size: 32rpx;
color: $text-color;
position: relative;
z-index: 1;
}
}
}
.codeBnt {
background-color: #7c52fc;
text-align: center;
border-radius: 10rpx;
line-height: 90rpx;
font-weight: 600;
font-size: $title-size;
color: #FFFFFF;
box-shadow: 2px 0 5px rgb(124, 82, 252);
position: relative;
}
/* canvas */
.codeImg {
position: absolute;
left: -1000%;
height: 603px;
width: 375px;
background: white;
}
// canvas
.my-canvas {
width: 375px;
height: 667px;
position: fixed;
top: -99999999999rpx;
left: -99999999999rpx;
z-index: -99999999999;
opacity: 0;
}
.posterBack {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
left: 0;
top: 0;
}
.poster {
width: 100vw;
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999999999999;
&-img {
width: 580rpx;
position: relative;
margin: 70rpx auto 20rpx;
.img {
width: 100%;
}
}
&-btn {
padding: 0 $padding * 2;
.operate {
width: 80%;
margin-bottom: 20rpx;
height: 80rpx;
line-height: 80rpx;
border-radius: 40rpx;
margin-left: 10%;
display: inline-block;
text-align: center;
color: #fff;
&-cancel {
background-color: $text-price;
}
}
}
}
</style>