From b5296f1512c89fa840e8216191009ca9b79a39ed Mon Sep 17 00:00:00 2001 From: Double-_-Z <2492419643@qq.com> Date: Mon, 10 Feb 2025 11:23:43 +0800 Subject: [PATCH] =?UTF-8?q?pc=E7=AB=AF=E6=96=87=E7=94=9F=E5=9B=BE+?= =?UTF-8?q?=E9=80=89=E9=A1=B9=E7=94=9F=E5=9B=BE=EF=BC=9B=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E5=B7=A5=E4=BD=9C=E5=AE=A4=E4=B8=8B=E8=BD=BD=E7=BB=93?= =?UTF-8?q?=E6=9E=9C=E5=9B=BE=E9=94=99=E8=AF=AF=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- common/config.service.js | 8 +- pages/mobile_web/workshops/index.vue | 3 + pages/pc_web/home/components/second.vue | 2 +- pages/pc_web/index/index.vue | 8 +- pages/pc_web/workshops/components/editor.vue | 32 +- pages/pc_web/workshops/workshops.vue | 405 ++++++++++++++++--- 6 files changed, 390 insertions(+), 68 deletions(-) diff --git a/common/config.service.js b/common/config.service.js index c26c834..f1b8285 100644 --- a/common/config.service.js +++ b/common/config.service.js @@ -4,12 +4,12 @@ let BASE_URL = '/pixelApi'; // #endif // #ifdef APP-PLUS ||MP -// let BASE_URL = 'http://8.138.171.103/pixelApi';// 测试环境 -let BASE_URL = 'https://www.ylemai.cn/pixelApi';// 正式环境 +let BASE_URL = 'http://8.138.171.103/pixelApi';// 测试环境 +// let BASE_URL = 'https://www.ylemai.cn/pixelApi';// 正式环境 // #endif -// let IP = 'http://8.138.171.103/';// 测试环境 -let IP = 'https://www.ylemai.cn/';// 正式环境 +let IP = 'http://8.138.171.103/';// 测试环境 +// let IP = 'https://www.ylemai.cn/';// 正式环境 let FILE_URL = IP+'static/'; // 阿里OSS地址 let ALIOSS_URL = 'http://guojunjie.oss-cn-hangzhou.aliyuncs.com'; diff --git a/pages/mobile_web/workshops/index.vue b/pages/mobile_web/workshops/index.vue index 56bc7e1..4ac31e8 100644 --- a/pages/mobile_web/workshops/index.vue +++ b/pages/mobile_web/workshops/index.vue @@ -766,6 +766,9 @@ export default { filePath: res.tempFilePath, //临时路径 success: function(resp) { that.$refs.uToast.show({type:'success',title: "下载成功,请前往手机相册查看!"}); + }, + fail: function(err) { + that.$refs.uToast.show({type:'error',title: "暂不支持下载,请长按保存!"}); } }); }else{ diff --git a/pages/pc_web/home/components/second.vue b/pages/pc_web/home/components/second.vue index 01a838c..f68d199 100644 --- a/pages/pc_web/home/components/second.vue +++ b/pages/pc_web/home/components/second.vue @@ -24,7 +24,7 @@ + font-size="50" @click="$emit('handleChangeService')"/> diff --git a/pages/pc_web/index/index.vue b/pages/pc_web/index/index.vue index 6f2aa1b..d0a0bb9 100644 --- a/pages/pc_web/index/index.vue +++ b/pages/pc_web/index/index.vue @@ -1,6 +1,6 @@ diff --git a/pages/pc_web/workshops/components/editor.vue b/pages/pc_web/workshops/components/editor.vue index aad35d5..100ae91 100644 --- a/pages/pc_web/workshops/components/editor.vue +++ b/pages/pc_web/workshops/components/editor.vue @@ -15,7 +15,7 @@ + color: '#3f3f3f'}" placeholderStyle="color:#7f7c86" @input="input"/> @@ -109,9 +109,10 @@ export default { align-items: center; .u-icon{ margin-right: 24rpx; + filter: drop-shadow(0 0 2rpx #00a66f); } .slot{ - color: #fff; + color: #84878c; font-size: 32rpx; font-weight: bold; } @@ -119,18 +120,27 @@ export default { .wet-right{ color: #d5ff00; margin-right: 5rpx; + filter: drop-shadow(0 0 4rpx #00a66f); .u-icon{ font-size: 25rpx; + cursor: pointer; + &:hover{ + opacity: 0.8; + } + &:active{ + opacity: 0.6; + } } } } .we-content{ margin: 20rpx 0; // max-height: 150rpx; - background: #2a233d; + background: #fff; border-radius: 30rpx; padding: 30rpx 30rpx 20rpx; - box-shadow: 0 0 8rpx #eee; + border: 2rpx solid #bcc1c8; + box-shadow: 0 0 10rpx #eee; position: relative; .u-input{ height: 170rpx; @@ -139,7 +149,16 @@ export default { display: flex; align-items: center; justify-content: flex-end; - text-shadow: 0 0 4rpx #7f7c86; + text-shadow: 0 0 4rpx #abafb6; + .u-icon{ + cursor: pointer; + &:hover{ + opacity: 0.8; + } + &:active{ + opacity: 0.6; + } + } } .we-loading{ position: absolute; @@ -153,6 +172,9 @@ export default { justify-content: center; background-color: rgba(254,254,254,0.3); } + &:hover{ + border-color: #8c9095; + } } } \ No newline at end of file diff --git a/pages/pc_web/workshops/workshops.vue b/pages/pc_web/workshops/workshops.vue index 6c2995e..ecc5fef 100644 --- a/pages/pc_web/workshops/workshops.vue +++ b/pages/pc_web/workshops/workshops.vue @@ -23,12 +23,45 @@ - + - 使用提示：{{ serviceItem.tips || '智能创作~' }} + + + + + + + + + + + + + + {{ item.name }} + + + + + + + + + + {{ item.optionName }} + + + + Tips：{{ serviceItem.tips || '智能创作~' }} @@ -61,7 +94,7 @@ - 点击 / 拖拽上传图片 @@ -85,6 +118,12 @@ + + 进度 + + {{ dealPercent }}% + + 失败原因：{{ errorTips }} @@ -148,8 +187,11 @@ export default { fileList: [], uploadFile: '',// 上传图片 resultFile: '',// 结果图 - text: '',// 提示词 }, + // 元素选择下标 + selectElementIndex: '', + // 弹窗显示更多选项 + showMoreOptions: false, // 进度条 dealPercent: 0, // 进度条计时器 @@ -160,6 +202,25 @@ export default { asyncResult: false, // 生成失败提示词 errorTips: '', + // 尺寸选择下标 + selectSizeIndex: '', + // 火山尺寸列表——文生图 + 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" }, + ] } }, beforeMount() { @@ -172,6 +233,14 @@ export default { this.getRangeImages(); this.getServices(); }, + computed: { + // 获取一般展示页选项——8个最多 + getOptions(){ + let options = this.serviceItem.options; + const length = this.serviceItem.options.length; + return length > 8 ? options.slice(0,8) : options; + }, + }, methods: { // 获取服务筛选列表 async getServices(){ @@ -214,6 +283,30 @@ export default { }, // 更换服务 changeWork(item,index){ + let that = this; + // 判断是否正在生成图片 + if(this.asyncPollTime !== -1){ + uni.showModal({ + title: '提示', + content: `图片生成中，是否确认进行其他服务？`, + confirmColor: '#94d500', + success: (res) => { + if (res.confirm){ + that.realRedraw(); + that.realChangeWork(item, index); + } + } + }); + // 这里如果存在结果图才执行重绘清除 + } else if(this.formData.resultFile || Number(item.type) === this.serviceItem.type){ + this.realRedraw(); + this.realChangeWork(item, index); + } else { + this.realChangeWork(item, index); + } + }, + // 真正执行更换服务操作 + realChangeWork(item,index){ if(this.serviceId === item.id) return; this.serviceId = item.id; this.$emit('changeService',item.id); @@ -246,6 +339,18 @@ export default { } } }, + // 图片格式化 + getTypeImage(path){ + if(path === null || path === ''){ + return '/static/default-select.png'; + }else if(path.startsWith("http")){ + return path; + }else if(path.startsWith("/")){ + return encodeURI(path); + }else{ + return encodeURI(this.ip+path); + } + }, // 上传图片 selectImage(file,uploadFiles){ let that = this; @@ -270,33 +375,28 @@ export default { const currentType = this.serviceItem.type; if(currentType !== 3 && currentType !== 1 && this.formData.uploadFile === ''){ this.$refs.uToast.show({type:'error',title: currentType === 4 ? "请选择模特！" : "请上传图片!"}); - // this.dotLoading = false; return false; } - // if(currentType === 1){ - // if(this.selectElementIndex === '' || !this.form.text){ - // this.$refs.uToast.show({type:'error',title: "请完善信息!"}); - // // this.dotLoading = false; - // return false; - // } - // } - // if(currentType === 2 && this.selectElementIndex === ''){ - // this.$refs.uToast.show({type:'error',title: "请选择图片元素!"}); - // // this.dotLoading = false; - // return false; - // } - // if(currentType === 3){ - // if(this.selectElementIndex === '' || !this.form.text || !this.form.promt){ - // this.$refs.uToast.show({type:'error',title: "请完善信息!"}); - // // this.dotLoading = false; - // return false; - // } - // } + if(currentType === 1){ + if(this.selectElementIndex === '' || !this.serviceItem.text){ + this.$refs.uToast.show({type:'error',title: "请完善信息!"}); + return false; + } + } + if(currentType === 2 && this.selectElementIndex === ''){ + this.$refs.uToast.show({type:'error',title: "请选择图片元素!"}); + return false; + } + if(currentType === 3){ + if(this.selectElementIndex === '' || !this.serviceItem.text || !this.serviceItem.promt){ + this.$refs.uToast.show({type:'error',title: "请完善信息!"}); + return false; + } + } // if(currentType === 4){ // const { bottomImageUrl, topImageUrl } = this.$refs.dressRef.form; // if(topImageUrl===''){ // this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"}); - // // this.dotLoading = false; // return false; // } // } @@ -363,7 +463,10 @@ export default { let image = this.rangeImageList[num]?.path; this.formData.resultFile = length>0 ? (image.startsWith("http") ? image : encodeURI(this.ip+image)) : path; - this.formData.fileList[0].url = this.formData.resultFile; + if(this.formData.fileList[0]) + this.formData.fileList[0].url = this.formData.resultFile; + else this.formData.fileList = [{url: this.formData.resultFile}]; + this.uploadDisabled = true; }, // 获取参数值 getParams({id, type, options, text, promt}){ @@ -375,29 +478,29 @@ export default { imageUrl: that.formData.uploadFile, } break; - // case 1 : - // result = { - // serviceId: id, - // option: options[that.selectElementIndex].optionKey, - // text: text, - // } - // if(this.selectSizeIndex !== '') result.size = that.form.id === 4 ? that.aliDimensions[that.selectSizeIndex].name : that.volcengineDimensions[that.selectSizeIndex].name; - // break; - // case 2 : - // result = { - // serviceId: id, - // imageUrl: that.uploadFile, - // option: options[that.selectElementIndex].optionKey - // } - // break; - // case 3 : - // result = { - // serviceId: id, - // option: options[that.selectElementIndex].optionKey, - // text: text, - // promt: promt - // } - // break; + case 1 : + result = { + serviceId: id, + option: options[that.selectElementIndex].optionKey, + text: text, + } + if(this.selectSizeIndex !== '') result.size = that.serviceId === 4 ? that.aliDimensions[that.selectSizeIndex].name : that.volcengineDimensions[that.selectSizeIndex].name; + break; + case 2 : + result = { + serviceId: id, + imageUrl: that.formData.uploadFile, + option: options[that.selectElementIndex].optionKey + } + break; + case 3 : + result = { + serviceId: id, + option: options[that.selectElementIndex].optionKey, + text: text, + promt: promt + } + break; // case 4 : // const { bottomImageUrl, topImageUrl } = this.$refs.dressRef.form; // result = { @@ -475,12 +578,17 @@ export default { handleDelete(){ this.$refs.uploadCover.clearFiles(); this.formData.fileList = []; + this.formData.uploadFile = ''; setTimeout(()=>{ this.uploadDisabled = false; },400); }, // 下载图片 download(){ + if(!this.asyncResult){ + this.$refs.uToast.show({type:'error',title: "图片生成失败，请重试!"}); + return; + } window.open(this.formData.resultFile); }, // 重新绘制 @@ -501,6 +609,10 @@ export default { this.handleDelete(); this.formData.resultFile = ''; this.formData.uploadFile = ''; + delete this.serviceItem.text; + delete this.serviceItem.promt; + this.selectElementIndex = ''; + this.selectSizeIndex = ''; // if(this.form.type === 4) this.$refs.dressRef.resetForm(); this.errorTips = ''; this.asyncPollTime = -1; @@ -511,7 +623,15 @@ export default { if(this.asyncPollTime !== -1){ this.setResultFile(); } - } + }, + // 元素选择 + selectElement(index){ + this.selectElementIndex = this.selectElementIndex === index ? '' : index; + }, + // 尺寸选择 + selectSize(index){ + this.selectSizeIndex = this.selectSizeIndex === index ? '' : index; + }, } } @@ -572,7 +692,7 @@ export default { .controls-right{ flex: 1; height: 100%; - background-color: rgba(248,248,248,0.7); + // background-color: rgba(248,248,248,0.7); display: flex; flex-direction: column; .control-top{ @@ -599,13 +719,159 @@ export default { .control-center{ flex: 1; overflow-y: scroll; - // background-color: #99d7ff; + background-color: rgba(248,248,248,0.7); padding: 40rpx; display: flex; flex-direction: column; + position: relative; + .cc-edit{ + margin-bottom: 40rpx; + .art-input{ + margin: 20rpx 0 10rpx; + border-radius: 20rpx; + box-shadow: 0 0 10rpx #d0d6dd; + border: 2rpx solid #858585; + } + .dimensional-drawing{ + width: 710rpx; + height: 180rpx; + margin-top: 20rpx; + margin-bottom: 30rpx; + display: flex; + padding: 0 10rpx 0 0; + overflow-x: scroll; + .dimensional-item{ + min-width: 160rpx; + height: 100%; + padding: 0 0 18rpx; + background-color: #eff0f4; + border-radius: 20rpx; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-end; + color: #b3a0da; + margin-right: 30rpx; + cursor: pointer; + + &:nth-last-child(1){ + margin-right: 0; + } + + text{ + width: 100%; + text-align: center; + margin-top: 20rpx; + } + + view{ + opacity: 0.7; + border-radius: 10rpx; + width: 54rpx; + border: 6rpx solid #aea4ee; + aspect-ratio: 1/1; + } + + &:hover{ + border: 2rpx solid #b3a0da; + view{ + opacity: 1; + box-shadow: 0 0 8rpx #aea4ee; + } + text{ + text-shadow: 0 0 2rpx #aea4ee; + } + } + } + .dimensional-item-select{ + border: 2rpx solid #b3a0da; + view{ + opacity: 1; + box-shadow: 0 0 8rpx #aea4ee; + } + text{ + text-shadow: 0 0 2rpx #aea4ee; + } + } + } + .section-options{ + // margin-top: 40rpx; + display: grid; + grid-gap: 26rpx; + grid-template-columns: repeat(4,1fr); + margin-top: 20rpx; + margin-bottom: 30rpx; + + .section-tags{ + height: 200rpx; + width: 150rpx; + background-color: #ebecef; + border-radius: 20rpx; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + color: #b3a0da; + cursor: pointer; + + text{ + width: 90%; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + } + + image{ + opacity: 0.7; + border-radius: 20rpx; + width: 130rpx; + height: 130rpx; + } + + &:hover{ + border: 2rpx solid #b3a0da; + image{ + opacity: 1; + } + } + } + + .section-tags-select{ + border: 2rpx solid #b3a0da; + image{ + opacity: 1; + } + } + } + ::v-deep .u-section__right-info{ + cursor: pointer; + &:hover{ + opacity: 0.8; + } + &:active{ + opacity: 0.6; + } + } + } .use-tips{ + margin: -10rpx; + border-radius: 20rpx; font-size: 30rpx; - color: #6b6b6b; + color: #101010; + background-color: #eff0f4; + padding: 30rpx; + font-weight: bold; + transition: 0.3s; + .uset-content{ + color: #6b6b6b; + font-weight: normal; + margin-top: 20rpx; + padding-left: 20rpx; + } + &:hover{ + box-shadow: 0 0 10rpx #b3b4b6; + } } } .control-bottom{ @@ -693,6 +959,7 @@ export default { display: flex; align-items: center; justify-content: center; + flex-direction: column; .upload-view{ border: 4rpx dashed #99d7ff; border-radius: 40rpx; @@ -768,6 +1035,36 @@ export default { } } } + .tip-progress{ + margin: 20rpx 0 -50rpx; + display: flex; + align-items: center; + width: 50%; + .progress-title{ + margin-right: 20rpx; + white-space: nowrap; + } + .progress-deal{ + margin-left: 20rpx; + } + text{ + background-image: linear-gradient(to right, #d3e7e7 0%, #a7b6b8 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + ::v-deep .u-active{ + border-top-right-radius: 100rpx; + border-bottom-right-radius: 100rpx; + box-shadow: 0 0 20rpx #d3e7e7; + background: linear-gradient(to right, #96a3a5 0%, #d3e7e7 100%); + } + } + .error-tips{ + font-size: 30rpx; + color: rgba(229, 64, 70, 1); + margin: 20rpx 0 -50rpx; + } } } ::v-deep .el-popper[x-placement^=top]{