hjq/PixelAI-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整工作台，作品墙完善收藏，首页移除双击收藏

Browse Source
This commit is contained in:
Double-_-Z 2025-01-23 15:49:15 +08:00
parent e54086988e
commit ec5fafe662
5 changed files with 249 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
common/http.api.js
View File

@ -29,6 +29,11 @@ const install = (Vue, vm) => {
// 推荐作品管理
vm.$api.getRecommend = async (params = {}) => await vm.$u.get('/paRecommend', params);// 首页推荐作品查询
// 作品收藏管理
vm.$api.getCollections = async (params = {}) => await vm.$u.get('/paCollection', params);// 收藏作品查询
vm.$api.addCollections = async (params = {}) => await vm.$u.post('/paCollection', params);// 收藏作品
vm.$api.deleteCollections = async (id) => await vm.$u.delete(`/paCollection/${id}`);// 删除收藏作品
// 图片管理
vm.$api.getCpPhotoById = async (params = {}) => await vm.$u.get('/cpPhoto/all', params);// 根据标签id查询全部图片
vm.$api.singlePhotoById = async (id) => await vm.$u.get(`/cpPhoto/${id}`);// 根据图片id查询单个图片

54
pages/mobile_web/home/home.vue
View File

@ -276,34 +276,38 @@ export default {
},
// 监听单双击，单击-预览图片、双击-收藏
maskTouchend(item){
this.touchNum ++;
setTimeout(()=>{
if(this.touchNum == 1){
// 暂时只能预览，不收藏
const array = [this.getWorkPath(item.path)];
if(item.sourcePath) array.push(this.getWorkPath(item.sourcePath));
tools.methods.lookImage(0,array);
}
if(this.touchNum >= 2){
// 若collect为null，默认没收藏，那接下来就是收藏操作
const result = item.collect ? (item.collect+1)%2 : 1;
if(result === 0){
// 添加淡出的class样式
item.display = 1;
this.$refs.uWaterfall.$forceUpdate();
// 下面的操作应该替换为请求后端数据后，再停止动画
// 模拟操作，这里用setTimeout模拟
setTimeout(() => {
// 移除淡出类
item.display = 0;
item.collect = result;
}, 1000); // 假设操作需要1秒
}else{
item.collect = result;
this.$refs.uWaterfall.$forceUpdate();
}
}
this.touchNum = 0;
},250)
// this.touchNum ++;
// setTimeout(()=>{
// if(this.touchNum == 1){
// const array = [this.getWorkPath(item.path)];
// if(item.sourcePath) array.push(this.getWorkPath(item.sourcePath));
// tools.methods.lookImage(0,array);
// }
// if(this.touchNum >= 2){
// // 若collect为null，默认没收藏，那接下来就是收藏操作
// const result = item.collect ? (item.collect+1)%2 : 1;
// if(result === 0){
// // 添加淡出的class样式
// item.display = 1;
// this.$refs.uWaterfall.$forceUpdate();
// // 下面的操作应该替换为请求后端数据后，再停止动画
// // 模拟操作，这里用setTimeout模拟
// setTimeout(() => {
// // 移除淡出类
// item.display = 0;
// item.collect = result;
// }, 1000); // 假设操作需要1秒
// }else{
// item.collect = result;
// this.$refs.uWaterfall.$forceUpdate();
// }
// }
// this.touchNum = 0;
// },250)
},
// 前往作品墙
toWall(){

14
pages/mobile_web/my/child_pages/recharge.vue
View File

@ -186,17 +186,9 @@
},
// 初始化
init(){
this.form = {size: 10,current: 1};
// let { createtime } = JSON.parse(this.$store.state.user_message);
// this.rechargeList = [{
// id: -1,
// type: '充值钻石',
// addOrSub: 'add',
// value: '1000',
// createtime: createtime,
// description: '新用户注册，赠送1000钻石。'
// }];
// this.total = 1;
const { id } = JSON.parse(this.$store.state.user_message);
if(!id) return;
this.form = {size: 10,current: 1,memberId: id};
this.getRechargeList();
},
}

147
pages/mobile_web/work/work.vue
View File

