uniAppXCX/pages/drawCard_first/drawCard_first.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(1, item) + 'Active.png'"
            mode="heightFix"
          ></image>
          <image
            class="kaBk"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, item) + '.png'"
            mode="widthFix"
          ></image>
          <numImg class="num" :value="item" :type="1" />
        </view>
      </view>
    </view>

    <view class="examples">
      <view class="example">
        <image
          class="exampleImg"
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka/kabk' + cardType(1, { 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(1, { 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(1, { 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="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 } from '@/api/drawCard.js'
import { cardType } from '@/utils/utils.js'

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

export default {
  components: {
    numImg,
    paymentPopup,
    imgPopup,
  },
  data() {
    return {
      cardType: cardType,
      rewardType: rewardType,
      params: {
        raffleId: '',
        limit: 12,
        page: 1,
      },
      detail: {},
      total: 0,
      userList: 8,
      cardList: [],
      selectIndex: [],
      prizeList: [],
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    if (query.id) {
      this.params.raffleId = query.id
      this.init()
    }
    this.paymentSuccess()
  },
  methods: {
    init() {
      // 获取卡牌商品列表
      this.getCardList()
      // 获取卡包详情
      this.getDetail()
      //获取奖池
      this.getPrizeList()
    },
    showImg(value) {
      this.$refs.imgPopup.show(value)
    },
    toKnapsack() {
      // 跳转背包界面
      wx.navigateTo({
        url: '/pages/knapsack/knapsack',
      })
    },
    showRule() {
      // 显示规则
      // this.$refs.popup.open('center')
    },
    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 == 21) {
            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.selectIndex.length == 0) {
        wx.showToast({
          title: '请选则要购买的卡牌。',
          icon: 'none',
        })
        return
      }
      let params = {
        raffleId: this.params.raffleId,
      }
      this.$refs.paymentPopup.show(params, number, 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;
        }
      }
    }
  }

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

    .button1 {
      width: 25vw;
    }

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

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