his_user_miniapp/pages_company/bindInfo.vue

<template>
	<view class="container" v-if="imageUrl || urlVal">
		<view class="qrcode-box x-c">
			<image class="qrcode" :src="imageUrl" mode="aspectFill" show-menu-by-longpress="true"></image>
		</view>
		<view class="share-inner">
			<view class="share-item">
				<view class="img">
					<u-icon name="share-square" size="30" color="#222"></u-icon>
				</view>
				<text class="text">分享</text>
				<button class='share-btn' open-type="share"></button>
			</view>
			<!-- <view class="share-item" @click="copyUrl()">
				<image src="/static/images/icon_copy_link.png" mode=""></image>
				<text class="text">复制链接</text>
			</view> -->
			<!-- #ifndef H5 -->
			<view class="share-item" @click="downImg()">
				<view class="img">
					<u-icon name="download" size="30" color="#222"></u-icon>
				</view>
				<text class="text">保存图片</text>
			</view>
			<!-- #endif -->
		</view>
	</view>
	<u-empty style="padding-top: 20vh;" mode="data" v-else="imgurl"
		icon="https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png" text="暂无数据"></u-empty>
</template>

<script>
	import {
		getBindInfo
	} from "@/api/companyUser.js"
	export default {
		data() {
			return {
				imageUrl: '',
				urlVal: '',
				companyUserId: ''
			}
		},
		//发送给朋友
		onShareAppMessage(res) {
			console.log("fe===",this.imageUrl)
			return {
				title: '立即绑定，享受更多权益',
				path: '/pages_user/bindCompanyUser?companyUserId=' + this.companyUserId,
				imageUrl: this.imageUrl
				// imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20230106/6b459adfb1004c1a96219bcdf07e337c.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '立即绑定，享受更多权益',
				query:'companyUserId='+this.companyUserId,//页面参数
				imageUrl: this.imageUrl
			}
			
		},
		onLoad() {
			this.companyUserId = uni.getStorageSync('companyUserId') || '';
			this.getInfo()
		},
		methods: {
			getInfo() {
				getBindInfo().then(res => {
					if (res.code == 200) {
						this.imageUrl = res.imageUrl
						this.urlVal = res.url
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			copyUrl() {
				uni.setClipboardData({
					data: this.urlVal,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			downImg() {
				uni.showLoading({
					title: "图片保存中..."
				})
				uni.downloadFile({
					url: this.imageUrl,
					fail: function(res) {
						uni.showModal({
							title: '提示',
							content: '保存失败',
						})
						uni.hideLoading();
					},
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({
							filePath: tempFilePath,
							success: () => {
								uni.showToast({
									title: "保存成功",
									duration: 2000
								})
							},
							fail: () => {
								console.log("图片失败");
								uni.showToast({
									title: "图片失败",
									duration: 2000,
									icon: "error"
								})
								uni.hideLoading();
							},
							complete: function() {
								uni.hideLoading();
							}
						})
					},
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 40rpx 0;
		padding-top: 16vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.qrcode-box {
		width: 480rpx;
		height: 480rpx;
		box-sizing: border-box;
		overflow: hidden;
		flex-direction: column !important;
		border-radius: 16rpx;
		background-color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222;

		.qrcode {
			width: 450rpx;
			height: 450rpx;
		}

		.qrcode-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #222;
			margin-bottom: 32rpx;
		}

		.qrcode-tip {
			margin: 32rpx;
			color: #999;
			text-align: center;
		}
	}

	.downbtn {
		width: 160rpx;
		min-height: 68rpx;
		border: 1px solid #FF5C03 !important;
		color: #FF5C03 !important;
		background-color: #fff !important;
		border-radius: 168rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;

		&::after {
			border: none;
		}
	}

	.share-inner {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10%;
		display: flex;
		flex-wrap: wrap;
		position: absolute;
		bottom: 0;
		left: 0;

		.share-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 66upx;
			position: relative;

			.img {
				width: 80upx;
				height: 80upx;
				margin-bottom: 20upx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
			}

			image {
				width: 80upx;
				height: 80upx;
				margin-bottom: 20upx;
			}

			.text {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				line-height: 1;
			}
		}
	}

	.share-btn {
		position: absolute;
		left: 50%;
		top: 0;
		width: 80upx;
		height: 100%;
		transform: translateX(-50%);
		background-color: transparent !important;

		&::after {
			border: none;
		}
	}
</style>