quyun-v2/frontend/portal/src/views/creator/ApplyView.vue

<template>
  <!-- Main Container -->
  <div class="mx-auto max-w-4xl my-8 bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden min-h-[600px]">
    
    <!-- Step 1: Landing -->
    <div v-if="step === 1">
       <div class="relative h-[400px] w-full overflow-hidden">
          <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-black/40 flex items-center justify-center p-12">
             <div class="text-center text-white">
                <h1 class="text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">开启您的内容创作之旅</h1>
                <p class="text-xl md:text-2xl opacity-90 max-w-2xl mx-auto drop-shadow-md">加入我们，获得专属频道主页，通过优质戏曲内容获取收益，与百万戏迷互动。</p>
             </div>
          </div>
       </div>

       <div class="p-12">
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
             <div class="p-6 bg-slate-50 rounded-xl text-center">
                <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"><i class="pi pi-wallet"></i></div>
                <h3 class="font-bold text-slate-900 mb-2">内容变现</h3>
                <p class="text-sm text-slate-500">灵活设置付费阅读与会员专栏，收益直接结算。</p>
             </div>
             <div class="p-6 bg-slate-50 rounded-xl text-center">
                <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"><i class="pi pi-home"></i></div>
                <h3 class="font-bold text-slate-900 mb-2">专属频道</h3>
                <p class="text-sm text-slate-500">拥有独立的品牌展示空间，积累私域粉丝。</p>
             </div>
             <div class="p-6 bg-slate-50 rounded-xl text-center">
                <div class="w-12 h-12 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center text-2xl mx-auto mb-4"><i class="pi pi-chart-bar"></i></div>
                <h3 class="font-bold text-slate-900 mb-2">数据管理</h3>
                <p class="text-sm text-slate-500">全方位的作品数据分析，助您优化创作方向。</p>
             </div>
          </div>

          <div class="text-center">
             <button @click="step = 2" class="px-12 py-4 bg-primary-600 text-white rounded-full font-bold text-xl hover:bg-primary-700 transition-colors shadow-lg shadow-primary-200 cursor-pointer active:scale-95">
                立即申请入驻
             </button>
          </div>
       </div>
    </div>

    <!-- Step 2: Application Form -->
    <div v-else-if="step === 2" class="p-8 md:p-12">
       <h2 class="text-2xl font-bold text-slate-900 mb-8">填写申请资料</h2>

       <div class="space-y-8 max-w-2xl mx-auto">
          <!-- Avatar -->
          <div class="flex items-center gap-6">
             <div class="w-24 h-24 rounded-full bg-slate-100 flex items-center justify-center border-2 border-dashed border-slate-300 hover:border-primary-400 cursor-pointer transition-colors" @click="triggerUpload">
                <img v-if="form.avatar" :src="form.avatar" class="w-full h-full rounded-full object-cover">
                <i v-else class="pi pi-camera text-3xl text-slate-400"></i>
             </div>
             <div>
                <div class="font-bold text-slate-900 mb-1">频道头像 <span class="text-red-500">*</span></div>
                <p class="text-sm text-slate-500">建议使用清晰的个人照或 Logo</p>
             </div>
             <input type="file" ref="fileInput" class="hidden" @change="handleFileChange">
          </div>

          <!-- Name -->
          <div>
             <label class="block font-bold text-slate-900 mb-2">频道名称 <span class="text-red-500">*</span></label>
             <input v-model="form.name" type="text" class="w-full h-12 px-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-4 focus:ring-primary-100 outline-none transition-all text-lg" placeholder="给您的频道起个名字">
          </div>

          <!-- Bio -->
          <div>
             <label class="block font-bold text-slate-900 mb-2">频道介绍 <span class="text-red-500">*</span></label>
             <textarea v-model="form.bio" rows="3" class="w-full p-4 rounded-lg border border-slate-200 focus:border-primary-500 focus:ring-4 focus:ring-primary-100 outline-none transition-all text-base resize-none" placeholder="一句话介绍您的频道特色..."></textarea>
          </div>

          <!-- Agreement -->
          <div class="flex items-center pt-4">
             <input type="checkbox" id="agree" v-model="form.agreed" class="w-5 h-5 rounded border-slate-300 text-primary-600 focus:ring-primary-500 cursor-pointer">
             <label for="agree" class="ml-3 text-slate-600 cursor-pointer">
                我已阅读并同意 <a href="#" class="text-primary-600 hover:underline">《创作者入驻协议》</a>
             </label>
          </div>

          <!-- Actions -->
          <div class="pt-6">
             <button 
               @click="submitForm" 
               class="w-full py-4 bg-primary-600 text-white rounded-xl font-bold text-xl hover:bg-primary-700 transition-all shadow-lg disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer active:scale-95"
               :disabled="!isValid"
             >
                {{ submitting ? '正在提交...' : '提交审核' }}
             </button>
          </div>
       </div>
    </div>

    <!-- Step 3: Result -->
    <div v-else-if="step === 3" class="p-20 text-center">
       <div class="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-4xl mx-auto mb-6 animate-in zoom-in duration-300">
          <i class="pi pi-check"></i>
       </div>
       <h2 class="text-3xl font-bold text-slate-900 mb-4">申请已提交</h2>
       <p class="text-lg text-slate-600 mb-12 max-w-lg mx-auto">您的入驻申请已成功提交，平台将在 1-3 个工作日内完成审核。审核结果将通过短信和系统通知发送给您。</p>
       
       <div class="flex justify-center gap-4">
          <router-link to="/" class="px-8 py-3 bg-white border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 font-medium">返回首页</router-link>
          <router-link to="/me" class="px-8 py-3 bg-primary-600 text-white rounded-lg hover:bg-primary-700 font-medium">查看个人中心</router-link>
       </div>
    </div>

  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';

const step = ref(1);
const submitting = ref(false);
const fileInput = ref(null);

const form = reactive({
    avatar: '',
    name: '',
    bio: '',
    agreed: false
});

const isValid = computed(() => {
    return form.avatar && form.name && form.bio && form.agreed;
});

const triggerUpload = () => {
    fileInput.value.click();
};

const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
            form.avatar = e.target.result;
        };
        reader.readAsDataURL(file);
    }
};

const submitForm = () => {
    if (!isValid.value) return;
    
    submitting.value = true;
    // Simulate API
    setTimeout(() => {
        submitting.value = false;
        step.value = 3;
    }, 1500);
};
</script>