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

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

        <view class="form-card">
            <view class="form-item">
                <text class="label">笔名</text>
                <input v-model="form.name" placeholder="请输入" class="input" placeholder-class="input-placeholder" />
            </view>
            <view class="form-item">
                <text class="label">简介</text>
                <textarea v-model="form.details" 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 {
            form : {
				name : '',
				details : '',
			},
        }
    },
	onLoad() {
		this.getMyWriter()
	},
    methods: {
        submit() {
            if (!this.form.name) {
                uni.showToast({ title: '请输入笔名', icon: 'none' })
                return
            }
            if (!this.form.details) {
                uni.showToast({ title: '请输入简介', icon: 'none' })
                return
            }
			
			let data = {
				penName : this.form.name,
				details : this.form.details,
			}
			
			if(this.form.id){
				data.id = this.form.id
			}
			
			this.$api('saveOrUpdateWriter', data, res => {
				if(res.code == 200){
					uni.showToast({ title: '申请成功', icon: 'success' })
					setTimeout(() => {
					    uni.navigateBack()
					}, 800)
				}
			})
        },
		getMyWriter(){
			this.$api('getMyWriter')
			.then(res => {
				if(res.result){
					this.form = res.result
				}
			})
		},
    }
}
</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;
}

.label {
    font-size: 28rpx;
    color: #222;
    font-weight: bold;
    margin-bottom: 12rpx;
	&::before{
		content: '*';
		color: #e23d3d;
		font-size: 28rpx;
	}
}

.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>