561 lines
15 KiB
Vue
561 lines
15 KiB
Vue
<template>
|
||
<view class="pc-work" :style="windowHeight>1000?{}:{ minHeight: windowHeight+'px'}">
|
||
<!-- 左侧图片列表 -->
|
||
<view class="work-images">
|
||
<view class="mw-top" :style="{backgroundImage: `url(${fileUrl+topBackground})`}">
|
||
<view class="mwt-one">
|
||
<view class="mwto-item" :style="[getSwitchItemStyle(index)]" v-for="(item,index) in selectList" :key="index" @click="changeSelect(index)">
|
||
{{ item }}
|
||
<image v-show="current===index" :src="fileUrl+blackStar" class="mwto-star"></image>
|
||
</view>
|
||
</view>
|
||
<view class="mwt-two">
|
||
<view class="mwtt-num">
|
||
<u-count-to autoplay color="#ff4269" fontSize="110" bold
|
||
:startVal="startVal" :endVal="current===0? workForm.total:collectForm.total"></u-count-to>
|
||
<image :src="fileUrl+redStar" class="mwtt-star"></image>
|
||
</view>
|
||
<view class="mwtt-unit">
|
||
件{{ current===0? '作':'藏' }}品
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mw-content">
|
||
<u-waterfall class="show-work" v-model="current===0?workList:collectList" ref="uWaterfall">
|
||
<template v-slot:left="{leftList}">
|
||
<view @click="maskTouchend(item,index)" :title="item.type || '暂无'"
|
||
class="work-item" v-for="(item,index) in leftList" :key="index">
|
||
<u-lazy-load border-radius="30" class="work-picture"
|
||
:image="getImagePath(item.path)"></u-lazy-load>
|
||
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
|
||
<view class="sign-text">{{ item.type || '暂无' }}</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:right="{rightList}">
|
||
<view @click="maskTouchend(item,index)" :title="item.type || '暂无'"
|
||
class="work-item" v-for="(item,index) in rightList" :key="index">
|
||
<u-lazy-load border-radius="30" class="work-picture"
|
||
:image="getImagePath(item.path)"></u-lazy-load>
|
||
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
|
||
<view class="sign-text">{{ item.type || '暂无' }}</view>
|
||
</view>
|
||
</template>
|
||
</u-waterfall>
|
||
<!-- 下面这里等后端有了之后，用isFinish判断 -->
|
||
<view class="last-tip" :class="(current === 0 ? workForm.isFinish : collectForm.isFinish)?'':'clickable'" @click="getMore">
|
||
{{ (current === 0 ? workForm.isFinish : collectForm.isFinish) ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="work-big">
|
||
<view class="big-image" :class="Object.keys(selectItem).length !== 0 ? 'big-image-none' : ''">
|
||
<view v-if="Object.keys(selectItem).length !== 0" class="bi-show-image">
|
||
<view class="bi-hover">
|
||
<u-icon size="90" title="预览" :name="fileUrl+previewIcon" @click="handlePreview"></u-icon>
|
||
<u-icon size="90" title="下载" :name="fileUrl+downloadIcon" @click="handleDownload"></u-icon>
|
||
<u-icon size="90" title="发布" :name="fileUrl+publicIcon" @click="handlePublic" v-if="current===0"></u-icon>
|
||
<u-icon size="90" title="收藏" :name="fileUrl+collectIcon" @click="handleCollect" v-if="current===0"></u-icon>
|
||
<u-icon size="90" :title=" current===0?'删除':'取消收藏'" :name="fileUrl+deleteIcon" @click="handleDelete"></u-icon>
|
||
</view>
|
||
<image :src="getImagePath(selectItem.path)" mode="aspectFit" class="big-preview"></image>
|
||
</view>
|
||
<view class="big-image" v-else>
|
||
<image :src="fileUrl+sleep"></image>
|
||
<view class="none-tips">
|
||
暂无{{ current===0? '作':'藏' }}品，前往<text @click="$emit('changeService', '')">工作室</text>创作！
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import configService from '@/common/config.service.js';
|
||
import { tools } from '@/utils/utils.js';
|
||
export default {
|
||
data(){
|
||
return{
|
||
// 基础路径
|
||
fileUrl: configService.fileUrl + 'pixel/',
|
||
// 筛选项
|
||
selectList: ["我的创作", "我的藏品"],
|
||
// 顶部背景
|
||
topBackground: 'work/background.png',
|
||
// 选择黑星图片
|
||
blackStar: 'work/black-star.png',
|
||
// 选择白底图片
|
||
selectBottom: 'work/select-bottom.png',
|
||
// 选择红星
|
||
redStar: 'work/red-star.png',
|
||
// 标签图标
|
||
sign: 'home/typelam.png',
|
||
// 禁用pc端的缺省图
|
||
sleep: 'pc/sleep.png',
|
||
// 下载图标
|
||
downloadIcon: 'pc/workshops/download.png',
|
||
// 删除图标
|
||
deleteIcon: 'pc/workshops/delete.png',
|
||
// 预览图标
|
||
previewIcon: 'pc/workshops/preview.png',
|
||
// 发布图标
|
||
publicIcon: 'pc/workshops/public.png',
|
||
// 收藏图标
|
||
collectIcon: 'pc/workshops/collect.png',
|
||
// 数字滚动开始数字
|
||
startVal: 0,
|
||
// 屏幕高度
|
||
windowHeight: 0,
|
||
// 当前选项
|
||
current: 0,
|
||
// 收藏作品列表
|
||
collectList:[],
|
||
// 我的创作
|
||
workList:[],
|
||
// 我的创作Form
|
||
workForm: {
|
||
current: 1,
|
||
size: 10,
|
||
isFinish: true,
|
||
total: 0
|
||
},
|
||
// 我的收藏Form
|
||
collectForm: {
|
||
current: 1,
|
||
size: 10,
|
||
isFinish: true,
|
||
total: 0
|
||
},
|
||
// 选中图片
|
||
selectItem:{},
|
||
}
|
||
},
|
||
computed: {
|
||
// 切换栏选中样式
|
||
getSwitchItemStyle(){
|
||
return (index) => {
|
||
return this.current===index ? {backgroundImage: `url(${this.fileUrl+this.selectBottom})`,
|
||
color: `rgba(33,33,33,1)`}:{}
|
||
}
|
||
},
|
||
},
|
||
beforeMount() {
|
||
// 计算当前窗口高度
|
||
this.windowHeight = window.screen.height;
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
},
|
||
methods:{
|
||
// 切换选项
|
||
changeSelect(index){
|
||
this.current = index;
|
||
this.startVal = index===0?this.collectForm.total:this.workForm.total;
|
||
this.init();
|
||
},
|
||
// 初始化
|
||
init(){
|
||
this.$refs.uWaterfall.clear();
|
||
if(this.current){
|
||
this.collectList = [];
|
||
this.collectForm = {current: 1,size: 10,isFinish: false,total: 0};
|
||
this.getCollections();
|
||
}else{
|
||
this.workList = [];
|
||
this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
|
||
this.getMyWorks();
|
||
}
|
||
},
|
||
// 查看更多
|
||
getMore(){
|
||
if(this.current === 0 ? this.workForm.isFinish : this.collectForm.isFinish) return;
|
||
if(this.current === 0){
|
||
this.workForm.current++;
|
||
this.getMyWorks();
|
||
}else{
|
||
this.collectForm.current++;
|
||
this.getCollections();
|
||
}
|
||
},
|
||
// 获取我的创作
|
||
async getMyWorks(){
|
||
let that = this;
|
||
if(this.workForm.isFinish) return;
|
||
let res = await this.$api.myCreations(this.workForm);
|
||
if(res.success){
|
||
const { records, total, current, size } = res.data;
|
||
const result = records;
|
||
if(current === 1){
|
||
this.workList = result;
|
||
this.selectItem = result.length > 0 ? result[0] : {};
|
||
}else{
|
||
this.workList.push(...result);
|
||
}
|
||
this.workForm.total = total;
|
||
this.workForm.isFinish = current*size >= total;
|
||
}else{
|
||
this.$emit('toast',{type:'error',title: "我的创作获取失败!"});
|
||
}
|
||
},
|
||
// 获取我的藏品
|
||
async getCollections(){
|
||
let that = this;
|
||
if(this.collectForm.isFinish) return;
|
||
let res = await this.$api.getCollections(this.collectForm);
|
||
if(res.success){
|
||
const { records, total, current, size } = res.data;
|
||
const result = records;
|
||
if(current === 1){
|
||
this.collectList = result;
|
||
this.selectItem = result.length > 0 ? result[0] : {};
|
||
}else{
|
||
this.collectList.push(...result);
|
||
}
|
||
this.collectForm.total = total;
|
||
this.collectForm.isFinish = current*size >= total;
|
||
}else{
|
||
this.$emit('toast',{type:'error',title: "我的藏品获取失败!"});
|
||
}
|
||
},
|
||
// 图片格式化
|
||
getImagePath(path){
|
||
if(!path) return;
|
||
let index = path?.indexOf('?');
|
||
let judge = path?.includes(configService.anotherAliUrl);
|
||
return path?.includes('://') ? path.substring(0,(judge||!index||index===-1) ? path.length : index) : encodeURI(this.ip+path);
|
||
},
|
||
// 图片点击事件
|
||
maskTouchend(item,index){
|
||
this.selectItem = item;
|
||
},
|
||
// 图片预览
|
||
handlePreview(){
|
||
let item = this.selectItem;
|
||
const array = [this.getImagePath(item.path)];
|
||
if(item.sourcePath) array.push(this.getImagePath(item.sourcePath));
|
||
tools.methods.lookImage(0,array);
|
||
},
|
||
// 下载图片
|
||
handleDownload(){
|
||
window.open(this.getImagePath(this.selectItem.path));
|
||
},
|
||
// 删除图片——收藏/作品
|
||
handleDelete(){
|
||
let that = this;
|
||
let current = this.current===0;
|
||
let item = this.selectItem;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `是否确认${current?'删除':'取消收藏'}该作品？`,
|
||
confirmColor: '#94d500',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
let res = current ? await that.$api.deleteCreation(item.id) : await that.$api.deleteCollections(item.id);
|
||
if(res.success){
|
||
current ? that.workForm.total-- : that.collectForm.total--;
|
||
that.$refs.uWaterfall.remove(item.id);
|
||
that.selectItem = current ? that.workList[0] : that.collectList[0];
|
||
that.$forceUpdate();
|
||
that.$emit('toast',{type:'success',title: `已${current?'删除':'取消收藏'}该作品！`});
|
||
}else{
|
||
that.$emit('toast',{type:'error',title: `作品${current?'删除':'取消收藏'}失败！`});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 分享作品
|
||
handlePublic(){
|
||
let that = this;
|
||
let item = this.selectItem;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `作品分享需经过审核，审核期间可前往“我的-分享作品查看结果”，是否确认分享该作品？`,
|
||
confirmColor: '#94d500',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
let res = await that.$api.publicWork({
|
||
creationId: item.id,
|
||
});
|
||
if(res?.success){
|
||
that.$refs.uWaterfall.$forceUpdate();
|
||
that.$emit('toast',{type:'success',title: '作品上传分享成功！'});
|
||
}else{
|
||
that.$emit('toast',{type:'error',title: res?.errorMsg || '作品上传分享失败！'});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
// 收藏作品
|
||
handleCollect(){
|
||
let that = this;
|
||
let item = this.selectItem;
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: `是否确认收藏该作品？`,
|
||
confirmColor: '#94d500',
|
||
success: async (res) => {
|
||
if (res.confirm) {
|
||
let res = await that.$api.addCollections({
|
||
creationId: item.id,
|
||
});
|
||
if(res?.success){
|
||
that.$refs.uWaterfall.$forceUpdate();
|
||
that.$emit('toast',{type:'success',title: '作品收藏成功！'});
|
||
}else{
|
||
that.$emit('toast',{type:'error',title: res?.data || '作品收藏失败！'});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.pc-work{
|
||
background-image: linear-gradient(to left top, #ffffff, #fcfbfc, #f8f8f9, #f5f4f7, #f1f1f4, #eef0f6, #eaeff7, #e5eff8, #ddf3f9, #d9f6f2, #def7e6, #eef6d9);
|
||
margin-top: 20rpx;
|
||
min-height: 2050rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 40rpx 50rpx;
|
||
.work-images{
|
||
margin-left: 200rpx;
|
||
width: 900rpx;
|
||
height: 1620rpx;
|
||
background-color: #fff;
|
||
border-radius: 40rpx;
|
||
transition: 0.3s;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border: 2rpx solid #d5d5d5;
|
||
box-shadow: 0 0 20rpx #c6c6c6;
|
||
.mw-top{
|
||
width: 100%;
|
||
height: 350rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-size: cover;
|
||
.mwt-one{
|
||
margin-top: 65rpx;
|
||
display: flex;
|
||
.mwto-item{
|
||
font-size: 42rpx;
|
||
font-weight: bold;
|
||
color: rgba(33,33,33,0.8);
|
||
margin-left: 44rpx;
|
||
position: relative;
|
||
padding: 5rpx 10rpx;
|
||
background-size: contain;
|
||
background-repeat: no-repeat;
|
||
background-position: bottom;
|
||
background-size: 100%;
|
||
transition: 0.5s;
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.8;
|
||
}
|
||
&:active{
|
||
opacity: 0.6;
|
||
}
|
||
.mwto-star{
|
||
position: absolute;
|
||
right: -16rpx;
|
||
top: -7rpx;
|
||
width: 30rpx;
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
.mwt-two{
|
||
display: flex;
|
||
margin-left: 65rpx;
|
||
margin-top: 40rpx;
|
||
align-items: flex-end;
|
||
.mwtt-num{
|
||
font-weight: bolder;
|
||
margin-right: 20rpx;
|
||
position: relative;
|
||
.mwtt-star{
|
||
position: absolute;
|
||
right: -30rpx;
|
||
top: -10rpx;
|
||
width: 30rpx;
|
||
height: 34rpx;
|
||
}
|
||
}
|
||
.mwtt-unit{
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: rgba(33,33,33,0.8);
|
||
line-height: 90rpx;
|
||
}
|
||
}
|
||
}
|
||
.mw-content{
|
||
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||
z-index: 80;
|
||
flex: 1;
|
||
width: 100%;
|
||
margin-top: -35rpx;
|
||
border-top-right-radius: 36rpx;
|
||
border-top-left-radius: 36rpx;
|
||
background-color: #1a1929;
|
||
overflow-y: scroll;
|
||
.show-work{
|
||
margin: 20rpx 45rpx 0;
|
||
column-gap: 1em;
|
||
-moz-column-gap: 1em;
|
||
-webkit-column-gap: 1em;
|
||
.work-item{
|
||
-webkit-column-break-inside: avoid;
|
||
break-inside: avoid; /*防止断点*/
|
||
// margin-bottom: 0.5em;
|
||
position: relative;
|
||
padding-top: 30rpx;
|
||
&:hover{
|
||
.work-picture{
|
||
filter: drop-shadow(0 0 10rpx #d5ff00);
|
||
}
|
||
}
|
||
&:active{
|
||
opacity: 0.8;
|
||
}
|
||
.work-picture{
|
||
cursor: pointer;
|
||
border: 0.1em solid #d5ff00;
|
||
border-radius: 30rpx;
|
||
// 骗系统开启硬件加速
|
||
transform: transition3d(0, 0, 0);
|
||
// 防止图片加载“闪一下”
|
||
will-change: transform;
|
||
}
|
||
.sign{
|
||
border: none;
|
||
border-radius: 0;
|
||
position: absolute;
|
||
top: 1.7em;
|
||
left: 0.6em;
|
||
width: 186rpx;
|
||
height: 47rpx;
|
||
z-index: 1;
|
||
}
|
||
.sign-text{
|
||
width: 142rpx;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
position: absolute;
|
||
top: 1.8em;
|
||
left: 0.9em;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
}
|
||
.last-tip{
|
||
color: #d5ff00;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
.clickable{
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.8;
|
||
}
|
||
&:active{
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
&:hover{
|
||
box-shadow: 0 0 20rpx #8a8a8a;
|
||
}
|
||
}
|
||
.work-big{
|
||
flex: 1;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
border-radius: 40rpx;
|
||
.big-image{
|
||
width: 1350rpx;
|
||
height: 1350rpx;
|
||
background-color: #ffffff;
|
||
border: 4rpx dashed #99d7ff;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
transition: 0.3s;
|
||
overflow: hidden;
|
||
.bi-show-image{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.big-preview{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.bi-hover{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: rgba(0,0,0,0.5);
|
||
z-index: 1;
|
||
transition: 0.5s;
|
||
opacity: 0;
|
||
.u-icon{
|
||
margin: 0 30rpx;
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: 0.8;
|
||
}
|
||
&:active{
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.none-tips{
|
||
margin-top: 30rpx;
|
||
color: #9a702d;
|
||
font-size: 50rpx;
|
||
text{
|
||
cursor: pointer;
|
||
color: #53411e;
|
||
&:hover{
|
||
opacity: 0.8;
|
||
}
|
||
&:active{
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
&:hover{
|
||
box-shadow: 0 0 20rpx #d3d3d3;
|
||
.bi-hover{
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
.big-image-none{
|
||
background-color: #ffffff00;
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
</style> |