开发联调贺卡活动

api/activity.js

@@ -13,5 +13,7 @@ module.exports = {
   // 点赞
   thumbsUp: data => request(`/card/activity/like/${data}`, 'get'),
   // 删除作品
-  deleteActivity: data => request(`card/activity/delete/${data}`, 'get'),
+  deleteActivity: data => request(`/card/activity/delete/${data}`, 'get'),
+  // 获取分享文案
+  getShareText: data => request('/card/activity/share', 'get', data),
 }

app.json

@@ -1,54 +1,54 @@
 {
-    "pages": [
-      "pages/activityList/index",
-        "pages/activityDet/index",
-        "pages/index/index",
-        "pages/greeting/index",
-        "pages/login/login",
-        "pages/my/index",
-        "pages/userWorks/index",
-        "pages/reading/reading",
-        "pages/social/works/works",
-        "pages/social/insideMessage/insideMessage",
-        "pages/social/replyDetail/replyDetail",
-        "pages/social/littleFlower/littleFlower",
-        "pages/social/prize/prize",
-        "pages/main/class/class",
-        "pages/main/books/books",
-        "pages/main/week/week",
-        "pages/main/searchResult/searchResult",
-        "pages/user/myEdit/myEdit",
-        "pages/myconcern/myconcern",
-        "pages/user/myWallet/myWallet",
-        "pages/user/mycourse/mycourse",
-        "pages/user/myread/myread",
-        "pages/mycollection/mycollection",
-        "pages/user/walletDetails/walletDetails",
-        "pages/myworks/myworks",
-        "pages/activity/index/index",
-        "pages/activity/rule/rule",
-        "pages/activity/strategy/strategy",
-        "pages/activity/priceList/priceList",
-        "pages/product/product",
-        "pages/activity/goodList/goodList"
-    ],
-    "window": {
-        "backgroundTextStyle": "light",
-        "navigationBarBackgroundColor": "#ededed",
-        "navigationBarTitleText": "小学语文朗读配音",
-        "navigationBarTextStyle": "black",
-        "onReachBottomDistance": 50,
-        "enablePullDownRefresh": true
-    },
-    "debug": false,
-    "sitemapLocation": "sitemap.json",
-    "plugins": {
-        "myPlugin": {
-            "version": "1.2.1",
-            "provider": "wx7279a29ef86a3002"
-        }
-    },
-    "resolveAlias": {
-        "~/*": "/*"
+  "pages": [
+    "pages/greeting/index",
+    "pages/activityList/index",
+    "pages/activityDet/index",
+    "pages/index/index",
+    "pages/login/login",
+    "pages/my/index",
+    "pages/userWorks/index",
+    "pages/reading/reading",
+    "pages/social/works/works",
+    "pages/social/insideMessage/insideMessage",
+    "pages/social/replyDetail/replyDetail",
+    "pages/social/littleFlower/littleFlower",
+    "pages/social/prize/prize",
+    "pages/main/class/class",
+    "pages/main/books/books",
+    "pages/main/week/week",
+    "pages/main/searchResult/searchResult",
+    "pages/user/myEdit/myEdit",
+    "pages/myconcern/myconcern",
+    "pages/user/myWallet/myWallet",
+    "pages/user/mycourse/mycourse",
+    "pages/user/myread/myread",
+    "pages/mycollection/mycollection",
+    "pages/user/walletDetails/walletDetails",
+    "pages/myworks/myworks",
+    "pages/activity/index/index",
+    "pages/activity/rule/rule",
+    "pages/activity/strategy/strategy",
+    "pages/activity/priceList/priceList",
+    "pages/product/product",
+    "pages/activity/goodList/goodList"
+  ],
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#ededed",
+    "navigationBarTitleText": "朗读小咖秀",
+    "navigationBarTextStyle": "black",
+    "onReachBottomDistance": 50,
+    "enablePullDownRefresh": true
+  },
+  "debug": false,
+  "sitemapLocation": "sitemap.json",
+  "plugins": {
+    "myPlugin": {
+      "version": "1.2.1",
+      "provider": "wx7279a29ef86a3002"
     }
+  },
+  "resolveAlias": {
+    "~/*": "/*"
+  }
 }

