积分兑换记录

src/layout/index.vue

@@ -33,7 +33,8 @@ const footerWhiteList = [
   '/headhunting',
   '/headhunting/service',
   '/headhunting/service/details',
-  '/recruit/personal/resume/analysis'
+  '/recruit/personal/resume/analysis',
+  '/mall/pointExchange/records'
 ]
 const router = useRouter()
 

src/router/modules/recruit.js

@@ -50,6 +50,14 @@ const recruit = [
         meta: {
           title: '商品详情'
         }
+      },
+      {
+        path: '/mall/pointExchange/records',
+        component: () => import('@/views/mall/pointExchange/records.vue'),
+        name: 'mallPointExchangeRecords',
+        meta: {
+          title: '积分兑换记录'
+        }
       }
     ]
   },

src/views/mall/home/components/hotGoods.vue

@@ -4,19 +4,20 @@
       <div class="color-primary" style="font-size: 25px;">热门商品</div>
       <div class="cursor-pointer">查看更多</div>
     </div>
-    <div class="goods-box mt-5">
+    <div v-if="goodList.length" class="goods-box mt-5">
       <v-card v-for="val in goodList" :key="val.id" class="goods-box-item" hover elevation="2" @click="handleClickGood(val)">
         <v-img :src="val.picUrl" width="100%" height="68%" cover></v-img>
-        <div class="pa-3">
+        <div class="px-3 pt-3">
           <p class="ellipsis color-333">{{ val.name }}</p>
           <p class="color-999 ellipsis font-size-14 mt-1">{{ val.introduction }}</p>
-          <div class="mt-1">
-            <div class="goods-box-item-price float-left">￥{{ isArray(val.price) ? fen2yuan(val.price[0]) : fen2yuan(val.price) }}</div>
-            <div class="float-right font-size-15 mt-1" style="color: #c4c4c4">{{ salesAndStock(val) }}</div>
+          <div class="mt-1 d-flex justify-space-between">
+            <div class="goods-box-item-price">￥{{ isArray(val.price) ? fen2yuan(val.price[0]) : fen2yuan(val.price) }}</div>
+            <div class="font-size-15 mt-1" style="color: #c4c4c4">{{ salesAndStock(val) }}</div>
           </div>
         </div>
       </v-card>
     </div>
+    <Empty v-else :elevation="false" message="暂无商品，去看看其他分类吧~"></Empty>
   </div>
 </template>
 
