uniAppXCX/pages/drawCard_infinite/drawCard_infinite.vue

<template>
  <view class="container">
    <view class="head">
      <image class="img" :src="detail.prizeIcon" 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="'https://file.rongcyl.cn/festatic/bkm/imgv2/invite/button1.png'"
            mode="widthFix"
          ></image>
        </view>
        <view class="row">
          <!-- <view class="users">
						<image class="photo" :style="'left:' + index * 11 + 'px'" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'"
							v-for="(item, index) in userList" mode="widthFix"></image>
					</view> -->
          <!-- <view class="hot">
						<image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/hot.png" mode="widthFix"></image>
						{{ detail.hotNum }}
					</view> -->
        </view>
      </view>
    </view>
    <div v-if="detail.subType.includes('110')" class="oubox flex justify-around items-center">
      <div class="flex items-center" @click="showList">
        <img src="https://file.rongcyl.cn/festatic/bkm/ouking_a.png" class="w-10 h-10" />
        <div class="ml-1">
          <div class="fontPFSCS" style="font-size: 15px">欧王奖励</div>
          <div style="font-size: 12px">{{ ouCount }}届欧王</div>
        </div>
      </div>
      <div class="flex items-center">
        <img
          src="https://file.rongcyl.cn/festatic/bkm/x_a.png"
          class="w-10 h-10"
          v-if="detail.subType.includes('111')"
        />
        <img src="https://file.rongcyl.cn/festatic/bkm/x.png" class="w-10 h-10" v-else />
        <div class="ml-1" :style="{ color: detail.subType.includes('111') ? '' : '#a9bcd1' }">
          <div class="fontPFSCS" style="font-size: 15px">随机掉落</div>
          <div style="font-size: 12px">未开启</div>
        </div>
      </div>
      <div class="flex items-center">
        <img
          src="https://file.rongcyl.cn/festatic/bkm/free_a.png"
          class="w-10 h-10"
          v-if="detail.subType.includes('112')"
        />
        <img src="https://file.rongcyl.cn/festatic/bkm/free.png" class="w-10 h-10" v-else />
        <div class="ml-1" :style="{ color: detail.subType.includes('112') ? '' : '#a9bcd1' }">
          <div class="fontPFSCS" style="font-size: 15px">随机免单</div>
          <div style="font-size: 12px">未开启</div>
        </div>
      </div>
    </div>
    <view class="box" v-if="detail.subType && !detail.subType.includes('110')">
      <view class="boxContent">
        <view class="boxLeft">
          <view class="row1">
            <view class="text">连击 × {{ combos || 0 }}</view>
            <view class="text">
              {{ combos || 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="'https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_infinite/icon1.png'"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
    <view class="buttons1">
      <image
        class="button"
        @click="tabClick(1)"
        style="margin-right: 20px"
        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + `/drawCard_infinite/button1${active1 == 1 ? 'A' : ''}.png`"
        mode="widthFix"
      ></image>
      <image
        class="button"
        @click="tabClick(2)"
        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + `/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="'https://file.rongcyl.cn/festatic/bkm/imgv2/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" @click="showImg(item2)">
              <view class="kaImg">
                <image
                  class="kabk"
                  :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/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>
      <div class="text-center" v-if="winningRecordList.length == 0">
        <image
          style="width: 80vw; margin: auto; margin-top: -40px"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/noData.png'"
          mode="widthFix"
        ></image>
        <view class="text-center" style="margin-top: -30px; color: #999999">啊哦，没有任何内容</view>
      </div>
    </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" />
    <uni-popup ref="popup">
      <view class="popup-content oulist">
        <img src="https://file.rongcyl.cn/festatic/bkm/oulist.png" class="w-full h-full" />
        <div class="absolute left-0 right-0 bottom-0 overflow-scroll py-2" style="height: 270px">
          <div v-for="(ou, i) in ouList" :key="i" class="flex justify-between items-center px-2 py-2">
            <div class="flex mr-2">
              <img
                :src="`https://file.rongcyl.cn/festatic/bkm/${i + 1}.png`"
                v-if="i < 3"
                class="inline-block mt-1"
                style="width: 28px; height: 28px"
              />
              <span
                v-else
                class="bold inline-block mt-1"
                style="width: 28px; height: 28px; text-align: center; line-height: 28px"
              >
                {{ i + 1 }}
              </span>
              <img
                :src="ou.userAvtar"
                style="width: 34px; height: 34px; border-radius: 50%"
                class="inline-block ml-2"
              />
            </div>
            <div class="flex-1">
              <div style="font-size: 14px" class="bold">{{ ou.userName }}</div>
              <div style="font-size: 11px; color: #666666">
                <span style="margin-right: 18px">在线{{ ou.onlineTime }}分钟</span>
                <img src="https://file.rongcyl.cn/festatic/bkm/tri.png" class="w-4 h-4 inline-block relative top-1" />
                <span style="font-size: 12px; color: #666666">{{ ou.reward }} 奖励</span>
              </div>
            </div>

            <div>
              <span v-if="ou.status" style="color: #00c537; font-size: 12px">在线中</span>
              <span v-else style="font-size: 12px; color: #666666">{{ ou.downTime | formatTime }}下线</span>
            </div>
          </div>
        </div>
      </view>
      <div @click="closeList">
        <img
          src="https://file.rongcyl.cn/festatic/bkm/close.png"
          class="w-9 h-9 mt-6"
          style="margin-left: 50%; transform: translateX(-50%); z-index: 9999; position: relative"
        />
      </div>
    </uni-popup>
    <imgPopup ref="imgPopup" />
    <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, getOuCount, getOuList } from '@/api/drawCard.js'

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

import paymentPopup from '@/component/paymentPopup.vue'
import imgPopup from '@/component/imgPopup.vue'
export default {
  components: {
    paymentPopup,
    noData,
    imgPopup,
  },
  onLoad(query) {
    console.log(query, 'query')
    if (query.id) {
      this.raffleId = query.id
      this.init()
    }
  },
  data() {
    return {
      rewardType: rewardType,
      active1: 1,
      detail: {},
      raffleId: null,
      prizeList: [],
      userIds: [],
      prizeUserList: [],
      winningRecordList: [],
      combos: 0,
      ouCount: 0,
      ouList: [],
    }
  },
  filters: {
    formatTime(dateString) {
      let month = dateString.substring(5, 7)
      let day = dateString.substring(8, 10)
      let time = dateString.substring(11, 16)
      return month + '/' + day + ' ' + time
    },
  },
  methods: {
    showImg(value) {
      this.$refs.imgPopup.show(value)
    },
    showList() {
      this.getOuKingList()
      this.$refs.popup.open('center')
    },
    closeList() {
      this.$refs.popup.close()
    },
    subType(value) {
      let index = null
      if (value == 120) {
        index = 1
      } else if (value == 110) {
        index = 2
      } else if (value == 111) {
        index = 3
      } else if (value == 112) {
        index = 4
      }
      return index
    },
    init() {
      // 获取卡包详情
      this.getDetail()
      this.tabClick(1)
      // 判断是否登录
      let hasLogin = getApp().globalData.hasLogin
      if (hasLogin) {
        this.getCombos()
      }
    },
    // 支付成功后回调
    paymentSuccess() {
      this.init()
    },
    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()
      }
    },
    getOuKingList() {
      getOuList({ raffleId: this.raffleId, page: 1, limit: 1000 }).then(rs => {
        this.ouList = rs.data
      })
    },
    getDetail() {
      let params = {
        raffleId: this.raffleId,
      }
      raffleDetailApi(params).then(res => {
        console.log(res, '详情')
        this.detail = res.data
        if (res.data.subType.includes('110')) {
          getOuCount(params).then(rs => {
            this.ouCount = rs.data
          })
        }
      })

      this.getOuKingList()
    },
    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) {
      let params = {
        raffleId: this.raffleId,
      }
      this.$refs.paymentPopup.show(params, number, this.detail)
    },
  },
}
</script>

<style>
.container >>> .uni-popup__wrapper.center {
  border-radius: 12px !important;
}
</style>
<style scoped lang="scss">
.oulist {
  width: 330px;
  height: 408px;
  overflow: hidden;
  position: relative;
}
.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;
        }
      }
    }
  }

  .oubox {
    width: 95vw;
    height: 148rpx;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0px 2px 6px 0px rgba(176, 123, 255, 0.3);
    border-radius: 24px;
    margin: auto;
    opacity: 1;
    border: 1px solid rgba(58, 67, 207, 1);
  }

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