uniAppXCX/pages/drawCard_box/drawCard_boxDetail.vue

<template>
  <view class="container">
    <PageTitle color="#000" :title="detail.name || ''" />
    <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.icon" mode="aspectFit" />
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
    </view>
    <view class="number">{{ num }} / {{ boxDetail.boxLeft || 0 }} 包</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">
      <image
        class="button"
        @click="currentChange"
        src="https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_box/button1.png"
        mode="heightFix"
      ></image>
      <image
        class="button"
        @click="buy"
        src="https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_box/button2.png"
        mode="heightFix"
      ></image>
      <!-- <view class="button button1" @click="currentChange">换一包</view> -->
      <!-- <view class="button button2" @click="buy" style="color: #6a3d11">就买它</view> -->
    </view>
    <view class="rightButtons">
      <view class="button" @click="$navigateTo('/pages/rule/rule', { type: 4 })">规则</view>
      <view class="button" @click="toKnapsack" style="top: 88rpx">背包</view>
      <view class="button" @click="toWinningRecord" style="bottom: 0">中奖记录</view>
    </view>

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

<script>
import PageTitle from '@/component/pageTitle.vue'
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,
    PageTitle,
  },
  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() {
      // 同时右平移到 200rpx,旋转 360 读
      this.$refs.ani.step({
        translateX: '200rpx',
        rotate: '360',
      })
      // 上面的动画执行完成后，等待200毫秒平移到 0rpx,旋转到 0 读
      this.$refs.ani.step(
        {
          translateX: '0rpx',
          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-image: url(https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_box/bk.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #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: 4rpx 4rpx 4rpx #829bfb;
    font-weight: 600;
  }

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

  .prizes {
    margin-top: 15vw;
    overflow: auto;
    padding: 0 40rpx;

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

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

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

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

        .name {
          font-size: 24rpx;
          width: calc(100% - 20rpx);
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 0 10rpx;
        }

        .price {
          color: #ff2c43;
          font-size: 24rpx;
          font-weight: 600;
        }
      }
    }
  }

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

    .button {
      // width: 35vw;
      height: 80rpx;
      // padding: 0 40rpx;
      border-radius: 40rpx;
      line-height: 80rpx;
      color: #fff;
      font-weight: 600;
      font-size: 36rpx;
      text-align: center;
    }
  }

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

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