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

<template>
	<view class="share_content" v-if="show">
		<view class="share_box">
			<view class="box_bottom hflex acenter jbetween">
				<view class="vflex">
					<view class="bottom_left1">船百知</view>
					<view class="bottom_left2">船百知伴您一起扬帆起航，驶向成功彼岸。</view>
				</view>
				<image :src="data.ewm" class="bottom_right"></image>
			</view>
		</view>
		<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>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		name:"share-model",
		props: {
			show: {
				type: Boolean,
				value: false
			},
			data: {
				type: Object,
				value: {}
			}
		},
		data() {
			return {
				
			}
		},
		onLoad() {
			that = this
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		    }
		    return {
		        title: '船百知', //分享的名称
		    }
		},
		onShareTimeline(res) {
		    return {
		        title: '船百知',
		        type: 0,
		        summary: "",
		    }
		},
		methods: {
			// 取消
			cancel() {
				this.$emit('cancel', false)
			},
			saveImg() {
				this.$emit('saveImg')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.share_content::v-deep {
		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;
				}
			}
		}
		.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>