prsx-crm/components/Yl_field/index.wxml

<view wx:for="{{form}}" wx:key="valueName" data-name="{{item.valueName}}">
  <view hidden="{{ !item.required && !showAll }}">
    <!-- <van-transition show="{{ item.required || showAll }}" name="fade" custom-class="block"> -->
    <!-- 单列选择器 -->
    <view class="picker" wx:if="{{item.type=='selector'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="picker-slot" wx:if="{{item.slot}}">
          <slot name="{{item.slot}}" />
        </view>
        <picker mode='selector' range="{{item.range}}" range-key='{{item.rangeKey}}' value="{{item.rangeIndex}}" disabled="{{item.disabled}}" data-item="{{item}}" data-index="{{index}}" bindchange="bindSelectorChange">
          <view class="content">
            <text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{language[item.value]||item.value}}</text>
            <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder]||item.placeholder}}</text>
          </view>
        </picker>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 多列选择器 -->
    <view class="picker" wx:elif="{{item.type=='multiSelector'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="picker-slot" wx:if="{{item.slot}}">
          <slot name="{{item.slot}}" />
        </view>
        <picker mode='multiSelector' range="{{item.range}}" range-key='{{item.rangeKey}}' value="{{item.rangeIndex}}" disabled="{{item.disabled}}" data-item="{{item}}" data-index="{{index}}" bindchange="bindMultiSelectorChange" bindcolumnchange="bindcolumnchange">
          <view class="content">
            <text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{language[item.value]||item.value}}</text>
            <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder]||item.placeholder}}</text>
          </view>
        </picker>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 日期选择器 -->
    <view class="picker" wx:elif="{{item.type=='date'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="picker-slot" wx:if="{{item.slot}}">
          <slot name="{{item.slot}}" />
        </view>
        <picker mode='date' value="{{item.value}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
          <view class="content">
            <text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
            <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder]||item.placeholder}}</text>
          </view>
        </picker>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 日期范围选择器 -->
    <view class="picker" wx:elif="{{item.type=='dateRange'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="picker-slot" wx:if="{{item.slot}}">
          <slot name="{{item.slot}}" />
        </view>
        <view class="content" style="display: flex;">
          <picker mode='date' value="{{item.value[0]}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" data-index="0" bindchange="rangeDateChange">
            <text wx:if="{{item.value[0]}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[0]}}</text>
            <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder[0]]||item.placeholder[0]}}</text>
          </picker>
          <view style="margin: 0 20rpx;color: #000;">{{language['至']||'至'}}</view>
          <picker mode='date' value="{{item.value[1]}}" disabled="{{item.disabled}}" fields='{{item.fields||"day"}}' start="{{item.value[0]}}" end="{{item.end}}" data-item="{{item}}" data-index="1" bindchange="rangeDateChange">
            <text wx:if="{{item.value[1]}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value[1]}}</text>
            <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder[1]]||item.placeholder[1]}}</text>
          </picker>
        </view>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 时间选择器 -->
    <view class="picker" wx:elif="{{item.type=='time'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="picker-slot" wx:if="{{item.slot}}">
          <slot name="{{item.slot}}" />
        </view>
        <picker mode='time' value="{{item.value}}" disabled="{{item.disabled}}" fields='{{item.fields}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
          <view class="content">
            <text wx:if="{{item.value}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
            <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder]||item.placeholder}}</text>
          </view>
        </picker>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 省市县选择器 -->
    <view class="picker" wx:elif="{{item.type=='region'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="picker-slot" wx:if="{{item.slot}}">
          <slot name="{{item.slot}}" />
        </view>
        <picker mode='region' value="{{item.value}}" disabled="{{item.disabled}}" data-item="{{item}}" bindchange="bindRegionChange">
          <view class="content">
            <text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
            <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder]||item.placeholder}}</text>
          </view>
        </picker>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 性别 -->
    <view class="picker" wx:elif="{{item.type=='sex'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="content">
          <van-radio-group value="{{ item.value }}" data-item="{{item}}" bind:change="sexChange">
            <view style="display: flex;">
              <van-radio icon-size='16' custom-class='radio' name="男">{{language['男']||'男'}}</van-radio>
              <van-radio icon-size='16' name="女">{{language['女']||'女'}}</van-radio>
            </view>
          </van-radio-group>
        </view>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 单选 选择器 -->
    <view class="picker" wx:elif="{{item.type=='radio'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="content">
          <van-radio-group direction='{{item.direction||"vertical"}}' value="{{ item.value }}" data-item="{{item}}" disabled="{{item.disabled||false}}" bind:change="radioChange">
            <van-radio wx:for="{{item.radioList}}" wx:for-item="it" wx:for-index="i" wx:key="name" icon-size="16" custom-class="radio {{i != 0&&item.direction!='horizontal' ? 'radio_margin_top' : '' }}" name="{{it.id}}">
              {{language[it.name]||it.name}}
            </van-radio>
          </van-radio-group>
        </view>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 异步类型选择 -->
    <view class="picker" wx:elif="{{item.type=='option'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="content" style="justify-content: space-between; display: flex; align-items: flex-start;" data-item="{{item}}" bindtap="toOptions">
          <text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};">{{item.value}}</text>
          <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{language[item.placeholder]||item.placeholder}}</text>
          <view wx:if="{{ item.value[0] && !item.interrupt}}" class="iconfont icon-quxiao" catch:tap="clearItem" data-index="{{index}}" />
          <van-icon wx:else name="arrow" style="flex-shrink: 0; margin-top: 12rpx;" />
        </view>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 跳转路由选择 值使用数组，0保存显示名称，1保存ID -->
    <view class="picker" wx:elif="{{item.type=='route'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="content" style="justify-content: space-between; display: flex; align-items: flex-start;" data-item="{{item}}" bindtap="route">
          <text wx:if="{{item.value.length}}" style="color:{{item.disabled?'#C8C9CC':'#000'}};flex: 1;">{{language[item.value[0]]||item.value[0]}}</text>
          <text wx:else style="color: {{item.error?'#EE4C4E':''}};flex: 1;">{{language[item.placeholder]||item.placeholder}}</text>
          <view wx:if="{{item.slot}}">
            <slot name="{{item.slot}}" />
          </view>
          <view wx:if="{{ item.value[0] && !item.interrupt && !item.disabled}}" class="iconfont icon-quxiao" catch:tap="clearItem" data-index="{{index}}" />
          <van-icon wx:else name="arrow" style="flex-shrink: 0; margin-top: 12rpx;" />
        </view>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 固定电话输入 -->
    <view class="picker" wx:elif="{{item.type=='telephone'}}">
      <view class="label">
        <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
        <text class="text" style="color:{{item.disabled?'#C8C9CC':''}};">{{language[item.label]||item.label}}</text>
      </view>
      <view style="position: relative;">
        <view class="content telephone">
          <input class="area-code" disabled="{{item.disabled||false}}" placeholder-class='telephone-p' data-item="{{item}}" data-i="0" bindinput="inputChange" type="number" value="{{item.value[0]}}" maxlength='4' placeholder="区号" /><text>-</text><input disabled="{{item.disabled||false}}" class="phone" placeholder-class='telephone-p' data-item="{{item}}" data-i="1" bindinput="inputChange" type="number" value="{{item.value[1]}}" maxlength='8' placeholder="号码" />
        </view>
        <view wx:if="{{item.errMsg}}" class="error-tips">{{language[item.errMsg]||item.errMsg}}</view>
      </view>
    </view>
    <!-- 输入框 -->
    <van-field wx:else label="{{language[item.label]||item.label}}" required="{{item.required}}" maxlength="{{item.maxlength||'-1'}}" value="{{ item.value }}" placeholder="{{language[item.placeholder]||item.placeholder||language['请填写']||'请填写'}}" label-class='label-class' type="{{item.type}}" error="{{item.error}}" error-message='{{item.errMsg}}' disabled="{{item.disabled}}" autosize border="{{ false }}" bind:input="inputChange" bind:blur='onBlur' data-item="{{item}}">
      <view slot='button' style="display: flex;">
        <view wx:if="{{item.slot}}" style="margin-right: 8rpx;">
          <slot name="{{item.slot}}" />
        </view>
        <Yl_VoiceInput wx:if="{{ item.type=='text'|| item.type=='textarea' || item.type == 'digit'  && languagecode =='ZH' && !item.disabled}}" data-index="{{index}}" bindcallback="onVoiceInput" />
      </view>
    </van-field>
  </view>

  <!-- </van-transition> -->
</view>