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 class="shareCard" :src="shareUrl" mode="widthFix"></image>
			
		</view>
		
		<view class="share_copy_txt">
			长按图片保存至本地
		</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;
			this.getShareCard();
			this.queryProjectByH5();
		},
		methods:{
			async  getShareCard(){
				uni.showLoading({
					title:"分享图片生成中"
				})
				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;
					 uni.hideLoading()
				}else{
					uni.hideLoading()
				}
			},
			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(){
				uni.setClipboardData({
					data:this.shareRemark,
					success() {
						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;
		}
		
	}
	
	.share_copy_txt{
		font-size: 28rpx;
		font-family: Verdana, Verdana-Regular;
		font-weight: 400;
		text-align: center;
		color: #ffffff;
		margin-top: 40rpx;
	}

</style>