uniAppXCX/pages/drawCard_infinite/drawCard_infinite.vue

<template>
  <view class="container">
    <view class="head">
      <image class="img" :src="$fileUrl() + '/ka.jpeg'" mode="aspectFill"></image>
      <view class="info">
        <view class="title row">
          {{ detail.name }}
        </view>
        <view class="row">
          <view class="price">
            ￥{{ detail.price }}
            <span class="text fontPFR">/张明信片</span>
          </view>
          <image
            @click="$navigateTo('/pages/rule/rule', { type: 1 })"
            class="button"
            :src="$fileUrl() + '/invite/button1.png'"
            mode="widthFix"
          ></image>
        </view>
        <view class="row">
          <!-- <view class="users">
						<image class="photo" :style="'left:' + index * 11 + 'px'" :src="$fileUrl() + '/Frame1.png'"
							v-for="(item, index) in userList" mode="widthFix"></image>
					</view> -->
          <!-- <view class="hot">
						<image :src="$fileUrl() + /first/hot.png" mode="widthFix"></image>
						{{ detail.hotNum }}
					</view> -->
        </view>
      </view>
    </view>
    <view class="box">
      <view class="boxContent">
        <view class="boxLeft">
          <view class="row1">
            <view class="text">连击 × {{ combos }}</view>
            <view class="text">
              {{ combos }}
              <span class="text1">/300</span>
            </view>
          </view>
          <view class="row2">
            <view class="row2content">
              <p>每连击300发未出传说赏，可获得一个宝箱。</p>
              <p>如果中间抽出传说赏，则清空连击次数。</p>
            </view>
          </view>
        </view>
        <view class="boxRiaht">
          <image class="icon" :src="$fileUrl() + '/drawCard_infinite/icon1.png'" mode="widthFix"></image>
        </view>
      </view>
    </view>
    <view class="buttons1">
      <image
        class="button"
        @click="tabClick(1)"
        style="margin-right: 20px"
        :src="$fileUrl() + `/drawCard_infinite/button1${active1 == 1 ? 'A' : ''}.png`"
        mode="widthFix"
      ></image>
      <image
        class="button"
        @click="tabClick(2)"
        :src="$fileUrl() + `/drawCard_infinite/button2${active1 == 2 ? 'A' : ''}.png`"
        mode="widthFix"
      ></image>
    </view>
    <view class="prizeList" v-if="active1 == 1">
      <view class="prizeRow" v-for="(item, index) in prizeList">
        <image class="bk" :src="$fileUrl() + '/drawCard_infinite/bk.png'" mode="scaleToFill"></image>
        <view class="prizeRowContent">
          <view class="prizesTitle">
            <span>
              <span style="font-size: 18px; margin-right: 5px; font-weight: 600">
                {{ $selectDictLabel(rewardType, item.type) }}
              </span>
              <span style="font-weight: 600">概率 {{ item.probability }}%</span>
            </span>
            <span class="sp">各类别赏中赏概率不代表具体产品中赏概率</span>
          </view>
          <view class="prizesItems">
            <view class="prize" v-for="(item2, index2) in item.prizeList">
              <view class="kaImg">
                <image class="kabk" :src="$fileUrl() + '/drawCard_infinite/kaBk.png'" mode="widthFix"></image>
                <image class="img" :src="item2.icon" mode="aspectFit"></image>
              </view>
              <view class="kaName">
                {{ item2.name }}
              </view>
              <view class="price">
                <span class="priceText">￥{{ detail.price }}</span>
                参考价
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="winningRecord" v-if="active1 == 2">
      <view class="card" v-for="(item, index) in winningRecordList" :key="index">
        <view class="row">
          <view class="left">
            <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
            <span class="name">{{ item.userName }}</span>
          </view>
          <view class="right text1">
            <span style="margin-right: 5px">{{ item.creatTime }}</span>
            <span>No.{{ item.id }}</span>
          </view>
        </view>
        <view class="row" style="margin-top: 10px">
          <view class="left">
            <image class="img" :src="item.prizeIcon" mode="aspectFill"></image>
            <span class="name">{{ item.prizeName }}</span>
          </view>
          <view class="right" style="font-size: 14px">{{ $selectDictLabel(rewardType, item.prizeType) }} × 1</view>
        </view>
      </view>
      <noData v-if="winningRecordList.length == 0" />
    </view>
    <view class="buttons2">
      <view class="button" @click="submit(1)">
        <p>一发</p>
      </view>
      <view class="button" @click="submit(3)">
        <p>三发</p>
      </view>
      <view class="button" @click="submit(5)">
        <p>五发</p>
      </view>
      <view class="button" @click="submit(10)">
        <p>十发</p>
      </view>
    </view>
    <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
    <view style="width: 100%; height: 100px"></view>
  </view>
