uniAppXCX/pages/drawCard_last/drawCard_last.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">/张明信片</span>
          </view>
          <image
            @click="$navigateTo('/pages/rule/rule', { type: 5 })"
            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>

    <view class="cardList">
      <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk1.png'" mode="widthFix"></image>
      <view class="leftButton" @click="left"></view>
      <view class="rightButton" @click="right"></view>
      <view class="list">
        <view :class="['item', item.check ? 'active' : '']" v-for="(item, index) in cardList" @click="clickCard(item)">
          <image
            v-if="item.check"
            class="kaBkActive"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, item) + 'Active.png'"
            mode="heightFix"
          ></image>
          <image
            class="kaBk"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, item) + '.png'"
            mode="widthFix"
          ></image>
          <numImg class="num" :value="item" :type="2" />
        </view>
      </view>
    </view>
    <view class="examples">
      <view class="example">
        <image
          class="exampleImg"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, { status: 0 }) + '.png'"
          mode="widthFix"
        ></image>
        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType1.png'" mode="widthFix"></image>
      </view>
      <view class="example">
        <image
          class="exampleImg"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, { status: 2 }) + '.png'"
          mode="widthFix"
        ></image>
        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType5.png'" mode="widthFix"></image>
      </view>
      <view class="example">
        <image
          class="exampleImg"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(2, { status: 1 }) + '.png'"
          mode="widthFix"
        ></image>
        <image class="tip" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/bkType4.png'" mode="widthFix"></image>
      </view>
    </view>
    <view class="buttons">
      <image
        class="button1"
        @click="toKnapsack"
        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button6.png'"
        mode="widthFix"
      ></image>
      <view class="">
        <image
          class="button2"
          @click="submit"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button4.png'"
          mode="widthFix"
        ></image>
        <!-- <image class="button2" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2' + /first/button1.png" mode="widthFix"></image> -->
      </view>
      <image
        @click="toWinningRecord"
        class="button1"
        :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/button3.png'"
        mode="widthFix"
      ></image>
    </view>
    <view class="lockBox">
      <view class="text" v-if="!lockData.userId">本福袋连续购买10发，即开启保护机制</view>
      <view class="info" v-else>
        <image class="photo" :src="lockData.userAvtar" mode="aspectFill"></image>
        <view class="right">
          <view class="row">
            <view class="name">{{ lockData.userName }}</view>
            <view class="tip">目前已开启自动保护机制</view>
          </view>
          <view class="row">
            保护倒计时:
            <span v-if="lockHour != '00'">
              <span class="time">{{ lockHour }}</span>
              :
            </span>
            <span>
              <span class="time">{{ lockMin }}</span>
              :
            </span>
            <span>
              <span class="time">{{ lockSecond }}</span>
            </span>
          </view>
        </view>
      </view>
    </view>
    <view class="prizes">
      <image class="title" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/title.png'" mode="widthFix"></image>
      <view class="prizesList" v-for="(item, index) in prizeList">
        <image class="bk" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/bk2.png'" mode="scaleToFill"></image>
        <view class="prizesTitle">
          {{ $selectDictLabel(rewardType, item.type) }}
        </view>
        <view class="prizesImgOne" v-if="item.type == 22">
          <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
            <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
          </view>
        </view>
        <view class="prizesImg" v-else>
          <view class="image" v-for="(item2, index2) in item.prizeList" @click="showImg(item2)">
            <image :class="item2.leftNum == 0 ? 'grey' : ''" :src="item2.icon" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
    <image
      class="refresh"
      @click="refresh"
      :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/first/refresh.png'"
      mode="widthFix"
    ></image>
    <paymentPopup ref="paymentPopup" @callBack="paymentSuccess" />
    <imgPopup ref="imgPopup" />
  </view>
</template>

<script>
import imgPopup from '@/component/imgPopup.vue'
import { rewardType } from '@/utils/commonConfig.js'
import { prizePoolStatusApi, drawCardSubmitApi, raffleDetailApi, prizeListApi, getLockInfoApi } from '@/api/drawCard.js'
import { cardType, formatSeconds } from '@/utils/utils.js'

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

const { v4: uuidv4 } = require('uuid')

