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: 3 })"
            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">连击 × 0</view>
            <view class="text">
              0
              <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">概率0.21%</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="">
      <button>抽一发</button>
      <button>抽三发</button>
      <button>抽五发</button>
      <button>抽十发</button>
    </view>
    <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
  </view>
</template>

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

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

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

export default {
  components: {
    paymentPopup,
  },
  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: [],
    }
  },
  methods: {
    init() {
      // 获取卡包详情
      this.getDetail()
      this.tabClick(1)
    },
    clickDrawCard() {
      this.$refs.paymentPopup.show(this.params.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 => {
        console.log(res, '中奖记录')
        let userIds = []
        let list = []
        for (var i = 0; i < res.data.length; i++) {
          let item = res.data[i]
          if (userIds.indexOf(item.userId) == -1) {
            userIds.push(item.userId)
            console.log(userIds.indexOf(item.userId))
            let index = userIds.indexOf(item.userId)
            list[index] = {
              userId: item.userId,
              userAvtar: item.userAvtar,
              userName: item.userName,
              prizes: [],
            }
            list[index].prizes.push(item)
          } else {
            let index = userIds.indexOf(item.userId)
            list[index].prizes.push(item)
          }
        }
        this.userIds = userIds
        this.prizeUserList = list
      })
    },
  },
}
</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: 30px;
        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: 50%;
                top: 50%;
                transform: translateX(-46%) 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;
              }
            }
          }
        }
      }
    }
  }
}
</style>