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: 5px">{{ item.creatTime }}</span>
          <span>No.{{ item.id }}</span>
        </view>
      </view>
      <view class="row" style="margin-top: 10px">
        <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: 14px">{{ $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: [],
    }
  },
  onLoad(query) {
    console.log(query, 'query')
    if (query.raffleId) {
      this.raffleId = query.raffleId
      // 根据卡包id获取中奖记录
      this.getList()
    }
  },
  mounted() {},
  methods: {
    getList() {
      let params = {
        limit: 999,
        page: 1,
        raffleId: this.raffleId,
      }
      prizeUserListApi(params).then(res => {
        console.log(res, 'res中奖记录')
        this.list = res.data
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #9ec8f9;
  overflow: auto;
  .card {
    margin: 10px 10px 0 10px;
    border-radius: 8px;
    background: #fff;
    padding: 10px;

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

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

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

        .name {
          font-size: 14px;
          font-weight: 600;
        }

        .img {
          width: 40px;
          height: 40px;
          border-radius: 2px;
          margin-right: 5px;
        }
      }
      .text1 {
        color: #666666;
        font-size: 12px;
      }
    }
  }
}
</style>