@ -38,27 +38,29 @@
<u-waterfall class="show-work" v-model="current===0?workList:collectList" ref="uWaterfall">
<template v-slot:left="{leftList}">
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in leftList" :key="item.id">
<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.mask" @click.stop="deleteCollect(item,index)"></image>
<u-lazy-load border-radius="30" class="work-picture"
:image="getImagePath(item.path)"></u-lazy-load>
<view class="sign-text">{{ item.type || '暂无' }}</view>
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask">
<button v-if="!current" class="mask-public" @click.stop="publicWork(item,index)">发布</button>
<button class="mask-delete" @click.stop="deleteCollect(item,index)">删除</button>
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
<button class="mask-collect" @click.stop="toCollect(item,index)">收藏</button>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view @click="maskTouchend(item,index)" class="work-item" v-for="(item,index) in rightList" :key="item.id">
<image class="trash" :class="item.display ? 'hideTrash' : ''" :src="fileUrl+trash" v-show="item.mask" @click.stop="deleteCollect(item,index)"></image>
<u-lazy-load border-radius="30" class="work-picture"
:image="getImagePath(item.path)"></u-lazy-load>
<view class="sign-text">{{ item.type || '暂无' }}</view>
<image :lazy-load="true" class="sign" :src="fileUrl+sign"></image>
<!-- <image class="compare-sign" mode="widthFix" :src="item.compare"></image> -->
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask">
<button v-if="!current" class="mask-public" @click.stop="publicWork(item,index)">发布</button>
<button class="mask-delete" @click.stop="deleteCollect(item,index)">删除</button>
<view class="item-mask" :class="item.display ? 'hideMask' : ''" v-show="item.mask" v-if="!current">
<button class="mask-public" @click.stop="publicWork(item,index)">发布</button>
<button class="mask-collect" @click.stop="toCollect(item,index)">收藏</button>
</view>
</view>
</template>
@ -105,9 +107,9 @@ export default {
blackStar: 'work/black-star.png',
// 选择白底图片
selectBottom: 'work/select-bottom.png',
// 选择白底图片
// 选择红星
redStar: 'work/red-star.png',
// 选择白底图片
// 删除——垃圾桶
trash: 'work/trash.png',
// 当前选项
current: 0,
@ -155,12 +157,16 @@ export default {
methods:{
// 初始化
async init(){
this.current === 0 ? this.workList = [] : this.collectList = [];
this.$refs.uWaterfall.clear();
this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
if(this.current){
this.collectList = [];
this.collectForm = {current: 1,size: 10,isFinish: false,total: 0};
this.current === 0 ? this.getMyWorks() : this.getCollections();
// this.$api.getReleases();
this.getCollections();
}else{
this.workList = [];
this.workForm = {current: 1,size: 10,isFinish: false,total: 0};
this.getMyWorks();
}
},
// 查看更多
getMore(){
@ -180,9 +186,6 @@ export default {
if(res.success){
const { records, total, current, size } = res.data;
const result = records;
// .map((item)=>{
// return {...item, path: item.path}
// });
if(current === 1){
this.workList = result
}else{
@ -190,14 +193,29 @@ export default {
}
this.workForm.total = total;
this.workForm.isFinish = current*size >= total;
this.$forceUpdate();
// this.$forceUpdate();
}else{
this.$refs.uToast.show({type:'error',title: "我的创作获取失败!"});
}
},
// 获取我的藏品
getCollections(){
this.collectForm.isFinish = true;
async getCollections(){
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
}else{
this.collectList.push(...result);
}
this.collectForm.total = total;
this.collectForm.isFinish = current*size >= total;
// this.$forceUpdate();
}else{
this.$refs.uToast.show({type:'error',title: "我的藏品获取失败!"});
}
},
// 图片格式化
getImagePath(path){
@ -207,9 +225,35 @@ export default {
},
// 切换选项
changeSelect(index){
this.$refs.uWaterfall.clear();
// this.$refs.uWaterfall.clear();
this.current = index;
this.startVal = index===0?this.collectForm.total:this.workForm.total;
this.init();
},
// 收藏作品
toCollect(item, index){
let that = this;
uni.showModal({
title: '提示',
content: `是否确认收藏该作品？`,
confirmColor: '#94d500',
success: async (res) => {
if (res.confirm) {
let res = await that.$api.addCollections({
creationId: item.id,
});
if(res?.success){
// 关掉蒙层
item.mask = 0;
item.display = 0;
that.$refs.uWaterfall.$forceUpdate();
that.$refs.uToast.show({type:'success',title: '作品收藏成功！'});
}else{
that.$refs.uToast.show({type:'error',title: res?.data || '作品收藏失败！'});
}
}
}
});
},
// 监听单双击，单击-预览图片、双击-显示删除图标
maskTouchend(item,index){
@ -272,7 +316,7 @@ export default {
// 关掉蒙层
item.mask = 0;
item.display = 0;
this.$refs.uWaterfall.$forceUpdate();
that.$refs.uWaterfall.$forceUpdate();
that.$refs.uToast.show({type:'success',title: '作品上传分享成功！'});
}else{
that.$refs.uToast.show({type:'error',title: res?.errorMsg || '作品上传分享失败！'});
@ -291,7 +335,7 @@ export default {
confirmColor: '#94d500',
success: async (res) => {
if (res.confirm) {
let res = await that.$api.deleteCreation(item.id);
let res = current ? await that.$api.deleteCreation(item.id) : await that.$api.deleteCollections(item.id);
if(res.success){
// current ? that.workList.splice(index, 1) : this.collectList.splice(index, 1);
current ? that.workForm.total-- : that.collectForm.total--;
@ -440,6 +484,23 @@ export default {
left: 0.9em;
z-index: 2;
}
.trash{
animation-duration: 0.8s;
animation-fill-mode: both;
backface-visibility: visible !important;
animation-name: showTrash;
width: 100rpx;
height: 110rpx;
position: absolute;
right: -22rpx;
margin-top: -30rpx;
z-index: 1;
}
.hideTrash {
animation-duration: calc(1s * 0.75);
backface-visibility: visible !important;
animation-name: hideTrash;
}
.compare-sign{
position: absolute;
left: 0;
@ -485,8 +546,8 @@ export default {
.mask-public{
background: linear-gradient(to right,#853ade 0%, #d450da 100%);
}
.mask-delete{
background-color: rgba(41, 38, 37, 0.8);
.mask-collect{
background: linear-gradient(to right,rgba(65, 222, 70, 0.8) 0%, rgba(191, 218, 133, 0.8) 100%);
}
}
}
@ -518,4 +579,44 @@ export default {
opacity: 0;
}
}
@keyframes showTrash {
from {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
transform: perspective(400px);
}
}
@keyframes hideTrash {
from {
transform: perspective(400px);
}
30% {
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
</style>

87
pages/mobile_web/workshops/index.vue
View File

@ -84,6 +84,18 @@
v-model="form.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle"
rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/>
</view>
<view class="mw-editor" v-if="!resultFile && form.type===1">
<u-section title="尺寸选择" color="#fff" :right="false" lineColor="#c2ea04" fontSize="34" />
<scroll-view scroll-x>
<view class="dimensional-drawing">
<view class="dimensional-item" v-for="(item,index) in (form.id === 4 ? aliDimensions : volcengineDimensions)" :key="index"
:class="selectSizeIndex===index?'dimensional-item-select':''" @click="selectSize(index)">
<view :style="{ aspectRatio: item.value }"></view>
<text>{{ item.name }}</text>
</view>
</view>
</scroll-view>
</view>
<!-- 提示文字 -->
<view class="mw-editor" v-if="!resultFile && form.type===3">
@ -259,6 +271,8 @@ export default {
dotLoading: false,
// 元素选择下标
selectElementIndex: '',
// 尺寸选择下标
selectSizeIndex: '',
// 弹窗显示更多选项
showMoreOptions: false,
// 按钮禁用
@ -274,7 +288,24 @@ export default {
// 进度条计时器
dealPercentTimer: 1,
// 生成失败提示词
errorTips: ''
errorTips: '',
// 火山尺寸列表——文生图
volcengineDimensions: [
{ name: "512*512", value: "1/1" },
{ name: "512*384", value: "4/3" },
{ name: "384*512", value: "3/4" },
{ name: "512*341", value: "3/2" },
{ name: "341*512", value: "2/3" },
{ name: "512*288", value: "16/9" },
{ name: "288*512", value: "9/16" },
],
// 阿里尺寸列表——文生图
aliDimensions: [
{ name: "1024*1024", value: "1/1" },
{ name: "720*1280", value: "9/16" },
{ name: "768*1152", value: "2/3" },
{ name: "1280*720", value: "16/9" },
]
}
},
// #ifndef H5
@ -592,7 +623,9 @@ export default {
serviceId: id,
option: options[that.selectElementIndex].optionKey,
text: text,
size: that.form.id === 4 ? that.aliDimensions[that.selectSizeIndex].name : that.volcengineDimensions[that.selectSizeIndex].name
}
if(this.selectSizeIndex === '') delete result.size;
break;
case 2 :
result = {
@ -801,8 +834,10 @@ export default {
// 元素选择
selectElement(index){
this.selectElementIndex = this.selectElementIndex === index ? '' : index;
// this.form.options[index];
},
// 尺寸选择
selectSize(index){
this.selectSizeIndex = this.selectSizeIndex === index ? '' : index;
},
}
}
@ -1003,6 +1038,52 @@ export default {
background-color: rgba(236,245,255,1);
}
}
.dimensional-drawing{
height: 180rpx;
margin-top: 40rpx;
display: flex;
.dimensional-item{
min-width: 160rpx;
height: 100%;
padding: 0 20rpx 18rpx;
background-color: #2a243d;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
color: #b3a0da;
margin-right: 30rpx;
&:nth-last-child(1){
margin-right: 0;
}
text{
width: 100%;
text-align: center;
margin-top: 20rpx;
}
view{
opacity: 0.7;
border-radius: 10rpx;
width: 60rpx;
border: 4rpx solid #aea4ee;
aspect-ratio: 1/1;
}
}
.dimensional-item-select{
border: 2rpx solid #ff55f5;
view{
opacity: 1;
box-shadow: 0 0 10rpx #aea4ee;
}
text{
text-shadow: 0 0 2rpx #aea4ee;
}
}
}
}
.workshops-tip{
margin-top: 50rpx;