uniAppXCX/pages/raffle/raffle.vue

<template>
  <view class="container">
    <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="$fileUrl() + '/raffle/2.jpg'" mode="aspectFill" />
        </swiper-item>
        <swiper-item>
          <image class="swiperItem" :src="$fileUrl() + '/raffle/3.jpg'" mode="aspectFill" />
        </swiper-item>
        <swiper-item>
          <image class="swiperItem" :src="$fileUrl() + '/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="list" v-if="tabActive == 1">
      <view class="kabk" v-for="(item, index) in list" @click="toDrawCard({ id: item.id })" :key="index">
        <view class="ka1">
          <image class="leftImg" :src="item.icon" mode="aspectFill"></image>
          <view class="rightInfo">
            <view class="row title">
              {{ item.name }}
            </view>
            <view class="row">
              <span class="price">
                ￥
                <span style="font-size: 20px">{{ item.price }}</span>
              </span>
            </view>
            <view class="row prizes">
              <image
                v-for="(item2, index2) in item.prizeIconList"
                class="prize"
                :src="item2"
                mode="aspectFill"
                :key="index2"
              ></image>
            </view>
            <view class="tags">
              <image
                :key="index3"
                v-for="(item3, index3) in item.subType"
                :class="['tag', 'tag_' + index3]"
                :src="$fileUrl() + `/raffle/tag${subType(item3)}.png`"
                mode="widthFix"
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="list2" v-if="tabActive == 2">
      <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>
    </view>
    <view class="list2 three" v-if="tabActive > 2">
      <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>
    </view>
  </view>
</template>

<script>
import { raffleListApi } from '@/api/drawCard.js'

export default {
  data() {
    return {
      tabActive: 1,
      list: [],
      info: [
        {
          content: '内容 A',
        },
        {
          content: '内容 B',
        },
        {
          content: '内容 C',
        },
      ],
      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 = this.$fileUrl() + '/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);

  .ka {
    width: calc(50vw - 15px);
    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    // height: 60vw;

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

      image {
        width: 80%;
        height: 50vw;
        // height: 50vw;
      }
    }

    .ka-info {
      padding: 10px;

      .ka-name {
        font-size: 15px;
        font-weight: 600;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .row {
        position: relative;
        margin-top: 5px;
        display: flex;
        justify-content: space-between;

        .tag {
        }

        .money {
          font-size: 12px;
          font-weight: 600;
          color: #ff2c43;
        }
      }
    }
  }
}

.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>