EP34 uniapp的两个api--getImageInfo和saveImageToPhotosAlbum

文件路径： E:/homework/uniappv3tswallpaper/pages/preview/preview.vue

<template>
	<view class="">

		<view class="preview" @click="changeMask">
			<swiper circular="true" :current="currentIndex" @change="swiperChange">
				<swiper-item v-for="(item,index) in classList" :key="item._id">
					<view class="swiper-item">
						<image v-if="readImgs.includes(index)" :src="item.picurl" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="mask" v-show="maskState">
			<view class="goback" :style="{top:getStatusBarHeight() + 'px', height: getTitleBarHeight() + 'px'}"
				@click="goBack">
				<uni-icons type="back" size="20" color="#fff"></uni-icons>
			</view>
			<view class="num">
				{{currentIndex + 1}} / {{classList.length}}
			</view>
			<view class="time">
				<uni-dateformat :date="new Date()" format="hh:mm" />
			</view>
			<view class="date">
				<uni-dateformat :date="new Date()" format="MM月dd日" />
			</view>
			<view class="footer">
				<view class="box" @click="open">
					<uni-icons type="info" size="28"></uni-icons>
					<view class="text">
						信息
					</view>
				</view>
				<view class="box" @click="clickScore">
					<uni-icons type="star" size="28"></uni-icons>
					<view class="text">
						{{currentInfo.score}}分
					</view>
				</view>
				<view class="box" @click="clickDownload">
					<uni-icons type="download" size="28"></uni-icons>
					<view class="text">
						下载
					</view>
				</view>
			</view>
			<uni-popup ref="infoPopup" type="bottom">
				<view class="infoPopup">
					<view class="popHead">
						<view class="twoSide"> </view>
						<view class="title">
							壁纸信息
						</view>
						<view class="close twoSide" @click="clickInfoClose">
							<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
						</view>
					</view>
					<view class="popContent">
						<scroll-view scroll-y show-scrollbar="false">
							<view class="content">
								<view class="row">
									<view class="label">
										壁纸ID：
									</view>
									<view class="labelContent">
										<text selectable="" class="value">{{currentInfo.classid}}</text>
									</view>
								</view>
								<view class="row">
									<view class="label">
										分类：
									</view>
									<view class="labelContent">
										<text class="value">明星美女</text>
									</view>
								</view>
								<view class="row">
									<view class="label">
										发布者：
									</view>
									<view class="labelContent">
										<text class="value">{{currentInfo.nickname}}</text>
									</view>
								</view>
								<view class="row">
									<view class="label">
										评分：
									</view>
									<view class="labelContent rateBox">
										<uni-rate readonly="true" touchable="true" :value="currentInfo.score"
											size="16" />
										<text class="value">{{currentInfo.score}}分</text>
									</view>
								</view>
								<view class="row">
									<view class="label">
										摘要：
									</view>
									<view class="labelContent">
										<text class="value">{{currentInfo.description}}</text>
									</view>
								</view>
								<view class="row">
									<view class="label">
										标签：
									</view>
									<view class="labelContent tabs" v-for="tab in currentInfo.tabs" :key="tab.id">
										<text class="value tab">{{tab}}</text>
									</view>
								</view>
								<view class="copyright">
									建军事基地附件四哦那个佛哦放假哦计算机的佛i就哦i放到i杰佛i明尼苏达解耦i九年级哦i就欧锦好的话念佛哦你发的时间了哦ijoin的方式哦i
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="scorePopup" type="center" :is-mask-click="true">
				<view class="scorePopup">
					<view class="popHead">
						<view class="title_out">
							<view class="title">
								{{isScore?"已经评分啦":"壁纸信息"}}
							</view>
						</view>
						<view class="close" @click="clickScoreClose">
							<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
						</view>
					</view>
					<view class="popContent">
						<view class="scoreStars">
							<uni-rate v-model="scoreNumVal" @change="scoreStarsChange" allow-half="true"
								:disabled="isScore" disabled-color="#ffca3e" />
						</view>
						<view class="scoreNum">
							{{scoreNumVal}} 分
						</view>
					</view>
					<view class="scoreButton">
						<button class="subScore" @click="subScore" :disabled="!scoreNumVal || isScore">确认评分</button>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getStatusBarHeight,
		getTitleBarHeight
	} from '@/utils/system.js'
	import {
		apiGetSetupScore
	} from '@/api/apis.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const maskState = ref(true);
	const infoPopup = ref(null);
	const scorePopup = ref(null);
	const scoreNumVal = ref(0);
	const classList = ref([]);
	const currentId = ref(null)
	const currentIndex = ref(0)
	const readImgs = ref([])
	const currentInfo = ref(null)
	const isScore = ref(false)

	// 获取地址传递的参数
	onLoad((e) => {
		console.log(e.id)
		currentId.value = e.id
		currentIndex.value = classList.value.findIndex(item => item._id == currentId.value)
		readImgsFun()
		currentInfoFunc()
	})
	// 修改swiper的current
	const swiperChange = function(e) {
		currentIndex.value = e.detail.current
		readImgsFun()
		currentInfoFunc()
	}

	//读取本地存储
	let storageClassList = uni.getStorageSync("storageClassList")
	classList.value = storageClassList.map(item => {
		return {
			...item,
			picurl: item.smallPicurl.replace("_small.webp", ".jpg")
		}
	})
	console.log(classList.value)

	// 打开遮罩层
	const changeMask = () => {
		maskState.value = !maskState.value
	};
	// 打开信息层
	const open = () => {
		infoPopup.value.open()
	}
	// 关闭信息层
	const clickInfoClose = () => {
		infoPopup.value.close()
	}
	// 打开评分
	const clickScore = () => {
		if (currentInfo.value.userScore) {
			isScore.value = true
			scoreNumVal.value = currentInfo.value.userScore
		}
		scorePopup.value.open()
	}
	// 关闭评分
	const clickScoreClose = () => {
		scorePopup.value.close()
		scoreNumVal.value = 0
		isScore.value = false
	}
	// score评分
	const scoreStarsChange = (e) => {
		scoreNumVal.value = e.value
	}
	// 点击确认提交
	const subScore = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		let {
			classid,
			_id: wallId
		} = currentInfo.value
		let res = await apiGetSetupScore({
			classid,
			wallId,
			userScore: scoreNumVal.value
		})
		if (res.errCode == 0) {
			uni.showToast({
				title: '评分成功'
			});
		}
		classList.value[currentIndex.value].userScore = scoreNumVal.value
		uni.setStorageSync("storeClassList", classList.value)
		console.log(currentInfo.value)
		clickScoreClose()
		uni.hideLoading()
	}

	// 返回上一层
	const goBack = () => {
		uni.navigateBack();
	}

	// 图片预缓存
	function readImgsFun() {
		readImgs.value.push(
			currentIndex.value <= 0 ? classList.value.length - 1 : currentIndex.value - 1,
			currentIndex.value,
			currentIndex.value >= classList.value.length - 1 ? 0 : currentIndex.value + 1
		)
		readImgs.value = [...new Set(readImgs.value)]
	}
	// 图片详情
	function currentInfoFunc() {
		currentInfo.value = classList.value[currentIndex.value]
		console.log(currentInfo.value)
	}
	// 点击下载
	const clickDownload = () => {
		// #ifdef H5
		uni.showModal({
			content: "请长摁保存壁纸",
			showCancel: false
		})
		// #endif
		// #ifndef H5
		uni.getImageInfo({
			src: currentInfo.value.picurl,
			success: (res) => {
				uni.saveImageToPhotosAlbum({
					filePath: res.path,
					success: (res) => {
						console.log(res)
					}
				})
			}
		})


		// #endif
	}
