6 changed files with 434 additions and 56 deletions
@ -0,0 +1,155 @@ |
|||
<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> |
|||
Binary file not shown.
Loading…
Reference in new issue