novel-front-app/pages_order/components/novel/novelVotePopup.vue

<template>
	<uv-popup ref="popup" :round="30">
		<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" 
                    v-for="item in voteList" 
                    :key="item" 
                    :class="{'active': voteCount == item}"
                    @click="setVotes(item)">{{ item }}</view>
				</view>
		
				<text class="option-label">手动设置</text>
				<view class="manual-input">
					<uv-number-box 
                    v-model="voteCount" 
                    :min="1"
                    :max="maxVote"
                    integer
                    inputWidth="200rpx"
                    buttonSize="80rpx"
                    placeholder="请输入投票数" />
				</view>
			</view>
		
			<button class="submit-btn" @click="submitVote">投票</button>
		</view>
	</uv-popup>
</template>

<script>
	export default {
		data() {
			return {
				voteCount: 1,
				id: 0,
                voteList: [1, 5, 10],
				maxVote : 0,
			}
		},
		methods: {
            setVotes(count) {
                this.voteCount = Math.min(count, this.maxVote)
            },
			open(id) {
				this.id = id
				this.$refs.popup.open('bottom')
				this.$fetch('getMyRecommendTicketNum')
				.then(res => {
					this.maxVote = res
				})
			},
			close() {
				this.$refs.popup.close()
			},
            submitVote() {
                this.$fetch('vote', {
                    bookId: this.id,
                    num: this.voteCount
                }).then(res => {
                    this.close()
                    this.$emit('updateVote')
                })
            }
		}
	}
</script>

<style scoped lang="scss">

	.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;
            &.active{
                background-color: $uni-color;
                color: #fff;
            }
        }
	}

	.manual-input {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx;
        ::v-deep .uv-number-box__plus{
            height: 200rpx !important;
        }
        ::v-deep .uv-number-box__minus{
            height: 200rpx !important;
        }
	}

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