开发贺卡阅读

app.wxss

@@ -52,4 +52,6 @@ text {
     width: 375px;
     height: 300px;
     position: absolute;
+    left: -9999rpx;
+    top: -9999rpx;
 }

pages/activityDet/index.js

@@ -4,6 +4,7 @@ import {
 } from '~/api/activity'
 /*微信录音*/
 let recorderManager = wx.getRecorderManager();
+let dsq
 Page({
   /**
    * 页面的初始数据
@@ -17,14 +18,19 @@ Page({
     configure: {},
     avatar: '',
     percent: 0,
+    // 本地录音地址
     tempFilePath: '',
+    // 线上录音地址
+    audioPath: '',
     uploadState: false,
     // 此id保存模板使用
-    id: ''
+    id: '',
+    greeting: [],
+    // 是否更改过头像
+    changeAvatarFlag: false,
   },
   async onLoad(options) {
     let configure = await getActivityInfo(options.id)
-    console.log(configure);
     this.setData({
       configure,
       avatar: configure.photoText,
@@ -32,8 +38,9 @@ Page({
       fromWidth: configure.fromText.length * configure.fromFontSize,
       toWidth: configure.toText.length * configure.toFontSize,
       id: options.id,
-      // 是否更改过头像
-      changeAvatarFlag: false
+      greeting: configure.greeting.split('\r'),
+      tens: configure.bgMusicLength[0],
+      bits: configure.bgMusicLength[1]
     })
   },
   setInput({
@@ -41,38 +48,30 @@ Page({
   }) {
     console.log(currentTarget.dataset.info);
   },
-  changeAvatar: function (e) {
+  async changeAvatar(e) {
     const {
       avatarUrl
     } = e.detail
-    wx.uploadFile({
-      url: 'https://reader-api.ai160.com/file/upload',
-      filePath: avatarUrl,
-      name: '头像',
-      header: {
-        uid: wx.getStorageSync('uid')
-      },
-      success: (res) => {
-        const newAvatar = JSON.parse(res.data).data;
-        this.setData({
-          changeAvatarFlag: true,
-          avatar: newAvatar
-        })
-      }
+    let res = await this.uploadFile(avatarUrl)
+    this.setData({
+      changeAvatarFlag: true,
+      avatar: res
     })
   },
   play() {
-    return
-    let dsq
     if (!this.data.state) {
+      this.innerAudioContext = wx.createInnerAudioContext();
+      this.innerAudioContext.src = this.data.configure.bgMusic; // 这里可以是录音的临时路径
+      this.innerAudioContext.play();
       this.setData({
         state: true
       })
-      let countDown = 30
+      let countDown = Number(this.data.configure.bgMusicLength)
       // 倒计时
-      dsq = setInterval(item => {
+      this.dsq = setInterval(item => {
+        // 倒计时结束
         if (countDown == 1) {
-          clearInterval(dsq)
+          this.stopRecording()
         }
         if (countDown % 10 == 0) {
           this.setData({
@@ -104,18 +103,24 @@ Page({
         this.uploadAudio(res.tempFilePath)
       });
     } else {
-      console.log('结束');
-      clearInterval(dsq)
-      recorderManager.stop();
-      this.setData({
-        state: false,
-        tens: 3,
-        bits: 0
-      })
+      this.stopRecording()
     }
   },
+  stopRecording() {
+    clearInterval(dsq)
+    this.innerAudioContext.stop();
+    recorderManager.stop();
+    this.setData({
+      state: false,
+      tens: this.data.configure.bgMusicLength[0],
+      bits: this.data.configure.bgMusicLength[1]
+    })
+  },
   uploadAudio(recordSource) {
-    wx.uploadFile({
+    this.setData({
+      uploadState: true
+    });
+    const uploadTask = wx.uploadFile({
       url: 'https://reader-api.ai160.com//file/upload',
       filePath: recordSource,
       name: '朗读录音',
@@ -126,11 +131,38 @@ Page({
         const formateRes = JSON.parse(res.data);
         let audioPath = formateRes.data;
         console.log(formateRes);
-        // this.shareWorks(audioPath);
+        this.setData({
+          audioPath
+        })
+        this.uploadActivity()
+      },
+    })
+    uploadTask.onProgressUpdate((res) => {
+      this.setData({
+        percent: res.progress
+      })
+    })
+  },
+  // 上传贺卡
+  async uploadActivity() {
+    this.createActivityImg('upload').then(async res => {
+      console.log(res);
+      let cardUrl = await this.uploadFile(res)
+      let data = {
+        audioPath: this.data.audioPath,
+        // 生成贺卡图片地址
+        cardUrl,
+        templateId: this.data.id
       }
+      console.log(data,'data');
+      let hk = await saveActivity(data)
+      console.log(hk, '贺卡生成');
+      this.setData({
+        uploadState: false
+      })
     })
   },
-  bindKeyInput: function (e) {
+  bindKeyInput(e) {
     console.log(e);
     if (e.currentTarget.dataset.type == 'from') {
       this.setData({
@@ -143,70 +175,93 @@ Page({
         'configure.toText': e.detail.value
       })
     }
-
     /*    this.setData({
          inputValue: e.detail.value
        }) */
   },
+  // 上传图片
+  uploadFile(filePath) {
+    return new Promise((resolve, reject) => {
+
+      wx.uploadFile({
+        url: 'https://reader-api.ai160.com/file/upload',
+        filePath,
+        name: '头像',
+        header: {
+          uid: wx.getStorageSync('uid')
+        },
+        success: (res) => {
+          const result = JSON.parse(res.data).data;
+          console.log(result, res, 'rrrr');
+          resolve(result)
+        }
+      })
+    })
+  },
   // 生成活动图片
-  createActivityImg() {
+  createActivityImg(createType = 'share') {
     return new Promise((resolve, reject) => {
-    let context = wx.createSelectorQuery();
-    context
-      .select('#share')
-      .fields({
-        node: true,
-        size: true
-      }).exec((res) => {
-        const canvas = res[0].node;
-        const ctx = canvas.getContext('2d');
-        const dpr = wx.getSystemInfoSync().pixelRatio;
-        canvas.width = res[0].width * dpr;
-        canvas.height = res[0].height * dpr;
-        ctx.scale(dpr, dpr);
-        let avatar = canvas.createImage();
-        wx.getImageInfo({
-          src: this.data.avatar,
-          success: function (res) {
-            console.log(res);
-            avatar.src = res.path
-          },
-        });
-        avatar.onload = () => {
-          ctx.drawImage(avatar, this.data.configure.templateBase.photoLeft / 2, this.data.configure.templateBase.photoTop / 2, this.data.configure.templateBase.photoWidth / 2, this.data.configure.templateBase.photoHeight / 2);
-          let bgImg = canvas.createImage();
+      let context = wx.createSelectorQuery();
+      context
+        .select('#share')
+        .fields({
+          node: true,
+          size: true
+        }).exec((res) => {
+          const canvas = res[0].node;
+          const ctx = canvas.getContext('2d');
+          const dpr = wx.getSystemInfoSync().pixelRatio;
+          canvas.width = res[0].width * dpr;
+          canvas.height = res[0].height * dpr;
+          ctx.scale(dpr, dpr);
+          let avatar = canvas.createImage();
           wx.getImageInfo({
-            src: this.data.configure.bgImg,
+            src: this.data.avatar,
             success: function (res) {
-              bgImg.src = res.path
-            },
-          });
-          bgImg.onload = () => {
-            ctx.drawImage(bgImg, 0, 0, 375, 300);
-            ctx.font = `${this.data.configure.fromFontSize/2}px PingFang`;
-            ctx.fillText(this.data.configure.toText, this.data.configure.templateBase.toLeft / 2, this.data.configure.templateBase.toTop / 2 + this.data.configure.fromFontSize / 2)
-            ctx.fillText(this.data.configure.fromText, this.data.configure.templateBase.fromLeft / 2, this.data.configure.templateBase.fromTop / 2 + this.data.configure.toFontSize / 2)
-            console.log(this.data.configure.toText, this.data.configure.templateBase.toLeft / 2, this.data.configure.templateBase.toTop / 2);
-            console.log(this.data.configure.fromText, this.data.configure.templateBase.fromLeft / 2, this.data.configure.templateBase.fromTop / 2);
-          }
-        }
-        setTimeout(() => {
-          wx.canvasToTempFilePath({
-            canvas: canvas,
-            success(res) {
               console.log(res);
-              resolve({
-                title: '请欣赏我的课文朗读作品，点赞+评论。',
-                path: `/pages/index/index`,
-                imageUrl: res.tempFilePath
-              })
+              avatar.src = res.path
             },
-            fail(res) {
-              reject()
+          });
+          avatar.onload = () => {
+            ctx.drawImage(avatar, this.data.configure.templateBase.photoLeft / 2, this.data.configure.templateBase.photoTop / 2, this.data.configure.templateBase.photoWidth / 2, this.data.configure.templateBase.photoHeight / 2);
+            let bgImg = canvas.createImage();
+            wx.getImageInfo({
+              src: this.data.configure.bgImg,
+              success: function (res) {
+                bgImg.src = res.path
+              },
+            });
+            bgImg.onload = () => {
+              ctx.drawImage(bgImg, 0, 0, 375, 300);
+              ctx.font = `${this.data.configure.fromFontSize/2}px PingFang`;
+              ctx.fillText(this.data.configure.toText, this.data.configure.templateBase.toLeft / 2, this.data.configure.templateBase.toTop / 2 + this.data.configure.fromFontSize / 2)
+              ctx.fillText(this.data.configure.fromText, this.data.configure.templateBase.fromLeft / 2, this.data.configure.templateBase.fromTop / 2 + this.data.configure.toFontSize / 2)
+              console.log(this.data.configure.toText, this.data.configure.templateBase.toLeft / 2, this.data.configure.templateBase.toTop / 2);
+              console.log(this.data.configure.fromText, this.data.configure.templateBase.fromLeft / 2, this.data.configure.templateBase.fromTop / 2);
             }
-          }, this)
-        }, 1000)
-      })
+          }
+          setTimeout(() => {
+            wx.canvasToTempFilePath({
+              canvas: canvas,
+              success(res) {
+                console.log(res);
+                if (createType == 'share') {
+                  resolve({
+                    title: '请欣赏我的课文朗读作品，点赞+评论。',
+                    path: `/pages/index/index`,
+                    imageUrl: res.tempFilePath
+                  })
+                } else {
+                  resolve(res.tempFilePath)
+                }
+
+              },
+              fail(res) {
+                reject()
+              }
+            }, this)
+          }, 1000)
+        })
     })
   },
   onShareAppMessage({

pages/activityDet/index.less

@@ -64,19 +64,33 @@
   }
 
   .btnsBox {
+    margin-top: 40rpx;
     position: relative;
     text-align: center;
-    background-color: skyblue;
     font-size: 0rpx;
 
+    .recordingBox {
+      position: relative;
+      display: inline-block;
+      margin: 0 auto;
+
+      .readingNow {
+        position: absolute;
+        left: 66rpx;
+        top: 26rpx;
+        width: 40rpx;
+        height: 30rpx;
+      }
+    }
+
     .send {
-      width: 290rpx;
-      height: 80rpx;
+      width: 313rpx;
+      height: 88rpx;
     }
 
     .countDown {
       position: absolute;
-      right: 30rpx;
+      right: 20rpx;
       top: 0px;
       bottom: 0px;
       margin: auto;
@@ -100,6 +114,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    margin-top: 40rpx;
     padding: 0rpx 20rpx;
     font-size: 0rpx;
     box-sizing: border-box;
@@ -121,18 +136,14 @@
   }
 
   .blessing {
-    margin-top: 100rpx;
-
-    .title {
-      margin: 0 auto;
-      width: 500rpx;
-      text-align: left;
-    }
+    margin-top: 30rpx;
+    font-size: 36rpx;
 
     .content {
-      margin: 25rpx auto 0rpx;
-      width: 500rpx;
-      text-indent: 3em;
+      height: 38rpx;
+      width: 600rpx;
+      text-align: center;
+      margin: 20rpx auto 0rpx;
     }
   }
 
@@ -152,6 +163,7 @@
     background-color: rgba(0, 0, 0, 0.8);
     text-align: center;
     font-size: 30rpx;
+    z-index: 10;
 
     .speedProgress {
       margin: 20rpx 0rpx 60rpx;

pages/activityDet/index.wxml

@@ -23,18 +23,21 @@
   </view>
   <!-- 录制控制区域 -->
   <view class="btnsBox" wx:if="{{tempFilePath==''}}">
-    <!--  <image
-      src="{{state?'http://reader-wx.ai160.com/images/reader/card/send_blessings.png':'http://reader-wx.ai160.com/images/reader/card/show_off.png'}}"
-      class="send" bindtap="play" /> -->
-    <!-- <button class="resetBtn mangeL-box" bindtap="createActivityImg"> -->
-    <button class="resetBtn mangeL-box" open-type="share">
-      <view class="icon-name">分享</view>
-    </button>
+    <image wx:if="{{!state}}" src="http://reader-wx.ai160.com/images/reader/card/play_1.png" class="send"
+      bindtap="play" />
+    <view class="recordingBox" wx:if="{{state}}">
+      <image class="readingNow" src="/static/index/readingNow.gif" />
+      <image src="http://reader-wx.ai160.com/images/reader/card/play_3.png" class="send" bindtap="play" />
+    </view>
     <view class="countDown" wx:if="{{state}}">
       倒计时：<view class="countBox">{{tens}}</view>
       <view class="countBox">{{bits}}</view>秒
     </view>
   </view>
+  <!-- <button class="resetBtn mangeL-box" bindtap="createActivityImg"> -->
+  <!--  <button class="resetBtn mangeL-box" open-type="share">
+      <view class="icon-name">分享</view>
+    </button> -->
   <!-- 试听与分享控制区域 -->
   <view class="music" wx:if="{{!state&&tempFilePath!=''}}">
     <image
@@ -43,18 +46,14 @@
     <button class="resetBtn share" open-type="share">
       发送给亲爱的爸爸妈妈
     </button>
-    <!-- http://reader-wx.ai160.com/images/reader/card/share.png -->
   </view>
   <!-- 祝福语 -->
   <view class="blessing">
-    <view class="title">
-      祝福语：
-    </view>
-    <view class="content">{{configure.greeting}}</view>
+    <view wx:for="{{greeting}}" wx:key="index" class="content">{{item}}</view>
   </view>
   <!-- 上传进度 -->
   <view class="maskBox" catchtap="true" wx:if="{{uploadState}}">
-    <view>0%</view>
+    <view>{{percent}}%</view>
     <progress percent="{{percent}}" class="speedProgress" stroke-width="10" activeColor="#C3F166" />
     <view>祝福生成中</view>
   </view>

pages/activityDet/index.wxss

@@ -54,18 +54,30 @@
   display: block;
 }
 .activityDet .btnsBox {
+  margin-top: 40rpx;
   position: relative;
   text-align: center;
-  background-color: skyblue;
   font-size: 0rpx;
 }
+.activityDet .btnsBox .recordingBox {
+  position: relative;
+  display: inline-block;
+  margin: 0 auto;
+}
+.activityDet .btnsBox .recordingBox .readingNow {
+  position: absolute;
+  left: 66rpx;
+  top: 26rpx;
+  width: 40rpx;
+  height: 30rpx;
+}
 .activityDet .btnsBox .send {
-  width: 290rpx;
-  height: 80rpx;
+  width: 313rpx;
+  height: 88rpx;
 }
 .activityDet .btnsBox .countDown {
   position: absolute;
-  right: 30rpx;
+  right: 20rpx;
   top: 0px;
   bottom: 0px;
   margin: auto;
@@ -86,6 +98,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-top: 40rpx;
   padding: 0rpx 20rpx;
   font-size: 0rpx;
   box-sizing: border-box;
@@ -104,17 +117,14 @@
   background-size: 100% 100%;
 }
 .activityDet .blessing {
-  margin-top: 100rpx;
-}
-.activityDet .blessing .title {
-  margin: 0 auto;
-  width: 500rpx;
-  text-align: left;
+  margin-top: 30rpx;
+  font-size: 36rpx;
 }
 .activityDet .blessing .content {
-  margin: 25rpx auto 0rpx;
-  width: 500rpx;
-  text-indent: 3em;
+  height: 38rpx;
+  width: 600rpx;
+  text-align: center;
+  margin: 20rpx auto 0rpx;
 }
 .activityDet .maskBox {
   position: fixed;
@@ -132,6 +142,7 @@
   background-color: rgba(0, 0, 0, 0.8);
   text-align: center;
   font-size: 30rpx;
+  z-index: 10;
 }
 .activityDet .maskBox .speedProgress {
   margin: 20rpx 0rpx 60rpx;