我的推荐

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

@@ -0,0 +1,52 @@
+<template>
+  <v-data-table
+    class="mt-3"
+    v-model="selected"
+    :items="items"
+    :headers="headers"
+    hover
+    height="60vh"
+    item-value="id"
+  >
+    <template #bottom></template>
+    <template v-slot:item.name="{ item }">
+      <div class="d-flex align-center cursor-pointer" >
+        <v-avatar size="40" :image="item.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
+        <span class="ml-2" style="color: #000000DE;">{{ item?.name }}</span>
+      </div>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+defineOptions({ name: 'table-page'})
+import { ref } from 'vue'
+
+// const emit = defineEmits(['refresh'])
+defineProps({
+  tab: String,
+  items: Array
+})
+
+
+const selected = ref([])
+const headers = [
+  { title: '牛人', value: 'name' },
+  { title: '应聘公司', value: '应聘公司' },
+  { title: '应聘职位', key: '应聘职位' },
+  { title: '岗位薪资', key: '岗位薪资' },
+  { title: '赏金', value: '赏金' },
+  { title: '推荐进度', key: '推荐进度' },
+]
+
+</script>
+
+<style scoped lang="scss">
+:deep(.v-table > .v-table__wrapper > table > thead) {
+  background-color: #f7f8fa !important;
+}
+:deep(.v-selection-control__input) {
+  // color: var(--v-primary-base) !important;
+  color: #767778;
+}
+</style>

src/views/personal/myPublicRecruitment/index.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script setup>
-import myRecommendation from './components/myRecommendation.vue'
-import myRegistration from './components/myRegistration.vue'
+import myRecommendation from './myRecommendation.vue'
+import myRegistration from './myRegistration.vue'
 import { ref } from 'vue'
 defineOptions({name: 'personal-myPublicRecruitment-index'})
 

src/views/personal/myPublicRecruitment/components/myRecommendation.vue → src/views/personal/myPublicRecruitment/myRecommendation.vue

@@ -12,15 +12,13 @@
         </div>
         <div class="topTip">推荐好友入职得赏金</div>
         <!-- 数据 -->
-        <div class="dataBox" v-for="(item, index) in dataList" :key="index">
-          <!-- 假数据 -->
+        <!-- <div class="dataBox" v-for="(item, index) in dataList" :key="index">
           <v-avatar :image="avatarList[index % 7]"></v-avatar>
-          <!-- <v-avatar :image="item.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar> -->
-          <span class="dataBox-name">{{ item.被推荐人 }}</span>
-          <span class="dataBox-name">{{ item.公司 }}</span>
-          <span class="dataBox-name">{{ item.职位 }}</span>
-          <!-- <span class="dataBox-address">{{ item.areaName }}</span> -->
-        </div>
+          <span class="dataBox-name">{{ item.name }}</span>
+          <span class="dataBox-name">{{ item.应聘公司 }}</span>
+          <span class="dataBox-name">{{ item.应聘职位 }}</span>
+        </div> -->
+        <TablePage :items="dataList"></TablePage>
       </div>
     </div>
     <!-- 滚动区域 -->
@@ -31,6 +29,7 @@
 </template>
 
 <script setup>
+import TablePage from './components/table.vue'
 import { ref } from 'vue'
 defineOptions({name: 'defineOptions-name'})
 // 数据统计
@@ -54,9 +53,12 @@ const avatarList = [
 ]
 const dataList = ref([])
 const dataItem = {
-  被推荐人: '李某某',
-  公司: '门墩儿科技',
-  职位: '酒店前台',
+  name: '李某某',
+  应聘公司: '门墩儿科技',
+  应聘职位: '酒店前台',
+  岗位薪资: '8000-10000/月',
+  推荐进度: '已报名',
+  赏金: '100积分',
 }
 const active = ref(0)
 const statisticsClick = (item, index) => {
@@ -64,7 +66,7 @@ const statisticsClick = (item, index) => {
   const count = statistics.value[item.name] ? statistics.value[item.name] - 0 : 0
   dataList.value = []
   for (let i = 0; i < count; i++) {
-    dataList.value.push(dataItem)
+    dataList.value.push({ ...dataItem, avatar: avatarList[i] })
   }
 }
 statisticsClick(statisticsList.value[0])