zhangjing/sykl-mall
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[最新]

Browse Source
This commit is contained in:
张慢慢
2023-09-26 16:55:20 +08:00
parent 386a66a324
commit 3748f042cb
19 changed files with 322 additions and 416 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,249 +1,187 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
shareSee : false, //分享弹出
identity : '', //1为普通
userInfo : '', //用户信息
inviteText : '', //邀请码
inviteCode : '', //二维码
//海报
posterDatas: {
width : 375, //画布宽度
height : 800, //画布高度
// 缓冲区，无需手动设定
pic : null,
buttonType : 1,
show : false, // 显示隐藏海报弹窗
success : false, // 是否成功生成过海报
canvas : null, // 画布的节点
ctx : null, // 画布的上下文
dpr : 1, // 设备的像素比
},
nameInfo: '', // 用户名
invite : '', // 邀请码
qrcode : '', // 二维码
posters : [], // 海报数组
current : 0, // 选项卡下标
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
//生成海报初始化
var that = this;
var posterDatas = that.data.posterDatas
const query = wx.createSelectorQuery()
query.select('#firstCanvas').fields({
node: true,
size: true
},
function (res) {
const canvas = res.node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = posterDatas.width * dpr
canvas.height = posterDatas.height * dpr
ctx.scale(dpr, dpr)
posterDatas.canvas = canvas
posterDatas.ctx = ctx
posterDatas.dpr = dpr
//存储
that.setData({
posterDatas
})
}).exec()
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取推广码
this.inviteInfo();
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
// })
// })
// 小程序码
this.ShareInfo();
},
/**
* 推广码
*/
inviteInfo() {
wx.$api.user.invite().then(res => {
this.setData({
identity : res.data.code,
userInfo : res.data.user_info,
inviteText : res.data.invite
})
}).catch(err => {})
},
/**
* 小程序码
*/
ShareInfo() {
wx.$api.user.miniShare({
url: '/pages/login/index'
}).then(res => {
this.setData({
inviteCode: res.data.qrcode
})
}).catch(err => {})
},
//海报生成 //画布 生成 海报[海报]
saveImg () {
var that = this;
var posterDatas = that.data.posterDatas
var canvas = posterDatas.canvas
var ctx = posterDatas.ctx
wx.showLoading({
title: '海报生成中',
mask: true
});
title: '加载中...',
mask : true
})
//二维码
var codeImg = new Promise(function (resolve, reject) {
const photo = canvas.createImage();
photo.src = that.data.inviteCode;
photo.onload = (e) => {
resolve(photo);
}
});
//背景素材
var backImg = new Promise(function (resolve, reject) {
const photo = canvas.createImage();
photo.src = "https://api.siyuankunlun.cn/storage/images/2023/03/14/7777441f7a2b25353f2d6de61452418c.png";
photo.onload = (e) => {
resolve(photo);
}
});
Promise.all([codeImg, backImg]).then(res => {
// 绘制背景
ctx.drawImage(res[1], 0, 0, posterDatas.width, posterDatas.height);
// 绘制[二维码-白色背景]
ctx.fillStyle = "#ffffff";
ctx.fillRect(200, 540, 120, 120);
// 绘制[二维码-白色背景黑框]
ctx.strokeStyle = "black";
ctx.strokeRect(199, 539, 122, 122);
// 绘制[二维码]
ctx.drawImage(res[0], 210, 550, 100, 100);
// 文字
ctx.font = "bold 14px Arial"; //字体大小
ctx.fillStyle = "#000"; //字体颜色
ctx.textAlign = "center"
ctx.fillText('扫描二维码了解更多', 260, 690);
// 关闭loading
wx.hideLoading();
//显示海报
posterDatas.success = true;
that.setData({
posterDatas
Promise.all([miniShareFun]).then(res => {
console.log(res)
let miniShareData = res[0].data
this.setData({
posters : miniShareData.posters,
qrcode : miniShareData.code,
invite : miniShareData.invite,
current : 0
})
this.onDownloadImges();
}).catch(err=>{})
},
//下载图片[海报]
onDownloadImges () {
wx.showLoading({
title: '保存中',
mask: true
});
var that = this;
var posterDatas = that.data.posterDatas;
if (!posterDatas.pic) {
that.onCanvasBuildImges();
return;
}
//可写成函数调用 这里不做解释
wx.saveImageToPhotosAlbum({
filePath: posterDatas.pic,
success(res) {
wx.hideLoading();
wx.showToast({
icon: 'none',
title: '已保存到相册，快去分享吧',
})
that.setData({
posterDatas,
shareSee: !that.data.shareSee
})
},
fail() {
wx.hideLoading();
wx.showToast({
icon: 'none',
title: '进入设置页，开启“保存到相册”',
})
that.setData({
posterDatas
})
return;
}
// wx.getImageInfo({
// src : miniShareData.qrcode,
// success : qrcodePath => {
// this.setData({
// qrcode : qrcodePath.path,
// posters : miniShareData.posters,
// nameName : miniShareData.name,
// current: 0
// })
// }
// })
wx.hideLoading()
})
},
//画布 转 图片[海报]
onCanvasBuildImges () {
var that = this;
var posterDatas = that.data.posterDatas;
wx.canvasToTempFilePath({
canvas: posterDatas.canvas,
width: posterDatas.width,
height: posterDatas.height,
destWidth: posterDatas.width * 3,
destHeight: posterDatas.height * 3,
success: res=> {
posterDatas["pic"] = res.tempFilePath;
that.setData({
posterDatas
})
that.onDownloadImges();
},
fail() {
wx.hideLoading();
wx.showToast({
icon: 'none',
title: 'sorry 保存失败,请稍后再试.',
})
return;
}
});
},
/**
* 分享弹出
*/
shareTap() {
swiperChange(e) {
let index = e.detail.current
this.setData({
shareSee: !this.data.shareSee
current: index
})
},
/**
* 检查授权信息
*/
onCheckSetting(){
wx.getSetting({
success: res => {
if(res.authSetting['scope.writePhotosAlbum'] || res.authSetting['scope.writePhotosAlbum'] === undefined){
this.onCanvas()
return
}
wx.showModal({
title : '提示',
content : '暂未授权小程序写入您的相册，无法存储海报',
confirmColor: '#144592',
confirmText : '去设置',
success: res => {
if (res.confirm) {
wx.openSetting()
}
}
})
}
})
},
/**
* 生成海报
*/
onCanvas(){
wx.showLoading({
title: '加载中...',
mask : true
})
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].position.y
let posterX = this.data.posters[this.data.current].position.x
let qrcodeSize = this.data.posters[this.data.current].position.size
let qrcodeSrc = this.data.qrcode
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
// 设置画布
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 = () => {
ctx.drawImage(code, posterX, posterY, qrcodeSize, qrcodeSize)
// 保存海报
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()
}
}
})
}
})
}
}
})
}
})
},
/**
* 微信分享
*/
onShareAppMessage(){
return {
title : this.data.userInfo.nickname + '邀请您了解锶源昆仑',
path : "/pages/index/index?invite=" + this.data.userInfo.inviteText,
title : '锶源昆仑',
path : "/pages/index/index?invite=" + this.data.invite,
imageUrl: "http://cdn.siyuankunlun.com/materials/2022/09/14/code.jpg"
}
}

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

