qidian/pages/share/share.vue

<template>
	<view class="baoctp">(点击图片长按保存)</view>
	<img @click='yulan' class="fxnrtp" :src="imgurl" />
	<view class="fenxbot">
		<view>
			<view @click="fenx('长按图片，进行保存并分享')">
				<image src="../../static/fxwxhy.png"></image>
				<view>分享给好友</view>
			</view>
			<view @click="fenx('长按图片，进行保存并分享')">
				<image src="../../static/baocuntupian.png"></image>
				<view>保存图片</view>
			</view>
			<view @click="lianjie">
				<image src="../../static/fuzhilianjie.png"></image>
				<view>复制链接</view>
			</view>
		</view>
		<view @click="quxiao">取消</view>
	</view>
</template>

<script>
	import {
		criticismgetInviteCodePoster,
		criticismdownload
	} from '@/api/user.js'
	import {
		host
	} from '@/api/config.js'
	import {
		ref
	} from 'vue'
	import FileSaver from 'file-saver'
	export default {
		setup() {
			// console.log('http://' + document.domain + '/#/login/login');
			let imgurl = ref('')
			criticismgetInviteCodePoster({
				path: 'http://' + document.domain + '/#/pages/login/login'
			}).then(res => {
				console.log(res);
				imgurl.value = res.msg
			})

			function quxiao() {
				uni.reLaunch({
					url: '../user/user'
				})
			}

			function lianjie() {
				let id = uni.getStorageSync('users').id
				uni.setClipboardData({
					data: 'https://' + document.domain + '/#/pages/login/login?inviterId=' + id, //要被复制的内容
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '已复制到剪贴板',
									icon: 'none'
								});
							}
						});
					},
				})
			}

			function fenx(msg) {
				// let token = ''
				// let createToken=''
				// token = uni.getStorageSync('token');
				// createToken=uni.getStorageSync('createToken');
				// uni.request({
				// 	url: `${host}/api/criticism/download?fileName=${imgurl.value.split('/')[imgurl.value.split('/').length-1]}`,
				// 	method: 'get',
				// 	dataType: "json",
				// 	header: {
				// 		"content-type": "application/json",
				// 		token: token,
				// 		Authorization:createToken
				// 	},
				// 	responseType: 'blob'
				// }).then(res => {
				// 	console.log(res.data);

				// });
				// let Url = imgurl.value //图片路径，也可以传值进来
				// // var triggerEvent = "touchstart"; //指定下载方式
				// // var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob
				//  // const BLOB = new Blob([res], { type: 'image/png' })
				// // let url = window.URL.createObjectURL(blob);
				// let link = document.createElement('a');
				// link.style.display = 'none';
				// link.href = Url;
				// link.setAttribute('download', imgurl.value.split('/')[imgurl.value.split('/').length-1]);
				// document.body.appendChild(link);
				// link.click();
				// let url='http://nft.scyipang.com/third_image/'+imgurl.value.split('/')[imgurl.value.split('/').length-1]
				// let url = imgurl.value

				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 2000
				});
				setTimeout(() => {
					yulan()
					// FileSaver.saveAs(url, `${imgurl.value.split('/')[imgurl.value.split('/').length-1]}.jpg`);
				}, 2000)

			}

			function yulan() {
				uni.previewImage({
					urls: [imgurl.value],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			}
			return {
				quxiao,
				imgurl,
				fenx,
				lianjie,
				yulan
			}
		}
	}
</script>

<style lang="scss">
	.baoctp {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 90upx;
		left: 0;
		// background-color: #FFFFFF;
		color: #ffffff;
		// z-index: 1;
	}

	.fenxbot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;

		>view:nth-of-type(1) {
			height: 218upx;
			background: #23262F;
			display: flex;
			justify-content: space-around;
			align-items: center;

			>view {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 28upx;
				font-weight: 400;
				color: #FFFFFF;

				>image {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					margin-bottom: 26upx;
					background-color: #ffffff;
				}
			}
		}

		>view:nth-of-type(2) {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100upx;
			background: #2C303C;
			font-size: 28upx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}

	.fxnrtp {
		max-width: 80%;
		border-radius: 24upx;
		position: fixed;
		left: 50%;
		top: 20%;
		transform: translateX(-50%) translateY(-20%) scale(0.8);
	}
</style>