250 lines
8.4 KiB
Vue
250 lines
8.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="codeContent">
|
||
<image class="codeContent-back" src="../../static/icons/store_codeBack.png" mode="widthFix"></image>
|
||
<image class="codeContent-cont" src="../../static/icons/store_contBack.png" mode="widthFix"></image>
|
||
<view class="textContent">
|
||
<view class="company">
|
||
<image class="company-logo" :src="companyInfo.cover" mode="aspectFill"></image>
|
||
<view class="company-cont">
|
||
<view class="nowrap company-name">{{companyInfo.name}}</view>
|
||
<view class="company-tips">易货平台</view>
|
||
</view>
|
||
</view>
|
||
<view class="code">
|
||
<image class="code-img" :src="companyInfo.code" mode="aspectFit"></image>
|
||
<!-- <view class="code-text">简单扫一扫，即可进入平台</view> -->
|
||
</view>
|
||
<!-- @click="shareCanvas" -->
|
||
<view class="codeBnt">
|
||
扫码推广
|
||
</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=>{
|
||
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 => {
|
||
console.log(res[0],'0')
|
||
console.log(res[1],'1')
|
||
// 绘制海报
|
||
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-color: #e93340;
|
||
height: 100vh;
|
||
width: 100vw;
|
||
}
|
||
|
||
.codeContent {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
.codeContent-back {
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
position: absolute;
|
||
}
|
||
.codeContent-cont {
|
||
left: 5%;
|
||
width: 90%;
|
||
top: 100px;
|
||
z-index: 2;
|
||
position: absolute;
|
||
}
|
||
.codeContent-tips {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 20rpx;
|
||
width: 200rpx;
|
||
z-index: 2;
|
||
}
|
||
.textContent {
|
||
position: absolute;
|
||
padding: 20rpx 20rpx 0 40rpx;
|
||
box-sizing: border-box;
|
||
width: 70%;
|
||
z-index: 3;
|
||
left: 15%;
|
||
right: 15%;
|
||
top: 140px;
|
||
}
|
||
.company {
|
||
width: 100%;
|
||
.company-logo {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.company-cont {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 230rpx;
|
||
left: 0;
|
||
top: 0;
|
||
padding: 20rpx 20rpx 30rpx 210rpx;
|
||
font-size: $title-size;
|
||
.company-name {
|
||
font-weight: 600;
|
||
margin: 10rpx 0;
|
||
}
|
||
.company-tips {
|
||
font-size: 26rpx;
|
||
color: #787878;
|
||
}
|
||
}
|
||
}
|
||
.code {
|
||
text-align: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin-bottom: $margin;
|
||
.code-img {
|
||
width: 90%;
|
||
}
|
||
.code-text {
|
||
color: #787878;
|
||
margin-top: $margin - 10;
|
||
font-size: $title-size;
|
||
}
|
||
}
|
||
}
|
||
|
||
.codeBnt {
|
||
background-color: #e1293f;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
line-height: 90rpx;
|
||
font-weight: 600;
|
||
font-size: $title-size;
|
||
color: #FFFFFF;
|
||
box-shadow: 4rpx 0 10rpx rgba(155,0,19,.5);
|
||
position: relative;
|
||
}
|
||
|
||
/* canvas */
|
||
.codeImg {
|
||
position: absolute;
|
||
left: -1000%;
|
||
height: 603px;
|
||
width: 375px;
|
||
background: white;
|
||
}
|
||
</style>
|