wxsapp/SuperBrain/pages/pk/pk.wxml

<!--pages/pk/pk.wxml-->
<image src="../../resource/bg_pk.png" class="pk-bg"></image>
<view class="pk-friend-wait" hidden="{{friend.hidden}}">
  <text class="name">发起者：{{pkUser.nickName}}</text>
  <view class="head">
    <image class="head-bg-1" src="../../resource/bg_symbol.png"></image>
    <image class="head-bg-2" src="../../resource/round_head.png"></image>
    <image class="head-main" src="{{pkUser.headImg}}"></image>
  </view>
  <view class="mid-body" hidden="{{friend.hiddenRadar}}">
    <view class="radar">
      <view class="radar-1" animation="{{radarAnimation1}}"></view>
      <view class="radar-2" animation="{{radarAnimation2}}"></view>
      <view class="radar-3" animation="{{radarAnimation3}}"></view>
      <view class="radar-4" animation="{{radarAnimation4}}"></view>
      <image class="radar-img" src="../../resource/default_head_img.png"></image>
    </view>
    <text class="tip">等待对手加入中…</text>
  </view>
  <view class="leave" hidden="{{friend.hiddenLeave}}">
    <text class="tip">发起者已经离开</text>
  </view>
  <view class="footer">
    <button class="btn btn-back" bindtap="toHome">放弃</button>
    <button class="btn btn-share" id="againInvite" open-type="share">{{friend.shareText}}</button>
  </view>
</view>
<view class="pk-rank-wait" hidden="{{rankWaitHidden}}">
  <view class="radar">
    <view class="radar-1" animation="{{radarAnimation1}}"></view>
    <view class="radar-2" animation="{{radarAnimation2}}"></view>
    <view class="radar-3" animation="{{radarAnimation3}}"></view>
    <view class="radar-4" animation="{{radarAnimation4}}"></view>
    <image class="radar-img" src="{{wxuser.avatarUrl}}"></image>
  </view>
  <image class="bg-content" src="../../resource/bg_symbol.png"></image>
  <view class="content">
    <text>{{pkUser.nickName}}</text>
    <text>来自：{{pkUser.city}}</text>
    <text>已战{{pkUser.games}}场</text>
    <view>
      <image src="../../resource/ic_brain_coin.png"></image>
      <text>{{tools.unit(pkUser.cost)}}</text>
    </view>
  </view>
</view>
<view class="pk-into" hidden="{{pkIntoHidden}}">
  <view class="top" animation="{{intoTopAnimation}}">
    <image class="head-bg" src="../../resource/round_head.png"></image>
    <image class="head-main" src="{{pkUser.headImg}}"></image>
    <view class="content">
      <text>{{pkUser.nickName}}</text>
      <text>来自：{{pkUser.city}}</text>
      <text>已战{{pkUser.games}}场</text>
      <view>
        <image src="../../resource/ic_brain_coin.png"></image>
        <text>{{tools.unit(pkUser.cost)}}</text>
      </view>
    </view>
  </view>
  <view class="mid">
    <image class="bg-word" src="../../resource/bg_symbol.png"></image>
    <image class="word" src="../../resource/ic_pk_word.png"></image>
  </view>
  <view class="bottom" animation="{{intoBottomAnimation}}">
    <view class="content">
      <text>{{pkUser.joinNickName}}</text>
      <text>来自：{{pkUser.joinCity}}</text>
      <text>已战{{pkUser.joinGames}}场</text>
      <view>
        <image src="../../resource/ic_brain_coin.png"></image>
        <text>{{tools.unit(pkUser.cost)}}</text>
      </view>
    </view>
    <image class="head-bg" src="../../resource/round_head.png"></image>
    <image class="head-main" src="{{pkUser.joinHeadImg}}"></image>
  </view>
