cbz/components/share-model/share-model.vue

<template>
	<view class="content">
		<view class="tile">{{pageData.title}}</view>
		<view class="hflex acenter " style="box-sizing: border-box;padding: 0 30rpx;">
			<view class="img_box">
				<image :src="pageData.src" mode="aspectFill" class="img"></image>
				<view class="type">V</view>
			</view>
			<view class="text_style1">{{pageData.name}}</view>
		</view>
		<u-parse :content="pageData.content" style="box-sizing: border-box;padding: 0 30rpx;"></u-parse>
		<view class="box hflex acenter jbetween">
			<view class="hflex acenter ">
				<image class="box_icon" src="/static/images/comment/icon_pdf.png"></image>
				<view class="text_style1">{{pageData.fujian}}</view>
			</view>
			<view class="down hflex acenter jcenter">
				<u-icon name="download" color="#FFFFFF" size="20"></u-icon>
			</view>
		</view>
		<view class="date">发布于{{pageData.date}}</view>
		<view class="bottom hflex acenter jbetween">
			<view class="hflex acenter" @click="collect">
				<u-icon name="star" color="#444444" size="20" v-if="pageData.is_collect == 0"></u-icon>
				<u-icon name="star-fill" color="#506DFF" size="20" v-else></u-icon>
				<view class="text_style1">收藏</view>	
			</view>
			<view class="btn" @click="share">分享</view>
		</view>
		<view class="share_content" v-if="share_show">
			<my-canvas :isDraw="true" :canvasData="canvasData" :imageSize="{width: 375, height: 667}" @generateImageSuccessful="generateImageSuccessful"></my-canvas>
			<view class="share_bottom">
				<view class="hflex acenter jbetween">
					<button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="/static/images/comment/wx.png" class="item_icon"></image>
						<view class="item_text">微信好友</view>
					</button>
					<button class="vflex acenter jcenter bottom_item" open-type="share">
						<image src="/static/images/comment/moments.png" class="item_icon"></image>
						<view class="item_text">朋友圈</view>
					</button>
					<view class="vflex acenter jcenter bottom_item" @click="saveImg">
						<image src="/static/images/comment/download.png" class="item_icon"></image>
						<view class="item_text">保存图片</view>
					</view>
				</view>
				<view class="share_cancel" @click="cancel">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				pageData: {
					title: '在高质量发展中扎实推动共同富裕！',
					src: '/static/images/mine/avatar1.jpg',
					name: '船百知官方账号',
					is_collect: 0,
					
					content: `洗脸，是我们日常生活中每天都要进行的活动。俗话说得好:勤梳头，\n勤洗脸，有点儿倒霉也不显。光洁的脸庞不仅透露出积极向上的精神\n面貌。也是外在美最直接的表现形式。网络疯传的洗脸教育帖转发率\n之高，书店里出售的洗脸书销量之大，都反映出人们对于洗脸的重`,
					date: '2021年09月05日',
					fujian: '在发展中扎实推动共同富裕.pdf',
					code: '',
				},
				share_show: false,
				canvasData: [
					
				],
				tempImage: "",
			}
		},
		onLoad() {
			that = this
			that.canvasData = [
				{
					type: 'rect',
					attr: {
						color: '#fff', 
						x: 0, 
						y: 0, 
						width: 325, 
						height: 384, 
						radian_1: 10, 
					}
				},
				{
					type: 'text',
					attr: {
						text: that.pageData.title,
						x: 10,
						y: 15,
						color: '#222', 
						size: 9, 
						weight: '500', 
						writingMode: 'initial' ,
					}
				},
				{
					type: 'image',
					attr: {
						image: that.pageData.src,
						x: 10,
						y: 20,
						width: 14,
						height: 14,
						radian_1: 7,
						radian_2: 7,
						radian_3: 7,
						radian_4: 7
					}
				},
				{
					type: 'text',
					attr: {
						text: that.pageData.name,
						x: 30,
						y: 28,
						color: '#444', 
						size: 8, 
						weight: '400', 
						writingMode: 'initial' ,
					}
				},
				{
					type: 'text',
					attr: {
						text: that.pageData.content,
						x: 10,
						y: 45,
						color: '#444', 
						size: 7, 
						weight: '400', 
						writingMode: 'initial' ,
					}
				},
				{
					type: 'text',
					attr: {
						text: '扫码查看更多',
						color: '#444', 
						size: 5, 
						x: 65,
						y: 105,
						weight: '400', 
						writingMode: 'initial' ,
					}
				},
				{
					type: 'line',
					attr: {
						color: '#C3C3C3', 
						x: 20,
						y: 115,
						width: 1,
						height: 120
					}
				},
				{
					type: 'text',
					attr: {
						text: '船百知',
						color: '#222222', 
						size: 8, 
						x: 10,
						y: 130,
						weight: '400', 
						writingMode: 'initial' ,
					}
				},
				{
					type: 'text',
					attr: {
						text: '船百知伴您一起扬帆起航，驶向成功彼岸。',
						color: '#999999', 
						size: 5, 
						x: 10,
						y: 140,
						weight: '400', 
						writingMode: 'initial' ,
					}
				},
				{
					type: 'image',
					attr: {
						image: that.pageData.src,
						x: 110,
						y: 120,
						width: 34,
						height: 34,
					}
				},
			]
		},
		onShareAppMessage(res) {
			console.log(res);
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: '船百知', //分享的名称
		    }
		},
		onShareTimeline(res) {
			console.log(res);
		    return {
		        title: '船百知',
		        type: 0,
		        summary: "",
		    }
		},
		methods: {
			// 收藏
			collect() {
				if(that.pageData.is_collect == 0) {
					that.pageData.is_collect = 1
					$api.info('收藏成功')
				} else {
					that.pageData.is_collect = 0
					$api.info('取消收藏')
				}
			},
			// 分享
			share() {
				that.share_show = true
				const ctx = uni.createCanvasContext('myCanvas')
				
				ctx.draw()
			},
			generateImageSuccessful(image) {
				console.log(image);
				this.tempImage = image;
			},
			saveImg() {
				uni.authorize({
				    scope: 'scope.writePhotosAlbum',
				    success() {
				        uni.saveImageToPhotosAlbum({
				        	filePath: that.tempImage,
				        	success: function () {
				        		console.log('save success');
				        	}
				        });
				    }
				})
			},
			
			// 取消
			cancel() {
				that.share_show = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		position: relative;
		
		.tile {
			box-sizing: border-box;
			padding: 24rpx 30rpx;
			font-size: 40rpx;
			font-weight: 500;
			color: #333333;
			line-height: 56rpx;
		}
		.img_box {
			width: 56rpx;
			height: 56rpx;
			position: relative;
			.img {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
			}
			.type {
				position: absolute;
				right: 0rpx;
				bottom: 0rpx;
				width: 28rpx;
				height: 28rpx;
				background: #506DFF;
				border-radius: 12rpx 4rpx 12rpx 4rpx;
				font-size: 20rpx;
				color: #fff;
				text-align: center;
				line-height: 28rpx;
			}
		}
		.text_style1 {
			margin-left: 16rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #222222;
			line-height: 36rpx;
		}
		.box {
			margin: 24rpx 30rpx;
			height: 116rpx;
			background: #F4F4F4;
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 24rpx 28rpx;
			.box_icon {
				width: 56rpx;
				height: 68rpx;
			}
			.down {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #506DFF;
			}
		}
		.date {
			margin-bottom: 186rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #989898;
			line-height: 18px;
		}
		.bottom {
			width: 100%;
			z-index: 9;
			position: fixed;
			bottom: 0;
			height: 166rpx;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 8rpx 30rpx 74rpx;
			.btn {
				width: 510rpx;
				height: 80rpx;
				background: #506DFF;
				border-radius: 42rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
		.cCanvas {
			position: absolute;
			top: 188rpx;
			left: 50rpx;
			background-color: #fff;
			z-index: 100;
			border-radius: 20rpx;
		}
		.share_content {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100vw;
			height: 100vh;
			background: rgba(0,0,0,0.5);
			backdrop-filter: blur(5px);
			.share_box {
				margin: 148rpx auto;
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 0 40rpx;
				.box_bottom {
					width: 100%;
					padding: 34rpx 0 16rpx;
					border-top: 1rpx dashed #C3C3C3;
					
					.bottom_left1 {
						font-size: 32rpx;
						font-weight: 500;
						color: #222222;
						line-height: 44rpx;
						padding-bottom: 20rpx;
						
					}
					.bottom_left2 {
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 32rpx;
					}
					.bottom_right {
						width: 136rpx;
						height: 136rpx;
					}
				}
			}
			.canvas {
				position: absolute;
				top: 188rpx;
				left: 50rpx;
				width: 650rpx;
				min-height: 494rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
			}
			.share_bottom {
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 388rpx;
				background: #F5F7FF;
				border-radius: 40rpx 40rpx 0px 0px;
				.bottom_item {
					width: 33%;
					margin: 50rpx 0 90rpx;
					border: none !important;
					background-color: #F5F7FF !important;
					
					
					.item_icon {
						width: 76rpx;
						height: 76rpx;
					}
					.item_text {
						font-size: 26rpx;
						font-weight: 400;
						color: #333333;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
				}
				button::after {
					border: none !important;
				}
				.share_cancel {
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					line-height: 44rpx;
				}
			}
		}
	}
</style>