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

<template>
	<view class="vote-container">
		<!-- Empty space at the top -->
		<view class="empty-space"></view>

		<!-- Bottom sheet with voting interface -->
		<view class="vote-sheet">
			<view class="sheet-header">
				<text class="sheet-title">投推荐票</text>
			</view>

			<view class="vote-options">
				<text class="option-label">推荐投票</text>
				<view class="quick-options">
					<view class="option-btn" @click="setVotes(1)">1</view>
					<view class="option-btn" @click="setVotes(5)">5</view>
					<view class="option-btn" @click="setVotes(10)">10</view>
				</view>

				<text class="option-label">手动设置</text>
				<view class="manual-input">
					<view class="minus-btn" @click="decreaseVotes">-</view>
					<view class="vote-count">
						<text>x{{voteCount}}</text>
					</view>
					<view class="plus-btn" @click="increaseVotes">+</view>
				</view>
			</view>

			<button class="submit-btn" @click="submitVote">投票</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				voteCount: 1
			}
		},
		methods: {
			setVotes(count) {
				this.voteCount = count
			},
			increaseVotes() {
				this.voteCount++
			},
			decreaseVotes() {
				if (this.voteCount > 1) {
					this.voteCount--
				}
			},
			submitVote() {
				// TODO: Implement vote submission
				uni.showToast({
					title: `已投${this.voteCount}票`,
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss">
	.vote-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.empty-space {
		flex: 1;
	}

	.vote-sheet {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 30rpx;
	}

	.sheet-header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.sheet-title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.vote-options {
		margin-bottom: 40rpx;
	}

	.option-label {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.quick-options {
		display: flex;
		gap: 20rpx;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}

	.option-btn {
		flex: 1;
		height: 80rpx;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.manual-input {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
	}

	.minus-btn,
	.plus-btn {
		width: 220rpx;
		height: 80rpx;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		font-size: 32rpx;
	}

	.vote-count {
		width: 220rpx;
		height: 82rpx;
		background-color: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.submit-btn {
		width: 100%;
		height: 88rpx;
		background-color: #000033;
		color: #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>