wxsapp/SuperBrain/pages/room/room.wxml

<template name="ranking">
   <!-- <view wx:if="{{isSelf}}" class="ranking-self-bg" animation="{{animation.answerRightText}}">
    <view class="ranking-self">我</view>
    <view class="ranking-num" style="color:white;margin-left: 10rpx;">{{index}}</view>
    <view class="ranking-name" style="color:white;">{{name}}</view>
    <view class="ranking-count" style="color:white">{{count}}</view>
  </view>  -->
  <view class="ranking" style="{{style}}" hidden="{{isSelf}}">
    <image class="ranking-avatar" src="{{a}}"></image>
    <view class="ranking-num">{{i}}</view>
    <view class="ranking-name">{{n}}</view>
    <view class="ranking-count">{{c}}</view> 
  </view>
</template>

<template name="ranking-row">
   <view class="ranking-row">
    <template is="ranking" data="{{i: indexL, a: avatarL, n: nameL, c: countL, isSelf: isSelfL, name: name, index: index, count: count}}"/>
    <template is="ranking" data="{{i: indexR, a: avatarR, n: nameR, isSelf: isSelfR, name: name, index: index, count: count, c: countR, style:'margin-left: auto;'}}"/>
  </view> 
</template>



<scroll-view scroll-y>
<!-- 头部 -->
  <view class="head-{{adapter.animation}}-{{status}}" style="{{adapter.head}}">
    <view class="take-part-view">
      <block wx:for="012345" wx:for-index="i" wx:key=" ">
        <image class="take-part-avatar" src="{{headUser[i].headImg}}"></image>
      </block>
    </view>
    <view class="take-part">当前有{{numOfPeople}}人参与</view>
  </view> 

<!-- 开始前赞助块 -->
  <image class="sponsor-bg" src="../../resource/room_sponsor.png" hidden="{{status != 0}}"></image>
  <view class="sponsor" hidden="{{status != 0}}">
    <image class="sponsor-icon" src="{{sponsor.icon}}"></image>
    <view class="sponsor-title">{{roomInfo.title}}</view>
    <view class="sponsor-name">{{sponsor.name}}</view> 
  </view>
<!-- 开始前倒计时 -->
  <view class="avatar-bg" hidden="{{status != 0}}">
    <view class="avatar-middle"></view>
    <image class="avatar" src="{{roomInfo.logo}}"></image>
  </view>
  <view class="answer" hidden="{{status != 0}}">
    <view class="answer-bonus-bg">
      <view class="answer-bonus-text-bg">
        <view class="answer-bonus-small" style="margin-left: 40rpx;">前</view>
      <view class="answer-bonus-big">{{roomInfo.awardUser}}</view>
      <view class="answer-bonus-small">名有奖，总奖金</view>
      <view class="answer-bonus-big">{{roomInfo.awardFee}}</view>
      <view class="answer-bonus-small" style="margin-right: 40rpx;">元</view>
      </view> 
    </view>
    <view class="answer-count-down-bg">
      <view class="answer-count-down-view">
        <view class="answer-count-down-title">抢奖金倒计时</view>
        <view class="answer-count-down">
          <view class="answer-count-down-n" style="{{countDownStyle}}">{{countDown}}</view>
          <view class="answer-count-down-u" style="{{countDownStyle}}">秒</view>
        </view>
      </view>
    </view> 
    <view class="answer-bottom-view">
      <view class="answer-bottom-button-bg" open-type="share" >{{invite.shareButton}}
        <button class="answer-bottom-button" open-type="share" hover-class="none" plain="true" style="border-color: rgba(0, 0, 0, 0)"></button>
      </view>
      <view class="answer-bottom-tips-f">{{invite.shareTips1}}</view>
      <view class="answer-bottom-tips-s">{{invite.shareTips2}}</view>
    </view>
  </view>

<!-- 开始后赞助块 -->
  <view class="sponsor-begin" style="{{adapter.sponsor}}" hidden="{{status == 0}}">
    <image class="sponsor-icon" src="{{sponsor.icon}}"></image>
    <view class="sponsor-begin-name">{{roomInfo.title}} {{sponsor.name}}</view>
  </view>
