siyu_app/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">
			<!-- #ifdef MP-WEIXIN -->
			<view class="share-item" @click="downImg()">
				<view class="img">
					<uni-icons type="redo" size="30" color="#222"></uni-icons>
				</view>
				<text class="text">分享</text>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="share-item" @click="wxShare(0)">
				<image src="/static/images/icon_wx.png" mode=""></image>
				<text class="text">微信</text>
				<button class='share-btn'></button>
			</view>
			<view class="share-item" @click="wxShare(1)">
				<image src="/static/images/icon_pyq.png" mode=""></image>
				<text class="text">朋友圈</text>
				<button class='share-btn' open-type="share">
				</button>
			</view>
			<!-- #endif -->
			<!-- <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">
					<uni-icons type="arrow-down" size="30" color="#222"></uni-icons>
				</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) {
			return {
				title: '立即绑定，享受更多权益',
				path: '/pages_user/bindCompanyUser?companyUserId=' + this.companyUserId,
				imageUrl: this.imageUrl
			}

		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '立即绑定，享受更多权益',
				path: '/pages_user/bindCompanyUser?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'
						})
					}
				})
			},
			wxShare(type) {
				// #ifdef APP-PLUS
				if (!plus.runtime.isAgreePrivacy()) {
					uni.showToast({
						title: "请同意隐私政策",
						icon: "none",
						position: 'top',
						duration: 2000
					})
					return;
				}

				let that = this;
				let sceneStr = type == 0 ? "WXSceneSession" : "WXSceneTimeline";
				// 仅支持分享微信小程序到微信聊天界面，想进入朋友圈需改为分享图片方式，在图片中包含小程序码
				uni.share({
					provider: "weixin",
					scene: sceneStr,
					type: 2,
					imageUrl: this.imageUrl, //分享封面图片
					success: function(res) {
						uni.showToast({
							title: "分享成功",
							icon: 'none'
						});
					},
					fail: function(err) {
						// 此处是调起微信分享失败的回调
					},
					complete: (e) => {
						console.log("WXSceneTimeline", e)
					}
				});
				// #endif
			},
			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>