wxappb2b/GuangZuan/miniprogram/mHome/pages/calculator/index.wxml

<!-- 导航栏 -->
<van-nav-bar custom-style="background-color: #fff">
    <van-icon slot="left" name="arrow-left" size="25px" color="#333" bind:click="backToParent"/>
    <text slot="title" style="color: #333;">钻石价格计算器</text>
</van-nav-bar>

<view class="container" style="position: relative; height: {{windowHeight-safeBottom}}px;">
 <!-- 形状 -->
 <view class="cell-view zsshape" wx:if="{{active !== 2}}"> 
    <text>形状</text>
    <view class="content zsshape">
      <button wx:for="{{zsshapes}}" wx:for-item="itm" wx:for-index="idx" class="{{itm.isCheck ? 'active' : ''}}" id="zsshape {{itm.id}}" wx:key="id" bindtap="onButtonPressed">{{itm.name}}</button>
    </view>
  </view>

  <!-- 颜色 -->
  <view class="cell-view zscolor"> 
    <text>颜色</text>
    <view class="content zscolor">
      <button wx:for="{{zscolors}}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{itm.isCheck ? 'active' : ''}}" id="zscolor {{itm.id}}" bindtap="onButtonPressed">{{itm.name}}</button>
    </view>
  </view>

  <!-- 净度 -->
  <view class="cell-view zsclarity"> 
    <text>净度</text>
    <view class="content zsclarity">
      <button wx:for="{{zsclaritys}}" wx:for-item="itm" wx:for-index="idx" wx:key="id" class="{{itm.isCheck ? 'active' : ''}}" id="zsclarity {{itm.id}}" bindtap="onButtonPressed">{{itm.name}}</button>
    </view>
  </view>

  <!-- 重量 -->
  <view class="cell-view weight"> 
    <text>重量</text>
    <view class="content weight">
      <van-field model:value="{{ weight }}" clearable placeholder="请输入重量" type="number" border="{{ false }}"/>
    </view>
  </view>

  <!-- 汇率 -->
  <view class="cell-view rate"> 
    <text>汇率</text>
    <view class="content rate">
      <van-field model:value="{{ dayrate }}" clearable placeholder="请输入汇率" type="number" border="{{ false }}"/>
    </view>
  </view>

  <!-- 折扣 -->
  <view class="cell-view discount"> 
    <text>折扣</text>
    <view class="content discount">
      <van-field model:value="{{ discount }}" clearable placeholder="请输入折扣" type="number" border="{{ false }}"/>
    </view>
  </view>

  <!--  底部视图  -->
  <view class="buttom_view">
    <button bindtap="onButtonPressed" id="calculate">计算</button>
  </view>

  <!-- result -->
  <view class="cell-view result"> 
    <view class="content result">
      <text>{{result}}</text>
    </view>
  </view>
</view>

<!-- toast --> 
<van-toast id="van-toast" />