uniAppXCX/pages/winningRecord/winningRecord.vue

<template>
  <view class="container">
    <view class="card" v-for="(item, index) in list" :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: 10rpx">{{ item.creatTime }}</span>
          <span>No.{{ item.id }}</span>
        </view>
      </view>
      <view class="row" style="margin-top: 20rpx">
        <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: 28rpx">{{ $selectDictLabel(rewardType, item.prizeType) }} × 1</view>
      </view>
    </view>
    <noData v-if="list.length == 0" />
  </view>
</template>

<script>
import noData from '@/component/noData.vue'
import { prizeUserListApi } from '@/api/drawCard.js'
import { rewardType } from '@/utils/commonConfig.js'
export default {
  components: {
    noData,
  },
  data() {
    return {
      rewardType: rewardType,
      list: [],
      params: {},
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    if (query.raffleId) {
      this.params = query
      // 根据卡包id获取中奖记录
      this.getList()
    }
  },
  mounted() {},
  methods: {
    getList() {
      let params = {
        limit: 999,
        page: 1,
        ...this.params,
      }
      prizeUserListApi(params).then(res => {
        console.log(res, 'res中奖记录')
        this.list = res.data
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background-image: url(https://file.rongcyl.cn/festatic/bkm/imgv2/drawCard_box/bk.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #9ec8f9;
  overflow: auto;
  .card {
    margin: 20rpx 20rpx 0 20rpx;
    border-radius: 16rpx;
    background: #fff;
    padding: 20rpx;

    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;

        .photo {
          margin-right: 10rpx;
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
        }

        .name {
          font-size: 28rpx;
          font-weight: 600;
        }

        .img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 4rpx;
          margin-right: 10rpx;
        }
      }
      .text1 {
        color: #666666;
        font-size: 24rpx;
      }
    }
  }
}
</style>