uniAppXCX/pages/index/index --lod.vue

<template>
  <view class="container">
    <image class="headImg" mode="aspectFill" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/homeHead.jpeg'"></image>
    <view class="headBarrage"></view>

    <view class="tabs">
      <view class="tab">
        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame3.png'" alt="" />
        <span>全部</span>
      </view>
      <view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame4.png'" alt="" />
        <span>超值挑战</span>
      </view>
      <view class="tab">
        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame2.png'" alt="" />
        <span>拍卖专区</span>
      </view>
      <view class="tab">
        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/Frame1.png'" alt="" />
        <span>VIP福利</span>
      </view>
    </view>
    <view class="buttons">
      <view class="left">
        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button3.png'" @click="toInvite"></image>
      </view>
      <view class="right">
        <image :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button1.png'"></image>
        <image
          :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/button2.png'"
          @click="$navigateTo('/pages/raffle/raffle')"
        />
      </view>
    </view>
    <view class="list-title">- 热门推荐 -</view>
    <view class="list">
      <view class="ka" v-for="(item, index) in kaList">
        <view class="top">
          <image mode="aspectFit" :src="'https://file.rongcyl.cn/festatic/bkm/imgv2/ka.jpeg'"></image>
        </view>
        <view class="ka-info">
          <view class="ka-name">宝可梦简中原盒拆拆乐</view>
          <view class="row">
            <uni-tag text="创意热销" inverted type="default"></uni-tag>
            <view class="money">¥9.9</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { messageListApi } from '@/api/common.js'
export default {
  data() {
    return {
      kaList: 6,
      messageList: [],
      barrageData: [],
      barrageIndex: 0,
      timeOut: null,
    }
  },
  onLoad(query) {
    if (query.inviteId) {
      getApp().globalData.inviteId = query.inviteId
    } else {
      const scene = decodeURIComponent(query.scene)
      let inviteId = scene.split('=')[1]
      console.log(inviteId, 'inviteId')
      getApp().globalData.inviteId = inviteId
    }
  },
  onShow() {
    this.getMessage()
  },
  methods: {
    getMessage() {
      let params = {
        limit: 20,
        page: 1,
      }
      messageListApi(params).then(res => {
        this.messageList = res.data.list
        this.initBarrage()
      })
    },
    // 初始化弹幕
    initBarrage() {},
    toInvite() {
      wx.navigateTo({
        url: '/pages/invite/invite',
      })
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  /* padding: 20px; */
  font-size: 14px;
  line-height: 24px;
}

.headImg {
  height: 180px;
  width: 100%;
}
.headBarrage {
  height: 180px;
  width: 100%;
  position: absolute;
  top: 0;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;

  > .tab {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > image {
      width: 40px;
      height: 40px;
    }
  }
}

.buttons {
  margin-top: 5px;
  padding: 10px;
  display: flex;
  justify-content: space-between;

  > .left {
    width: calc(50vw - 15px);
    height: 40vw;

    image {
      width: 100%;
      height: 100%;
    }
  }

  > .right {
    width: calc(50vw - 15px);
    height: 40vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    image {
      width: 100%;
      height: calc(50% - 5px);
    }
  }
}

.list-title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  padding: 10px;
}

.list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  padding: 10px;

  .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: 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: 16px;
          font-weight: 600;
          color: #ff2c43;
        }
      }
    }
  }
}
.bullet {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
}
</style>