novel-app/RuoYi-App/pages/author/apply.vue

<template>
  <view class="apply-container">
    <view class="form-title">成为签约作家</view>
    
    <form @submit="submitForm">
      <view class="form-item">
        <text class="form-label">真实姓名</text>
        <input v-model="form.realName" placeholder="请输入真实姓名" />
      </view>
      
      <view class="form-item">
        <text class="form-label">联系方式</text>
        <input v-model="form.contact" placeholder="手机号/微信/QQ" />
      </view>
      
  <!-- 添加作品类型选择器 -->
  <view class="form-item">
    <text class="form-label">作品类型</text>
    <picker @change="bindTypeChange" :value="typeIndex" :range="novelTypes">
      <view class="picker">
        {{ form.type || '请选择作品类型' }}
      </view>
    </picker>
  </view>
      
      <view class="form-item">
        <text class="form-label">作品名称</text>
        <input v-model="form.novelTitle" placeholder="请输入作品名称" />
      </view>
      
      <view class="form-item">
        <text class="form-label">作品简介</text>
        <textarea 
          v-model="form.description" 
          placeholder="请简要描述你的作品内容" 
          maxlength="500" 
          auto-height
        />
      </view>
      
      <view class="form-item">
        <text class="form-label">作品示例</text>
        <textarea 
          v-model="form.sampleContent" 
          placeholder="请提供1-3章示例内容" 
          maxlength="5000" 
          auto-height
        />
      </view>
      
  <!-- 添加提交按钮状态 -->
  <button 
    form-type="submit" 
    class="submit-btn"
    :disabled="submitting"
  >
    {{ submitting ? '提交中...' : '提交申请' }}
  </button>
    </form>
    
    <view class="agreement">
      提交申请即表示同意
      <text class="link" @click="viewAgreement">《作家签约协议》</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        realName: '',
        contact: '',
        type: '',
        novelTitle: '',
        description: '',
        sampleContent: ''
      },
      novelTypes: ['都市言情', '玄幻奇幻', '武侠仙侠', '历史军事', '科幻灵异', '游戏竞技', '其他'],
	  submitting: false,
      typeIndex: -1
    }
  },
  methods: {
    bindTypeChange(e) {
      this.typeIndex = e.detail.value;
      this.form.type = this.novelTypes[this.typeIndex];
    },
    async submitForm() {
		this.submitting = true;
      // 表单验证
      if (!this.form.realName || !this.form.contact || !this.form.type || 
          !this.form.novelTitle || !this.form.description) {
        uni.showToast({ title: '请填写完整信息', icon: 'none' });
        return;
      }
      
      try {
        // 调用API
        await this.$api.applyAuthor(this.form);
        
        uni.showToast({ title: '提交成功，请等待审核' });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (e) {
        uni.showToast({ title: e.message || '提交失败', icon: 'none' });
      } finally {
        this.submitting = false;
      }
    },
    viewAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/author'
      });
    }
  }
}
</script>

<style scoped>
.apply-container {
  padding: 40rpx;
}

.form-title {
  font-size: 40rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.form-label {
  display: block;
  font-size: 30rpx;
  margin-bottom: 15rpx;
  color: #333;
}

input, textarea, .picker {
  width: 100%;
  font-size: 28rpx;
  min-height: 60rpx;
}

textarea {
  min-height: 200rpx;
}

.submit-btn {
  background-color: #3cc51f;
  color: white;
  margin-top: 40rpx;
  border-radius: 50rpx;
}

.agreement {
  text-align: center;
  margin-top: 30rpx;
  font-size: 24rpx;
  color: #888;
}

.link {
  color: #3cc51f;
}
</style>