238 lines
8.1 KiB
Vue
238 lines
8.1 KiB
Vue
<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>
|
||
</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'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
</style>
|