uniAppXCX/pages/index/index.vue

<template>
  <view class="container">
    <image class="headImg" mode="aspectFill" :src="$fileUrl() + '/homeHead.jpeg'" />
    <view class="headBarrage">
      <view class="barrage-container">
        <view v-for="(item, index) in barrageData" :key="index" class="barrage-item" :style="item.style">
          {{ item.text }}
        </view>
      </view>
    </view>

    <view class="tabs">
      <view class="tab">
        <image :src="$fileUrl() + '/Frame3.png'" alt="" />
        <span>全部</span>
      </view>
      <view class="tab" @click="$navigateTo('/pages/excellentValue/excellentValue')">
        <image :src="$fileUrl() + '/Frame4.png'" alt="" />
        <span>超值挑战</span>
      </view>
      <view class="tab" @click="$navigateTo('/pages/task/index')">
        <image :src="$fileUrl() + '/Frame2.png'" alt="" />
        <span>任务大厅</span>
      </view>
      <view class="tab" @click="$navigateTo('/pages/index2/index')">
        <image :src="$fileUrl() + '/Frame1.png'" alt="" />
        <span>VIP福利</span>
      </view>
    </view>
    <view class="buttons">
      <view class="left">
        <image :src="$fileUrl() + '/button3.png'" @click="toInvite" />
      </view>
      <view class="right">
        <image :src="$fileUrl() + '/button1.png'" />
        <image :src="$fileUrl() + '/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="$fileUrl() + '/ka.jpeg'" />
        </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 {
      timer: null,
      kaList: 6,
      messageList: [],
      barrageData: [],
      barrageIndex: 0,
      timeOut: null,
      interval: null,
      params: {
        limit: 20,
        page: 1,
      },
      total: null,
      containerWidth: 0,
      usedTops: [],
    }
  },
  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
    }
    console.log(this.$refs)
  },
  onShow() {
    this.getMessage()
    this.interval = setInterval(() => {
      console.log('重复获取消息')
      this.barrageIndex = 0
      this.getMessage()
      // let num = this.params.page * this.params.limit
      // if (this.total == null || this.total > num) {
      // 	console.log('获取消息接口')
      // 	// this.params.page += 1
      // 	this.barrageIndex = 0
      // 	this.getMessage()
      // }
    }, 60000)
    setTimeout(() => {
      this.launchBarrage()
    }, 2000)
  },
  onHide() {
    clearInterval(this.interval)
    clearInterval(this.timer)
  },
  methods: {
    getMessage() {
      messageListApi(this.params).then(res => {
        this.messageList = res.data.list
        this.total = res.data.total
        this.initBarrage()
      })
    },
    launchBarrage() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.timer = setInterval(() => {
        this.barrageData.forEach((barrage, index) => {
          if (!barrage.tag) {
            barrage.tag = true
            barrage.right = -400
            barrage.top = this.randomTop()
            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
          } else {
            barrage.right = parseInt(barrage.right) + 2
            barrage.style = `display: block; top: ${barrage.top}px; right: ${barrage.right}px;`
          }
        })
      }, 20)
    },
    // 初始化弹幕
    initBarrage() {
      // console.log(this.barrageIndex, 'this.barrageIndex')
      if (this.messageList.length > 0) {
        this.timeOut = setTimeout(() => {
          let barrage = { text: this.messageList[this.barrageIndex].content }
          this.$set(barrage, 'right', -400)
          this.$set(barrage, 'top', this.randomTop())
          this.$set(barrage, 'tag', false)
          this.barrageData.push(barrage)

          this.barrageIndex += 1
          clearTimeout(this.timeOut)
          if (this.barrageIndex > this.messageList.length - 1) {
            this.barrageIndex = 0
          } else {
            this.initBarrage()
          }
        }, 1000)
      }
    },
    // 发送弹幕
    sendingBarrage() {
      let messageList = this.messageList
    },
    randomTop() {
      // return Math.floor(Math.random() * 150)

      // 往前5个不重复top值
      let top = 0
      this.usedTops.push(top)
      do {
        top = Math.floor(Math.random() * 6) * 30 // 生成0, 30, 60, 90, 120的随机值
      } while (this.usedTops.slice(-4).includes(top))

      this.usedTops.push(top)

      return top
    },

    toInvite() {
      wx.navigateTo({
        url: '/pages/invite/invite',
      })
    },
  },
}
</script>

<style scoped lang="scss">
.barrage-container {
  width: 100%;
  height: 180px;
  position: relative;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.2); /* 背景色，可根据需要调整 */
}

.barrage-item {
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 30px;
  position: absolute;
  white-space: nowrap;
  display: none;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.3);
}
.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>