@@ -1,32 +1,34 @@
<view class="code">
<image src="https://api.siyuankunlun.cn/storage/images/2023/03/14/7777441f7a2b25353f2d6de61452418c.png" class="code-back"></image>
<view class="code-cont">
<view class="code-img">
<image src="{{inviteCode}}" mode="widthFix"></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.position.size}}rpx; top: {{item.position.y}}rpx; left: {{item.position.x}}rpx;"
mode="widthFix">
</image>
</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="code-text"><text>扫描二维码了解更多</text></view>
</view>
<view class="code-share" bindtap="shareTap">
<image src="/static/icons/share.png"></image>
<view class="code-share-name">分享</view>
</view>
<!-- canvas海报 -->
<canvas class="canvas" type="2d" id="canvas" style="width: 550px; height: 900px;"></canvas>
</view>
<!-- 海报canvas -->
<!-- <canvas class="canvasImg" canvas-id="qrcodeCard"></canvas> -->
<canvas type="2d" id="firstCanvas" class="canvasImg" style="width:{{posterDatas.width}}px;height:{{posterDatas.height}}px;"></canvas>
<!-- <image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/08/31/555d989b496e6d68ee8405bcae16555e.jpg" class="code-back"></image> -->
<!-- 分享弹出 -->
<view class="sharePop {{shareSee ? 'active' : ''}}">
<view class="shareCont">
<button class="shareCont-label codeShare-button" open-type="share" hover-class="none">
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_icon_00.png"></image>
微信好友
</button>
<view class="shareCont-label" bindtap="saveImg">
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_icon_02.png"></image>
保存二维码
</view>
</view>
<view class="shareCancel" bindtap="shareTap">取消</view>
</view>
<!-- 默认图片 -->
<!-- https://api.siyuankunlun.cn/storage/images/2023/03/14/7777441f7a2b25353f2d6de61452418c.png -->

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

