[更新]
This commit is contained in:
zhangmanman
@@ -8,10 +8,11 @@
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
qrcode : '', //二维码
|
||||
userInfo: '', //我的信息
|
||||
isImgLay: false, //是否显示图片弹出层
|
||||
parentId: '' //是否分享进入
|
||||
qrcode : '', //二维码
|
||||
userInfo : '', //我的信息
|
||||
isImgLay : false,//是否显示图片弹出层
|
||||
parentId : '', //是否分享进入
|
||||
shareState : false //显示分享朋友圈弹出层
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -30,7 +31,7 @@
|
||||
qrcode : res.data.qrcode,
|
||||
userInfo : res.data.user
|
||||
})
|
||||
})
|
||||
}).catch(err=>{})
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -43,7 +44,7 @@
|
||||
|
||||
let avatarImg = new Promise(success=>{
|
||||
wx.getImageInfo({
|
||||
src : this.data.userInfo.avatar,
|
||||
src : '',
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
@@ -60,38 +61,44 @@
|
||||
})
|
||||
})
|
||||
|
||||
Promise.all([codeImg, avatarImg]).then(res => {
|
||||
Promise.all([codeImg]).then(res => {
|
||||
// 绘制海报
|
||||
const ctx = wx.createCanvasContext('qrcodeCard')
|
||||
ctx.save()
|
||||
|
||||
// 绘制背景
|
||||
ctx.setFillStyle('#f7662d')
|
||||
ctx.setFillStyle('#e2e2e2')
|
||||
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.drawImage(res[0], 114, 470, 150, 150)
|
||||
|
||||
// 文字
|
||||
ctx.setFontSize(16)
|
||||
ctx.setFillStyle("#2f3245")
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText(this.data.userInfo.nickname, 194, 350 , 270)
|
||||
// ctx.setFontSize(16)
|
||||
// ctx.setFillStyle("#2f3245")
|
||||
// ctx.setTextAlign('center')
|
||||
// ctx.fillText(this.data.userInfo.nickname, 194, 350 , 270)
|
||||
|
||||
// 文字
|
||||
ctx.setFontSize(14)
|
||||
ctx.setFillStyle("#af7700")
|
||||
ctx.setFontSize(40)
|
||||
ctx.setFillStyle("#222222")
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText(this.data.userInfo.nickname + " -- " + "邀请您进入本时生活", 188, 570 , 270)
|
||||
ctx.fillText("扫码享福利", 188, 400 , 270)
|
||||
|
||||
// 文字
|
||||
ctx.setFontSize(18)
|
||||
ctx.setFillStyle("#222222")
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText("扫描二维码加入本时生活", 188, 440 , 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.drawImage(res[1], 156, 250, 70, 70);
|
||||
|
||||
// 保存图片
|
||||
ctx.draw(true, () => {
|
||||
@@ -122,9 +129,7 @@
|
||||
}
|
||||
})
|
||||
},
|
||||
complete: e => {
|
||||
console.log(e)
|
||||
}
|
||||
complete: e => {}
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -157,6 +162,15 @@
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享朋友圈弹出层状态
|
||||
*/
|
||||
shareShow() {
|
||||
this.setData({
|
||||
shareState: !this.data.shareState
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享
|
||||
*/
|
||||
@@ -164,7 +178,18 @@
|
||||
return {
|
||||
title : this.data.userInfo.nickname + "邀请您进入本时生活",
|
||||
imageUrl: "",
|
||||
query : "/pages/code/code?parent_id=" + this.data.userInfo.user_id + "&type=share"
|
||||
path : "/pages/index/index?parent_id=" + this.data.userInfo.user_id + "&type=share"
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享朋友圈
|
||||
*/
|
||||
onShareTimeline () {
|
||||
return {
|
||||
title : this.data.userInfo.nickname + "邀请您进入本时生活",
|
||||
path : "/pages/index/index?parent_id=" + this.data.userInfo.user_id + "&type=share",
|
||||
imageUrl: ''
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"usingComponents": {},
|
||||
"navigationBarTitleText": "我的邀请码",
|
||||
"navigationBarBackgroundColor": "#332829",
|
||||
"navigationBarBackgroundColor": "#000000",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
@@ -1,48 +1,70 @@
|
||||
<image class="codeTitle" src="/static/img/user-codeTitle.png"></image>
|
||||
<view class="codeTitle">
|
||||
<image src="/static/img/code_title.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="codeCont">
|
||||
<image class="codeCont-gold" src="/static/img/user-codeGold.png"></image>
|
||||
<image class="codeCont-tips" src="/static/img/user-codeTips-01.png" mode="widthFix"></image>
|
||||
<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>
|
||||
<image class="codeCont-words" src="/static/img/user-codeTips-02.png" mode="widthFix"></image>
|
||||
<image class="codeCont-code" src="{{qrcode}}" mode="aspectFill"></image>
|
||||
<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>
|
||||
</view>
|
||||
<view class="codeShare">
|
||||
<button class="codeShare-label codeShare-button" open-type="share" hover-class="none">
|
||||
<image src="/static/img/code_icon_00.png"></image>
|
||||
微信好友
|
||||
</button>
|
||||
<view class="codeShare-label" bindtap="shareShow">
|
||||
<image src="/static/img/code_icon_01.png"></image>
|
||||
朋友圈
|
||||
</view>
|
||||
<view class="codeShare-label" bindtap="removeSaveImg" hover-class="none">
|
||||
下载海报
|
||||
<image src="/static/img/code_icon_02.png"></image>
|
||||
生成海报
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 海报canvas -->
|
||||
<canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
|
||||
|
||||
<!-- 图片弹出层 -->
|
||||
<view class="user-lay sign-img-lay" wx:if="{{isImgLay}}">
|
||||
<view class="user-back">
|
||||
<image class="user-back-img" src="/static/img/user-codeImg-active.png" mode="aspectFill"></image>
|
||||
<image class="user-back-img" src="/static/img/code_share.png" mode="widthFix"></image>
|
||||
<view class="user-back-cont">
|
||||
<view class="user-back-avatar">
|
||||
<image src="{{userInfo.avatar}}" mode="aspectFill"></image>
|
||||
<view class="">
|
||||
{{userInfo.nickname}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-back-yard">
|
||||
<image src="{{qrcode}}" mode="aspectFill"></image>
|
||||
<view class="codeBack-yard-name">
|
||||
邀请好友扫码，即可绑定关系
|
||||
</view>
|
||||
<view class="codeBack-yard-name">
|
||||
<view class="codeBack-yard-title">扫码享福利</view>
|
||||
<view>识别二维码加入本时生活</view>
|
||||
</view>
|
||||
<image src="{{qrcode}}" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
<button class="sign-img-btn" size="mini" bindtap="saveImg">保存到相册</button>
|
||||
<button class="sign-img-btn remove-btn" size="mini" bindtap="removeSaveImg">取消</button>
|
||||
</view>
|
||||
|
||||
<!-- 朋友圈提示弹出 -->
|
||||
<view class="sharePop" wx:if="{{shareState}}" bindtap="shareShow">
|
||||
<image class="sharePop-row" src="/static/img/code_share_01.png" mode="widthFix"></image>
|
||||
<view class="shareList">
|
||||
<view class="shareLabel">
|
||||
<text>1</text>
|
||||
点击右上角<image src="/static/img/code_share_00.png" mode="aspectFill"></image>打开菜单
|
||||
</view>
|
||||
<view class="shareLabel">
|
||||
<text>2</text>
|
||||
选择菜单<image src="/static/img/code_share_02.png" mode="aspectFill"></image>分享朋友圈
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,124 +1,127 @@
|
||||
page {
|
||||
background-color: #f5ecd8;
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
|
||||
/* 标题 */
|
||||
.codeTitle {
|
||||
width: 100vw;
|
||||
height: 45vh;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* 按钮 */
|
||||
.codeShare {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #333333;
|
||||
display: flex;
|
||||
padding: 30rpx 20rpx 40rpx;
|
||||
background-color: #000000;
|
||||
border-radius: 0 0 200rpx 200rpx;
|
||||
padding: 40rpx 20rpx 160rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.codeShare-label {
|
||||
width: calc(50% - 20rpx) !important;
|
||||
margin: 0 10rpx;
|
||||
font-weight: normal;
|
||||
.codeTitle {
|
||||
text-align: center;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0;
|
||||
border-radius: 60rpx;
|
||||
border: #c1a468 2rpx solid;
|
||||
font-size: 32rpx;
|
||||
color: #412f0b;
|
||||
background: linear-gradient(to bottom, #eee3c8, #c1a468);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.codeShare-button {
|
||||
color: #ffd887;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 二维码 */
|
||||
.codeCont {
|
||||
position: relative;
|
||||
width: 80vw;
|
||||
left: 10vw;
|
||||
top: 31.5vh;
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
border-radius: 10rpx;
|
||||
justify-items: center;
|
||||
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;
|
||||
z-index: 8;
|
||||
margin-bottom: 200rpx;
|
||||
color: #fff;
|
||||
background-color: #797979;
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
|
||||
.codeCont-code {
|
||||
width: 340rpx;
|
||||
height: 340rpx;
|
||||
margin: 20rpx 0 40rpx;
|
||||
}
|
||||
|
||||
.codeCont-tips {
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.codeCont-gold {
|
||||
position: absolute;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
right: 40rpx;
|
||||
top: -40rpx;
|
||||
.codeCont-tisp text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.codeCont-text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
top: 30rpx;
|
||||
left: 0;
|
||||
color: #71552d;
|
||||
font-weight: 600;
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
|
||||
.codeCont-avatar {
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 5rpx;
|
||||
border: 6rpx solid #ebdcb9;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.codeCont-words {
|
||||
margin-top: 40rpx;
|
||||
width: 100%;
|
||||
.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;
|
||||
}
|
||||
|
||||
.codeShare {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.codeShare {
|
||||
display: flex;
|
||||
padding: 0 50rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.codeShare-label {
|
||||
flex: 3;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.codeShare-label image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: block;
|
||||
margin: 0 auto 20rpx;
|
||||
}
|
||||
|
||||
.codeShare-button {
|
||||
width: auto !important;
|
||||
border: none;
|
||||
background: transparent;
|
||||
font-size: 28rpx;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
||||
/* 弹窗背景图 */
|
||||
.user-lay{
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-pack: center;
|
||||
position: fixed;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
height: 100vh;
|
||||
.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;
|
||||
z-index: 99;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* canvas */
|
||||
.canvasImg{
|
||||
.canvasImg {
|
||||
position: absolute;
|
||||
left: -1000%;
|
||||
height: 650px;
|
||||
@@ -126,82 +129,119 @@ page {
|
||||
background: #fbf6f0;
|
||||
}
|
||||
|
||||
|
||||
/* 图片弹出层 */
|
||||
.sign-img-lay{
|
||||
text-align: center;
|
||||
.sign-img-lay {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sign-img-src{
|
||||
width: 70vw;
|
||||
vertical-align: top;
|
||||
.sign-img-src {
|
||||
width: 70vw;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sign-img-btn[size="mini"]{
|
||||
margin-top: 40rpx;
|
||||
.sign-img-btn[size="mini"] {
|
||||
margin-top: 40rpx;
|
||||
background: #f5d48f;
|
||||
font-weight: normal;
|
||||
color: #2f3245;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
width: 70vw;
|
||||
color: #2f3245;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.remove-btn[size="mini"]{
|
||||
margin-top: 20rpx;
|
||||
background: #101010;
|
||||
color: #e5c175;
|
||||
.remove-btn[size="mini"] {
|
||||
margin-top: 20rpx;
|
||||
background: #101010;
|
||||
color: #e5c175;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* 背景 */
|
||||
.user-back {
|
||||
position: relative;
|
||||
.user-back-img {
|
||||
width: 100%;
|
||||
height:600rpx;
|
||||
text-align: center;
|
||||
margin-top: 100rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-back-img {
|
||||
position: absolute;
|
||||
width: 70vw;
|
||||
left: 15vw;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
.user-back {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.user-back-cont {
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
|
||||
/* 朋友圈弹出层 */
|
||||
.sharePop {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #2f3245;
|
||||
z-index: 9;
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-back-avatar image {
|
||||
.sharePop-row {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
position: fixed;
|
||||
right: 110rpx;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.shareList {
|
||||
color: #ffffff;
|
||||
line-height: 60rpx;
|
||||
font-weight: 700;
|
||||
font-size: 36rpx;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 30%;
|
||||
}
|
||||
|
||||
.shareLabel {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.shareLabel image {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
margin: 0 20rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.shareLabel text {
|
||||
display: inline-block;
|
||||
background: #0696ca;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 50%;
|
||||
margin-top: -60rpx;
|
||||
margin-bottom: 20rpx;
|
||||
border: 6rpx solid #fff1d1;
|
||||
}
|
||||
|
||||
.user-back-yard {
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
.codeBack-yard-name {
|
||||
font-size: 28rpx;
|
||||
color: #af7700;
|
||||
}
|
||||
|
||||
.user-back-yard image {
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin: 8rpx 10rpx 0 0;
|
||||
}
|
||||
Reference in New Issue
Block a user