novel-app/RuoYi-App/pages/admin/upload.vue

<template>
  <view class="upload-container">
    <view class="header">作品管理</view>
    
    <view class="tabs">
      <view 
        :class="{ active: activeTab === 'novel' }"
        @click="activeTab = 'novel'"
      >
        上传整本小说
      </view>
      <view 
        :class="{ active: activeTab === 'chapter' }"
        @click="activeTab = 'chapter'"
      >
        上传章节
      </view>
    </view>
    
    <!-- 整本小说上传 -->
    <view v-if="activeTab === 'novel'" class="form-section">
      <view class="form-item">
        <text class="label">小说标题</text>
        <input v-model="novelForm.title" placeholder="请输入小说标题" />
      </view>
      
      <view class="form-item">
        <text class="label">选择作者</text>
        <picker @change="bindAuthorChange" :value="authorIndex" :range="authors">
          <view class="picker">
            {{ novelForm.authorName || '请选择作者' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">上传文件</text>
        <button class="upload-btn" @click="chooseNovelFile">选择TXT文件</button>
        <text v-if="novelForm.file" class="file-name">{{ novelForm.file.name }}</text>
      </view>
      
      <button class="submit-btn" @click="submitNovel">提交上传</button>
    </view>
    
    <!-- 章节上传 -->
    <view v-if="activeTab === 'chapter'" class="form-section">
      <view class="form-item">
        <text class="label">选择小说</text>
        <picker @change="bindNovelChange" :value="novelIndex" :range="novels">
          <view class="picker">
            {{ chapterForm.novelTitle || '请选择小说' }}
          </view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">章节序号</text>
        <input v-model="chapterForm.chapterOrder" placeholder="自动生成或手动指定" />
      </view>
      
      <view class="form-item">
        <text class="label">上传章节</text>
        <button class="upload-btn" @click="chooseChapterFile">选择TXT文件</button>
        <text v-if="chapterForm.file" class="file-name">{{ chapterForm.file.name }}</text>
      </view>
      
      <button class="submit-btn" @click="submitChapter">提交上传</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'novel',
      authors: [],
      authorIndex: -1,
      novels: [],
      novelIndex: -1,
      novelForm: {
        title: '',
        authorId: null,
        authorName: '',
        file: null
      },
      chapterForm: {
        novelId: null,
        novelTitle: '',
        chapterOrder: '',
        file: null
      }
    };
  },
  async onLoad() {
    // 加载作者列表
    const authorRes = await this.$api.getAuthorList();
    this.authors = authorRes.data.map(a => a.nickName);
    
    // 加载小说列表
    const novelRes = await this.$api.getNovelList();
    this.novels = novelRes.rows.map(n => n.title);
  },
  methods: {
    // 作者选择
    bindAuthorChange(e) {
      this.authorIndex = e.detail.value;
      this.novelForm.authorId = this.authors[this.authorIndex].userId;
      this.novelForm.authorName = this.authors[this.authorIndex].nickName;
    },
    
    // 小说选择
    bindNovelChange(e) {
      this.novelIndex = e.detail.value;
      this.chapterForm.novelId = this.novels[this.novelIndex].id;
      this.chapterForm.novelTitle = this.novels[this.novelIndex].title;
    },
    
    // 选择文件
    chooseNovelFile() {
      uni.chooseFile({
        count: 1,
        extension: ['.txt'],
        success: (res) => {
          this.novelForm.file = res.tempFiles[0];
        }
      });
    },
    
    chooseChapterFile() {
      uni.chooseFile({
        count: 1,
        extension: ['.txt'],
        success: (res) => {
          this.chapterForm.file = res.tempFiles[0];
        }
      });
    },
    
    // 提交表单
    async submitNovel() {
      if (!this.novelForm.title || !this.novelForm.authorId || !this.novelForm.file) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }
      
      try {
        const formData = new FormData();
        formData.append('title', this.novelForm.title);
        formData.append('authorId', this.novelForm.authorId);
        formData.append('file', this.novelForm.file);
        
        const res = await this.$api.uploadNovel(formData);
        uni.showToast({ title: '上传成功' });
        this.resetNovelForm();
      } catch (e) {
        uni.showToast({ title: '上传失败: ' + e.message, icon: 'none' });
      }
    },
    
    async submitChapter() {
      if (!this.chapterForm.novelId || !this.chapterForm.file) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }
      
      try {
        const formData = new FormData();
        formData.append('novelId', this.chapterForm.novelId);
        if (this.chapterForm.chapterOrder) {
          formData.append('chapterOrder', this.chapterForm.chapterOrder);
        }
        formData.append('file', this.chapterForm.file);
        
        const res = await this.$api.uploadChapter(formData);
        uni.showToast({ title: '章节上传成功' });
        this.resetChapterForm();
      } catch (e) {
        uni.showToast({ title: '上传失败: ' + e.message, icon: 'none' });
      }
    },
    
    resetNovelForm() {
      this.novelForm = {
        title: '',
        authorId: null,
        authorName: '',
        file: null
      };
      this.authorIndex = -1;
    },
    
    resetChapterForm() {
      this.chapterForm = {
        novelId: null,
        novelTitle: '',
        chapterOrder: '',
        file: null
      };
      this.novelIndex = -1;
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-container {
  padding: 30rpx;
}

.header {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
  text-align: center;
  color: #3a8ee6; /* 若依主题色 */
}

.tabs {
  display: flex;
  margin-bottom: 30rpx;
  border-bottom: 1rpx solid #eee;
  
  view {
    flex: 1;
    text-align: center;
    padding: 20rpx 0;
    font-size: 30rpx;
    color: #666;
    
    &.active {
      color: #3a8ee6;
      font-weight: bold;
      border-bottom: 4rpx solid #3a8ee6;
    }
  }
}

.form-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.form-item {
  margin-bottom: 40rpx;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
  
  .label {
    display: block;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    color: #333;
    font-weight: 500;
  }
  
  input, .picker {
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    padding: 0 20rpx;
    border: 1rpx solid #ddd;
    border-radius: 8rpx;
    box-sizing: border-box;
  }
  
  .picker {
    display: flex;
    align-items: center;
  }
}

.upload-btn {
  background: #f8f8f8;
  color: #3a8ee6;
  font-size: 26rpx;
  height: 80rpx;
  line-height: 80rpx;
  border: 1rpx dashed #3a8ee6;
  border-radius: 8rpx;
}

.file-name {
  display: block;
  margin-top: 15rpx;
  font-size: 26rpx;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.submit-btn {
  background: #3a8ee6;
  color: white;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  margin-top: 50rpx;
}
</style>