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

[锶源昆仑-寺庙捐赠活动]

Browse Source
This commit is contained in:
张慢慢
2023-05-15 13:53:32 +08:00
parent 1b6eb2668c
commit c9b18c9074
284 changed files with 9505 additions and 3822 deletions
Download Patch File Download Diff File Expand all files Collapse all files

395
pages/user/code.vue
View File

@@ -1,31 +1,83 @@
<template>
<view class="content">
<view class="While">
<view class="codeUser" v-if="inviteData.user_info">
<image class="codeUser-img" :src="inviteData.user_info.avatar || '/static/imgs/default_myHead.png'" mode="aspectFill"></image>
<view class="codeUser-name">{{ inviteData.user_info.nickname }}</view>
<view class="code">
<image class="codeBack" :src="posterImg" mode="widthFix"></image>
<view class="code-share" @click="shareClick">
<image src="/static/icons/down.png"></image>
<view class="code-share-name">保存图片</view>
</view>
<view class="codeImg">
<image class="codeUser-img" :src="inviteData.code" mode="aspectFill"></image>
<view class="codeUser-text">
扫描二维码,注册成功后,即可绑定关系
</view>
<!-- 打卡海报 -->
<view class="postertBack" v-if="isImgLay"></view>
<view class="postert" v-if="isImgLay">
<view class="poster-Cont">
<img class="poster-Cont-img" :src="posterImg">
</view>
<view class="sign-btn">
<view class="remove-btn">长按图片保存</view>
<view class="sign-img-block">
<button class="sign-img-btn" size="mini" @click="isImgLay = false">取消</button>
</view>
</view>
</view>
<view class="While down">
长按保存我的推广码
</view>
<!--何院士 海报canvas -->
<!-- <vue-canvas-poster :widthPixels="1000" :painting="academician" @success="saveSuccess" @fail="saveFail" v-if="identity == 3"></vue-canvas-poster> -->
<!-- 海报canvas -->
<canvas class="canvasImg" canvas-id="qrcodeCard"></canvas>
<vue-canvas-poster :widthPixels="1000" :painting="paintings" @success="saveSuccess" @fail="saveFail"></vue-canvas-poster>
</view>
</template>
<script>
import { invite } from '@/apis/interfaces/user'
import { VueCanvasPoster } from 'vue-canvas-poster'
export default {
components: {
VueCanvasPoster
},
data() {
return {
inviteData: ''
inviteData: '', //用户二维码
invitecode : '', //二维码
identity : 1,//1为普通，2为上师版， 3为何院士
isImgLay : false, //是否显示图片弹出层
paintings : {
width: "375px",
height: "800px",
borderRadius: "10px",
background: "#ffffff",
views: [
//海报背景
{
type: "image",
url: "",
css: {
top: "0",
left: "0",
width: "375px",
height: "800px",
mode: 'aspectFill'
},
},
//二维码
{
type: "image",
url: "",
css: {
top: "412px",
left: "39px",
width: "110px",
height: "110px",
mode: 'aspectFill'
},
}
],
},
posterImg: "", //生成的海报图片路径
};
},
onShow() {
@@ -36,7 +88,12 @@
// 推广码
inviteInfo() {
invite().then(res => {
this.identity = res.user_info.tag
this.inviteData = res
this.invitecode = res.code
this.paintings.views[0].url = "/static/img/shartBack.jpg"
this.paintings.views[1].url = res.code
}).catch(err => {
uni.showToast({
title: err.message,
@@ -53,143 +110,217 @@
})
},
// 绘图
dowCode(){
uni.showLoading({
title: '加载中',
})
// 头像
let avatarImg = new Promise(success=>{
uni.getImageInfo({
src : this.inviteData.user_info.avatar,
success : res => {
success(res.path)
}
})
})
// 下载素材
let codeImg = new Promise(success => {
uni.getImageInfo({
src : this.inviteData.code,
success : res => {
success(res.path)
}
})
})
Promise.all([avatarImg, codeImg]).then(res => {
// 绘制海报
const ctx = uni.createCanvasContext('qrcodeCard')
ctx.save()
// 下载海报
shareClick (){
this.paintings.views[0].url = "/static/img/shart.jpg"
this.paintings.views[1].url = this.invitecode
this.isImgLay = true
// if(this.identity == 1) {
// 绘制背景
ctx.drawImage('/static/imgs/codeBack.png', 0, 0, 375, 452)
// 绘制头像
ctx.drawImage(res[0], 155, 35, 70, 70)
// 绘制二维码
ctx.drawImage(res[1], 110, 200, 160, 160)
// 文字
ctx.setFontSize(16)
ctx.setFillStyle("#FFFFFF")
ctx.setTextAlign('center')
ctx.fillText(this.inviteData.user_info.nickname, 190, 135 , 270)
// 文字
ctx.setFontSize(15)
ctx.setFillStyle("#919191")
ctx.setTextAlign('center')
ctx.fillText("扫描二维码,注册成功后,即可绑定关系",190, 400)
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.removeSaveImg()
}
})
})
}).catch(err=>{
uni.showToast({
title: '海报下载，请检查网络',
icon : 'none'
})
})
// }else if(this.identity == 2) {
// this.paintings.views[0].url = "/static/imgs/code_01.png"
// }else {
// this.academician.views[0].url = "/static/imgs/code_02.png"
// this.academician.views[1].url = "/static/imgs/codeshart_back_02.png"
// this.academician.views[2].url = this.invitecode
// this.academician.views[3].url = "/static/imgs/codeShart_title1.png"
// }
},
saveSuccess(src) {
this.posterImg = src;
},
saveFail(err) {},
}
}
</script>
<style lang="scss">
.content{
overflow: hidden;
background: #f3f4f6;
padding: 140rpx 80rpx;
.code {
width: 100vw;
height: 100vh;
background-color: #08182f;
.codeBack {
width: 100%;
display: block;
}
.code-share {
position: fixed;
z-index: 10;
left: 0;
bottom: 22%;
background: linear-gradient(to right, #aa957b, #ffeeda);
width: 50rpx;
text-align: center;
border-radius: 0 20rpx 20rpx 0;
padding: 20rpx 0;
}
}
/* 何院士样式 */
.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;
}
.While {
border-radius: 10rpx;
margin-bottom: 30rpx;
background-color: #FFFFFF;
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
border-radius: 10rpx;
.newCode-img-title {
width: calc(100% - 140rpx);
}
.newCode-img-title image {
width: 80%;
margin-top: 15rpx;
}
.newCode-img-code {
width: 140rpx;
height: 140rpx;
}
.code-cont {
width: 100%;
position: relative;
z-index: 9;
text-align: center;
left: 15%;
width: 200rpx;
padding: 15rpx;
top: 50%;
background-color: #FFFFFF;
}
.code-img{
margin-bottom: 10rpx;
overflow: hidden;
// border-radius: 30rpx;
width: 200rpx;
height: 200rpx;
position: relative;
// border: 4rpx solid #be9768;
}
.code-img image {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.code-code {
color: #275979;
font-size: $title-size-sm - 2;
border-top: 2rpx #275979 dotted;
padding-top: 10rpx;
font-weight: 600;
}
.code-text {
background: linear-gradient(to right, #aa957b, #ffeeda, #aa957b);
-webkit-background-clip: text;
color: transparent;
font-size: 26rpx;
}
.codeUser {
background-color: #6e79ec;
color: #FFFFFF;
text-align: center;
padding: 50rpx 0;
.codeUser-img {
.code-share image {
width: 30rpx;
height: 30rpx;
margin-bottom: 5rpx;
}
.code-share-name {
writing-mode:vertical-rl;
font-size: 28rpx;
padding-left: 4rpx;
color: #4d2a00;
}
.postertBack {
width: 100vw;
height: 100vh;
position: fixed;
background-color: rgba(0,0,0,.6);
left: 0;
top: 0;
z-index: 90;
}
.postert {
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
z-index: 99;
.poster-Cont {
width: 80vw;
height: 80vh;
top: 3vh;
left: 10vw;
position: absolute;
background-color: #FFFFFF;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
margin-bottom: 10rpx;
}
}
.codeImg {
padding: 60rpx 0;
text-align: center;
.codeUser-img {
width: 360rpx;
height: 360rpx;
}
.codeUser-text {
padding: 0 100rpx;
color: #919191;
line-height: 48rpx;
box-sizing: border-box;
border-radius: $radius-m;
.poster-Cont-img {
width: 100%;
height: 100%;
}
.poster-Cont-code {
position: absolute;
bottom: 250px;
left: 46px;
width: 140rpx;
height: 140rpx;
}
}
}
.down {
line-height: 90rpx;
text-align: center;
color: #54975e;
}
/* canvas */
.canvasImg {
.sign-btn {
position: absolute;
left: -1000%;
bottom: 0;
height: 452px;
width: 375px;
background: #fbf6f0;
top: 83vh;
width: 80%;
left: 10%;
z-index: 999;
.remove-btn {
width: 100%;
line-height: 90rpx;
background-color: #bf9960;
color: #FFFFFF;
border-radius: $radius-m;
margin-top: $margin - 10;
text-align: center;
font-size: $title-size + 2;
}
.sign-img-block {
display: flex;
margin: 20rpx -10rpx 0;
.sign-img-btn {
flex: 2;
line-height: 90rpx;
background-color: #ffeeda;
border-radius: $radius-m;
text-align: center;
font-size: $title-size;
margin: 0 10rpx;
}
}
}
</style>