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;
}

69
pages/userStored/userStored.js Normal file
View File

@@ -0,0 +1,69 @@
// pages/userStored/userStored.js
Page({
/**
* 页面的初始数据
*/
data: {
isUser : false, //用户登录状态
canShare : '', //分享按钮状态
storedArr : [], //储值权益列表,
parentId : '', //分享者id
},
/**
* 生命周期函数--监听页面加载
*/
onLoad (options) {
// 判断是否由分享进入
if(options.type == "share"){
this.setData({
parentId: options.parent_id
})
// 写入缓存
wx.setStorage({
key : 'parentId',
data : options.parent_id
})
}
},
onShow(){
this.setData({
isUser : getApp().globalData.isUser
})
// 获取产品详情
this.storedShow();
},
/**
* 产品详情
*/
storedShow(){
wx.$api.user.storedList().then(res=>{
this.setData({
canShare : res.data.canShare,
storedArr : res.data.list
})
}).catch(err=>{})
},
/**
* 处理未登录时的转跳
*/
userNav(e){
let pageUrl = e.currentTarget.dataset.url
if(this.data.isUser){
wx.navigateTo({
url: pageUrl
})
}else{
// 去登录
wx.navigateTo({
url: "/pages/login/login?way=shareLogin"
})
}
}
})

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

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

45
pages/userStored/userStored.wxml Normal file
View File

@@ -0,0 +1,45 @@
<block wx:if="{{storedArr.length > 0}}">
<image class="userStoredBack" src="/static/img/userStored_back.png" mode="widthFix"></image>
<view class="userStored">
<view class="userStoredCont">
<image src="/static/img/userStored_icon.png" class="userStoredCont-back"></image>
<image src="/static/img/userStored_text.png" class="userStoredCont-text"></image>
<view class="userStoredCont-list">
<view class="userStoredCont-label" wx:for="{{storedArr}}" wx:key="storedArr">
<view class="userStoredCont-title">
<text>{{item.title}}</text>
<view class="userStoredCont-title-tips">消费红包</view>
</view>
<view class="userStoredCont-brief">
{{item.text}}<text>（{{item.qty}}张50元）</text>
</view>
<view class="userStoredCont-rights">
<view class="userStoredCont-rights-left">
<image src="/static/img/userStored_img_00.png" class="userStoredCont-fireworks"
mode="widthFix">
</image>
<view class="userStoredCont-tips">
<image src="/static/img/userStored_img_01.png" class="userStoredCont-rights-back"
mode="widthFix"></image>
<text>{{item.coupon_name}}</text>
</view>
<view class="userStoredCont-price">
<text>￥{{item.worth}}</text>(满{{item.full}}减{{item.worth}})
</view>
</view>
<view bindtap="userNav" data-url="/pages/rights/rights?rightsId={{item.right_config_id}}&parentid={{parentId}}" class="userStoredCont-rights-btn">立即儲值</view>
</view>
</view>
</view>
</view>
</view>
<navigator url="/pages/userStored/storedCode/storedCode" hover-class="none" class="userStoredBtn"
wx:if="{{canShare}}">
储值分享
</navigator>
</block>
<view class="pack-center pages-hint" wx:else>
<image src="/static/img/staff_null.png"></image>
<view>暂无订单</view>
</view>

200
pages/userStored/userStored.wxss Normal file
View File

@@ -0,0 +1,200 @@
.userStoredBack {
width: 100%;
}
.userStored {
padding: 0 30rpx;
box-sizing: border-box;
}
.userStoredCont {
background: linear-gradient(to bottom, #e3d6c4, #bca585);
border-radius: 20rpx;
position: relative;
margin-top: -220rpx;
height: 1020rpx;
padding: 20rpx 0;
box-sizing: border-box;
}
.userStoredCont-back,
.userStoredCont-text {
position: absolute;
}
.userStoredCont-back {
width: 70%;
right: 0;
top: 0;
}
.userStoredCont-text {
width: 420rpx;
height: 192rpx;
left: 20rpx;
top: 40rpx;
z-index: 1;
}
.userStoredCont-list {
background-color: #fefbf4;
border-radius: 20rpx;
position: absolute;
top: 260rpx;
left: 30rpx;
right: 30rpx;
width: calc(100% - 60rpx);
padding: 30rpx 30rpx 0;
box-sizing: border-box;
}
.userStoredCont-label {
margin-bottom: 30rpx;
padding-bottom: 40rpx;
height: 300rpx;
border-bottom: #e8bd94 solid 2rpx;
}
.userStoredCont-label:last-child {
border: none;
}
.userStoredCont-title {
display: flex;
}
.userStoredCont-title text {
font-size: 48rpx;
color: #806136;
}
.userStoredCont-title-tips {
background-color: #fb5734;
color: #ffffff;
border-radius: 80rpx;
font-size: 28rpx;
height: 42rpx;
line-height: 42rpx;
margin: 17rpx 0 0 20rpx;
padding: 0 15rpx;
}
.userStoredCont-brief {
margin: 30rpx 0;
color: #ca9c5a;
}
.userStoredCont-brief text {
font-size: 22rpx;
}
.userStoredCont-rights {
display: flex;
}
.userStoredCont-rights-left {
background: linear-gradient(to top, #f6e4ca, #e4c6a3);
width: calc(100% - 230rpx);
margin-right: 30rpx;
height: 140rpx;
border-radius: 10rpx;
position: relative;
}
.userStoredCont-price {
color: #806136;
}
.userStoredCont-tips {
width: 100%;
height: 44rpx;
top: 10rpx;
right: 0;
position: absolute;
text-align: center;
color: #ffffff;
}
.userStoredCont-tips image,
.userStoredCont-tips text {
position: absolute;
height: 100%;
top: 0;
}
.userStoredCont-tips image {
width: 70%;
right: -10rpx;
}
.userStoredCont-tips text {
width: 58%;
z-index: 2;
font-size: 25rpx;
right: 0rpx;
line-height: 44rpx;
text-align: center;
box-sizing: border-box;
}
.userStoredCont-price {
position: absolute;
bottom: 15rpx;
left: 20rpx;
z-index: 3;
}
.userStoredCont-price {
font-size: 24rpx;
}
.userStoredCont-price text {
font-size: 46rpx;
padding-right: 10rpx;
}
.userStoredCont-fireworks {
position: absolute;
width: 84rpx;
height: 84rpx;
left: 10rpx;
bottom: 15rpx;
z-index: 1;
}
.userStoredCont-rights-btn {
background-color: #222222;
color: #ffffff;
width: 200rpx;
text-align: center;
height: 70rpx;
line-height: 70rpx;
margin-top: 35rpx;
}
/* 分享按钮 */
.userStoredBtn {
background: #bca585;
border-radius: 80rpx;
margin: 40rpx 30rpx;
width: calc(100% - 60rpx);
line-height: 80rpx;
text-align: center;
color: #ffffff;
font-weight: 600;
}
/* 漂浮弹出层 */
/* .indexFloat {
position: fixed;
right: 20rpx;
bottom: 60rpx;
z-index: 99;
}
.indexFloat-img image {
width: 130rpx;
height: 130rpx;
margin-bottom: 20rpx;
} */