积分兑换

src/layout/company/navBar.vue

@@ -13,7 +13,7 @@
         </div>
         
         <div class="d-flex user-nav">
-          <a href="/enterprise/purchasePackage" class="cursor-pointer mr-15" style="font-size: 15px;color: #FB8C00;line-height: 40px;">{{ $t('sys.purchasePackage') }}</a>
+          <a href="/enterprise/purchasePackage" class="cursor-pointer mr-15" style="font-size: 15px;color: #FB8C00;line-height: 40px;">{{ $t('vipPackage.purchasePackage') }}</a>
           <div class="d-flex align-center cursor-pointer" @click="handleEnterpriseClick">
             <v-img @click="enterpriseClick(2)" rounded width="40" height="40" :src="baseInfo?.logoUrl || 'https://minio.citupro.com/dev/menduner/7.png'" ></v-img>
             <span @click="enterpriseClick(1)" class="ml-3">{{ baseInfo?.enterpriseName || $t('sys.tourist') }}</span>

src/layout/personal/navBar.vue

@@ -37,7 +37,7 @@
           
           <!-- 头像用户名 -->
           <div class="d-flex align-center" v-if="getToken()">
-            <a href="/purchasePackage" class="cursor-pointer mr-5" style="color: #FB8C00;">{{ $t('sys.purchasePackage') }}</a>
+            <a href="/purchasePackage" class="cursor-pointer mr-5" style="color: #FB8C00;">{{ $t('vipPackage.purchasePackage') }}</a>
             <span class="cursor-pointer">{{ $t('sys.news') }}</span>
             <span class="cursor-pointer ml-5" @click="router.push({ path: '/personalTaskCenter' })">{{ $t('sys.signIn') }}</span>
             <v-menu open-on-hover>

src/locales/en.js

@@ -72,7 +72,6 @@ export default {
       errMsg901: 'Demo mode, no write operations are possible!'
     },
     tourist: 'Tourist',
-    purchasePackage: 'Purchase Package',
     news: 'News',
     signIn: 'Sign in',
     lookingJob: 'Looking For Job',
@@ -236,7 +235,6 @@ export default {
     dailyTask: 'Daily tasks',
   },
   publicRecruitment: {
-    // 众聘
     publicRecruitment: 'Public Recruitment',
     myPR: 'Public Recruitment',
     myRecommendation: 'My recommendation',
@@ -249,5 +247,9 @@ export default {
     pay: 'Pay',
     exchange: 'Exchange of points',
     exchangeRecords: 'Exchange records',
+  },
+  vipPackage: {
+    purchasePackage: 'Purchase Package',
+    buyNow: 'BUY NOW',
   }
 }

src/locales/zh-CN.js

@@ -72,7 +72,6 @@ export default {
       errMsg901: '演示模式，无法进行写操作!'
     },
     tourist: '游客',
-    purchasePackage: '购买套餐',
     news: '消息',
     signIn: '签到',
     lookingJob: '我要找工作',
@@ -236,7 +235,6 @@ export default {
     dailyTask: '每日任务',
   },
   publicRecruitment: {
-    // 众聘
     publicRecruitment: '众聘',
     myPR: '赏金与积分',
     myRecommendation: '我的推荐',
@@ -249,5 +247,9 @@ export default {
     pay: '支出',
     exchange: '积分兑换',
     exchangeRecords: '积分兑换记录',
+  },
+  vipPackage: {
+    purchasePackage: '购买套餐',
+    buyNow: '立即购买',
   }
 }

src/views/personal/pointsMall/exchange.vue

@@ -2,16 +2,39 @@
 <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;">
+      <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>
+  </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'})
 
@@ -31,6 +54,31 @@ const getData = () => {
   ]
 }
 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 {
@@ -40,4 +88,20 @@ getData()
 .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>