index.wxml 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <van-cell-group>
  2. <block wx:for="{{form}}" wx:key="item.valueName" data-name="{{item.valueName}}">
  3. <van-transition show="{{ item.required || showAll }}" name="fade" custom-class="block">
  4. <!-- 日期选择器 -->
  5. <view class="picker" wx:if="{{item.type=='date'}}">
  6. <view class="label">
  7. <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
  8. <text class="text">{{item.label}}</text>
  9. </view>
  10. <view style="position: relative;">
  11. <view class="picker-slot" wx:if="{{item.slot}}">
  12. <slot name="{{item.slot}}" />
  13. </view>
  14. <picker mode='date' value="{{item.value}}" fields='{{item.fields||"day"}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
  15. <view class="content">
  16. <text wx:if="{{item.value}}" style="color: #000;">{{item.value}}</text>
  17. <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
  18. </view>
  19. </picker>
  20. <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
  21. </view>
  22. </view>
  23. <!-- 时间选择器 -->
  24. <view class="picker" wx:elif="{{item.type=='time'}}">
  25. <view class="label">
  26. <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
  27. <text class="text">{{item.label}}</text>
  28. </view>
  29. <view style="position: relative;">
  30. <view class="picker-slot" wx:if="{{item.slot}}">
  31. <slot name="{{item.slot}}" />
  32. </view>
  33. <picker mode='time' value="{{item.value}}" fields='{{item.fields}}' start="{{item.start}}" end="{{item.end}}" data-item="{{item}}" bindchange="bindDateChange">
  34. <view class="content">
  35. <text wx:if="{{item.value}}" style="color: #000;">{{item.value}}</text>
  36. <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
  37. </view>
  38. </picker>
  39. <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
  40. </view>
  41. </view>
  42. <!-- 省市县选择器 -->
  43. <view class="picker" wx:elif="{{item.type=='region'}}">
  44. <view class="label">
  45. <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
  46. <text class="text">{{item.label}}</text>
  47. </view>
  48. <view style="position: relative;">
  49. <view class="picker-slot" wx:if="{{item.slot}}">
  50. <slot name="{{item.slot}}" />
  51. </view>
  52. <picker mode='region' value="{{item.value}}" data-item="{{item}}" bindchange="bindRegionChange">
  53. <view class="content">
  54. <text wx:if="{{item.value.length}}" style="color: #000;">{{item.value}}</text>
  55. <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
  56. </view>
  57. </picker>
  58. <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
  59. </view>
  60. </view>
  61. <!-- 性别 -->
  62. <view class="picker" wx:elif="{{item.type=='sex'}}">
  63. <view class="label">
  64. <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
  65. <text class="text">{{item.label}}</text>
  66. </view>
  67. <view style="position: relative;">
  68. <view class="content">
  69. <van-radio-group value="{{ item.value }}" data-item="{{item}}" bind:change="sexChange">
  70. <view style="display: flex;">
  71. <van-radio icon-size='16' custom-class='radio' name="男">男</van-radio>
  72. <van-radio icon-size='16' name="女">女</van-radio>
  73. </view>
  74. </van-radio-group>
  75. </view>
  76. <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
  77. </view>
  78. </view>
  79. <view class="picker" wx:elif="{{item.type=='option'}}">
  80. <view class="label">
  81. <text class="need" style="color: {{item.required?'#EE0A24':'rgba(0,0,0,0)'}};">*</text>
  82. <text class="text">{{item.label}}</text>
  83. </view>
  84. <view style="position: relative;">
  85. <view class="content" style="justify-content: space-between; display: flex; align-items: flex-start;" data-item="{{item}}" bindtap="toOptions">
  86. <text wx:if="{{item.value.length}}" style="color: #000;">{{item.value}}</text>
  87. <text wx:else style="color: {{item.error?'#EE4C4E':''}};">{{item.placeholder}}</text>
  88. <van-icon name="arrow" style="flex-shrink: 0; margin-top: 12rpx;" />
  89. </view>
  90. <view wx:if="{{item.errMsg}}" class="error-tips">{{item.errMsg}}</view>
  91. </view>
  92. </view>
  93. <!-- 输入框 -->
  94. <van-field wx:else label="{{item.label}}" required="{{item.required}}" value="{{ item.value }}" placeholder="{{item.placeholder||'请填写'}}" label-class='label-class' type="{{item.type}}" error="{{item.error}}" error-message='{{item.errMsg}}' autosize border="{{ false }}" bind:input="inputChange" data-item="{{item}}">
  95. <slot wx:if="{{item.slot}}" name="{{item.slot}}" slot='button' />
  96. </van-field>
  97. </van-transition>
  98. </block>
  99. </van-cell-group>