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

<template>
    <!-- 申请成为作者页面 -->
    <view class="creator-page">
        <navbar title="请成为创作者" leftClick @leftClick="$utils.navigateBack" />

        <view class="form-card">
            <view class="form-item">
                <text class="required">*</text>
                <text class="label">笔名</text>
                <input v-model="penName" placeholder="请输入" class="input" placeholder-class="input-placeholder" />
            </view>
            <view class="form-item">
                <text class="required">*</text>
                <text class="label">简介</text>
                <textarea v-model="intro" placeholder="请输入" class="textarea" placeholder-class="input-placeholder" />
            </view>
        </view>
        <view class="footer-btn-area">
            <button class="submit-btn" @click="submit">成为创作者</button>
        </view>
    </view>
</template>

<script>

export default {
    components: {
    },
    data() {
        return {
            penName: '',
            intro: ''
        }
    },
    methods: {
        submit() {
            if (!this.penName) {
                uni.showToast({ title: '请输入笔名', icon: 'none' })
                return
            }
            if (!this.intro) {
                uni.showToast({ title: '请输入简介', icon: 'none' })
                return
            }
            // 这里可以添加提交逻辑
            uni.showToast({ title: '申请成功', icon: 'success' })
            setTimeout(() => {
                uni.navigateBack()
            }, 800)
        }
    }
}
</script>

<style scoped lang="scss">
.creator-page {
    min-height: 100vh;
    background: #f7f8fa;
    display: flex;
    flex-direction: column;
}

.form-card {
    background: #fff;
    border-radius: 20rpx;
    margin: 40rpx 32rpx 0 32rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.04);
}

.form-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 32rpx;
    position: relative;
}

.required {
    color: #e23d3d;
    font-size: 28rpx;
    margin-right: 4rpx;
}

.label {
    font-size: 28rpx;
    color: #222;
    font-weight: bold;
    margin-bottom: 12rpx;
}

.input,
.textarea {
    width: 100%;
    height: 80rpx;
    border: none;
    border-bottom: 1.5rpx solid #ececec;
    font-size: 28rpx;
    background: transparent;
    padding: 18rpx 0 12rpx 0;
    margin-bottom: 2rpx;
}

.input-placeholder {
    color: #d2d2d2;
    font-size: 26rpx;
}

.textarea {
    min-height: 120rpx;
    resize: none;
}

.footer-btn-area {
    margin-top: auto;
    padding: 48rpx 32rpx 32rpx 32rpx;
    background: transparent;
    margin-bottom: 80rpx;
}

.submit-btn {
    width: 100%;
    height: 88rpx;
    background: #0a2e6d;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    font-weight: bold;
    letter-spacing: 2rpx;
    transition: background 0.2s;
}
</style>