diff --git a/pages/home/xx/xz/xz.js b/pages/home/xx/xz/xz.js index 379a19c..b9cb59b 100644 --- a/pages/home/xx/xz/xz.js +++ b/pages/home/xx/xz/xz.js @@ -13,13 +13,13 @@ Page({ content:'', audioList:[], // 音频列表 imgList:[], // 图片列表 + messageList: [], //消息列表 sound:'', soundTime:'00:00:00', duration: '', minute:0, //分 second:0, //秒 millisecond:0, //毫秒 - showBtn:true, showImgBig:false, //图片太大弹层 showSoundMore:false, //语音太多提示 showSend:false, //寄出提示 @@ -33,20 +33,15 @@ Page({ btn3:false, btn4:false, showSoundImg:true, - isPlaying: false, // 是否正在播放语音 + isPlaying: false // 是否正在播放语音 }, already(){ console.log('确定寄出'); this.setData({showAlready:true}) - const list = [ ...this.data.audioList, ...this.data.imgList] - list.push({ - type: 'text', - content: this.data.content - }) const fromData = { from: this.data.from, to: this.data.to, - messageList: list, + messageList: this.data.messageList, status:'unread' } console.log(fromData); @@ -74,31 +69,47 @@ Page({ closeShowImgToast(){this.setData({showImgToast: false})}, openPreview(){ console.log('预览'); - this.setData({Preview:true}) + this.setData({Preview : !this.data.Preview}) }, ClearYl(e){ console.log('清除语音'); const id = e.currentTarget.dataset.id - const list = this.data.audioList.filter(item => { + const list = this.data.messageList.filter(item => { return item.resourceId !== id }) - this.setData({audioList: list}) + this.setData({messageList: list}) }, ClearImg(e){ console.log('清除图片'); const id = e.currentTarget.dataset.id - const list = this.data.imgList.filter(item => { + const list = this.data.messageList.filter(item => { return item.resourceId !== id }) - this.setData({imgList: list}) + this.setData({messageList: list}) }, goBack(){ - if (this.data.Preview) { - this.setData({Preview: false}) - }else{ - console.log('返回'); - wx.navigateBack() - } + // if (this.data.Preview) { + // this.setData({Preview: false}) + // }else{ + // console.log('返回'); + // wx.navigateBack() + // } + wx.navigateBack() + }, + // 获取文本框内容 + getTextValue(e){ + const index = e.currentTarget.dataset.index + const content = e.detail.value + const list = this.data.messageList.map(item => { + if (item.index === index) { + return { + ...item, + content : content + } + } + return item + }) + this.setData({messageList: list}) }, // 上传图片 addImg(){ @@ -114,6 +125,7 @@ Page({ } }) }, + // 文件上传 uploadFile(file,type) { wx.uploadFile({ @@ -129,35 +141,53 @@ Page({ }, success: (async(res) => { const data = JSON.parse(res.data); - console.log(data); if (data.data.type === 'audio') { console.log('添加音频'); - const list = this.data.audioList - if(list.length >= 3){ + const list = this.data.messageList + const index = list.length + 1 + const audioList = list.filter(item => { + return item.type === 'audio' + }) + if(audioList.length >= 3){ this.setData({showSoundMore:true ,showSoundImg:true}) - console.log('语音太多了'); }else { list.push({ type: 'audio', resourceId: data.data.id, duration: this.data.duration, videoSrc: this.data.videoSrc, + index:index, extra: {duration : this.data.ssec} }) - this.setData({audioList: list}) + list.push({ + type: 'text', + content: '', + index: index + 1 + }) + this.setData({messageList: list}) } } else if (data.data.type === 'poster') { console.log('添加图片'); - const list = this.data.imgList - if (list.length >= 9) { + const list = this.data.messageList + const migList = list.filter(item => { + return item.type === 'graphic' + }) + if (migList.length >= 9) { this.setData({showImgToast : true}) }else { + const index = list.length + 1 list.push({ type: 'graphic', resourceId: data.data.id, img: data.data.abUrl, + index: index + }) + list.push({ + type: 'text', + content: '', + index: index + 1 }) - this.setData({imgList: list, showImg:true}) + this.setData({messageList: list, showImg:true}) } } }), @@ -302,10 +332,32 @@ Page({ modify(){ this.setData({showAlready: false, showSend: false}) }, + // 获取信札内容 getLetter(){ - console.log('获取当前用户信札内容'); req.getRequest('/api/user/curt/letter',{}).then(res => { - console.log(res); + if (res.data.code === 200) { + console.log(res.data.data); + const data = res.data.data + const id = wx.getStorageSync('xinyuan-userInfo').id + if (!data.messageList.length) { + data.messageList.push({content: '', type: 'text', index: 1}) + } + data.messageList.forEach((item, index) => { + item.index = index + 1 + if (item.type === 'audio') { + const src = `https://xzjl-api.windymuse.cn/api/resource/${item.resourceId}?k=${id}` + item.videoSrc = src + }else if(item.type === 'graphic'){ + const src = `https://xzjl-api.windymuse.cn/api/resource/${item.resourceId}?k=${id}` + item.img = src + } + }) + this.setData({ + from: data.from, + to: data.to, + messageList: data.messageList + }) + } }) }, // 点击音频试听 @@ -314,7 +366,7 @@ Page({ return; // 如果正在播放语音,则不触发事件 } const id = e.currentTarget.dataset.url.resourceId - const videoSrc = this.data.audioList.find(item => { + const videoSrc = this.data.messageList.find(item => { return item.resourceId === id }).videoSrc console.log(videoSrc); @@ -333,6 +385,7 @@ Page({ this.setData({id:id}) }) }, + /** * 生命周期函数--监听页面加载 */ diff --git a/pages/home/xx/xz/xz.wxml b/pages/home/xx/xz/xz.wxml index 5843b1a..41eb214 100644 --- a/pages/home/xx/xz/xz.wxml +++ b/pages/home/xx/xz/xz.wxml @@ -1,11 +1,8 @@ - + - - To: {{to}} - - + To: @@ -15,39 +12,38 @@ - - - - - - - - {{item.extra.duration}} - - - - - - - + + + + + + + + + + {{item.extra.duration}} + + + + + + + + - - - - From: {{from}} - - + + - 音讯 - 画像 - 预览 - 寄出 + 音讯 + 画像 + 预览 + 寄出 @@ -132,3 +128,36 @@ + + + + + + + To:可能性的艺术 + + + + + + + + + + {{item.extra.duration}} + + + + + + + + Form:可能性的艺术 + + + + + + + + \ No newline at end of file diff --git a/pages/home/xx/xz/xz.wxss b/pages/home/xx/xz/xz.wxss index e3ce003..daef5a6 100644 --- a/pages/home/xx/xz/xz.wxss +++ b/pages/home/xx/xz/xz.wxss @@ -54,43 +54,26 @@ page { .xinfo-content { width: 100%; height: 100%; - padding-bottom: 100rpx; + padding-bottom: 300rpx; + padding-top: 60rpx; box-sizing: border-box; overflow: auto; position: relative; pointer-events: auto; -} - -.xinfo-yl { - width: 100%; - height: 200rpx; + background-size: cover; + background-image: url(https://wish-assets.oss-cn-hangzhou.aliyuncs.com/xy/zx-bkg.png); } .xinfo-title { width: 100%; height: 100rpx; - margin-top: 60rpx; + margin-bottom: 60rpx; padding-left: 64rpx; box-sizing: border-box; font-size: 28rpx; color: rgba(108, 108, 108, 1); } -.xinfo-yl-title { - margin: 60rpx 0 0 50rpx; - font-size: 32rpx; - color: rgba(108, 108, 108, 1); -} - -.xinfo-yl-form { - width: 100%; - text-align: end; - margin-top: 30rpx; - padding-right: 64rpx; - box-sizing: border-box; - font-size: 32rpx; - color: rgba(108, 108, 108, 1); -} .title-to { display: flex; @@ -129,7 +112,7 @@ page { .xinfo-main { width: 100%; - margin: 60rpx 0 32rpx 0; + margin-bottom: 40rpx; padding: 0 64rpx; box-sizing: border-box; } @@ -153,29 +136,13 @@ textarea { position: relative; width: 382rpx; height: 84rpx; - margin: 0 0 20rpx 64rpx; - display: flex; - align-items: center; - background-size: contain; - background-image: url(https://wish-assets.windymuse.com.cn/xy/ltqpp.png); -} - -.xinfo-ltqp-yl { - position: relative; - width: 382rpx; - height: 84rpx; - margin: 0 0 20rpx 64rpx; + margin: 0 0 40rpx 64rpx; display: flex; align-items: center; background-size: contain; background-image: url(https://wish-assets.windymuse.com.cn/xy/ltqpp.png); } -.xinfo-ltqp-yl image { - width: 100%; - height: 100%; -} - .xinfo-ltqp image { width: 100%; height: 100%; @@ -202,23 +169,11 @@ textarea { .xinfo-img { position: relative; width: 480rpx; - margin: 40rpx 0 0 64rpx; - display: flex; - justify-content: center; -} - -.xinfo-img-yl { - position: relative; - width: 480rpx; - margin: 40rpx 0 0 64rpx; + margin: 0 0 40rpx 64rpx; display: flex; justify-content: center; } -.xinfo-img-yl image { - width: 100%; -} - .xinfo-img image { width: 100%; } @@ -613,4 +568,139 @@ textarea { align-items: center; color: #fff; z-index: 999; +} + +editor { + background-color: pink; +} + + +/* 预览页面样式 */ +.preview { + position: relative; + width: 100%; + height: 100%; + display: flex; + justify-content: center; +} + +.preview-content { + width: 616rpx; + height: 1280rpx; + margin-top: 132rpx; + background-size: 100% 100%; + background-image: url(https://wish-assets.oss-cn-hangzhou.aliyuncs.com/xy/zx-bkg.png); +} + +.preview-content .content{ + width: 616rpx; + height: 1280rpx; + margin-top: 18rpx; + overflow-y: scroll; +} + +.preview-bkg { + position: absolute; + bottom: -190rpx; + width: 100%; + height: 924rpx; + background-size: 100% 100%; + background-image: url(https://wish-assets.windymuse.com.cn/xy/bgt2.png); + pointer-events: none; + display: flex; + justify-content: center; +} + +.preview-btn { + position: absolute; + left: 32rpx; + bottom: 132rpx; + width: 110rpx; + height: 110rpx; + border-radius: 50%; + background: linear-gradient(222.54deg, rgba(248,99,42,1) 14.03%,rgba(249,135,89,1) 85.21%); + color: rgba(16, 16, 16, 1); + box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.4); + font-family: -apple-system; + border: 6rpx solid rgba(255, 255, 255, 1); + display: flex; + justify-content: center; + align-items: center; +} + +.preview-btn-img { + width: 60rpx; + height: 60rpx; + background-size: cover; + background-image: url(https://wish-assets.windymuse.com.cn/xy/iconPark-return%401x.png); +} + +.preview-content-title { + color: #6c6c6c; + font-size: 32rpx; + text-align: left; + font-weight: 700; + margin: 50rpx 0 0 60rpx; +} + +.preview-content-end { + color: #6c6c6c; + font-size: 32rpx; + text-align: right; + font-weight: 700; + margin: 50rpx 60rpx 80rpx 0; +} + +.preview-content-main { + color: #6c6c6c; + font-size: 32rpx; + margin: 32rpx 60rpx 40rpx 60rpx; +} + +.preview-content-main .t-textarea { + width: 100%; + padding: 0; + font-size: 28rpx; + background-color: rgba(0, 0, 0, 0); +} + +.preview-content-ltqp { + position: relative; + width: 382rpx; + height: 84rpx; + margin: 0 0 40rpx 64rpx; + display: flex; + align-items: center; + background-size: contain; + background-image: url(https://wish-assets.windymuse.com.cn/xy/ltqpp.png); +} + +.preview-content-ltqp image { + margin: 0 40rpx; + width: 70rpx; + height: 70rpx; +} + +.preview-content-ltqp .text { + color: rgba(79, 79, 79, 1); + font-size: 14px; +} + +.preview-content-img { + display: flex; + justify-content: center; + margin-bottom: 40rpx; +} + +.preview-content-img image { + width: 480rpx; +} + +.preview-yz { + width: 146rpx; + height: 146rpx; + margin-top: 470rpx; + background-image: url(https://wish-assets.windymuse.com.cn/xy/%E5%8D%B0%E7%AB%A0.png); + background-size: cover; + pointer-events: auto; } \ No newline at end of file diff --git a/pages/xz/index.js b/pages/xz/index.js index 16b9e32..00ef1a5 100644 --- a/pages/xz/index.js +++ b/pages/xz/index.js @@ -14,7 +14,8 @@ Page({ showMore: false, showDel:false, imgList:[], - audioList:[] + audioList:[], + messageList: [] }, openLetter(){ this.setData({showLetter: !this.data.showLetter}), @@ -45,14 +46,13 @@ Page({ // 判断是否有图片 console.log(messageList); messageList.forEach(item => { - if (item.type === 'text') { - this.setData({content: item.content}) - }else if(item.type === 'graphic') { - this.getResource(id, item.resourceId, 'graphic') + if(item.type === 'graphic') { + item.img = `https://xzjl-api.windymuse.cn/api/resource/${item.resourceId}?k=${id}` }else if(item.type === 'audio') { - this.getResource(id, item.resourceId, 'audio',item.extra.duration) + item.audio = `https://xzjl-api.windymuse.cn/api/resource/${item.resourceId}?k=${id}` } }) + this.setData({messageList: messageList}) }) }, getUserInfo(){ @@ -61,28 +61,6 @@ Page({ this.getLetterMsg(id) }) }, - // 获取文件 - getResource(id,k,type,time){ - if(type === 'graphic'){ - const list = this.data.imgList - list.push({ - img: `https://xzjl-api.windymuse.cn/api/resource/${k}?k=${id}` - }) - this.setData({ - imgList: list - }) - }else if(type === 'audio'){ - const list = this.data.audioList - list.push({ - audio: `https://xzjl-api.windymuse.cn/api/resource/${k}?k=${id}`, - duration:time - }) - this.setData({ - audioList:list - }) - console.log(this.data.videos,'语音路径'); - } - }, // 播放录音 playVideos(e){ console.log(e.currentTarget.dataset.url.audio); diff --git a/pages/xz/index.wxml b/pages/xz/index.wxml index c794eaf..9bbe4fa 100644 --- a/pages/xz/index.wxml +++ b/pages/xz/index.wxml @@ -23,18 +23,23 @@ To:{{letterMsg.to}} - - - - - - {{item.duration}} - - - + + + + + + + + {{item.extra.duration}} + + + + + Form:{{letterMsg.from}} {{time}} + diff --git a/pages/xz/index.wxss b/pages/xz/index.wxss index ea28f8a..a136b07 100644 --- a/pages/xz/index.wxss +++ b/pages/xz/index.wxss @@ -95,7 +95,7 @@ page { } .xinfo-title { - margin-left: 60rpx; + margin: 0 0 50rpx 60rpx; color: rgba(108, 108, 108, 1); font-size: 32rpx; text-align: left; @@ -105,7 +105,7 @@ page { .xinfo-main { color: rgba(108, 108, 108, 1); font-size: 14px; - margin: 32rpx 50rpx; + margin: 0 50rpx 40rpx 50rpx; } .xinfo-main .t-textarea { @@ -120,7 +120,7 @@ page { height: 84rpx; display: flex; align-items: center; - margin:0 0 48rpx 50rpx; + margin:0 0 40rpx 50rpx; padding-left: 48rpx; box-sizing: border-box; background-size: cover; @@ -138,15 +138,14 @@ page { .xinfo-img { width: 100%; /* height: 448rpx; */ - margin-bottom: 44rpx; + margin-bottom: 40rpx; display: flex; align-items: center; justify-content: center; } .xinfo-img image { - height: 100%; - /* width: 480rpx; */ + width: 480rpx; } .xinfo-sign { @@ -155,6 +154,7 @@ page { font-weight: 700; text-align: right; margin-right: 60rpx; + margin-top: 60rpx; } .xinfo-time { diff --git a/project.private.config.json b/project.private.config.json index 82d878a..6729c62 100644 --- a/project.private.config.json +++ b/project.private.config.json @@ -21,6 +21,27 @@ "query": "", "launchMode": "default", "scene": null + }, + { + "name": "", + "pathName": "pages/home/xx/xz/xz", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "", + "pathName": "pages/home/xx/xz/xz", + "query": "", + "launchMode": "default", + "scene": null + }, + { + "name": "", + "pathName": "pages/xz/index", + "query": "", + "launchMode": "default", + "scene": null } ] }