积分兑换记录

src/locales/en.js

@@ -247,7 +247,7 @@ export default {
     In: 'In',
     freezing: 'Freezing',
     pay: 'Pay',
-    Exchange: 'Exchange of points',
-    ExchangeRecords: 'Exchange records',
+    exchange: 'Exchange of points',
+    exchangeRecords: 'Exchange records',
   }
 }

src/locales/zh-CN.js

@@ -247,7 +247,7 @@ export default {
     In: '收入',
     freezing: '冻结',
     pay: '支出',
-    Exchange: '积分兑换',
-    ExchangeRecords: '兑换记录',
+    exchange: '积分兑换',
+    exchangeRecords: '积分兑换记录',
   }
 }

src/views/personal/myPublicRecruitment/myRegistration.vue

@@ -24,8 +24,9 @@ import { useRouter } from 'vue-router'; const router = useRouter()
 import { ref } from 'vue'
 defineOptions({name: 'personal-myPublicRecruitment-myRegistration'})
 const tab = ref(0)
-const dataList = ref([])
+
 // 数据
+const dataList = ref([])
 const getData = () => {
   dataList.value = [
     { 积分类型: '积分签到', 时间: '2024-06-20 20:00', 积分: '5' },
@@ -35,6 +36,7 @@ const getData = () => {
   ]
 }
 getData()
+
 // 切换
 const handleChangeTab = () => {
   // tab

src/views/personal/pointsMall/components/table.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/pointsMall/exchange.vue

@@ -0,0 +1,10 @@
+<!-- 积分兑换 -->
+<template>
+  <div>vue3PageInit</div>
+</template>
+
+<script setup>
+defineOptions({name: 'pointsMall-exchange'})
+</script>
+<style lang="scss" scoped>
+</style>

src/views/personal/pointsMall/exchangeRecords.vue

@@ -0,0 +1,27 @@
+<!-- 积分兑换记录 -->
+<template>
+  <div>
+    <TablePage :items="dataList"></TablePage>
+  </div>
+</template>
+
+<script setup>
+import TablePage from './components/table.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/pointsMall/index.vue

@@ -10,24 +10,26 @@
         <span style="font-size: 42px; color: #10897bba; line-height: 50px;" class="ml-10 cursor-pointer" @click="toPointsDetails">{{ integral }}</span>
       </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.Exchange') }}</v-tab>
-      <v-tab :value="2">{{ $t('points.ExchangeRecords') }}</v-tab>
+    <v-tabs v-model="tab" class="mt-1" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList">
+      <v-tab :value="1">{{ $t('points.exchange') }}</v-tab>
+      <v-tab :value="2">{{ $t('points.exchangeRecords') }}</v-tab>
     </v-tabs>
     <div class="mt-3">
-      <!-- 我的推荐 -->
+      <!-- 积分兑换 -->
       <div v-if="tab === 1">
-        <!-- <myRecommendation></myRecommendation> -->
+        <exchange></exchange>
       </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">
+        <exchangeRecords></exchangeRecords>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import exchange from './exchange.vue'
+import exchangeRecords from './exchangeRecords.vue'
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'; const route = useRoute()
 import { useRouter } from 'vue-router'; const router = useRouter()
@@ -38,7 +40,7 @@ const toPointsDetails = () => {
   router.push({ path: '/myPublicRecruitment', query: { tab: 2 } })
 }
 
-const tab = ref(+route.query?.tab || 1)
+const tab = ref(+route.query?.tab || 2)
 </script>
 <style lang="scss" scoped>
 .statisticsBox {