uniAppXCX/pages/drawCard_box/drawCard_boxDetail.vue

<template>
  <view class="container">
    <view class="product">
      <uni-swiper-dot class="uni-swiper-dot-box" :info="info" :current="current" :mode="mode" field="content">
        <swiper class="swiper-box" @change="swiperChange" :current="swiperDotIndex">
          <swiper-item v-for="(item, index) in boxDetail.boxLeft">
            <image class="swiperItem" :src="detail.prizeIcon" mode="aspectFit" />
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="number">{{ num }} / {{ boxDetail.boxLeft }} 包</view>
    <view class="tipText">官方正品，非质量问题不支持退换</view>
    <view class="prizes">
      <view class="prizesLine">
        <view class="prize" v-for="(item, index) in prizeList" @click="showImg(item)">
          <image class="prizeImg" :src="item.icon" mode="aspectFit"></image>
          <view class="info">
            <view class="name">
              {{ item.name }}
            </view>
            <view class="price">￥{{ detail.price }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="buttons">
      <view class="button button1" @click="currentChange">换一包</view>
      <view class="button button2" @click="buy" style="color: #6a3d11">就买它</view>
    </view>
    <view class="rightButtons">
      <view class="button">规则</view>
      <view class="button" @click="toKnapsack" style="top: 44px">背包</view>
      <view class="button" @click="toWinningRecord" style="bottom: 0">中奖记录</view>
    </view>

    <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
    <imgPopup ref="imgPopup" />
  </view>
</template>

<script>
import paymentPopup from '@/component/paymentPopup.vue'
import imgPopup from '@/component/imgPopup.vue'
import { raffleDetailApi, getRoundPrizes, getBoxDetail } from '@/api/drawCard.js'
export default {
  components: {
    paymentPopup,
    imgPopup,
  },
  data() {
    return {
      query: null,
      detail: null,
      boxDetail: null,
      current: 0,
      mode: 'dot',
      swiperDotIndex: 0,
      num: 1,
      prizeList: [],
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    this.query = query
    if (query.raffleId) {
      this.init()
    }
  },
  methods: {
    init() {
      this.getBoxDetail()
      this.getDetail()
      this.getCard()
    },
    showImg(value) {
      this.$refs.imgPopup.show(value)
    },
    aniRun() {
      // 同时右平移到 100px,旋转 360 读
      this.$refs.ani.step({
        translateX: '100px',
        rotate: '360',
      })
      // 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
      this.$refs.ani.step(
        {
          translateX: '0px',
          rotate: '0',
        },
        {
          timingFunction: 'ease-in',
          duration: 200,
        },
      )
      // 开始执行动画
      this.$refs.ani.run(() => {
        this.aniRun()
      })
    },
    // 购买
    buy() {
      this.$refs.paymentPopup.show(this.query, 1, this.detail)
    },
    // 支付成功后回调
    paymentSuccess() {
      this.init()
    },
    getDetail() {
      let params = {
        raffleId: this.query.raffleId,
      }
      raffleDetailApi(params).then(res => {
        console.log(res, '详情')
        this.detail = res.data
      })
    },
    getBoxDetail() {
      getBoxDetail(this.query).then(res => {
        console.log(res, 'res')
        this.boxDetail = res.data
      })
    },
    getCard() {
      let params = {
        raffleId: this.query.raffleId,
        roundId: this.query.roundId,
      }
      getRoundPrizes(params).then(res => {
        console.log(res, '抽盒机奖品预览')
        this.prizeList = res.data
      })
    },
    swiperChange(value) {
      console.log(value)
      this.num = value.detail.current + 1
    },
    currentChange() {
      if (this.swiperDotIndex < this.boxDetail.boxLeft - 1) {
        this.swiperDotIndex += 1
      } else {
        this.swiperDotIndex = 0
      }
    },
    toKnapsack() {
      // 跳转背包界面
      wx.navigateTo({
        url: '/pages/knapsack/knapsack',
      })
    },
    toWinningRecord() {
      this.$navigateTo('/pages/winningRecord/winningRecord', this.query)
    },
  },
}
</script>

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

  .product {
    display: flex;
    justify-content: center;
    margin: 20vw auto 0 auto;
    // background: #fff;

    .uni-swiper-dot-box {
      display: inline-block;
      width: 60vw;
      height: 60vw;

      .swiper-box {
        width: 60vw;
        height: 60vw;
      }

      .swiperItem {
        width: 60vw;
        height: 60vw;
      }
    }
  }

  .number {
    margin-top: 5vw;
    text-align: center;
    color: #ffffff;
    text-shadow: 2px 2px 2px #829bfb;
    font-weight: 600;
  }

  .tipText {
    text-align: center;
    margin-top: 3vw;
    font-size: 13px;
    font-weight: 600;
  }

  .prizes {
    margin-top: 15vw;
    overflow: auto;
    padding: 0 20px;

    .prizesLine {
      position: relative;
      white-space: nowrap;
    }

    .prize {
      display: inline-block;
      margin-right: 10px;
      background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
      border-radius: 5px;
      overflow: hidden;

      .prizeImg {
        width: 20vw;
        height: 20vw;
      }

      .info {
        background: #fff;
        text-align: center;

        .name {
          font-size: 12px;
        }

        .price {
          color: #ff2c43;
          font-size: 12px;
          font-weight: 600;
        }
      }
    }
  }

  .buttons {
    margin-top: 5vw;
    display: flex;
    justify-content: space-around;

    .button {
      width: 35vw;
      height: 40px;
      padding: 0 20px;
      border-radius: 20px;
      line-height: 40px;
      color: #fff;
      font-weight: 600;
      font-size: 18px;
      text-align: center;
    }

    .button1 {
      background: linear-gradient(180deg, #89a9fa 0%, #716ff5 100%);
    }

    .button2 {
      background: linear-gradient(180deg, #fae5af 0%, #f3ba8e 100%);
    }
  }

  .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>