与牧同行-小程序用户端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

113 lines
4.2 KiB

  1. <view class="xqbox">
  2. <!-- 表单内容 -->
  3. <scroll-view class="page-content" scroll-y>
  4. <form bindsubmit="submitForm">
  5. <!-- 牲畜类型 -->
  6. <view class="form-section">
  7. <view class="section-header">
  8. <view class="section-title">
  9. <text>牲畜类型</text>
  10. </view>
  11. <text class="section-required">必填</text>
  12. </view>
  13. <input class="form-input" name="petType" placeholder="请输入牲畜品种(如:山羊、奶牛)" value="{{formData.animalType}}" bindinput="onPetTypeInput" maxlength="20" />
  14. </view>
  15. <!-- 牲畜信息 -->
  16. <view class="form-section">
  17. <view class="section-header">
  18. <view class="section-title">
  19. <text>牲畜信息</text>
  20. </view>
  21. <text class="section-required">必填</text>
  22. </view>
  23. <view class="info-grid">
  24. <!-- 年龄 -->
  25. <view class="info-item">
  26. <view class="item-label">
  27. <text>年龄</text>
  28. </view>
  29. <view class="item-input-wrapper">
  30. <input class="item-input" name="petAge" type="digit" placeholder="例如:3岁或者3个月" value="{{formData.animalAge}}" bindinput="onPetAgeInput" />
  31. </view>
  32. </view>
  33. <!-- 性别 -->
  34. <view class="info-item">
  35. <view class="item-label">
  36. <text>性别</text>
  37. </view>
  38. <view class="gender-buttons">
  39. <view class="gender-btn {{formData.animalGender === '公' ? 'active' : ''}}" data-value="公" bindtap="selectGender">
  40. <text>公</text>
  41. </view>
  42. <view class="gender-btn {{formData.animalGender === '母' ? 'active' : ''}}" data-value="母" bindtap="selectGender">
  43. <text>母</text>
  44. </view>
  45. </view>
  46. </view>
  47. </view>
  48. </view>
  49. <!-- 症状描述 -->
  50. <view class="form-section">
  51. <view class="section-header">
  52. <view class="section-title">
  53. <text>症状描述</text>
  54. </view>
  55. <text class="section-required">必填</text>
  56. </view>
  57. <view class="symptom-box">
  58. <textarea class="symptom-textarea" name="symptoms" placeholder="请详细描述宠物的症状,包括持续时间、频率、具体表现等..." value="{{formData.description}}" bindinput="onSymptomsInput" maxlength="500" auto-height />
  59. <view class="textarea-counter">
  60. <text>{{symptomsLength}}/500</text>
  61. </view>
  62. </view>
  63. </view>
  64. <!-- 图片上传 -->
  65. <view class="form-section">
  66. <view class="section-header">
  67. <view class="section-title">
  68. <text>上传图片</text>
  69. </view>
  70. <text class="section-optional">可选</text>
  71. </view>
  72. <view class="upload-tips">
  73. <text>最多可上传3张图片,用于帮助医生更直观了解病情</text>
  74. </view>
  75. <view class="image-upload-grid">
  76. <!-- 已上传图片 - 使用tempImages预览 -->
  77. <block wx:for="{{tempImages}}" wx:key="*this">
  78. <view class="image-preview">
  79. <image class="preview-image" src="{{item}}" mode="aspectFill" bindtap="previewImage" data-index="{{index}}"></image>
  80. <view class="remove-overlay" data-index="{{index}}" bindtap="removeImage">
  81. <image class="remove-icon" src="/pagesA/images/ch.png"></image>
  82. </view>
  83. </view>
  84. </block>
  85. <!-- 上传按钮 -->
  86. <view class="upload-btn" wx:if="{{tempImages.length < 3}}" bindtap="chooseImage">
  87. <view class="upload-icon-wrapper">
  88. <image class="upload-icon" src="/pagesA/images/jh.png"></image>
  89. </view>
  90. <text class="upload-text">上传图片</text>
  91. </view>
  92. </view>
  93. </view>
  94. <!-- 提交按钮 -->
  95. <view class="submit-section">
  96. <button class="submit-btn" type="primary" formType="submit" loading="{{isSubmitting}}" disabled="{{isSubmitting || !isFormValid}}">
  97. {{isSubmitting ? '提交中...' : '提交问诊单'}}
  98. </button>
  99. </view>
  100. </form>
  101. </scroll-view>
  102. </view>