积分兑换

components.d.ts

@@ -30,9 +30,9 @@ declare module 'vue' {
     DatePicker: typeof import('./src/components/DatePicker/index.vue')['default']
     Details: typeof import('./src/components/Enterprise/details.vue')['default']
     Echarts: typeof import('./src/components/Echarts/index.vue')['default']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
-    ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     Empty: typeof import('./src/components/Empty/index.vue')['default']
     File: typeof import('./src/components/Upload/file.vue')['default']
     HeadSearch: typeof import('./src/components/headSearch/index.vue')['default']

src/api/mall.js

@@ -0,0 +1,17 @@
+import request from '@/config/axios'
+
+// 提交积分商品兑换
+export const redeemSubmit = async (data) => {
+  return request.post({
+    url: '/app-api/menduner/system/redeem/submit',
+    data
+  })
+}
+
+// 获取兑换记录
+export const getRedeemPage = async (params) => {
+  return request.get({
+    url: '/app-api/menduner/system/redeem/page',
+    params
+  })
+}

src/views/mall/exchange.vue

@@ -3,85 +3,120 @@
   <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>
+        <v-img width="180" height="180" :src="item.url || 'https://minio.citupro.com/dev/menduner/7.png'"></v-img>
+        <div class="ellipsis mt-2" style="font-size: 14px;">{{ item.name }}</div>
+        <div class="ellipsis mt-1" style="font-size: 13px;">消耗积分<span class="ml-1" style="color: var(--v-primary-base)">{{ item.point }}</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>
+
+  <Dialog :visible="showDetail" titleClass="text-h6" :footer="point > detailItem?.point" :widthType="3" title="详情说明" @submit="handleSubmit" @close="showDetail = false">
+    <div class="color-primary font-size-20">{{ detailItem.name }}</div>
     <div class="tips">
-      <div>使用规则：</div>
-      <span>兑换时，优先使用即将到期积分进行兑换</span>
-      <div>使用时间：</div>
-      <span>使用时间为当前招聘通期限内都可以使用， 超出当前招聘通期限不可以使用</span>
-      <div>使用说明：</div>
-      <span>积分一经兑换概不退回，敬请谅解。</span>
+      <div>使用说明：积分一经兑换概不退回，敬请谅解。</div>
     </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 class="color-primary">{{ detailItem.point }}</div>
+    </div>
+    <div v-if="point > detailItem.point">
+      <div class="color-666 mb-5 mt-10">{{ detailItem?.type  ? '收货人信息填写' : '联系电话填写' }}</div>
+      <CtForm ref="CtFormRef" :items="formItems"></CtForm>
     </div>
-    <div v-if="(detailItem.消耗积分- 0)*num > 135" style="font-size: 14px;color: red;">积分不足，快去赚取积分吧</div>
+    <div v-if="point < detailItem.point" class="text-end color-error font-size-14 cursor-pointer text-decoration-underline" @click="emit('toTaskCenter')">积分不足，快去赚取积分吧</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: 'mall-exchange'})
+import { ref } from 'vue'
+import { getToken } from '@/utils/auth'
+import Dialog from '@/components/CtDialog'
+import Snackbar from '@/plugins/snackbar'
+import { redeemSubmit } from '@/api/mall'
+import { useUserStore } from '@/store/user'
 
