uniAppXCX/pages/excellentValue/excellentValue.vue

<template>
  <view class="container">
    <view class="list">
      <view class="ka" v-for="(item, index) in kaList" @click="toDrawCard(item)">
        <view class="top">
          <image mode="aspectFit" :src="item.icon"></image>
        </view>
        <view class="ka-info">
          <view class="ka-name">
            {{ item.name }}
          </view>
          <view class="row">
            <view class="money">
              ¥
              <span style="font-size: 16px">{{ item.price }}</span>
            </view>
            <view class="number">
              <view class="residue">剩余{{ item.balaceNum }}</view>
              <view class="total">/{{ item.totalNum }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { raffleListApi } from '@/api/drawCard.js'
export default {
  data() {
    return {
      kaList: [],
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    getList() {
      let params = {
        limit: 99,
        page: 1,
        type: 5,
      }
      raffleListApi(params).then(res => {
        console.log(res, '卡包列表')
        this.kaList = res.data.list
      })
    },
    toDrawCard(item) {
      wx.navigateTo({
        url: '/pages/drawCard_first/drawCard_first?id=' + item.id,
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  background: #9ec8f9;

  .list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    .ka {
      background: #fff;
      width: calc(50vw - 15px);
      box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      overflow: hidden;
      // height: 60vw;

      .top {
        // height: 60vw;
        background: linear-gradient(180deg, #faf1a7 0%, #ffe456 100%);
        text-align: center;
        display: flex;
        justify-content: center;

        image {
          width: 35vw;
          height: 50vw;
        }
      }
      .ka-info {
        padding: 10px;
        .ka-name {
          font-size: 15px;
          font-weight: 600;
        }
        .row {
          margin-top: 5px;
          display: flex;
          justify-content: space-between;

          .money {
            font-size: 12px;
            font-weight: 600;
            color: #ff2c43;
          }
          .number {
            display: flex;
            align-items: center;
            .residue {
              color: #ff2c43;
              font-size: 13px;
            }
            .total {
              font-size: 11px;
            }
          }
        }
      }
    }
  }
}
</style>