<!-- 开始后答题块 -->
  <view class="avatar-begin-bg" style="{{adapter.avatar}}" hidden="{{status == 0}}">
    <view class="avatar-begin-middle"></view>
    <image class="avatar-begin" src="{{roomInfo.logo}}"></image>
  </view>
  <view class="answer-begin" style="{{adapter.answer}}" hidden="{{status == 0}}">
    <view class="answer-begin-bonus-bg">
      <view class="answer-begin-bonus-text-bg" style="{{adapter.bonus}}">
        <view class="answer-begin-bonus-small" style="margin-left: 40rpx;">前</view>
        <view class="answer-begin-bonus-big">{{roomInfo.awardUser}}</view>
        <view class="answer-begin-bonus-small">名有奖，总奖金</view>
        <view class="answer-begin-bonus-big">{{roomInfo.awardFee}}</view>
        <view class="answer-begin-bonus-small" style="margin-right: 40rpx;">元</view>
      </view> 
    </view>

<!-- 答题前 -->
     <image class="answer-begin-question-type-bg" src="../../resource/room_q_type.png" hidden="{{status != 4}}"></image> 
    <view class="answer-begin-question-type" hidden="{{status != 4}}">{{question.t}}</view>
    <view wx:if="{{lastQuestion}}" class="answer-begin-last" hidden="{{status != 4}}">{{question.n}}</view>
    <view wx:else class="answer-begin-num" hidden="{{status != 4}}">{{question.n}}</view>
    <image wx:if="{{lastQuestion}}" class="answer-begin-double-score" src="../../resource/room_double_score.png" hidden="{{status != 4}}"></image>

<!-- 答题 -->
    <view class="answer-num" style="{{adapter.num}}" hidden="{{status != 1}}">第 {{questionNum}}/{{roomInfo.questionC}} 题</view>
    <view class="answer-begin-count-down-bg">
      <view class="answer-begin-count-down" hidden="{{status != 1}}">
        <view class="answer-begin-count-down-text">{{answer.tips}}:{{countDown}}秒</view>
      </view> 
    </view>
    <view class="answer-options-bg" hidden="{{status != 1}}">
      <view class="answer-question-bg">
        <view class="answer-question">{{question.q}}</view>
      </view>
      <view class="answer-options-row-top">
        <view class="answer-options-left-{{optionsStyle[0]}}" id="0" bindtap="answer">
          <view class="answer-options-{{optionsStyle[0]}}" id="0" catchtap="answer">{{question.o[0]}}</view>
        </view>
        <view class="answer-options-right-{{optionsStyle[1]}}" id="1" bindtap="answer">
          <view class="answer-options-{{optionsStyle[1]}}" id="1" catchtap="answer">{{question.o[1]}}</view>
        </view>
      </view>
      <view class="answer-options-row-bottom">
        <view class="answer-options-left-{{optionsStyle[2]}}" id="2" bindtap="answer">
          <view class="answer-options-{{optionsStyle[2]}}" id="2" catchtap="answer">{{question.o[2]}}</view>
        </view>
        <view class="answer-options-right-{{optionsStyle[3]}}" id="3" bindtap="answer">
          <view class="answer-options-{{optionsStyle[3]}}" id="3" catchtap="answer">{{question.o[3]}}</view>
        </view>
      </view>
    </view>

