uniAppXCX/pages/drawCard_fullSet/winningList.vue

<template>
  <view class="container">
    <uni-collapse class="collapse1" v-model="collapseArr" @change="change">
      <uni-collapse-item
        class="collapseItem"
        v-for="(item, index) in prizeUserList"
        :title="item.userName"
        :thumb="item.userAvtar"
        :show-arrow="false"
      >
        <template v-slot:title>
          <view class="collapseTitle">
            <image class="photo" :src="item.userAvtar" mode="aspectFill"></image>
            <span class="text">{{ item.userName }}</span>
            <image
              v-if="collapseShow(index)"
              class="icon"
              :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_fullSet/icon4.png'"
              mode="widthFix"
            ></image>
            <image
              v-else
              class="icon"
              :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_fullSet/icon5.png'"
              mode="widthFix"
            ></image>
          </view>
        </template>
        <view class="content">
          <view class="item" v-for="(item2, index2) in item.prizes">
            <image class="img" :src="item2.prizeIcon" mode="heightFix"></image>
          </view>
        </view>
      </uni-collapse-item>
    </uni-collapse>
  </view>
</template>

<script>
import { prizeUserListApi } from '@/api/drawCard.js'

export default {
  data() {
    return {
      collapseArr: [],
      params: {
        limit: 9999,
        page: 1,
        raffleId: null,
      },
      prizeUserList: [],
      userIds: [],
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    if (query.raffleId) {
      this.params.raffleId = query.raffleId
      this.getPrizeUserList()
    }
  },
  onShow() {},
  computed: {},
  methods: {
    collapseShow(index) {
      console.log(this.collapseArr, 'this.collapseArr')
      let i = index + ''
      let b = false
      if (this.collapseArr.indexOf(i) != -1) {
        b = true
      }
      return b
    },
    change() {
      // console.log(this.collapseArr, 'this.collapseArr')
    },
    getPrizeUserList() {
      prizeUserListApi(this.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">
.collapseItem {
  background: #fff;
  border-radius: 8px;
  margin: 0 10px 10px 10px;
  position: relative;
}
.collapseTitle {
  display: flex;
  align-items: center;
  padding: 10px;

  .photo {
    width: 40px;
    height: 40px;
    margin-right: 8px;
    border-radius: 50%;
  }

  .text {
    font-size: 12px;
    color: #333333;
    font-weight: 600;
  }
  .icon {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 10px;
  }
}
.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;
  .item {
    width: 100%;
    display: flex;
    justify-content: center;
    background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
    border-radius: 4px;

    .img {
      height: 76px;
    }
  }
}
</style>
<style scoped>
.collapse1 >>> .uni-collapse {
  background: none;
}
.collapse1 >>> .uni-collapse-item__wrap {
  border-radius: 0 0 8px 8px;
}
</style>