</script>

<style lang="scss" scoped>
	.preview {
		width: 100%;
		height: 100vh;

		swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				height: 100%;
				width: 100%;

				image {
					height: 100%;
					width: 100%;
				}
			}
		}
	}

	.mask {
		&>view {
			position: absolute;
			left: 0%;
			right: 0%;
			margin: auto;
			width: fit-content;
			color: #fff;
		}

		.goback {
			width: 79rpx;
			height: 79rpx;
			background: rgba(0, 0, 0, 0.5);
			left: 30rpx;
			margin-left: 0;
			border-radius: 100px;
			top: 0;
			backdrop-filter: blur(10rpx);
			border: 1rpx solid rbga(255, 255, 255, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		// position: relative; // 需要的是相对于整个屏幕的绝对位置，所以在这里不设置这个属性
		.num {
			top: 10vh;
			background: rgba(0, 0, 0, 0.3);
			backdrop-filter: blur(10rpx);
			padding: 8rpx 18rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
		}

		.time {
			top: calc(10vh + 160rpx);
			font-size: 140rpx;
			font-weight: 100;
			line-height: 1rem;
			text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
		}

		.date {
			top: calc(10vh + 280rpx);
			font-size: 34rpx;
			text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
		}

		.footer {
			bottom: 10vh;
			background: rgba(255, 255, 255, 0.8);
			width: 65vw;
			height: 120rpx;
			border-radius: 120rpx;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-content: center;
			justify-content: space-evenly;
			align-items: center;

			.box {
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: center;
				align-items: center;
				padding: 2rpx 12rpx;

				.text {
					color: $text-font-color-2;
					font-size: 26rpx;
				}
			}
		}

		.infoPopup {
			background: #fff;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			overflow: hidden;
			color: black;

			.popHead {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: space-between;
				align-items: center;


				.title {
					color: $text-font-color-2;
					font-size: 26rpx;
				}

				.close {
					// padding: 6rpx;
				}
			}

			.popContent {
				height: 60vh;

				scroll-view {
					height: 100%;

					.content {
						.row {
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							align-content: center;
							align-items: center;
							justify-content: center;
							padding: 16rpx 0;
							font-size: 32rpx;
							line-height: 1.7rem;

							.label {
								width: 25%;
								text-align: right;
								color: $text-font-color-3;
								font-size: 30rpx;
							}

							.labelContent {
								flex: 1;
								width: 0;
							}

							.rateBox {
								display: flex;
								flex-direction: row;
								flex-wrap: nowrap;
								align-content: center;
								justify-content: flex-start;
								align-items: center;

								.value {
									font-size: 26rpx;
									color: $text-font-color-3 ;
									padding-left: 25rpx;
								}
							}

							.tabs {
								display: flex;
								flex-wrap: wrap;

								.tab {
									border: 1px solid $brand-theme-color;
									color: $brand-theme-color;
									font-size: 22rpx;
									padding: 10rpx 30rpx;
									border-radius: 40rpx;
									line-height: 1rem;
									margin: 0 10rpx 10rpx 0;
									width: fit-content;
								}
							}
						}

						.copyright {
							font-size: 22rpx;
							padding: 20rpx;
							background: #f6f6f6;
							color: #666;
							border-radius: 10rpx;
							margin: 20rpx 0;
							line-height: 1.6rem;
							width: 100%;
						}
					}
				}
			}
		}

		.scorePopup {
			width: 70vw;
			height: 25vh;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx;

			.popHead {
				display: flex;
				flex-wrap: wrap;
				flex-direction: row-reverse;

				.title_out {
					width: 100%;
					height: 0;

					.title {
						color: $text-font-color-2;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.close {
					padding: 0 6rpx;
				}
			}

			.popContent {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				justify-content: space-evenly;
				align-items: center;
				padding-top: 70rpx;

				.scoreNum {
					text-align: right;
					width: 100rpx;
					color: #feca43;
				}
			}

			.scoreButton {
				padding: 80rpx 70rpx 0 70rpx;
			}
		}
	}
</style>