uniAppXCX/pages/drawCardsList/drawCardsList.vue

<template>
  <view class="container" style="background-color: #131313; overflow: scroll">
    <!-- <PageTitle color="#fff" title="抽盒机" /> -->
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      @clickItem="clickItem"
      :info="info"
      :current="current"
      :mode="mode"
      :dots-styles="dotsStyles"
      field="content"
    >
      <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
        <swiper-item>
          <image
            class="swiperItem"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/2.jpg'"
            mode="aspectFill"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="swiperItem"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/3.jpg'"
            mode="aspectFill"
          />
        </swiper-item>
        <swiper-item>
          <image
            class="swiperItem"
            :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/1.jpg'"
            mode="aspectFill"
          />
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <!-- <view class="tabs">
      <view class="tab" @click="clickTab(1)">
        <image
          class="tabImg"
          v-show="tabActive == 1"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab1a.png"
          mode="widthFix"
        />
        <image
          class="tabImg"
          v-show="tabActive != 1"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab1.png"
          mode="widthFix"
        />
      </view>
      <view class="tab" @click="clickTab(2)">
        <image
          class="tabImg"
          v-show="tabActive == 2"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab2a.png"
          mode="widthFix"
        />
        <image
          class="tabImg"
          v-show="tabActive != 2"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab2.png"
          mode="widthFix"
        />
      </view>
      <view class="tab" @click="clickTab(3)">
        <image
          class="tabImg"
          v-show="tabActive == 3"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab3a.png"
          mode="widthFix"
        />
        <image
          class="tabImg"
          v-show="tabActive != 3"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab3.png"
          mode="widthFix"
        />
      </view>
      <view class="tab" @click="clickTab(4)">
        <image
          class="tabImg"
          v-show="tabActive == 4"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab4a.png"
          mode="widthFix"
        />
        <image
          class="tabImg"
          v-show="tabActive != 4"
          src="https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab4.png"
          mode="widthFix"
        />
      </view>
    </view> -->
    <view class="list2">
      <!--      <view class="ka" v-for="(item, index) in list" @click="toDrawCard({ id: item.id })" :key="index">
        <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">
            <uni-tag class="tag" text="创意热销" inverted type="default"></uni-tag>
            <view class="money">¥{{ item.price }}</view>
          </view>
        </view>
      </view> -->
      <div class="card relative" v-for="(item, i) in list" @click="toDrawCard({ id: item.id })" :key="i">
        <image mode="aspectFill" :src="item.icon"></image>
        <div class="mt-1">{{ item.name }}</div>
        <div class="flex justify-between" style="font-size: 26rpx; margin-top: 12rpx">
          <!-- <div
            style="
              border-radius: 6rpx;
              height: 40rpx;
              line-height: 40rpx;
              text-align: center;
              background: #fc5b20;
              color: #fff;
              padding: 0 8rpx;
            "
          >
            创意热销
          </div> -->
          <!-- 	  		<div>
	  			<span style="font-size: 28rpx; margin-right: 8rpx; color: #fc5b20"
	  				class="bold">{{ item.totalNum }}</span>
	  			<span style="color: #666666">销量</span>
	  		</div> -->
        </div>
        <div style="color: #fc5b20; margin-top: 12rpx">
          <span class="fs14">￥</span>
          <span class="bold fs16">{{ item.price }}</span>
        </div>
      </div>
    </view>
  </view>
</template>

<script>
import PageTitle from '@/component/pageTitle.vue'
import { raffleListApi } from '@/api/drawCard.js'

