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

<template>
  <!-- 礼物盒页面 -->
  <view class="giftbox-container">
    <!-- 顶部标题栏 -->
    <uv-navbar title="礼物盒" :autoBack="true" fixed placeholder rightIcon="more-dot-fill">
      <template #left>
        <BackArrow :size="56" color="#333" />
      </template>
    </uv-navbar>

    <!-- 礼物列表 -->
    <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>

    <!-- 底部操作栏 -->
    <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 BackArrow from './components/BackArrow.vue';

export default {
  components: {
    'uv-navbar': () => import('@/uni_modules/uv-navbar/components/uv-navbar/uv-navbar.vue'),
    'uv-number-box': () => import('@/uni_modules/uv-number-box/components/uv-number-box/uv-number-box.vue'),
    BackArrow
  },
  data() {
    return {
      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.gifts[this.selectedIndex]
      uni.navigateTo({
        url: `/pages_order/novel/Giftpurchases?name=${encodeURIComponent(gift.name)}&price=${gift.price}&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;
}
.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>