375 lines
10 KiB
Vue
375 lines
10 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="codeTitle">
|
|
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_title.png" mode="widthFix"></image>
|
|
</view>
|
|
<view class="codeCont">
|
|
<view class="codeCont-tisp">
|
|
<text>每邀请一位好友注册成功后</text>
|
|
<text>您将获得30元消费红包奖励</text>
|
|
</view>
|
|
<view class="codeCont-text">
|
|
<image class="codeCont-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
|
|
<view class="codeCont-name">
|
|
{{ userInfo.nickname }}
|
|
</view>
|
|
</view>
|
|
<view class="codeCont-code">
|
|
<view class="codeCont-title">
|
|
<view class="codeCont-title-text">邀好友享福利</view>
|
|
<view class="codeCont-title-tips">邀请好友加入本时生活</view>
|
|
</view>
|
|
<image class="codeCont-img" :src="qrcode" mode="aspectFill"></image>
|
|
<view class="codeShare-label" @tap="saveImg" hover-class="none">生成海报</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 海报canvas -->
|
|
<canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
|
|
|
|
<!-- 图片弹出层 -->
|
|
<view class="user-lay sign-img-lay" v-if="isImgLay">
|
|
<view class="user-back">
|
|
<image class="user-back-img" src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_share.png" mode="widthFix"></image>
|
|
<view class="user-back-cont">
|
|
<view class="codeBack-yard-name">
|
|
<view class="codeBack-yard-title">扫码享福利</view>
|
|
<view>邀请好友加入本时生活</view>
|
|
</view>
|
|
<image :src="qrcode" mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
<view class="sign-img-btn" @tap="saveImg">长按图片保存二维码<image class="longpress" src="/static/img/long_press.png" mode="widthFix"></image></view>
|
|
<button class="sign-img-btn remove-btn" size="mini" @tap="removeSaveImg">取消</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { myshare } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
qrcode : '', //二维码
|
|
userInfo: '', //我的信息
|
|
isImgLay: false, //是否显示图片弹出层
|
|
parentId: '' ,//是否分享进入
|
|
qrcodeImg: '' //海报图片
|
|
}
|
|
},
|
|
onLoad(options) {},
|
|
onShow() {
|
|
myshare({
|
|
channel: "h5",
|
|
parent_id: '',
|
|
url: 'pages/index/index?type=shareLogin'
|
|
|
|
}).then(res=>{
|
|
this.qrcode = res.qrcode
|
|
this.userInfo = res.user
|
|
}).catch(err=>{})
|
|
},
|
|
methods: {
|
|
// 绘图
|
|
dowImg(){
|
|
uni.showLoading({
|
|
title: '加载中',
|
|
})
|
|
let avatarImg = new Promise(success=>{
|
|
uni.getImageInfo({
|
|
src : this.userInfo.avatar,
|
|
success : res => {
|
|
success(res.path)
|
|
}
|
|
})
|
|
})
|
|
|
|
// 下载素材
|
|
let codeImg = new Promise(success => {
|
|
uni.getImageInfo({
|
|
src : this.qrcode,
|
|
success : res => {
|
|
success(res.path)
|
|
}
|
|
})
|
|
})
|
|
|
|
Promise.all([codeImg, avatarImg]).then(res => {
|
|
// 绘制海报
|
|
const ctx = uni.createCanvasContext('qrcodeCard')
|
|
ctx.save()
|
|
|
|
// 绘制背景
|
|
ctx.setFillStyle('#f7662d')
|
|
ctx.fillRect(0, 0, 375, 603)
|
|
|
|
// 绘制背景
|
|
ctx.drawImage('/static/img/user-codeImg-down.png', 0, 0, 375, 650)
|
|
|
|
// 绘制二维码
|
|
ctx.drawImage(res[0], 114, 390, 150, 150)
|
|
|
|
// 文字
|
|
ctx.setFontSize(16)
|
|
ctx.setFillStyle("#2f3245")
|
|
ctx.setTextAlign('center')
|
|
ctx.fillText(this.userInfo.nickname, 194, 350 , 270)
|
|
|
|
// 文字
|
|
ctx.setFontSize(14)
|
|
ctx.setFillStyle("#af7700")
|
|
ctx.setTextAlign('center')
|
|
ctx.fillText(this.userInfo.nickname + " -- " + "邀请您进入本时生活", 188, 570 , 270)
|
|
|
|
ctx.save();
|
|
ctx.beginPath(); //开始绘制
|
|
ctx.arc(70 / 2 + 156, 70 / 2 + 250, 70 / 2, 0, Math.PI * 2, false);
|
|
ctx.clip();
|
|
ctx.drawImage(res[1], 156, 250, 70, 70);
|
|
|
|
// 保存图片
|
|
ctx.draw(true, () => {
|
|
uni.hideLoading()
|
|
uni.canvasToTempFilePath({
|
|
canvasId: 'qrcodeCard',
|
|
x: 0,
|
|
y: 0,
|
|
success: res => {
|
|
this.qrcodeImg = res.tempFilePath
|
|
this.removeSaveImg()
|
|
}
|
|
})
|
|
})
|
|
|
|
}).catch(err=>{
|
|
uni.showToast({
|
|
title: '海报下载，请检查网络',
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
|
|
// 图片弹出层
|
|
removeSaveImg(){
|
|
this.isImgLay = !this.isImgLay
|
|
},
|
|
|
|
// 绘制海报
|
|
saveImg(){
|
|
this.dowImg();
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
/* 按钮 */
|
|
.codeShare {
|
|
width: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #333333;
|
|
display: flex;
|
|
padding: 30rpx 20rpx 40rpx;
|
|
box-sizing: border-box;
|
|
z-index: 9;
|
|
}
|
|
|
|
.codeShare-label {
|
|
width: calc(100% - 80rpx) !important;
|
|
margin: 30rpx 40rpx;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
height: 86rpx;
|
|
line-height: 86rpx;
|
|
padding: 0;
|
|
border-radius: 60rpx;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
background: #000000;
|
|
}
|
|
|
|
.codeShare-button {
|
|
color: #ffd887;
|
|
background: transparent;
|
|
}
|
|
|
|
page {
|
|
background-color: #e2e2e2;
|
|
}
|
|
|
|
.content {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.codeTitle {
|
|
width: 100%;
|
|
background-color: #000000;
|
|
border-radius: 0 0 200rpx 200rpx;
|
|
padding: 40rpx 20rpx 160rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.codeTitle {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.codeCont {
|
|
background-color: #ffffff;
|
|
margin: -120rpx auto 0;
|
|
width: 84%;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, .2);
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.codeCont-tisp {
|
|
text-align: center;
|
|
color: #fff;
|
|
background-color: #797979;
|
|
padding: 10rpx 0;
|
|
}
|
|
|
|
.codeCont-tisp text {
|
|
display: block;
|
|
}
|
|
|
|
.codeCont-text {
|
|
text-align: center;
|
|
margin: 40rpx 0;
|
|
}
|
|
|
|
.codeCont-avatar {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.codeCont-code {
|
|
text-align: center;
|
|
}
|
|
|
|
.codeCont-img {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.codeCont-title {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.codeCont-title-text {
|
|
font-size: 46rpx;
|
|
font-weight: 700;
|
|
margin-bottom: 10rpx;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
|
|
.codeCont-title-tips {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
/* 弹窗背景图 */
|
|
.user-lay {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-pack: center;
|
|
position: fixed;
|
|
background: rgba(0, 0, 0, .6);
|
|
height: 100vh;
|
|
width: 100vw;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* canvas */
|
|
.canvasImg {
|
|
position: absolute;
|
|
left: -1000%;
|
|
bottom: 0;
|
|
height: 650px;
|
|
width: 375px;
|
|
background: #fbf6f0;
|
|
}
|
|
|
|
|
|
/* 图片弹出层 */
|
|
.sign-img-lay {
|
|
text-align: center;
|
|
}
|
|
|
|
.sign-img-src {
|
|
width: 70vw;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.sign-img-btn {
|
|
margin: 0 auto 40rpx;
|
|
background: #ffffff;
|
|
font-weight: normal;
|
|
color: #2f3245;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
padding: 0;
|
|
width: 80%;
|
|
}
|
|
|
|
.longpress {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
vertical-align: middle;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.remove-btn {
|
|
margin-top: 20rpx;
|
|
background: #101010;
|
|
color: #e5c175;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* 背景 */
|
|
.user-back-img {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.user-back {
|
|
position: relative;
|
|
width: 80%;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.user-back-cont {
|
|
text-align: center;
|
|
background-color: #e2e2e2;
|
|
padding: 40rpx 0;
|
|
}
|
|
|
|
.user-back-cont image {
|
|
width: 300rpx;
|
|
height: 300rpx;
|
|
}
|
|
|
|
.codeBack-yard-name {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.codeBack-yard-title {
|
|
font-size: 50rpx;
|
|
font-weight: 600;
|
|
letter-spacing: 4rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
</style>
|