zhangjing/cardtest
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[更新]

Browse Source
This commit is contained in:
zhangmanman
2021-07-14 10:08:28 +08:00
parent ba6b09db50
commit bc38362878
36 changed files with 481 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
pages/code/code.js Normal file
View File

@@ -0,0 +1,170 @@
/*
* 本时生活
*/
Page({
/**
* 页面的初始数据
*/
data: {
qrcode : '', //二维码
userInfo: '', //我的信息
isImgLay: false, //是否显示图片弹出层
parentId: '' //是否分享进入
},
/**
* 生命周期函数--监听页面加载
*/
onLoad (options) {
// 判断是否由分享进入
if(options.type == "share"){
// 写入缓存
this.setData({
parentId: options.parent_id
})
}
wx.$api.user.myshare(this.data.parentId).then(res=>{
this.setData({
qrcode : res.data.qrcode,
userInfo : res.data.user
})
})
},
/**
* 绘图
*/
dowImg(){
wx.showLoading({
title: '加载中',
})
let avatarImg = new Promise(success=>{
wx.getImageInfo({
src : this.data.userInfo.avatar,
success : res => {
success(res.path)
}
})
})
// 下载素材
let codeImg = new Promise(success => {
wx.getImageInfo({
src : this.data.qrcode,
success : res => {
success(res.path)
}
})
})
Promise.all([codeImg, avatarImg]).then(res => {
// 绘制海报
const ctx = wx.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.data.userInfo.nickname, 194, 350 , 270)
// 文字
ctx.setFontSize(14)
ctx.setFillStyle("#af7700")
ctx.setTextAlign('center')
ctx.fillText(this.data.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, () => {
wx.hideLoading()
wx.canvasToTempFilePath({
canvasId: 'qrcodeCard',
x: 0,
y: 0,
success: res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success : res=>{
wx.showToast({
title: '分享海报已保存至相册',
icon : 'none'
})
},
fail : err=>{
wx.showModal({
title : '提示',
content : '暂未授权小程序写入您的相册，无法存储二维码海报',
confirmColor: '#d82526',
confirmText : '去设置',
success : info=>{
if (info.confirm){
wx.openSetting()
}
}
})
},
complete: e => {
console.log(e)
}
})
}
})
})
}).catch(err=>{
wx.showToast({
title: '海报下载，请检查网络',
icon : 'none'
})
})
},
/**
* 图片弹出层
*/
removeSaveImg(){
this.setData({
isImgLay: !this.data.isImgLay
})
},
/**
* 保存图片到本地
*/
saveImg(){
this.dowImg();
this.setData({
isImgLay: !this.data.isImgLay
})
},
/**
* 分享
*/
onShareAppMessage(){
return {
title : this.data.userInfo.nickname + "邀请您进入本时生活",
imageUrl: "",
query : "/pages/code/code?parent_id=" + this.data.userInfo.user_id + "&type=share"
}
}
})

6
pages/code/code.json Normal file
View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "我的邀请码",
"navigationBarBackgroundColor": "#332829",
"navigationBarTextStyle": "white"
}

48
pages/code/code.wxml Normal file
View File

@@ -0,0 +1,48 @@
<image class="codeTitle" src="/static/img/user-codeTitle.png"></image>
<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-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>
<view class="codeShare">
<button class="codeShare-label codeShare-button" open-type="share" hover-class="none">
微信好友
</button>
<view class="codeShare-label" bindtap="removeSaveImg" hover-class="none">
下载海报
</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>
<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>
</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>

207
pages/code/code.wxss Normal file
View File

@@ -0,0 +1,207 @@
page {
background-color: #f5ecd8;
}
/* 标题 */
.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;
box-sizing: border-box;
z-index: 9;
}
.codeShare-label {
width: calc(50% - 20rpx) !important;
margin: 0 10rpx;
font-weight: normal;
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);
}
.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;
text-align: center;
z-index: 8;
margin-bottom: 200rpx;
}
.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-text {
position: absolute;
width: 100%;
text-align: center;
top: 30rpx;
left: 0;
color: #71552d;
font-weight: 600;
}
.codeCont-avatar {
width: 130rpx;
height: 130rpx;
border-radius: 50%;
margin-bottom: 5rpx;
border: 6rpx solid #ebdcb9;
}
.codeCont-words {
margin-top: 40rpx;
width: 100%;
}
/* 弹窗背景图 */
.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%;
height: 650px;
width: 375px;
background: #fbf6f0;
}
/* 图片弹出层 */
.sign-img-lay{
text-align: center;
}
.sign-img-src{
width: 70vw;
vertical-align: top;
}
.sign-img-btn[size="mini"]{
margin-top: 40rpx;
background: #f5d48f;
font-weight: normal;
color: #2f3245;
height: 90rpx;
line-height: 90rpx;
padding: 0;
width: 70vw;
}
.remove-btn[size="mini"]{
margin-top: 20rpx;
background: #101010;
color: #e5c175;
font-weight: normal;
}
/* 背景 */
.user-back {
position: relative;
width: 100%;
height:600rpx;
text-align: center;
margin-top: 100rpx;
}
.user-back-img {
position: absolute;
width: 70vw;
left: 15vw;
top: 0;
height: 100%;
margin: 0 auto;
border-radius: 10rpx;
}
.user-back-cont {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
color: #2f3245;
}
.user-back-avatar image {
width: 140rpx;
height: 140rpx;
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;
}