滚动展示

src/views/personal/myPublicRecruitment/components/bountyDisplay.vue

@@ -1,41 +1,111 @@
+<!-- 滚动展示 -->
 <template>
-  <div class="scroll-container" ref="scrollRef">
-    <div v-for="(item, index) in list" :key="index" style="height: 40px; line-height: 40px;">{{ item.title }}</div>
+  <div style="height: 100%; width: 100%;">
+    <div class="mb-3" style="font-size: 13px; color: #666;">最近30天已有<span class="red">68人</span>提现成功，累计提现<span class="red">￥9450</span></div>
+    <!-- 滚动 -->
+    <div
+      class="scroll-container"
+      ref="scrollRef"
+      style="height: calc(100% - 42px); overflow: hidden; font-size: 13px;color: #333;"
+    >
+      <!-- 数据list -->
+      <div
+        v-for="(item) in list"
+        :key="item[keyText] || item.name"
+        class="d-flex justify-space-between align-center"
+        style="height: 40px;"
+      >
+        <!-- 头像、用户名 -->
+        <div class="d-flex align-center">
+          <v-avatar size="30" :image="item.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
+          <div class="ml-2">{{ formatName(item.name) }}</div>
+          <!-- <div class="ml-2">{{ item.name }}</div> -->
+        </div>
+        <div class="d-flex" style="width: calc(100% - 65px);">
+          <!-- 内容 -->
+          <div class="d-flex ellipsisText mx-4" style="flex: 1;">
+            <div>推荐到</div>
+            <div class="ellipsisText ml-1" style="max-width: 100px;">{{ item.company }}</div>
+            <div class="ellipsisText ml-1" style="max-width: 60px;">{{ item.job }}</div>
+          </div>
+          <!-- 赏金 -->
+          <div>提现￥<span class="red">{{ item.money }}</span></div>
+        </div>
+      </div>
+       <!-- <div class="scrollBox" id="scrollBox">
+       </div> -->
+    </div>
   </div>
 </template>
 
 <script setup>
 import  { onMounted, ref } from 'vue'
+
 defineOptions({name: 'publicRecruitment-bountyDisplay'})
+defineProps({
+  keyText: {
+    type: String,
+    default: 'id'
+  }
+})
+const avatarList = [
+  'https://img0.baidu.com/it/u=230622178,1565949306&fm=253&fmt=auto&app=138&f=JPEG?w=449&h=300',
+  'https://img0.baidu.com/it/u=1401084042,2724457850&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=726',
+  'https://q7.itc.cn/q_70/images03/20240423/6d236fae5c8f44ed9b60d977f32debb7.jpeg',
+  'https://q1.itc.cn/q_70/images03/20240609/1c1be14298be4dbe978e55bde6e958b0.jpeg',
+  'https://q4.itc.cn/q_70/images03/20240528/298d4abda5e4469d98fa77e7cde46525.jpeg',
+  'https://q5.itc.cn/q_70/images03/20240520/ceb0d77d1be24eea8cd3826994eac1c1.jpeg',
+  'https://img1.baidu.com/it/u=3995643348,1848098846&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800',
+]
+const listSource = []
+for (let index = 0; index < 2; index++) {
+  const obj = {
+    id: 'id' + (index+1),
+    name: '用户' + (index+1),
+    avatar: avatarList[index % 7],
+    company: '某某公司' + (index+1),
+    job: '某某职位' + (index+1),
+    money: index*index*(100 - index) || 100,
+  }
+  listSource.push(obj)
+}
+
+// 用户名加*号
+const formatName = (name) => {
+  if (name.length === 1) {  
+    return name // 如果名字只有一个字，则直接返回该字  
+  } else if (name.length === 2) {  
+    return name.charAt(0) + '*' // 如果名字有两个字，则返回第一个字后跟一个星号  
+  } else {  
+    return name.charAt(0) + '**' // 如果名字有多于两个字，则返回第一个字后跟两个星号  
+  }  
+}
 
+// 滚动实现代码部分
 // 容器的 dom 节点
 const scrollRef = ref()
-// 模拟列表数据
-const dataSource = new Array(10).fill(0).map((_, index) => ({
-  title: `这是一条信息${index}`
-}))
-const list = ref([...dataSource])
+// // 模拟列表数据
+// const listSource = new Array(10).fill(0).map((_, index) => ({ title: `这是一条信息${index}`}))
+const list = ref([...listSource])
 
 // 记录原始数据的长度
-const len = dataSource.length
+const len = listSource.length
 onMounted(() => {
   // 滚动的距离
   let top = 0
   // 索引
   let index = 0
-
   const scroll = () => {
     // 垂直方向滚动
     scrollRef.value?.scrollTo({
-      top: top++
+      top: top++,
     })
     if (top % 40 === 0) {
       // 哪一项滚不见了，就拿这一项 push 到列表中
       const target = list.value[index]
-
       if (target) list.value.push(target)
-      
-      if (index < (len - 1)) {
+
+      if (index < len - 1) {
         // 不断递增
         index++
       } else {
@@ -43,23 +113,44 @@ onMounted(() => {
         top = 0
         index = 0
         scrollRef.value?.scrollTo({
-          top: 0
+          top: 0,
         })
-        list.value = [...dataSource]
+        list.value = [...listSource]
       }
     }
     // 不断滚动
     requestAnimationFrame(scroll)
   }
-
+  // 如果数据长度形成的总高度少于容器高度，不设置滚动
+  // scrollRef.value?.style
+  // console.log('1', scrollRef.value)
+  // debugger
   scroll()
 })
+ 
+// const setDataList = () => { // 设置数据的基数
+//   // -> totalNum: 总数
+//   const totalNum = 1000 // 设置长度
+//   if (listSource.length >= totalNum) {
+//     // return listSource.slice(0, totalNum)
+//   } else {
+//     const multipleCount = Math.ceil(totalNum/listSource.length)
+//     // 创建一个长度为multipleCount的新数组，并用realDataList填充，取totalNum长度
+//     const arr = listSource.concat(...Array.from({ length: multipleCount }, () => [...listSource]))
+//     // return arr.slice(0, totalNum)
+//     return arr
+//   }
+// }
+// if (listSource?.length) list.value = setDataList()
 </script>
-
 <style lang="scss" scoped>
-.scroll-container {
-  //   防止有滚动条出现
+.red {
+  color: red;
+}
+.ellipsisText {
+  // width: 120px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   overflow: hidden;
-  height: 150px;
 }
-</style>
+</style>