<!-- 答题结束 -->
    <view class="result-ranking" style="{{adapter.resultRanking}}" hidden="{{status != 2 && status != 3}}">{{result.tips}}</view>
    <view class="result-middle-bg" style="{{adapter.resultMiddle}}" hidden="{{status != 2 && status != 3}}">
      <view class="result-bonus-bg" hidden="{{status != 2}}">
        <view class="result-bonus">
          <view class="result-bonus-small">奖金</view>
          <view class="result-bonus-big"  animation="{{rollAnimation}}">{{result.bonus}}</view>
          <view class="result-bonus-small">元</view>
        </view>
      </view>
      <view class="result-tips" hidden="{{status != 2}}">已存入你的奖金账户</view> 
      <image class="result-false-img" src="../../resource/brain_doctor.png" mode="aspectFit" hidden="{{status != 3}}"></image>
    </view>


    <view class="result-share" style="{{adapter.resultShare}}" hidden="{{status != 2 && status != 3}}">{{result.shareButton}}
      <button wx:if="{{result.openType == ''}}" class="result-share-button" bindtap="createImage" hover-class="none" plain="true" style="border-color: rgba(0, 0, 0, 0)"></button>
      <button wx:else class="result-share-button" open-type="{{result.openType}}" hover-class="none" plain="true" style="border-color: rgba(0, 0, 0, 0)"></button>
    </view>
    <view class="result-share-tips" hidden="{{status  != 2 && status != 3}}">{{result.shareTips}}</view>

  <!-- 分享成功  -->
      <image class="result-share-bg" src="../../resource/room_bg.png" mode="aspectFit" hidden="{{share.s == 0}}"> 
      <block wx:if="{{share.s == 2}}">
        <image class="result-share-double-bg" src="../../resource/room_double_bonus.png"></image> 
        <view class="result-share-double">+{{share.bonus}}</view> 
      </block>
      <block wx:elif="{{share.s == 1}}">
        <image class="result-share-add-bg" src="../../resource/room_add_cell.png"></image>
       <view class="result-add-cell-bg">
        <view class="result-add-cell">+{{tools.addCell(share.cell)}}</view>
        <view class="result-add-cell-unit">{{tools.addCellUnit(share.cell)}}</view>
       </view>
      </block>
     </image>   

<!-- 排行榜 -->
    <view class="ranking-bg">
      <template is="ranking-row" wx:for="{{[0, 1, 2, 3, 4]}}" wx:for-index="i" wx:key=" " data="{{...ranking[i]}}"/>
      <view class="ranking-self-view">
        <view class="ranking-self-bg" animation="{{animation.selfRanking}}">
          <view class="ranking-self">我</view>
          <view class="ranking-num" style="color:white;margin-left: 10rpx;">{{selfRanking.rank}}</view>
          <view class="ranking-name" style="color:white;">{{selfRanking.name}}</view>
          <view class="ranking-count" style="color:white">{{selfRanking.count}}</view>
        </view>
      </view> 
    </view>
  </view>

<!-- 动画 -->
<!-- 答对 -->
  <view class="animation-{{adapter.animation}}" style="{{animation.backgroundStyle}}" hidden="{{animation.status == 0}}">
    <!-- <view class="animation-bg-{{adapter.animation}}" animation="{{animation.background}}"></view> -->
    <image class="animation-answer-bg" src="../../resource/room_bg.png" mode="aspectFit" animation="{{animation.answerBg}}"></image>
    <view class="animation-answer-right-bg">
      <image class="animation-answer" src="../../resource/room_right_bg.png" mode="aspectFit" animation="{{animation.answerRightBg}}"></image>
    </view>
    <view class="animation-answer-star-bg">
      <image class="animation-answer" src="../../resource/room_star.png" mode="aspectFit" animation="{{animation.answerRightStar}}"></image>
    </view>
    <image class="animation-answer-hook" src="../../resource/room_right.png" mode="aspectFit" animation="{{animation.answerRightHook}}" hidden="{{animation.status != 1}}"></image>
    <view class="animation-answer-count"  animation="{{animation.answerRightText}}" hidden="{{animation.status != 1}}">+{{answer.integral}}积分</view>
  </view>
  

<!-- 答错 -->
  <image class="animation-answer-false-bg-{{adapter.animation}}" src="../../resource/room_bg.png" mode="aspectFit" hidden="{{animation.status != 2}}"></image>
  <image class="animation-answer-false-{{adapter.animation}}" src="../../resource/room_wrong.png" mode="aspectFit" hidden="{{animation.status != 2}}"></image>
  
</scroll-view>

<wxs module="tools">
  var addCell = function(cell) {
    if (cell >= 10000) {
      return cell / 10000
    }
    return cell
  }

  var addCellUnit = function(cell) {
    if (cell >= 10000) {
      return '亿'
    }
    return '万'
  }

  module.exports.addCell = addCell
  module.exports.addCellUnit = addCellUnit
</wxs>