积分管理

src/layout/personal/navBar.vue

@@ -189,7 +189,8 @@ const items = ref([
   { title: t('resume.onlineResume'), icon: 'mdi-list-box-outline', change: () => router.push({ path: '/resume' }) },
   { title: t('setting.accountSettings'), icon: 'mdi-cog-outline', change: () => router.push({ path: '/personalAccount/accountBinding' }) },
   { title: t('setting.switchToRecruit'), icon: 'mdi-swap-horizontal', change: changeLoginType },
-  { title: t('publicRecruitment.myPR'), icon: 'mdi-google-circles-extended', change: () => router.push({ path: '/myPublicRecruitment' }) },
+  { title: t('publicRecruitment.bountyRewards'), icon: 'mdi-google-circles-extended', change: () => router.push({ path: '/myPublicRecruitment' }) },
+  { title: t('points.pointsManagement'), icon: ' mdi-database-outline', change: () => router.push({ path: '/pointsManagement' }) },
   { title: t('taskCenter.taskCenter'), icon: 'mdi-calendar-check-outline', change: () => router.push({ path: '/personalTaskCenter' }) },
   { title: t('setting.logOut'), icon: 'mdi-logout', change: handleLogout }
 ])

src/locales/en.js

@@ -234,13 +234,18 @@ export default {
     suggestTask: 'Recommended tasks',
     dailyTask: 'Daily tasks',
   },
+  // 众聘
   publicRecruitment: {
     publicRecruitment: 'Public Recruitment',
-    myPR: 'Public Recruitment',
+    bountyRewards: 'Bounty rewards',
     myRecommendation: 'My recommendation',
-    myRegistration: 'My registration',
+    withdrawalRecords: 'Withdrawal records',
   },
