h5-elab-open-ownerUnion/pages/shareCardPage/shareCardPage.vue

<template>
	<view class="share_body">
		<view class="share_card_info">
			<view class="share_title">
				<image class="title" src="../../static/icons/icon_share_title.png" mode=""></image>
				<image @click="back" class="close" src="../../static/icons/icon_close_share.png" mode=""></image>
			</view>
			<view class="share_desc">
				{{shareRemark}}
			</view>
			<view class="share_copy" @click="copy" v-if="shareRemark">
				<image class="icon_share_copy" src="../../static/icons/icon_copy.png" mode=""></image>
				<text class="share_txt">复制发圈</text>
			</view>
			<image v-if="shareUrl" class="shareCard" :src="shareUrl" mode="widthFix"></image>
			<view class="shareCard" v-else>
				<image style="width: 100%;height: 100%;"  src="../../static/icons/share_img_zhanwei.png" mode="widthFix"></image>
				<view class="share_card_loading">
					<view class="loader">
						<svg class="circular" viewBox="25 25 50 50">
							<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
						</svg>
					</view>
					
					正在为您加载分享图
				</view>
			</view>
		</view>
		
		<view class="share_copy_txt">
			长按图片保存至本地
		</view>
		
		<view class="share_copy_notice">
			友情提醒，认证业主并通过后再分享才会产生相应的收益
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shareUrl:"",
				type:"",
				projectId:"",
				page:"",
				shareRemark:"",
			};
		},
		created() {
			
		},
		onLoad(param) {
			this.page = param.page;
			this.projectId =param.projectId;
			this.type=param.type;
			if(this.projectId){
				this.queryProjectByH5();
				this.getShareCard();
			}else {
				this.queryProtocolConfigView();
			}
			
		},
		methods:{
			async queryProtocolConfigView(){
				let res = await this.$myRequest({
					url: "/project/queryProtocolConfigView",
					data: {},
				})
				if(res.data.success){
					this.shareUrl = res.data.single.shareImage;
					this.shareRemark =  res.data.single.shareRemark||''
				}
			},
			async  getShareCard(){
				let ret = await this.$myRequest({
					url: "/share/shareCard",
					data: {
						"page": this.page,
						"projectId": this.projectId,
						"type":this.type
					}
				})
				if (ret.data.success) {
					 this.shareUrl = ret.data.single;
				}
			},
			async queryProjectByH5(){
				let ret = await this.$myRequest({
					url: "/project/queryProjectByH5",
					data: {
						"projectId": this.projectId,
					}
				})
				if (ret.data.success) {
					this.shareRemark =  ret.data.single.shareRemark||''
				}
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			copy(){
			  let textarea = document.createElement("textarea")
			  textarea.value = this.shareRemark
			  textarea.readOnly = "readOnly"
			  document.body.appendChild(textarea)
			  textarea.select() // 选中文本内容
			  textarea.setSelectionRange(0, this.shareRemark.length) 
			  let result = document.execCommand("copy") 
			  textarea.remove() 
			  uni.showToast({
			  	icon:"none",
			  	title:"复制成功"
			  })
			}
		}
	}
</script>

<style lang="scss">
	.share_body{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		background: #4e4e4e;
		height: 100vh;
	}
	.share_card_info{
		width: 550rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		
		.share_title{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			position: relative;
			.title{
				width: 292rpx;
				height: 34rpx;
			}
			.close{
				width: 24rpx;
				height: 24rpx;
				position: absolute;
				right: 20rpx;
				top: 5rpx;
			}
		}
		
		.share_desc{
			width: calc(100% - 60rpx);
			font-size: 24rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: left;
			color: #7f7f7f;
			margin-top: 22rpx;
			box-sizing: border-box;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		
		.share_copy{
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 12rpx;
			.icon_share_copy{
				width: 24rpx;
				height: 24rpx;
			}
			.share_txt{
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: left;
				color: #2c2c2c;
				margin-left: 6rpx;
			}
		}
		
		.shareCard{
			width: 490rpx;
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			position: relative;
			.share_card_loading{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: #919191;
				
			}
		}
		
	}
	
	.share_copy_txt{
		font-size: 28rpx;
		font-family: Verdana, Verdana-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		margin-top: 40rpx;
	}
	
	.share_copy_notice{
		font-size: 22rpx;
		font-family: Verdana, Verdana-Regular;
		font-weight: 400;
		text-align: center;
		color: #919191;
	}
	
	.loader {
		position: relative;
		margin: 0 auto;
		width: 70rpx;
		height: 70rpx;
		top: 50%;
		transform: translateY(-50%);
	
		&:before {
			content: '';
			display: block;
			padding-top: 100%;
		}
	}
	
	.circular {
		animation: rotate 2s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	
	.path {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
		stroke-linecap: round;
	}
	
	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}
	
	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
	
		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35rpx;
		}
	
		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124rpx;
		}
	}
	
	@keyframes color {
	
		100%,
		0% {
			stroke: #919191;
		}
	
		40% {
			stroke: #919191;
		}
	
		66% {
			stroke: #919191;
		}
	
		80%,
		90% {
			stroke: #919191;
		}
	}

</style>