wxmini/pages/SelfServiceTool/MortgageCalculator/index.wxml

<!--index.wxml-->
<view class="container">
  <view class="MainPage">
    <view class="nav">
      <view class="flex-h">
        <text class="flex-item {{ActiveIndex === idx ? 'active' : ''}}" wx:for="{{NavList}}" wx:for-item="item" wx:for-index="idx" wx:key="key" data-index="{{idx}}" bindtap="CutNav">{{item.value}}</text>
      </view>
    </view>

    <view class="cutBody">

      <!-- 商业贷款 -->
      <view>
        <view class="mainInfo">
          <view>
            <view class="top">
              <image mode="widthFix" src="/assets/images/img3.jpg"></image>
              <view class="centerLabel">
                <view class="flex-h">
                  <text class="flex-item">每月月供参考(元）</text>
                  <text bindtap="CheckRepaymentList">还款详情 ></text>
                </view>
                <text>{{MainResult.PriceOfMonth}}</text>
              </view>
            </view>
            <view class="subInfo flex-h">
              <view class="flex-item">
                <text>支付利息（元）</text>
                <text>{{MainResult.TotalInterest}}</text>
              </view>
              <view class="flex-item">
                <text>还款总额（元）</text>
                <text>{{MainResult.TotalPrice}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="options">
          <view class="flex-h">
            <text>还款方式</text>
            <view class="flex-item">
              <Radio Params="{{RepaymentTypeList}}" Value="{{Options.RepaymentType}}" data-name="RepaymentType" bindradiochange="RadioChange" />
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 2 ? 'hide' : ''}}">
            <text>计算方式</text>
            <view class="flex-item">
              <Radio Params="{{CalcType}}" Value="{{Options.CalcType}}" data-name="CalcType" bindradiochange="RadioChange" />
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 2 ? 'hide' : ''}}">
            <text>房价总额</text>
            <view class="flex-item flex-h">
              <input class="flex-item" type="digit" data-name="TotalPrice" bindinput="TextInput"></input>
              <text>万元</text>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 2 ? 'hide' : ''}}">
            <text>首付比例</text>
            <view class="flex-item flex-h">
              <text class="flex-item" bindtap="SelectFirstPercent">{{Options.FirstPercentName}}</text>
              <image mode="widthFix" src="/assets/images/icon11.png"></image>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 2 ? 'hide' : ''}}">
            <text>首付金额</text>
            <view class="flex-item flex-h">
              <text class="flex-item">{{Options.FirstPrice}}</text>
              <text>元</text>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex !== 2 ? 'hide' : ''}}">
            <text>商贷总额</text>
            <view class="flex-item flex-h">
              <input class="flex-item" type="digit" data-name="CommercialPrice" bindinput="TextInput"></input>
              <text>万元</text>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex !== 2 ? 'hide' : ''}}">
            <text>公积金贷款额</text>
            <view class="flex-item flex-h">
              <input class="flex-item" type="digit" data-name="PublicHousingFundPrice" bindinput="TextInput"></input>
              <text>万元</text>
            </view>
          </view>
          <view class="flex-h">
            <text>按揭年数</text>
            <view class="flex-item flex-h">
              <text class="flex-item" bindtap="SelectStagesNum">{{Options.StagesNumName}}</text>
              <image mode="widthFix" src="/assets/images/icon11.png"></image>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 1 ? 'hide' : ''}}">
            <text>商贷利率</text>
            <view class="flex-item flex-h">
              <text class="flex-item" bindtap="SelectCommercialLoanRate">{{Options.CommercialLoanRateName}}</text>
              <image mode="widthFix" src="/assets/images/icon11.png"></image>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 1 ? 'hide' : ''}}">
            <text style="color: red;">商业贷款利率</text>
            <view class="flex-item">
              <text style="color: red;" class="flex-item">{{Options.CommercialLoanRateNumName}}</text>
              <text style="color: red;">%</text>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 0 ? 'hide' : ''}}">
            <text>公积金利率</text>
            <view class="flex-item flex-h">
              <text class="flex-item" bindtap="SelectPublicHousingFundLoanRate">{{Options.PublicHousingFundLoanRateName}}</text>
              <image mode="widthFix" src="/assets/images/icon11.png"></image>
            </view>
          </view>
          <view class="flex-h {{ActiveIndex === 0 ? 'hide' : ''}}">
            <text style="color: red;">公积金贷款利率</text>
            <view class="flex-item">
              <text style="color: red;" class="flex-item">{{Options.PublicHousingFundLoanRateNumName}}</text>
              <text style="color: red;">%</text>
            </view>
          </view>
        </view>
      </view>

      <text class="btn" bindtap="StartCalc">
      <text>开始计算</text>
      </text>

    </view>
  </view>

  <view class="popup" hidden="{{!ShowFirstPercentList}}">
    <view>
      <van-picker show-toolbar columns="{{ FirstPercentList }}" value-key="value" bind:cancel="SelectFirstPercentCancel" bind:confirm="SelectFirstPercentConfirm" />
    </view>
  </view>
  <view class="popup" hidden="{{!ShowStagesNumList}}">
    <view>
      <van-picker show-toolbar columns="{{ StagesNumList }}" value-key="value" bind:cancel="SelectStagesNumListCancel" bind:confirm="SelectStagesNumListConfirm" />
    </view>
  </view>
  <view class="popup" hidden="{{!ShowCommercialLoanRateList}}">
    <view>
      <van-picker show-toolbar columns="{{ CommercialLoanRateList }}" value-key="value" bind:cancel="SelectCommercialLoanRateCancel" bind:confirm="SelectCommercialLoanRateConfirm" />
    </view>
  </view>
  <view class="popup" hidden="{{!ShowPublicHousingFundLoanRateList}}">
    <view>
      <van-picker show-toolbar columns="{{ PublicHousingFundLoanRateList }}" value-key="value" bind:cancel="SelectPublicHousingFundCancel" bind:confirm="SelectPublicHousingFundConfirm" />
    </view>
  </view>
  <view class="popup" hidden="{{!ShowRepaymentList}}">
    <view class="layer" bindtap="CloseRepaymentList"></view>
    <view class="RepaymentList centerLabel flex-v">
      <view class="header flex-h" bindtap="CloseRepaymentList">
        <view class="flex-item">
          <text>总还款</text>
          <text>{{MainResult.TotalPriceFloat}}万</text>
        </view>
        <view class="flex-item">
          <text>总利息</text>
          <text>{{MainResult.TotalInterestFloat}}万</text>
        </view>
        <view class="flex-item">
          <text>总贷款</text>
          <text>{{MainResult.TotalLoanSum}}万</text>
        </view>
        <view class="flex-item">
          <text>贷款月数</text>
          <text>{{RepaymentList.length}}</text>
        </view>
      </view>
      <view class="flex-h title">
        <text class="flex-item">期数</text>
        <text class="flex-item">月份</text>
        <text class="flex-item">月供</text>
        <text class="flex-item">剩余</text>
      </view>
      <view class="flex-item">
        <view>
          <view class="list">
            <view class="flex-h" wx:for="{{RepaymentList}}" wx:for-item="item" wx:for-index="idx" wx:key="key">
              <text class="flex-item">第{{idx + 1}}期</text>
              <text class="flex-item">{{item.Month}}</text>
              <text class="flex-item">{{item.Price}}</text>
              <text class="flex-item">{{item.StockSum}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <van-toast id="van-toast" />
</view>