app.wxss

@@ -1,57 +1,72 @@
 /**app.wxss**/
 page {
-    width: 100%;
-    height: 100%;
-    overflow-x: hidden;
-    color: #444;
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
-    background: #eee;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  color: #444;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  background: #eee;
 }
 
 view {
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 text {
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 .container {
-    height: auto;
-    box-sizing: border-box;
-    padding-top: 80rpx;
-    /* color: #444; */
-    font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
+  height: auto;
+  box-sizing: border-box;
+  padding-top: 80rpx;
+  /* color: #444; */
+  font-family: PingFang SC, Microsoft Yahei, Source Han Sans CN, SimHei;
 }
 
 ::-webkit-scrollbar {
-    display: none;
-    width: 0;
-    height: 0;
-    color: transparent;
+  display: none;
+  width: 0;
+  height: 0;
+  color: transparent;
 }
 
 .textOver {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .resetBtn {
-    padding: 0px;
-    margin: 0;
-    line-height: normal;
-    background-color: transparent;
+  padding: 0px;
+  margin: 0;
+  line-height: normal;
+  background-color: transparent;
 }
 
 .resetBtn::after {
-    border: none;
+  border: none;
 }
 
 #share {
-    width: 375px;
-    height: 300px;
-    position: absolute;
-    left: -9999rpx;
-    top: -9999rpx;
+  width: 375px;
+  height: 300px;
+  position: absolute;
+  left: -9999rpx;
+  top: -9999rpx;
+}
+
+/* 转圈动画 */
+@keyframes identifier {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }

pages/activityDet/index.js

@@ -18,7 +18,6 @@ Page({
     toWidth: 100,
     configure: {},
     avatar: '',
-    percent: 0,
     // 本地录音地址
     tempFilePath: '',
     // 线上录音地址
@@ -30,10 +29,17 @@ Page({
     // 是否更改过头像
     changeAvatarFlag: false,
     greetingCard: null,
-    userAudioState: false
+    userAudioState: false,
+    // 当前音频播放时长
+    playTime: '00:00',
+    endTime: '00:00',
+    vProgress: 0
   },
   async onLoad(options) {
     let configure = await getActivityInfo(options.id)
+    wx.setNavigationBarTitle({
+      title: configure.title,
+    })
     this.setData({
       configure,
       avatar: configure.photoText,
@@ -46,11 +52,6 @@ Page({
       bits: configure.bgMusicLength[1]
     })
   },
-  setInput({
-    currentTarget
-  }) {
-    console.log(currentTarget.dataset.info);
-  },
   async changeAvatar(e) {
     const {
       avatarUrl
@@ -78,6 +79,7 @@ Page({
       let countDown = Number(this.data.configure.bgMusicLength)
       // 倒计时
       this.dsq = setInterval(item => {
+        console.log('仍然倒计时呢');
         // 倒计时结束
         if (countDown == 1) {
           this.stopRecording()
@@ -105,7 +107,6 @@ Page({
       recorderManager.start(options);
       //监听录音结束事件
       recorderManager.onStop((res) => {
-        console.log('录音结束', res);
         this.setData({
           tempFilePath: res.tempFilePath,
         });
@@ -116,7 +117,7 @@ Page({
     }
   },
   stopRecording() {
-    clearInterval(dsq)
+    clearInterval(this.dsq)
     this.innerAudioContext.stop();
     recorderManager.stop();
     this.setData({
@@ -145,11 +146,6 @@ Page({
         this.uploadActivity()
       },
     })
-    uploadTask.onProgressUpdate((res) => {
-      this.setData({
-        percent: res.progress
-      })
-    })
   },
   // 上传贺卡
   async uploadActivity() {
@@ -159,11 +155,14 @@ Page({
         audioPath: this.data.audioPath,
         // 生成贺卡图片地址
         cardUrl,
+        toText: this.data.configure.toText,
+        fromText: this.data.configure.fromText,
         templateId: this.data.id
       }
       console.log(data, 'data');
       let greetingCard = await saveActivity(data)
       console.log('贺卡生成', greetingCard);
+      this.setDuration('endTime', greetingCard.duration)
       this.setData({
         greetingCard,
         uploadState: false
@@ -180,7 +179,13 @@ Page({
         userAudioState: false
       })
     } else {
-      this.innerAudioContext.src = this.data.tempFilePath;
+      this.innerAudioContext.src = this.data.greetingCard.audioPath;
+      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.play();
       this.setData({
         userAudioState: true
@@ -258,7 +263,6 @@ Page({
                 wx.canvasToTempFilePath({
                   canvas: canvas,
                   success(res) {
-                    console.log('9');
                     if (createType == 'share') {
                       resolve({
                         title: '请欣赏我的课文朗读作品，点赞+评论。',
@@ -290,7 +294,7 @@ Page({
       })
       return {
         title: '请欣赏我的课文朗读作品，点赞+评论。',
-        path: `/pages/index/index?readId`,
+        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
         imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png',
         promise
       }
@@ -301,5 +305,30 @@ Page({
         imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
       }
     }
+  },
+  // 设置时间文案
+  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,
+    })
+  },
+  onHide() {
+    recorderManager.stop()
+    this.innerAudioContext.stop()
   }
 })

pages/activityDet/index.less

@@ -4,6 +4,7 @@
   background-color: #f2f6fc;
 
   .header {
+    position: relative;
     width: 100%;
     height: 600rpx;
     overflow: hidden;
@@ -55,12 +56,32 @@
       }
     }
 
-
     .avatarImg {
       position: absolute;
       display: block;
     }
 
+    .progressBox {
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      padding: 20rpx 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;
+      }
+    }
   }
 
   .btnsBox {
@@ -147,28 +168,39 @@
     }
   }
 
-  .maskBox {
+  .mask {
     position: fixed;
-    top: 0rpx;
-    right: 0rpx;
-    bottom: 0rpx;
-    left: 0rpx;
-    margin: auto;
-    padding: 71rpx 30rpx 30rpx;
-    box-sizing: border-box;
-    width: 290rpx;
-    height: 290rpx;
-    border-radius: 30rpx;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.8);
-    text-align: center;
-    font-size: 30rpx;
-    z-index: 10;
+    left: 0px;
+    top: 0px;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.2);
+    z-index: 999;
+
+    .maskBox {
+      position: fixed;
+      top: 0rpx;
+      right: 0rpx;
+      bottom: 0rpx;
+      left: 0rpx;
+      margin: auto;
+      padding: 71rpx 30rpx 30rpx;
+      box-sizing: border-box;
+      width: 290rpx;
+      height: 290rpx;
+      border-radius: 30rpx;
+      color: white;
+      background-color: rgba(0, 0, 0, 0.8);
+      text-align: center;
+      font-size: 30rpx;
+      z-index: 10;
 
-    .speedProgress {
-      margin: 20rpx 0rpx 60rpx;
-      border-radius: 50rpx;
-      overflow: hidden;
+      .img {
+        width: 110rpx;
+        height: 110rpx;
+        margin-bottom: 20rpx;
+        animation: identifier 2.6s infinite linear;
+      }
     }
   }
 }

pages/activityDet/index.wxml

@@ -2,18 +2,19 @@
   <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'
+      <input value="{{configure.fromText}}" disabled="{{state=='process'}}" class="text" maxlength='8'
         style="color:{{configure.fromColor}};font-size: {{configure.fromFontSize}}rpx;border-color: {{configure.fromColor}}60;width: {{fromWidth}}rpx;"
         bindinput="bindKeyInput" data-type='from' />
-      <image src="/static/image/edit_new.png" />
+      <image src="/static/image/edit_new.png" wx:if="{{state!='process'}}" />
     </view>
     <view class="toBox" style="top:{{configure.templateBase.toTop}}rpx;left: {{configure.templateBase.toLeft}}rpx;">
-      <input value="{{configure.toText}}" class="text" maxlength='8'
+      <input value="{{configure.toText}}" disabled="{{state=='process'}}" class="text" maxlength='8'
         style="color:{{configure.toColor}};font-size: {{configure.toFontSize}}rpx;border-color: {{configure.toColor}}60;width: {{toWidth}}rpx;"
         bindinput="bindKeyInput" data-type='to' />
-      <image src="/static/image/edit_new.png" />
+      <image src="/static/image/edit_new.png" wx:if="{{state!='process'}}" />
     </view>
     <button class="avatar resetBtn" open-type="chooseAvatar" bind:chooseavatar="changeAvatar"
+      wx:if="{{state!='process'}}"
       style="top:{{configure.templateBase.photoTop}}rpx;left: {{configure.templateBase.photoLeft}}rpx;width: {{configure.templateBase.photoWidth}}rpx;height:{{configure.templateBase.photoHeight}}rpx">
       <view class="tips" wx:if="{{!changeAvatarFlag}}">点击更换图片</view>
     </button>
@@ -23,6 +24,12 @@
   </view>
   <view class="header" wx:if="{{state=='after'&&greetingCard.cardUrl}}">
     <image src="{{greetingCard.cardUrl}}" class="templateImg" />
+    <view class="progressBox">
+      <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="btnsBox" wx:if="{{state!='after'}}">
@@ -52,10 +59,11 @@
     <view wx:for="{{greeting}}" wx:key="index" class="content">{{item}}</view>
   </view>
   <!-- 上传进度 -->
-  <view class="maskBox" catchtap="true" wx:if="{{uploadState}}">
-    <view>{{percent}}%</view>
-    <progress percent="{{percent}}" class="speedProgress" stroke-width="10" activeColor="#C3F166" />
-    <view>祝福生成中</view>
+  <view class="mask" wx:if="{{uploadState}}">
+    <view class="maskBox" catchtap="true">
+      <image src="/static/index/zqq.png" class="img" />
+      <view>祝福生成中</view>
+    </view>
   </view>
 </view>
 <canvas id='share' type="2d"> </canvas>

pages/activityDet/index.wxss

@@ -4,6 +4,7 @@
   background-color: #f2f6fc;
 }
 .activityDet .header {
+  position: relative;
   width: 100%;
   height: 600rpx;
   overflow: hidden;
@@ -53,6 +54,26 @@
   position: absolute;
   display: block;
 }
+.activityDet .header .progressBox {
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  padding: 20rpx 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;
+}
+.activityDet .header .progressBox .progress {
+  flex: 1;
+  margin: 0px 30rpx;
+  border-radius: 25rpx;
+  overflow: hidden;
+}
 .activityDet .btnsBox {
   margin-top: 40rpx;
   position: relative;
@@ -126,7 +147,16 @@
   text-align: center;
   margin: 20rpx auto 0rpx;
 }
-.activityDet .maskBox {
+.activityDet .mask {
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  z-index: 999;
+}
+.activityDet .mask .maskBox {
   position: fixed;
   top: 0rpx;
   right: 0rpx;
@@ -144,8 +174,9 @@
   font-size: 30rpx;
   z-index: 10;
 }
-.activityDet .maskBox .speedProgress {
-  margin: 20rpx 0rpx 60rpx;
-  border-radius: 50rpx;
-  overflow: hidden;
+.activityDet .mask .maskBox .img {
+  width: 110rpx;
+  height: 110rpx;
+  margin-bottom: 20rpx;
+  animation: identifier 2.6s infinite linear;
 }

pages/greeting/index.js

@@ -1,28 +1,134 @@
 import {
-    getMyActivity,
-    thumbsUp,
-    deleteActivity
+  getMyActivity,
+  thumbsUp,
+  deleteActivity,
+  getShareText
 } from '~/api/activity'
 Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    isMy: false,
+    pageNo: 1,
+    totalSize: 0,
+    list: [],
+    uid: ''
+  },
 
-    /**
-     * 页面的初始数据
-     */
-    data: {
-        isMy: false
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad(options) {
-        this.getMyActivity()
-    },
-    async getMyActivity() {
-        let res = await getMyActivity()
-        console.log(res);
-    },
-    onShareAppMessage() {
-
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    this.getMyActivity()
+    this.setData({
+      uid: wx.getStorageSync('uid')
+    })
+  },
+  async getMyActivity() {
+    let {
+      list,
+      totalSize
+    } = await getMyActivity({
+      pageNo: this.data.pageNo,
+      pageSize: 6
+    })
+    list = [...this.data.list, ...list]
+    let isMy = false
+    if (list.length > 0) {
+      isMy = list[0].uid == wx.getStorageSync('uid')
+    }
+    this.setData({
+      isMy,
+      list,
+      totalSize
+    })
+  },
+  onReachBottom() {
+    if (this.data.totalSize > this.data.list.length) {
+      this.setData({
+        pageNo: this.data.pageNo + 1
+      })
+      this.getMyActivity()
+    }
+  },
+  delete({
+    currentTarget
+  }) {
+    wx.showModal({
+      title: '确认删除吗？',
+      content: '作品将被永久删除，无法找回。',
+      confirmText: '确认',
+      cancelText: '取消',
+      success: async (res) => {
+        if (res.confirm) {
+          await deleteActivity(currentTarget.dataset.id)
+          let beforeList = this.data.list.filter(item => {
+            return item.id != currentTarget.dataset.id
+          })
+          this.setData({
+            list: beforeList
+          })
+          wx.showToast({
+            title: '删除成功！',
+            icon: "none"
+          })
+        }
+      }
+    })
+  },
+  async setLike({
+    currentTarget
+  }) {
+    if (currentTarget.dataset.item.isLike) {
+      return
+    }
+    let index = currentTarget.dataset.index
+    await thumbsUp(currentTarget.dataset.item.id)
+    this.setData({
+      [`list[${index}].isLike`]: true,
+      [`list[${index}].likeAmount`]: ++this.data.list[index].likeAmount
+    })
+  },
+  jump() {
+    wx.navigateTo({
+      url: '/pages/activityList/index',
+    })
+  },
+  createActivityImg(imageUrl, cardReadId) {
+    return new Promise(async (resolve, reject) => {
+      let title = await getShareText({
+        cardReadId
+      })
+      resolve({
+        title,
+        path: `/pages/greeting/index?&uid=${wx.getStorageSync('uid')}`,
+        imageUrl
+      })
+    })
+  },
+  onShareAppMessage({
+    target,
+    from,
+  }) {
+    if (from == 'button') {
+      const promise = new Promise(resolve => {
+        this.createActivityImg(target.dataset.item.cardUrl, target.dataset.item.id).then(res => {
+          resolve(res)
+        })
+      })
+      return {
+        title: '',
+        path: `/pages/greeting/index?&uid=${wx.getStorageSync('uid')}`,
+        imageUrl: target.dataset.img,
+        promise
+      }
+    } else {
+      return {
+        title: '课文朗读，从未如此有趣。',
+        path: `/pages/index/index?&uid=${wx.getStorageSync('uid')}`,
+        imageUrl: 'http://reader-wx.ai160.com/images/reader/v3/shareContent.png'
+      }
     }
+  },
 })

pages/greeting/index.json

@@ -1,5 +1,5 @@
 {
     "usingComponents": {},
-    "navigationBarTitleText": "我的电子贺卡",
+    "navigationBarTitleText": "我的贺卡",
     "enablePullDownRefresh": false
 }

pages/greeting/index.less

@@ -1,100 +1,101 @@
 .greetingBox {
-    width: 100vw;
-    min-height: 100vh;
-    padding: 26rpx 20rpx;
-    background-color: #fcd9927c;
+  width: 100vw;
+  min-height: 100vh;
+  padding: 26rpx 20rpx;
+  background-color: #fcd9927c;
+  box-sizing: border-box;
+
+  .template {
+    width: 100%;
+    padding: 20rpx 31rpx;
+    margin-bottom: 40rpx;
     box-sizing: border-box;
+    background-color: white;
+    border-radius: 20rpx;
+    box-shadow: 0 2rpx 24rpx 0 rgba(252, 216, 146, 0.51);
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .left {
+        .title {
+          font-size: 34rpx;
+          font-weight: bold;
+        }
+
+        .time {
+          font-size: 24rpx;
+          color: #666;
+        }
+      }
+
+      .right {
+        text-align: center;
 
-    .template {
-        width: 100%;
-        padding: 20rpx 31rpx;
-        margin-bottom: 40rpx;
-        box-sizing: border-box;
-        background-color: white;
-        border-radius: 20rpx;
-        box-shadow: 0 2rpx 24rpx 0 rgba(252, 216, 146, 0.51);
-
-        .header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .left {
-                .title {
-                    font-size: 34rpx;
-                    font-weight: bold;
-                }
-
-                .time {
-                    font-size: 24rpx;
-                    color: #666;
-                }
-            }
-
-            .right {
-                text-align: center;
-
-                .delete {
-                    width: 24rpx;
-                    height: 32rpx;
-                }
-
-                .text {
-                    font-size: 24rpx;
-                }
-            }
+        .delete {
+          width: 24rpx;
+          height: 32rpx;
         }
 
-        .body {
-            margin: 24rpx 0rpx;
-            width: 650rpx;
-            height: 520rpx;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #D8D8D8;
-
-            .playBtn {
-                width: 84rpx;
-                height: 84rpx;
-            }
+        .text {
+          font-size: 24rpx;
+        }
+      }
+    }
+
+    .body {
+      margin: 24rpx 0rpx;
+      width: 650rpx;
+      height: 520rpx;
+      background-size: 100% 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #D8D8D8;
+
+      .playBtn {
+        width: 84rpx;
+        height: 84rpx;
+      }
+    }
+
+    .footer {
+
+      .countBox {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .box {
+          display: flex;
+          align-items: center;
+
+          .icon {
+            width: 38rpx;
+            height: 34rpx;
+          }
+
+          .num {
+            margin-left: 4rpx;
+            font-size: 26rpx;
+            color: #666;
+          }
         }
+      }
+
+      .handle {
+        display: flex;
+        justify-content: space-between;
+        justify-content: center;
+        margin-top: 28rpx;
 
-        .footer {
-
-            .countBox {
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-
-                .box {
-                    display: flex;
-                    align-items: center;
-
-                    .icon {
-                        width: 38rpx;
-                        height: 34rpx;
-                    }
-
-                    .num {
-                        margin-left: 4rpx;
-                        font-size: 26rpx;
-                        color: #666;
-                    }
-                }
-            }
-
-            .handle {
-                display: flex;
-                justify-content: space-between;
-                justify-content: center;
-                margin-top: 28rpx;
-
-                .btn {
-                    width: 294rpx;
-                    height: 86rpx;
-                }
-            }
+        .btn {
+          width: 294rpx;
+          height: 86rpx;
         }
+      }
     }
+  }
 }

pages/greeting/index.wxml

@@ -1,35 +1,40 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
 <view class="greetingBox">
-    <view class="template" wx:for="{{5}}" wx:key="index">
-        <view class="header">
-            <view class="left">
-                <view class="title">模版名字</view>
-                <view class="time">2022-11-03 11:01</view>
-            </view>
-            <view class="right" wx:if="{{isMy}}">
-                <image src="/static/index/delete.png" class="delete" />
-                <view class="text">删除</view>
-            </view>
-        </view>
-        <view class="body">
-            <image src="/static/image/play-btn.png" class="playBtn" />
+  <view class="template" wx:for="{{list}}" wx:key="id">
+    <view class="header">
+      <view class="left">
+        <view class="title">{{item.templateName}}</view>
+        <view class="time">{{filters.formatDate2(item.gmtCreated)}}</view>
+      </view>
+      <view class="right" wx:if="{{isMy}}" data-id='{{item.id}}' bindtap="delete">
+        <image src="/static/index/delete.png" class="delete" />
+        <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>
+    <view class="footer">
+      <view class="countBox">
+        <view class="box">
+          <image src="/static/image/play.png" class="icon" />
+          <view class="num">{{item.playAmount}}</view>
         </view>
-        <view class="footer">
-            <view class="countBox">
-                <view class="box">
-                    <image src="/static/image/play.png" class="icon" />
-                    <view class="num">12312</view>
-                </view>
-                <view class="box">
-                    <image src="/static/image/red_like_empty.png" class="icon" />
-                    <view class="num">0</view>
-                </view>
-            </view>
-            <view class="handle" style="justify-content:{{isMy?'center':'space-between'}}">
-                <image src="http://reader-wx.ai160.com/images/reader/card/send_blessings.png" class="btn"
-                    wx:if="{{isMy}}" />
-                <image src="http://reader-wx.ai160.com/images/reader/card/show_off.png" class="btn" wx:if="{{!isMy}}" />
-                <image src="http://reader-wx.ai160.com/images/reader/card/wyyw.png" class="btn" wx:if="{{!isMy}}" />
-            </view>
+        <view class="box" bindtap="setLike" data-item='{{item}}' data-index='{{index}}'>
+          <image src="{{item.isLike?'/static/image/red_like.png':'/static/image/red_like_empty.png'}}" class="icon" />
+          <view class="num">{{item.likeAmount}}</view>
         </view>
+      </view>
+      <view class="handle" style="justify-content:{{isMy?' center':'space-between'}}">
+        <button class="resetBtn" open-type="share" data-item='{{item}}' wx:if="{{isMy}}">
+          <image src="http://reader-wx.ai160.com/images/reader/card/send_blessings.png" class="btn" />
+        </button>
+        <button class="resetBtn" open-type="share" data-img='{{item.cardUrl}}' wx:if="{{!isMy}}">
+          <image src="http://reader-wx.ai160.com/images/reader/card/show_off.png" class="btn" />
+        </button>
+        <image src="http://reader-wx.ai160.com/images/reader/card/wyyw.png" class="btn" wx:if="{{!isMy}}"
+          bindtap="jump" />
+      </view>
     </view>
+  </view>
 </view>

pages/greeting/index.wxss

@@ -41,6 +41,7 @@
   margin: 24rpx 0rpx;
   width: 650rpx;
   height: 520rpx;
+  background-size: 100% 100%;
   display: flex;
   align-items: center;
   justify-content: center;

pages/index/index.js

@@ -75,7 +75,7 @@ Page({
         updateId: 0, // 刷新id
         statusbarobj: {
             isshowbtn: true, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
         grade: wx.getStorageSync('grade'),
         noMoreWork: false, // 没有更多作品 已经到底了
@@ -409,7 +409,7 @@ Page({
             this.getHelpAuth()
         }
         wx.setNavigationBarTitle({
-            title: '小学语文朗读配音'
+            title: '朗读小咖秀'
         })
         console.log('页面返回页面返回', this.data.fromLoginIndex)
         if (this.data.fromLoginIndex || this.data.fromLoginIndex == 0) {

pages/mycollection/mycollection.js

@@ -15,7 +15,7 @@ Page({
         commentShow: false,
         statusbarobj: {
             isshowbtn: false, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
     },
 

pages/myconcern/myconcern.js

@@ -13,7 +13,7 @@ Page({
         line2: '快去关注其他人吧',
         statusbarobj: {
             isshowbtn: false, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
     },
     toUserDetails: function(e) {

pages/myworks/myworks.js

@@ -20,7 +20,7 @@ Page({
         pageSize: 3,
         statusbarobj: {
             isshowbtn: false, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
 
     },

pages/product/product.js

@@ -6,7 +6,7 @@ Page({
      * 页面的初始数据
      */
     data: {
-        name: '小学语文朗读配音',
+        name: '朗读小咖秀',
         price: 9
     },
     /**

pages/reading/reading.js

@@ -49,7 +49,7 @@ Page({
         ifScoreShow: false,
         statusbarobj: {
             isshowbtn: false, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
         isScroll: true,
         noMoreWork: false,

pages/social/insideMessage/insideMessage.js

@@ -10,7 +10,7 @@ Page({
         index: 1,
         statusbarobj: {
             isshowbtn: false, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
     },
     onLoad: function(options) {

pages/social/littleFlower/littleFlower.js

@@ -10,7 +10,7 @@ Page({
         isIOS: false,
         statusbarobj: {
             isshowbtn: false, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
     },
     onLoad: function (options) {

pages/user/myEdit/myEdit.js

@@ -18,7 +18,7 @@ Page({
         gradeCode: '',
         statusbarobj: {
             isshowbtn: false, //是否显示按钮
-            title: "小学语文朗读配音", //标题
+            title: "朗读小咖秀", //标题
         },
         gradeObject: [{
                 code: 'PRIMARY_FIRST_GRADE',

utils/filter.wxs

@@ -1,41 +1,55 @@
 var formatNumber = function (n) {
-    n = n.toString()
-    return n[1] ? n : '0' + n
+  n = n.toString()
+  return n[1] ? n : '0' + n
 }
 /**
  * 将时间戳(1570550400)格式转为 yyyy-MM-dd格式
  */
 var formatDate = function (datetime) {
-    var time = datetime * 1
-    var date = getDate(time);
-    var year = date.getFullYear();
-    var month = date.getMonth() + 1;
-    var day = date.getDate();
-    return year + '年' + month + '月' + day + '日';
+  var time = datetime * 1
+  var date = getDate(time);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  return year + '年' + month + '月' + day + '日';
+}
+var formatDate2 = function (datetime) {
+  var time = datetime * 1
+  var date = getDate(time);
+  var year = date.getFullYear();
+  var month = date.getMonth() + 1;
+  var day = date.getDate();
+  var tf = function (i) {
+    return (i < 10 ? '0' : '') + i
+  };
+  var hour = tf(date.getHours());
+  var minute = tf(date.getMinutes());
+  return year + '-' + month + '-' + day + '' + hour + ':' + minute;
 }
 
 function gradeFilter(grade) {
-    if (!grade) {
-        return '暂无'
-    }
-    var gradeObj = {
-        "PRIMARY_FIRST_GRADE": "一年级",
-        "PRIMARY_SECOND_GRADE": "二年级",
-        "PRIMARY_THREE_GRADE": "三年级",
-        "PRIMARY_SENIOR_GRADE": "四年级",
-        "PRESCHOOL": "学前班",
-    }
-    return gradeObj[grade]
+  if (!grade) {
+    return '暂无'
+  }
+  var gradeObj = {
+    "PRIMARY_FIRST_GRADE": "一年级",
+    "PRIMARY_SECOND_GRADE": "二年级",
+    "PRIMARY_THREE_GRADE": "三年级",
+    "PRIMARY_SENIOR_GRADE": "四年级",
+    "PRESCHOOL": "学前班",
+  }
+  return gradeObj[grade]
 }
 // 数字满万补w
 function numFilter(num) {
-    if (!num || num < 10000) {
-        return num
-    }
-    return Math.floor(num / 100) / 100 + 'w'
+  if (!num || num < 10000) {
+    return num
+  }
+  return Math.floor(num / 100) / 100 + 'w'
 }
 module.exports = {
-    formatDate: formatDate,
-    gradeFilter: gradeFilter,
-    numFilter: numFilter
+  formatDate: formatDate,
+  formatDate2: formatDate2,
+  gradeFilter: gradeFilter,
+  numFilter: numFilter
 }