uniAppXCX/pages/drawCard_fullSet/goods.vue

<template>
  <view class="container list">
    <div v-for="(item, index) in prizeList" :key="index">
      <div class="titleTip">概率：{{ item.probability }}%(此概率为当前赏级概率)</div>
      <Title :title="$selectDictLabel(rewardType, item.type).split('赏')[0]" />
      <div class="flex pl-3 pt-3 mb-3" style="background-color: #f6f0e9">
        <div
          v-for="(item2, index2) in item.prizeList"
          @click="showImg(item2)"
          :class="['mr-2', item2.leftNum == 0 ? 'grey' : '']"
          style="width: 168rpx; background-color: #f9f6f2; border-radius: 8rpx; margin-bottom: 20rpx"
        >
          <image
            :src="item2.icon"
            mode="aspectFill"
            style="width: 144rpx; height: 144rpx; border-radius: 10rpx; margin: auto"
          />
          <div class="fs13 pl-2 prizeName">{{ item2.name }}</div>
          <div style="color: #ea6636" class="pl-2">
            <span class="fs11">参考价</span>
            <span class="fs14 bold">{{ detail.price }}</span>
          </div>
        </div>
      </div>
    </div>
    <imgPopup ref="imgPopup" />
  </view>
</template>

<script>
import Title from '@/component/title.vue'
import imgPopup from '@/component/imgPopup.vue'
import { rewardType } from '@/utils/commonConfig.js'
import { prizeListApi } from '@/api/drawCard.js'
export default {
  data() {
    return {
      rewardType: rewardType,
      params: {
        raffleId: null,
      },
      prizeList: [],
    }
  },
  components: {
    imgPopup,
    Title,
  },
  onLoad(query) {
    if (query.raffleId) {
      this.params.raffleId = query.raffleId
      this.getPrizeList()
    }
  },
  onShow() {},
  methods: {
    showImg(value) {
      this.$refs.imgPopup.show(value)
    },
    getPrizeList() {
      prizeListApi(this.params).then(res => {
        console.log(res, '奖池预览')
        this.prizeList = res.data
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: linear-gradient(216deg, #fe854c 0%, #ff9a5a 100%);
  padding-top: 30rpx;
  overflow: auto;
}
.list {
  padding: 20rpx;
}
.prizes {
  .title {
    width: 206rpx;
    margin: 0 auto;
  }

  .prizesList {
    margin: 40rpx;
    position: relative;
    overflow: hidden;
    // z-index: 5;

    .bk {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .prizesTitle {
      position: relative;
      height: 60rpx;
      line-height: 60rpx;
      width: 100%;
      margin-left: 2rpx;
      margin-top: 30rpx;
      padding-left: 30rpx;
      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 1fr 1fr 1fr 1fr;
      margin: 30rpx;
      white-space: wrap;
      text-align: center;
      // overflow: auto;

      .image {
        text-align: center;

        image {
          display: inline-block;
          width: 20vw;
          height: 20vw;
          // border-radius: 20rpx;
          margin: 0 10rpx;
        }
      }
    }
    .prizesImgOne {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 30rpx;

      .image {
        text-align: center;

        image {
          display: inline-block;
          width: 45vw;
          height: 45vw;
          border-radius: 20rpx;
          margin: 0 10rpx;
        }
      }
    }
  }
}
.titleTip {
  position: absolute;
  z-index: 2;
  height: 64rpx;
  line-height: 84rpx;
  padding-left: 25vw;
  font-size: 24rpx;
  color: #fff;
}
</style>