From 05bdd90f1954092fc77d704ce8613b57e1c5cff4 Mon Sep 17 00:00:00 2001 From: Double-_-Z <2492419643@qq.com> Date: Tue, 18 Feb 2025 11:53:32 +0800 Subject: [PATCH] =?UTF-8?q?pc=E7=AB=AF=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main.js | 2 + package.json | 3 +- pages/mobile_web/index/index.vue | 6 +- pages/mobile_web/recharge/detail.vue | 4 +- pages/mobile_web/recharge/recharge.vue | 4 +- pages/mobile_web/workshops/index.vue | 4 +- pages/pc_web/home/components/second.vue | 81 +++++++++++++------ pages/pc_web/home/home.vue | 12 +-- pages/pc_web/index/components/header.vue | 41 +++++++--- .../index/components/identityDialog.vue | 26 +++--- pages/pc_web/index/index.vue | 17 ++-- pages/pc_web/workshops/workshops.vue | 45 +++++------ 12 files changed, 153 insertions(+), 92 deletions(-) diff --git a/main.js b/main.js index aa8c22a..e822f7e 100644 --- a/main.js +++ b/main.js @@ -13,6 +13,8 @@ Vue.use(uView); // #ifdef H5 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' +import VueMasonry from 'vue-masonry-css' +Vue.use(VueMasonry); Vue.use(ElementUI) // #endif diff --git a/package.json b/package.json index 3ca383b..5eb33df 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { - "element-ui": "^2.15.14" + "element-ui": "^2.15.14", + "vue-masonry-css": "^1.0.3" } } diff --git a/pages/mobile_web/index/index.vue b/pages/mobile_web/index/index.vue index 8d53eed..56cc6ee 100644 --- a/pages/mobile_web/index/index.vue +++ b/pages/mobile_web/index/index.vue @@ -75,7 +75,7 @@ export default { // #endif this.scrollTop = e.scrollTop; }, - // #ifdef MP + // #ifdef MP || APP onLoad(){ let index = uni.getStorageSync('current'); this.current = index?index:0; @@ -91,12 +91,12 @@ export default { let index = uni.getStorageSync('current'); this.current = index?index:0; this.isLogin = this.$store.state.vuex_token; - // #ifdef MP + // #ifdef MP || APP if(this.current === 2){ this.changeCurrent(this.current); } // #endif - // #ifndef MP + // #ifndef MP || APP if(this.current === 1){ uni.pageScrollTo({scrollTop: 0}); } diff --git a/pages/mobile_web/recharge/detail.vue b/pages/mobile_web/recharge/detail.vue index 707e30f..d9f899a 100644 --- a/pages/mobile_web/recharge/detail.vue +++ b/pages/mobile_web/recharge/detail.vue @@ -236,10 +236,10 @@ export default { }, // 返回 back(){ - // #ifdef MP + // #ifdef MP || APP uni.navigateBack(); // #endif - // #ifndef MP + // #ifndef MP || APP uni.redirectTo({ url: '/pages/mobile_web/recharge/recharge' }) diff --git a/pages/mobile_web/recharge/recharge.vue b/pages/mobile_web/recharge/recharge.vue index 56e3e55..93e8caf 100644 --- a/pages/mobile_web/recharge/recharge.vue +++ b/pages/mobile_web/recharge/recharge.vue @@ -136,10 +136,10 @@ methods:{ // 返回 back(){ - // #ifdef MP + // #ifdef MP || APP uni.navigateBack(); // #endif - // #ifndef MP + // #ifndef MP || APP uni.redirectTo({ url: '/pages/mobile_web/index/index' }) diff --git a/pages/mobile_web/workshops/index.vue b/pages/mobile_web/workshops/index.vue index 4ac31e8..ccc5bec 100644 --- a/pages/mobile_web/workshops/index.vue +++ b/pages/mobile_web/workshops/index.vue @@ -414,10 +414,10 @@ export default { }, // 返回 back(){ - // #ifdef MP + // #ifdef MP || APP uni.navigateBack(); // #endif - // #ifndef MP + // #ifndef MP || APP uni.redirectTo({ url: '/pages/mobile_web/index/index' }) diff --git a/pages/pc_web/home/components/second.vue b/pages/pc_web/home/components/second.vue index f68d199..dbc12f9 100644 --- a/pages/pc_web/home/components/second.vue +++ b/pages/pc_web/home/components/second.vue @@ -45,22 +45,28 @@ - - - - {{ item.serviceName || '暂无' }} - - - - - 做同款 - - - - 下载 - - + + + + + {{ item.serviceName || '暂无' }} + + + + + 做同款 + + + + 下载 + + + + + + + {{ recommendForm.isFinish ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }} @@ -102,7 +108,7 @@ export default { // 推荐作品表单 recommendForm: { current: 1, - size: 10, + size: 20, isFinish: true, serviceName: '', isBackend: 0 @@ -237,6 +243,12 @@ export default { } }); }, + // 查看更多 + getMore(){ + if(this.recommendForm.isFinish) return; + this.recommendForm.current++; + this.getWorkList(); + }, } } @@ -406,18 +418,18 @@ export default { } } .hs-services{ - padding: 40rpx; - column-count:5; - -moz-column-count:5; /* Firefox */ - -webkit-column-count:5; /* Safari 和 Chrome */ - column-gap: 2em; - -moz-column-gap: 2em; - -webkit-column-gap: 2em; + padding: 0rpx 40rpx 40rpx; + // column-count:5; + // -moz-column-count:5; /* Firefox */ + // -webkit-column-count:5; /* Safari 和 Chrome */ + // column-gap: 2em; + // -moz-column-gap: 2em; + // -webkit-column-gap: 2em; .hs-service{ -webkit-column-break-inside: avoid; break-inside: avoid; /*防止断点*/ // width: 400rpx; - margin-bottom: 2em; + margin-bottom: 1em; position: relative; overflow: hidden; border-radius: 30rpx; @@ -509,6 +521,25 @@ export default { } } } + .last-tip{ + font-size: 36rpx; + text-align: center; + margin-top: 20rpx; + margin-bottom: 20rpx; + background-image: linear-gradient(to right, #a3d4ff 0%, #bee7df 100%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + .clickable{ + cursor: pointer; + &:hover{ + opacity: 0.8; + } + &:active{ + opacity: 0.6; + } + } } } \ No newline at end of file diff --git a/pages/pc_web/home/home.vue b/pages/pc_web/home/home.vue index a0a3b0a..c14522d 100644 --- a/pages/pc_web/home/home.vue +++ b/pages/pc_web/home/home.vue @@ -35,9 +35,8 @@ - + - @@ -104,20 +103,16 @@ export default { this.$refs.uploadCover.clearFiles(); const size = file.size / 1024; // 计算文件大小 if(size<5 || (size/1024)>5){ - this.$refs.uToast.show({type: 'warning',title: "请上传大小为5KB~5MB的图片!"}); + this.$emit('toast',{type: 'warning',title: "请上传大小为5KB~5MB的图片!"}); return; } let isAccept = new RegExp('image/*').test(file.raw.type) if (!isAccept) { - this.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"}); + this.$emit('toast',{type: 'warning',title: "图片上传格式错误!"}); return; } uni.$emit('workshopPage',fileList[0]?.url); }, - // 提示语弹窗 - showToast({type,title}){ - this.$refs.uToast.show({type: type, title: title}); - } }, mounted() { this.init(); @@ -222,6 +217,7 @@ export default { position: relative; margin: 10rpx 40rpx; border-radius: 12rpx; + // height: 330rpx; .work-module{ width: 240rpx; height: 330rpx; diff --git a/pages/pc_web/index/components/header.vue b/pages/pc_web/index/components/header.vue index b551bc0..a76a078 100644 --- a/pages/pc_web/index/components/header.vue +++ b/pages/pc_web/index/components/header.vue @@ -23,7 +23,8 @@ {{ item.name }} + class="dropdown-item" :command="item.path"> + {{ item.name }} 退出登录 @@ -39,6 +40,7 @@ + @@ -51,6 +53,7 @@ import LoginDialog from './loginDialog.vue'; import MobileDownloadDialog from './mobileDownloadDialog.vue'; import IdentityDialog from './identityDialog.vue'; +import RecordDrawer from './recordDrawer.vue'; import configService from '@/common/config.service.js'; export default { props: { @@ -66,7 +69,8 @@ export default { components: { LoginDialog, MobileDownloadDialog, - IdentityDialog + IdentityDialog, + RecordDrawer }, data(){ return{ @@ -85,6 +89,10 @@ export default { name: '工作台', path: 'workshops' }, + { + name: '作品', + path: 'work' + }, ], // 头像 avatar: 'avatar.png', @@ -100,23 +108,31 @@ export default { showMobileDownloadDialog: false, // 个人信息+充值弹窗显示 showIdentityDialog: false, + // 记录抽屉栏显示 + showRecordDrawer: false, + // 抽屉栏ref组件类型 + drawerRefType: '', // 下拉栏列表 dropList: [ + // { + // name: '我的作品', + // path: '' + // }, + // { + // name: '我的藏品', + // path: '' + // }, { - name: '我的作品', - path: '' - }, - { - name: '我的藏品', - path: '' + name: '充值记录', + path: 'recharge' }, { name: '生成记录', - path: '' + path: 'create' }, { name: '发布记录', - path: '' + path: 'share' }, ], } @@ -172,7 +188,10 @@ export default { } } }) - } else if(path) uni.navigateTo({url: path}); + } else if(path){ + this.drawerRefType = path; + this.showRecordDrawer = true; + } }, // 换页 changePage(index){ diff --git a/pages/pc_web/index/components/identityDialog.vue b/pages/pc_web/index/components/identityDialog.vue index 9b02470..7166fa3 100644 --- a/pages/pc_web/index/components/identityDialog.vue +++ b/pages/pc_web/index/components/identityDialog.vue @@ -48,7 +48,7 @@ - + @@ -191,22 +191,28 @@ export default { this.showCell = false; setTimeout(()=>{ // 下面判断模拟后端获取数据生成微信支付二维码 - if(type === 2){ + if(type === 2 && this.selectElementIndex !== ''){ this.payLoading = true; - setTimeout(()=>{this.payLoading = false;},1000) + this.showCell = true; + this.currentType = type; + setTimeout(()=>{this.payLoading = false;},1000); + }else if(type !== 2){ + this.showCell = true; + this.currentType = type; } - this.showCell = true; - this.currentType = type; }); // 当前侧栏关闭——打开侧栏 } else { // 下面判断模拟后端获取数据生成微信支付二维码 - if(type === 2){ + if(type === 2 && this.selectElementIndex !== ''){ this.payLoading = true; - setTimeout(()=>{this.payLoading = false;},1000) + this.showCell = true; + this.currentType = type; + setTimeout(()=>{this.payLoading = false;},1000); + }else if(type !== 2){ + this.showCell = true; + this.currentType = type; } - this.showCell = true; - this.currentType = type; } }, // 预览图片 @@ -215,7 +221,7 @@ export default { }, // 选择支付额度 selectOption(index){ - if(this.selectElementIndex && this.selectElementIndex !== index){ + if(this.showCell && this.currentType === 2 && this.selectElementIndex !== index){ this.showCell = false; setTimeout(()=>{this.toShowCell(2);}) } diff --git a/pages/pc_web/index/index.vue b/pages/pc_web/index/index.vue index d140af7..31d7d92 100644 --- a/pages/pc_web/index/index.vue +++ b/pages/pc_web/index/index.vue @@ -6,9 +6,10 @@ - + + 失败原因：{{ errorTips }} - @@ -281,10 +280,10 @@ export default { this.serviceItem.type = Number(this.serviceItem.type); } }else{ - this.$refs.uToast.show({type: 'error', title: '服务列表获取失败'}); + this.$emit('toast',{type:'error',title: "服务列表获取失败!"}); } }catch(e){ - this.$refs.uToast.show({type: 'error', title: '服务列表获取失败'}); + this.$emit('toast',{type:'error',title: "服务列表获取失败!"}); }finally{ this.loading = false; } @@ -295,7 +294,7 @@ export default { if(res?.success){ this.rangeImageList = res.data; }else{ - this.$refs.uToast.show({type:'error',title: "随机加载图片获取失败!"}); + this.$emit('toast',{type:'error',title: "随机加载图片获取失败!"}); } }, // 获取单个服务内容 @@ -305,7 +304,7 @@ export default { this.serviceItem = res.data; this.serviceItem.type = Number(this.serviceItem.type); }else{ - this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"}); + this.$emit('toast',{type:'error',title: "ai功能暂未开放!"}); } }, // 更换服务 @@ -347,13 +346,13 @@ export default { if(this.serviceItem.exampleUrl){ window.open(encodeURI(this.serviceItem.exampleUrl)); }else{ - this.$refs.uToast.show({type:'warning',title: "暂无使用教程，请自求多福!"}); + this.$emit('toast',{type:'warning',title: "暂无使用教程，请自求多福!"}); } }, // 增强提示词 async strengthenTip({input, deal}){ if(input === ''){ - this.$refs.uToast.show({type:'warning',title: "请提供部分词句!"}); + this.$emit('toast',{type:'warning',title: "请提供部分词句!"}); deal(); return; }else{ @@ -361,7 +360,7 @@ export default { if(res.success){ deal(res.data); }else{ - this.$refs.uToast.show({type:'error',title: "提示词强化失败!"}); + this.$emit('toast',{type:'error',title: "提示词强化失败!"}); deal(); return; } @@ -383,15 +382,15 @@ export default { selectImage(file,uploadFiles){ let that = this; if (file.raw.type.indexOf('image/') === -1) { - this.$refs.uploadCover.clearFiles(); - that.$refs.uToast.show({type: 'warning',title: "图片上传格式错误!"}); + that.$refs.uploadCover.clearFiles(); + that.$emit('toast',{type: 'warning',title: "图片上传格式错误!"}); return; } const size = file.raw.size / 1024; // 计算文件大小 if(size<5 || (size/1024)>5){ - this.$refs.uploadCover.clearFiles(); - that.$refs.uToast.show({type: 'warning',title: "图片大小不符合规范!"}); + that.$refs.uploadCover.clearFiles(); + that.$emit('toast',{type: 'warning',title: "图片大小不符合规范!"}); return; } that.uploadDisabled = true; @@ -402,29 +401,29 @@ export default { legalJudge(){ const currentType = this.serviceItem.type; if(currentType !== 3 && currentType !== 1 && this.formData.uploadFile === ''){ - this.$refs.uToast.show({type:'error',title: currentType === 4 ? "请选择模特！" : "请上传图片!"}); + this.$emit('toast',{type:'error',title: currentType === 4 ? "请选择模特！" : "请上传图片!"}); return false; } if(currentType === 1){ if(this.selectElementIndex === '' || !this.serviceItem.text){ - this.$refs.uToast.show({type:'error',title: "请完善信息!"}); + this.$emit('toast',{type:'error',title: "请完善信息!"}); return false; } } if(currentType === 2 && this.selectElementIndex === ''){ - this.$refs.uToast.show({type:'error',title: "请选择图片元素!"}); + this.$emit('toast',{type:'error',title: "请选择图片元素!"}); return false; } if(currentType === 3){ if(this.selectElementIndex === '' || !this.serviceItem.text || !this.serviceItem.promt){ - this.$refs.uToast.show({type:'error',title: "请完善信息!"}); + this.$emit('toast',{type:'error',title: "请完善信息!"}); return false; } } if(currentType === 4){ const { bottomsUrl, coatUrl } = this.$refs.dressRef.form; if(coatUrl===''){ - this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"}); + this.$emit('toast',{type:'error',title: "请选择更换上衣!"}); return false; } } @@ -465,13 +464,13 @@ export default { let resp = await that.$api.generateImages(that.getParams(that.serviceItem)); if(resp?.success){ that.setResultFile(resp.data.path); - that.$refs.uToast.show({type:'success',title: + that.$emit('toast',{type:'success',title: '等待ai生成中......点击先看临时工表演',duration: 3000}); that.dotLoading = false; // 开启轮询 that.delayLoadImage(resp.data.id); }else{ - that.$refs.uToast.show({type:'error',title: `${that.serviceItem.name}失败!`}); + that.$emit('toast',{type:'error',title: `${that.serviceItem.name}失败!`}); that.dotLoading = false; } }, @@ -573,11 +572,11 @@ export default { // 超13次轮询结束 if(this.asyncPollTime > 13) { this.asyncPollTime = -1; - this.$refs.uToast.show({type:'warning',title:'生成时间过长，请移步作品栏目查看图片'}); + this.$emit('toast',{type:'warning',title:'生成时间过长，请移步作品栏目查看图片'}); return; } if(this.asyncPollTime === 3){ - this.$refs.uToast.show({type:'warning',title:'火速插队中......客官可稍后移步作品栏目查看图片', + this.$emit('toast',{type:'warning',title:'火速插队中......客官可稍后移步作品栏目查看图片', duration: 3000}); } try { @@ -590,7 +589,7 @@ export default { // 结果判断 this.asyncResult = res.data?.creationState === 't'; this.errorTips = this.asyncResult ? '' : res.data?.reason; - this.$refs.uToast.show({type:this.asyncResult?'success':'error',title: `${this.serviceItem.name}${this.asyncResult?'成功':'失败'}`}); + this.$emit('toast',{type:this.asyncResult?'success':'error',title: `${this.serviceItem.name}${this.asyncResult?'成功':'失败'}`}); return; } this.asyncPollTime++; @@ -622,7 +621,7 @@ export default { // 下载图片 download(){ if(!this.asyncResult){ - this.$refs.uToast.show({type:'error',title: "图片生成失败，请重试!"}); + this.$emit('toast',{type:'error',title: "图片生成失败，请重试!"}); return; } window.open(this.formData.resultFile);