walk-suzhou-wx/packages/cer/cer.vue

<template>
	<div class="body" id="signed" ref="signed" :style="{'padding-top':navBarTop+'px'}">
		<u-image :lazy-load="false" :show-loading="false" class="bkg" width="100vw" height="100vh"
			:src="require('../static/cer-bg.png')"></u-image>
		<u-image id="share-img" v-show="!isHidden" class="share-img" mode="scaleToFill" :width="133" :height="133"
			:src="require('../static/cer-share.png')" @click="$u.throttle(share)"> mode=</u-image>


		<div class="logo1">
			<u-image :lazy-load="false" :show-loading="false" width="176" height="450"
				:src="require('../static/cer-logo.png')"></u-image>
		</div>
		<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">
						传承红色基因，赓续红色血脉。
					</div>
					<div class="container__text--total">
						您是第<span>{{myIndex}}</span>位完成“行走红色苏州——打卡苏州市党史教育基地”活动的学员。
					</div>
					<div class="container__text--total">
						学好党史“必修课”，当好时代“答卷人”，快邀请您的好友一起参加活动吧！
					</div>
				</div>

			</div>
		</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 :style="{'top':navBarTop+'px','right':navBarRight+'px'}" :src="require('../static/cer-toShare.png')" class="share_cover_arrow"></image>
				<view class="share_cover_word" :style="{'margin-top':200+navBarTop+'px'}">
					请点击右上角将它发送给指定朋友或分享到朋友圈
				</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> -->
				<canvas :style="{width:'90%',height:SCREEN_HEIGHT*0.7+'px',margin:'0 auto'}" canvas-id="firstCanvas" id="firstCanvas"></canvas>

				<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>
	</div>
</template>

<script>
	import {
		ROOTPATH
	} from '@/common/config.js'
	import {
		base64ToFile,
		toast,
		shareInfo
	} from '@/common/util'
	export default {
		data() {
			return {
				SCREEN_WIDTH:0,
				SCREEN_HEIGHT:0,
				isShare: false,
				isHidden: false,
				imgData: '',
				//isShowModal: false,
				userInfo: {},
				myIndex: 0,
				navBarTop: 0,
				navBarRight: 0,
			};
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		onShow() {
			this.userInfo = uni.getStorageSync('walksz_lifeData').vuex_user
			this.myIndex = this.userInfo.myIndex?this.userInfo.myIndex:'-'
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top + MenuButton.height //左侧文字与右侧胶囊对齐
			this.navBarRight = MenuButton.width
			let sysInfo = uni.getSystemInfoSync();
			this.SCREEN_WIDTH = sysInfo.screenWidth
			this.SCREEN_HEIGHT = sysInfo.screenHeight;
		},
		methods: {
			share() {
				this.isHidden = true

				uni.showLoading({
					title: '图片生成中..'
				})
				var ctx = uni.createCanvasContext('firstCanvas')
				var w = this.SCREEN_WIDTH * 0.9;
				var h = this.SCREEN_HEIGHT * 0.7;
				console.log(w,h)
				var lw = 176 * .3
				var lh = 450 * .3
				ctx.drawImage('../static/cer-bg.png', 0, 0,w, h);
				ctx.drawImage('../static/cer-logo.png', w-lw-20, 20, lw, lh);
				ctx.font = "13rpx bold";
				ctx.fillStyle = "#fff";
				var tleft = w*.13
				if(this.SCREEN_WIDTH<380){
					tleft = this.SCREEN_WIDTH<330?20:40
					console.log("tleft",tleft)
					ctx.fillText(this.userInfo.name+"：", tleft, lh+40);
					ctx.fillText("传承红色基因，赓续红色血脉。", tleft+20, lh+60);
					ctx.fillText("您是第"+this.myIndex+"位完成“行走红色苏州——打卡",tleft+20, lh+80);
					ctx.fillText("苏州市党史教育基地”活动的学员。", tleft, lh+100);
					ctx.fillText("学好党史“必修课”，当好时代“答卷人”，", tleft+20, lh+120);
					ctx.fillText("快邀请您的好友一起参加活动吧！", tleft, lh+140);
				}else{
					ctx.fillText(this.userInfo.name+"：", tleft, lh+40);
					ctx.fillText("传承红色基因，赓续红色血脉。", tleft+20, lh+60);
					ctx.fillText("您是第"+this.myIndex+"位完成“行走红色苏州——打卡苏州市",tleft+20, lh+80);
					ctx.fillText("党史教育基地”活动的学员。", tleft, lh+100);
					ctx.fillText("学好党史“必修课”，当好时代“答卷人”，快邀", tleft+20, lh+120);
					ctx.fillText("请您的好友一起参加活动吧！", tleft, lh+140);
				}
				ctx.draw()
				setTimeout(() => {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						fileType: 'jpg',
						success: (res) => {
							uni.hideLoading()
							this.imgData = res.tempFilePath;
						},
					})
				}, 100)
			},
			save() {
				let _this = this
					
				uni.saveImageToPhotosAlbum({
					filePath: _this.imgData,
					success: function() {
						_this.isHidden = false
						toast('保存成功')
					}
				});
				uni.uploadFile({
					url: `${ROOTPATH}/api/mobile/upload-file`,
					filePath: this.imgData,
					name: 'file',
					formData: {
						"file":this.imgData,
						'token':this.vuex_token,
						'active_tag':'walksz'
					},
					success: (res) => {
						console.log(res)
						// return
						const val = JSON.parse(res.data)
						this.$u.api.savePoster({
							upload_id: val.id,
							type: 1
						}).then(res => {
						}).catch(err => {
						})
					}
				})
			}
		},

	}
</script>

<style lang="scss">
	.body {
		// overflow: hidden;
		min-height: 100vh;

		position: relative;
	}

	.logo1 {
		text-align: right;
		display: block;

		u-image {
			display: inline-block;
			margin-right: 45rpx;
		}
	}


	@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: #faca92;
						// line-height: 56rpx;
						border-bottom: 1px solid #fff;
						padding: 0 10rpx;
					}
				}

				&--total {
					text-indent: 2em;
					font-weight: 400;
					color: #ffffff;
					font-size: 28rpx;
					line-height: 2;
					// line-height: 56rpx;

					&>span {
						color: #faca92;
						// text-decoration-color: #6F6F6F;
						// text-decoration: underline;
						border-bottom: 1px solid #fff;
						padding: 0 10rpx;
					}
				}
			}
		}

		.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;
			width:100%;
			&>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>