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

<view class="container" style="position: relative; height: {{ windowHeight-safeBottom }}px;">
  <view class="top-view" style="position: sticky; top: 0; z-index: 999;">
    <!-- 导航栏 -->
    <van-nav-bar custom-style="background-color: #407DB8">
      <van-icon slot="left" name="arrow-left" size="25px" color="#fff" bind:click="backToParent"/>
      <text slot="title" style="color: #fff;">钻石价格计算器</text>
    </van-nav-bar>
  </view>
  <!-- 形状 -->
  <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" adjust-position />
    </view>
  </view>

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

  <!-- 折扣 -->
  <view class="cell-view discount"> 
    <text>折扣</text>
    <view class="content discount">
      <!-- 折扣选项 -->
      <van-dropdown-menu>
        <van-dropdown-item model:value="{{ value }}" options="{{ options }}" />
      </van-dropdown-menu>
       <!-- 输入框 -->
      <van-field model:value="{{ discount }}" clearable placeholder="请输入折扣" type="digit" adjust-position />
    </view>
  </view>

  <!-- result -->
  <view class="result">
    <view class="result__top">
      <text class="value">国际报价：${{ doller }}/ct </text>
      <text class="value">￥{{ rmb }}/ct</text>
    </view>
    <text class="value">美元：{{ disdoller }}</text>
    <text class="value">人民币：{{ disrmb }}</text>
  </view>

  <!--  底部视图  -->
  <view class="buttom_view">
    <van-button bind:click="onButtonPressed" block color="linear-gradient(to right, #4bb0ff, #666)" round id="calculate">计算</van-button>
  </view>
</view>

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