</view>
<view class="pk-room" hidden="{{room.hidden}}">
  <view class="head-left">
    <view class="head-left-bg"></view>
    <image class="head-bg" src="../../resource/round_head.png"></image>
    <image class="head-main" src="{{pkUser.headImg}}"></image>
    <text class="name">{{pkUser.nickName}}</text>
  </view>
  <view class="head-mid" hidden="{{room.hiddenDown}}">
    <canvas style="width: 124rpx;height: 124rpx;" canvas-id="countDownCanvas"></canvas>
    <view class="head-mid-number">
      <text>{{countDown}}</text>
    </view>
  </view>
  <view class="head-right">
    <view class="head-left-bg"></view>
    <image class="head-bg" src="../../resource/round_head.png"></image>
    <image class="head-main" src="{{pkUser.joinHeadImg}}"></image>
    <text class="name">{{pkUser.joinNickName}}</text>
  </view>
  <view class="qa" hidden="{{room.hiddenQa}}">
    <view class="qa-body">
      <view class="qa-type" hidden="{{room.hiddenQaType}}">
        <image class="qa-type-bg" src="../../resource/room_q_type.png"></image>
        <text class="qa-type-text">{{questionType}}</text>
        <text class="qa-q-num">第{{num}}题</text>
      </view>
      <image class="qa-last" src="../../resource/room_double_score.png" hidden="{{room.hiddenQaLast}}"></image>
      <view hidden="{{room.hiddenQuestion}}">
        <text class="qa-q">{{question.question}}</text>
      </view>
    </view>
    <view class="qa-content">
      <view class="qa-content-left">
        <text class="grade">{{pointC}}</text>
        <view class="grade-bar">
          <view class="grade-bar-inner" style="{{gradeLeftStyle}}"></view>
        </view>
      </view>
      <view class="qa-content-mid">
        <view class="answer {{abcd[0].style}}" bindtap="tagA">
          <image src="{{abcd[0].left}}"></image>
          <text>{{question.a}}</text>
          <image src="{{abcd[0].right}}"></image>
        </view>
        <view class="answer {{abcd[1].style}}" bindtap="tagB">
          <image src="{{abcd[1].left}}"></image>
          <text>{{question.b}}</text>
          <image src="{{abcd[1].right}}"></image>
        </view>
        <view class="answer {{abcd[2].style}}" bindtap="tagC">
          <image src="{{abcd[2].left}}"></image>
          <text>{{question.c}}</text>
          <image src="{{abcd[2].right}}"></image>
        </view>
        <view class="answer {{abcd[3].style}}" bindtap="tagD">
          <image src="{{abcd[3].left}}"></image>
          <text>{{question.d}}</text>
          <image src="{{abcd[3].right}}"></image>
        </view>
      </view>
      <view class="qa-content-right">
        <text class="grade">{{joinPointC}}</text>
        <view class="grade-bar">
          <view class="grade-bar-inner" style="{{gradeRightStyle}}"></view>
        </view>
      </view>
    </view>
  </view>
  <view class="result" hidden="{{room.hiddenResult}}">
    <view class="grade ">
      <view class="grade-left {{result.left}}">
        <text>{{pointC}}<text>分</text></text>
      </view>
      <view class="grade-right {{result.right}}">
        <text>{{joinPointC}}<text>分</text></text>
      </view>
    </view>
    <view class="publish">
      <image class="bg-result " src="../../resource/bg_symbol.png "></image>
      <image class="result-img" src="{{result.img}}"></image>
      <view class="brain">
        <image src="../../resource/ic_brain_coin.png "></image>
        <text>+{{tools.unit(result.cell)}}</text>
      </view>
    </view>
    <button class="btn btn-result" wx:if="{{roomType == 2 && !isJoin}}" id="againInvite" open-type="share">继续挑战</button>
    <button class="btn btn-result" wx:elif="{{roomType == 2 && isJoin}}"  bindtap="toHome">回到首页</button>
    <button class="btn btn-result" wx:else bindtap="againRank">继续挑战</button>
    <button class="btn btn-share" id="share" open-type="share">分享战绩</button>
    <view hidden="{{room.hiddenShareTip}}">
      <text class="tip">分享到微信群，可获得{{shareCost}}脑力值
      每日享有 3 次奖励机会</text>
    </view>
  </view>
</view>

<wxs module="tools">
  var unit = function(cell) {
    if (cell >= 10000) {
      var result = (cell / 10000)
      result = result.toFixed(2)
      return result + '亿'
    }
    return cell + '万'
  }
  module.exports.unit = unit
</wxs>