uniAppXCX/pages/drawCard_box/drawCard_box.vue

<template>
  <view class="container">
    <view class="title">
      {{ detail.name }}
    </view>
    <view class="boxsBr">
      <view class="boxs">
        <view class="box" v-for="(item, index) in bosList" @click="toDrawCard_boxDetail(item)">
          <image
            class="boxImg"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_box/boxImg.png'"
            mode="widthFix"
          ></image>
          <view class="tip" v-if="item.boxLeft == 0">已抽完</view>
          <view class="tip" v-if="item.boxLeft != 0 && item.boxStatus == 1">已爆头</view>
        </view>
      </view>
    </view>
    <view class="text">官方正品，非质量问题不支持退换</view>
    <view class="number">{{ num }} / {{ detail.roundNum }} 箱</view>
    <view class="buttons">
      <view class="button" @click="boxChange(-1)">上一箱</view>
      <view class="button" @click="boxChange(1)">下一箱</view>
    </view>

    <view class="rightButtons">
      <view class="button">规则</view>
      <view class="button" style="top: 44px" @click="toKnapsack">背包</view>
    </view>
  </view>
</template>

<script>
import { raffleDetailApi, getBoxList } from '@/api/drawCard.js'
export default {
  data() {
    return {
      raffleId: null,
      detail: null,
      num: 1,
      bosList: [],
    }
  },
  onLoad(query) {
    if (query.id) {
      this.raffleId = query.id
      this.init()
    }
  },
  methods: {
    init() {
      // 获取抽盒机详情
      this.getDetail()
      //获取盒子列表
      this.getBoxs()
    },
    getDetail() {
      let params = {
        raffleId: this.raffleId,
      }
      raffleDetailApi(params).then(res => {
        console.log(res, '详情')
        this.detail = res.data
      })
    },
    boxChange(value) {
      let num = this.num + value
      console.log(num, 'num')
      if (num > 0 && num <= this.detail.roundNum) {
        this.num = num
        this.getBoxs()
      } else {
        wx.showToast({
          title: '没有更多',
          icon: 'none',
        })
      }
    },
    getBoxs() {
      let params = {
        raffleId: this.raffleId,
        roundId: this.num,
      }
      getBoxList(params).then(res => {
        console.log(res, 'res盒子数量')
        this.bosList = res.data
      })
    },
    toKnapsack() {
      // 跳转背包界面
      wx.navigateTo({
        url: '/pages/knapsack/knapsack',
      })
    },
    toWinningRecord() {
      let params = {
        raffleId: this.raffleId,
      }
      this.$navigateTo('/pages/winningRecord/winningRecord', params)
    },
    toDrawCard_boxDetail(item) {
      let params = {
        raffleId: this.raffleId, //抽盒机id
        roundId: this.num, //箱id
        boxId: item.boxId, //盒id
      }
      this.$navigateTo('/pages/drawCard_box/drawCard_boxDetail', params)
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #9ec8f9;
  overflow: inherit;

  .title {
    padding: 20px 0;
    text-align: center;
    font-weight: 600;
  }

  .boxsBr {
    margin: 20vw auto 0 auto;
    width: 70vw;
    height: 70vw;
    background: linear-gradient(180deg, #f29b9b 0%, #e5bfb9 100%);
    border-radius: 8px 8px 8px 8px;
    padding: 4px;

    .boxs {
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, #829bfb 0%, #9cdbfc 100%);
      border-radius: 6px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-gap: 2px;

      .box {
        background: linear-gradient(139deg, #a292e9 0%, #a0dfff 100%);
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #ffffff;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        text-shadow: 2px 2px 2px #829bfb;
        font-weight: 600;
        position: relative;

        .boxImg {
          width: 80%;
          height: 80%;
        }

        .tip {
          position: absolute;
          background: rgba(0, 0, 0, 0.45);
          height: 100%;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .text {
    margin-top: 4vw;
    color: #000;
    width: 100%;
    font-size: 14px;
    text-align: center;
  }
  .number {
    margin-top: 4vw;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 2px #829bfb;
    font-weight: 600;
  }

  .buttons {
    margin-top: 10px;
    display: flex;
    justify-content: space-around;

    .button {
      color: #fff;
      font-weight: 600;
      background: linear-gradient(180deg, #89a9fa 0%, #716ff5 100%);
      height: 40px;
      border-radius: 20px;
      padding: 0 30px;
      line-height: 40px;
      width: 20vw;
      text-align: center;
    }

    .button1 {
      width: 25vw;
    }

    .button2 {
      width: 35vw;
      margin-bottom: 5px;
    }
  }

  .rightButtons {
    position: fixed;
    right: 0;
    width: 50px;
    height: 70vh;
    top: 50%;
    transform: translateY(-50%);

    .button {
      position: absolute;
      right: 0;
      background: rgba(255, 255, 255, 0.7);
      font-size: 10px;
      text-align: center;
      height: 24px;
      line-height: 24px;
      border-radius: 12px 0 0 12px;
      width: 46px;
    }
  }
}
</style>