You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
433 lines
9.1 KiB
433 lines
9.1 KiB
<template>
|
|
<div class="body" id="signed">
|
|
<u-image :lazy-load="false" :show-loading="false" class="bkg" width="100vw" height="100%" :src="require('@/static/cer-bg.png')"></u-image>
|
|
<u-image :lazy-load="false" :show-loading="false" class="logo1" width="630" height="142" :src="require('@/static/cer-logo1.png')"></u-image>
|
|
<u-image :lazy-load="false" :show-loading="false" class="logo2" width="520" height="245" :src="require('@/static/cer-logo2.png')"></u-image>
|
|
|
|
<u-image id="share-img" v-show="!isHidden" class="share-img" mode="scaleToFill" :width="99" :height="99" :src="require('@/static/share.png')" @click="$u.throttle(share)"> mode=</u-image>
|
|
<div class="content">
|
|
<div class="container">
|
|
<div class="container__text">
|
|
<div class="container__text--title">
|
|
<span>{{userInfo?userInfo.name:''}}</span>同学，
|
|
</div>
|
|
<div class="container__text--total">
|
|
你已完成<span>“阵地有声 理响通安”</span>理论学习线上打卡。
|
|
</div>
|
|
<div class="container__text--total">
|
|
学理论、悟精神、聚力量，快邀请你身边的党员一起参加线上学习吧！
|
|
</div>
|
|
<div class="container__text--total" style="text-align: right;">{{nowYear}}</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
技术支撑：江苏有线苏州分公司
|
|
</div>
|
|
|
|
<transition name="share-pop" enter-active-class="fade-in" leave-to-class="fade-out">
|
|
<view class="share_cover" v-show="isShare" @click="isShare = false">
|
|
<image :src="require('@/static/toShare.png')" class="share_cover_arrow"></image>
|
|
<view class="share_cover_word">
|
|
请点击右上角将它发送给指定朋友或分享到朋友圈
|
|
</view>
|
|
</view>
|
|
</transition>
|
|
|
|
<view class="share" v-if="isHidden">
|
|
<view class="share-mask" @click="isHidden = false">
|
|
</view>
|
|
|
|
<view class="share-page">
|
|
<image :src="imgData" mode="widthFix"></image>
|
|
|
|
<view class="share-page__btn">
|
|
<view class="share-page__btn--share" @click="isShare = true">分享</view>
|
|
<view class="share-page__btn--save" @click="$u.throttle(save)">保存</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <u-modal v-model="isShowModal" title="您的名字是？" @confirm="saveName">-->
|
|
<!-- <view class="slot-content" style="padding: 10rpx 20rpx;">-->
|
|
<!-- <u-input v-model="name"></u-input>-->
|
|
<!-- </view>-->
|
|
<!-- </u-modal>-->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
ROOTPATH
|
|
} from '@/common/config.js'
|
|
import {base64ToFile} from '@/common/util'
|
|
import html2canvas from '@/lib/html2canvas.min.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isShare: false,
|
|
isHidden: false,
|
|
imgData: '',
|
|
//isShowModal: false,
|
|
userInfo:{},
|
|
nowYear:""
|
|
};
|
|
},
|
|
methods: {
|
|
share() {
|
|
this.isHidden = true
|
|
|
|
uni.showLoading({
|
|
title: '图片生成中..'
|
|
})
|
|
|
|
let dom = document.querySelector('#signed')
|
|
html2canvas(dom, {
|
|
width: dom.clientWidth, //dom 原始宽度
|
|
height: dom.clientHeight,
|
|
scrollY: 0,
|
|
scrollX: 0,
|
|
useCORS: true,
|
|
ignoreElements:(element) => {
|
|
return element.id == 'share-img'
|
|
}
|
|
}).then(cnv => {
|
|
uni.hideLoading()
|
|
|
|
this.imgData = cnv.toDataURL('image/png', 1)
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: '生成失败，请重试',
|
|
icon: 'error'
|
|
})
|
|
this.isHidden = false
|
|
console.log(err);
|
|
})
|
|
},
|
|
save() {
|
|
uni.showToast({
|
|
title: "请长按分享图片进行保存或者分享",
|
|
icon: "none"
|
|
})
|
|
|
|
|
|
let form = new FormData()
|
|
form.append('file', base64ToFile(this.imgData, 'sign'))
|
|
form.append('active_tag', 'xtdxwalk')
|
|
let vuex_token = this.vuex_token;
|
|
form.append('token', vuex_token)
|
|
let xhr = new XMLHttpRequest()
|
|
xhr.open('post', `${ROOTPATH}/api/mobile/upload-file`)
|
|
|
|
xhr.onreadystatechange = () => {
|
|
if (xhr.status === 200 && xhr.readyState === 4) {
|
|
let val = JSON.parse(xhr.responseText);
|
|
console.log(val);
|
|
this.$u.api.savePoster({
|
|
upload_id: val.id,
|
|
type: 1
|
|
}).then(res => {
|
|
// uni.showToast({
|
|
// title: "保存成功",
|
|
// icon: "none"
|
|
// })
|
|
}).catch(err => {
|
|
// uni.showToast({
|
|
// title: "保存成功",
|
|
// icon: "none"
|
|
// })
|
|
})
|
|
}
|
|
}
|
|
xhr.send(form)
|
|
}
|
|
},
|
|
onShow() {
|
|
this.userInfo = uni.getStorageSync('tadk2_lifeData').vuex_user
|
|
this.nowYear = this.$moment().format('YYYY') + '年'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.body {
|
|
overflow: hidden;
|
|
min-height: 100vh;
|
|
|
|
position: relative;
|
|
}
|
|
.logo1{
|
|
margin:0 auto;
|
|
margin-top:100rpx;
|
|
}
|
|
.logo2{
|
|
margin:0 auto;
|
|
margin-top:40rpx;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #f8cd82;
|
|
|
|
padding: 20rpx 0;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
/* ----------------------------------------------
|
|
* Generated by Animista on 2023-6-26 17:51:36
|
|
* Licensed under FreeBSD License.
|
|
* See http://animista.net/license for more info.
|
|
* w: http://animista.net, t: @cssanimista
|
|
* ---------------------------------------------- */
|
|
|
|
/**
|
|
* ----------------------------------------
|
|
* animation jello-horizontal
|
|
* ----------------------------------------
|
|
*/
|
|
@keyframes jello-horizontal {
|
|
0% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
15% {
|
|
transform: scale3d(1.25, 0.75, 1);
|
|
}
|
|
20% {
|
|
transform: scale3d(0.75, 1.25, 1);
|
|
}
|
|
25% {
|
|
transform: scale3d(1.15, 0.85, 1);
|
|
}
|
|
33% {
|
|
transform: scale3d(0.95, 1.05, 1);
|
|
}
|
|
38% {
|
|
transform: scale3d(1.05, 0.95, 1);
|
|
}
|
|
50% {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
}
|
|
|
|
.share-img {
|
|
animation: jello-horizontal 3.2s both infinite;
|
|
|
|
z-index: 99999;
|
|
position: fixed;
|
|
left: 55rpx;
|
|
bottom: 86rpx;
|
|
}
|
|
|
|
.bkg {
|
|
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.content {
|
|
|
|
padding-top: 40rpx;
|
|
position: relative;
|
|
|
|
.container {
|
|
|
|
z-index: 2;
|
|
// margin-top: 83rpx;
|
|
position: relative;
|
|
&__jiangbei {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
z-index: 3;
|
|
position: relative;
|
|
}
|
|
&__bkg {
|
|
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 103rpx;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
|
|
&__text {
|
|
|
|
z-index: 4;
|
|
padding: 0rpx 70rpx 0 90rpx;
|
|
position: relative;
|
|
&--title {
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
line-height: 56rpx;
|
|
|
|
& > span {
|
|
color: #f8cd82;
|
|
line-height: 56rpx;
|
|
text-decoration-color: #fffff;
|
|
text-decoration: underline;
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
&--total {
|
|
text-indent: 56rpx;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
font-size: 28rpx;
|
|
line-height: 56rpx;
|
|
|
|
& > span {
|
|
color: #f8cd82;
|
|
line-height: 56rpx;
|
|
// text-decoration-color: #6F6F6F;
|
|
// text-decoration: underline;
|
|
|
|
padding: 0 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.qrcode {
|
|
|
|
margin: 150rpx auto;
|
|
}
|
|
}
|
|
|
|
.share_cover {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
z-index: 100000;
|
|
|
|
.share_cover_word {
|
|
color: #FFFFFF;
|
|
font-size: 48rpx;
|
|
width: 60%;
|
|
margin: 400rpx auto;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
|
|
}
|
|
|
|
.share_cover_arrow {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: 300rpx;
|
|
height: 400rpx;
|
|
}
|
|
}
|
|
.share {
|
|
min-height: 100vh;
|
|
overflow-y: scroll;
|
|
|
|
padding: 278rpx 0;
|
|
z-index: 2;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
&-mask {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
&-page {
|
|
width: fit-content;
|
|
overflow: scroll;
|
|
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
right: 0;
|
|
|
|
&>image {
|
|
width: 520rpx;
|
|
height: auto;
|
|
display: block;
|
|
border: 6rpx solid #F8E3CF;
|
|
box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(19, 1, 2, 0.71);
|
|
|
|
margin: auto;
|
|
}
|
|
|
|
&__btn {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
padding-top: 52rpx;
|
|
|
|
&>view {
|
|
width: 230rpx;
|
|
height: 66rpx;
|
|
background: linear-gradient(0deg, #EFC495, #E9BC8A);
|
|
border-radius: 34rpx;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
line-height: 66rpx;
|
|
font-size: 26rpx;
|
|
letter-spacing: 8rpx;
|
|
color: #C93E31;
|
|
}
|
|
|
|
&--share {
|
|
|
|
margin-right: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.fade-in {
|
|
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fade-out .8s ease-out both;
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|