TmOct5/AGuestSaas
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

新增分享二维码

Browse Source
This commit is contained in:
zdx
2020-12-31 13:15:31 +08:00
parent cff94e05f6
commit aa94413f67
12 changed files with 422 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
pages/user/code/code.js Normal file
View File

@@ -0,0 +1,172 @@
const style = {
codeContent: {
backgroundColor: 'white',
width: '375',
height: '525'
},
codeNickname: {
width: '355',
height: '46',
textAlign: 'center',
fontSize: '25',
verticalAlign: 'middle',
marginTop: '40',
marginLeft: '10'
},
codeJob: {
width: '355',
height: '30',
textAlign: 'center',
verticalAlign: 'middle',
fontSize: '15',
marginLeft: '10'
},
codeImg: {
width: '151',
height: '151',
marginTop: '30',
marginBottom: '40',
marginLeft: '112'
},
codeLogo: {
width: '51',
height: '51',
marginLeft: '162',
marginBottom: '5',
},
codeCompany: {
width: '355',
height: '30',
textAlign: 'center',
verticalAlign: 'middle',
fontSize: '15',
marginLeft: '10',
marginBottom: '20',
},
codeText: {
width: '355',
height: '30',
textAlign: 'center',
verticalAlign: 'middle',
fontSize: '13',
marginLeft: '10',
color: 'gray'
}
}
Page({
/**
* 页面的初始数据
*/
data: {
code: "", //二维码
company: {}, //公司信息
user: {}, //用户信息,
name:'',//用户名
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
wx.getStorage({
key: 'compayId',
success: res => {
console.log(res);
wx.$api.user.getShareCode(res.data).then(res => {
this.setData({
user: {
job: res.job,
cover: res.cover,
name:options.name
},
company: {
name: res.company,
logo: res.logo,
id: res.company_id
},
code: res.code
})
})
}
})
},
/**
* 绘制分享海报
*/
canvasDowImg() {
wx.showLoading({
title: "绘制海报中"
})
const wxml = `
<view class="code-content">
<text class="code-nickname">` + this.data.user.name + `</text>
<image class="code-img" src="` + this.data.code + `" mode="widthFix"></image>
<image class="code-logo" src="` + this.data.company.logo + `" mode="aspectFit"></image>
<text class="code-company">` + this.data.company.name + `</text>
<text class="code-text">扫一扫，快速了解我们的企业</text>
</view>
`
this.codeimg = this.selectComponent('.codeImg')
this.codeimg.renderToCanvas({
wxml,
style
}).then(() => {
this.codeimg.canvasToTempFilePath().then(res => {
console.log(res);
if (res.tempFilePath) {
wx.hideLoading()
this.dowQrCodeImg(res.tempFilePath)
} else {
wx.showToast({
title: "绘制失败，请稍后重试",
icon: "none"
})
}
})
})
},
/**
* 保存canvas图片到本地
*/
dowQrCodeImg(path) {
wx.saveImageToPhotosAlbum({
filePath: path,
success: () => {
wx.showToast({
title: "保存成功，分享图已存储至您的手机相册",
icon: "none"
})
},
fail: () => {
wx.showModal({
title: "提示",
content: "由于您的设置，系统暂无权限访问您的相册，保存海报失败",
cancelText: "以后再说",
cancelColor: "#4f4f4f",
confirmText: "去设置",
confirmColor: "#0b0041",
success: res => {
if (res.confirm) {
wx.openSetting()
}
}
})
}
})
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
return {
title: this.data.user.name + "邀请您快速了解" + this.data.company.name,
imageUrl: this.data.user.cover,
path: "/pages/employees/join/join?companyId=" + this.data.company.id
}
}
})

8
pages/user/code/code.json Normal file
View File

@@ -0,0 +1,8 @@
{
"usingComponents": {
"wxml-to-canvas": "wxml-to-canvas"
},
"navigationBarTitleText" : "分享海报",
"navigationBarBackgroundColor" : "#378fff",
"navigationBarTextStyle" : "white"
}

19
pages/user/code/code.wxml Normal file
View File

@@ -0,0 +1,19 @@
<wxml-to-canvas class="codeImg" width="375" height="525"></wxml-to-canvas>
<view class="code-content">
<view class="code-nickname">{{user.name || "-"}}</view>
<view class="code-img">
<image class="code-img-src" src="{{code}}" mode="widthFix"></image>
</view>
<view class="code-logo">
<image class="code-logo-src" src="{{company.logo || '/static/images/logo_null.png'}}" mode="aspectFit"></image>
</view>
<view class="code-company">{{company.name}}</view>
<view class="code-text">扫一扫，快速了解我们的企业</view>
</view>
<view class="code-btns">
<button class="code-btn" size="default" open-type="share">转发邀请</button>
<button class="code-btn" size="default" bindtap="canvasDowImg">保存分享海报</button>
</view>

73
pages/user/code/code.wxss Normal file
View File

@@ -0,0 +1,73 @@
.codeImg{
position: fixed;
left: -100%;
top: -100%;
}
/* 展示图片 */
.code-content{
margin: 30rpx;
padding: 60rpx 30rpx;
background: white;
border-radius: 10rpx;
box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .02);
text-align: center;
}
.code-nickname{
font-size: 50rpx;
padding-bottom: 20rpx;
}
.code-text{
border-top: dashed 1rpx #ddd;
padding-top: 30rpx;
color: gray;
margin-top: 60rpx;
font-size: 26rpx;
}
.code-img{
padding: 70rpx 0;
}
.code-img-src{
width: 300rpx;
height: 300rpx;
background: #eee;
vertical-align: top;
}
.code-logo-src{
background: #eee;
width: 98rpx;
height: 98rpx;
}
.code-company{
padding-top: 20rpx;
}
/* 操作按钮 */
.code-btns{
padding: 0 15rpx 50rpx 15rpx;
display: flex;
}
.code-btn[size="default"]{
background: #ddd;
width: 100%;
line-height: 90rpx;
height: 90rpx;
padding: 0;
border-radius: 10rpx;
margin: 0 15rpx;
font-size: 32rpx;
color: white;
background: #ff8c37;
}
.code-btn[size="default"]:last-child{
background: #378fff;
}