开发贺卡活动

pages/activityDet/index.js

@@ -10,7 +10,8 @@ Page({
    * 页面的初始数据
    */
   data: {
-    state: false,
+    // 'before录制前， process 录制中，after录制后'
+    state: 'before',
     tens: 3,
     bits: 0,
     fromWidth: 100,
@@ -28,6 +29,8 @@ Page({
     greeting: [],
     // 是否更改过头像
     changeAvatarFlag: false,
+    greetingCard: null,
+    userAudioState: false
   },
   async onLoad(options) {
     let configure = await getActivityInfo(options.id)
@@ -59,12 +62,18 @@ Page({
     })
   },
   play() {
-    if (!this.data.state) {
+    if (this.data.state == 'before') {
       this.innerAudioContext = wx.createInnerAudioContext();
       this.innerAudioContext.src = this.data.configure.bgMusic; // 这里可以是录音的临时路径
       this.innerAudioContext.play();
+      this.innerAudioContext.onEnded((res) => {
+        console.log('音频播放完毕');
+        this.setData({
+          userAudioState: false
+        })
+      });
       this.setData({
-        state: true
+        state: 'process'
       })
       let countDown = Number(this.data.configure.bgMusicLength)
       // 倒计时
@@ -111,7 +120,7 @@ Page({
     this.innerAudioContext.stop();
     recorderManager.stop();
     this.setData({
-      state: false,
+      state: 'after',
       tens: this.data.configure.bgMusicLength[0],
       bits: this.data.configure.bgMusicLength[1]
     })
@@ -130,7 +139,6 @@ Page({
       success: (res) => {
         const formateRes = JSON.parse(res.data);
         let audioPath = formateRes.data;
-        console.log(formateRes);
         this.setData({
           audioPath
         })
@@ -146,7 +154,6 @@ Page({
   // 上传贺卡
   async uploadActivity() {
     this.createActivityImg('upload').then(async res => {
-      console.log(res);
       let cardUrl = await this.uploadFile(res)
       let data = {
         audioPath: this.data.audioPath,
@@ -154,16 +161,33 @@ Page({
         cardUrl,
         templateId: this.data.id
       }
-      console.log(data,'data');
-      let hk = await saveActivity(data)
-      console.log(hk, '贺卡生成');
+      console.log(data, 'data');
+      let greetingCard = await saveActivity(data)
+      console.log('贺卡生成', greetingCard);
       this.setData({
+        greetingCard,
         uploadState: false
       })
     })
   },
+  playUserAudio() {
+    if (!this.innerAudioContext) {
+      this.innerAudioContext = wx.createInnerAudioContext();
+    }
+    if (this.data.userAudioState) {
+      this.innerAudioContext.stop();
+      this.setData({
+        userAudioState: false
+      })
+    } else {
+      this.innerAudioContext.src = this.data.tempFilePath;
+      this.innerAudioContext.play();
+      this.setData({
+        userAudioState: true
+      })
+    }
+  },
   bindKeyInput(e) {
-    console.log(e);
     if (e.currentTarget.dataset.type == 'from') {
       this.setData({
         fromWidth: e.detail.cursor * this.data.configure.fromFontSize,
@@ -175,14 +199,10 @@ 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,
@@ -192,7 +212,6 @@ Page({
         },
         success: (res) => {
           const result = JSON.parse(res.data).data;
-          console.log(result, res, 'rrrr');
           resolve(result)
         }
       })
@@ -201,6 +220,14 @@ Page({
   // 生成活动图片
   createActivityImg(createType = 'share') {
     return new Promise((resolve, reject) => {
+      let cardUrl = !this.data.greetingCard ? '' : this.data.greetingCard.cardUrl
+      if (cardUrl) {
+        resolve({
+          title: '请欣赏我的课文朗读作品，点赞+评论。',
+          path: `/pages/index/index`,
+          imageUrl: cardUrl
+        })
+      }
       let context = wx.createSelectorQuery();
       context
         .select('#share')
@@ -215,22 +242,11 @@ Page({
           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.src = this.data.avatar
           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.src = this.data.configure.bgImg
             bgImg.onload = () => {
               ctx.drawImage(bgImg, 0, 0, 375, 300);
               ctx.font = `${this.data.configure.fromFontSize/2}px PingFang`;
@@ -238,29 +254,28 @@ Page({
               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('9');
+                    if (createType == 'share') {
+                      resolve({
+                        title: '请欣赏我的课文朗读作品，点赞+评论。',
+                        path: `/pages/index/index`,
+                        imageUrl: res.tempFilePath
+                      })
+                    } else {
+                      resolve(res.tempFilePath)
+                    }
+                  },
+                  fail(res) {
+                    reject()
+                  }
+                }, 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)
         })
     })
   },

pages/activityDet/index.less

@@ -120,14 +120,14 @@
     box-sizing: border-box;
 
     .playAuido {
-      width: 200rpx;
-      height: 74rpx;
+      width: 214rpx;
+      height: 87rpx;
     }
 
     .share {
-      width: 480rpx;
-      height: 74rpx;
-      line-height: 74rpx;
+      width: 500rpx;
+      height: 87rpx;
+      line-height: 87rpx;
       color: white;
       font-size: 30rpx;
       background: url('http://reader-wx.ai160.com/images/reader/card/share.png')no-repeat;

pages/activityDet/index.wxml

@@ -1,5 +1,5 @@
 <view class="activityDet">
-  <view class="header">
+  <view class="header" wx:if="{{state!='after'||!greetingCard.cardUrl}}">
     <image src="{{configure.bgImg}}" class="templateImg" />
     <view class="toBox" style="top:{{configure.templateBase.fromTop}}rpx;left: {{configure.templateBase.fromLeft}}rpx;">
       <input value="{{configure.fromText}}" class="text" maxlength='8'
@@ -21,30 +21,30 @@
       style="top:{{configure.templateBase.photoTop}}rpx;left: {{configure.templateBase.photoLeft}}rpx;width: {{configure.templateBase.photoWidth}}rpx;height:{{configure.templateBase.photoHeight}}rpx"
       src="{{avatar}}"></image>
   </view>
+  <view class="header" wx:if="{{state=='after'&&greetingCard.cardUrl}}">
+    <image src="{{greetingCard.cardUrl}}" class="templateImg" />
+  </view>
   <!-- 录制控制区域 -->
-  <view class="btnsBox" wx:if="{{tempFilePath==''}}">
-    <image wx:if="{{!state}}" src="http://reader-wx.ai160.com/images/reader/card/play_1.png" class="send"
+  <view class="btnsBox" wx:if="{{state!='after'}}">
+    <image wx:if="{{state=='before'}}" src="http://reader-wx.ai160.com/images/reader/card/play_1.png" class="send"
       bindtap="play" />
-    <view class="recordingBox" wx:if="{{state}}">
+    <view class="recordingBox" wx:if="{{state=='process'}}">
       <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="countDown" wx:if="{{state=='process'}}">
       倒计时：<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!=''}}">
+  <view class="music" wx:if="{{state=='after'}}">
+    <!-- <view class="music"> -->
     <image
-      src="{{state?'http://reader-wx.ai160.com/images/reader/card/audition.png':'http://reader-wx.ai160.com/images/reader/card/audition.png'}}"
-      class="playAuido" bindtap="play" />
-    <button class="resetBtn share" open-type="share">
-      发送给亲爱的爸爸妈妈
+      src="{{userAudioState?'http://reader-wx.ai160.com/images/reader/card/audition2.png':'http://reader-wx.ai160.com/images/reader/card/audition.png'}}"
+      class="playAuido" bindtap="playUserAudio" />
+    <button class="resetBtn share textOver" open-type="share">
+      发送给{{configure.toText}}
     </button>
   </view>
   <!-- 祝福语 -->

pages/activityDet/index.wxss

@@ -104,13 +104,13 @@
   box-sizing: border-box;
 }
 .activityDet .music .playAuido {
-  width: 200rpx;
-  height: 74rpx;
+  width: 214rpx;
+  height: 87rpx;
 }
 .activityDet .music .share {
-  width: 480rpx;
-  height: 74rpx;
-  line-height: 74rpx;
+  width: 500rpx;
+  height: 87rpx;
+  line-height: 87rpx;
   color: white;
   font-size: 30rpx;
   background: url('http://reader-wx.ai160.com/images/reader/card/share.png') no-repeat;