文件路径： 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.idcurrentIndex.value = classList.value.findIndex(item => item._id == currentId.value)readImgsFun()currentInfoFunc()})// 修改swiper的currentconst swiperChange = function(e) {currentIndex.value = e.detail.currentreadImgsFun()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 = truescoreNumVal.value = currentInfo.value.userScore}scorePopup.value.open()}// 关闭评分const clickScoreClose = () => {scorePopup.value.close()scoreNumVal.value = 0isScore.value = false}// score评分const scoreStarsChange = (e) => {scoreNumVal.value = e.value}// 点击确认提交const subScore = async () => {uni.showLoading({title: "加载中..."})let {classid,_id: wallId} = currentInfo.valuelet res = await apiGetSetupScore({classid,wallId,userScore: scoreNumVal.value})if (res.errCode == 0) {uni.showToast({title: '评分成功'});}classList.value[currentIndex.value].userScore = scoreNumVal.valueuni.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 H5uni.showModal({content: "请长摁保存壁纸",showCancel: false})// #endif// #ifndef H5uni.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>