-// 数据
-const dataList = ref([])
-const getData = () => {
-  dataList.value = [
-    { 物品名称: '房券', 消耗积分: '12000', 图片: 'http://www.51lip.com/public/images/17/64/c2/bd52d2072e4304a43d383069fe63d15cb12fddf6.jpg' },
-    { 物品名称: '门墩儿酒店英语学习年卡', 消耗积分: '8000', 图片: 'http://www.51lip.com/public/images/72/9b/de/42d8056bdd889217793f84cb68936d5682ea72dc.png' },
-    { 物品名称: '红酒', 消耗积分: '5000', 图片: 'http://www.51lip.com/public/images/34/fb/dd/dfc8757b4204fc79352490478e6be8ae71fd748a.jpg' },
-    { 物品名称: '瑞幸电子咖啡券', 消耗积分: '2000', 图片: 'http://www.51lip.com/public/images/68/0a/f4/53d5f128b19d22c04ed4538360ae0db0a388f5f8.jpg' },
-    { 物品名称: '减压捏捏乐', 消耗积分: '500', 图片: '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' },
+const emit = defineEmits(['login', 'toTaskCenter'])
+defineProps({
+  point: {
+    type: Number,
+    default: 0
+  }
+})
+
+const CtFormRef = ref()
+const formItems = ref({
+  options: [
+    {
+      type: 'text',
+      key: 'contactName',
+      value: localStorage.getItem('baseInfo') ? JSON.parse(localStorage.getItem('baseInfo')).name : '',
+      hide: false,
+      label: '收货人姓名 *',
+      rules: [v => !!v || '请输入收货人姓名'],
+    },
+    {
+      type: 'text',
+      key: 'contactPhone',
+      value: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).phone : '',
+      label: '收货人联系电话 *',
+      outlined: true,
+      rules: [v => !!v || '请填写收货人联系电话']
+    },
+    {
+      type: 'textarea',
+      key: 'contactAddress',
+      value: '先烈中路100号大院203室',
+      hide: false,
+      label: '收获详细地址 *',
+      rules: [v => !!v || '请填写收获详细地址']
+    }
   ]
-}
-getData()
+})
+
+// 数据
+const dataList = ref([
+  { name: '房券', point: 12000, url: 'http://www.51lip.com/public/images/17/64/c2/bd52d2072e4304a43d383069fe63d15cb12fddf6.jpg', type: 1 },
+  { name: '门墩儿酒店英语学习年卡', point: 8000, url: 'http://www.51lip.com/public/images/72/9b/de/42d8056bdd889217793f84cb68936d5682ea72dc.png', type: 0 },
+  { name: '红酒', point: 5000, url: 'http://www.51lip.com/public/images/34/fb/dd/dfc8757b4204fc79352490478e6be8ae71fd748a.jpg', type: 1 },
+  { name: '瑞幸电子咖啡券', point: 2000, url: 'http://www.51lip.com/public/images/68/0a/f4/53d5f128b19d22c04ed4538360ae0db0a388f5f8.jpg', type: 0 },
+  { name: '减压捏捏乐', point: 500, url: 'http://www.51lip.com/public/images/07/4c/e3/0917d02b646e9a5eeec427f70197d4915007ddbe.jpg', type: 1 }
+])
 
 // 详情说明弹窗
 const showDetail = ref(false)
