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

[更新]

Browse Source
This commit is contained in:
zhangmanman
2021-08-09 15:57:37 +08:00
parent c661dd0e16
commit 540d76bdb8
158 changed files with 4914 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
pages/userStored/storedCode/storedCode.js Normal file
View File

@@ -0,0 +1,191 @@
/*
* 本时生活
*/
Page({
/**
* 页面的初始数据
*/
data: {
qrcode : '', //二维码
userInfo : '', //我的信息
isImgLay : false,//是否显示图片弹出层
parentId : '', //是否分享进入
shareState : false //显示分享朋友圈弹出层
},
/**
* 生命周期函数--监听页面加载
*/
onLoad (options) {
// 判断是否由分享进入
// if(options.type == "share"){
// // 写入缓存
// this.setData({
// parentId: options.parent_id
// })
// }
// 获取二维码
wx.$api.user.publicCode('mini', 'recharge', 'pages/userStored/userStored?type=share').then(res=>{
this.setData({
qrcode : res.data.qrcode,
userInfo : res.data.user
})
}).catch(err=>{})
},
/**
* 绘图
*/
dowImg(){
wx.showLoading({
title: '加载中',
})
let avatarImg = new Promise(success=>{
wx.getImageInfo({
src : '',
success : res => {
success(res.path)
}
})
})
// 下载素材
let codeImg = new Promise(success => {
wx.getImageInfo({
src : this.data.qrcode,
success : res => {
success(res.path)
}
})
})
Promise.all([codeImg]).then(res => {
// 绘制海报
const ctx = wx.createCanvasContext('qrcodeCard')
ctx.save()
// 绘制背景
ctx.setFillStyle('#e2e2e2')
ctx.fillRect(0, 0, 375, 603)
// 绘制背景
ctx.drawImage('/static/img/user-storedCode-down.png', 0, 0, 375, 650)
// 绘制二维码
ctx.drawImage(res[0], 114, 400, 150, 150)
// 文字
// ctx.setFontSize(16)
// ctx.setFillStyle("#2f3245")
// ctx.setTextAlign('center')
// ctx.fillText(this.data.userInfo.nickname, 194, 350 , 270)
// 文字
ctx.setFontSize(26)
ctx.setFillStyle("#222222")
ctx.setTextAlign('center')
ctx.fillText("向重要的人分享生活的惊喜", 194, 350 , 350)
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 => {}
})
}
})
})
}).catch(err=>{
wx.showToast({
title: '海报下载，请检查网络',
icon : 'none'
})
})
},
/**
* 图片弹出层
*/
removeSaveImg(){
this.setData({
isImgLay: !this.data.isImgLay
})
},
/**
* 保存图片到本地
*/
saveImg(){
this.dowImg();
this.setData({
isImgLay: !this.data.isImgLay
})
},
/**
* 分享朋友圈弹出层状态
*/
shareShow() {
this.setData({
shareState: !this.data.shareState
})
},
/**
* 分享
*/
onShareAppMessage(){
return {
title : this.data.userInfo.nickname + "邀请您进入本时生活",
imageUrl: "",
path : "/pages/userStored/userStored?parent_id=" + this.data.userInfo.user_id + "&type=share",
}
},
/**
* 用户点击右上角分享朋友圈
*/
onShareTimeline: function () {
return {
title : this.data.userInfo.nickname + "邀请您进入本时生活",
path : "/pages/userStored/userStored?parent_id=" + this.data.userInfo.user_id + "&type=share",
imageUrl: ''
}
}
})

6
pages/userStored/storedCode/storedCode.json Normal file
View File

@@ -0,0 +1,6 @@
{
"usingComponents": {},
"navigationBarTitleText": "储值分享",
"navigationBarBackgroundColor": "#222222",
"navigationBarTextStyle": "white"
}

55
pages/userStored/storedCode/storedCode.wxml Normal file
View File

@@ -0,0 +1,55 @@
<image class="codeTitle" src="/static/img/storedCode.png" mode="widthFix"></image>
<view class="codeCont-code">
<view class="codeCont-title">
向重要的人分享生活的惊喜
</view>
<image class="codeCont-img" src="{{qrcode}}" mode="aspectFill"></image>
</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/storedCode.png" mode="widthFix"></image>
<view class="user-back-cont">
<view class="codeBack-yard-name">
向重要的人分享生活的惊喜
</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>

202
pages/userStored/storedCode/storedCode.wxss Normal file
View File

@@ -0,0 +1,202 @@
page {
background-color: #e2e2e2;
}
.codeTitle {
width: 100%;
}
.codeTitle {
text-align: center;
width: 100%;
}
.codeCont {
margin: 0 auto;
width: 90%;
padding: 40rpx 0;
}
.codeCont-code {
text-align: center;
margin-bottom: 80rpx;
}
.codeCont-img {
width: 380rpx;
height: 380rpx;
}
.codeCont-title {
margin: 40rpx 0;
font-size: 46rpx;
font-weight: 600;
}
.codeShare {
display: flex;
padding: 20rpx 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;
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: 80%;
}
.remove-btn[size="mini"] {
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;
font-size: 36rpx;
font-weight: 600;
}
/* 朋友圈弹出层 */
.sharePop {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
background-color: rgba(0, 0, 0, .6);
text-align: center;
}
.sharePop-row {
width: 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: 8rpx 10rpx 0 0;
}