@@ -1,164 +1,18 @@
.code {
width: 100vw;
height: 100vh;
position: relative;
}
.code-back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.content{ display: flex; align-items: center; flex-direction: column; justify-content: center; background: white; box-shadow: brown; min-height: 100vh;}
.code-cont {
width: 450rpx;
position: absolute;
z-index: 9;
text-align: center;
right: 0;
bottom: 13%;
}
/* 海报预览 */
.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; padding: 10rpx;}
.code-img{
margin: 0 auto 20rpx;
overflow: hidden;
width: 220rpx;
height: 220rpx;
border: 4rpx solid #000;
background-color: #ffffff;
padding: 10rpx;
box-sizing: border-box;
}
.code-img image {
width: 100%;
}
.code-text {
color: #000;
font-size: 26rpx;
font-weight: 600;
}
.code-share {
position: absolute;
z-index: 10;
right: 0;
bottom: 40%;
background: linear-gradient(to right, #3f7fff, #568fff);
width: 50rpx;
text-align: center;
border-radius: 26rpx 0 0 26rpx;
padding: 24rpx 4rpx 24rpx 10rpx;
box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .2);
}
.code-share-name {
writing-mode:vertical-rl;
font-size: 28rpx;
padding-left: 4rpx;
color: #fff;
}
.code-share image {
width: 30rpx;
height: 30rpx;
margin-bottom: 5rpx;
}
.sharePop {
position: fixed;
width: 100%;
z-index: 99;
left: 0;
bottom: 0;
background-color: #0a1930;
display: none;
}
.sharePop.active {
display: block;
}
.shareCont-label image {
width: 60rpx;
height: 60rpx;
display: block;
margin: 0 auto 10rpx;
}
.shareCancel {
border-top: 2rpx solid #0e2c58;
color: #ffffff;
width: 100%;
text-align: center;
line-height: 100rpx;
}
.shareCont{
display: flex;
padding: 30rpx 0;
}
.shareCont-label {
color: #ffffff;
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; font-weight: normal;}
/* canvas */
.canvasImg {
position: absolute;
left: -1000%;
height: 800px;
width: 375px;
}
.canvas{ background: #ddd; position: absolute; top: 0; left:-200%; }
/* 何院士样式 */
.newCode-cont {
width: 70%;
height: 200rpx;
position: absolute;
z-index: 9;
text-align: center;
left: 15%;
bottom: 19.5%;
background: linear-gradient(to top, #a09084, #a58367);
padding: 15rpx;
box-sizing: border-box;
border-radius: 30rpx;
}
.newCode-img {
height: 170rpx;
margin: 0 auto;
background: linear-gradient(to top, #e9d1bd, #c49b7a);
border: 4rpx solid #f3c49d;
border-radius: 30rpx;
display: flex;
padding: 10rpx 30rpx 10rpx 10rpx;
box-sizing: border-box;
}
.newCode-img-title {
width: calc(100% - 140rpx);
}
.newCode-img-title image {
width: 80%;
margin-top: 15rpx;
}
.newCode-img-code {
width: 140rpx;
height: 140rpx;
}

20
pages/user/index.wxml
View File

@@ -1,11 +1,21 @@
<view class="Usetop">
<image class="Usetop-back" mode="aspectFill" src="http://cdn.siyuankunlun.com/materials/2022/10/14/uaer_back.jpg"></image>
<!-- 双节 -->
<image class="Usetop-back" mode="aspectFill" src="https://api.siyuankunlun.com/storage/images/2023/09/22/786a12e4d61acb22bcbb2e90cb7ce023.png"></image>
<!-- 默认 -->
<!-- <image class="Usetop-back" mode="aspectFill" src="http://cdn.siyuankunlun.com/materials/2022/10/14/uaer_back.jpg"></image> -->
<view class="Usetop-range" style="padding-top:{{barHeight + jiaonangheight}}px;">
<view class="Usetop-cont" wx:if="{{userLogin}}">
<view class="Usetop-head {{identity.order == '1' ? 'active' : ''}}">
<image class="Usetop-head-avatar" bindtap="updImg" src="{{avatar ? avatar : '../../static/imgs/default_myHead.png'}}" mode="aspectFill"></image>
<image wx:if="{{identity.order == '1'}}" class="Usetop-head-ancrown" src="http://api.siyuankunlun.com/materials/2022/09/19/ancrown_pt.png" mode=""></image>
<image wx:else class="Usetop-head-ancrown" src="http://api.siyuankunlun.com/materials/2022/09/14/ancrown.png" mode=""></image>
<view class="Usetop-head {{identity.order == '1' ? 'active' : ''}}" bindtap="updImg">
<image class="Usetop-head-avatar" src="{{avatar ? avatar : '../../static/imgs/default_myHead.png'}}" mode="aspectFill"></image>
<!-- 双节 -->
<image class="userTop-head-frame" src="https://api.siyuankunlun.com/storage/images/2023/09/22/e4e9b20fe4192e5617fa2eaa630afae8.png" mode=""></image>
<!-- 默认 -->
<!-- <image wx:if="{{identity.order == '1'}}" class="Usetop-head-ancrown" src="http://api.siyuankunlun.com/materials/2022/09/19/ancrown_pt.png" mode=""></image>
<image wx:else class="Usetop-head-ancrown" src="http://api.siyuankunlun.com/materials/2022/09/14/ancrown.png" mode=""></image> -->
</view>
<view class="Usetop-text">
{{nickName}}

19
pages/user/index.wxss
View File

@@ -10,12 +10,19 @@ page {
}
/* 头部 */
/* 双节 */
.Usetop {
width: 100%;
position: relative;
padding-top: 48%;
padding-top: 52%;
}
/* .Usetop {
width: 100%;
position: relative;
padding-top: 48%;
} */
.Usetop-back,
.Usetop-range {
position: absolute;
@@ -98,6 +105,16 @@ page {
border-radius: 50%;
}
/* 双节 */
.userTop-head-frame {
position: absolute;
left: -22rpx;
top: -26rpx;
width: 136rpx;
height: 136rpx;
z-index: 9;
}
.Usetop-head-ancrown {
position: absolute;
width: 48rpx;