reader/pages/activityDet/index.wxml

<view class="activityDet">
  <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}}" 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" wx:if="{{state!='process'}}" />
    </view>
    <view class="toBox" style="top:{{configure.templateBase.toTop}}rpx;left: {{configure.templateBase.toLeft}}rpx;">
      <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" 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>
    <image class="avatarImg"
      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 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'}}">
    <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=='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=='process'}}">
      倒计时：<view class="countBox">{{tens}}</view>
      <view class="countBox">{{bits}}</view>秒
    </view>
  </view>
  <!-- 试听与分享控制区域 -->
  <view class="music" wx:if="{{state=='after'}}">
    <!-- <view class="music"> -->
    <image
      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>
  <!-- 祝福语 -->
  <view class="blessing">
    <view wx:for="{{greeting}}" wx:key="index" class="content">{{item}}</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>