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

205 lines
9.9 KiB

<view class="container">
<!-- 顶部背景装饰 -->
<view class="bg-decoration">
<view class="circle circle-1"></view>
<view class="circle circle-2"></view>
</view>
<!-- 分类切换卡片 -->
<view class="tab-card">
<view class="category-tab">
<view class="tab-item {{currentTab === 'article' ? 'active' : ''}}" data-type="article" bindtap="switchTab">
<text class="tab-text">发布文章</text>
</view>
<view class="tab-item {{currentTab === 'video' ? 'active' : ''}}" data-type="video" bindtap="switchTab">
<text class="tab-text">发布视频</text>
</view>
</view>
</view>
<!-- 文章发布表单 -->
<form wx:if="{{currentTab === 'article'}}" catchsubmit="submitArticle">
<view class="form-container">
<!-- 文章标题 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">文章标题</text>
<text class="required">*</text>
</view>
<input class="input" type="text" placeholder="请输入文章标题" placeholder-class="placeholder" bindinput="onArticleInput" data-field="title" value="{{articleForm.title}}" />
</view>
</view>
<!-- 副标题 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">副标题</text>
<text class="optional">选填</text>
</view>
<input class="input" type="text" placeholder="请输入副标题" placeholder-class="placeholder" bindinput="onArticleInput" data-field="subtitle" value="{{articleForm.subtitle}}" />
</view>
</view>
<!-- 文章分类 - 新样式 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">文章分类</text>
<text class="required">*</text>
</view>
<picker mode="selector" range="{{articleCategories}}" range-key="dictLabel" bindchange="onArticleCategoryChange" data-type="article">
<view class="category-selector">
<block wx:if="{{articleCategory}}">
<view class="category-badge" style="background: linear-gradient(135deg, {{getCategoryColor(articleCategory.dictLabel).start}} 0%, {{getCategoryColor(articleCategory.dictLabel).end}} 100%);">
{{articleCategory.dictLabel}}
</view>
</block>
<view wx:else class="category-placeholder">
<text>请选择文章分类</text>
<text class="arrow">›</text>
</view>
</view>
</picker>
</view>
</view>
<!-- 文章封面 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">封面图片</text>
<text class="optional">选填</text>
</view>
<view class="uploader-wrapper">
<view class="uploader" bindtap="chooseCover" data-type="article">
<image class="preview" src="{{articleCoverTemp || ''}}" mode="aspectFill" wx:if="{{articleCoverTemp}}"></image>
<view class="upload-placeholder" wx:else>
<text class="plus">+</text>
<text class="hint">点击上传封面</text>
</view>
</view>
<text class="upload-tip">建议尺寸 16:9,不超过5M</text>
</view>
</view>
</view>
<!-- 文章内容 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">文章内容</text>
<text class="required">*</text>
</view>
<textarea class="textarea" placeholder="写下你的精彩内容吧..." placeholder-class="placeholder" bindinput="onArticleInput" data-field="content" value="{{articleForm.content}}" auto-height maxlength="5000" />
<text class="word-count">{{articleForm.content.length || 0}}/5000</text>
</view>
</view>
<!-- 提交按钮 -->
<view class="btn-wrapper">
<button class="submit-btn {{!articleFormValid ? 'disabled' : ''}}" form-type="submit" disabled="{{!articleFormValid || submitting}}">
<text wx:if="{{!submitting}}">发布文章</text>
<text wx:else>发布中...</text>
</button>
</view>
</view>
</form>
<!-- 视频发布表单 -->
<form wx:else catchsubmit="submitVideo">
<view class="form-container">
<!-- 视频标题 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">视频标题</text>
<text class="required">*</text>
</view>
<input class="input" type="text" placeholder="请输入视频标题" placeholder-class="placeholder" bindinput="onVideoInput" data-field="title" value="{{videoForm.title}}" />
</view>
</view>
<!-- 视频描述 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">视频描述</text>
<text class="optional">选填</text>
</view>
<input class="input" type="text" placeholder="简单描述一下你的视频内容" placeholder-class="placeholder" bindinput="onVideoInput" data-field="description" value="{{videoForm.description}}" />
</view>
</view>
<!-- 视频分类 - 新样式 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">视频分类</text>
<text class="required">*</text>
</view>
<picker mode="selector" range="{{videoCategories}}" range-key="dictLabel" bindchange="onVideoCategoryChange" data-type="video">
<view class="category-selector">
<block wx:if="{{videoCategory}}">
<view class="category-badge" style="background: linear-gradient(135deg, {{getCategoryColor(videoCategory.dictLabel).start}} 0%, {{getCategoryColor(videoCategory.dictLabel).end}} 100%);">
{{videoCategory.dictLabel}}
</view>
</block>
<view wx:else class="category-placeholder">
<text>请选择视频分类</text>
<text class="arrow">›</text>
</view>
</view>
</picker>
</view>
</view>
<!-- 视频封面 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">视频封面</text>
<text class="optional">选填</text>
</view>
<view class="uploader-wrapper">
<view class="uploader" bindtap="chooseCover" data-type="video">
<image class="preview" src="{{videoCoverTemp || ''}}" mode="aspectFill" wx:if="{{videoCoverTemp}}"></image>
<view class="upload-placeholder" wx:else>
<text class="plus">+</text>
<text class="hint">点击上传封面</text>
</view>
</view>
</view>
</view>
</view>
<!-- 视频地址 -->
<view class="form-card">
<view class="form-item">
<view class="label-wrapper">
<text class="label">视频地址</text>
<text class="required">*</text>
</view>
<view class="video-picker" bindtap="chooseVideo">
<view wx:if="{{videoUrlTemp}}" class="video-info">
<text class="video-name">{{videoUrlTemp}}</text>
</view>
<view wx:else class="video-placeholder">
<text class="plus">+</text>
<text class="hint">点击选择视频</text>
</view>
</view>
</view>
</view>
<!-- 提交按钮 -->
<view class="btn-wrapper">
<button class="submit-btn {{!videoFormValid ? 'disabled' : ''}}" form-type="submit" disabled="{{!videoFormValid || submitting}}">
<text wx:if="{{!submitting}}">发布视频</text>
<text wx:else>发布中...</text>
</button>
</view>
</view>
</form>
</view>