mirror of
https://github.com/shuguangnet/uniapp.git
synced 2025-01-23 16:08:44 +08:00
557 lines
14 KiB
Vue
557 lines
14 KiB
Vue
<template>
|
||
<view class="preview" v-if="currentInfo">
|
||
<swiper circular :current="currentid" @change="swiperChange">
|
||
<swiper-item v-for="(item,index) in classList" :key="item._id">
|
||
<image @click="maskChange" :src="item.picurl" mode="aspectFill"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<view class="mask" v-if="maskState">
|
||
<view class="goBack" @click="goBack"
|
||
:style="{top:getStatusBarHeight()+'px'}">
|
||
<uni-icons type="back" color="#fff" size="20"></uni-icons>
|
||
</view>
|
||
<view class="count">{{currentid+1}} / {{classList.length}}</view>
|
||
<view class="time">
|
||
<uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
|
||
</view>
|
||
<view class="date">
|
||
<uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
|
||
</view>
|
||
<view class="footer" v-if="currentInfo">
|
||
<view class="box" @click="clickInfo">
|
||
<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="23"></uni-icons>
|
||
<view class="text">下载</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uni-popup ref="infoPopup" type="bottom">
|
||
<view class="infoPopup">
|
||
<view class="popHeader">
|
||
<view></view>
|
||
<view class="title">壁纸信息</view>
|
||
<view class="close" @click="clickInfoClose">
|
||
<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y>
|
||
<view class="content" v-if="currentInfo">
|
||
<view class="row">
|
||
<view class="label">壁纸ID：</view>
|
||
<text selectable class="value">{{currentInfo._id}}</text>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<view class="label">分类：</view>
|
||
<text class="value class">明星美女</text>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<view class="label">发布者：</view>
|
||
<text class="value">{{currentInfo.nickname}}</text>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<text class="label">评分：</text>
|
||
<view class='value roteBox'>
|
||
<uni-rate readonly touchable :value="currentInfo.score" size="16"/>
|
||
<text class="score">{{currentInfo.score}}分</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<text class="label">摘要：</text>
|
||
<view class='value'>
|
||
{{currentInfo.description}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<text class="label">标签：</text>
|
||
<view class='value tabs'>
|
||
<view class="tab" v-for="item in currentInfo.tabs">{{item}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="copyright">声明：本图片来用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，您可以拷贝壁纸ID举报至平台，邮箱513894357@qq.com，管理将删除侵权壁纸，维护您的权益。
|
||
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
<uni-popup ref="scorePopup" :is-mask-click="false">
|
||
<view class="scorePopup">
|
||
<view class="popHeader">
|
||
<view></view>
|
||
<view class="title">{{isScore?"已经评分过了":"壁纸评分"}}</view>
|
||
<view class="close" @click="clickScoreClose">
|
||
<uni-icons type="closeempty" size="18" color="#999"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<uni-rate v-model="userScore" allowHalf :disabled="isScore"/>
|
||
<text class="text">{{userScore}}分</text>
|
||
</view>
|
||
|
||
<view class="footer">
|
||
<button @click="submitScore" :disabled="!userScore ||isScore" type="default" size="mini" plain >确认评分</button>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import {getStatusBarHeight} from "@/utils/system.js"
|
||
import {onLoad,onShareAppMessage,onShareTimeline} from '@dcloudio/uni-app'
|
||
import {apiScore,apiDownloadWall,apiDetailWall} from '@/api/apis.js'
|
||
const maskState =ref(true);
|
||
const infoPopup = ref(null);
|
||
const scorePopup = ref(null);
|
||
const userScore =ref(0)
|
||
let classList=ref()
|
||
const currentid=ref(0)
|
||
const currentclassId=ref(null)
|
||
const currentInfo=ref()
|
||
// 是否评分
|
||
const isScore=ref(false)
|
||
|
||
// 获取索引
|
||
onLoad(async (e)=>{
|
||
let {id}=e
|
||
currentclassId.value=e.id
|
||
let index=classList.value.findIndex(item=>item._id==id)
|
||
if(e.type=='share'){
|
||
// 如果方式为分享,则在数据中查询单张壁纸
|
||
let res=await apiDetailWall({id:id})
|
||
classList.value=res.data.map(item=>{
|
||
return {
|
||
...item,
|
||
picurl:item.smallPicurl.replace("_small.webp",".jpg")
|
||
}
|
||
})
|
||
}
|
||
currentid.value=index
|
||
currentInfo.value=classList.value[currentid.value]
|
||
|
||
})
|
||
const swiperChange=(e)=>{
|
||
currentid.value=e.detail.current
|
||
currentInfo.value=classList.value[currentid.value]
|
||
}
|
||
// 获取缓存
|
||
let storageClasslist=uni.getStorageSync("storageClasslist")||[]
|
||
classList.value=storageClasslist.map(item=>{
|
||
return {
|
||
...item,
|
||
picurl:item.smallPicurl.replace("_small.webp",".jpg")
|
||
}
|
||
})
|
||
|
||
console.log(classList.value)
|
||
//点击info弹窗
|
||
const clickInfo = ()=>{
|
||
infoPopup.value.open();
|
||
}
|
||
|
||
//点击关闭信息弹窗
|
||
const clickInfoClose = ()=>{
|
||
infoPopup.value.close();
|
||
}
|
||
|
||
//评分弹窗
|
||
const clickScore=()=>{
|
||
if(currentInfo.value.userScore){
|
||
isScore.value=true
|
||
userScore.value=currentInfo.value.userScore
|
||
}
|
||
scorePopup.value.open();
|
||
}
|
||
//关闭评分框
|
||
const clickScoreClose=()=>{
|
||
scorePopup.value.close();
|
||
isScore.value=false
|
||
}
|
||
|
||
//确认评分
|
||
const submitScore=async ()=>{
|
||
uni.showLoading({
|
||
title:"加载中..."
|
||
})
|
||
console.log(userScore);
|
||
let res=await apiScore({
|
||
classid:currentInfo.value.classid,
|
||
wallId:currentInfo.value._id,
|
||
userScore:userScore.value
|
||
})
|
||
uni.hideLoading()
|
||
if(res.errCode===0){
|
||
uni.showToast({
|
||
title:"打分成功!",
|
||
icon:'none'
|
||
})
|
||
// 追加数据
|
||
classList.value[currentid.value].userScore = userScore.value;
|
||
// 更新缓存
|
||
uni.setStorageSync('storageClasslist','classList.value')
|
||
// 重置分数
|
||
userScore.value=0
|
||
// 关闭弹窗
|
||
clickScoreClose()
|
||
}
|
||
}
|
||
// 下载
|
||
// 点击下载
|
||
const clickDownload = async () => {
|
||
|
||
// #ifdef H5
|
||
// 如果当前运行在 H5 平台上（即浏览器环境）
|
||
uni.showModal({
|
||
content: "请长按保存壁纸", // 提示用户长按以保存图片
|
||
showCancel: false // 只显示确定按钮，不显示取消按钮
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
// 如果当前运行在非 H5 平台上（即移动端，如微信小程序、App等）
|
||
try {
|
||
// 显示加载框，提示用户正在下载
|
||
uni.showLoading({
|
||
title: "下载中...", // 提示文字
|
||
mask: true // 开启遮罩层，防止用户点击其他操作
|
||
})
|
||
|
||
// 从 currentInfo 中获取 classid 和 wallId
|
||
let {
|
||
classid,
|
||
_id: wallId
|
||
} = currentInfo.value;
|
||
|
||
// 调用 apiDownloadWall 接口，通知服务器进行下载操作
|
||
let res = await apiDownloadWall({
|
||
classid,
|
||
wallId
|
||
})
|
||
|
||
// 如果接口返回错误，抛出异常
|
||
if (res.errCode != 0) throw res;
|
||
|
||
// 获取图片信息
|
||
uni.getImageInfo({
|
||
src: currentInfo.value.picurl, // 图片的URL
|
||
success: (res) => {
|
||
// 保存图片到相册
|
||
uni.saveImageToPhotosAlbum({
|
||
filePath: res.path, // 图片的本地路径
|
||
success: (res) => {
|
||
// 保存成功，提示用户
|
||
uni.showToast({
|
||
title: "保存成功，请到相册查看", // 提示文字
|
||
icon: "none" // 不显示图标
|
||
})
|
||
},
|
||
fail: err => {
|
||
// 如果保存失败
|
||
if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel') {
|
||
// 如果是用户取消了保存
|
||
uni.showToast({
|
||
title: '保存失败，请重新点击下载', // 提示重新下载
|
||
icon: "none" // 不显示图标
|
||
})
|
||
return;
|
||
}
|
||
// 如果失败是由于没有权限，提示用户授权
|
||
uni.showModal({
|
||
title: "授权提示",
|
||
content: "需要授权保存相册", // 提示需要授权
|
||
success: res => {
|
||
if (res.confirm) { // 如果用户点击确定
|
||
uni.openSetting({
|
||
success: (setting) => {
|
||
// 打开设置界面，获取授权结果
|
||
console.log(setting);
|
||
if (setting.authSetting['scope.writePhotosAlbum']) {
|
||
// 如果用户授权了
|
||
uni.showToast({
|
||
title: "获取授权成功", // 提示授权成功
|
||
icon: "none" // 不显示图标
|
||
})
|
||
} else {
|
||
// 用户拒绝授权
|
||
uni.showToast({
|
||
title: "获取权限失败", // 提示授权失败
|
||
icon: "none" // 不显示图标
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
complete: () => {
|
||
// 隐藏加载框
|
||
uni.hideLoading();
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
} catch (err) {
|
||
// 捕获到错误时，打印错误信息
|
||
console.log(err);
|
||
uni.hideLoading(); // 隐藏加载框
|
||
}
|
||
// #endif
|
||
}
|
||
|
||
|
||
//遮罩层状态
|
||
const maskChange = ()=>{
|
||
maskState.value = !maskState.value
|
||
}
|
||
|
||
|
||
//返回上一页
|
||
const goBack= ()=>{
|
||
uni.navigateBack({
|
||
success() {
|
||
|
||
},
|
||
fail() {
|
||
uni.reLaunch({
|
||
url:'/pages/index/index'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 分享好友
|
||
onShareAppMessage((e)=>{
|
||
console.log(1111)
|
||
console.log(e)
|
||
return{
|
||
title:"壁纸",
|
||
path:'/pages/preview/preview?id='+ currentclassId.value+"&type=share"
|
||
}
|
||
})
|
||
// 分享朋友圈
|
||
onShareTimeline((e)=>{
|
||
console.log(111)
|
||
return{
|
||
title:"壁纸",
|
||
// imageUrl:""
|
||
query:"id="+ currentclassId.value +"&type=share"
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.preview{
|
||
width: 100%;
|
||
height: 100vh;
|
||
position: relative;
|
||
swiper{
|
||
width: 100%;
|
||
height: 100%;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.mask{
|
||
&>view{
|
||
position: absolute;
|
||
left:0;
|
||
margin:auto;
|
||
color:#fff;
|
||
right:0;
|
||
width: fit-content;
|
||
}
|
||
|
||
.goBack{
|
||
width: 38px;
|
||
height: 38px;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
left: 30rpx;
|
||
margin-left: 0;
|
||
border-radius: 100px;
|
||
top: 0;
|
||
backdrop-filter: blur(10rpx);
|
||
border:1rpx solid rgba(255,255,255,0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.count{
|
||
top:10vh;
|
||
background: rgba(0,0,0,0.3);
|
||
font-size: 28rpx;
|
||
border-radius: 40rpx;
|
||
padding:8rpx 28rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
.time{
|
||
font-size: 140rpx;
|
||
top:calc(10vh + 80rpx);
|
||
font-weight: 100;
|
||
line-height: 1em;
|
||
text-shadow: 0 4rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
.date{
|
||
font-size: 34rpx;
|
||
top: calc(10vh + 230rpx);
|
||
text-shadow: 0 2rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
.footer{
|
||
background: rgba(255,255,255,0.8);
|
||
bottom:10vh;
|
||
width: 65vw;
|
||
height: 120rpx;
|
||
border-radius: 120rpx;
|
||
color:#000;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
box-shadow: 0 2rpx 0 rgba(0, 0, 0, 0.1);
|
||
backdrop-filter: blur(20rpx);
|
||
.box{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding:2rpx 12rpx;
|
||
.text{
|
||
font-size: 26rpx;
|
||
color:$text-font-color-2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.popHeader{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.title{
|
||
color:$text-font-color-2;
|
||
font-size: 26rpx;
|
||
}
|
||
.close{
|
||
padding:6rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.infoPopup{
|
||
background: #fff;
|
||
padding:30rpx;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
overflow: hidden;
|
||
scroll-view{
|
||
max-height: 60vh;
|
||
.content{
|
||
.row{
|
||
display: flex;
|
||
padding:16rpx 0;
|
||
font-size: 32rpx;
|
||
line-height: 1.7em;
|
||
.label{
|
||
color:$text-font-color-3;
|
||
width: 140rpx;
|
||
text-align: right;
|
||
font-size: 30rpx;
|
||
}
|
||
.value{
|
||
flex:1;
|
||
width:0;
|
||
}
|
||
.roteBox{
|
||
display: flex;
|
||
align-items: center;
|
||
.score{
|
||
font-size: 26rpx;
|
||
color:$text-font-color-2;
|
||
padding-left:10rpx;
|
||
}
|
||
}
|
||
.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: 1em;
|
||
margin: 0 10rpx 10rpx 0;
|
||
}
|
||
}
|
||
.class{
|
||
color:$brand-theme-color;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.copyright {
|
||
font-size: 28rpx;
|
||
padding: 20rpx;
|
||
background: #F6F6F6;
|
||
color: #666;
|
||
border-radius: 10rpx;
|
||
margin: 20rpx 0;
|
||
line-height: 1.6em;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.scorePopup{
|
||
background: #fff;
|
||
padding:30rpx;
|
||
width: 70vw;
|
||
border-radius: 30rpx;
|
||
.content{
|
||
padding:30rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.text{
|
||
color: #FFCA3E;
|
||
padding-left: 10rpx;
|
||
width: 80rpx;
|
||
line-height: 1em;
|
||
text-align: right;
|
||
}
|
||
}
|
||
.footer{
|
||
padding:10rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|