327 lines
9.2 KiB
Vue
327 lines
9.2 KiB
Vue
<template>
|
||
<view class="content">
|
||
<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>
|
||
|
||
<!-- 打卡海报 -->
|
||
<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>
|
||
|
||
|
||
<!--何院士 海报canvas -->
|
||
<!-- <vue-canvas-poster :widthPixels="1000" :painting="academician" @success="saveSuccess" @fail="saveFail" v-if="identity == 3"></vue-canvas-poster> -->
|
||
|
||
<!-- 海报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: '', //用户二维码
|
||
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() {
|
||
// 获取推广码
|
||
this.inviteInfo();
|
||
},
|
||
methods: {
|
||
// 推广码
|
||
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,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 查看图片
|
||
openImg(img) {
|
||
uni.previewImage({
|
||
current: img,
|
||
urls:[img]
|
||
})
|
||
},
|
||
|
||
// 下载海报
|
||
shareClick (){
|
||
this.paintings.views[0].url = "/static/img/shart.jpg"
|
||
this.paintings.views[1].url = this.invitecode
|
||
this.isImgLay = true
|
||
|
||
// if(this.identity == 1) {
|
||
|
||
// }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">
|
||
.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;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
|
||
|
||
.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;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.sign-btn {
|
||
position: absolute;
|
||
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>
|