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">
				项目背靠景区，在售建面约132-161㎡国风合院，均价20000元/㎡；建面约95㎡洋房…
			</view>
			<view class="share_copy">
				<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=""></image>
			
		</view>
		
		<view class="share_copy_txt">
			长按图片保存至本地
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shareUrl:"",
				type:"",
				projectId:"",
				page:"",
			};
		},
		created() {
			
		},
		onLoad(param) {
			this.page = param.page;
			this.projectId =param.projectId;
			this.type=param.type;
			this.getShareCard();
		},
		methods:{
			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
				}
			},
			back(){
				uni.reLaunch({
					url:"../homePage/homePage"
				})
			}
		}
	}
</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{
			font-size: 24rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: left;
			color: #7f7f7f;
			margin-top: 22rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
		
		.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;
			height: 872rpx;
			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>