export default {
  components: {
    numImg,
    paymentPopup,
    imgPopup,
  },
  data() {
    return {
      userId: wx.getStorageSync('userId'),
      uuid: '',
      socketTimer: null,
      lockTimeCountdown: null,
      lockData: null,
      lockTime: '',
      cardType: cardType,
      rewardType: rewardType,
      params: {
        raffleId: '',
        limit: 12,
        page: 1,
      },
      detail: {},
      total: 0,
      userList: 8,
      cardList: [],
      selectIndex: [],
      prizeList: [],
    }
  },
  onLoad(query) {
    if (query.id) {
      this.params.raffleId = query.id
      this.init()
    }
    this.paymentSuccess()
  },
  onHide() {
    this.leave()
  },
  onUnload() {
    this.leave()
  },
  computed: {
    // 锁箱小时
    lockHour() {
      let tiem = this.lockTime * 1000
      let timeText = formatSeconds(tiem)
      timeText = timeText.split(':')[0]
      return timeText
    },
    // 锁箱分钟
    lockMin() {
      let tiem = this.lockTime * 1000
      let timeText = formatSeconds(tiem)
      timeText = timeText.split(':')[1]
      return timeText
    },
    // 锁箱秒
    lockSecond() {
      let tiem = this.lockTime * 1000
      let timeText = formatSeconds(tiem)
      timeText = timeText.split(':')[2]
      return timeText
    },
  },
  methods: {
    init() {
      // 获取卡牌商品列表
      this.getCardList()
      // 获取卡包详情
      this.getDetail()
      //获取奖池
      this.getPrizeList()
      // 初始化锁箱
      this.initLock()
      // 连接锁箱Socket
      this.connectSocket()
    },
    showImg(value) {
      this.$refs.imgPopup.show(value)
    },
    leave() {
      console.log('离开页面')
      // 离开页面
      // 关闭倒计时
      clearInterval(this.lockTimeCountdown)
      // 关闭心跳测试
      clearInterval(this.socketTimer)
      // 关闭对话连接
      wx.closeSocket()
    },
    initLock() {
      // 获取锁箱信息
      let _this = this
      let params = {
        raffleId: this.params.raffleId,
      }
      getLockInfoApi(params).then(res => {
        console.log(res, '锁箱')
        if (res.data.userId) {
          _this.lockData = res.data
          _this.lockTime = res.data.expireTime
          _this.initLockTimeCountdown()
        } else {
          _this.lockData = {}
          _this.lockTime = ''
        }
      })
    },
    initLockTimeCountdown() {
      let _this = this
      if (_this.lockTimeCountdown) {
        clearInterval(_this.lockTimeCountdown)
        _this.lockTimeCountdown = null
      }

      _this.lockTimeCountdown = setInterval(() => {
        console.log('22')
        _this.lockTime = _this.lockTime - 1
        if (_this.lockTime <= 0) {
          clearInterval(_this.lockTimeCountdown)
          _this.lockTimeCountdown = null
          _this.initLock()
        }
      }, 1000)
    },
    connectSocket() {
      let _this = this
      let uuid = uuidv4()
      let url = 'wss://mall.rongtongh.cn/websocket/raffleId' + this.params.raffleId + ':' + uuid

      function connect() {
        wx.connectSocket({
          url: url,
        })

        wx.onSocketOpen(function (res) {
          console.log(res, 'WebSocket连接已打开！')
          // wx.sendSocketMessage({
          // 	data: JSON.stringify(user),
          // })
          _this.socketTimer = setInterval(function () {
            console.log('发送消息')
            wx.sendSocketMessage({
              data: '12313',
            })
          }, 30 * 1000)
        })
        wx.onSocketMessage(function (res) {
          console.log(data, 'WebSocket接受信息')
          let data = JSON.parse(res.data)
          if (res.data.userId) {
            _this.lockData = data
            _this.lockTime = data.expireTime
            _this.initLockTimeCountdown()
          }
        })
        wx.onSocketClose(function (res) {
          console.log('WebSocket连接已关闭！')
          setTimeout(() => {
            console.log('re connect')
            // connect()
          }, 2000)
        })
      }
      connect()
    },
    toKnapsack() {
      // 跳转背包界面
      wx.navigateTo({
        url: '/pages/knapsack/knapsack',
      })
    },
    refresh() {
      wx.showLoading()
      setTimeout(function () {
        wx.hideLoading()
      }, 1000)
      this.init()
      this.selectIndex = []
      for (var i = 0; i < this.cardList.length; i++) {
        this.cardList[i].check = false
      }
    },
    getPrizeList() {
      let params = {
        raffleId: this.params.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 == 22) {
            newArray = []
            newArray.push(res.data[i])
            res.data.splice(i, 1)
            newArray.push(...res.data)
            break
          }
        }
        this.prizeList = newArray
      })
    },
    toWinningRecord() {
      let params = {
        raffleId: this.params.raffleId,
      }
      this.$navigateTo('/pages/winningRecord/winningRecord', params)
    },
    getDetail() {
      let params = {
        raffleId: this.params.raffleId,
      }
      raffleDetailApi(params).then(res => {
        console.log(res, '详情')
        this.detail = res.data
      })
    },
    submit() {
      // 购买时判断锁箱
      if (this.lockData?.userId && this.userId != this.lockData.userId) {
        wx.showToast({
          title: '锁箱中无法购买。',
          icon: 'none',
        })
        return
      }
      if (this.selectIndex.length == 0) {
        wx.showToast({
          title: '请选则要购买的卡牌。',
          icon: 'none',
        })
        return
      }
      let params = {
        raffleId: this.params.raffleId,
      }
      this.$refs.paymentPopup.show(params, this.selectIndex, this.detail)
    },
    // 支付成功后回调
    paymentSuccess() {
      let _this = this
      console.log('刷新抽卡界面')
      // 刷新界面
      _this.refresh()
    },
    // 选中取消选中卡牌
    clickCard(item) {
      if (item.status == 0) {
        item.check = !item.check
      }
      // 如果是选中
      let index = this.selectIndex.indexOf(item.number)
      if (item.check && index == -1) {
        this.selectIndex.push(item.number)
      } else if (!item.check && index != -1) {
        this.selectIndex.splice(index, 1)
      }
    },
    // 标记已经选中卡牌
    selectFormat() {
      for (var i = 0; i < this.cardList.length; i++) {
        if (this.selectIndex.includes(this.cardList[i].number)) {
          this.cardList[i].check = true
        }
      }
    },
    getCardList() {
      prizePoolStatusApi(this.params).then(res => {
        console.log(res, '卡牌分页')
        for (var i = 0; i < res.data.list.length; i++) {
          res.data.list[i].check = false
        }
        this.cardList = res.data.list
        this.selectFormat()
        this.total = res.data.total
      })
    },
    left() {
      console.log('上一页')
      if (this.params.page > 1) {
        this.params.page = this.params.page - 1
      }
      this.getCardList()
    },
    right() {
      console.log('下一页')
      let pages = Math.ceil(this.total / this.params.limit)
      if (this.params.page < pages) {
        this.params.page = this.params.page + 1
      }
      this.getCardList()
    },
  },
}
</script>

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

  .refresh {
    position: fixed;
    right: 4px;
    top: 55%;
    width: 45px;
  }

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

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

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

      .row {
        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: 14px;
        font-weight: 600;
        color: #ff2c43;

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

  .cardList {
    margin-top: 10px;
    position: relative;

    .bk {
      width: 100%;
    }

    .leftButton {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      height: 40px;
      width: 20px;
      z-index: 5;
    }

    .rightButton {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;
      height: 40px;
      width: 20px;
      z-index: 5;
    }

    .list {
      padding: 35px 40px;
      width: calc(100% - 80px);
      height: calc(100% - 70px);
      position: absolute;
      top: 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;

      .item {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: relative;

        .kaBkActive {
          height: 132%;
          width: 100%;
          position: absolute;
          z-index: 1;
        }

        .kaBk {
          width: 70%;
          border-radius: 4px;
          z-index: 2;
        }

        .num {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          z-index: 2;
        }
      }

      .active {
        .kaBk {
          // box-shadow: 0px 1px 6px 3px rgba(255,77,0,0.65);
        }
      }
    }
  }

  .buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .button1 {
      width: 25vw;
    }

    .button2 {
      width: 35vw;
      margin-bottom: 5px;
    }
  }

  .lockBox {
    margin: 10px 20px;
    padding: 10px;
    height: 16vw;
    background: #fff;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 2px 2px #459bff;

    .text {
      color: #459bff;
      font-weight: 600;
      font-size: 14px;
    }

    .info {
      display: flex;
      width: 100%;
      justify-content: center;

      .photo {
        width: 14vw;
        height: 14vw;
        border-radius: 50%;
      }

      .right {
        margin-left: 10px;
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .row {
          width: 100%;
          color: #459bff;
          font-size: 14px;
          margin-bottom: 10px;
          position: relative;
          display: flex;
          align-items: center;

          .time {
            padding: 5px;
            color: #fff;
            background: #459bff;
            margin: 0 8px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 16px;
          }

          .name {
            font-size: 15px;
            font-weight: 600;
            color: #459bff;
            width: 40%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .tip {
            font-size: 11px;
            position: absolute;
            right: 0;
            font-weight: 500;
            color: #459bff;
          }
        }
      }
    }
  }

  .prizes {
    .title {
      width: 103px;
      margin: 0 auto;
    }

    .prizesList {
      margin: 20px;
      position: relative;
      overflow: hidden;
      // z-index: 5;

      .bk {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

      .prizesTitle {
        position: relative;
        height: 30px;
        line-height: 30px;
        width: 100%;
        margin-left: 1px;
        margin-top: 15px;
        padding-left: 15px;
        color: #fff;
        font-weight: 800;
        background: linear-gradient(90deg, rgba(89, 166, 255, 0.8) 0%, rgba(158, 200, 249, 0) 100%);
      }

      .prizesImg {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 15px;
        white-space: wrap;
        text-align: center;
        // overflow: auto;

        .image {
          text-align: center;

          image {
            display: inline-block;
            width: 36vw;
            height: 36vw;
            border-radius: 10px;
            margin: 0 5px;
          }
        }
      }

      .prizesImgOne {
        position: relative;
        display: flex;
        justify-content: center;
        margin: 15px;

        .image {
          text-align: center;

          image {
            display: inline-block;
            width: 45vw;
            height: 45vw;
            border-radius: 10px;
            margin: 0 5px;
          }
        }
      }
    }
  }
}
.examples {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 10px;
  display: flex;

  .example {
    width: 14vw;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;

    .exampleImg {
      width: 13vw;
    }

    .tip {
      width: 100%;
      position: absolute;
      bottom: 0;
      transform: translateY(50%);
    }
  }
}
</style>