bnyer-cloud-tiktok/pages/userInfo/vip/MemberScroll.vue

<template>
  <view class="member-scroll">
    <view class="member-item" v-for="(item, index) in memberList" :key="index">
      <text class="member-name">{{ encryptString(item.name) }}</text>
      <text class="member-time">{{ calculateTimeDifference(item.time) }}</text>
      <text class="member-info">购买了{{ item.duration }}个月{{ item.vipName }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "MemberScroll",
  data() {
    return {
      memberList: []
    }
  },
  created() {
    this.generateMemberList();
    this.startAutoScroll();
  },
  methods: {
    generateMemberList() {
      const names = [
        '张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '吴十',
        '郑十一', '王十二', '陈十三', '杨十四', '朱十五', '秦十六', '许十七', '何十八'
      ];

      const currentDateTime = new Date();

      const memberCount = Math.floor(Math.random() * 6) + 5; // 生成5-10个数据

      for (let i = 0; i < memberCount; i++) {
        const randomName = this.generateRandomName(names);
        const randomDateTime = this.generateRandomDateTime(currentDateTime);

        const member = {
          name: randomName,
          time: randomDateTime,
          duration: Math.floor(Math.random() * 12) + 1,
          vipName: "全站VIP权益"
        };
        this.memberList.push(member);
      }
    },
    generateRandomName(names) {
      const randomIndex = Math.floor(Math.random() * names.length);
      const randomName = names[randomIndex];
      names.splice(randomIndex, 1); // 避免重复使用同一个名字
      return randomName;
    },

    padZero(num) {
      return num.toString().padStart(2, '0');
    },

    formatDateTime(date) {
      const year = date.getFullYear();
      const month = this.padZero(date.getMonth() + 1);
      const day = this.padZero(date.getDate());
      const hours = this.padZero(date.getHours());
      const minutes = this.padZero(date.getMinutes());
      const seconds = this.padZero(date.getSeconds());

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    generateRandomDateTime(currentDateTime) {

      // 计算两个小时前的时间
      const twoHoursAgo = currentDateTime.getTime() - 2 * 60 * 60 * 1000;

      // 生成一个介于两个小时前和当前时间之间的随机时间戳
      const randomTimestamp = Math.floor(Math.random() * (currentDateTime.getTime() - twoHoursAgo)) + twoHoursAgo;

      // 创建新的Date对象，并设置为随机时间戳
      const randomDate = new Date(randomTimestamp);

      return this.formatDateTime(randomDate);
    },

    calculateTimeDifference(dateString) {
      const currentDate = new Date(); // 当前时间
      const targetDate = new Date(dateString); // 目标时间

      const timeDifference = Math.floor((currentDate - targetDate) / (1000 * 60)); // 时间差（分钟）

      if (timeDifference >= 60) {
        const hours = Math.floor(timeDifference / 60); // 计算小时
        return `${hours}小时前`;
      } else {
        return `${timeDifference}分钟前`;
      }
    },

    startAutoScroll() {
      setInterval(() => {
        const firstItem = this.memberList.shift();
        this.memberList.push(firstItem);
      }, 3000);
    },

    encryptString(str) {
      if (!str || str.length <= 1) {
        return "***";
      }
      let firstTwoChars = '';
      if (str.length <= 2) {
        firstTwoChars =  str.substring(0, 1);
      } else {
        firstTwoChars = str.substring(0, 2); // 提取前两个字符
      }
      return firstTwoChars + "***";
    }

  }
}
</script>

<style lang="scss" scoped>
.member-scroll {
  height: 120rpx;
  overflow: hidden;
  font-size: 24rpx;

  .member-item:first-child {
    opacity: 1;
  }

  .member-item:nth-child(2) {
    opacity: 1;
   }

}

.member-item {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: center;
  margin-bottom: 10rpx;
  font-weight: 400;
  opacity: 0.5;
}

.member-name {
  margin-right: 10rpx;
}

.member-time {
  margin-right: 10rpx;
}

</style>