weapp-v2/pages/rank-day/rank-day.vue

<template>
	<view class="rank-day-container">
		<image
			:src="rankDayPath"
			mode="widthFix"
			class="rank-day-img"
			@click="toSave"
		></image>
		></image>
		<view class="submit" @tap="toSave">点击保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rankDayPath: ''
			}
		},
		onShow() {
			this.rankDayPath = uni.getStorageSync('rankDay')
			if(!this.rankDayPath) {
				uni.showModal({
					content: '查看每日排行错误',
					showCancel: false,
					success(res){
						if(res.confirm) {
							uni.navigateBack()
						}
					}
				})
			}
		},
		methods: {
			toSave() {
				const _this = this
				uni.showLoading()
				uni.getImageInfo({
					src: _this.rankDayPath,
					success(res) {
						uni.saveImageToPhotosAlbum({
							filePath: res.path,
							success() {
								uni.showModal({
									content: "图片保存成功",
									showCancel: false
								})
							},
							fail(e) {
								uni.showModal({
									content: JSON.stringify(e) || '图片保存失败',
									content: '图片保存失败',
									showCancel: false
								})
							},
							complete() {
								uni.hideLoading()
							}
						})
					},
					fail(e) {
						uni.hideLoading()
						uni.showModal({
							content: '保存图片失败',
							showCancel: false
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		display: flex;
		flex-direction: column;
		.rank-day-container {
			flex: 1;
			overflow: hidden;
			.rank-day-img {
				width: 100%;
			}
		}
		.submit {
			width: calc(100% - 160rpx);
			height: 80rpx;
			margin: 30rpx auto 0;
			background: rgba(250, 99, 66, 1);
			border-radius: 35rpx;
			color: #ffffff;
			margin-bottom: 10rpx;
			font-size: 32rpx;
			font-weight: bolder;
			line-height: 80rpx;
			text-align: center;
			padding: 0 30rpx;
		}
	}
</style>