diff --git a/common/http.api.js b/common/http.api.js index ee6223f..5f8d14b 100644 --- a/common/http.api.js +++ b/common/http.api.js @@ -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查询单个图片 diff --git a/pages/mobile_web/home/home.vue b/pages/mobile_web/home/home.vue index f775924..ffd25ea 100644 --- a/pages/mobile_web/home/home.vue +++ b/pages/mobile_web/home/home.vue @@ -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) + // 暂时只能预览,不收藏 + const array = [this.getWorkPath(item.path)]; + if(item.sourcePath) array.push(this.getWorkPath(item.sourcePath)); + tools.methods.lookImage(0,array); + // 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(){ diff --git a/pages/mobile_web/my/child_pages/recharge.vue b/pages/mobile_web/my/child_pages/recharge.vue index 83612ec..fedbb68 100644 --- a/pages/mobile_web/my/child_pages/recharge.vue +++ b/pages/mobile_web/my/child_pages/recharge.vue @@ -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(); }, } diff --git a/pages/mobile_web/work/work.vue b/pages/mobile_web/work/work.vue index a45ff89..c89b7c6 100644 --- a/pages/mobile_web/work/work.vue +++ b/pages/mobile_web/work/work.vue @@ -38,27 +38,29 @@ @@ -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}; - this.collectForm = {current: 1,size: 10,isFinish: false,total: 0}; - this.current === 0 ? this.getMyWorks() : this.getCollections(); - // this.$api.getReleases(); + 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(){ @@ -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; + } +} \ No newline at end of file diff --git a/pages/mobile_web/workshops/index.vue b/pages/mobile_web/workshops/index.vue index 8aef432..75c3184 100644 --- a/pages/mobile_web/workshops/index.vue +++ b/pages/mobile_web/workshops/index.vue @@ -84,6 +84,18 @@ v-model="form.text" placeholder="请输入描述的提示词(限制300词)~~" rightIcon="question-circle" rightTip="使用教程" :rightIconClick="showTutorial" @strengthenTip="strengthenTip"/> + + + + + + + {{ item.name }} + + + + @@ -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;