我的积分

src/locales/en.js

@@ -217,9 +217,15 @@ export default {
     switchToRecruit: 'Switch to Recruiter'
   },
   publicRecruitment: {
+    // 众聘
     publicRecruitment: 'Public Recruitment',
     myPR: 'Public Recruitment',
     myRecommendation: 'My recommendation',
     myRegistration: 'My registration',
+    // 积分
+    whole: 'Whole',
+    In: 'In',
+    freezing: 'Freezing',
+    Pay: 'Pay',
   }
 }

src/locales/zh-CN.js

@@ -217,9 +217,15 @@ export default {
     switchToRecruit: '切换为招聘者'
   },
   publicRecruitment: {
+    // 众聘
     publicRecruitment: '众聘',
     myPR: '赏金与积分', // 我的众聘
     myRecommendation: '我的推荐',
     myRegistration: '我的积分',
+    // 积分
+    whole: '全部',
+    In: '收入',
+    freezing: '冻结',
+    Pay: '支出',
   }
 }

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

@@ -0,0 +1,41 @@
+<template>
+  <v-data-table
+    class="mt-3"
+    v-model="selected"
+    :items="items"
+    :headers="headers"
+    hover
+    height="60vh"
+    item-value="id"
+  >
+    <template #bottom></template>
+  </v-data-table>
+</template>
+
+<script setup>
+defineOptions({ name: 'myRegistration-integralTable'})
+import { ref } from 'vue'
+defineProps({
+  tab: String,
+  items: Array
+})
+
+
+const selected = ref([])
+const headers = [
+  { title: '积分类型', key: '积分类型' },
+  { title: '时间', key: '时间' },
+  { 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

@@ -11,7 +11,7 @@
         <myRecommendation></myRecommendation>
       </div>
       <!-- 我的积分 -->
-      <div v-if="tab === 2" class="pa-3 white-bgc" style="min-height: 500px; border-radius: 5px;">
+      <div v-if="tab === 2" class="pa-3 white-bgc" style="min-height: 600px; border-radius: 5px;">
         <myRegistration></myRegistration>
       </div>
     </div>

src/views/personal/myPublicRecruitment/myRegistration.vue

@@ -1,10 +1,62 @@
 <!-- 我的积分 -->
 <template>
-  <div>我的积分</div>
+  <div>
+    <div class="statisticsBox">
+      <div class="mt-2">
+        <span style="font-size: 20px; color: #333; line-height: 28px; font-weight: bold;" class="ml-10">您当前赚取积分</span>
+        <span style="font-size: 14px; color: #777; line-height: 24px; cursor: pointer;" class="ml-2">积分规则</span>
+      </div>
+      <div class="d-flex justify-space-between align-end my-1">
+        <span style="font-size: 42px; color: #ff9300; line-height: 50px;" class="ml-10">{{ integral }}</span>
+        <span style="font-size: 16px; color: #787d82; line-height: 24px;" class="mr-8">
+          积分土豪的都喜欢来这里，
+          <span style="color: #ff7802; cursor: pointer;">积分商城</span>
+        </span>
+      </div>
+    </div>
+    <!-- 数据 -->
+    <!-- <div class="d-flex mt-3"></div> -->
+    <div class="mt-3">
+      <v-tabs v-model="tab" style="border-radius: 5px;" align-tabs="start" color="primary" bg-color="#f7f8fa" @update:model-value="handleChangeTab">
+        <v-tab :value="1"> {{ $t('publicRecruitment.whole') }}</v-tab>
+        <v-tab :value="2"> {{ $t('publicRecruitment.In') }}</v-tab>
+        <v-tab :value="3"> {{ $t('publicRecruitment.freezing') }}</v-tab>
+        <v-tab :value="4"> {{ $t('publicRecruitment.Pay') }}</v-tab>
+      </v-tabs>
+      <TablePage :items="dataList"></TablePage>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import TablePage from './components/integralTable.vue'
+import { ref } from 'vue'
 defineOptions({name: 'personal-myPublicRecruitment-myRegistration'})
+const integral = '135'
+const tab = ref(0)
+const dataList = ref([])
+// 数据
+const getData = () => {
+  dataList.value = [
+    { 积分类型: '积分签到', 时间: '2024-06-20 20:00', 积分: '5', },
+    { 积分类型: '积分到期', 时间: '2024-06-21 00:00', 积分: '-100', },
+    { 积分类型: '浏览积分', 时间: '2024-06-21 00:00', 积分: '15', },
+    { 积分类型: '浏览职业分析报告', 时间: '2024-06-21 00:00', 积分: '-20', },
+  ]
+}
+getData()
+// 切换
+const handleChangeTab = () => {
+  // tab
+  // getData()
+}
 </script>
 <style lang="scss" scoped>
+.statisticsBox {
+  padding: 10px 0;
+  border-radius: 10px;
+  background-color: var(--default-bgc);
+  // background-color: #f3f3f3;
+  // font-family: 宋体, SimSun;
+}
 </style>