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

[最新]

Browse Source
This commit is contained in:
张慢慢
2023-09-15 17:14:36 +08:00
parent 0dcf23bfde
commit a626d36591
22 changed files with 383 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

261
pages/user/code/code.js
View File

@@ -1,68 +1,72 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
barHeight : getApp().globalData.barHeight, // 状态栏高度
shareSee : false, // 分享弹出
inviteText : '', // 邀请码
inviteCode : '', // 二维码
nickname : '', // 用户名称
invite : '', // 邀请码
//海报
canvas : ''
nameInfo: '', // 用户名
invite : '', // 邀请码
qrcode : '', // 二维码
posters : [], // 海报数组
current : 0, // 选项卡下标
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
// 初始化画布
wx.createSelectorQuery().select('#coverCanvas').fields({node: true, size: true}).exec(canvasNode => {
const canvas = canvasNode[0].node
canvas.width = 375
canvas.height = 800
this.setData({
canvas
})
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 小程序码
this.ShareInfo();
console.log(wx.getStorageSync("invite"))
},
onLoad() {
let miniShareFun = wx.$api.user.poster({ url: 'pages/mall/index' })
// wx.$api.user.poster({ url: 'pages/mall/index' }).then(res => {
// console.log(res.data)
// this.setData({
// nameInfo : res.data.name,
// posters : res.data.posters,
// qrcode : res.data.qrcode
// })
// })
/**
* 小程序码
*/
ShareInfo() {
wx.$api.user.miniShare({
url: 'pages/mall/index'
}).then(res => {
let { user_info, qrcode, invite } = res.data
wx.showLoading({
title: '加载中...',
mask : true
})
Promise.all([miniShareFun]).then(res => {
let miniShareData = res[0].data
this.setData({
invite : invite,
inviteCode: qrcode,
nickname : user_info.nickname
nameInfo : miniShareData.name,
posters : miniShareData.posters,
qrcode : miniShareData.qrcode,
invite : miniShareData.invite,
current : 0
})
}).catch(err => {})
// wx.getImageInfo({
// src : miniShareData.qrcode,
// success : qrcodePath => {
// this.setData({
// qrcode : qrcodePath.path,
// posters : miniShareData.posters,
// nameName : miniShareData.name,
// current: 0
// })
// }
// })
wx.hideLoading()
})
},
swiperChange(e) {
let index = e.detail.current
this.setData({
current: index
})
},
/**
* 检查授权信息
*/
onSetting(){
onCheckSetting(){
wx.getSetting({
success: res => {
if(res.authSetting['scope.writePhotosAlbum'] || res.authSetting['scope.writePhotosAlbum'] === undefined){
@@ -89,96 +93,102 @@ Page({
*/
onCanvas(){
wx.showLoading({
title: '生成图片中...',
title: '加载中...',
mask : true
})
const canvas = this.data.canvas
const ctx = canvas.getContext('2d')
const codeImgEl = canvas.createImage()
const backBackEl = canvas.createImage()
wx.getImageInfo({
src: this.data.posters[this.data.current].cover,
success: imgInfo => {
wx.hideLoading()
wx.showLoading({
title : '生成海报中...',
mask : true
})
let posterSrc = imgInfo.path
let posterW = this.data.posters[this.data.current].width
let posterH = this.data.posters[this.data.current].height
let posterY = this.data.posters[this.data.current].qrcode.y
let posterX = this.data.posters[this.data.current].qrcode.x
let qrcodeSize = this.data.posters[this.data.current].qrcode.size
let qrcodeSrc = this.data.qrcode
let nameY = this.data.posters[this.data.current].font.font_y
let nameColor = this.data.posters[this.data.current].font.font_color
codeImgEl.src = this.data.inviteCode //二维码
backBackEl.src = 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/08/31/555d989b496e6d68ee8405bcae16555e.jpg' //背景素材
const codeImgLoding = new Promise((resolve, reason) => {
codeImgEl.onload = () => {
resolve()
}
})
const backBackLoding = new Promise((resolve, reason) => {
backBackEl.onload = () => {
resolve()
}
})
Promise.all([codeImgLoding, backBackLoding]).then(() => {
ctx.drawImage(backBackEl, 0, 0, 375, 800)
// 绘制[二维码-白色背景]
ctx.fillStyle = "#ffffff";
ctx.fillRect(140, 570, 130, 130);
wx.createSelectorQuery().select('#canvas').fields({ node: true, size: true }).exec(res => {
const canvas = res[0].node;
const ctx = canvas.getContext("2d");
const img = canvas.createImage()
const code = canvas.createImage()
const dpr = wx.getSystemInfoSync().pixelRatio
// 绘制[二维码-白色背景黑框]
ctx.strokeStyle = "#da2b54";
ctx.lineWidth = 2
ctx.strokeRect(140, 570, 132, 132);
// 设置画布
canvas.width = posterW * dpr
canvas.height = posterH * dpr
ctx.scale(dpr, dpr)
// 清理画布
ctx.clearRect(0, 0, canvas.width, canvas.height)
// 绘制背景
img.src = posterSrc
img.onload = () => {
ctx.drawImage(img, 0, 0, posterW, posterH)
// 绘制图片二维码
code.src = qrcodeSrc
code.onload = () => {
var x = (posterX - 0 + 60);
var y = (nameY - 0 + 20);
// 绘制[二维码]
ctx.drawImage(codeImgEl, 150, 580, 110, 110)
//绘制字体
ctx.font = '22px "微软雅黑"';
ctx.fillStyle = nameColor;
ctx.textAlign = "center";
ctx.fillText(this.data.nameInfo, x, y);
// ctx.arc( posterX + qrcodeSize/2, posterY + qrcodeSize/2, qrcodeSize/2 + 5, 0, 2 * Math.PI, false);
ctx.arc(Number(posterX) + qrcodeSize/2, Number(posterY) + Number(qrcodeSize/2), Number(qrcodeSize/2 + 5), 0, 2 * Math.PI,true);
ctx.fillStyle = "#ffffff";
ctx.fill();
ctx.drawImage(code, posterX, posterY, qrcodeSize, qrcodeSize)
// 文字
ctx.font = "bold 14px Arial"; //字体大小
ctx.fillStyle = "#ffffff"; //字体颜色
ctx.textAlign = "center"
ctx.fillText('保存并分享二维码', 208, 740);
// 用户昵称
ctx.font = "bold 14px Arial"; //字体大小
ctx.fillStyle = "#ffffff"; //字体颜色
ctx.textAlign = "center"
ctx.fillText(this.data.nickname, 208, 770);
wx.hideLoading()
wx.canvasToTempFilePath({
canvas: this.data.canvas,
success : res => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: saveRes => {
wx.showToast({
title: '海报已保存至您的相册',
icon : 'none'
// 保存海报
wx.canvasToTempFilePath({
canvas : canvas,
width : canvas.width,
height : canvas.height,
destWidth : canvas.width,
destHeight : canvas.height,
quality : 1,
success : paths => {
wx.saveImageToPhotosAlbum({
filePath: paths.tempFilePath,
success: res => {
wx.showToast({
title : '海报已保存',
})
}
})
},
fail: () => {
wx.hideLoading()
wx.showModal({
title: '提示',
content: '暂未授权小程序写入您的相册，无法存储海报',
confirmColor: '#e50d01',
confirmText: '去设置',
success: res => {
if (res.confirm) {
wx.openSetting()
}
}
})
}
})
this.setData({
shareSee: false
})
},
fail: () => {
wx.hideLoading()
}
})
},
})
}).catch(err => {
wx.hideLoading()
wx.showToast({
title: '图片加载失败',
icon : 'none'
})
}
})
}
})
},
/**
* 分享弹出
*/
shareTap() {
this.setData({
shareSee: !this.data.shareSee
})
},
// 返回上一页
returnGo() {
wx.navigateBack()
},
/**
* 微信分享
*/
@@ -187,9 +197,8 @@ Page({
shareSee: false
})
return {
title : '绚火健康，生命可以如此精彩~',
path : "/pages/mall/index?invite=" + this.data.invite,
imageUrl: "https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/08/31/555d989b496e6d68ee8405bcae16555e.jpg"
title : '绚火健康品牌主张',
path : "/pages/mall/index?invite=" + this.data.invite
}
}
})

4
pages/user/code/code.json
View File

@@ -1,4 +1,4 @@
{
"usingComponents": {},
"navigationStyle": "custom"
}
"navigationBarTitleText": "邀请海报"
}

63
pages/user/code/code.wxml
View File

@@ -1,40 +1,33 @@
<!-- header -->
<view class="navigation {{isFixedTop > 0 ? 'active' : ''}}" style="padding-top:{{barHeight}}px;">
<image bindtap="returnGo" class="navigation-arrow" src="{{isFixedTop > 0 ? '/static/icons/arrowBlack.png' : '/static/icons/arrowWrite.png'}}"></image>
</view>
<!-- 二维码海报 -->
<view class="code">
<image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/08/31/555d989b496e6d68ee8405bcae16555e.jpg" class="code-back"></image>
<view class="code-cont">
<view class="code-img">
<image src="{{inviteCode}}" mode="widthFix"></image>
</view>
<view class="code-text"><text>保存并分享二维码</text></view>
</view>
<view class="code-share" bindtap="shareTap">
<image src="https://cdn.douhuofalv.com/images/2023/08/11/063dc9fe75abe56e9c654b65c3bfc771.png"></image>
<view class="code-share-name">分享</view>
</view>
</view>
<!-- 海报canvas -->
<canvas type="2d" style="width: 375px; height: 800px;" id="coverCanvas" class="canvas-img" />
<!-- 分享弹出 -->
<view class="sharePop-lay {{shareSee ? 'active' : ''}}">
<view class="sharePop">
<view class="shareCont">
<button class="shareCont-label codeShare-button" open-type="share" hover-class="none">
<image src="https://cdn.shuiganying.com/images/2023/03/28/f8b773edc2fe6db8e45f96773b9a8dc4.png"></image>
微信好友
</button>
<view class="shareCont-label" bindtap="onSetting">
<image src="https://cdn.shuiganying.com/images/2023/03/28/cfe0efbb53eaf7911ea5211923859c65.png"></image>
保存二维码
<view class="content">
<!-- 海报 -->
<swiper indicator-dots="{{true}}" class="poster" bindchange='swiperChange' circular='{{true}}' current='{{currentBgIndex}}'>
<swiper-item wx:for="{{posters}}" wx:key="posters">
<view class="poster-item" style="background-image: url({{item.cover}});">
<image
class="poster-qrocde"
src="{{qrcode}}"
style="width: {{item.qrcode.size}}rpx; top: {{item.qrcode.y}}rpx; left: {{item.qrcode.x}}rpx;"
mode="widthFix">
</image>
<view class="poster-name" wx:if="{{item.show_name}}" style="width: {{item.qrcode.size}}rpx; font-size: {{item.font.font_size}}px; top: {{item.font.font_y}}rpx; left: {{item.font.font_x}}rpx; color: {{item.font.font_color}};">{{nameInfo}}</view>
</view>
</swiper-item>
</swiper>
<!-- 操作按钮 -->
<view class="tool">
<button class="tool-item" size="mini" open-type="share">
<image class="tool-icon" src="/static/share_00.png" mode="aspectFill"></image>
<view class="tool-text">发送朋友</view>
</button>
<view class="tool-item" bind:tap="onCheckSetting">
<image class="tool-icon" src="/static/share_01.png" mode="aspectFill"></image>
<view class="tool-text">保存海报</view>
</view>
<view class="shareCancel" bindtap="shareTap">取消</view>
</view>
<!-- canvas海报 -->
<canvas class="canvas" type="2d" id="canvas" style="width: 550px; height: 900px;"></canvas>
</view>
<!-- <image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/08/31/555d989b496e6d68ee8405bcae16555e.jpg" class="code-back"></image> -->

40
pages/user/code/code.wxss
View File

@@ -1,31 +1,19 @@
/* 返回上一页 */
.navigation{ position: fixed; top: 0; left: 0; z-index: 9; width: 100%; height: 90rpx; background-color: transparent; transition: .2s; }
.navigation.active { background-color: transparent; }
.navigation-arrow { width: 44rpx; height: 44rpx; margin: 20rpx 15rpx 0 20rpx; }
/* 二维码海报 */
.code { width: 100vw; height: 100vh; position: relative; }
.code-back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.code-cont { width: 400rpx; position: absolute; z-index: 9; text-align: center; left: calc(50% - 200rpx); bottom: 8vh; }
.code-img{ margin: 0 auto 20rpx; overflow: hidden; width: 260rpx; height: 260rpx; border: 4rpx solid #ff4f64; background-color: #ffffff; padding: 10rpx; box-sizing: border-box; border-radius: 50%; }
.code-img image { width: 100%; }
.code-text { color: #ffffff; font-size: 30rpx; }
.content{ display: flex; align-items: center; flex-direction: column; justify-content: center; background: white; box-shadow: brown; min-height: 100vh;}
/* 海报分享 */
.code-share { position: absolute; right: 0; bottom: 15%; background: linear-gradient(to right, #fffafb, #ffd4dd); width: 50rpx; text-align: center; border-radius: 26rpx 0 0 26rpx; padding: 30rpx 10rpx 30rpx 15rpx; box-shadow: 0 0 0 6rpx rgba(249, 96, 116, .8); z-index: 9;
}
.code-share-name { writing-mode:vertical-rl; font-size: 30rpx; padding-left: 4rpx; color: #da2b54; }
.code-share image { width: 36rpx; height: 36rpx; margin-bottom: 5rpx; }
/* 海报预览 */
.poster{ width: 550rpx; height: 900rpx; background: white; box-shadow: 0 0 10rpx 10rpx rgba(0, 0, 0, .05); border-radius: 20rpx; overflow: hidden; }
.poster-item{ width: 550rpx; height: 900rpx; background-position: center; background-size: cover; position: relative; }
.poster-qrocde{ position: absolute; background-color: white; border-radius: 50%; padding: 10rpx; }
.poster-name{ position: absolute; z-index: 999; text-align: center;}
/* 弹出层 */
.sharePop-lay{ background: rgba(0, 0, 0, .5); position: fixed; top: 0; left: 0; right: 0; height: 100vh; width: 100vw; z-index: 9; display: none; }
.sharePop-lay.active{ display: block; }
.sharePop { position: fixed; width: 100%; z-index: 99; left: 0; bottom: 0; background-color: #ffffff; }
.shareCont-label image { width: 60rpx; height: 60rpx; display: block; margin: 0 auto 10rpx; }
.shareCancel { border-top: 2rpx solid #ebebeb; color: #000000; width: 100%; text-align: center; line-height: 100rpx; }
.shareCont{ display: flex; padding: 30rpx 0; }
.shareCont-label { color: #000000; flex: 2; text-align: center; font-size: 28rpx; }
.codeShare-button { background-color: transparent; padding: 0; font-weight: normal; }
/* 分享功能 */
.tool{ display: flex; align-items: center; justify-content: space-around; width: 70vw; margin-top: 80rpx; }
.tool-item{ text-align: center; }
.tool-item[size="mini"]{ padding: 0; margin: 0; background-color: transparent; }
.tool-icon{ background: #f7f8f9; width: 88rpx; height: 88rpx; border-radius: 50%; vertical-align: top; }
.tool-text{ color: gray; font-size: 30rpx; line-height: 40rpx; margin-top: 10rpx; }
/* canvas */
.canvas-img { position: fixed; left: 0%; left: -100%; top: 0; z-index: -1; }
.canvas{ background: #ddd; position: absolute; top: 0; left:-200%; }