与牧同行-兽医端小程序
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.

204 lines
9.9 KiB

  1. <view class="container">
  2. <!-- 顶部背景装饰 -->
  3. <view class="bg-decoration">
  4. <view class="circle circle-1"></view>
  5. <view class="circle circle-2"></view>
  6. </view>
  7. <!-- 分类切换卡片 -->
  8. <view class="tab-card">
  9. <view class="category-tab">
  10. <view class="tab-item {{currentTab === 'article' ? 'active' : ''}}" data-type="article" bindtap="switchTab">
  11. <text class="tab-text">发布文章</text>
  12. </view>
  13. <view class="tab-item {{currentTab === 'video' ? 'active' : ''}}" data-type="video" bindtap="switchTab">
  14. <text class="tab-text">发布视频</text>
  15. </view>
  16. </view>
  17. </view>
  18. <!-- 文章发布表单 -->
  19. <form wx:if="{{currentTab === 'article'}}" catchsubmit="submitArticle">
  20. <view class="form-container">
  21. <!-- 文章标题 -->
  22. <view class="form-card">
  23. <view class="form-item">
  24. <view class="label-wrapper">
  25. <text class="label">文章标题</text>
  26. <text class="required">*</text>
  27. </view>
  28. <input class="input" type="text" placeholder="请输入文章标题" placeholder-class="placeholder" bindinput="onArticleInput" data-field="title" value="{{articleForm.title}}" />
  29. </view>
  30. </view>
  31. <!-- 副标题 -->
  32. <view class="form-card">
  33. <view class="form-item">
  34. <view class="label-wrapper">
  35. <text class="label">副标题</text>
  36. <text class="optional">选填</text>
  37. </view>
  38. <input class="input" type="text" placeholder="请输入副标题" placeholder-class="placeholder" bindinput="onArticleInput" data-field="subtitle" value="{{articleForm.subtitle}}" />
  39. </view>
  40. </view>
  41. <!-- 文章分类 - 新样式 -->
  42. <view class="form-card">
  43. <view class="form-item">
  44. <view class="label-wrapper">
  45. <text class="label">文章分类</text>
  46. <text class="required">*</text>
  47. </view>
  48. <picker mode="selector" range="{{articleCategories}}" range-key="dictLabel" bindchange="onArticleCategoryChange" data-type="article">
  49. <view class="category-selector">
  50. <block wx:if="{{articleCategory}}">
  51. <view class="category-badge" style="background: linear-gradient(135deg, {{getCategoryColor(articleCategory.dictLabel).start}} 0%, {{getCategoryColor(articleCategory.dictLabel).end}} 100%);">
  52. {{articleCategory.dictLabel}}
  53. </view>
  54. </block>
  55. <view wx:else class="category-placeholder">
  56. <text>请选择文章分类</text>
  57. <text class="arrow">›</text>
  58. </view>
  59. </view>
  60. </picker>
  61. </view>
  62. </view>
  63. <!-- 文章封面 -->
  64. <view class="form-card">
  65. <view class="form-item">
  66. <view class="label-wrapper">
  67. <text class="label">封面图片</text>
  68. <text class="optional">选填</text>
  69. </view>
  70. <view class="uploader-wrapper">
  71. <view class="uploader" bindtap="chooseCover" data-type="article">
  72. <image class="preview" src="{{articleCoverTemp || ''}}" mode="aspectFill" wx:if="{{articleCoverTemp}}"></image>
  73. <view class="upload-placeholder" wx:else>
  74. <text class="plus">+</text>
  75. <text class="hint">点击上传封面</text>
  76. </view>
  77. </view>
  78. <text class="upload-tip">建议尺寸 16:9,不超过5M</text>
  79. </view>
  80. </view>
  81. </view>
  82. <!-- 文章内容 -->
  83. <view class="form-card">
  84. <view class="form-item">
  85. <view class="label-wrapper">
  86. <text class="label">文章内容</text>
  87. <text class="required">*</text>
  88. </view>
  89. <textarea class="textarea" placeholder="写下你的精彩内容吧..." placeholder-class="placeholder" bindinput="onArticleInput" data-field="content" value="{{articleForm.content}}" auto-height maxlength="5000" />
  90. <text class="word-count">{{articleForm.content.length || 0}}/5000</text>
  91. </view>
  92. </view>
  93. <!-- 提交按钮 -->
  94. <view class="btn-wrapper">
  95. <button class="submit-btn {{!articleFormValid ? 'disabled' : ''}}" form-type="submit" disabled="{{!articleFormValid || submitting}}">
  96. <text wx:if="{{!submitting}}">发布文章</text>
  97. <text wx:else>发布中...</text>
  98. </button>
  99. </view>
  100. </view>
  101. </form>
  102. <!-- 视频发布表单 -->
  103. <form wx:else catchsubmit="submitVideo">
  104. <view class="form-container">
  105. <!-- 视频标题 -->
  106. <view class="form-card">
  107. <view class="form-item">
  108. <view class="label-wrapper">
  109. <text class="label">视频标题</text>
  110. <text class="required">*</text>
  111. </view>
  112. <input class="input" type="text" placeholder="请输入视频标题" placeholder-class="placeholder" bindinput="onVideoInput" data-field="title" value="{{videoForm.title}}" />
  113. </view>
  114. </view>
  115. <!-- 视频描述 -->
  116. <view class="form-card">
  117. <view class="form-item">
  118. <view class="label-wrapper">
  119. <text class="label">视频描述</text>
  120. <text class="optional">选填</text>
  121. </view>
  122. <input class="input" type="text" placeholder="简单描述一下你的视频内容" placeholder-class="placeholder" bindinput="onVideoInput" data-field="description" value="{{videoForm.description}}" />
  123. </view>
  124. </view>
  125. <!-- 视频分类 - 新样式 -->
  126. <view class="form-card">
  127. <view class="form-item">
  128. <view class="label-wrapper">
  129. <text class="label">视频分类</text>
  130. <text class="required">*</text>
  131. </view>
  132. <picker mode="selector" range="{{videoCategories}}" range-key="dictLabel" bindchange="onVideoCategoryChange" data-type="video">
  133. <view class="category-selector">
  134. <block wx:if="{{videoCategory}}">
  135. <view class="category-badge" style="background: linear-gradient(135deg, {{getCategoryColor(videoCategory.dictLabel).start}} 0%, {{getCategoryColor(videoCategory.dictLabel).end}} 100%);">
  136. {{videoCategory.dictLabel}}
  137. </view>
  138. </block>
  139. <view wx:else class="category-placeholder">
  140. <text>请选择视频分类</text>
  141. <text class="arrow">›</text>
  142. </view>
  143. </view>
  144. </picker>
  145. </view>
  146. </view>
  147. <!-- 视频封面 -->
  148. <view class="form-card">
  149. <view class="form-item">
  150. <view class="label-wrapper">
  151. <text class="label">视频封面</text>
  152. <text class="optional">选填</text>
  153. </view>
  154. <view class="uploader-wrapper">
  155. <view class="uploader" bindtap="chooseCover" data-type="video">
  156. <image class="preview" src="{{videoCoverTemp || ''}}" mode="aspectFill" wx:if="{{videoCoverTemp}}"></image>
  157. <view class="upload-placeholder" wx:else>
  158. <text class="plus">+</text>
  159. <text class="hint">点击上传封面</text>
  160. </view>
  161. </view>
  162. </view>
  163. </view>
  164. </view>
  165. <!-- 视频地址 -->
  166. <view class="form-card">
  167. <view class="form-item">
  168. <view class="label-wrapper">
  169. <text class="label">视频地址</text>
  170. <text class="required">*</text>
  171. </view>
  172. <view class="video-picker" bindtap="chooseVideo">
  173. <view wx:if="{{videoUrlTemp}}" class="video-info">
  174. <text class="video-name">{{videoUrlTemp}}</text>
  175. </view>
  176. <view wx:else class="video-placeholder">
  177. <text class="plus">+</text>
  178. <text class="hint">点击选择视频</text>
  179. </view>
  180. </view>
  181. </view>
  182. </view>
  183. <!-- 提交按钮 -->
  184. <view class="btn-wrapper">
  185. <button class="submit-btn {{!videoFormValid ? 'disabled' : ''}}" form-type="submit" disabled="{{!videoFormValid || submitting}}">
  186. <text wx:if="{{!submitting}}">发布视频</text>
  187. <text wx:else>发布中...</text>
  188. </button>
  189. </view>
  190. </view>
  191. </form>
  192. </view>