新增绘制海报组件
This commit is contained in:
唐明明
@@ -1,40 +1,71 @@
|
||||
<template>
|
||||
<view v-if="loaded">
|
||||
<image class="codeBack" :src="inviteData.cover"></image>
|
||||
<view class="codDate">
|
||||
<view class="codDate-year" v-if="inviteData.date">
|
||||
{{inviteData.date.solar.month}}
|
||||
</view>
|
||||
<view class="codDate-day">
|
||||
{{inviteData.date.solar.day}}
|
||||
</view>
|
||||
<view class="codDate-lunar">
|
||||
农历{{inviteData.date.lunar}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="codeCont">
|
||||
<image class="codeCont-avatar" v-if="inviteData.user_info" :src="inviteData.user_info.avatar ? inviteData.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
|
||||
<view class="codeCont-text">
|
||||
<view class="codeCont-name" v-if="inviteData.user_info">
|
||||
{{inviteData.user_info.nickname}}
|
||||
</view>
|
||||
<view class="codeCont-number">
|
||||
邀请码：
|
||||
<view class="codeBack-number" @click="copyCenter(inviteData.invite)">
|
||||
{{inviteData.invite}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codeImg">
|
||||
<image class="codeImg-code" :src="inviteData.code" mode="widthFix"></image>
|
||||
<view class="codeImg-name">长按识别</view>
|
||||
</view>
|
||||
<!-- v-if="loaded" -->
|
||||
<view class="content">
|
||||
<view class="code">
|
||||
<swiper class="code-swiper" previous-margin="70rpx" next-margin="70rpx">
|
||||
<swiper-item>
|
||||
<view class="code-item">
|
||||
<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
|
||||
<view class="codDate">
|
||||
<view class="codDate-year">
|
||||
2020.09
|
||||
</view>
|
||||
<view class="codDate-day">
|
||||
02
|
||||
</view>
|
||||
<view class="codDate-lunar">
|
||||
农历八月二十
|
||||
</view>
|
||||
</view>
|
||||
<view class="codeCont">
|
||||
<image class="codeCont-avatar" src="@/static/user/user-portrait.png" mode="aspectFill"></image>
|
||||
<view class="codeCont-text">
|
||||
<view class="codeCont-name">
|
||||
唐明明
|
||||
</view>
|
||||
<view class="codeCont-number">
|
||||
邀请码：
|
||||
<view class="codeBack-number" @click="copyCenter(inviteData.invite)">
|
||||
21321321
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codeImg">
|
||||
<image class="codeImg-code" mode="widthFix"></image>
|
||||
<view class="codeImg-name">长按识别</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="code-item">
|
||||
<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
<swiper-item>
|
||||
<view class="code-item">
|
||||
<image class="code-back-image" src="@/static/dev/WechatIMG9663.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<view class="hith">朋友通过你的邀请注册成功后，将与您绑定好友关系通过成为平台用户，你都可以获得能量碎片奖励。</view>
|
||||
<view class="number">
|
||||
<view class="title">邀请码</view>
|
||||
<view class="value">2173978217389729</view>
|
||||
</view>
|
||||
<view class="button">
|
||||
<view class="title" @click="coverCode">生成分享海报</view>
|
||||
</view>
|
||||
</view>
|
||||
<canvas canvas-id="myCanvas"></canvas>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userInvite } from '@/apis/interfaces/user'
|
||||
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -44,7 +75,7 @@
|
||||
},
|
||||
onLoad() {
|
||||
// 获取二维码
|
||||
this.inviteInfo()
|
||||
// this.inviteInfo()
|
||||
},
|
||||
methods:{
|
||||
// 二维码
|
||||
@@ -59,6 +90,26 @@
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 生成海报
|
||||
coverCode(){
|
||||
let canvas = new Draw({
|
||||
width: '375',
|
||||
height: '745',
|
||||
canvasId: 'myCanvas',
|
||||
_this: this,
|
||||
background: {
|
||||
type: 'color',
|
||||
color: '#fffff'
|
||||
},
|
||||
quality: 1, // 导出图片的质量, 默认1 值范围0~1, 大于一都为1处理
|
||||
drawTipsText: '绘制中...'
|
||||
})
|
||||
// await draw.createdSharePoster(() => {
|
||||
|
||||
// return textArray
|
||||
// })
|
||||
},
|
||||
|
||||
// 复制邀请码
|
||||
copyCenter(e) {
|
||||
@@ -83,15 +134,51 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.codeBack {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
}
|
||||
// 内容
|
||||
.content{
|
||||
background: white;
|
||||
padding: $padding 0;
|
||||
min-height: 100vh;
|
||||
@extend .vertical;
|
||||
}
|
||||
// 轮播
|
||||
.code{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: calc(199% - 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-back-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 提示信息
|
||||
.footer{
|
||||
padding: $padding ($padding*2);
|
||||
text-align: center;
|
||||
.hith{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
// number
|
||||
// title
|
||||
// value
|
||||
// button
|
||||
// title
|
||||
}
|
||||
|
||||
// 头像昵称
|
||||
.codeCont {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -127,23 +214,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.codeImg {
|
||||
position: absolute;
|
||||
bottom: 120rpx;
|
||||
right: 40rpx;
|
||||
z-index: 9;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
opacity: .9;
|
||||
.codeImg-code {
|
||||
width: 100%;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
// 日历
|
||||
.codDate {
|
||||
position: absolute;
|
||||
top: 30rpx;
|
||||
|
||||
Reference in New Issue
Block a user