[本时生活h5端]
This commit is contained in:
308
pages/userStored/storedCode.vue
Normal file
308
pages/userStored/storedCode.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<template>
|
||||
<view>
|
||||
<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">
|
||||
<view class="codeShare-label" @tap="removeSaveImg" hover-class="none">
|
||||
生成海报
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 海报canvas -->
|
||||
<canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
|
||||
|
||||
<!-- 图片弹出层 -->
|
||||
<view class="user-lay sign-img-lay" v-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>
|
||||
<view class="longPress">长按图片保存二维码</view>
|
||||
<button class="sign-img-btn remove-btn" size="mini" @tap="removeSaveImg">取消</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { publicCode } from '@/apis/interfaces/user'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
qrcode : '', //二维码
|
||||
userInfo : '', //我的信息
|
||||
isImgLay : false,//是否显示图片弹出层
|
||||
parentId : '', //是否分享进入
|
||||
shareState : false //显示分享朋友圈弹出层
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
// 获取二维码
|
||||
publicCode({
|
||||
channel: 'h5',
|
||||
type: 'recharge',
|
||||
url: 'pages/userStored/index?type=shareStored'
|
||||
}).then(res=>{
|
||||
this.qrcode = res.qrcode
|
||||
this.userInfo = res.user
|
||||
}).catch(err=>{})
|
||||
},
|
||||
methods: {
|
||||
// 绘图
|
||||
dowImg(){
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
})
|
||||
|
||||
// 下载素材
|
||||
let codeImg = new Promise(success => {
|
||||
wx.getImageInfo({
|
||||
src : this.qrcode,
|
||||
success : res => {
|
||||
success(res.path)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Promise.all([codeImg]).then(res => {
|
||||
// 绘制海报
|
||||
const ctx = uni.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(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.draw(true, () => {
|
||||
uni.hideLoading()
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'qrcodeCard',
|
||||
x: 0,
|
||||
y: 0,
|
||||
success: res => {
|
||||
this.qrcodeImg = res.tempFilePath
|
||||
this.removeSaveImg()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}).catch(err=>{
|
||||
uni.showToast({
|
||||
title: '海报下载，请检查网络',
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 图片弹出层
|
||||
removeSaveImg(){
|
||||
this.isImgLay = !this.isImgLay
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
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 {
|
||||
width: calc(100% - 80rpx) !important;
|
||||
margin: 30rpx 40rpx;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
height: 86rpx;
|
||||
line-height: 86rpx;
|
||||
padding: 0;
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
color: #ffffff;
|
||||
background: #b37f49;
|
||||
}
|
||||
|
||||
.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%;
|
||||
bottom: 0;
|
||||
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"],
|
||||
.longPress{
|
||||
margin: 40rpx auto 0;
|
||||
background: #ffffff;
|
||||
font-weight: normal;
|
||||
color: #2f3245;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
width: 80%;
|
||||
border-radius: 10rpx;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.longPress{
|
||||
position: relative;
|
||||
&::after{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: calc(50% - 10rpx);
|
||||
top: -20rpx;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 20rpx solid transparent;
|
||||
border-right: 20rpx solid transparent;
|
||||
border-bottom: 20rpx solid #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
image {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.codeBack-yard-name {
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user