Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/locales/en.js

@@ -241,10 +241,13 @@ export default {
     myPR: 'Public Recruitment',
     myRecommendation: 'My recommendation',
     myRegistration: 'My registration',
-    // 积分
+  },
+  points: {
     whole: 'Whole',
     In: 'In',
     freezing: 'Freezing',
-    Pay: 'Pay',
+    pay: 'Pay',
+    exchange: 'Exchange of points',
+    exchangeRecords: 'Exchange records',
   }
 }

src/locales/zh-CN.js

@@ -241,10 +241,13 @@ export default {
     myPR: '赏金与积分',
     myRecommendation: '我的推荐',
     myRegistration: '积分明细',
-    // 积分
+  },
+  points: {
     whole: '全部',
     In: '收入',
     freezing: '冻结',
-    Pay: '支出',
+    pay: '支出',
+    exchange: '积分兑换',
+    exchangeRecords: '积分兑换记录',
   }
 }

src/router/modules/personal.js

@@ -162,7 +162,7 @@ const personal = [
     },
     children: [
       {
-        path: '/purchasePackage',
+        path: '/pointsMall',
         component: () => import('@/views/personal/pointsMall/index'),
         meta: {
           title: '积分商城'

src/views/enterprise/memberCenter/myPoints/index.vue

@@ -7,10 +7,10 @@
     <!-- 积分明细 -->
     <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-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>

src/views/personal/myPublicRecruitment/myRegistration.vue

@@ -7,10 +7,10 @@
     <!-- 积分明细 -->
     <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-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>
@@ -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,43 @@
+<!-- 积分兑换 -->
+<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;">
+        <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>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+defineOptions({name: 'pointsMall-exchange'})
+
+// 数据
+const dataList = ref([])
+const getData = () => {
+  dataList.value = [
+    { 物品名称: '掼蛋文娱套装·茶牌款', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/17/64/c2/bd52d2072e4304a43d383069fe63d15cb12fddf6.jpg' },
+    { 物品名称: '户外两键无绳跳绳大球+羽毛球拍+抽象几何飞盘运动套装', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/72/9b/de/42d8056bdd889217793f84cb68936d5682ea72dc.png' },
+    { 物品名称: '懒人挂脖风扇', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/34/fb/dd/dfc8757b4204fc79352490478e6be8ae71fd748a.jpg' },
+    { 物品名称: '艾优 全自动防水成人声波电动牙刷T11-A', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/68/0a/f4/53d5f128b19d22c04ed4538360ae0db0a388f5f8.jpg' },
+    { 物品名称: 'ApiYoo艾优成人声波电动牙刷T1-A-F', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/07/4c/e3/0917d02b646e9a5eeec427f70197d4915007ddbe.jpg' },
+    { 物品名称: '幻响小宜多功能照明灯 led台灯', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/2e/75/36/6c6fae90c1e7cf134a704dbcb917d2bdc9ac2805.jpg' },
+    { 物品名称: '眼罩颈枕', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/2f/e1/99/1a861d35c0e7358633f548d6f142b92d5ec2f6cb.jpg' },
+    { 物品名称: 'PGG 腰果按摩枕W8', 消耗积分: '500', 图片: 'http://www.51lip.com/public/images/f0/66/e2/6f9b0b756352324af411e4e4b36fed9f71c078d9.jpg' },
+    // { 物品名称: '星巴克美式一杯', 消耗积分: '500', 图片: 'https://file-ve.veimg.cn/files/2024/05/2024052714240147ow0eijdnjxg.jpg' },
+  ]
+}
+getData()
+</script>
+<style lang="scss" scoped>
+.listBox {
+  display: flex;
+  flex-wrap: wrap;
+}
+.ellipsis {
+  width: 100%;
+}
+</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

@@ -1,12 +1,53 @@
 <!-- 积分商城 -->
 <template>
-  <div>
-    积分商城
+  <div class="default-width white-bgc px-3 pt-5 pb-10">
+    <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" @click="toPointsDetails">积分明细</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="toPointsDetails">{{ integral }}</span>
+      </div>
+    </div>
+    <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-5">
+      <!-- 积分兑换 -->
+      <div v-if="tab === 1">
+        <exchange></exchange>
+      </div>
+      <!-- 积分兑换记录 -->
+      <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()
 defineOptions({name: 'personal-pointsMall'})
+const integral = '135'
+
+const toPointsDetails = () => {
+  router.push({ path: '/myPublicRecruitment', query: { tab: 2 } })
+}
+
+const tab = ref(+route.query?.tab || 1)
 </script>
 <style lang="scss" scoped>
+.statisticsBox {
+  padding: 10px 0;
+  border-radius: 10px;
+  background-color: var(--default-bgc);
+  // background-color: #f3f3f3;
+  // font-family: 宋体, SimSun;
+}
 </style>