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

<template>
	<!-- 礼物盒页面 -->
	<view class="giftbox-container">
		<navbar title="礼物盒" leftClick @leftClick="$utils.navigateBack" />

		<!-- 礼物列表 -->
		<view class="gift-list">
			<!-- <view v-for="(gift, idx) in gifts" :key="gift.id"
				:class="['gift-item', { selected: idx === selectedIndex }]" @click="selectGift(idx)">
				<view class="gift-img">
					<text class="gift-emoji">{{ gift.emoji }}</text>
				</view>
				<view class="gift-name">{{ gift.name }}</view>
				<view class="gift-info">
					<text class="gift-count">x{{ gift.count }}</text>
					<text class="gift-bean">{{ gift.price }}豆豆</text>
				</view>
			</view> -->
			
			<view v-for="(gift, idx) in list" :key="gift.id"
				:class="['gift-item', { selected: idx === selectedIndex }]" @click="selectGift(idx)">
				<view class="gift-img">
					<view class="gift-emoji">
						<image :src="gift.image" 
						mode="aspectFill"></image>
					</view>
				</view>
				<view class="gift-name">{{ gift.title }}</view>
				<view class="gift-info">
					<!-- <text class="gift-count">x{{ gift.count }}</text> -->
					<text class="gift-bean">{{ gift.integerPrice }}豆豆</text>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="giftbox-bottom">
			<view class="giftbox-left">剩余：{{ gifts[selectedIndex].count }} 个</view>
			<view class="giftbox-buy">
				<button class="buy-btn" @click="buyGift">购买</button>
				<uv-number-box v-model="buyCount" :min="1" :max="gifts[selectedIndex].count" />
			</view>
		</view>
	</view>
</template>

<script>
    import mixinsList from '@/mixins/list.js'
	export default {
        mixins: [mixinsList],
		components: {
		},
		data() {
			return {
                mixinsListApi : 'getInteractionGiftList',
				gifts: [{
						id: 1,
						name: '小星星',
						emoji: '🌟',
						count: 6,
						price: 1
					},
					{
						id: 2,
						name: '爱你哟',
						emoji: '🧡',
						count: 5,
						price: 1
					},
					{
						id: 3,
						name: '加油鸭',
						emoji: '🦆',
						count: 5,
						price: 1
					},
					{
						id: 4,
						name: '蓝色烟花',
						emoji: '🎆',
						count: 5,
						price: 1
					},
					{
						id: 5,
						name: '沙滩椅',
						emoji: '🏖️',
						count: 5,
						price: 1
					},
					{
						id: 6,
						name: '菠萝',
						emoji: '🍍',
						count: 5,
						price: 1
					},
					{
						id: 7,
						name: '咖啡',
						emoji: '☕',
						count: 5,
						price: 1
					},
					{
						id: 8,
						name: '早餐',
						emoji: '🥐',
						count: 5,
						price: 1
					},
					{
						id: 9,
						name: '花花',
						emoji: '🌷',
						count: 5,
						price: 1
					},
					{
						id: 10,
						name: '玫瑰',
						emoji: '🌹',
						count: 5,
						price: 1
					},
					{
						id: 11,
						name: '玫瑰花',
						emoji: '🥀',
						count: 5,
						price: 1
					},
					{
						id: 12,
						name: '跑车',
						emoji: '🏎️',
						count: 5,
						price: 1
					},
				],
				selectedIndex: 0,
				buyCount: 1,
			}
		},
		methods: {
			selectGift(idx) {
				this.selectedIndex = idx
				this.buyCount = 1
			},
			buyGift() {
				// 跳转到礼物购买页面，并传递选中礼物信息
				const gift = this.list[this.selectedIndex]
				uni.navigateTo({
					url: `/pages_order/novel/Giftpurchases?&id=${gift.id}&count=${this.buyCount}`
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.giftbox-container {
		min-height: 100vh;
		background: #f8f8f8;
		padding-bottom: 120rpx;
	}

	.gift-list {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		padding: 32rpx 16rpx 0 16rpx;
	}

	.gift-item {
		width: 30%;
		background: #fff;
		border-radius: 18rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
		margin-bottom: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 0 16rpx 0;
		border: 2rpx solid transparent;
		transition: border 0.2s;
	}

	.gift-item.selected {
		border: 2rpx solid #223a7a;
		box-shadow: 0 4rpx 16rpx 0 rgba(34, 58, 122, 0.08);
	}

	.gift-img {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}

	.gift-emoji {
		font-size: 56rpx;
		image{
			width: 80rpx;
			height: 80rpx;
		}
	}

	.gift-name {
		font-size: 28rpx;
		color: #222;
		margin-bottom: 4rpx;
	}

	.gift-info {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 22rpx;
		color: #888;
	}

	.giftbox-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 90rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 32rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 10;
	}

	.giftbox-left {
		font-size: 28rpx;
		color: #666;
	}

	.giftbox-buy {
		display: flex;
		align-items: center;
		gap: 18rpx;
	}

	.buy-btn {
		background: #223a7a;
		color: #fff;
		font-size: 28rpx;
		border-radius: 32rpx;
		padding: 0 36rpx;
		height: 68rpx;
		line-height: 68rpx;
		border: none;
	}
</style>