494 lines
15 KiB
Vue
494 lines
15 KiB
Vue
<template>
|
||
<view class="content" v-if="loaded">
|
||
<view class="code">
|
||
<swiper class="code-swiper" previous-margin="70rpx" next-margin="70rpx" @change="swiperChange">
|
||
<swiper-item v-for="(item, index) in inviteData" :key="index">
|
||
<view class="code-item">
|
||
<view class="code-lay"></view>
|
||
<image class="code-back-image" :src="item.cover" mode="aspectFill"></image>
|
||
<view class="codDate">
|
||
<view class="codDate-year">
|
||
{{item.date.solar.month}}
|
||
</view>
|
||
<view class="codDate-day">
|
||
{{item.date.solar.day}}
|
||
</view>
|
||
<view class="codDate-lunar">
|
||
{{item.date.lunar}}
|
||
</view>
|
||
</view>
|
||
<view class="codeCont">
|
||
<image class="codeCont-avatar" :src="item.user_info.avatar ? item.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
|
||
<view class="codeCont-text">
|
||
<view class="codeCont-name">
|
||
{{item.user_info.nickname}}
|
||
</view>
|
||
<view class="codeCont-number">
|
||
邀请码：{{item.invite}}
|
||
</view>
|
||
</view>
|
||
<image class="codeCont-img" :src="item.code" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view class="footer">
|
||
<view class="hith">朋友通过你的邀请注册成功后，将与您绑定好友关系通过成为平台用户，你都可以获得能量碎片奖励。</view>
|
||
<view class="number">
|
||
<view class="title">邀请码 : {{inviteData[0].invite}}</view>
|
||
<view class="value" @click="copyCenter(inviteData[0].invite)">复制邀请码</view>
|
||
</view>
|
||
<view class="button" @click="coverCode">生成分享海报</view>
|
||
</view>
|
||
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"/>
|
||
<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">长按图片保存</view>
|
||
<view class="operate operate-cancel" @tap="posterShow = false">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { userInvite } from '@/apis/interfaces/user'
|
||
import { saveImageToPhotosAlbum, showToast, downloadFile } from '@/uni_modules/sakura-canvas/js_sdk/util'
|
||
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
|
||
import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy'
|
||
let draw = null
|
||
export default {
|
||
data() {
|
||
return {
|
||
Popinvite : {}, //下载海报数据
|
||
inviteData: [] ,//二维码信息
|
||
codeIndex : 0,
|
||
posterImg : '',
|
||
defaultImg: '',
|
||
loaded : false,
|
||
posterShow: false
|
||
};
|
||
},
|
||
onLoad() {
|
||
// 获取二维码
|
||
this.inviteInfo()
|
||
},
|
||
async created() {},
|
||
methods:{
|
||
// 二维码
|
||
inviteInfo(){
|
||
userInvite().then(res => {
|
||
this.loaded = true
|
||
this.inviteData = res
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: err.message
|
||
})
|
||
})
|
||
},
|
||
|
||
// 生成海报
|
||
async coverCode(){
|
||
let img = this.inviteData[this.codeIndex].code
|
||
let back = this.inviteData[this.codeIndex].cover
|
||
let name = this.inviteData[this.codeIndex].user_info.nickname
|
||
let invite = this.inviteData[this.codeIndex].invite
|
||
let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png'
|
||
let date = this.inviteData[this.codeIndex].date
|
||
draw = new Draw({
|
||
width: 375,
|
||
height: 667,
|
||
canvasId:'myCanvas',
|
||
_this: this,
|
||
background: {
|
||
type: 'color',
|
||
color: 'white',
|
||
w: 375,
|
||
h: 667,
|
||
},
|
||
})
|
||
let res = await draw.createdSharePoster(({ bgObj }) => {
|
||
let { width, height } = bgObj
|
||
this.Popinvite = bgObj
|
||
// 绘制内容
|
||
return [
|
||
// 背景
|
||
{
|
||
type: 'image',
|
||
x: 0,
|
||
y: 0,
|
||
src: back,
|
||
w: 375,
|
||
h: 667,
|
||
zIndex: 0,
|
||
},
|
||
|
||
// 日历-边框
|
||
{
|
||
type: 'rect',
|
||
x: 280,
|
||
y: 10,
|
||
w: 60, // 宽度 必填
|
||
h: 80, // 高度 必填
|
||
zIndex: 99,
|
||
isFill: false, // 是否是填充矩形, false: 线性矩形
|
||
lineWidth: 1 ,// 当矩形为线性时，矩形的边框宽度
|
||
color: '#ffffff',
|
||
},
|
||
|
||
// 日历-线条
|
||
{
|
||
type: 'line',
|
||
zIndex: 99,
|
||
x: 280,
|
||
y: 62,
|
||
w: 60, // 宽度 默认整个画布的宽度 - x轴的距离
|
||
color: '#ffffff', // 颜色 默认#000000 在不考虑字节跳动小程序的前提下可简写(#000)
|
||
alpha: 1, // 透明度 默认1 取值范围 0~1
|
||
lineType: 'solid', // 线条类型 默认 solid: 实线 可选 dashed: 虚线
|
||
lineWidth: 1, // 线条高度
|
||
lineCap: 'butt' // 线条端点样式 默认 butt 可选 round, square
|
||
},
|
||
|
||
// 日历-年月
|
||
{
|
||
type: 'text',
|
||
x: 284,
|
||
y: 18,
|
||
zIndex: 99,
|
||
w: width - (20 * 2),
|
||
text: date.solar.month,
|
||
color: '#ffffff',
|
||
font: {
|
||
size: 14
|
||
}
|
||
},
|
||
|
||
// 日历-日
|
||
{
|
||
type: 'text',
|
||
x: 298,
|
||
y: 40,
|
||
zIndex: 99,
|
||
w: width - (20 * 2),
|
||
text: date.solar.day,
|
||
color: '#ffffff',
|
||
font: {
|
||
size: 18,
|
||
weight: 'bold'
|
||
}
|
||
},
|
||
|
||
// 日历-农历日期
|
||
{
|
||
type: 'text',
|
||
x: 282,
|
||
y: 70,
|
||
zIndex: 99,
|
||
w: width - (20 * 2),
|
||
text: date.lunar,
|
||
color: '#ffffff',
|
||
font: {
|
||
size: 14
|
||
}
|
||
},
|
||
|
||
// 用户昵称
|
||
{
|
||
type: 'text',
|
||
x: 86,
|
||
y: 600,
|
||
zIndex: 99,
|
||
w: width - (20 * 2),
|
||
text: name,
|
||
color: '#ffffff',
|
||
font: {
|
||
size: 16
|
||
}
|
||
},
|
||
|
||
// 邀请码
|
||
{
|
||
type: 'text',
|
||
x: 86,
|
||
y: 630,
|
||
zIndex: 99,
|
||
w: width - (20 * 2),
|
||
text: '邀请码：' + invite,
|
||
color: '#c4a1cb',
|
||
font: {
|
||
size: 14
|
||
}
|
||
},
|
||
|
||
// 用户头像
|
||
{
|
||
type: 'image',
|
||
x: 24,
|
||
y: 598,
|
||
src: avatar,
|
||
w: 46,
|
||
h: 46,
|
||
drawType: 'arc',
|
||
zIndex: 99,
|
||
borderWidth: 5, // 图片边框大小 默认0
|
||
borderColor: '#ffffff' // 图片边框颜色 默认无颜色
|
||
},
|
||
|
||
// 二维码
|
||
{
|
||
type: 'image',
|
||
x: 280,
|
||
y: 585,
|
||
w: 72,
|
||
h: 72,
|
||
zIndex: 99,
|
||
src: img
|
||
}
|
||
]
|
||
})
|
||
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
|
||
},
|
||
|
||
// 复制邀请码
|
||
copyCenter(e) {
|
||
let copyNo = e
|
||
const result = h5Copy(copyNo)
|
||
if (result === false) {
|
||
uni.showToast({
|
||
title:'不支持',
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title:'复制成功',
|
||
icon:'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 切换海报背景index
|
||
swiperChange(e) {
|
||
this.codeIndex = e.detail.current
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
background: white;
|
||
padding: $padding 0;
|
||
box-sizing: border-box;
|
||
min-height: 100vh;
|
||
@extend .vertical;
|
||
}
|
||
// 轮播
|
||
.code{
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: calc(183% - 280rpx - #{$padding * 2});
|
||
.code-swiper{
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
.code-item{
|
||
height: 100%;
|
||
width: 100%;
|
||
padding: 0 $padding/2;
|
||
.code-lay{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 10;
|
||
}
|
||
.code-back-image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 提示信息
|
||
.footer{
|
||
padding: 0 $padding + 10;
|
||
.hith{
|
||
color: $text-gray;
|
||
font-size: $title-size-sm;
|
||
padding-top: $padding + 10;
|
||
}
|
||
.number {
|
||
background-color: $border-color-lg;
|
||
padding: $padding - 5;
|
||
margin: $margin + 20 0;
|
||
font-size: $title-size-lg;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
.title {
|
||
flex: 1;
|
||
}
|
||
.value {
|
||
font-size: $title-size-m;
|
||
color: $text-price;
|
||
}
|
||
}
|
||
.button {
|
||
background: $mian-color-deep;
|
||
border-radius: 0;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
color: white;
|
||
text-align: center;
|
||
border-radius: 8rpx;
|
||
}
|
||
// number
|
||
// title
|
||
// value
|
||
// button
|
||
// title
|
||
}
|
||
|
||
// 头像昵称
|
||
.codeCont {
|
||
position: absolute;
|
||
left: 10rpx;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: 10rpx 30rpx 20rpx;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
.codeCont-avatar {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #FFFFFF;
|
||
}
|
||
.codeCont-text {
|
||
position: absolute;
|
||
width: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
padding: 10rpx 40rpx 0 140rpx;
|
||
box-sizing: border-box;
|
||
.codeCont-name {
|
||
color: #FFFFFF;
|
||
font-size: $title-size;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.codeCont-number {
|
||
font-size: $title-size-sm;
|
||
display: flex;
|
||
color: #c4a1cb;
|
||
}
|
||
}
|
||
.codeCont-img {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
bottom: 10rpx;
|
||
}
|
||
}
|
||
// 日历
|
||
.codDate {
|
||
position: absolute;
|
||
top: 15rpx;
|
||
right: 70rpx;
|
||
z-index: 9;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
border: 2rpx solid #fffefc;
|
||
.codDate-year {
|
||
padding-top: 5rpx;
|
||
}
|
||
.codDate-day {
|
||
padding: 5rpx 0;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
border-bottom: 2rpx solid #a980c6;
|
||
}
|
||
.codDate-lunar {
|
||
font-size: 24rpx;
|
||
transform: scale(.9);
|
||
padding: 4rpx 0;
|
||
}
|
||
}
|
||
|
||
// 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: 9;
|
||
&-img{
|
||
width: 580rpx;
|
||
position: relative;
|
||
margin: 70rpx auto 20rpx;
|
||
.img{
|
||
width: 100%;
|
||
}
|
||
}
|
||
&-btn{
|
||
padding: 0 $padding * 2;
|
||
.operate {
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
display: inline-block;
|
||
text-align: center;
|
||
color: #fff;
|
||
&-cancel{
|
||
background-color: $text-price;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|