@@ -62,7 +63,7 @@ const handleClickGood = (val) => {
   display: flex;
   flex-wrap: wrap;
   &-item {
-    height: 380px;
+    height: 330px;
     width: calc((100% - 48px) / 5);
     margin: 0 12px 12px 0;
     &:nth-child(5n) {

src/views/mall/home/components/navbar.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="default-width d-flex align-center justify-space-between">
+    <div class="header-link">
+      <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
+      <span class="cursor-pointer mx-8">订单中心</span>
+      <span class="cursor-pointer">
+        <v-icon size="20">mdi-cart-outline</v-icon>
+        购物车
+      </span>
+    </div>
+    <div class="search d-flex align-center">
+      <v-text-field
+        v-model="inputVal"
+        placeholder="请输入关键词"
+        color="primary"
+        variant="plain"
+        density="compact"
+        clearable
+        :hide-details="true"
+        class="ml-3 px-2"
+        style="height: 100%; line-height: 100%;"
+        @keyup.enter="handleSearch"
+      ></v-text-field>
+      <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'formPage'})
+import { computed, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const isActive = computed(() => (path) => {
+  const currentPath = router.currentRoute.value.path
+  return currentPath.includes(path)
+})
+
+const inputVal = ref('')
+const handleSearch = () => {}
+</script>
+
+<style scoped lang="scss">
+.active-route {
+  position: relative;
+  color: var(--v-primary-base);
+  &::before {
+    content: '';
+    width: 100%;
+    height: 3px;
+    position: absolute;
+    bottom: -8px;
+    left: 0;
+    background-color: var(--v-primary-base);
+  }
+}
+.header-link span:hover {
+  color: var(--v-primary-base);
+}
+.search {
+  height: 50px;
+  width: 350px;
+  border: 2px solid var(--v-primary-base);
+  border-radius: 5px;
+  .searchBtn {
+    width: 100px;
+    height: 49px;
+    line-height: 48px;
+    text-align: center;
+    font-size: 18px;
+    color: #fff;
+    background-color: var(--v-primary-base);
+    cursor: pointer;
+  }
+}
+</style>

src/views/mall/home/index.vue

@@ -2,38 +2,13 @@
   <div style="min-width: 1184px;" class="white-bgc">
     <!-- 搜索框 -->
     <div class="py-5 stickyBox">
-      <div class="default-width d-flex align-center justify-space-between">
-        <div class="header-link">
-          <span class="cursor-pointer" :class="{'active-route' : isActive('/mall')}" @click="router.push('/mall')">首页</span>
-          <span class="mx-8 cursor-pointer">积分兑换</span>
-          <span class="cursor-pointer">订单中心</span>
-          <span class="mx-8 cursor-pointer">
-            <v-icon size="20">mdi-cart-outline</v-icon>
-            购物车
-          </span>
-        </div>
-        <div class="search d-flex align-center">
-          <v-text-field
-            v-model="inputVal"
-            placeholder="请输入关键词"
-            color="primary"
-            variant="plain"
-            density="compact"
-            clearable
-            :hide-details="true"
-            class="ml-3 px-2"
-            style="height: 100%; line-height: 100%;"
-            @keyup.enter="handleSearch"
-          ></v-text-field>
-          <v-btn class="searchBtn" prepend-icon="mdi-shopping-search-outline" @click="handleSearch">搜索</v-btn>
-        </div>
-      </div>
+      <Navbar />
     </div>
 
     <!-- 轮播图 -->
-    <Carousel :templateData="template" class="mb-10" />
+    <Carousel :templateData="template" class="mb-10" style="max-height: 594.5px;" />
 
-    <div class="default-width">
+    <div class="default-width pb-10">
       <!-- 热门商品 -->
       <HotGoods :templateData="template" class="mb-10" />
 
@@ -48,24 +23,18 @@
 
 <script setup>
 defineOptions({ name: 'mall-home-index'})
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
+import Navbar from './components/navbar.vue'
 import Carousel from './components/carousel.vue'
 import HotGoods from './components/hotGoods.vue'
-import PointExchange from './components/pointExchange'
+import PointExchange from '../pointExchange'
 import loginPage from '@/views/common/loginDialog.vue'
 import { useMallStore } from '@/store/mall'
 import { useUserStore } from '@/store/user'
-import { useRouter } from 'vue-router'
 
 // 获取装修模版
 useMallStore().getMallDiyTemplate()
 
-const router = useRouter()
-const isActive = computed(() => (path) => {
-  const currentPath = router.currentRoute.value.path
-  return currentPath.includes(path)
-})
-
 let template = ref(JSON.parse(localStorage.getItem('mallTemplate')) || {})
 useMallStore().$subscribe((mutation, state) => {
   if (state.template && Object.keys(state.template).length) template.value = state?.template
@@ -93,29 +62,9 @@ const loginClose = () => {
   showLogin.value = false
   Snackbar.warning('您已取消登录')
 }
-
-
-const inputVal = ref('')
-const handleSearch = () => {}
 </script>
 
 <style scoped lang="scss">
-.active-route {
-  position: relative;
-  color: var(--v-primary-base);
-  &::before {
-    content: '';
-    width: 100%;
-    height: 3px;
-    position: absolute;
-    bottom: -8px;
-    left: 0;
-    background-color: var(--v-primary-base);
-  }
-}
-.header-link span:hover {
-  color: var(--v-primary-base);
-}
 .stickyBox {
   position: sticky;
   top: 48px;
@@ -123,20 +72,4 @@ const handleSearch = () => {}
   background-color: #fff;
   // border-bottom: 1px solid #00897B;
 }
-.search {
-  height: 50px;
-  width: 350px;
-  border: 2px solid var(--v-primary-base);
-  border-radius: 5px;
-  .searchBtn {
-    width: 100px;
-    height: 49px;
-    line-height: 48px;
-    text-align: center;
-    font-size: 18px;
-    color: #fff;
-    background-color: var(--v-primary-base);
-    cursor: pointer;
-  }
-}
 </style>

src/views/mall/home/components/pointExchange/index.vue → src/views/mall/pointExchange/index.vue

@@ -5,7 +5,7 @@
       <div>
         <span class="cursor-pointer active" @click="router.push('/recruit/personal/personalCenter/wallet')">当前账户积分：{{ point }}</span>
         <span class="septal-line"></span>
-        <span class="cursor-pointer active">兑换记录</span>
+        <span class="cursor-pointer active" @click="handleToExchangeRecord">兑换记录</span>
       </div>
     </div>
     <div class="goods-box mt-5">
@@ -169,6 +169,16 @@ const handleSubmit = async () =>{
   await useUserStore().getUserAccountInfo()
 }
 
+// 积分兑换记录
+const handleToExchangeRecord = () => {
+  if (!getToken()) {
+    Snackbar.warning('请先登录')
+    emit('login')
+    return
+  }
+  router.push('/mall/pointExchange/records')
+}
+
 </script>
 
 <style scoped lang="scss">
@@ -180,7 +190,7 @@ const handleSubmit = async () =>{
   display: flex;
   flex-wrap: wrap;
   &-item {
-    height: 380px;
+    height: 330px;
     width: calc((100% - 48px) / 5);
     margin: 0 12px 12px 0;
     &:nth-child(5n) {

src/views/mall/pointExchange/records.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="pa-5 white-bgc" style="height: calc(100vh - 50px);">
+    <v-breadcrumbs color="primary" :items="breadcrumbs"></v-breadcrumbs>
+    <v-card elevation="5">
+      <CtTable
+        :items="dataList"
+        :headers="headers"
+        :loading="false"
+        :elevation="0"
+        :isTools="false"
+        :showPage="true"
+        :total="total"
+        :page-info="queryParams"
+        itemKey="id"
+        @pageHandleChange="handleChangePage"
+      >
+      </CtTable>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'mall-point-exchange-records'})
+import { ref } from 'vue'
+import { getRedeemPage } from '@/api/mall/index.js'
+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 },
+  { title: '订单编号', key: 'orderNo', sortable: false }
+]
+const breadcrumbs = [
+  { title: '首页', href: '/mall' },
+  { title: '积分兑换记录', href: '/mall/pointExchange/records', disabled: true }
+]
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+})
+
+// 数据
+const dataList = ref([])
+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()
+}
+</script>
+
+<style lang="scss" scoped>
+</style>