-const detailItem = ref(null)
+const detailItem = ref({})
 const handleShowDetail = (item) =>{
+  if (!getToken()) {
+    Snackbar.warning('请先登录')
+    emit('login')
+    return
+  }
   detailItem.value = item
+  formItems.value.options.forEach(e => {
+    if (e.key !== 'contactPhone') e.hide = item.type ? false : true
+  })
   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 () =>{
+  const { valid } = await CtFormRef.value.formRef.validate()
+  if (!valid) return
+  const obj = {
+    ...detailItem.value
+  }
+  formItems.value.options.forEach(e => {
+    obj[e.key] = e.value
+  })
+  await redeemSubmit(obj)
+  Snackbar.success('提交成功')
+  showDetail.value = false
+  detailItem.value = {}
+  await useUserStore().getUserAccountInfo()
 }
 </script>
+
 <style lang="scss" scoped>
 .listBox {
   display: flex;

src/views/mall/exchangeRecords.vue

@@ -1,27 +1,56 @@
 <!-- 积分兑换记录 -->
 <template>
   <div>
-    <TablePage :items="dataList"></TablePage>
+    <CtTable
+      class="mt-3"
+      :items="dataList"
+      :headers="headers"
+      :loading="false"
+      :elevation="0"
+      :isTools="false"
+      :showPage="true"
+      :total="total"
+      :page-info="queryParams"
+      itemKey="id"
+      @pageHandleChange="handleChangePage"
+    >
+    </CtTable>
   </div>
 </template>
 
 <script setup>
-import TablePage from './components/table.vue'
-import { ref } from 'vue'
 defineOptions({name: 'mall-exchangeRecords'})
+import { ref } from 'vue'
+import { getRedeemPage } from '@/api/mall'
+import { getToken } from '@/utils/auth'
+
+const total = ref(0)
+const headers = [
+  { title: '商品名称', key: 'name', sortable: false },
+  { title: '消耗积分', key: 'point', sortable: false },
+  { title: '收货人姓名', key: 'contactName', sortable: false },
+  { title: '联系电话/收货人电话', key: 'contactPhone', sortable: false },
+  { title: '收货详细地址', key: 'contactAddress', sortable: false }
+]
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
 
 // 数据
 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' },
-  ]
+const getData = async () => {
+  const res  = await getRedeemPage(queryParams.value)
+  dataList.value = res.list
+  total.value = res.total
+}
+if (getToken()) getData()
+
+const handleChangePage = (e) => {
+  queryParams.value.pageNo = e
+  getData()
 }
-getData()
 </script>
+
 <style lang="scss" scoped>
 </style>

src/views/mall/index.vue

@@ -1,20 +1,21 @@
 <!-- 门墩儿商城 -->
  <template>
-  <div style="background-color: var(--default-bgc); height: 100vh; overflow-y: auto;">
-    <div class="default-width white-bgc px-3 pt-5 pb-10" style="min-height: 100vh;">
+  <div style="background-color: var(--default-bgc);">
+    <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: var(--color-333); line-height: 28px; font-weight: bold;" class="ml-10">您当前可用积分</span>
-          <span @click="toPointsDetails" style="cursor: pointer;">
+          <span v-if="getToken()" @click="toPointsDetails" style="cursor: pointer;">
             <span style="font-size: 14px; color: var(--color-666); line-height: 24px;" class="ml-2">积分明细</span>
             <v-icon style="font-size: 16px; color: var(--color-666); line-height: 16px; margin-left: 2px;">mdi-help-circle-outline</v-icon>
           </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">{{ accountData.point }}</span>
+          <span v-if="getToken()" style="font-size: 42px; color: #10897bba; line-height: 50px;" class="ml-10 cursor-pointer" @click="toPointsDetails">{{ accountData.point }}</span>
+          <span v-else style="font-size: 30px; line-height: 50px;" class="ml-10 cursor-pointer color-primary" @click="handleLogin">请先登录</span>
         </div>
+        <div v-if="getToken()" class="color-666 font-size-14 cursor-pointer text-end mr-5 commonHover" @click="handleToTaskCenter">赚取积分</div>
       </div>
-      <!-- <v-tabs v-model="tab" class="mt-1" align-tabs="start" color="primary" bg-color="#fff" @update:model-value="getPositionList()"> -->
       <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>
@@ -22,7 +23,7 @@
       <div class="mt-5">
         <!-- 积分兑换 -->
         <div v-if="tab === 1">
-          <exchange></exchange>
+          <exchange :point="accountData.point" @login="handleLogin" @toTaskCenter="handleToTaskCenter"></exchange>
         </div>
         <!-- 积分兑换记录 -->
         <div v-if="tab === 2">
@@ -31,28 +32,33 @@
       </div>
     </div>
   </div>
+
+  <!-- 快速登录 -->
+  <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
 </template>
 
 <script setup>
-import exchange from './exchange.vue'
-import exchangeRecords from './exchangeRecords.vue'
+defineOptions({name: 'personal-pointsMall'})
 import { ref } from 'vue'
 import { useUserStore } from '@/store/user'
 import { useRoute } from 'vue-router'; const route = useRoute()
 import { useRouter } from 'vue-router'; const router = useRouter()
-defineOptions({name: 'personal-pointsMall'})
+import { getToken } from '@/utils/auth'
+import Snackbar from '@/plugins/snackbar'
+import exchangeRecords from './exchangeRecords.vue'
+import exchange from './exchange.vue'
+import loginPage from '@/views/common/loginDialog.vue'
 
 const toPointsDetails = () => {
   router.push({ path: '/recruit/personal/personalCenter/wallet' })
 }
 
 const getPositionList = () => {
-  if (route.query) router.replace({ path: route.path }) // 不留记录的清除跳转带过来的参数
+  if (route.query) router.replace({ path: route.path })
 }
 const tab = ref(+route.query?.tab || 1)
 
 const userStore = useUserStore()
-// 'userAccount' : 'enterpriseUserAccount'
 const key = 'userAccount'
 let accountData = ref(JSON.parse(localStorage.getItem(key)) || {})
 
@@ -60,6 +66,26 @@ userStore.$subscribe((mutation, state) => {
   if (Object.keys(state[key]).length) accountData.value = state[key]
 })
 
+const showLogin = ref(false)
+const handleLogin = () => {
+  showLogin.value = true
+}
+
+// 快速登录
+const loginSuccess = () => {
+  showLogin.value = false
+  Snackbar.success('登录成功')
+}
+
+const loginClose = () => {
+  showLogin.value = false
+  Snackbar.warning('您已取消登录')
+}
+
+// 跳转任务中心
+const handleToTaskCenter = () => {
+  router.push('/recruit/personal/personalCenter/memberBenefits/taskCenter')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -67,7 +93,5 @@ userStore.$subscribe((mutation, state) => {
   padding: 10px 0;
   border-radius: 10px;
   background-color: var(--default-bgc);
-  // background-color: var(--color-f3);
-  // font-family: 宋体, SimSun;
 }
 </style>