</template>

<script>
import noData from '@/component/noData.vue'
import { rewardType } from '@/utils/commonConfig.js'
import { raffleDetailApi, prizeListApi, prizeUserListApi, combosApi } from '@/api/drawCard.js'

import { cardType, formatSeconds } from '@/utils/utils.js'

import paymentPopup from '@/component/paymentPopup.vue'

export default {
  components: {
    paymentPopup,
    noData,
  },
  onLoad(query) {
    console.log(query, 'query')
    if (query.id) {
      this.raffleId = query.id
      this.init()
    }
    this.paymentSuccess()
  },
  data() {
    return {
      rewardType: rewardType,
      active1: 1,
      detail: {},
      raffleId: null,
      prizeList: [],
      userIds: [],
      prizeUserList: [],
      winningRecordList: [],
      combos: 0,
    }
  },
  methods: {
    init() {
      // 获取卡包详情
      this.getDetail()
      this.tabClick(1)
      this.getCombos()
      //
    },
    // 支付成功后回调
    paymentSuccess() {
      let _this = this
      this.getCombos()
      this.tabClick(1)
    },
    clickDrawCard() {
      this.$refs.paymentPopup.show(this.raffleId, this.selectIndex, this.detail)
    },
    tabClick(index) {
      this.active1 = index
      if (index == 1) {
        //获取奖池
        this.getPrizeList()
      } else if (index == 2) {
        // 获取中奖记录
        this.getPrizeUserList()
      }
    },
    getDetail() {
      let params = {
        raffleId: this.raffleId,
      }
      raffleDetailApi(params).then(res => {
        console.log(res, '详情')
        this.detail = res.data
      })
    },
    getPrizeList() {
      let params = {
        raffleId: this.raffleId,
      }
      prizeListApi(params).then(res => {
        console.log(res, '奖池预览')
        let newArray = res.data
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].type == 21) {
            newArray = []
            newArray.push(res.data[i])
            res.data.splice(i, 1)
            newArray.push(...res.data)
            break
          }
        }
        this.prizeList = newArray
      })
    },
    getPrizeUserList() {
      let params = {
        limit: 999,
        page: 1,
        raffleId: this.raffleId,
      }
      prizeUserListApi(params).then(res => {
        this.winningRecordList = res.data
      })
    },
    getCombos() {
      let params = {
        raffleId: this.raffleId,
      }
      combosApi(params).then(res => {
        console.log(res, '连击数')
        this.combos = res.data.combos
      })
    },
    submit(number) {
      this.$refs.paymentPopup.show(this.raffleId, number, this.detail)
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #9ec8f9;
  padding-top: 15px;
  overflow: auto;

  .head {
    background: #fff;
    border: 10px;
    padding: 15px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;

    .img {
      width: 106px;
      height: 106px;
      border-radius: 5px;
      overflow: hidden;
      margin-right: 10px;
    }

    .info {
      display: flex;
      flex-direction: column;
      justify-content: start;
      flex: 1;

      .row {
        margin: 5px 0;
        display: flex;
        justify-content: space-between;
        color: #999999;

        .button {
          width: 67px;
        }

        .hot {
          display: flex;
          font-size: 12px;
          color: #999999;

          image {
            width: 16px;
          }
        }

        .users {
          position: relative;

          .photo {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
          }
        }
      }

      .title {
        font-weight: 600;
        color: #000;
      }

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

        .text {
          font-size: 14px;
          color: #999999;
          font-weight: 500;
        }
      }
    }
  }

  .box {
    margin: 0 10px 10px 10px;
    padding: 2px;
    background: linear-gradient(90deg, rgba(211, 252, 111, 1), rgba(61, 248, 255, 1));
    box-shadow: 0px 2px 6px 0px rgba(176, 123, 255, 0.3);
    border-radius: 24px;

    .boxContent {
      background: linear-gradient(90deg, #a4fcff 0%, #d3fc6e 100%);
      border-radius: 24px;
      opacity: 1;
      display: flex;
      padding: 8px 15px;

      .boxLeft {
        position: relative;
        flex: 1;

        .row1 {
          display: flex;
          justify-content: space-between;
          font-size: 18px;
          margin-bottom: 4px;

          .text {
            color: #000000;
            font-weight: 600;
            text-shadow: -2px -1px 0px rgba(255, 255, 255, 1);
            font-family: auto;
          }

          .text1 {
            text-shadow: none;
            font-weight: 500;
          }
        }

        .row2 {
          position: relative;
          top: 3px;
          height: 12vw;
          border-radius: 6vw;
          background: linear-gradient(90deg, #65c3e5 0%, #b1ff29 100%);

          .row2content {
            position: relative;
            top: -3px;
            background: #0d2a2c;
            height: 12vw;
            border-radius: 6vw;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0 13px;
          }
        }
      }

      .boxRiaht {
        padding-left: 8vw;
        padding-right: 15px;
        display: flex;
        align-items: center;

        .icon {
          width: 12vw;
          height: 12vw;
        }
      }
    }
  }

  .buttons1 {
    display: flex;
    justify-content: center;

    .button {
      width: 38vw;
      height: 10vw;
    }
  }

  .prizeList {
    .prizeRow {
      position: relative;
      margin: 0 10px 10px 10px;
      padding-bottom: 10px;

      .bk {
        position: relative;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        z-index: 1;
      }

      .prizeRowContent {
        position: relative;
        width: calc(100% - 30px);
        padding: 10px 15px;
        z-index: 2;

        .prizesTitle {
          font-size: 12px;
          padding-bottom: 5px;
          width: 100%;
          color: #fff;
          display: flex;
          justify-content: space-between;

          .sp {
            color: rgba(255, 255, 255, 0.7);
            padding-top: 8px;
            font-size: 10px;
          }
        }

        .prizesItems {
          background: #fffbe8;
          display: flex;
          width: calc(100% - 16px);
          padding: 8px;
          border-radius: 8px;

          .prize {
            width: 22vw;

            .kaImg {
              position: relative;

              .kabk {
                width: 100%;
                height: 100%;
              }

              .img {
                position: absolute;
                top: 0;
                width: 70%;
                height: 80%;
                left: 52%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
              }
            }

            .kaName {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 12px;
              font-weight: 600;
              text-align: center;
            }

            .price {
              text-align: center;
              font-size: 10px;
              color: #999999;

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

  .buttons2 {
    position: fixed;
    bottom: 10vw;
    display: flex;
    z-index: 4;
    justify-content: space-around;
    width: 100%;

    .button {
      width: 13vw;
      height: 13vw;
      font-size: 16px;
      color: #fff;
      background: linear-gradient(270deg, #531dbb 0%, #6e2fe5 100%);
      text-align: center;
      line-height: 13vw;
      border-radius: 4px;
      box-shadow: inset 0px 2px 3px 0px rgba(255, 255, 255, 0.25);
      position: relative;
      transform: rotate(45deg);
      font-weight: 600;

      p {
        transform: rotate(-45deg);
      }
    }
  }

  .winningRecord {
    .card {
      margin: 10px 10px 0 10px;
      border-radius: 8px;
      background: #fff;
      padding: 10px;

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
          display: flex;
          align-items: center;

          .photo {
            margin-right: 5px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }

          .name {
            font-size: 14px;
            font-weight: 600;
          }

          .img {
            width: 40px;
            height: 40px;
            border-radius: 2px;
            margin-right: 5px;
          }
        }

        .text1 {
          color: #666666;
          font-size: 12px;
        }
      }
    }
  }
}
</style>