uniAppXCX/pages/drawCardsList/drawCardsList.vue

<template>
  <view class="container" style="background-color: #131313">
    <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: 13px; margin-top: 12rpx">
          <div
            style="
              border-radius: 3px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              background: #fc5b20;
              color: #fff;
              padding: 0 8rpx;
            "
          >
            创意热销
          </div>
          <!-- 	  		<div>
	  			<span style="font-size: 14px; margin-right: 4px; 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 { raffleListApi } from '@/api/drawCard.js'

export default {
  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: 10px 0;
  height: 36px;
  display: flex;
  justify-content: space-around;
  align-items: center;

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

.list {
  padding: 10px;

  .kabk {
    padding: 1px;
    background: linear-gradient(180deg, rgba(211, 74, 216, 0.3) 0%, rgba(58, 67, 207, 0.3) 25%);
    border-radius: 13px;
    box-shadow: 1px 1px 4px rgba(176, 123, 255, 0.5);
    margin-bottom: 10px;
    overflow: hidden;
  }

  .ka1 {
    padding: 10px;
    display: flex;
    background: #fff;
    border-radius: 12px;
    position: relative;

    .leftImg {
      width: 30vw;
      height: 30vw;
      border-radius: 10px;
      margin-right: 8px;
    }

    .rightInfo {
      flex: 1;

      .row {
        margin-bottom: 5px;

        .price {
          font-size: 14px;
          font-weight: 600;
          color: #ff2c43;
        }
      }

      .title {
        font-size: 17px;
        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: 4px;
          width: 10vw;
          height: 10vw;
          margin-right: 5px;
        }
      }

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

        .tag {
          position: relative;
          width: 50px;
          height: 20px;
        }

        .tag_0 {
          z-index: 3;
        }

        .tag_1 {
          right: -9px;
          z-index: 2;
        }

        .tag_2 {
          right: -18px;
          z-index: 1;
        }
      }
    }
  }
}

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

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

    image {
      width: 100%;
      height: 50vw;
      border-radius: 8px;
    }
  }
}

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

  .ka {
    width: 100%;

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

    .ka-info {
      padding: 5px 5px 10px 5px;

      .ka-name {
        font-size: 12px;
      }

      .row {
        margin-top: 2px;
        justify-content: flex-end;

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