+  // 积分
   points: {
+    pointsManagement: 'Points Management',
+    pointsDetails: 'Points details',
+    pointsMall: 'Points Mall',
     whole: 'Whole',
     In: 'In',
     freezing: 'Freezing',

src/locales/zh-CN.js

@@ -234,13 +234,18 @@ export default {
     suggestTask: '推荐任务',
     dailyTask: '每日任务',
   },
+  // 众聘
   publicRecruitment: {
     publicRecruitment: '众聘',
-    myPR: '赏金与积分',
+    bountyRewards: '赏金奖励',
     myRecommendation: '我的推荐',
-    myRegistration: '积分明细',
+    withdrawalRecords: '提现记录',
   },
+  // 积分
   points: {
+    pointsManagement: '积分管理',
+    pointsDetails: '积分明细',
+    pointsMall: '积分商城',
     whole: '全部',
     In: '收入',
     freezing: '冻结',

src/router/modules/personal.js

@@ -107,14 +107,31 @@ const personal = [
     component: Layout,
     name: 'myPublicRecruitment',
     meta: {
-      title: '赏金与积分'
+      title: '赏金奖励'
     },
     children: [
       {
         path: '/myPublicRecruitment',
         component: () => import('@/views/personal/myPublicRecruitment/index'),
         meta: {
-          title: '赏金与积分'
+          title: '赏金奖励'
+        },
+      }
+    ]
+  },
+  {
+    path: '/pointsManagement',
+    component: Layout,
+    name: 'personalPointsManagement',
+    meta: {
+      title: '积分管理'
+    },
+    children: [
+      {
+        path: '/pointsManagement',
+        component: () => import('@/views/personal/pointsManagement/index'),
+        meta: {
+          title: '积分管理'
         },
       }
     ]

src/views/personal/components/integralShow.vue

@@ -2,14 +2,23 @@
 <template>
   <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: 20px; color: #333; line-height: 28px; font-weight: bold;" class="ml-10">{{ props.title }}</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: #10897bba; line-height: 50px;" class="ml-10 cursor-pointer" @click="router.push({ path: '/myPublicRecruitment', query: { tab: 2 } })">{{ integral }}</span>
+      <span style="font-size: 42px; color: #10897bba; line-height: 50px;" class="ml-10 cursor-pointer" @click="router.push({ path: '/pointsManagement', query: { tab: 2 } })">{{ integral }}</span>
       <span style="font-size: 16px; color: #787d82; line-height: 24px;" class="mr-8">
-        积分土豪的都喜欢来这里，
-        <span style="color: #10897be8; cursor: pointer;" @click="router.push({ path: '/pointsMall'})">积分商城</span>
+        <!-- 积分商城 -->
+        <template v-if="props.showMall">
+          <span>积分土豪的都喜欢来这里，</span>
+          <!-- <span style="color: #10897be8; cursor: pointer;" @click="router.push({ path: '/pointsMall'})">积分商城</span> -->
+          <span style="color: #10897be8; cursor: pointer;" @click="router.push({ path: '/pointsManagement'})">积分商城</span>
+        </template>
+        <!-- 任务中心 -->
+        <template v-if="props.taskCenter">
+          <span style=" color: var(--v-primary-base); cursor: pointer;" @click="router.push({ path: '/personalTaskCenter' })">赚取积分</span>
+          <!-- <span style="color: #10897be8; cursor: pointer;" @click="router.push({ path: '/personalTaskCenter' })">《<span style=" color: var(--v-primary-base);">任务中心</span>》</span> -->
+        </template>
       </span>
     </div>
   </div>
@@ -18,6 +27,20 @@
 <script setup>
 import { useRouter } from 'vue-router'; const router = useRouter()
 defineOptions({name: 'myRegistration-integralShow'})
+const props = defineProps({
+  title: {
+    type: String,
+    default: '您当前赚取积分'
+  },
+  showMall: {
+    type: Boolean,
+    default: true
+  },
+  taskCenter: {
+    type: Boolean,
+    default: false
+  },
+})
 const integral = '135'
 </script>
 <style lang="scss" scoped>

src/views/personal/myPublicRecruitment/index.vue

@@ -3,7 +3,7 @@
   <div class="default-width py-3">
     <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList">
       <v-tab :value="1">{{ $t('publicRecruitment.myRecommendation') }}</v-tab>
-      <v-tab :value="2">{{ $t('publicRecruitment.myRegistration') }}</v-tab>
+      <v-tab :value="2">{{ $t('publicRecruitment.withdrawalRecords') }}</v-tab>
     </v-tabs>
     <div class="mt-3">
       <!-- 我的推荐 -->
@@ -11,8 +11,8 @@
         <myRecommendation></myRecommendation>
       </div>
       <!-- 积分明细 -->
-      <div v-if="tab === 2" class="pa-3 white-bgc" style="min-height: 600px; border-radius: 5px;">
-        <myRegistration></myRegistration>
+      <div v-if="tab === 2" class="pa-3 white-bgc" style="border-radius: 5px;">
+        <!-- <myRegistration></myRegistration> -->
       </div>
     </div>
   </div>
@@ -20,7 +20,7 @@
 
 <script setup>
 import myRecommendation from './myRecommendation.vue'
-import myRegistration from './myRegistration.vue'
+// import myRegistration from './myRegistration.vue'
 import { useRoute } from 'vue-router'; const route = useRoute()
 import { useRouter } from 'vue-router'; const router = useRouter()
 import { ref } from 'vue'

src/views/personal/myPublicRecruitment/myRecommendation.vue

@@ -1,7 +1,7 @@
 <!-- 我的推荐 -->
 <template>
   <div class="d-flex">
-    <div class="pa-3 mr-3 white-bgc" style="min-height: 762px; border-radius: 5px; flex: 1;">
+    <div class="pa-3 mr-3 white-bgc" style="border-radius: 5px; flex: 1;">
       <div style="width: 100%;">
         <!-- 统计 -->
         <div class="statisticsBox">

src/views/personal/pointsMall/index.vue

@@ -37,7 +37,7 @@ defineOptions({name: 'personal-pointsMall'})
 const integral = '135'
 
 const toPointsDetails = () => {
-  router.push({ path: '/myPublicRecruitment', query: { tab: 2 } })
+  router.push({ path: '/pointsManagement', query: { tab: 2 } })
 }
 
 const tab = ref(+route.query?.tab || 1)

src/views/personal/pointsManagement/components/exchange.vue

@@ -0,0 +1,109 @@
+<!-- 积分兑换 -->
+<template>
+  <div class="listBox">
+    <div v-for="(item, index) in dataList" :key="'exchange' + index">
+      <div class="cursor-pointer mx-5 mb-4" style="width: 180px;" @click="handleShowDetail(item)">
+        <v-img width="180" height="180" :src="item.图片 || 'https://minio.citupro.com/dev/menduner/7.png'"></v-img>
+        <div class="ellipsis mt-2" style="font-size: 14px;">{{ item.物品名称 }}</div>
+        <div class="ellipsis mt-1" style="font-size: 13px;">消耗积分<span class="ml-1" style="color: var(--v-primary-base)">{{ item.消耗积分 }}</span></div>
+      </div>
+    </div>
+  </div>
+  <Dialog :visible="showDetail" titleClass="text-h6" :widthType="3" title="详情说明" @submit="handleSubmit" @close="showDetail = false">
+    <div>
+      <!-- <span style="font-size: 15px;">物品名称：</span> -->
+      <span style="font-size: 14px;color: red;">{{ detailItem.物品名称 }}</span>
+    </div>
+    <div class="tips">
+      <div>使用规则：</div>
+      <span>兑换时，优先使用即将到期积分进行兑换</span>
+      <div>使用时间：</div>
+      <span>使用时间为当前招聘通期限内都可以使用， 超出当前招聘通期限不可以使用</span>
+      <div>使用说明：</div>
+      <span>积分一经兑换概不退回，敬请谅解。</span>
+    </div>
+    <div class="d-flex align-center my-5">
+      <div class="mr-5">兑换数量</div>
+      <textUI class="mr-5" v-model="num" :item="textItem" @change="handleChange"></textUI>
+      <div class="mr-1">消耗积分</div>
+      <div style="color: var(--v-primary-base);">{{ (detailItem.消耗积分- 0)*num }}</div>
+    </div>
+    <div v-if="(detailItem.消耗积分- 0)*num > 135" style="font-size: 14px;color: red;">积分不足，快去赚取积分吧</div>
+  </Dialog>
+</template>
+
+<script setup>
+import Dialog from '@/components/CtDialog'
+import textUI from '@/components/FormUI/TextInput'
+// import Snackbar from '@/plugins/snackbar'
+import { ref } from 'vue'
+defineOptions({name: 'pointsMall-exchange'})
+
+// 数据
+const dataList = ref([])
+const getData = () => {
+  dataList.value = [
+    { 物品名称: '掼蛋文娱套装·茶牌款', 消耗积分: '29888', 图片: 'http://www.51lip.com/public/images/17/64/c2/bd52d2072e4304a43d383069fe63d15cb12fddf6.jpg' },
+    { 物品名称: '户外两键无绳跳绳大球+羽毛球拍+抽象几何飞盘运动套装', 消耗积分: '18888', 图片: 'http://www.51lip.com/public/images/72/9b/de/42d8056bdd889217793f84cb68936d5682ea72dc.png' },
+    { 物品名称: '懒人挂脖风扇', 消耗积分: '8888', 图片: 'http://www.51lip.com/public/images/34/fb/dd/dfc8757b4204fc79352490478e6be8ae71fd748a.jpg' },
+    { 物品名称: '艾优 全自动防水成人声波电动牙刷T11-A', 消耗积分: '12888', 图片: 'http://www.51lip.com/public/images/68/0a/f4/53d5f128b19d22c04ed4538360ae0db0a388f5f8.jpg' },
+    { 物品名称: 'ApiYoo艾优成人声波电动牙刷T1-A-F', 消耗积分: '19888', 图片: 'http://www.51lip.com/public/images/07/4c/e3/0917d02b646e9a5eeec427f70197d4915007ddbe.jpg' },
+    { 物品名称: '幻响小宜多功能照明灯 led台灯', 消耗积分: '88888', 图片: 'http://www.51lip.com/public/images/2e/75/36/6c6fae90c1e7cf134a704dbcb917d2bdc9ac2805.jpg' },
+    { 物品名称: '眼罩颈枕', 消耗积分: '10080', 图片: 'http://www.51lip.com/public/images/2f/e1/99/1a861d35c0e7358633f548d6f142b92d5ec2f6cb.jpg' },
+    { 物品名称: 'PGG 腰果按摩枕W8', 消耗积分: '25000', 图片: 'http://www.51lip.com/public/images/f0/66/e2/6f9b0b756352324af411e4e4b36fed9f71c078d9.jpg' },
+    { 物品名称: '现代酒店管理实用教程电子书', 消耗积分: '100', 图片: 'https://img2.baidu.com/it/u=153650066,2494782747&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=704' },
+    // { 物品名称: '星巴克美式一杯', 消耗积分: '500', 图片: 'https://file-ve.veimg.cn/files/2024/05/2024052714240147ow0eijdnjxg.jpg' },
+  ]
+}
+getData()
+
+// 详情说明弹窗
+const showDetail = ref(false)
+const detailItem = ref(null)
+const handleShowDetail = (item) =>{
+  detailItem.value = item
+  showDetail.value = true
+}
+
+// 兑换提交
+const handleSubmit = async () =>{
+}
+
+// 兑换数量
+const num = ref(1)
+const textItem = ref({
+  type: 'number',
+  value: num.value,
+  width: 80,
+  hideDetails: true,
+  // density: 'compact',
+  // label: '请输入自定义标签',
+})
+const handleChange = async () =>{
+}
+</script>
+<style lang="scss" scoped>
+.listBox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.ellipsis {
+  width: 100%;
+}
+.tips {
+  margin-top: 20px;
+  padding: 12px 20px;
+  border-radius: 5px;
+  background-color: var(--default-bgc);
+  // width: 400px;
+  div {
+    font-size: 15px;
+    margin-bottom: 4px;
+  }
+  span {
+    display: inline-block;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+}
+</style>

src/views/personal/pointsManagement/components/exchangeRecords.vue

@@ -0,0 +1,27 @@
+<!-- 积分兑换记录 -->
+<template>
+  <div>
+    <TablePage :items="dataList"></TablePage>
+  </div>
+</template>
+
+<script setup>
+import TablePage from './exchangeRecordsTable.vue'
+import { ref } from 'vue'
+defineOptions({name: 'pointsMall-exchangeRecords'})
+
+// 数据
+const dataList = ref([])
+const getData = () => {
+  dataList.value = [
+    { 兑换物品: '刷新简历1次体验卡', 兑换时间: '2024-06-20 20:00', 消耗积分: '500' },
+    { 兑换物品: '会员3天体验卡', 兑换时间: '2024-06-20 00:00', 消耗积分: '1000' },
+    { 兑换物品: '主动打招呼加量包(15次包)', 兑换时间: '2024-06-21 09:05', 消耗积分: '1500' },
+    { 兑换物品: '职业分析报告1次体验卡', 兑换时间: '2024-06-22 10:27', 消耗积分: '600' },
+    { 兑换物品: '星巴克美式一杯', 兑换时间: '2024-06-22 10:27', 消耗积分: '2000' },
+  ]
+}
+getData()
+</script>
+<style lang="scss" scoped>
+</style>

src/views/personal/pointsManagement/components/exchangeRecordsTable.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/pointsManagement/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/pointsManagement/index.vue

@@ -0,0 +1,40 @@
+<!-- 积分管理 -->
+<template>
+  <div class="default-width">
+    <div class="pa-3 mb-2 white-bgc">
+      <integralShow :showMall="false" :taskCenter="true" :title="descriptiveTitle"></integralShow>
+    </div>
+    <div>
+      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList">
+        <v-tab :value="1">{{ $t('points.pointsMall') }}</v-tab>
+        <v-tab :value="2">{{ $t('points.pointsDetails') }}</v-tab>
+      </v-tabs>
+    </div>
+    <div class="mt-3 white-bgc pa-3 pt-1">
+      <div v-if="tab === 2">
+        <pointsDetails></pointsDetails>
+      </div>
+      <div v-if="tab === 1" class="pt-5">
+        <pointsMall></pointsMall>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import pointsDetails from './pointsDetails.vue'
+import pointsMall from './pointsMall.vue'
+import integralShow from '@/views/personal/components/integralShow.vue'
+import { useRoute } from 'vue-router'; const route = useRoute()
+import { useRouter } from 'vue-router'; const router = useRouter()
+import { ref } from 'vue'
+defineOptions({name: 'personal-pointsManagement-index'})
+const tab = ref(+route.query?.tab || 1)
+const getPositionList = () => {
+  if (route.query) router.replace({ path: route.path }) // 不留记录的清除跳转带过来的参数
+}
+const descriptiveTitle = '您当前可用积分'
+</script>
+<style lang="scss" scoped>
+</style>
+

src/views/personal/pointsManagement/pointsDetails.vue

@@ -0,0 +1,39 @@
+<!-- 积分明细 -->
+<template>
+  <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('points.whole') }}</v-tab>
+      <v-tab :value="2"> {{ $t('points.In') }}</v-tab>
+      <v-tab :value="3"> {{ $t('points.freezing') }}</v-tab>
+      <v-tab :value="4"> {{ $t('points.pay') }}</v-tab>
+    </v-tabs>
+    <TablePage  :items="dataList"></TablePage>
+  </div>
+</template>
+
+<script setup>
+import TablePage from './components/integralTable.vue'
+import { ref } from 'vue'
+defineOptions({name: 'personal-pointsManagement-pointsDetails'})
+const tab = ref(0)
+
+// 数据
+const dataList = ref([])
+const getData = () => {
+  dataList.value = [
+    { 积分类型: '积分签到', 时间: '2024-06-20 20:00', 积分: '5' },
+    { 积分类型: '积分到期', 时间: '2024-06-20 00:00', 积分: '-100' },
+    { 积分类型: '浏览积分', 时间: '2024-06-21 09:05', 积分: '15' },
+    { 积分类型: '浏览职业分析报告', 时间: '2024-06-22 10:27', 积分: '-20' },
+  ]
+}
+getData()
+
+// 切换
+const handleChangeTab = () => {
+  // tab
+  // getData()
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/views/personal/pointsManagement/pointsMall.vue

@@ -0,0 +1,16 @@
+<!-- 积分商城 -->
+<template>
+  <exchange></exchange>
+</template>
+
+<script setup>
+import exchange from './components/exchange.vue'
+defineOptions({name: 'personal-pointsManagement-pointsMall'})
+</script>
+<style lang="scss" scoped>
+.statisticsBox {
+  padding: 10px 0;
+  border-radius: 10px;
+  background-color: var(--default-bgc);
+}
+</style>