6 changed files with 433 additions and 55 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