wxappb2b/GuangZuan/miniprogram/mHome/pages/cerserach/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>

<!-- tabs -->
<view class="tab-view">
  <van-tabs swipeable bind:change="onTabChange" color="#2270D9" title-active-color="#2270D9" title-inactive-color="#8F8AA6">
    <van-tab wx:for="{{tabs}}" wx:for-item="itm" wx:key="id" id="{{itm.id}}" title="{{itm.name}}"/>
  </van-tabs>  
</view>

<!-- 证书 -->
<view class="cers">
  <button wx:for="{{datas}}" wx:for-item="itm" wx:for-index="idx" wx:key="certtype" class="cers-button {{itm.isCheck ? 'active' : ''}}" id="{{itm.orderindex}}" bindtap="onButtonClick">{{itm.certtype}}</button>
</view>

<view class="container">
  <!-- 输入区域 -->
  <view class="input-view">
    <!-- 英文名称 -->
    <text class="label">{{config.orgenname}}</text>
    <!-- 请输入证书号 -->
    <view class="field-view"><van-field model:value="{{ certno }}" input-align="center" placeholder="请输入证书号"></van-field></view>
    <!-- 中文名称 -->
    <text class="label">{{config.orgcnname}}</text>
    <!-- 请输入防伪码 -->
    <view class="field-view"><van-field model:value="{{ securityCode }}" input-align="center" placeholder="请输入防伪码"></van-field></view>
    <!-- 证书类型 -->
    <text class="label">{{config.certtype}}证书数据来源于官网，所有权归NGDTC所有。</text>
    <!-- 证书查询地址 -->
    <text class="label" style="padding-bottom: 10px;" wx:if="{{paramAddress != ''}}" user-select="{{true}}">证书查询地址：{{paramAddress}}</text>
  </view>
</view>

<!-- 查询按钮 -->
<view class="button-view">
  <van-button custom-class="search" round bind:click="certSearch" block color="linear-gradient(to right, #4bb0ff, #D91D34)">查询</van-button>
  <van-button custom-class="clear" round bind:click="clear" block color="linear-gradient(to right, #4bb0ff, #6149f6)">清空</van-button>
</view>

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