开发联调贺卡

.gitignore

@@ -2,3 +2,4 @@
 /.idea
 
 /.idea
+project.config.json

api/activity.js

@@ -10,6 +10,8 @@ module.exports = {
   getMyActivity: data => request('/card/activity/my', 'get', data),
   // 保存贺卡
   saveActivity: data => request('/card/activity', 'post', data),
+  // 触发播放音频埋点
+  playAudioEvent: data => request(`/card/activity/play/${data}`, 'get'),
   // 点赞
   thumbsUp: data => request(`/card/activity/like/${data}`, 'get'),
   // 删除作品

pages/activityDet/index.js

@@ -330,5 +330,9 @@ Page({
   onHide() {
     recorderManager.stop()
     this.innerAudioContext.stop()
+  },
+  onUnload() {
+    recorderManager.stop()
+    this.innerAudioContext.stop()
   }
 })

pages/greeting/index.js

@@ -2,7 +2,8 @@ import {
   getMyActivity,
   thumbsUp,
   deleteActivity,
-  getShareText
+  getShareText,
+  playAudioEvent
 } from '~/api/activity'
 Page({
   /**
@@ -13,7 +14,13 @@ Page({
     pageNo: 1,
     totalSize: 0,
     list: [],
-    uid: ''
+    uid: '',
+    playAudioId: null,
+    // 当前音频播放时长
+    playTime: '00:00',
+    endTime: '00:00',
+    vProgress: 0,
+    userAudioState: false,
   },
 
   /**
@@ -24,6 +31,16 @@ Page({
     this.setData({
       uid: wx.getStorageSync('uid')
     })
+    this.innerAudioContext = wx.createInnerAudioContext();
+    this.innerAudioContext.onTimeUpdate(() => {
+      this.setDuration('playTime', this.innerAudioContext.currentTime)
+      this.setData({
+        vProgress: Math.ceil((Math.ceil(this.innerAudioContext.currentTime) / this.innerAudioContext.duration) * 100)
+      })
+    })
+    this.innerAudioContext.onEnded((res) => {
+      this.clearAudio()
+    });
   },
   async getMyActivity() {
     let {
@@ -39,7 +56,6 @@ Page({
       isMy = list[0].uid == wx.getStorageSync('uid')
     }
     this.setData({
-      isMy,
       list,
       totalSize
     })
@@ -52,6 +68,35 @@ Page({
       this.getMyActivity()
     }
   },
+  async playAudio({
+    currentTarget
+  }) {
+    let item = currentTarget.dataset.item
+    if (this.data.userAudioState) {
+      if (this.data.playAudioId == item.id) {
+        return this.clearAudio()
+      }
+      this.clearAudio()
+    }
+    this.innerAudioContext.src = item.audioPath;
+    this.innerAudioContext.play();
+    this.setDuration('endTime', item.duration)
+    this.setData({
+      playAudioId: item.id,
+      userAudioState: true
+    })
+    await playAudioEvent(item.id)
+  },
+  clearAudio() {
+    this.setData({
+      playAudioId: null,
+      userAudioState: false,
+      playTime: '00:00',
+      endTime: '00:00',
+      vProgress: 0,
+    })
+    this.innerAudioContext.stop();
+  },
   delete({
     currentTarget
   }) {
@@ -73,6 +118,7 @@ Page({
             title: '删除成功！',
             icon: "none"
           })
+          this.clearAudio()
         }
       }
     })
@@ -94,6 +140,26 @@ Page({
     wx.navigateTo({
       url: '/pages/activityList/index',
     })
+  }, // 设置时间文案
+  setDuration(label, s) {
+    let t = '';
+    s = Math.ceil(s);
+    if (s > -1) {
+      let min = Math.floor(s / 60) % 60;
+      let sec = s % 60;
+      if (min < 10) {
+        t += "0";
+      }
+      t += min + ":";
+      if (sec < 10) {
+        t += "0";
+      }
+      t += sec;
+    }
+
+    this.setData({
+      [label]: t,
+    })
   },
   createActivityImg(imageUrl, cardReadId) {
     return new Promise(async (resolve, reject) => {
@@ -131,4 +197,10 @@ Page({
       }
     }
   },
+  onHide() {
+    this.clearAudio()
+  },
+  onUnload() {
+    this.clearAudio()
+  }
 })

pages/greeting/index.less

@@ -46,6 +46,7 @@
     }
 
     .body {
+      position: relative;
       margin: 24rpx 0rpx;
       width: 650rpx;
       height: 520rpx;
@@ -59,10 +60,31 @@
         width: 84rpx;
         height: 84rpx;
       }
+
+      .progressBox {
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        padding: 12rpx 40rpx;
+        box-sizing: border-box;
+        width: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 2;
+        display: flex;
+        align-items: center;
+        color: white;
+        font-size: 24rpx;
+
+        .progress {
+          flex: 1;
+          margin: 0px 30rpx;
+          border-radius: 25rpx;
+          overflow: hidden;
+        }
+      }
     }
 
     .footer {
-
       .countBox {
         display: flex;
         align-items: center;
@@ -73,13 +95,13 @@
           align-items: center;
 
           .icon {
-            width: 38rpx;
+            width: 34rpx;
             height: 34rpx;
           }
 
           .num {
             margin-left: 4rpx;
-            font-size: 26rpx;
+            font-size: 28rpx;
             color: #666;
           }
         }

pages/greeting/index.wxml

@@ -11,13 +11,19 @@
         <view class="text">删除</view>
       </view>
     </view>
-    <view class="body" style="background-image: url({{item.cardUrl}});">
-      <image src="/static/image/play-btn.png" class="playBtn" />
+    <view class="body" style="background-image: url({{item.cardUrl}});" bindtap="playAudio" data-item="{{item}}">
+      <image src="/static/image/play-btn.png" class="playBtn" wx:if="{{playAudioId!=item.id}}" />
+      <view class="progressBox" wx:if="{{playAudioId==item.id}}">
+        <view class="after">{{playTime}}</view>
+        <progress percent="{{vProgress}}" class="progress" stroke-width="8" activeColor="#9FFB3E"
+          backgroundColor="#3333340" />
+        <view class="before">{{endTime}}</view>
+      </view>
     </view>
     <view class="footer">
       <view class="countBox">
         <view class="box">
-          <image src="/static/image/play.png" class="icon" />
+          <image src="/static/image/play-btn.png" class="icon" />
           <view class="num">{{item.playAmount}}</view>
         </view>
         <view class="box" bindtap="setLike" data-item='{{item}}' data-index='{{index}}'>

pages/greeting/index.wxss

@@ -38,6 +38,7 @@
   font-size: 24rpx;
 }
 .greetingBox .template .body {
+  position: relative;
   margin: 24rpx 0rpx;
   width: 650rpx;
   height: 520rpx;
@@ -51,6 +52,26 @@
   width: 84rpx;
   height: 84rpx;
 }
+.greetingBox .template .body .progressBox {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  padding: 12rpx 40rpx;
+  box-sizing: border-box;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  color: white;
+  font-size: 24rpx;
+}
+.greetingBox .template .body .progressBox .progress {
+  flex: 1;
+  margin: 0px 30rpx;
+  border-radius: 25rpx;
+  overflow: hidden;
+}
 .greetingBox .template .footer .countBox {
   display: flex;
   align-items: center;
@@ -61,12 +82,12 @@
   align-items: center;
 }
 .greetingBox .template .footer .countBox .box .icon {
-  width: 38rpx;
+  width: 34rpx;
   height: 34rpx;
 }
 .greetingBox .template .footer .countBox .box .num {
   margin-left: 4rpx;
-  font-size: 26rpx;
+  font-size: 28rpx;
   color: #666;
 }
 .greetingBox .template .footer .handle {

project.config.json

@@ -1,30 +0,0 @@
-{
-    "appid": "wx8961a3e5512f307c",
-    "projectname": "render",
-    "compileType": "miniprogram",
-    "libVersion": "2.27.3",
-    "packOptions": {
-        "ignore": [],
-        "include": []
-    },
-    "setting": {
-        "urlCheck": false,
-        "coverView": true,
-        "es6": true,
-        "postcss": true,
-        "minified": true,
-        "showShadowRootInWxmlPanel": true,
-        "packNpmRelationList": [],
-        "ignoreUploadUnusedFiles": true,
-        "compileHotReLoad": true,
-        "babelSetting": {
-            "ignore": [],
-            "disablePlugins": [],
-            "outputPath": ""
-        }
-    },
-    "editorSetting": {
-        "tabIndent": "insertSpaces",
-        "tabSize": 4
-    }
-}

project.private.config.json

@@ -1,85 +0,0 @@
-{
-    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-    "condition": {
-        "miniprogram": {
-            "list": [
-                {
-                    "name": "/pages/index/index",
-                    "pathName": "/pages/index/index",
-                    "query": "readId=103127012&uid=621993583e41481fbf7af7b355387eca",
-                    "launchMode": "default",
-                    "scene": null
-                },
-                {
-                    "name": "作品",
-                    "pathName": "pages/social/works/works",
-                    "query": "id=1548160250807513&title=【识字1】春夏秋冬",
-                    "scene": "1012"
-                },
-                {
-                    "name": "分享团",
-                    "pathName": "pages/groupPage/group-details/group-details",
-                    "query": "productId=1550459447432909",
-                    "scene": 1012
-                },
-                {
-                    "name": "公众号进入",
-                    "pathName": "pages/index/index",
-                    "query": "",
-                    "scene": 1020,
-                    "referrerInfo": {}
-                },
-                {
-                    "name": "公众号文章进入",
-                    "pathName": "pages/index/index",
-                    "query": "",
-                    "scene": 1058
-                },
-                {
-                    "name": "小红花兑换页面",
-                    "pathName": "pages/social/prize/prize",
-                    "query": "",
-                    "scene": null
-                },
-                {
-                    "name": "有问题朗读页面",
-                    "pathName": "pages/social/works/works",
-                    "query": "id=1553402613620097&title=【课文7】怎么都快乐",
-                    "scene": null
-                },
-                {
-                    "name": "活动页面",
-                    "pathName": "pages/activity/index/index",
-                    "query": "",
-                    "scene": null
-                },
-                {
-                    "name": "活动分享进入",
-                    "pathName": "pages/index/index",
-                    "query": "readId=1615468601012143&activity=true",
-                    "scene": null
-                },
-                {
-                    "name": "pages/product/product",
-                    "pathName": "pages/product/product",
-                    "query": "",
-                    "scene": null
-                },
-                {
-                    "name": "用户分享进入",
-                    "pathName": "pages/index/index",
-                    "query": "sid=621993583e41481fbf7af7b355387eca",
-                    "launchMode": "default",
-                    "scene": null
-                },
-                {
-                    "name": "",
-                    "pathName": "pages/activityDet/index",
-                    "query": "id=50",
-                    "launchMode": "default",
-                    "scene": null
-                }
-            ]
-        }
-    }
-}

utils/filter.wxs

@@ -24,7 +24,7 @@ var formatDate2 = function (datetime) {
   };
   var hour = tf(date.getHours());
   var minute = tf(date.getMinutes());
-  return year + '-' + month + '-' + day + '' + hour + ':' + minute;
+  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute;
 }
 
 function gradeFilter(grade) {