uniProject/pages/admin/Jiazheng/common/share.vue

<template>
	<button @click="showShareMenu" type="default" class="phone-white-btn bz-tel-btn fx-btn-box">分享</button>
	<!-- 答题卡 -->
	<uni-popup ref="downPopupRef" background-color="#fff" :animation="false" :is-mask-click="true" :mask-click="false">
		<view class="share-haibao-box">
			<view class="phone-line-title">分享</view>
			<view class="share-list-box">
				<view class="share-item-box" @click="getImage">
					<view class="share-icon-box">
						<icon></icon>
					</view>
					<text>下载图片</text>
				</view>
			</view>
		</view>
	</uni-popup>

</template>

<script>
	import {
		jiazhengSharePic
	} from "@/api/jiazheng.js"
	export default {
		data() {
			return {
				imageUrl: ''
			};
		},
		props: {
			id: {
				type: Number,

			}
		},
		methods: {

			showShareMenu() {
				this.$refs.downPopupRef.open('bottom')
				/*  uni.showActionSheet({
				    itemList: ['下载图片'],
				    success: (res) => {
				      if (res.tapIndex === 0) {
				        this.downloadImage();
				      }
				    }
				  }); */
			},

			getImage() {
				console.log('id', this.id);
				jiazhengSharePic({
					id: this.id
				}).then(res => {
					console.log('res',res);
					if(res.code ==0 &&res.data){
						this.imageUrl  = res.data
						this.downloadImage()
					}else{
						uni.showToast({
							title: '获取图片失败',
							icon: 'none'
						});
						return false
					}
				})
			},


			downloadImage() {
				// #ifdef H5
				this.downloadImageForH5();
				// #endif

				// #ifdef APP-PLUS
				this.downloadImageForApp();
				// #endif
			},


			downloadImageForH5() {

				const link = document.createElement('a');
				link.href = this.imageUrl;
				link.download = 'image.jpg';
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link);
				uni.showToast({
					title: '图片已下载，请手动保存到相册。',
					icon: 'none'
				});
			},

			downloadImageForApp() {
				uni.showLoading({
					title: '下载中...',
					mask: true
				});

				uni.downloadFile({
					url: this.imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							const tempFilePath = res.tempFilePath; // 下载后的临时文件路径
							this.saveImageToAlbum(tempFilePath); // 保存到相册
						} else {
							uni.showToast({
								title: '下载失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('下载失败:', err);
						uni.showToast({
							title: '下载失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},


			saveImageToAlbum(tempFilePath) {
				// #ifdef APP-PLUS
				if (uni.getSystemInfoSync().platform === 'android') {
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success: () => {
							this.saveImage(tempFilePath);
						},
						fail: () => {
							uni.showModal({
								title: '提示',
								content: '需要相册权限才能保存图片，是否去设置？',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting(); // 打开设置页面
									}
								}
							});
						}
					});
				} else {
					this.saveImage(tempFilePath);
				}
				// #endif
			},
			saveImage(tempFilePath) {
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('保存失败:', err);
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style>
	button {
		margin-top: 20px;
		padding: 10px 20px;
		background-color: #007AFF;
		color: white;
		border-radius: 5px;
	}
</style>