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

锶源昆仑会员+体验官

Browse Source
This commit is contained in:
张慢慢
2023-07-22 19:04:56 +08:00
commit 5a6b3517e6
439 changed files with 20654 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
pages/code/index.js Normal file
View File

@@ -0,0 +1,268 @@
/*
* 手太欠
* 愿这世界都如故事里一样 美好而动人~
*/
Page({
/**
* 页面的初始数据
*/
data: {
shareSee : false, //分享弹出
identity : 1, //1为普通，2为上师版， 3为何院士
userInfo : '', //用户信息
inviteText: '', //邀请码
invite : '' //二维码
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取推广码
this.inviteInfo();
// 获取小程序码
this.ShareInfo();
},
/**
* 推广码
*/
inviteInfo() {
wx.$api.user.invite().then(res => {
this.setData({
identity : res.data.user_info.tag,
userInfo : res.data.user_info,
inviteText : res.data.invite
})
}).catch(err => {})
},
/**
* 小程序码
*/
ShareInfo() {
wx.$api.user.miniShare({
url: '/pages/login/index'
}).then(res => {
this.setData({
invite: res.data.qrcode
})
}).catch(err => {})
},
/**
* 分享弹出
*/
shareTap() {
this.setData({
shareSee: !this.data.shareSee
})
},
/**
* 第一种海报样式 保存图片到本地
*/
saveImg(){
this.dowImg();
this.setData({
shareSee: false
})
},
/**
* 第二种海报样式 保存图片到本地
*/
TwoImg(){
this.TwoSaveImg();
this.setData({
shareSee: false
})
},
/**
* 第一种海报样式
*/
dowImg(){
wx.showLoading({
title: '生成中',
mask : true
})
// 下载背景素材
let codeImg = new Promise(success => {
wx.getImageInfo({
src : this.data.invite,
success : res => {
success(res.path)
}
})
})
// 下载背景素材
let backUrl
if (this.data.identity == 1) {
backUrl = "https://api.siyuankunlun.com/storage/materials/2022/09/14/code.jpg"
} else if (this.data.identity == 2) {
backUrl = "https://api.siyuankunlun.com/storage/materials/2022/09/14/code_01.png"
}
Promise.all([codeImg]).then(res => {
wx.getImageInfo({
src : backUrl,
success : networkImg => {
// 绘制海报
const ctx = wx.createCanvasContext('qrcodeCard')
ctx.save()
// 绘制背景
ctx.drawImage(networkImg.path, 0, 0, 375, 800)
// 绘制二维码背景
ctx.drawImage("/static/imgs/codeshart_back.png", 137, 532, 100, 100)
// 绘制二维码
ctx.drawImage(res[0], 145, 540, 85, 85)
// 文字
ctx.setFontSize(12)
ctx.setFillStyle("#eadbc8")
ctx.setTextAlign('center')
ctx.fillText("扫描二维码了解更多", 188, 650 , 270)
// 保存图片
ctx.draw(true, () => {
wx.hideLoading()
wx.canvasToTempFilePath({
canvasId: 'qrcodeCard',
x: 0,
y: 0,
success: keepRes => {
wx.saveImageToPhotosAlbum({
filePath: keepRes.tempFilePath,
success : ()=>{
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=>{})
},
/**
* 第二种海报样式
*/
TwoSaveImg() {
wx.showLoading({
title: '加载中',
})
// 下载背景素材
let codeImg = new Promise(success => {
wx.getImageInfo({
src : this.data.invite,
success : res => {
success(res.path)
}
})
})
Promise.all([codeImg]).then(res => {
wx.getImageInfo({
src: "https://api.siyuankunlun.com/storage/materials/2022/09/14/code_02.png",
success : networkImg => {
// 绘制海报
const ctx = wx.createCanvasContext('qrcodeCard')
ctx.save()
// 绘制背景
ctx.drawImage(networkImg.path, 0, 0, 375, 800)
// 绘制二维码背景
ctx.drawImage("/static/imgs/codeshart_back_02.png", 60, 550, 246, 94)
// 绘制二维码
ctx.drawImage(res[0], 215, 562, 70, 70)
// 绘制标题
ctx.drawImage("/static/imgs/codeShart_title1.png", 80, 570, 120, 56)
// 保存图片
ctx.draw(true, () => {
wx.hideLoading()
wx.canvasToTempFilePath({
canvasId: 'qrcodeCard',
x: 0,
y: 0,
success: keepRes => {
wx.saveImageToPhotosAlbum({
filePath: keepRes.tempFilePath,
success : ()=>{
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=>{})
},
/**
* 微信分享
*/
onShareAppMessage(){
return {
title : this.data.userInfo.nickname + '邀请您了解锶源昆仑',
path : "/pages/login/index?invite=" + this.data.inviteText,
imageUrl: "https://api.siyuankunlun.com/storage/materials/2022/09/14/code.jpg"
}
}
})

4
pages/code/index.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "邀请码"
}

45
pages/code/index.wxml Normal file
View File

@@ -0,0 +1,45 @@
<view class="code">
<image src="http://api.siyuankunlun.com/storage/materials/2022/09/14/code.jpg" class="code-back" wx:if="{{identity == 1}}"></image>
<image src="http://api.siyuankunlun.com/storage/materials/2022/09/14/code_01.png" class="code-back" wx:elif="{{identity == 2}}"></image>
<image src="http://api.siyuankunlun.com/storage/materials/2022/09/14/code_02.png" class="code-back" wx:else></image>
<view class="newCode-cont" wx:if="{{identity == 3}}">
<view class="newCode-img">
<view class="newCode-img-title">
<image src="http://api.siyuankunlun.com/storage/materials/2022/09/14/codeShart_title1.png" mode="widthFix"></image>
</view>
<image class="newCode-img-code" src="{{invite}}"></image>
</view>
</view>
<view class="code-cont" wx:else>
<view class="code-img">
<image src="{{invite}}" mode="widthFix"></image>
</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>
</view>
<!-- 海报canvas -->
<canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
<!-- 分享弹出 -->
<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="TwoImg" wx:if="{{identity == 3}}">
<image src="https://card.ysd-bs.com/storage/materials/2021/09/01/code_icon_02.png"></image>
保存二维码
</view>
<view class="shareCont-label" bindtap="saveImg" wx:else>
<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>

164
pages/code/index.wxss Normal file
View File

@@ -0,0 +1,164 @@
.code {
width: 100vw;
height: 100vh;
position: relative;
}
.code-back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.code-cont {
width: 100%;
position: absolute;
z-index: 9;
text-align: center;
left: 0;
bottom: 19%;
}
.code-img{
margin: 0 auto 20rpx;
overflow: hidden;
border-radius: 30rpx;
width: 190rpx;
height: 190rpx;
border: 4rpx solid #be9768;
background-color: #ffffff;
}
.code-img image {
width: 100%;
}
.code-text {
background: linear-gradient(to right, #aa957b, #ffeeda, #aa957b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-size: 26rpx;
}
.code-share {
position: absolute;
z-index: 10;
left: 0;
bottom: 24%;
background: linear-gradient(to right, #aa957b, #ffeeda);
width: 50rpx;
text-align: center;
border-radius: 0 20rpx 20rpx 0;
padding: 20rpx 0;
}
.code-share-name {
writing-mode:vertical-rl;
font-size: 28rpx;
padding-left: 4rpx;
color: #4d2a00;
}
.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;
}
/* canvas */
.canvasImg {
position: absolute;
left: -1000%;
height: 800px;
width: 375px;
}
/* 何院士样式 */
.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;
}