diff --git a/common/http.api.js b/common/http.api.js index 722ba54..bb573ef 100644 --- a/common/http.api.js +++ b/common/http.api.js @@ -4,8 +4,13 @@ const install = (Vue, vm) => { // 用户管理 vm.$api.wxLogin = async (params = {}) => await vm.$u.get('/acUser/wxPhoneLogin', params);// 手机号一键登录 vm.$api.login = async (params = {}) => await vm.$u.get('/acUser/phoneLogin', params);// 手机号登录 + vm.$api.logOut = async () => await vm.$u.get('/acUser/logout');// 用户登出 vm.$api.register = async (params = {}) => await vm.$u.get('/acUser/phoneRegister', params);// 手机号注册 + // 会员作品 + vm.$api.myCreations = async (params = {}) => await vm.$u.get('/paCreation', params);// 作品查询 + vm.$api.deleteCreation = async (id) => await vm.$u.delete(`/paCreation/${id}`);// 删除作品 + // 图片管理 vm.$api.getCpPhotoById = async (params = {}) => await vm.$u.get('/cpPhoto/all', params);// 根据标签id查询全部图片 diff --git a/common/ossutil/ossWebUpload.js b/common/ossutil/ossWebUpload.js new file mode 100644 index 0000000..6f5d4fb --- /dev/null +++ b/common/ossutil/ossWebUpload.js @@ -0,0 +1,27 @@ +const OSS = require('ali-oss'); + + +let client = new OSS({ + region: 'oss-cn-hangzhou', // 上传后的域名 + accessKeyId: 'LTAI5tFAiAq9SjM9vaucMuYD', // 后台的临时签名ID + accessKeySecret: 'RHDmRIOaYlEXe9t1ro7ls8Ejcnhigv', // 后台的临时签名密钥 + stsToken: '', + bucket: 'guojunjie', // OSS仓库名 +}); + +// 上传方法 +const ossUpload = (file) => { + // let curTime = new Date(); + // let year = curTime.getFullYear(); + // let month = curTime.getMonth() + 1; + // let day = curTime.getDate(); + let dir = 'pixelAi/'; + client.multipartUpload(dir+'测试', file).then(ress=>{ + + console.log(ress); + }) +} + +export { + ossUpload +} \ No newline at end of file diff --git a/common/routerInterceptor.js b/common/routerInterceptor.js index d8b5d84..953e3bc 100644 --- a/common/routerInterceptor.js +++ b/common/routerInterceptor.js @@ -1,6 +1,8 @@ // 需要登录的界面 let needLogin = [ - "/pages/my/mySetting" + "/pages/my/mySetting", + "/pages/mobile_web/workshops/index", + "/pages/mobile_web/my/child_pages/contact" ]; // 多端通用路由 let filterRoute = [ @@ -22,7 +24,7 @@ const install = (vm) => { icon: 'none' }); uni.navigateTo({ - url: "/pages/my/wxLogin?nextUrl="+locationUrl + url: "/pages/mobile_web/my/child_pages/login?nextUrl="+locationUrl }); } else if(!filterRoute.includes(locationUrl)&&locationUrl!=='/'&&vm.$store.state.current_platform&& locationUrl.indexOf(vm.$store.state.current_platform)==-1){ @@ -54,7 +56,7 @@ const install = (vm) => { icon: 'none' }); uni.navigateTo({ - url: "/pages/my/wxLogin?nextUrl="+e.url + url: "/pages/mobile_web/my/child_pages/login?nextUrl="+e.url }); return false; } diff --git a/package.json b/package.json index 3ca383b..68d10f7 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "dependencies": { + "ali-oss": "^6.22.0", "element-ui": "^2.15.14" } } diff --git a/pages/mobile_web/home/home.vue b/pages/mobile_web/home/home.vue index b58c8d1..4ae4990 100644 --- a/pages/mobile_web/home/home.vue +++ b/pages/mobile_web/home/home.vue @@ -27,9 +27,10 @@ - + - + @@ -62,6 +63,10 @@ export default { type: Number, default: 0 }, + isLogin: { + type: String, + default: '' + } }, data(){ return{ @@ -145,14 +150,10 @@ export default { // } ], // 用户信息 + userMessage:{} // userMessage: this.$store.state.vuex_token === ''?{}:JSON.parse(this.$store.state.user_message), - // 是否登录 - isLogin: this.$store.state.vuex_token, } }, - // mounted() { - // console.log('isLogin',this.isLogin); - // }, computed:{ // 获取登录头像 getAvatar(){ @@ -160,13 +161,14 @@ export default { }, // 获取头像旁tip getTopTip(){ - return this.isLogin ? '你好, SSDFH!' : '请登录pixel.ai！'; + // return this.isLogin ? `你好, PIXEL.AI!` : '请登录pixel.ai！'; + return this.isLogin ? `你好, ${this.userMessage?.nickName||this.userMessage?.username}!` : '请登录pixel.ai！'; } }, methods:{ // 初始化 init(){ - + this.userMessage = this.isLogin === ''?{}:JSON.parse(this.$store.state.user_message); }, // 操作栏 toControl(item){ @@ -174,9 +176,29 @@ export default { }, // 点击头像 handleClickAvatar(){ - uni.navigateTo({ - url: '/pages/mobile_web/my/child_pages/login' - }) + if(this.isLogin){ + let that = this; + uni.showModal({ + title: '注销', + content: '是否确认退出登录？', + confirmColor: '#94d500', + success: function (res) { + if (res.confirm) { + that.$api.logOut(); + that.$u.vuex('vuex_token', ''); + that.$u.vuex('user_message', {}); + // that.isLogin = ''; + that.$emit('userLogOut'); + that.userMessage = {}; + that.$refs.uToast.show({type:'success',title: "退出登录成功!"}); + } + } + }) + }else{ + uni.navigateTo({ + url: '/pages/mobile_web/my/child_pages/login' + }) + } } } } @@ -214,7 +236,18 @@ export default { margin: 125rpx 70rpx 45rpx; font-weight: bold; word-spacing: 3px; + width: calc(100% - 150rpx); + .u-icon{ + overflow: hidden; + } + /deep/.u-icon__label{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } /deep/.u-icon__img{ + min-width: 107rpx; + min-height: 107rpx; border-radius: 100%; } } diff --git a/pages/mobile_web/work/work.vue b/pages/mobile_web/work/work.vue index 77117a5..5d1b733 100644 --- a/pages/mobile_web/work/work.vue +++ b/pages/mobile_web/work/work.vue @@ -22,27 +22,29 @@ + :startVal="startVal" :endVal="current===0? workForm.total:collectForm.total"> - 件{{ current===0? '藏':'作' }}品 + 件{{ current===0? '作':'藏' }}品 - + - - {{ siftList.length?siftList[item.type].label : '暂无' }} - - + + + {{ item.type || '暂无' }} + + - - ~~ 已加载全部 ~~ + + {{ (current === 0 ? workForm.isFinish : collectForm.isFinish) ? '~~ 已加载全部 ~~' : '~~ 点击加载更多 ~~' }} @@ -58,19 +60,16 @@ export default { type: Number, default: 0 }, - siftList:{ - type: Array, - default: [] - } }, data(){ return{ // 基础路径 + ip: configService.ip, fileUrl: configService.fileUrl + 'pixel/', // logo图标 logo: 'home/logo.png', // 筛选项 - selectList: ["我的藏品", "我的创作"], + selectList: ["我的创作", "我的藏品"], // 顶部背景 topBackground: 'work/background.png', // 选择黑星图片 @@ -83,67 +82,24 @@ export default { trash: 'work/trash.png', // 当前选项 current: 0, - // 收藏数 - collectCount: 55, - // 作品数 - workCount: 15, // 收藏作品列表 - collectList:[ - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/af29f44ad5abf333f52f7a0e9dd65260.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/1b6ef6597fd59c8af1b50dc2658f431e.jpg', - type: 1, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e6aa2563a3a58064b9d5144be60f6320.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/f1f0a1a6c08a026d90f396294b57f96b.png', - type: 7, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ccbd6422e3b8776d1b2ae2a37b22bd45.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ab95c3bf9c95876cfaed68a15bbf0b72.png', - type: 7, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/39accf84409cb5b8b71b6a039792aaac.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/bb3242fa17a79fd4f9b8597761f1f168.png', - type: 6, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/31689612c754f8e1fda031a654f9cc2.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/3fc992cfbd3827719b984d5b2008d354.png', - type: 2, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e03df2fa9aede0b76530afca14e45c3b.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e7909151044c9343a9a9b643b85883c9.jpg', - type: 4, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ccbd6422e3b8776d1b2ae2a37b22bd45.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/ab95c3bf9c95876cfaed68a15bbf0b72.png', - type: 7, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/39accf84409cb5b8b71b6a039792aaac.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/bb3242fa17a79fd4f9b8597761f1f168.png', - type: 6, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/31689612c754f8e1fda031a654f9cc2.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/3fc992cfbd3827719b984d5b2008d354.png', - type: 2, - }, - { - picture: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e03df2fa9aede0b76530afca14e45c3b.png', - compare: 'https://aichat-1314286455.cos.ap-guangzhou.myqcloud.com/e7909151044c9343a9a9b643b85883c9.jpg', - type: 4, - } - ], + collectList:[], // 我的创作 - workList:[ - - ], + workList:[], + // 我的创作Form + workForm: { + current: 1, + size: 10, + isFinish: false, + total: 0 + }, + // 我的收藏Form + collectForm: { + current: 1, + size: 10, + isFinish: false, + total: 0 + }, // 标签图标 sign: 'home/typelam.png', // 点击次数 @@ -152,22 +108,80 @@ export default { startVal: 0, } }, + beforeDestroy() { + this.workList = []; + this.collectList = []; + }, methods:{ // 初始化 init(){ + 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(); + }, + // 查看更多 + 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(){ + 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.map((item)=>{ + return {...item, path: encodeURI(item.path)} + }); + if(current === 1){ + this.workList = result + }else{ + this.workList.push(...result); + } + this.workForm.total = total; + this.workForm.isFinish = current*size >= total; + }else{ + this.$refs.uToast.show({type:'error',title: "我的创作获取失败!"}); + } + }, + // 获取我的藏品 + getCollections(){ + }, + imgLoaded() { + // 占位图加载完成 + if (this.loadStatus == '') { + this.loadStatus = 'lazyed'; + } + // 真正的图片加载完成 + else if (this.loadStatus == 'lazyed') { + this.loadStatus = 'loaded'; + this.$emit('load', this.index); + } + }, + // 错误的图片加载完成 + errorImgLoaded() { + this.$emit('error', this.index); }, // 切换选项 changeSelect(index){ this.current = index; - this.startVal = index===0?this.workCount:this.collectCount; + this.startVal = index===0?this.collectForm.total:this.workForm.total; }, // 监听单双击，单击-预览图片、双击-显示删除图标 maskTouchend(item,index){ this.touchNum ++; setTimeout(()=>{ if(this.touchNum == 1){ - tools.methods.lookImage(0,[item.picture,item.compare]); + const array = [this.ip+item.path]; + if(item.compare) array.push(item.compare); + tools.methods.lookImage(0,array); } if(this.touchNum >= 2){ const result = item.delete?0:1; @@ -194,13 +208,21 @@ export default { // 取消收藏 deleteCollect(item,index){ let that = this; + let current = this.current===0; uni.showModal({ title: '提示', - content: '是否确认取消收藏该作品？', + content: `是否确认${current?'删除':'取消收藏'}该作品？`, confirmColor: '#94d500', - success: function (res) { + success: async (res) => { if (res.confirm) { - that.$refs.uToast.show({type:'success',title: "已取消收藏!"}); + let res = await that.$api.deleteCreation(item.id); + if(res.success){ + current ? that.workList.splice(index, 1) : this.collectList.splice(index, 1); + current ? that.workForm.total-- : that.collectForm.total--; + that.$refs.uToast.show({type:'success',title: `已${current?'删除':'取消收藏'}该作品！`}); + }else{ + that.$refs.uToast.show({type:'error',title: `作品${current?'删除':'取消收藏'}失败！`}); + } } } }); @@ -314,6 +336,10 @@ export default { .work-picture{ border: 0.1em solid #d5ff00; border-radius: 30rpx; + // 骗系统开启硬件加速 + transform: transition3d(0, 0, 0); + // 防止图片加载“闪一下” + will-change: transform; } .sign{ border: none; @@ -325,6 +351,10 @@ export default { height: 47rpx; } .sign-text{ + width: 132rpx; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; color: #ffffff; font-size: 28rpx; position: absolute; diff --git a/pages/mobile_web/workshops/common/functionalClassification.js b/pages/mobile_web/workshops/common/functionalClassification.js new file mode 100644 index 0000000..f7004c4 --- /dev/null +++ b/pages/mobile_web/workshops/common/functionalClassification.js @@ -0,0 +1,8 @@ +// 查看更多 +const toList = () => { + console.log('more'); +} + +export { + toList +}; \ No newline at end of file diff --git a/pages/mobile_web/workshops/common/imgDeal.js b/pages/mobile_web/workshops/common/imgDeal.js index 1aad6c1..25251bd 100644 --- a/pages/mobile_web/workshops/common/imgDeal.js +++ b/pages/mobile_web/workshops/common/imgDeal.js @@ -7,6 +7,7 @@ const selectDealFunction = (vm,model,params,success) => { case 1 : case 2 : case 3 : + case 4 : diagramOfTheSketch(vm,params,success); break; }; @@ -29,10 +30,11 @@ const commonUpload = (vm,params,success) =>{ formData: params, header:{'token':vm.$store.state.vuex_token}, success: (res) => { - if(res.data){ - success(encodeURI(JSON.parse(res.data).data.path)); + let result = JSON.parse(res.data); + if(result.success){ + success(encodeURI(result.data.path)); } else { - vm.$refs.uToast.show({type: 'error',title: "余额不足，请充值!"}); + vm.$refs.uToast.show({type: 'error',title: "处理失败，请检查余额是否充足!"}); vm.dotLoading = false; return; } @@ -45,5 +47,5 @@ const commonUpload = (vm,params,success) =>{ } export { - selectDealFunction + selectDealFunction, }; \ No newline at end of file diff --git a/pages/mobile_web/workshops/components/dress_select.vue b/pages/mobile_web/workshops/components/dress_select.vue new file mode 100644 index 0000000..e310eba --- /dev/null +++ b/pages/mobile_web/workshops/components/dress_select.vue @@ -0,0 +1,349 @@ + + + + + \ No newline at end of file diff --git a/pages/mobile_web/workshops/index.vue b/pages/mobile_web/workshops/index.vue index 9bf2cc3..7a80c97 100644 --- a/pages/mobile_web/workshops/index.vue +++ b/pages/mobile_web/workshops/index.vue @@ -65,7 +65,7 @@ - Tips：{{ resultFile ? '点击预览图片效果~' : form.tips+"~" }} + Tips：{{ resultFile ? '点击预览图片效果~' : form.tips||'智能创作'+"~" }} @@ -93,12 +93,13 @@ - + - 开启魔法 @@ -140,8 +141,9 @@ import configService from '@/common/config.service.js'; import { tools } from '@/utils/utils.js'; import EditorBox from './components/editor.vue'; import DressSelect from './components/dress_select.vue'; -import { selectDealFunction } from './common/imgDeal' -import { toList } from './common/functionalClassification' +import { selectDealFunction } from './common/imgDeal'; +import { toList } from './common/functionalClassification'; +import { ossUpload } from '@/common/ossutil/ossWebUpload.js'; export default { components: { EditorBox, DressSelect @@ -199,9 +201,13 @@ export default { icon: 'camera', background: 'linear-gradient(to right, #c2fc3b 0%, #c2ffd8 51%, #c2fc3b 100%)', fun: ()=>{ - if(this.form.type===0) + if(this.form.type===0){ this.selectImage(); - else{ + }else if(this.form.type === 4){ + this.resultFile = ''; + this.uploadFile = ''; + this.$refs.dressRef.resetForm(); + }else{ this.resultFile = ''; this.uploadFile = ''; } @@ -227,7 +233,9 @@ export default { // 元素选择下标 selectElementIndex: '', // 弹窗显示更多选项 - showMoreOptions: false + showMoreOptions: false, + // 按钮禁用 + functionDisable: false } }, // #ifndef H5 @@ -276,6 +284,7 @@ export default { res.data.type = Number(res.data.type); this.form = res.data; }else{ + this.functionDisable = true; this.$refs.uToast.show({type:'error',title: "ai功能暂未开放!"}); } }catch(e){} @@ -306,9 +315,20 @@ export default { // #endif if(this.resultFile!=='') this.resultFile = ''; that.uploadFile = res.tempFilePaths[0]; + // ossUpload(res.tempFiles[0]); + // 如果是ai换衣，上传了图片需要关闭预览模式 + if(this.form.type === 4){ + this.$refs.dressRef.form.previewMode = 0; + this.$refs.dressRef.form.mannequinIndex = ''; + this.$refs.dressRef.form.imageId = ''; + } } }); }, + // ai试衣模特预选 + previewMannequin(model){ + this.uploadFile = model; + }, // 预览图片 previewImage(){ const previewImages = [this.ip+this.resultFile]; @@ -323,11 +343,11 @@ export default { if(!this.legalJudge()) return; // 再实际处理 selectDealFunction(that,that.form.type,that.getParams(that.form), - (path)=>{ - that.resultFile = path; - that.$refs.uToast.show({type:'success',title: `${that.form.name}成功!`}); - this.dotLoading = false; - }); + (path)=>{ + if(path) that.resultFile = path; + that.$refs.uToast.show({type:'success',title: `${that.form.name}成功!`}); + this.dotLoading = false; + }); }catch(e){ this.dotLoading = false; }finally{ @@ -343,7 +363,7 @@ export default { } if(currentType === 1){ if(this.selectElementIndex === '' || !this.form.text){ - this.$refs.uToast.show({type:'error',title: "完善信息!"}); + this.$refs.uToast.show({type:'error',title: "请完善信息!"}); this.dotLoading = false; return false; } @@ -355,7 +375,15 @@ export default { } if(currentType === 3){ if(this.selectElementIndex === '' || !this.form.text || !this.form.promt){ - this.$refs.uToast.show({type:'error',title: "完善信息!"}); + this.$refs.uToast.show({type:'error',title: "请完善信息!"}); + this.dotLoading = false; + return false; + } + } + if(currentType === 4){ + const { bottomImageId, topImageId, previewMode, imageId } = this.$refs.dressRef.form; + if(topImageId===''){ + this.$refs.uToast.show({type:'error',title: "请选择更换上衣!"}); this.dotLoading = false; return false; } @@ -395,6 +423,20 @@ export default { promt: promt } break; + case 4 : + const { bottomImageId, topImageId, previewMode, imageId } = this.$refs.dressRef.form; + result = { + serviceId: id, + bottomImageId: bottomImageId, + topImageId: topImageId, + filePath: that.uploadFile, + imageId: imageId, + previewMode: previewMode + }; + if(bottomImageId === '') delete result.bottomImageId; + if(topImageId === '') delete result.topImageId; + previewMode === 0 ? delete result.imageId : delete result.filePath; + break; } return result; }, diff --git a/static/back.png b/static/back.png new file mode 100644 index 0000000..6a3acd8 Binary files /dev/null and b/static/back.png differ diff --git a/static/image-more.png b/static/image-more.png new file mode 100644 index 0000000..5b007d7 Binary files /dev/null and b/static/image-more.png differ diff --git a/store/index.js b/store/index.js index e20deea..3d6d43c 100644 --- a/store/index.js +++ b/store/index.js @@ -31,8 +31,8 @@ const store = new Vuex.Store({ state: { // 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量 // 加上vuex_前缀，是防止变量名冲突，也让人一目了然 - // fbc545a91cc94fe89296828a25a7e08e@9085553879028596738 - vuex_token: lifeData.vuex_token ? lifeData.vuex_token : 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738', + // vuex_token: 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738', + vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '', user_message:lifeData.user_message ? lifeData.user_message : {}, current_platform: lifeData.current_platform ? lifeData.current_platform : '' },