novel-front-app/pages_order/novel/createNovel.vue

<template>
  <!-- 新建作品页面 -->
  <view class="create-novel">
    <uv-navbar
      title="新建作品"
      :autoBack="true"
      fixed
      placeholder
      titleStyle="color: #333; font-weight: 500;"
      :border="false"
    ></uv-navbar>
    
    <view class="form-container">
      <!-- 封面信息 -->
      <view class="section">
        <view class="section-title">封面信息</view>
        <view class="upload-cover">
          <view class="sub-title">上传封面</view>
          <view class="cover-box" @click="chooseCover">
            <image v-if="formData.cover" :src="formData.cover" mode="aspectFill" class="cover-image"></image>
            <view v-else class="upload-placeholder">
              <text class="plus">+</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 作品信息 -->
      <view class="section">
        <view class="section-title">作品信息</view>
        <view class="form-item">
          <text class="required">*</text>
          <text class="label">作品名称</text>
          <input 
            type="text" 
            v-model="formData.title"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>
        
        <view class="form-item">
          <text class="required">*</text>
          <text class="label">作品类型</text>
          <input 
            type="text" 
            v-model="formData.type"
            placeholder="请输入"
            placeholder-class="input-placeholder"
          />
        </view>
        
        <view class="form-item">
          <text class="required">*</text>
          <text class="label">作品简介</text>
          <textarea 
            v-model="formData.description"
            placeholder="请输入"
            placeholder-class="input-placeholder"
            :maxlength="500"
          ></textarea>
        </view>
        
        <view class="form-item">
          <text class="required">*</text>
          <text class="label">作品状态</text>
          <view class="status-options">
            <view 
              class="status-item" 
              :class="{ active: formData.status === 'serial' }"
              @click="formData.status = 'serial'"
            >
              <view class="radio-dot" :class="{ checked: formData.status === 'serial' }"></view>
              <text>连载</text>
            </view>
            <view 
              class="status-item"
              :class="{ active: formData.status === 'completed' }"
              @click="formData.status = 'completed'"
            >
              <view class="radio-dot" :class="{ checked: formData.status === 'completed' }"></view>
              <text>完结</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 书籍信息 -->
      <view class="section">
        <view class="section-title">书籍信息</view>
        <view class="form-item">
          <text class="label">书号</text>
          <text class="value">9999993339393</text>
        </view>
        <view class="form-item">
          <text class="label">总字数</text>
          <text class="value">99999999</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn" @click="submitForm">提交申请</view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
    'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue')
  },
  data() {
    return {
      formData: {
        cover: '',
        title: '',
        type: '',
        description: '',
        status: 'serial' // 默认连载
      }
    }
  },
  methods: {
    // 选择封面
    chooseCover() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.formData.cover = res.tempFilePaths[0]
        }
      })
    },
    
    // 提交表单
    submitForm() {
      if (!this.formData.title) {
        uni.showToast({
          title: '请输入作品名称',
          icon: 'none'
        })
        return
      }
      if (!this.formData.type) {
        uni.showToast({
          title: '请输入作品类型',
          icon: 'none'
        })
        return
      }
      if (!this.formData.description) {
        uni.showToast({
          title: '请输入作品简介',
          icon: 'none'
        })
        return
      }

      // 构建作品数据
      const workData = {
        id: Date.now().toString(),
        title: this.formData.title,
        cover: this.formData.cover || 'https://bookcover.yuewen.com/qdbimg/349573/1033014772/150.webp',
        readers: '8721',
        status: 'ongoing',
        publishStatus: '发布审核中',
        isOriginal: true
      }

      // 保存到全局状态
      getApp().globalData.submittedWork = workData
      // 设置需要显示提交成功提示的标记
      getApp().globalData.showSubmitSuccess = true

      // 延迟返回上一页
      setTimeout(() => {
        // 先保存当前要显示的标签
        uni.setStorageSync('activeBookshelfTab', 'work')
        
        // 返回上一页
        uni.navigateBack({
          delta: 1
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.create-novel {
  min-height: 100vh;
  background-color: #F8F8F8;
  
  .form-container {
    padding: 20rpx;
    
    .section {
      background-color: #FFFFFF;
      border-radius: 12rpx;
      padding: 30rpx;
      margin-bottom: 20rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
      }
      
      .upload-cover {
        .sub-title {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 20rpx;
        }
        
        .cover-box {
          width: 200rpx;
          height: 266rpx;
          background-color: #F5F5F5;
          border-radius: 8rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          
          .cover-image {
            width: 100%;
            height: 100%;
          }
          
          .upload-placeholder {
            .plus {
              font-size: 60rpx;
              color: #999;
            }
          }
        }
      }
      
      .form-item {
        margin-bottom: 30rpx;
        position: relative;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .required {
          color: #FF0000;
          margin-right: 4rpx;
        }
        
        .label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          display: block;
        }
        
        input, textarea {
          width: 100%;
          height: 80rpx;
          background-color: #F5F5F5;
          border-radius: 8rpx;
          padding: 20rpx;
          font-size: 28rpx;
          color: #333;
          box-sizing: border-box;
          position: relative;
          z-index: 1;
        }
        
        textarea {
          height: 200rpx;
        }
        
        .input-placeholder {
          color: #999;
        }
        
        .status-options {
          display: flex;
          gap: 40rpx;
          
          .status-item {
            display: flex;
            align-items: center;
            gap: 10rpx;
            
            .radio-dot {
              width: 32rpx;
              height: 32rpx;
              border: 2rpx solid #999;
              border-radius: 50%;
              position: relative;
              
              &.checked {
                border-color: #001351;
                
                &::after {
                  content: '';
                  position: absolute;
                  width: 20rpx;
                  height: 20rpx;
                  background-color: #001351;
                  border-radius: 50%;
                  left: 50%;
                  top: 50%;
                  transform: translate(-50%, -50%);
                }
              }
            }
            
            text {
              font-size: 28rpx;
              color: #333;
            }
          }
        }
        
        .value {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
    
    .submit-btn {
      background-color: #001351;
      color: #FFFFFF;
      font-size: 32rpx;
      text-align: center;
      padding: 24rpx 0;
      border-radius: 12rpx;
      margin-top: 40rpx;
      
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style>