我的推荐

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

@@ -0,0 +1,122 @@
+<!-- 我的推荐 -->
+<template>
+  <div class="d-flex">
+    <div class="pa-3 mr-3 white-bgc" style="min-height: 500px; border-radius: 5px; flex: 1;">
+      <div style="width: 100%;">
+        <!-- 统计 -->
+        <div class="statisticsBox">
+          <div class="statisticsBox-item" :class="{'act': index === active}" v-for="(item, index) in statisticsList" :key="item.name" @click="statisticsClick(item, index)">
+            <div style="font-size: 18px; color: #333; font-weight: bold;">{{ statistics[item.name] || '0' }}</div>
+            <span style="font-size: 13px; color: #666;">{{ item.label }}</span>
+          </div>
+        </div>
+        <div class="topTip">推荐好友入职得赏金</div>
+        <!-- 数据 -->
+        <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>
+      </div>
+    </div>
+    <!-- 滚动区域 -->
+    <div class="pa-3 white-bgc" style="height: 300px; border-radius: 5px; width: 360px;">
+      滚动区域
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+defineOptions({name: 'defineOptions-name'})
+// 数据统计
+const statistics = ref({ statisticsA: '3', statisticsB: '7', statisticsC: '5', statisticsD: '2', statisticsE: '1' })
+const statisticsList = ref([
+  { count: '', label: '已报名', name: 'statisticsA' },
+  { count: '', label: '已过筛', name: 'statisticsB' },
+  { count: '', label: '已过面', name: 'statisticsC' },
+  { count: '', label: '已入职', name: 'statisticsD' },
+  { count: '', label: '已结算', name: 'statisticsE' }
+])
+
+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 dataList = ref([])
+const dataItem = {
+  被推荐人: '李某某',
+  公司: '门墩儿科技',
+  职位: '酒店前台',
+}
+const active = ref(0)
+const statisticsClick = (item, index) => {
+  active.value = 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)
+  }
+}
+statisticsClick(statisticsList.value[0])
+</script>
+<style lang="scss" scoped>
+.topTip {
+  color: #999;
+  margin-top: 8px;
+  font-size: 14px;
+  padding: 5px 10px;
+  width: 100%;
+  // background-color: var(--default-bgc);
+}
+.statisticsBox {
+  display: flex;
+  justify-content: space-around;
+  border-radius: 10px;
+  text-align: center;
+  padding: 10px 0;
+  background-color: var(--default-bgc);
+  .act {
+    div, span { color: var(--v-primary-base) !important; }
+  }
+  .statisticsBox-item {
+    cursor: pointer;
+    &:hover {
+      div, span { color: var(--v-primary-base) !important; }
+    }
+  }
+}
+.dataBox {
+  height: 40px;
+  line-height: 30px;
+  margin-top: 8px;
+  .dataBox-name {
+    width: 120px;
+    display: inline-block;
+    max-width: 120px;
+    vertical-align: middle;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: #666;
+    font-size: 13px;
+    margin-left: 5px;
+    // &:hover {
+    //   color: var(--v-primary-base);
+    // }
+  }
+  .dataBox-address {
+    color: #555;
+    font-size: 13px;
+  }
+}
+</style>

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

@@ -0,0 +1,10 @@
+<!-- 我的报名 -->
+<template>
+  <div>我的报名</div>
+</template>
+
+<script setup>
+defineOptions({name: 'personal-myPublicRecruitment-myRegistration'})
+</script>
+<style lang="scss" scoped>
+</style>

src/views/personal/myPublicRecruitment/index.vue

@@ -7,103 +7,25 @@
     </v-tabs>
     <div class="mt-3">
       <!-- 我的推荐 -->
-      <div v-if="tab === 1" class="d-flex">
-        <div class="pa-3 mr-3 white-bgc" style="min-height: 500px; border-radius: 5px; flex: 1;">
-          <div style="width: 100%;">
-            <!-- 统计 -->
-            <div class="statisticsBox">
-              <div class="statisticsBox-item" v-for="item in statisticsList" :key="item.name">
-                <div style="font-size: 18px; color: #333; font-weight: bold;">{{ statistics[item.name] || '0' }}</div>
-                <span style="font-size: 13px; color: #666;">{{ item.label }}</span>
-              </div>
-            </div>
-            <div class="topTip">推荐好友入职得赏金/积分</div>
-            <!-- 数据 -->
-            <div class="dataBox" v-for="(item, index) in dataList" :key="index">
-              <v-img class="float-left" :src="item.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'" :width="30" :height="30"></v-img>
-              <span class="dataBox-name">{{ item.anotherName }}</span>
-              <span class="dataBox-address">{{ item.areaName }}</span>
-            </div>
-          </div>
-        </div>
-        <!-- 滚动区域 -->
-        <div class="pa-3 white-bgc" style="height: 300px; border-radius: 5px; width: 360px;">
-          滚动区域
-        </div>
+      <div v-if="tab === 1">
+        <myRecommendation></myRecommendation>
       </div>
       <!-- 我的报名 -->
       <div v-if="tab === 2" class="pa-3 white-bgc" style="min-height: 500px; border-radius: 5px;">
-        <span>456</span>
+        <myRegistration></myRegistration>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import myRecommendation from './components/myRecommendation.vue'
+import myRegistration from './components/myRegistration.vue'
 import { ref } from 'vue'
 defineOptions({name: 'personal-myPublicRecruitment-index'})
 
-// 数据统计
-const statistics = ref({ statisticsA: '3', statisticsB: '7', statisticsC: '5', statisticsD: '2', statisticsE: '1' })
-const statisticsList = ref([
-  { count: '', label: '已报名', name: 'statisticsA' },
-  { count: '', label: '已过筛', name: 'statisticsB' },
-  { count: '', label: '已过面', name: 'statisticsC' },
-  { count: '', label: '已入职', name: 'statisticsD' },
-  { count: '', label: '已结算', name: 'statisticsE' }
-])
-
 const tab = ref(1)
 const getPositionList = () => {}
-const dataList = ref([
-  { anotherName: '132' }
-])
 </script>
 <style lang="scss" scoped>
-.topTip {
-  color: #999;
-  // margin-left: 20px;
-  font-size: 14px;
-  padding: 5px 10px;
-  width: 100%;
-  // background-color: var(--default-bgc);
-}
-.statisticsBox {
-  display: flex;
-  justify-content: space-around;
-  border-radius: 10px;
-  text-align: center;
-  padding: 10px 0;
-  background-color: var(--default-bgc);
-  .statisticsBox-item {
-    cursor: pointer;
-    &:hover {
-      div, span { color: var(--v-primary-base) !important; }
-    }
-  }
-}
-.dataBox {
-  height: 40px;
-  line-height: 30px;
-  margin-top: 8px;
-  .dataBox-name {
-    width: 120px;
-    display: inline-block;
-    max-width: 120px;
-    vertical-align: middle;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    color: #666;
-    font-size: 13px;
-    margin-left: 5px;
-    &:hover {
-      color: var(--v-primary-base);
-    }
-  }
-  .dataBox-address {
-    color: #555;
-    font-size: 13px;
-  }
-}
 </style>