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.
352 lines
7.2 KiB
352 lines
7.2 KiB
<template>
|
|
<view>
|
|
<view class="page6">
|
|
<image src="@/static/page6-bg.png" class="bkg" alt="" />
|
|
<view class="page6-wrap">
|
|
<view class="page6-wrap_content">
|
|
<image src="/static/page6-title.png" class="page6-wrap_title"></image>
|
|
<image src="/static/page6-title2.png" class="page6-wrap_title2"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分享 -->
|
|
<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)"></u-image>
|
|
|
|
<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">
|
|
<view class="share-close">
|
|
<text @click="isHidden = false">X</text>
|
|
</view>
|
|
<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>
|
|
</view>
|
|
<view id="signed">
|
|
<page2></page2>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
base64ToFile
|
|
} from '@/common/util'
|
|
import html2canvas from '@/lib/html2canvas.min.js'
|
|
import { ROOTPATH } from '../../common/config'
|
|
import page2 from '../mypage/page2.vue'
|
|
export default {
|
|
components:{
|
|
page2
|
|
},
|
|
data() {
|
|
return {
|
|
isShare: false,
|
|
isHidden: false,
|
|
imgData: '',
|
|
}
|
|
},
|
|
methods:{
|
|
share() {
|
|
|
|
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.isHidden = true
|
|
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', 'gdz')
|
|
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)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page6 {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: relative;
|
|
|
|
.bkg {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
&-wrap {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: scroll;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding-bottom: 350rpx;
|
|
|
|
&_content {
|
|
margin-top: 120rpx;
|
|
}
|
|
|
|
&_title {
|
|
width: 600rpx;
|
|
height: 206rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-bottom: 70rpx;
|
|
}
|
|
|
|
&_title2 {
|
|
width: 736rpx;
|
|
height: 213rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
}
|
|
|
|
@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;
|
|
}
|
|
.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;
|
|
}
|
|
&-close{
|
|
text-align: right;
|
|
width:580rpx;
|
|
&>text{
|
|
width:60rpx;
|
|
height:60rpx;
|
|
border-radius: 60rpx;
|
|
text-align: center;
|
|
background-color: #fff;
|
|
color:#333;
|
|
display: inline-block;
|
|
line-height: 60rpx;
|
|
position: relative;
|
|
top:15px;
|
|
z-index:9
|
|
}
|
|
}
|
|
&-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: 24rpx;
|
|
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> |