Mina/ocrsdk/pages/id-card/id-card.wxml

<!-- 头图背景 start -->
<view 
  class="ocr-head-bg ocr-head-bg-{{theme}}" 
  wx:if="{{!showCamera}}"
></view>
<!-- 头图背景 end -->

<!-- 功能列表 start -->
<view class="ocr-features-list" wx:if="{{!showCamera}}">
  <view class="ocr-features-inner">
    <view class="ocr-features-card" data-side="FRONT" bind:tap="onItemTap">
      <view class="col-image">
        <image 
          src="{{frontSidePath? frontSidePath : 'https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/card-id-front.svg'}}" 
          class="{{frontSidePath? 'photo' : 'image'}}" 
          mode="aspectFill"></image>
      </view>
      <view class="col-text">
        <view class="title">身份证正面</view>
        <view class="text">拍摄正面</view>
      </view>
      <icon type="{{frontState}}" wx:if="{{frontSidePath}}" color="{{themeColor}}"></icon>
      <seal-icon name="add-fill" wx:if="{{!frontSidePath}}" color="{{themeColor}}"></seal-icon>
    </view>
    <view class="ocr-features-card" data-side="BACK" bind:tap="onItemTap">
      <view class="col-image">
        <image 
          src="{{backSidePath? backSidePath : 'https://ocr-static-1254418846.file.myqcloud.com/mpsdk/images/card-id-back.svg'}}" 
          class="{{backSidePath? 'photo' : 'image'}}" 
          mode="aspectFill"></image>
      </view>
      <view class="col-text">
        <view class="title">身份证反面</view>
        <view class="text">拍摄反面</view>
      </view>
      <icon type="{{backState}}" wx:if="{{backSidePath}}" color="{{themeColor}}"></icon>
      <seal-icon name="add-fill" wx:if="{{!backSidePath}}" color="{{themeColor}}"></seal-icon>
    </view>
  </view>
</view>
<!-- 功能列表 end -->

<!-- 信息列表区 start -->
<view class="ocr-result-form-list" wx:if="{{!showCamera}}">
  <seal-list>
    <view wx:for="{{ocrResponse}}" wx:key="index" wx:for-index="key" wx:for-item="value">
      <seal-form
        border 
        wx:if="{{value.side==='FRONT'}}"
        textAlign="left" labelWidth="4em" 
        type="{{value.type}}" 
        autoHeight
        label="{{value.title}}" 
        value="{{value.value}}"
        data-key="{{key}}" 
        bind:input="onResultChange"
        readonly="{{!modifiable}}"
      ></seal-form>
    </view>
    <view wx:for="{{ocrResponse}}" wx:key="index" wx:for-index="key" wx:for-item="value">
      <seal-form
        border 
        wx:if="{{value.side==='BACK'}}"
        textAlign="left" labelWidth="4em"
        type="{{value.type}}" 
        autoHeight  
        label="{{value.title}}" 
        value="{{value.value}}"
        data-key="{{key}}" 
        bind:input="onResultChange"
        readonly="{{!modifiable}}"
      ></seal-form>
    </view>
  </seal-list>
  
  <view class="btn-media" wx:if="{{ocrResponse}}">
    <seal-button color="{{sealTheme}}" bind:tap="onFinished">完成</seal-button>
  </view>
</view>
<!-- 信息列表区 end -->

<take-image 
  id="takeImage"
  wx:if="{{showCamera}}"
  bind:onImageReady="onImageReady"
  option="{{cameraInfo}}"
  category="{{category}}"
  side="{{selectedSide}}"
  theme="{{theme}}"
></take-image>