export default {
  components: {
    PageTitle,
  },
  data() {
    return {
      tabActive: 4,
      list: [],
      info: [],
      dotsStyles: {},
      current: 0,
      mode: 'dot',
      swiperDotIndex: 0,
    }
  },
  onShow() {
    this.getList()
  },
  methods: {
    toDrawCard(params) {
      let url = ''
      if (this.tabActive == 1) {
        url = '/pages/drawCard_infinite/drawCard_infinite'
      } else if (this.tabActive == 2) {
        url = '/pages/drawCard_last/drawCard_last'
      } else if (this.tabActive == 3) {
        url = '/pages/drawCard_fullSet/drawCard_fullSet'
      } else if (this.tabActive == 4) {
        url = '/pages/drawCard_box/drawCard_box'
      }
      this.$navigateTo(url, params)
    },
    getList() {
      let params = {
        limit: 999,
        page: 1,
        type: this.tabActive,
      }
      raffleListApi(params).then(res => {
        console.log(res, 'res')
        let list = res.data.list
        for (var i = 0; i < list.length; i++) {
          if (list[i].subType) {
            list[i].subType = list[i].subType.split(',')
          }
        }
        console.log('list', list)
        this.list = list
      })
    },
    subType(value) {
      let index = null
      if (value == 120) {
        index = 1
      } else if (value == 110) {
        index = 2
      } else if (value == 111) {
        index = 3
      } else if (value == 112) {
        index = 4
      }
      return index
    },
    tabImg(index) {
      let url =
        'https://file.rongcyl.cn/festatic/bkm/imgv2/raffle/tab' + index + (this.tabActive == index ? 'a' : '') + '.png'
      return url
    },
    clickTab(index) {
      this.list = []
      this.tabActive = index
      this.getList()
    },
    clickItem() {},
    change() {},
  },
}
</script>

<style scoped lang="scss">
.swiperItem {
  width: 100%;
  height: 100%;
}

.tabs {
  margin: 20rpx 0;
  height: 72rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;

  .tab {
    .tabImg {
      width: 18vw;
      height: 100%;
    }
  }
}

.list {
  padding: 20rpx;

  .kabk {
    padding: 2rpx;
    background: linear-gradient(180deg, rgba(211, 74, 216, 0.3) 0%, rgba(58, 67, 207, 0.3) 25%);
    border-radius: 26rpx;
    box-shadow: 2rpx 2rpx 8rpx rgba(176, 123, 255, 0.5);
    margin-bottom: 20rpx;
    overflow: hidden;
  }

  .ka1 {
    padding: 20rpx;
    display: flex;
    background: #fff;
    border-radius: 24rpx;
    position: relative;

    .leftImg {
      width: 30vw;
      height: 30vw;
      border-radius: 20rpx;
      margin-right: 16rpx;
    }

    .rightInfo {
      flex: 1;

      .row {
        margin-bottom: 10rpx;

        .price {
          font-size: 28rpx;
          font-weight: 600;
          color: #ff2c43;
        }
      }

      .title {
        font-size: 34rpx;
        font-weight: 600;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .prizes {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

        .prize {
          border-radius: 8rpx;
          width: 10vw;
          height: 10vw;
          margin-right: 10rpx;
        }
      }

      .tags {
        position: absolute;
        right: -2rpx;
        bottom: -4rpx;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;

        .tag {
          position: relative;
          width: 100rpx;
          height: 40rpx;
        }

        .tag_0 {
          z-index: 3;
        }

        .tag_1 {
          right: -18rpx;
          z-index: 2;
        }

        .tag_2 {
          right: -36rpx;
          z-index: 1;
        }
      }
    }
  }
}

.list2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20rpx;
  padding: 20rpx;
  width: calc(100% - 40rpx);

  .card {
    position: relative;
    // box-sizing: border-box;
    // width: 100%;
    // width: 344rpx;
    // height: 500rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    padding-bottom: 12rpx;

    image {
      width: 100%;
      height: 50vw;
      border-radius: 16rpx;
    }
  }
}

.three {
  grid-template-columns: 1fr 1fr 1fr;

  .ka {
    width: 100%;

    .top {
      image {
        width: 80%;
        height: 30vw;
      }
    }

    .ka-info {
      padding: 10rpx 10rpx 20rpx 10rpx;

      .ka-name {
        font-size: 24rpx;
      }

      .row {
        margin-top: 4rpx;
        justify-content: flex-end;

        .tag {
          display: none;
        }
      }
    }
  }
}
</style>