diff --git a/img/close-icon.png b/img/close-icon.png index 810fab7..f6da4ab 100644 Binary files a/img/close-icon.png and b/img/close-icon.png differ diff --git a/img/download-icon.png b/img/download-icon.png index a44c10b..e2b1c70 100644 Binary files a/img/download-icon.png and b/img/download-icon.png differ diff --git a/img/next-icon.png b/img/next-icon.png new file mode 100644 index 0000000..398b4ba Binary files /dev/null and b/img/next-icon.png differ diff --git a/img/share-icon.png b/img/share-icon.png index 582c109..303010d 100644 Binary files a/img/share-icon.png and b/img/share-icon.png differ diff --git a/img/share-lisit-icon.png b/img/share-lisit-icon.png new file mode 100644 index 0000000..383430b Binary files /dev/null and b/img/share-lisit-icon.png differ diff --git a/img/zoom-icon.png b/img/zoom-icon.png index 9a503f8..f8c2a31 100644 Binary files a/img/zoom-icon.png and b/img/zoom-icon.png differ diff --git a/pages/canvasposter/canvasposter.js b/pages/canvasposter/canvasposter.js index 94e5171..6b69ff8 100644 --- a/pages/canvasposter/canvasposter.js +++ b/pages/canvasposter/canvasposter.js @@ -33,7 +33,45 @@ Page({ closeTime: null, titleVal:'', showTitle:false, - times:0 + times:0, + haveData:true, + worksImg:false, + creat_close:true, + currentIndex:0, + worksBox:false + }, + // 下一个 + nextEv(){ + if(this.data.allList.length-5 >= this.data.currentIndex) { + this.setData({ + currentIndex:this.data.currentIndex + 1 + }) + } + }, + // 上一个 + preEv(){ + if(this.data.currentIndex!=0) { + this.setData({ + currentIndex:this.data.currentIndex - 1 + }) + } + }, + changeCurrent(e){ + this.setData({ + currentIndex:e.detail.current + }) + }, + // 创建作品按钮 + creatWorks(){ + this.setData({ + funBox:false, + worksBox:true, + creat_close:false + }) + }, + // 收起创作 + closeWorks(){ + this.setData({funBox:true,worksBox:false,creat_close:true}) }, chooseTitle(e) { let that = this; @@ -44,7 +82,9 @@ Page({ } this.setData({ titleIndex: e.currentTarget.dataset.index, - showBtn: true + showBtn: true, + worksImg:true, + currentIndex:0 }) this.getBottleWidgets(that.data.titlelist[that.data.titleIndex].id); }, @@ -101,6 +141,7 @@ Page({ * 生命周期函数--监听页面加载 */ onLoad: function(options) { + let that = this; items = this.data.itemList; wx.getSystemInfo({ // 获取系统信息 success: sysData => { @@ -115,10 +156,6 @@ Page({ }) } }) - this.setBackGroundImg({ - url: '../../img/background/1.png' - }); - this.getBottleCategories(); // 换取token wx.login({ success: res => { @@ -127,11 +164,13 @@ Page({ method: 'post', data: {code: res.code}, success(res) { - console.log(res); if (res.data.code == 0) { wx.setStorageSync('token', res.data.data.token); wx.setStorageSync('username', res.data.data.user.wx_name); - console.log(wx.getStorageSync('username')); + that.setBackGroundImg({ + url: '../../img/background/1.png' + }); + that.getBottleCategories(); } } }); @@ -223,7 +262,6 @@ Page({ data.rotate = 1; // 旋转角度 data.active = false; // 选中状态 data.angle = 0; - console.log(data, 123); items[items.length] = data; // 每增加一张图片数据增加一条信息 this.setData({ itemList: items @@ -249,10 +287,25 @@ Page({ items[index].lx = e.touches[0].clientX; items[index].ly = e.touches[0].clientY; } - this.setData({ - showBox: false, - funBox: false - }) + if(this.data.funBox){ + if(!this.data.worksBox) { + this.setData({ + funBox: false, + creat_close:true + }) + } else { + this.setData({ + funBox: false, + }) + } + } else { + if(!this.data.creat_close){ + this.setData({ + worksBox:false, + creat_close:false + }) + } + } }, // 拖动图片 WraptouchMove(e) { @@ -267,23 +320,29 @@ Page({ items[index].lx = e.touches[0].clientX; items[index].ly = e.touches[0].clientY; - this.setData({ itemList: items, showBtn: true, - funBox: false + worksBox:false }) + this.showWorksBtn(); } }, // 放开图片 WraptouchEnd() { this.synthesis(); // 调用合成图方法 + this.showWorksBtn(); + }, + // 显示创作按钮 + showWorksBtn(){ clearTimeout(this.data.closeTime); this.data.closeTime = setTimeout(() => { - this.setData({ - showBtn: false, - funBox: true - }) + this.setData({showBtn: false}) + if(this.data.creat_close){ + this.setData({funBox:true}) + } else { + this.setData({worksBox:true}) + } }, 1000) }, // 点击伸缩图标 @@ -309,27 +368,23 @@ Page({ items[index]._tx = e.touches[0].clientX; items[index]._ty = e.touches[0].clientY; //移动的点到圆心的距离 - items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx, items[ - index]._ty - 10) - - items[index].scale = items[index].disPtoO / items[index].r; - + items[index].disPtoO = this.getDistancs(items[index].x, items[index].y, items[index]._tx, items[index]._ty - 10) + console.log(items[index].disPtoO); + if(items[index].disPtoO > 80 && items[index].disPtoO <200 ){//设置贴图最小值和最大值 + items[index].scale = items[index].disPtoO / items[index].r; + } //移动后位置的角度 - items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[ - index]._ty) + items[index].angleNext = this.countDeg(items[index].x, items[index].y, items[index]._tx, items[index]._ty) //角度差 items[index].new_rotate = items[index].angleNext - items[index].anglePre; - + //叠加的角度差 items[index].rotate += items[index].new_rotate; items[index].angle = items[index].rotate; //赋值 - //用过移动后的坐标赋值为移动前坐标 items[index].tx = e.touches[0].clientX; items[index].ty = e.touches[0].clientY; - items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index] - .ty) - + items[index].anglePre = this.countDeg(items[index].x, items[index].y, items[index].tx, items[index].ty) //赋值setData渲染 this.setData({ itemList: items @@ -392,10 +447,8 @@ Page({ openMask() { if (wx.getStorageSync('username')!='' && wx.getStorageSync('username')!=undefined ) { this.synthesis(); - this.setData({ - showCanvas: true, - showTitle:true - }) + // this.setData({showCanvas: true,showTitle:true}) + this.setData({showCanvas: true}) } else { this.setData({ isLogin: true @@ -414,7 +467,7 @@ Page({ } }) }, - synthesis() { // 合成图片 + synthesis(whereIndex=0) { // 合成图片 maskCanvas.save(); maskCanvas.beginPath(); // 画背景色(白色) @@ -440,6 +493,40 @@ Page({ this.setData({ canvasTemImg: res.tempFilePath }) + if(whereIndex==1){ + wx.showToast({title:'正在调起分享',duration:5000}) + console.log(this.data.canvasTemImg); + wx.uploadFile({ + url: urlPath.composeBottle, + filePath: this.data.canvasTemImg, + name: 'image', + formData: { + 'name': this.data.titleVal + }, + header: { + "Content-Type": "multipart/form-data", + 'Content-Type': 'application/json', + 'token': wx.getStorageSync('token') + }, + success: (res)=> { + let newRes = JSON.parse(res.data); + if(newRes.code==0){ + wx.downloadFile({ + url: 'https://fenggu.scdxtc.cn' + newRes.data.src, + success: (res) => { + wx.showShareImageMenu({ + path: res.tempFilePath, + success:(res)=>{} + }) + } + }) + } + }, + fail: function(data) { + console.log(data); + } + }) + } } }, this); }) @@ -514,16 +601,20 @@ Page({ } }) }, + // 首页左下角分享 + homeShare(){ + this.synthesis(1); + }, // 分享图片 - shareImg() { + shareImg(e) { + let newIndex = e.currentTarget.dataset.index; if(this.data.times==0){ - wx.showToast({ - title:'正在调起分享', - duration:5000 - }) this.setData({ times:this.data.times++ }) + if(newIndex==0){ + wx.showToast({title:'正在调起分享',duration:5000}) + } wx.uploadFile({ url: urlPath.composeBottle, filePath: this.data.canvasTemImg, @@ -539,17 +630,20 @@ Page({ success: (res)=> { let newRes = JSON.parse(res.data); if(newRes.code==0){ - wx.downloadFile({ - url: 'https://fenggu.scdxtc.cn' + newRes.data.src, - success: (res) => { - wx.showShareImageMenu({ - path: res.tempFilePath, - success:(res)=>{ - this.shareEv(newRes.data.id); - } - }) - } - }) + if(newIndex==0){ + console.log(newIndex); + wx.downloadFile({ + url: 'https://fenggu.scdxtc.cn' + newRes.data.src, + success: (res) => { + wx.showShareImageMenu({ + path: res.tempFilePath, + success:(res)=>{} + }) + } + }) + } else { + this.shareEv(newRes.data.id); + } } }, fail: function(data) { @@ -567,7 +661,10 @@ Page({ method: 'post', success: (res) => { if (res.data.code == 0) { - wx.showToast({title: '分享作品成功'}) + wx.showToast({title: '参加活动成功'}); + this.setData({ + showCanvas:false + }) } } }); @@ -636,6 +733,7 @@ Page({ } }) }, + // 获取标题 getBottleCategories() { wx.request({ url: urlPath.getBottleCategories, @@ -645,11 +743,13 @@ Page({ this.setData({ titlelist: res.data.data }) + this.getBottleWidgets(res.data.data[0].id); } } } }); }, + // 获取标题下的图片 getBottleWidgets(id) { wx.request({ url: urlPath.getBottleWidgets, @@ -661,6 +761,9 @@ Page({ success: (res) => { if (res.data.code == 0) { if (res.data.data.length) { + this.setData({ + haveData: true + }) let newArr = []; res.data.data.forEach(item => { let url = 'https://fenggu.scdxtc.cn' + item.img; @@ -668,21 +771,21 @@ Page({ let obj = { id: item.id, name: item.name, - img: 'https://fenggu.scdxtc.cn' + item.img + img: 'https://fenggu.scdxtc.cn' + item.img, + img_thumb:'https://fenggu.scdxtc.cn' + item.img_thumb, } newArr.push(obj) }) this.setData({ allList: newArr, - showBox: true }) } else { - wx.showToast({ - title:'无内容', - icon:'none' - }) + // wx.showToast({ + // title:'无内容', + // icon:'none' + // }) this.setData({ - showBox: false + haveData: false }) } @@ -690,6 +793,7 @@ Page({ } }); }, + // 查看我的作品 checkWorkEv() { wx.navigateTo({ url: '/pages/works/works' diff --git a/pages/canvasposter/canvasposter.wxml b/pages/canvasposter/canvasposter.wxml index 5f36384..2c4b079 100644 --- a/pages/canvasposter/canvasposter.wxml +++ b/pages/canvasposter/canvasposter.wxml @@ -20,46 +20,85 @@ - + + +创建作品 - - - + + 作品 + 规则 + + + + + + -我的作品 - - - - - {{item.name}} + + 收起创作 + + + + + {{item.name}} + + + + - - - - - - - + + + + diff --git a/pages/canvasposter/canvasposter.wxss b/pages/canvasposter/canvasposter.wxss index 8836d3b..0a88490 100644 --- a/pages/canvasposter/canvasposter.wxss +++ b/pages/canvasposter/canvasposter.wxss @@ -77,7 +77,7 @@ .operation-buttons { position: absolute; - bottom: 220rpx; + bottom: 110rpx; right: 15rpx; display: flex; flex-direction: column; @@ -85,10 +85,11 @@ transition: all .5s ease-in-out; } +.operation-buttons view { + width: 51px;height: 51px;background-color: #2a7be9;border-radius: 50%;color: #fff;display: flex;justify-content: center;align-items: center;margin-top: 40rpx; +} .operation-buttons image { - width: 74rpx; - height: 80rpx; - margin-top: 20rpx; + width: 27px;height: 25px;margin-top: 0px; } .closeSave { transform: scale(0); @@ -103,7 +104,13 @@ z-index: 999; text-align: center; } - +.close-effect { + width: 50rpx; + height: 50rpx; + position: absolute; + top: 25rpx; + left: 50rpx; +} .maskCanvas { position: absolute; left: -200%; @@ -147,7 +154,8 @@ /* 点击下载按钮时的图片样式 */ .resImg { width: 80%; - margin-top: 20rpx; + height: 80%; + margin-top: 50rpx; } /* 特效样式 */ @@ -187,37 +195,64 @@ padding: 20rpx; transition: all .5s ease-in-out; } - +scroll-view { + position: relative; +} .showBox { bottom: 88rpx; } - .scrollView { display: flex; + align-items: center; } - +.arrowBtn { + position: absolute; + z-index: 2; + width: 70rpx!important; + height: 70rpx!important; +} +.pre { + left: 0; + top: 50%; + transform: translateY(-50%); +} +.next { + top: 50%; + right: 0; +} +swiper { + padding-bottom: 20rpx; +} +.creat-works-btn {position: fixed;bottom: 110rpx;left: 77px;right: 77px; height: 51px;line-height: 51px;text-align: center;color: #fff;background-color: #287be9;border-radius: 51px;z-index: 101;box-sizing: border-box;font-weight: bold;} +.works-box {position: fixed;bottom: 110rpx;z-index: 101;} +.works-boxAc {bottom: 86rpx;} +.close-works-btn {background-color: #2a7be9;color: #fff;border-radius: 20px 20px 0 0;padding: 50rpx 20rpx 30rpx 20rpx;display: inline-block;} +.works-content {background-color: #2a7be9;} .title-box view { - background-color: rgba(0, 0, 0, 1); + background-color: rgba(42, 123, 233, 1); display: inline-block; - padding: 15rpx 30rpx; + padding: 20rpx 40rpx; border-radius: 10rpx; - margin-bottom: 20rpx; - margin-right: 20rpx; + margin-bottom: 10rpx; + /* margin-right: 20rpx; */ + margin-top: 10rpx; flex-shrink: 0; color: #fff; + margin-left: 10rpx; } .title-box .titleActive { color: #000; background-color: rgba(255, 255, 255, 1); - box-shadow: 0rpx 0rpx 20rpx rgba(255, 255, 255, .5); + border-radius: 50rpx; +} +.img-box { + width: 25%!important; } - .img-box view { - width: 25%; + width: 96%; height: 320rpx; flex-shrink: 0; - margin-right: 20rpx; background-color: rgba(0,0,0,.8); display: flex; align-items: center; @@ -232,7 +267,6 @@ height: 320rpx; object-fit: contain; } - .img-box .allActive { transform: scale(.9); border: 4rpx dashed rgba(255, 255, 255, .4); @@ -243,7 +277,7 @@ position: fixed; right: 20rpx; top: 20rpx; - z-index: 10000; + z-index: 998; background-color: rgba(0,0,0,.3); color: #fff; font-size: 28rpx; diff --git a/pages/index/index.wxml b/pages/index/index.wxml index 78b4d37..421b93b 100644 --- a/pages/index/index.wxml +++ b/pages/index/index.wxml @@ -57,15 +57,11 @@ {{item.ids}} - - 简介:{{item.text}} + 简介:{{item.text}} + + {{item.name}} {{item.number}} - - {{item.name}} {{item.number}} - - + diff --git a/pages/index/index.wxss b/pages/index/index.wxss index 1a0608b..6a50b8f 100644 --- a/pages/index/index.wxss +++ b/pages/index/index.wxss @@ -133,4 +133,6 @@ padding-right: 80rpx; padding-left: 30rpx; font-size: 24rpx; -} \ No newline at end of file +} + +.clips1{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} \ No newline at end of file diff --git a/pages/ranking/ranking.js b/pages/ranking/ranking.js index ea6d2ea..1975650 100644 --- a/pages/ranking/ranking.js +++ b/pages/ranking/ranking.js @@ -85,7 +85,6 @@ Page({ if(res.data.data.length > 0){ var ranking_list = []; res.data.data.forEach(function(item, index){ - console.log(index); ranking_list.push({ ranks: index + 1, name: item.user_name, diff --git a/pages/rule/rule.wxml b/pages/rule/rule.wxml index 470d7e3..fe820e7 100644 --- a/pages/rule/rule.wxml +++ b/pages/rule/rule.wxml @@ -4,7 +4,7 @@ - + diff --git a/pages/works/works.js b/pages/works/works.js index b72e527..78c8123 100644 --- a/pages/works/works.js +++ b/pages/works/works.js @@ -48,6 +48,7 @@ Page({ name: item.name, id: item.id, imgSrc: 'https://fenggu.scdxtc.cn' + item.release_img, + img_thumb: 'https://fenggu.scdxtc.cn' + item.img_thumb, userId: item.user_id, time: item.create_time, isShare: item.production_id //0未分享 @@ -82,7 +83,9 @@ Page({ wx.showShareImageMenu({ path: res.tempFilePath, success:(res)=>{ - this.shareImg(e.currentTarget.dataset.id,e.currentTarget.dataset.index); + this.setData({ + times:0 + }) }, fail:(err)=>{ console.log(err); @@ -92,11 +95,12 @@ Page({ }) } }, - shareImg(id,index){ + // 立即参与活动 + partEv(e){ wx.request({ url: urlPath.publishMyBottle, data: { - id: id + id: e.currentTarget.dataset.id }, header: { 'token': wx.getStorageSync('token') @@ -104,17 +108,30 @@ Page({ method: 'post', success: (res) => { if (res.data.code == 0) { - this.data.imgArr[index].isShare=1; + this.data.imgArr[e.currentTarget.dataset.index].isShare=1; this.setData({ imgArr:this.data.imgArr }) wx.showToast({ - title: '分享作品成功' + title: '参加活动成功' }) } } }); }, + // 预览图片 + preImg(e){ + let newIndex = e.currentTarget.dataset.index; + let newImg = []; + this.data.imgArr.forEach(item=>{ + newImg.push(item.imgSrc); + }) + wx.previewImage({ + current:this.data.imgArr[newIndex].imgSrc, + urls:newImg, + success: () => {} + }) + }, /** * 生命周期函数--监听页面初次渲染完成 */ diff --git a/pages/works/works.wxml b/pages/works/works.wxml index a79f67c..6236bae 100644 --- a/pages/works/works.wxml +++ b/pages/works/works.wxml @@ -6,11 +6,13 @@ - - {{item.name}} + + {{item.time}} + 正在参与活动 + 参与活动 diff --git a/pages/works/works.wxss b/pages/works/works.wxss index 3246da4..f8359c8 100644 --- a/pages/works/works.wxss +++ b/pages/works/works.wxss @@ -64,6 +64,12 @@ page { font-size: 24rpx; color: #999; text-align: left; - padding: 0 20rpx 10rpx 20rpx; + padding: 20rpx; +} +.activeIng { + width: auto;height: auto;padding: 6rpx 10rpx;color: #2a7be9; font-size: 24rpx; +} +.activeBtn { + background-color: #2a7be9; width: 100%;height: auto;padding: 20rpx; text-align: center; color: #fff; font-size: 28rpx; } .clips2{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;word-break:break-all;} \ No newline at end of file