• 基于vue的黑马前端项目小兔鲜

    目录

    项目学习 

    初始化项目 

    建立项目 

    引入elementplus

    elementPlus主题设置 

    配置axios

    路由 

    引入静态资源

    自动导入scss变量

    Layout页

    组件结构快速搭建

     字体图标渲染

    一级导航渲染 

    吸顶导航交互实现 

    Pinia优化重复请求

    Home页 

    分类实现

    banner轮播图 

    新鲜好物实现

    人气推荐实现 

    懒加载指令实现 

    产品列表实现

    GoodsItem组件封装 

    一级分类页 

    导航栏

    分类Banner渲染 

    导航激活 

    分类列表渲染 

    路由缓存问题 

    业务逻辑的函数拆分 

    二级分类页 

    实现

    定制路由的滚动行为

    商品详情

    路由配置

    数据渲染

    热榜区域 

    适配热榜类型 

    图片预览组件封装

    sku插件

     登录页

    表单

    登录实现 

     登录失败的提示

     Pinia管理用户

    Pinia持久化存储

    登录和非登录状态

    请求拦截器携带token

    退出登录

    token失效处理

    购物车

    本地加入购物车

    头部购物车

    购物车页面

    订单页 

    支付页 

    会员中心 

    基本页面

    个人中心信息渲染

    我的订单 

    分页

    项目学习 

    视频：黑马程序员-小兔鲜

    黑马资料：文档

    vue调试：vue-devtools

    DEV：HBuilder

    初始化项目 

    建立项目 

    安装node

    安装过node的需要查看node的版本是否大于或等于15，否则报错

     Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.

    windows下更新node需要重新安装，即覆盖原有的node。 

    查看镜像地址 

    npm config get registry

    设置淘宝镜像地址 

    npm config set registry https://registry.npm.taobao.org/

    安装脚手架 

    npm i -g @vue/cli

    下载create-vue

    npm install create-vue@3.7.3

    注意版本，或者安装最新版。

    初始化项目

    安装依赖

    npm install

    配置别名路径

    在根目录下新建jsconfig.json

    1. {
    2.   "compilerOptions" : {
    3.     "baseUrl" : "./",
    4.     "paths" : {
    5.       "@/*":["src/*"]
    6.     }
    7.   }
    8. }

    引入elementplus

    官网

    1. // 引入插件
    2. import AutoImport from 'unplugin-auto-import/vite'
    3. import Components from 'unplugin-vue-components/vite'
    4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    5.  
    6.  
    7. export default defineConfig({
    8.   plugins: [
    9.     // 配置插件
    10.     AutoImport({
    11.       resolvers: [ElementPlusResolver()],
    12.     }),
    13.     Components({
    14.       resolvers: [ElementPlusResolver()],
    15.     }),
    16.   ]
    17. })

    vit.config.js

    1. <script setup>
    2. import { RouterLink, RouterView } from 'vue-router'
    3. import HelloWorld from './components/HelloWorld.vue'
    4. </script>
    5.  
    6. <template>
    7.   <header>
    8.     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    9.  
    10.     <div class="wrapper">
    11.       <HelloWorld msg="You did it!" />
    12.  
    13.       <nav>
    14.         <RouterLink to="/">Home</RouterLink>
    15.         <RouterLink to="/about">About</RouterLink>
    16.       </nav>
    17.     </div>
    18.   </header>
    19.   <el-button type="primary">Primary</el-button>
    20.   <RouterView />
    21. </template>
    22.  
    23. <style scoped>
    24. header {
    25.   line-height: 1.5;
    26.   max-height: 100vh;
    27. }
    28.  
    29. .logo {
    30.   display: block;
    31.   margin: 0 auto 2rem;
    32. }
    33.  
    34. nav {
    35.   width: 100%;
    36.   font-size: 12px;
    37.   text-align: center;
    38.   margin-top: 2rem;
    39. }
    40.  
    41. nav a.router-link-exact-active {
    42.   color: var(--color-text);
    43. }
    44.  
    45. nav a.router-link-exact-active:hover {
    46.   background-color: transparent;
    47. }
    48.  
    49. nav a {
    50.   display: inline-block;
    51.   padding: 0 1rem;
    52.   border-left: 1px solid var(--color-border);
    53. }
    54.  
    55. nav a:first-of-type {
    56.   border: 0;
    57. }
    58.  
    59. @media (min-width: 1024px) {
    60.   header {
    61.     display: flex;
    62.     place-items: center;
    63.     padding-right: calc(var(--section-gap) / 2);
    64.   }
    65.  
    66.   .logo {
    67.     margin: 0 2rem 0 0;
    68.   }
    69.  
    70.   header .wrapper {
    71.     display: flex;
    72.     place-items: flex-start;
    73.     flex-wrap: wrap;
    74.   }
    75.  
    76.   nav {
    77.     text-align: left;
    78.     margin-left: -1rem;
    79.     font-size: 1rem;
    80.  
    81.     padding: 1rem 0;
    82.     margin-top: 1rem;
    83.   }
    84. }
    85. </style>

    测试以下elementplus是否生效。

    在app.vue的template下引入

    <el-button type="primary">Primary</el-button>

     重启运行。

    测试完成。

    elementPlus主题设置 

    安装sass

    npm i sass -D

    样式文件

    styles/element/index.scss

    1. /* 只需要重写你需要的即可 */
    2. @forward 'element-plus/theme-chalk/src/common/var.scss' with (
    3.   $colors: (
    4.     'primary': (
    5.       // 主色
    6.       'base': #27ba9b,
    7.     ),
    8.     'success': (
    9.       // 成功色
    10.       'base': #1dc779,
    11.     ),
    12.     'warning': (
    13.       // 警告色
    14.       'base': #ffb302,
    15.     ),
    16.     'danger': (
    17.       // 危险色
    18.       'base': #e26237,
    19.     ),
    20.     'error': (
    21.       // 错误色
    22.       'base': #cf4444,
    23.     ),
    24.   )
    25. )

    配置

    vite.config.js

    1. import { fileURLToPath, URL } from 'node:url'
    2.  
    3. import { defineConfig } from 'vite'
    4. import vue from '@vitejs/plugin-vue'
    5. //elementplus按需导入
    6. import AutoImport from 'unplugin-auto-import/vite'
    7. import Components from 'unplugin-vue-components/vite'
    8. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    9.  
    10. // https://vitejs.dev/config/
    11. export default defineConfig({
    12.   plugins: [
    13.     vue(),
    14. 	AutoImport({
    15. 	    resolvers: [ElementPlusResolver()],
    16. 	}),
    17. 	Components({
    18. 	    resolvers: [
    19. 			//配置elementPlus采用sass样式配色系统
    20. 			ElementPlusResolver({importStyle:"sass"}),
    21. 		],
    22. 	}),
    23.   ],
    24.   resolve: {
    25.     alias: {
    26.       '@': fileURLToPath(new URL('./src', import.meta.url))
    27.     }
    28.   },
    29.   css: {
    30.       preprocessorOptions: {
    31.         scss: {
    32.           // 自动导入定制化样式文件进行样式覆盖
    33.           additionalData: `
    34.             @use "@/styles/element/index.scss" as *;
    35.           `,
    36.         }
    37.       },
    38.    }
    39. })

    测试

    重启运行

    配置axios

    安装axios

    npm i axios

    配置 

    utils/http.js

    1. import axios from 'axios'
    2.  
    3. // 创建axios实例
    4. let http = axios.create({
    5.   baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net',
    6.   timeout: 5000
    7. })
    8.  
    9. // axios请求拦截器
    10. http.interceptors.request.use(config => {
    11.   return config
    12. }, e => Promise.reject(e))
    13.  
    14. // axios响应式拦截器
    15. http.interceptors.response.use(res => res.data, e => {
    16.   return Promise.reject(e)
    17. })
    18.  
    19.  
    20. export default http

     测试接口

    api/testAPI.js下

    1. import http from '@/utils/http'
    2.  
    3. export function getCategory () {
    4.   return http({
    5.     url: 'home/category/head'
    6.   })
    7. }

    main.js下新增

    1. //测试接口
    2. import {getCategory} from '@/api/testAPI'
    3. getCategory().then(res => {
    4. 	console.log(res)
    5. })

    重启运行

    路由 

    views/Login/index.vue

    1. <template>
    2.   我是登录页
    3. </template>

    views/Layout/index.vue

    1. <template>
    2.   我是首页
    3. </template>

    views/Home/index.vue

    1. <template>
    2.   我是home页
    3. </template>

    views/Category/index.vue

    1. <template>
    2.   我是分类页
    3. </template>

    router/index.js

    1. import { createRouter, createWebHistory } from 'vue-router'
    2. import HomeView from '../views/HomeView.vue'
    3. import Login from '@/views/login/index.vue'
    4. import Layout from '@/views/layout/index.vue'
    5. import Home from '@/views/home/index.vue'
    6. import Category from '@/views/category/index.vue'
    7.  
    8. const router = createRouter({
    9.   history: createWebHistory(import.meta.env.BASE_URL),
    10.   routes: [
    11.     {
    12. 		path: '/',
    13. 		component: Layout,
    14. 		children: [
    15. 			{
    16. 				path: '',
    17. 				component: Home
    18. 			},
    19. 			{
    20. 				path: 'category',
    21. 				component: Category
    22. 			}
    23. 		]
    24. 	},
    25. 	{
    26. 		path: '/login',
    27. 		component: Login
    28. 	}
    29.   ]
    30. })
    31.  
    32. export default router

    重启输入对应url可以看到不同页面。

    引入静态资源

    1. 图片资源 - 把 images 文件夹放到 assets 目录下
    2. 样式资源 - 把 common.scss 文件放到 styles 目录下

    链接：https://pan.baidu.com/s/15PoJhfpPDzf_WTsakO0jmg?pwd=3kgh 
    提取码：3kgh

    自动导入scss变量

    var.scss

    1. $xtxColor: #27ba9b;
    2. $helpColor: #e26237;
    3. $sucColor: #1dc779;
    4. $warnColor: #ffb302;
    5. $priceColor: #cf4444;

     修改main.js

    1. css: {
    2.     preprocessorOptions: {
    3.       scss: {
    4.         // 自动导入scss文件
    5.         additionalData: `
    6.           @use "@/styles/element/index.scss" as *;
    7.           @use "@/styles/var.scss" as *;
    8.         `,
    9.       }
    10.     }
    11. }

    测试 

    修改App.vue

    1. <script setup>
    2. import { RouterLink, RouterView } from 'vue-router'
    3. import HelloWorld from './components/HelloWorld.vue'
    4. script>
    5.  
    6. <template>
    7.   <RouterView />
    8.   <div class="test">testdiv>
    9. template>
    10.  
    11. <style scoped lang="scss">
    12. header {
    13.   line-height: 1.5;
    14.   max-height: 100vh;
    15. }
    16. .test {
    17. 	color: $priceColor;
    18. }
    19. .logo {
    20.   display: block;
    21.   margin: 0 auto 2rem;
    22. }
    23.  
    24. nav {
    25.   width: 100%;
    26.   font-size: 12px;
    27.   text-align: center;
    28.   margin-top: 2rem;
    29. }
    30.  
    31. nav a.router-link-exact-active {
    32.   color: var(--color-text);
    33. }
    34.  
    35. nav a.router-link-exact-active:hover {
    36.   background-color: transparent;
    37. }
    38.  
    39. nav a {
    40.   display: inline-block;
    41.   padding: 0 1rem;
    42.   border-left: 1px solid var(--color-border);
    43. }
    44.  
    45. nav a:first-of-type {
    46.   border: 0;
    47. }
    48.  
    49. @media (min-width: 1024px) {
    50.   header {
    51.     display: flex;
    52.     place-items: center;
    53.     padding-right: calc(var(--section-gap) / 2);
    54.   }
    55.  
    56.   .logo {
    57.     margin: 0 2rem 0 0;
    58.   }
    59.  
    60.   header .wrapper {
    61.     display: flex;
    62.     place-items: flex-start;
    63.     flex-wrap: wrap;
    64.   }
    65.  
    66.   nav {
    67.     text-align: left;
    68.     margin-left: -1rem;
    69.     font-size: 1rem;
    70.  
    71.     padding: 1rem 0;
    72.     margin-top: 1rem;
    73.   }
    74. }
    75. style>

    测试成功，还原代码。

    Layout页

    组件结构快速搭建

    LayoutNav.vue

    1. <script setup>
    2.  
    3. </script>
    4.  
    5. <template>
    6.   <nav class="app-topnav">
    7.     <div class="container">
    8.       <ul>
    9.         <template v-if="true">
    10.           <li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>
    11.           <li>
    12.             <el-popconfirm title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
    13.               <template #reference>
    14.                 <a href="javascript:;">退出登录</a>
    15.               </template>
    16.             </el-popconfirm>
    17.           </li>
    18.           <li><a href="javascript:;">我的订单</a></li>
    19.           <li><a href="javascript:;">会员中心</a></li>
    20.         </template>
    21.         <template v-else>
    22.           <li><a href="javascript:;">请先登录</a></li>
    23.           <li><a href="javascript:;">帮助中心</a></li>
    24.           <li><a href="javascript:;">关于我们</a></li>
    25.         </template>
    26.       </ul>
    27.     </div>
    28.   </nav>
    29. </template>
    30.  
    31.  
    32. <style scoped lang="scss">
    33. .app-topnav {
    34.   background: #333;
    35.   ul {
    36.     display: flex;
    37.     height: 53px;
    38.     justify-content: flex-end;
    39.     align-items: center;
    40.     li {
    41.       a {
    42.         padding: 0 15px;
    43.         color: #cdcdcd;
    44.         line-height: 1;
    45.         display: inline-block;
    46.  
    47.         i {
    48.           font-size: 14px;
    49.           margin-right: 2px;
    50.         }
    51.  
    52.         &:hover {
    53.           color: $xtxColor;
    54.         }
    55.       }
    56.  
    57.       ~li {
    58.         a {
    59.           border-left: 2px solid #666;
    60.         }
    61.       }
    62.     }
    63.   }
    64. }
    65. </style>

    LayoutHeader.vue

    1. <script setup>
    2.  
    3. </script>
    4.  
    5. <template>
    6.   <header class='app-header'>
    7.     <div class="container">
    8.       <h1 class="logo">
    9.         <RouterLink to="/">小兔鲜</RouterLink>
    10.       </h1>
    11.       <ul class="app-header-nav">
    12.         <li class="home">
    13.           <RouterLink to="/">首页</RouterLink>
    14.         </li>
    15.         <li> <RouterLink to="/">居家</RouterLink> </li>
    16.         <li> <RouterLink to="/">美食</RouterLink> </li>
    17.         <li> <RouterLink to="/">服饰</RouterLink> </li>
    18.       </ul>
    19.       <div class="search">
    20.         <i class="iconfont icon-search"></i>
    21.         <input type="text" placeholder="搜一搜">
    22.       </div>
    23.       <!-- 头部购物车 -->
    24.       
    25.     </div>
    26.   </header>
    27. </template>
    28.  
    29.  
    30. <style scoped lang='scss'>
    31. .app-header {
    32.   background: #fff;
    33.  
    34.   .container {
    35.     display: flex;
    36.     align-items: center;
    37.   }
    38.  
    39.   .logo {
    40.     width: 200px;
    41.  
    42.     a {
    43.       display: block;
    44.       height: 132px;
    45.       width: 100%;
    46.       text-indent: -9999px;
    47.       background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    48.     }
    49.   }
    50.  
    51.   .app-header-nav {
    52.     width: 820px;
    53.     display: flex;
    54.     padding-left: 40px;
    55.     position: relative;
    56.     z-index: 998;
    57.   
    58.     li {
    59.       margin-right: 40px;
    60.       width: 38px;
    61.       text-align: center;
    62.   
    63.       a {
    64.         font-size: 16px;
    65.         line-height: 32px;
    66.         height: 32px;
    67.         display: inline-block;
    68.   
    69.         &:hover {
    70.           color: $xtxColor;
    71.           border-bottom: 1px solid $xtxColor;
    72.         }
    73.       }
    74.   
    75.       .active {
    76.         color: $xtxColor;
    77.         border-bottom: 1px solid $xtxColor;
    78.       }
    79.     }
    80.   }
    81.  
    82.   .search {
    83.     width: 170px;
    84.     height: 32px;
    85.     position: relative;
    86.     border-bottom: 1px solid #e7e7e7;
    87.     line-height: 32px;
    88.  
    89.     .icon-search {
    90.       font-size: 18px;
    91.       margin-left: 5px;
    92.     }
    93.  
    94.     input {
    95.       width: 140px;
    96.       padding-left: 5px;
    97.       color: #666;
    98.     }
    99.   }
    100.  
    101.   .cart {
    102.     width: 50px;
    103.  
    104.     .curr {
    105.       height: 32px;
    106.       line-height: 32px;
    107.       text-align: center;
    108.       position: relative;
    109.       display: block;
    110.  
    111.       .icon-cart {
    112.         font-size: 22px;
    113.       }
    114.  
    115.       em {
    116.         font-style: normal;
    117.         position: absolute;
    118.         right: 0;
    119.         top: 0;
    120.         padding: 1px 6px;
    121.         line-height: 1;
    122.         background: $helpColor;
    123.         color: #fff;
    124.         font-size: 12px;
    125.         border-radius: 10px;
    126.         font-family: Arial;
    127.       }
    128.     }
    129.   }
    130. }
    131. </style>

    LayoutFooter.vue

    1. <template>
    2.   <footer class="app_footer">
    3.     <!-- 联系我们 -->
    4.     <div class="contact">
    5.       <div class="container">
    6.         <dl>
    7.           <dt>客户服务</dt>
    8.           <dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
    9.           <dd><i class="iconfont icon-question"></i> 问题反馈</dd>
    10.         </dl>
    11.         <dl>
    12.           <dt>关注我们</dt>
    13.           <dd><i class="iconfont icon-weixin"></i> 公众号</dd>
    14.           <dd><i class="iconfont icon-weibo"></i> 微博</dd>
    15.         </dl>
    16.         <dl>
    17.           <dt>下载APP</dt>
    18.           <dd class="qrcode"><img src="@/assets/images/qrcode.jpg" /></dd>
    19.           <dd class="download">
    20.             <span>扫描二维码</span>
    21.             <span>立马下载APP</span>
    22.             <a href="javascript:;">下载页面</a>
    23.           </dd>
    24.         </dl>
    25.         <dl>
    26.           <dt>服务热线</dt>
    27.           <dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd>
    28.         </dl>
    29.       </div>
    30.     </div>
    31.     <!-- 其它 -->
    32.     <div class="extra">
    33.       <div class="container">
    34.         <div class="slogan">
    35.           <a href="javascript:;">
    36.             <i class="iconfont icon-footer01"></i>
    37.             <span>价格亲民</span>
    38.           </a>
    39.           <a href="javascript:;">
    40.             <i class="iconfont icon-footer02"></i>
    41.             <span>物流快捷</span>
    42.           </a>
    43.           <a href="javascript:;">
    44.             <i class="iconfont icon-footer03"></i>
    45.             <span>品质新鲜</span>
    46.           </a>
    47.         </div>
    48.         <!-- 版权信息 -->
    49.         <div class="copyright">
    50.           <p>
    51.             <a href="javascript:;">关于我们</a>
    52.             <a href="javascript:;">帮助中心</a>
    53.             <a href="javascript:;">售后服务</a>
    54.             <a href="javascript:;">配送与验收</a>
    55.             <a href="javascript:;">商务合作</a>
    56.             <a href="javascript:;">搜索推荐</a>
    57.             <a href="javascript:;">友情链接</a>
    58.           </p>
    59.           <p>CopyRight © 小兔鲜儿</p>
    60.         </div>
    61.       </div>
    62.     </div>
    63.   </footer>
    64. </template>
    65.  
    66. <style scoped lang='scss'>
    67. .app_footer {
    68.   overflow: hidden;
    69.   background-color: #f5f5f5;
    70.   padding-top: 20px;
    71.  
    72.   .contact {
    73.     background: #fff;
    74.  
    75.     .container {
    76.       padding: 60px 0 40px 25px;
    77.       display: flex;
    78.     }
    79.  
    80.     dl {
    81.       height: 190px;
    82.       text-align: center;
    83.       padding: 0 72px;
    84.       border-right: 1px solid #f2f2f2;
    85.       color: #999;
    86.  
    87.       &:first-child {
    88.         padding-left: 0;
    89.       }
    90.  
    91.       &:last-child {
    92.         border-right: none;
    93.         padding-right: 0;
    94.       }
    95.     }
    96.  
    97.     dt {
    98.       line-height: 1;
    99.       font-size: 18px;
    100.     }
    101.  
    102.     dd {
    103.       margin: 36px 12px 0 0;
    104.       float: left;
    105.       width: 92px;
    106.       height: 92px;
    107.       padding-top: 10px;
    108.       border: 1px solid #ededed;
    109.  
    110.       .iconfont {
    111.         font-size: 36px;
    112.         display: block;
    113.         color: #666;
    114.       }
    115.  
    116.       &:hover {
    117.         .iconfont {
    118.           color: $xtxColor;
    119.         }
    120.       }
    121.  
    122.       &:last-child {
    123.         margin-right: 0;
    124.       }
    125.     }
    126.  
    127.     .qrcode {
    128.       width: 92px;
    129.       height: 92px;
    130.       padding: 7px;
    131.       border: 1px solid #ededed;
    132.     }
    133.  
    134.     .download {
    135.       padding-top: 5px;
    136.       font-size: 14px;
    137.       width: auto;
    138.       height: auto;
    139.       border: none;
    140.  
    141.       span {
    142.         display: block;
    143.       }
    144.  
    145.       a {
    146.         display: block;
    147.         line-height: 1;
    148.         padding: 10px 25px;
    149.         margin-top: 5px;
    150.         color: #fff;
    151.         border-radius: 2px;
    152.         background-color: $xtxColor;
    153.       }
    154.     }
    155.  
    156.     .hotline {
    157.       padding-top: 20px;
    158.       font-size: 22px;
    159.       color: #666;
    160.       width: auto;
    161.       height: auto;
    162.       border: none;
    163.  
    164.       small {
    165.         display: block;
    166.         font-size: 15px;
    167.         color: #999;
    168.       }
    169.     }
    170.   }
    171.  
    172.   .extra {
    173.     background-color: #333;
    174.   }
    175.  
    176.   .slogan {
    177.     height: 178px;
    178.     line-height: 58px;
    179.     padding: 60px 100px;
    180.     border-bottom: 1px solid #434343;
    181.     display: flex;
    182.     justify-content: space-between;
    183.  
    184.     a {
    185.       height: 58px;
    186.       line-height: 58px;
    187.       color: #fff;
    188.       font-size: 28px;
    189.  
    190.       i {
    191.         font-size: 50px;
    192.         vertical-align: middle;
    193.         margin-right: 10px;
    194.         font-weight: 100;
    195.       }
    196.  
    197.       span {
    198.         vertical-align: middle;
    199.         text-shadow: 0 0 1px #333;
    200.       }
    201.     }
    202.   }
    203.  
    204.   .copyright {
    205.     height: 170px;
    206.     padding-top: 40px;
    207.     text-align: center;
    208.     color: #999;
    209.     font-size: 15px;
    210.  
    211.     p {
    212.       line-height: 1;
    213.       margin-bottom: 20px;
    214.     }
    215.  
    216.     a {
    217.       color: #999;
    218.       line-height: 1;
    219.       padding: 0 10px;
    220.       border-right: 1px solid #999;
    221.  
    222.       &:last-child {
    223.         border-right: none;
    224.       }
    225.     }
    226.   }
    227. }
    228. </style>

    Layout/index.vue

    1. <script setup>
    2. import LayoutNav from './components/LayoutNav.vue'
    3. import LayoutHeader from './components/LayoutHeader.vue'
    4. import LayoutFooter from './components/LayoutFooter.vue'
    5. </script>
    6.  
    7. <template>
    8.   <LayoutNav />
    9.   <LayoutHeader />
    10.   <RouterView />
    11.   <LayoutFooter />
    12. </template>

    重启项目

     字体图标渲染

    根目录下index.html引入

      <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">

    一级导航渲染 

    api/layout.js 

    1. import httpInstance from '@/utils/http'
    2.  
    3. export function getCategoryAPI () {
    4.   return httpInstance({
    5.     url: '/home/category/head'
    6.   })
    7. }

    LayoutHeader.vue

    1. <script setup>
    2.   import { getCategoryAPI } from '@/api/layout'
    3.   import { onMounted, ref } from 'vue'
    4.  
    5.   const categoryList = ref([])
    6.   const getCategory = async () => {
    7.     const res = await getCategoryAPI()
    8.     categoryList.value = res.result
    9.   }
    10.  
    11.   onMounted(() => getCategory())
    12.  
    13. script>
    14.  
    15. <template>
    16.   <header class='app-header'>
    17.     <div class="container">
    18.       <h1 class="logo">
    19.         <RouterLink to="/">小兔鲜RouterLink>
    20.       h1>
    21.       <ul class="app-header-nav">
    22.         <li class="home" v-for="item in categoryList" :key="item.id">
    23.           <RouterLink to="/">{{ item.name }}RouterLink>
    24.         li>
    25.       ul>
    26.       <div class="search">
    27.         <i class="iconfont icon-search">i>
    28.         <input type="text" placeholder="搜一搜">
    29.         div>
    30.       
    31.     div>
    32.   header>
    33. template>
    34.  
    35. <style scoped lang='scss'>
    36. .app-header {
    37.   background: #fff;
    38.  
    39.   .container {
    40.     display: flex;
    41.     align-items: center;
    42.   }
    43.  
    44.   .logo {
    45.     width: 200px;
    46.  
    47.     a {
    48.       display: block;
    49.       height: 132px;
    50.       width: 100%;
    51.       text-indent: -9999px;
    52.       background: url('@/assets/images/logo.png') no-repeat center 18px / contain;
    53.     }
    54.   }
    55.  
    56.   .app-header-nav {
    57.     width: 820px;
    58.     display: flex;
    59.     padding-left: 40px;
    60.     position: relative;
    61.     z-index: 998;
    62.   
    63.     li {
    64.       margin-right: 40px;
    65.       width: 38px;
    66.       text-align: center;
    67.   
    68.       a {
    69.         font-size: 16px;
    70.         line-height: 32px;
    71.         height: 32px;
    72.         display: inline-block;
    73.   
    74.         &:hover {
    75.           color: $xtxColor;
    76.           border-bottom: 1px solid $xtxColor;
    77.         }
    78.       }
    79.   
    80.       .active {
    81.         color: $xtxColor;
    82.         border-bottom: 1px solid $xtxColor;
    83.       }
    84.     }
    85.   }
    86.  
    87.   .search {
    88.     width: 170px;
    89.     height: 32px;
    90.     position: relative;
    91.     border-bottom: 1px solid #e7e7e7;
    92.     line-height: 32px;
    93.  
    94.     .icon-search {
    95.       font-size: 18px;
    96.       margin-left: 5px;
    97.     }
    98.  
    99.     input {
    100.       width: 140px;
    101.       padding-left: 5px;
    102.       color: #666;
    103.     }
    104.   }
    105.  
    106.   .cart {
    107.     width: 50px;
    108.  
    109.     .curr {
    110.       height: 32px;
    111.       line-height: 32px;
    112.       text-align: center;
    113.       position: relative;
    114.       display: block;
    115.  
    116.       .icon-cart {
    117.         font-size: 22px;
    118.       }
    119.  
    120.       em {
    121.         font-style: normal;
    122.         position: absolute;
    123.         right: 0;
    124.         top: 0;
    125.         padding: 1px 6px;
    126.         line-height: 1;
    127.         background: $helpColor;
    128.         color: #fff;
    129.         font-size: 12px;
    130.         border-radius: 10px;
    131.         font-family: Arial;
    132.       }
    133.     }
    134.   }
    135. }
    136. style>

    吸顶导航交互实现 

    实现吸顶交互

    1. <script setup>
    2. 	import { useScroll } from '@vueuse/core'
    3. 	const { y } = useScroll(window)
    4. script>

    components/LayoutFixed.vue

    1. <script setup>
    2. 	import { useScroll } from '@vueuse/core'
    3. 	const { y } = useScroll(window)
    4. </script>
    5.  
    6. <template>
    7.   <div class="app-header-sticky" :class="{ show: y > 78 }">
    8.     <div class="container">
    9.       <RouterLink class="logo" to="/" />
    10.       <!-- 导航区域 -->
    11.       <ul class="app-header-nav ">
    12.         <li class="home">
    13.           <RouterLink to="/">首页</RouterLink>
    14.         </li>
    15.         <li>
    16.           <RouterLink to="/">居家</RouterLink>
    17.         </li>
    18.         <li>
    19.           <RouterLink to="/">美食</RouterLink>
    20.         </li>
    21.         <li>
    22.           <RouterLink to="/">服饰</RouterLink>
    23.         </li>
    24.         <li>
    25.           <RouterLink to="/">母婴</RouterLink>
    26.         </li>
    27.         <li>
    28.           <RouterLink to="/">个护</RouterLink>
    29.         </li>
    30.         <li>
    31.           <RouterLink to="/">严选</RouterLink>
    32.         </li>
    33.         <li>
    34.           <RouterLink to="/">数码</RouterLink>
    35.         </li>
    36.         <li>
    37.           <RouterLink to="/">运动</RouterLink>
    38.         </li>
    39.         <li>
    40.           <RouterLink to="/">杂项</RouterLink>
    41.         </li>
    42.       </ul>
    43.  
    44.       <div class="right">
    45.         <RouterLink to="/">品牌</RouterLink>
    46.         <RouterLink to="/">专题</RouterLink>
    47.       </div>
    48.     </div>
    49.   </div>
    50. </template>
    51.  
    52.  
    53. <style scoped lang='scss'>
    54. .app-header-sticky {
    55.   width: 100%;
    56.   height: 80px;
    57.   position: fixed;
    58.   left: 0;
    59.   top: 0;
    60.   z-index: 999;
    61.   background-color: #fff;
    62.   border-bottom: 1px solid #e4e4e4;
    63.   // 此处为关键样式!!!
    64.   // 状态一：往上平移自身高度 + 完全透明
    65.   transform: translateY(-100%);
    66.   opacity: 0;
    67.  
    68.   // 状态二：移除平移 + 完全不透明
    69.   &.show {
    70.     transition: all 0.3s linear;
    71.     transform: none;
    72.     opacity: 1;
    73.   }
    74.  
    75.   .container {
    76.     display: flex;
    77.     align-items: center;
    78.   }
    79.  
    80.   .logo {
    81.     width: 200px;
    82.     height: 80px;
    83.     background: url("@/assets/images/logo.png") no-repeat right 2px;
    84.     background-size: 160px auto;
    85.   }
    86.  
    87.   .right {
    88.     width: 220px;
    89.     display: flex;
    90.     text-align: center;
    91.     padding-left: 40px;
    92.     border-left: 2px solid $xtxColor;
    93.  
    94.     a {
    95.       width: 38px;
    96.       margin-right: 40px;
    97.       font-size: 16px;
    98.       line-height: 1;
    99.  
    100.       &:hover {
    101.         color: $xtxColor;
    102.       }
    103.     }
    104.   }
    105. }
    106.  
    107. .app-header-nav {
    108.   width: 820px;
    109.   display: flex;
    110.   padding-left: 40px;
    111.   position: relative;
    112.   z-index: 998;
    113.  
    114.   li {
    115.     margin-right: 40px;
    116.     width: 38px;
    117.     text-align: center;
    118.  
    119.     a {
    120.       font-size: 16px;
    121.       line-height: 32px;
    122.       height: 32px;
    123.       display: inline-block;
    124.  
    125.       &:hover {
    126.         color: $xtxColor;
    127.         border-bottom: 1px solid $xtxColor;
    128.       }
    129.     }
    130.  
    131.     .active {
    132.       color: $xtxColor;
    133.       border-bottom: 1px solid $xtxColor;
    134.     }
    135.   }
    136. }
    137. </style>

    Pinia优化重复请求

    两个导航栏会分别发送一个请求，可以利用pinia只发送一个请求。

    stores/category.js

    1. import { ref } from 'vue'
    2. import { defineStore } from 'pinia'
    3. import { getCategoryAPI } from '@/api/layout'
    4. export const useCategoryStore = defineStore('category', () => {
    5.   // 导航列表的数据管理
    6.   // state 导航列表数据
    7.   const categoryList = ref([])
    8.  
    9.   // action 获取导航数据的方法
    10.   const getCategory = async () => {
    11.     const res = await getCategoryAPI()
    12.     categoryList.value = res.result
    13.   }
    14.  
    15.   return {
    16.     categoryList,
    17.     getCategory
    18.   }
    19. })

     layout/index.vue

    1. <script setup>
    2. import LayoutNav from './components/LayoutNav.vue'
    3. import LayoutHeader from './components/LayoutHeader.vue'
    4. import LayoutFooter from './components/LayoutFooter.vue'
    5. import LayoutFixed from './components/LayoutFixed.vue'
    6.  
    7. //触发导航列表的action
    8. import {useCategoryStore} from '@/stores/category'
    9. import {onMounted} from 'vue'
    10. const categoryStore = useCategoryStore()
    11. onMounted(() => categoryStore.getCategory())
    12. </script>
    13.  
    14. <template>
    15.   <LayoutFixed />
    16.   <LayoutNav />
    17.   <LayoutHeader />
    18.   <RouterView />
    19.   <LayoutFooter />
    20. </template>

    layout/components/LayoutFixed.vue

    1. <script setup>
    2. 	import {useCategoryStore} from '@/stores/category'
    3. 	import { useScroll } from '@vueuse/core'
    4. 	const { y } = useScroll(window)
    5. 	
    6. 	//使用pinia中的数据
    7. 	const categoryStore = useCategoryStore()
    8. 	
    9. 	
    10. </script>
    11.  
    12. <template>
    13.   <div class="app-header-sticky" :class="{ show: y > 78 }">
    14.     <div class="container">
    15.       <RouterLink class="logo" to="/" />
    16.       <!-- 导航区域 -->
    17.       <ul class="app-header-nav ">
    18.         <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
    19.           <RouterLink to="/">{{ item.name }}</RouterLink>
    20.         </li>
    21.       </ul>
    22.  
    23.       <div class="right">
    24.         <RouterLink to="/">品牌</RouterLink>
    25.         <RouterLink to="/">专题</RouterLink>
    26.       </div>
    27.     </div>
    28.   </div>
    29. </template>
    30.  
    31.  
    32. <style scoped lang='scss'>
    33. .app-header-sticky {
    34.   width: 100%;
    35.   height: 80px;
    36.   position: fixed;
    37.   left: 0;
    38.   top: 0;
    39.   z-index: 999;
    40.   background-color: #fff;
    41.   border-bottom: 1px solid #e4e4e4;
    42.   // 此处为关键样式!!!
    43.   // 状态一：往上平移自身高度 + 完全透明
    44.   transform: translateY(-100%);
    45.   opacity: 0;
    46.  
    47.   // 状态二：移除平移 + 完全不透明
    48.   &.show {
    49.     transition: all 0.3s linear;
    50.     transform: none;
    51.     opacity: 1;
    52.   }
    53.  
    54.   .container {
    55.     display: flex;
    56.     align-items: center;
    57.   }
    58.  
    59.   .logo {
    60.     width: 200px;
    61.     height: 80px;
    62.     background: url("@/assets/images/logo.png") no-repeat right 2px;
    63.     background-size: 160px auto;
    64.   }
    65.  
    66.   .right {
    67.     width: 220px;
    68.     display: flex;
    69.     text-align: center;
    70.     padding-left: 40px;
    71.     border-left: 2px solid $xtxColor;
    72.  
    73.     a {
    74.       width: 38px;
    75.       margin-right: 40px;
    76.       font-size: 16px;
    77.       line-height: 1;
    78.  
    79.       &:hover {
    80.         color: $xtxColor;
    81.       }
    82.     }
    83.   }
    84. }
    85.  
    86. .app-header-nav {
    87.   width: 820px;
    88.   display: flex;
    89.   padding-left: 40px;
    90.   position: relative;
    91.   z-index: 998;
    92.  
    93.   li {
    94.     margin-right: 40px;
    95.     width: 38px;
    96.     text-align: center;
    97.  
    98.     a {
    99.       font-size: 16px;
    100.       line-height: 32px;
    101.       height: 32px;
    102.       display: inline-block;
    103.  
    104.       &:hover {
    105.         color: $xtxColor;
    106.         border-bottom: 1px solid $xtxColor;
    107.       }
    108.     }
    109.  
    110.     .active {
    111.       color: $xtxColor;
    112.       border-bottom: 1px solid $xtxColor;
    113.     }
    114.   }
    115. }
    116. </style>

    layout/components/LayoutHeader.vue

    1. <script setup>
    2. 	import {useCategoryStore} from '@/stores/category'
    3. 	import { useScroll } from '@vueuse/core'
    4. 	const { y } = useScroll(window)
    5. 	
    6. 	//使用pinia中的数据
    7. 	const categoryStore = useCategoryStore()
    8. 	
    9. 	
    10. </script>
    11.  
    12. <template>
    13.   <div class="app-header-sticky" :class="{ show: y > 78 }">
    14.     <div class="container">
    15.       <RouterLink class="logo" to="/" />
    16.       <!-- 导航区域 -->
    17.       <ul class="app-header-nav ">
    18.         <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
    19.           <RouterLink to="/">{{ item.name }}</RouterLink>
    20.         </li>
    21.       </ul>
    22.  
    23.       <div class="right">
    24.         <RouterLink to="/">品牌</RouterLink>
    25.         <RouterLink to="/">专题</RouterLink>
    26.       </div>
    27.     </div>
    28.   </div>
    29. </template>
    30.  
    31.  
    32. <style scoped lang='scss'>
    33. .app-header-sticky {
    34.   width: 100%;
    35.   height: 80px;
    36.   position: fixed;
    37.   left: 0;
    38.   top: 0;
    39.   z-index: 999;
    40.   background-color: #fff;
    41.   border-bottom: 1px solid #e4e4e4;
    42.   // 此处为关键样式!!!
    43.   // 状态一：往上平移自身高度 + 完全透明
    44.   transform: translateY(-100%);
    45.   opacity: 0;
    46.  
    47.   // 状态二：移除平移 + 完全不透明
    48.   &.show {
    49.     transition: all 0.3s linear;
    50.     transform: none;
    51.     opacity: 1;
    52.   }
    53.  
    54.   .container {
    55.     display: flex;
    56.     align-items: center;
    57.   }
    58.  
    59.   .logo {
    60.     width: 200px;
    61.     height: 80px;
    62.     background: url("@/assets/images/logo.png") no-repeat right 2px;
    63.     background-size: 160px auto;
    64.   }
    65.  
    66.   .right {
    67.     width: 220px;
    68.     display: flex;
    69.     text-align: center;
    70.     padding-left: 40px;
    71.     border-left: 2px solid $xtxColor;
    72.  
    73.     a {
    74.       width: 38px;
    75.       margin-right: 40px;
    76.       font-size: 16px;
    77.       line-height: 1;
    78.  
    79.       &:hover {
    80.         color: $xtxColor;
    81.       }
    82.     }
    83.   }
    84. }
    85.  
    86. .app-header-nav {
    87.   width: 820px;
    88.   display: flex;
    89.   padding-left: 40px;
    90.   position: relative;
    91.   z-index: 998;
    92.  
    93.   li {
    94.     margin-right: 40px;
    95.     width: 38px;
    96.     text-align: center;
    97.  
    98.     a {
    99.       font-size: 16px;
    100.       line-height: 32px;
    101.       height: 32px;
    102.       display: inline-block;
    103.  
    104.       &:hover {
    105.         color: $xtxColor;
    106.         border-bottom: 1px solid $xtxColor;
    107.       }
    108.     }
    109.  
    110.     .active {
    111.       color: $xtxColor;
    112.       border-bottom: 1px solid $xtxColor;
    113.     }
    114.   }
    115. }
    116. </style>

     发现只有一次请求。

    Home页 

    在home/components下新建5个vue文件

    • HomeCategory
    1. <script setup>
    2. </script>
    3.  
    4. <template>
    5.   <div> 我是分类 </div>
    6. </template>
    • HomeBanner
    1. <script setup>
    2. </script>
    3.  
    4. <template>
    5.   <div> 我是banner </div>
    6. </template>
    • HomeNew
    1. <script setup>
    2. </script>
    3.  
    4. <template>
    5.   <div> 人气推荐 </div>
    6. </template>
    • HomeHot
    1. <script setup>
    2. </script>
    3.  
    4. <template>
    5.   <div> 新鲜好物 </div>
    6. </template>
    • HomeProduct
    1. <script setup>
    2. </script>
    3.  
    4. <template>
    5.   <div> 产品列表 </div>
    6. </template>

    home/index.vue

    1. <script setup>
    2. import HomeCategory from './components/HomeCategory.vue'
    3. import HomeBanner from './components/HomeBanner.vue'
    4. import HomeNew from './components/HomeNew.vue'
    5. import HomeHot from './components/HomeHot.vue'
    6. import HomeProduct from './components/HomeProduct.vue'
    7. </script>
    8.  
    9. <template>
    10.   <div class="container">
    11.     <HomeCategory />
    12.     <HomeBanner />
    13.   </div>
    14.   <HomeNew />
    15.   <HomeHot />
    16.   <HomeProduct />
    17. </template>

    分类实现

    home/components/HomeCategory.vue

    1. <script setup>
    2. 	import {useCategoryStore} from '@/stores/category'
    3. 	const categoryStore = useCategoryStore()
    4. </script>
    5.  
    6. <template>
    7.   <div class="home-category">
    8.     <ul class="menu">
    9.       <li v-for="item in categoryStore.categoryList" :key="item.id">
    10.         <RouterLink to="/">{{item.name}}</RouterLink>
    11.         <RouterLink v-for="i in item.children.slice(0,2)" :key="i" to="/">{{i.name}}</RouterLink>
    12.         <!-- 弹层layer位置 -->
    13.         <div class="layer">
    14.           <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
    15.           <ul>
    16.             <li v-for="i in item.goods" :key="i.id">
    17.               <RouterLink to="/">
    18.                 <img :src="i.picture" alt="" />
    19.                 <div class="info">
    20.                   <p class="name ellipsis-2">
    21.                     {{i.name}}
    22.                   </p>
    23.                   <p class="desc ellipsis">{{i.desc}}</p>
    24.                   <p class="price"><i>¥</i>{{i.price}}</p>
    25.                 </div>
    26.               </RouterLink>
    27.             </li>
    28.           </ul>
    29.         </div>
    30.       </li>
    31.     </ul>
    32.   </div>
    33. </template>
    34.  
    35.  
    36. <style scoped lang='scss'>
    37. .home-category {
    38.   width: 250px;
    39.   height: 500px;
    40.   background: rgba(0, 0, 0, 0.8);
    41.   position: relative;
    42.   z-index: 99;
    43.  
    44.   .menu {
    45.     li {
    46.       padding-left: 40px;
    47.       height: 55px;
    48.       line-height: 55px;
    49.  
    50.       &:hover {
    51.         background: $xtxColor;
    52.       }
    53.  
    54.       a {
    55.         margin-right: 4px;
    56.         color: #fff;
    57.  
    58.         &:first-child {
    59.           font-size: 16px;
    60.         }
    61.       }
    62.  
    63.       .layer {
    64.         width: 990px;
    65.         height: 500px;
    66.         background: rgba(255, 255, 255, 0.8);
    67.         position: absolute;
    68.         left: 250px;
    69.         top: 0;
    70.         display: none;
    71.         padding: 0 15px;
    72.  
    73.         h4 {
    74.           font-size: 20px;
    75.           font-weight: normal;
    76.           line-height: 80px;
    77.  
    78.           small {
    79.             font-size: 16px;
    80.             color: #666;
    81.           }
    82.         }
    83.  
    84.         ul {
    85.           display: flex;
    86.           flex-wrap: wrap;
    87.  
    88.           li {
    89.             width: 310px;
    90.             height: 120px;
    91.             margin-right: 15px;
    92.             margin-bottom: 15px;
    93.             border: 1px solid #eee;
    94.             border-radius: 4px;
    95.             background: #fff;
    96.  
    97.             &:nth-child(3n) {
    98.               margin-right: 0;
    99.             }
    100.  
    101.             a {
    102.               display: flex;
    103.               width: 100%;
    104.               height: 100%;
    105.               align-items: center;
    106.               padding: 10px;
    107.  
    108.               &:hover {
    109.                 background: #e3f9f4;
    110.               }
    111.  
    112.               img {
    113.                 width: 95px;
    114.                 height: 95px;
    115.               }
    116.  
    117.               .info {
    118.                 padding-left: 10px;
    119.                 line-height: 24px;
    120.                 overflow: hidden;
    121.  
    122.                 .name {
    123.                   font-size: 16px;
    124.                   color: #666;
    125.                 }
    126.  
    127.                 .desc {
    128.                   color: #999;
    129.                 }
    130.  
    131.                 .price {
    132.                   font-size: 22px;
    133.                   color: $priceColor;
    134.  
    135.                   i {
    136.                     font-size: 16px;
    137.                   }
    138.                 }
    139.               }
    140.             }
    141.           }
    142.         }
    143.       }
    144.  
    145.       // 关键样式  hover状态下的layer盒子变成block
    146.       &:hover {
    147.         .layer {
    148.           display: block;
    149.         }
    150.       }
    151.     }
    152.   }
    153. }
    154. </style>

    banner轮播图 

    home/components/HomeBanner.vue

    1. <script setup>
    2.  
    3. </script>
    4.  
    5.  
    6.  
    7. <template>
    8.   <div class="home-banner">
    9.     <el-carousel height="500px">
    10.       <el-carousel-item v-for="item in 4" :key="item">
    11.         <img src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg" alt="">
    12.       </el-carousel-item>
    13.     </el-carousel>
    14.   </div>
    15. </template>
    16.  
    17.  
    18.  
    19. <style scoped lang='scss'>
    20. .home-banner {
    21.   width: 1240px;
    22.   height: 500px;
    23.   position: absolute;
    24.   left: 0;
    25.   top: 0;
    26.   z-index: 98;
    27.  
    28.   img {
    29.     width: 100%;
    30.     height: 500px;
    31.   }
    32. }
    33. </style>

    获取数据 

    api/home.js

    1. import  httpInstance  from '@/utils/http'
    2. export function getBannerAPI (){
    3.   return httpInstance({
    4.     url:'home/banner'
    5.   })
    6. }

    home/components/HomeBanner.vue

    1. <script setup>
    2. import { getBannerAPI } from '@/api/home'
    3. import { onMounted, ref } from 'vue'
    4.  
    5. const bannerList = ref([])
    6.  
    7. const getBanner = async () => {
    8.   const res = await getBannerAPI()
    9.   console.log(res)
    10.   bannerList.value = res.result
    11. }
    12.  
    13. onMounted(() => getBanner())
    14.  
    15. </script>
    16.  
    17. <template>
    18.   <div class="home-banner">
    19.     <el-carousel height="500px">
    20.       <el-carousel-item v-for="item in bannerList" :key="item.id">
    21.         <img :src="item.imgUrl" alt="">
    22.       </el-carousel-item>
    23.     </el-carousel>
    24.   </div>
    25. </template>
    26.  
    27. <style scoped lang='scss'>
    28. .home-banner {
    29.   width: 1240px;
    30.   height: 500px;
    31.   position: absolute;
    32.   left: 0;
    33.   top: 0;
    34.   z-index: 98;
    35.  
    36.   img {
    37.     width: 100%;
    38.     height: 500px;
    39.   }
    40. }
    41. </style>

     轮播图就实现了。

    新鲜好物实现

    home/components/HomePanel.vue

    1. <script setup>
    2.  
    3. defineProps({
    4.   title: {
    5.     type: String,
    6.     default: ''
    7.   },
    8.   subTitle: {
    9.     type: String,
    10.     default: ''
    11.   }
    12. })
    13.  
    14. script>
    15.  
    16.  
    17. <template>
    18.   <div class="home-panel">
    19.     <div class="container">
    20.       <div class="head">
    21.         
    22.         <h3>
    23.           {{ title }}<small>{{ subTitle }}small>
    24.         h3>
    25.       div>
    26.       
    27.       <slot name="main" />
    28.     div>
    29.   div>
    30. template>
    31.  
    32.  
    33. <style scoped lang='scss'>
    34. .home-panel {
    35.   background-color: #fff;
    36.  
    37.   .head {
    38.     padding: 40px 0;
    39.     display: flex;
    40.     align-items: flex-end;
    41.  
    42.     h3 {
    43.       flex: 1;
    44.       font-size: 32px;
    45.       font-weight: normal;
    46.       margin-left: 6px;
    47.       height: 35px;
    48.       line-height: 35px;
    49.  
    50.       small {
    51.         font-size: 16px;
    52.         color: #999;
    53.         margin-left: 20px;
    54.       }
    55.     }
    56.   }
    57. }
    58. style>

    api/home添加：

    1. /**
    2.  * @description: 获取新鲜好物
    3.  * @param {*}
    4.  * @return {*}
    5.  */
    6. export const getNewAPI = () => {
    7.   return httpInstance({
    8.     url:'/home/new'
    9.   })
    10. }

    home/components/HomeNew.vue

    1. <script setup>
    2. import HomePanel from './HomePanel.vue'
    3. import { getNewAPI } from '@/api/home'
    4. import { ref } from 'vue'
    5. const newList = ref([])
    6. const getNewList = async () => {
    7.   const res = await getNewAPI()
    8.   newList.value = res.result
    9. }
    10.  
    11. getNewList()
    12. </script>
    13.  
    14. <template>
    15.   <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    16.     <template #main>
    17.       <ul class="goods-list">
    18.         <li v-for="item in newList" :key="item.id">
    19.           <RouterLink :to="`/detail/${item.id}`">
    20.             <img :src="item.picture" alt="" />
    21.             <p class="name">{{ item.name }}</p>
    22.             <p class="price">&yen;{{ item.price }}</p>
    23.           </RouterLink>
    24.         </li>
    25.       </ul>
    26.     </template>
    27.   </HomePanel>
    28. </template>
    29.  
    30. <style scoped lang='scss'>
    31. .goods-list {
    32.   display: flex;
    33.   justify-content: space-between;
    34.   height: 406px;
    35.  
    36.   li {
    37.     width: 306px;
    38.     height: 406px;
    39.  
    40.     background: #f0f9f4;
    41.     transition: all .5s;
    42.  
    43.     &:hover {
    44.       transform: translate3d(0, -3px, 0);
    45.       box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    46.     }
    47.  
    48.     img {
    49.       width: 306px;
    50.       height: 306px;
    51.     }
    52.  
    53.     p {
    54.       font-size: 22px;
    55.       padding-top: 12px;
    56.       text-align: center;
    57.       text-overflow: ellipsis;
    58.       overflow: hidden;
    59.       white-space: nowrap;
    60.     }
    61.  
    62.     .price {
    63.       color: $priceColor;
    64.     }
    65.   }
    66. }
    67. </style>

    人气推荐实现 

    api/home添加：

    1. /**
    2.  * @description: 获取人气推荐
    3.  * @param {*}
    4.  * @return {*}
    5.  */
    6. export const getHotAPI = () => {
    7.   return  httpInstance({
    8. 	  url:'/home/hot'
    9.   })
    10. }

    home/components/HomeHot.vue

    1. <script setup>
    2. import HomePanel from './HomePanel.vue'
    3. import { getHotAPI } from '@/api/home'
    4. import { ref } from 'vue'
    5. const hotList = ref([])
    6. const getHotList = async () => {
    7.   const res = await getHotAPI()
    8.   hotList.value = res.result
    9. }
    10. getHotList()
    11. console.log(hotList)
    12.  
    13. </script>
    14.  
    15. <template>
    16.   <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
    17.     <template #main>
    18.       <ul class="goods-list">
    19.         <li v-for="item in hotList" :key="item.id">
    20.           <RouterLink :to="`/detail/${item.id}`">
    21.             <img :src="item.picture" alt="" />
    22.             <p class="name">{{ item.title }}</p>
    23.             <p class="desc">{{ item.alt }}</p>
    24.           </RouterLink>
    25.         </li>
    26.       </ul>
    27.     </template>
    28.   </HomePanel>
    29. </template>
    30.  
    31. <style scoped lang='scss'>
    32. .goods-list {
    33.   display: flex;
    34.   justify-content: space-between;
    35.   height: 426px;
    36.  
    37.   li {
    38.     width: 306px;
    39.     height: 406px;
    40.     transition: all .5s;
    41.  
    42.     &:hover {
    43.       transform: translate3d(0, -3px, 0);
    44.       box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    45.     }
    46.  
    47.     img {
    48.       width: 306px;
    49.       height: 306px;
    50.     }
    51.  
    52.     p {
    53.       font-size: 22px;
    54.       padding-top: 12px;
    55.       text-align: center;
    56.     }
    57.  
    58.     .desc {
    59.       color: #999;
    60.       font-size: 18px;
    61.     }
    62.   }
    63. }
    64. </style>

    懒加载指令实现 

    directives/index.js

    1. // 定义懒加载插件
    2. import { useIntersectionObserver } from '@vueuse/core'
    3.  
    4. export const directivePlugin = {
    5.   install (app) {
    6.     // 懒加载指令逻辑
    7.     app.directive('img-lazy', {
    8.       mounted (el, binding) {
    9.         // el: 指令绑定的那个元素 img
    10.         // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
    11.         console.log(el, binding.value)
    12.         useIntersectionObserver(
    13.           el,
    14.           ([{ isIntersecting }]) => {
    15.             console.log(isIntersecting)
    16.             if (isIntersecting) {
    17.               // 进入视口区域
    18.               el.src = binding.value
    19.               stop()
    20.             }
    21.           },
    22.         )
    23.       }
    24.     })
    25.   }
    26. }

    修改main.js

    1. app.use(createPinia())
    2. app.use(router)
    3. app.use(directivePlugin)
    4. app.mount('#app')

    产品列表实现

    api/home.js新增

    1. /**
    2.  * @description: 获取所有商品模块
    3.  * @param {*}
    4.  * @return {*}
    5.  */
    6. export const getGoodsAPI = () => {
    7.   return httpInstance({
    8.     url: '/home/goods'
    9.   })
    10. }

     home/components/HomeProduct.vue

    1. <script setup>
    2. import HomePanel from './HomePanel.vue'
    3. import {getGoodsAPI} from '@/api/home'
    4. import {onMounted,ref} from 'vue'
    5.  
    6. //获取数据列表
    7. const goodsProduct = ref([])
    8. const getGoods = async () => {
    9. 	const res = await getGoodsAPI()
    10. 	goodsProduct.value = res.result
    11. }
    12.  
    13. onMounted(()=>getGoods())
    14.  
    15. </script>
    16.  
    17. <template>
    18.   <div class="home-product">
    19.     <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
    20. 	  <template #main>
    21. 		<div class="box">
    22. 		  <RouterLink class="cover" to="/">
    23. 		    <img :src="cate.picture" />
    24. 		    <strong class="label">
    25. 		      <span>{{ cate.name }}馆</span>
    26. 		      <span>{{ cate.saleInfo }}</span>
    27. 		    </strong>
    28. 		  </RouterLink>
    29. 		  <ul class="goods-list">
    30. 		    <li v-for="good in cate.goods" :key="good.id">
    31. 		      <RouterLink to="/" class="goods-item">
    32. 		        <img :src="good.picture" alt="" />
    33. 		        <p class="name ellipsis">{{ good.name }}</p>
    34. 		        <p class="desc ellipsis">{{ good.desc }}</p>
    35. 		        <p class="price">&yen;{{ good.price }}</p>
    36. 		      </RouterLink>
    37. 		    </li>
    38. 		  </ul>
    39. 		</div>
    40. 	  </template>
    41.     </HomePanel>
    42.   </div>
    43. </template>
    44.  
    45. <style scoped lang='scss'>
    46. .home-product {
    47.   background: #fff;
    48.   margin-top: 20px;
    49.   .sub {
    50.     margin-bottom: 2px;
    51.  
    52.     a {
    53.       padding: 2px 12px;
    54.       font-size: 16px;
    55.       border-radius: 4px;
    56.  
    57.       &:hover {
    58.         background: $xtxColor;
    59.         color: #fff;
    60.       }
    61.  
    62.       &:last-child {
    63.         margin-right: 80px;
    64.       }
    65.     }
    66.   }
    67.  
    68.   .box {
    69.     display: flex;
    70.  
    71.     .cover {
    72.       width: 240px;
    73.       height: 610px;
    74.       margin-right: 10px;
    75.       position: relative;
    76.  
    77.       img {
    78.         width: 100%;
    79.         height: 100%;
    80.       }
    81.  
    82.       .label {
    83.         width: 188px;
    84.         height: 66px;
    85.         display: flex;
    86.         font-size: 18px;
    87.         color: #fff;
    88.         line-height: 66px;
    89.         font-weight: normal;
    90.         position: absolute;
    91.         left: 0;
    92.         top: 50%;
    93.         transform: translate3d(0, -50%, 0);
    94.  
    95.         span {
    96.           text-align: center;
    97.  
    98.           &:first-child {
    99.             width: 76px;
    100.             background: rgba(0, 0, 0, 0.9);
    101.           }
    102.  
    103.           &:last-child {
    104.             flex: 1;
    105.             background: rgba(0, 0, 0, 0.7);
    106.           }
    107.         }
    108.       }
    109.     }
    110.  
    111.     .goods-list {
    112.       width: 990px;
    113.       display: flex;
    114.       flex-wrap: wrap;
    115.  
    116.       li {
    117.         width: 240px;
    118.         height: 300px;
    119.         margin-right: 10px;
    120.         margin-bottom: 10px;
    121.  
    122.         &:nth-last-child(-n + 4) {
    123.           margin-bottom: 0;
    124.         }
    125.  
    126.         &:nth-child(4n) {
    127.           margin-right: 0;
    128.         }
    129.       }
    130.     }
    131.  
    132.     .goods-item {
    133.       display: block;
    134.       width: 220px;
    135.       padding: 20px 30px;
    136.       text-align: center;
    137.       transition: all .5s;
    138.  
    139.       &:hover {
    140.         transform: translate3d(0, -3px, 0);
    141.         box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    142.       }
    143.  
    144.       img {
    145.         width: 160px;
    146.         height: 160px;
    147.       }
    148.  
    149.       p {
    150.         padding-top: 10px;
    151.       }
    152.  
    153.       .name {
    154.         font-size: 16px;
    155.       }
    156.  
    157.       .desc {
    158.         color: #999;
    159.         height: 29px;
    160.       }
    161.  
    162.       .price {
    163.         color: $priceColor;
    164.         font-size: 20px;
    165.       }
    166.     }
    167.   }
    168. }
    169. </style>

    这里没有用懒加载的形式，因为总有一些图片加载不出来，原因不明。 

    GoodsItem组件封装 

     home/components/GoodsItem.vue

    1.  
    2. <script setup>
    3. defineProps({
    4.   goods: {
    5.     type: Object,
    6.     default: () => { }
    7.   }
    8. })
    9. </script>
    10.  
    11. <template>
    12.   <RouterLink to="/" class="goods-item">
    13.     <img :src="goods.picture" alt="" />
    14.     <p class="name ellipsis">{{ goods.name }}</p>
    15.     <p class="desc ellipsis">{{ goods.desc }}</p>
    16.     <p class="price">&yen;{{ goods.price }}</p>
    17.   </RouterLink>
    18. </template>
    19.  
    20.  
    21. <style scoped lang="scss">
    22. .goods-item {
    23.   display: block;
    24.   width: 220px;
    25.   padding: 20px 30px;
    26.   text-align: center;
    27.   transition: all .5s;
    28.  
    29.   &:hover {
    30.     transform: translate3d(0, -3px, 0);
    31.     box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    32.   }
    33.  
    34.   img {
    35.     width: 160px;
    36.     height: 160px;
    37.   }
    38.  
    39.   p {
    40.     padding-top: 10px;
    41.   }
    42.  
    43.   .name {
    44.     font-size: 16px;
    45.   }
    46.  
    47.   .desc {
    48.     color: #999;
    49.     height: 29px;
    50.   }
    51.  
    52.   .price {
    53.     color: $priceColor;
    54.     font-size: 20px;
    55.   }
    56. }
    57. </style>

     home/components/HomeProduct.vue修改

    1. import GoodsItem from './GoodsItem.vue'
    2.  
    3. <ul class="goods-list">
    4. 	<li v-for="good in cate.goods" :key="good.id">
    5. 		<GoodsItem :goods="good"/>
    6. 	</li>
    7. </ul>

    一级分类页 

    导航栏

    router/index.js修改

    1. children: [
    2. 			{
    3. 				path: '',
    4. 				component: Home
    5. 			},
    6. 			{
    7. 				path: 'category/:id',
    8. 				component: Category
    9. 			}
    10. 		]

    layout/components/LayoutHeader.vue修改

    layout/components/LayoutFixed.vue修改

    <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>

    api/category.vue

    1. import httpInstance from '@/utils/http'
    2.  
    3. /**
    4.  * @description: 获取分类数据
    5.  * @param {*} id 分类id 
    6.  * @return {*}
    7.  */
    8. export const findTopCategoryAPI = (id) => {
    9.   return httpInstance({
    10.     url:'/category',
    11.     params:{
    12.       id
    13.     }
    14.   })
    15. }

    views/category/index.vue

    1. <script setup>
    2.   import { findTopCategoryAPI } from '@/api/category'
    3.   import {ref} from 'vue'
    4.   import {useRoute} from 'vue-router'
    5.   const categoryData = ref({})
    6.   const route = useRoute()
    7.   const getCategory = async (id) => {
    8.     // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
    9.     const res = await findTopCategoryAPI(id)
    10.     categoryData.value = res.result
    11.   }
    12.   getCategory(route.params.id)
    13. script>
    14.  
    15.  
    16. <template>
    17.   <div class="bread-container">
    18.     <el-breadcrumb separator=">">
    19.       <el-breadcrumb-item :to="{ path: '/' }">首页el-breadcrumb-item>
    20.       <el-breadcrumb-item>{{ categoryData.name }}el-breadcrumb-item>
    21.     el-breadcrumb>
    22.   div>
    23. template>
    24.  
    25.  
    26. <style scoped lang="scss">
    27. .top-category {
    28.   h3 {
    29.     font-size: 28px;
    30.     color: #666;
    31.     font-weight: normal;
    32.     text-align: center;
    33.     line-height: 100px;
    34.   }
    35.  
    36.   .sub-list {
    37.     margin-top: 20px;
    38.     background-color: #fff;
    39.  
    40.     ul {
    41.       display: flex;
    42.       padding: 0 32px;
    43.       flex-wrap: wrap;
    44.  
    45.       li {
    46.         width: 168px;
    47.         height: 160px;
    48.  
    49.  
    50.         a {
    51.           text-align: center;
    52.           display: block;
    53.           font-size: 16px;
    54.  
    55.           img {
    56.             width: 100px;
    57.             height: 100px;
    58.           }
    59.  
    60.           p {
    61.             line-height: 40px;
    62.           }
    63.  
    64.           &:hover {
    65.             color: $xtxColor;
    66.           }
    67.         }
    68.       }
    69.     }
    70.   }
    71.  
    72.   .ref-goods {
    73.     background-color: #fff;
    74.     margin-top: 20px;
    75.     position: relative;
    76.  
    77.     .head {
    78.       .xtx-more {
    79.         position: absolute;
    80.         top: 20px;
    81.         right: 20px;
    82.       }
    83.  
    84.       .tag {
    85.         text-align: center;
    86.         color: #999;
    87.         font-size: 20px;
    88.         position: relative;
    89.         top: -20px;
    90.       }
    91.     }
    92.  
    93.     .body {
    94.       display: flex;
    95.       justify-content: space-around;
    96.       padding: 0 40px 30px;
    97.     }
    98.   }
    99.  
    100.   .bread-container {
    101.     padding: 25px 0;
    102.   }
    103. }
    104. style>

    分类Banner渲染 

    api/home.js修改

    1. export function getBannerAPI (params = {}) {
    2.   // 默认为1 商品为2
    3.   const { distributionSite = '1' } = params
    4.   return httpInstance({
    5.     url: '/home/banner',
    6.     params: {
    7.       distributionSite
    8.     }
    9.   })
    10. }

    category/index.vue 

    1. <script setup>
    2.   import { findTopCategoryAPI } from '@/api/category'
    3.   import {ref,onMounted} from 'vue'
    4.   import {useRoute} from 'vue-router'
    5.   import { getBannerAPI } from '@/api/home'
    6.   const categoryData = ref({})
    7.   const route = useRoute()
    8.   const getCategory = async (id) => {
    9.     // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
    10.     const res = await findTopCategoryAPI(id)
    11.     categoryData.value = res.result
    12.   }
    13.   getCategory(route.params.id)
    14.   //获取banner
    15.   const bannerList = ref([])
    16.   const getBanner = async () => {
    17.     const res = await getBannerAPI()
    18.     console.log(res)
    19.     bannerList.value = res.result
    20.   }
    21.   onMounted(() => getBanner())
    22. script>
    23.  
    24.  
    25. <template>
    26.   <div class="bread-container">
    27.     <el-breadcrumb separator=">">
    28.       <el-breadcrumb-item :to="{ path: '/' }">首页el-breadcrumb-item>
    29.       <el-breadcrumb-item>{{ categoryData.name }}el-breadcrumb-item>
    30.     el-breadcrumb>
    31.   div>
    32.   
    33.   <div class="home-banner">
    34.     <el-carousel height="500px">
    35.       <el-carousel-item v-for="item in bannerList" :key="item.id">
    36.         <img :src="item.imgUrl" alt="">
    37.       el-carousel-item>
    38.     el-carousel>
    39.   div>
    40. template>
    41.  
    42.  
    43. <style scoped lang="scss">
    44. .home-banner {
    45.   width: 1240px;
    46.   height: 500px;
    47.   margin: 0 auto;
    48.   z-index: 98;
    49.  
    50.   img {
    51.     width: 100%;
    52.     height: 500px;
    53.   }
    54. }
    55. .top-category {
    56.   h3 {
    57.     font-size: 28px;
    58.     color: #666;
    59.     font-weight: normal;
    60.     text-align: center;
    61.     line-height: 100px;
    62.   }
    63.  
    64.   .sub-list {
    65.     margin-top: 20px;
    66.     background-color: #fff;
    67.  
    68.     ul {
    69.       display: flex;
    70.       padding: 0 32px;
    71.       flex-wrap: wrap;
    72.  
    73.       li {
    74.         width: 168px;
    75.         height: 160px;
    76.  
    77.  
    78.         a {
    79.           text-align: center;
    80.           display: block;
    81.           font-size: 16px;
    82.  
    83.           img {
    84.             width: 100px;
    85.             height: 100px;
    86.           }
    87.  
    88.           p {
    89.             line-height: 40px;
    90.           }
    91.  
    92.           &:hover {
    93.             color: $xtxColor;
    94.           }
    95.         }
    96.       }
    97.     }
    98.   }
    99.  
    100.   .ref-goods {
    101.     background-color: #fff;
    102.     margin-top: 20px;
    103.     position: relative;
    104.  
    105.     .head {
    106.       .xtx-more {
    107.         position: absolute;
    108.         top: 20px;
    109.         right: 20px;
    110.       }
    111.  
    112.       .tag {
    113.         text-align: center;
    114.         color: #999;
    115.         font-size: 20px;
    116.         position: relative;
    117.         top: -20px;
    118.       }
    119.     }
    120.  
    121.     .body {
    122.       display: flex;
    123.       justify-content: space-around;
    124.       padding: 0 40px 30px;
    125.     }
    126.   }
    127.  
    128.   .bread-container {
    129.     padding: 25px 0;
    130.   }
    131. }
    132. style>

    导航激活 

    layout/components/LayoutHeader.vue修改

    layout/components/LayoutFixed.vue修改

    <RouterLink active-class="active" :to="`/category/${item.id}`">{{ item.name }}</RouterLink>

    分类列表渲染 

    category/index.vue

    1. <script setup>
    2.   import { findTopCategoryAPI } from '@/api/category'
    3.   import {ref,onMounted} from 'vue'
    4.   import {useRoute} from 'vue-router'
    5.   import { getBannerAPI } from '@/api/home'
    6.   import GoodsItem from '../home/components/GoodsItem.vue'
    7.   const categoryData = ref({})
    8.   const route = useRoute()
    9.   const getCategory = async (id) => {
    10.     // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
    11.     const res = await findTopCategoryAPI(id)
    12.     categoryData.value = res.result
    13.   }
    14.   getCategory(route.params.id)
    15.   //获取banner
    16.   const bannerList = ref([])
    17.   const getBanner = async () => {
    18.     const res = await getBannerAPI()
    19.     console.log(res)
    20.     bannerList.value = res.result
    21.   }
    22.   onMounted(() => getBanner())
    23. </script>
    24.  
    25.  
    26. <template>
    27.   <!-- 分类 -->
    28.   <div class="top-category">
    29. 	<div class="bread-container">
    30. 	  <el-breadcrumb separator=">">
    31. 	    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    32. 	    <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
    33. 	  </el-breadcrumb>
    34. 	</div>
    35. 	<!-- 轮播图 -->
    36. 	<div class="home-banner">
    37. 	  <el-carousel height="500px">
    38. 	    <el-carousel-item v-for="item in bannerList" :key="item.id">
    39. 	      <img :src="item.imgUrl" alt="">
    40. 	    </el-carousel-item>
    41. 	  </el-carousel>
    42. 	</div>
    43. 	<div class="sub-list">
    44. 	  <h3>全部分类</h3>
    45. 	  <ul>
    46. 	    <li v-for="i in categoryData.children" :key="i.id">
    47. 	      <RouterLink to="/">
    48. 	        <img :src="i.picture" />
    49. 	        <p>{{ i.name }}</p>
    50. 	      </RouterLink>
    51. 	    </li>
    52. 	  </ul>
    53. 	</div>
    54. 	<div class="ref-goods" v-for="item in categoryData.children" :key="item.id">
    55. 	  <div class="head">
    56. 	    <h3>- {{ item.name }}-</h3>
    57. 	  </div>
    58. 	  <div class="body">
    59. 	    <GoodsItem v-for="good in item.goods" :goods="good" :key="good.id" />
    60. 	  </div>
    61. 	</div>
    62.   </div>
    63. </template>
    64.  
    65.  
    66. <style scoped lang="scss">
    67. .top-category {
    68.   width: 1240px;
    69.   margin: 0 auto;
    70.   h3 {
    71.     font-size: 28px;
    72.     color: #666;
    73.     font-weight: normal;
    74.     text-align: center;
    75.     line-height: 100px;
    76.   }
    77.   .bread-container {
    78.       padding: 25px 0;
    79.   }
    80.   .home-banner {
    81.     width: 1240px;
    82.     height: 500px;
    83.     margin: 0 auto;
    84.     z-index: 98;
    85.   
    86.     img {
    87.       width: 100%;
    88.       height: 500px;
    89.     }
    90.   }
    91.   .sub-list {
    92.     margin-top: 20px;
    93.     background-color: #fff;
    94.  
    95.     ul {
    96.       display: flex;
    97.       padding: 0 32px;
    98.       flex-wrap: wrap;
    99. 	  justify-content: space-around;
    100.  
    101.       li {
    102.         width: 168px;
    103.         height: 160px;
    104.  
    105.  
    106.         a {
    107.           text-align: center;
    108.           display: block;
    109.           font-size: 16px;
    110.  
    111.           img {
    112.             width: 100px;
    113.             height: 100px;
    114.           }
    115.  
    116.           p {
    117.             line-height: 40px;
    118.           }
    119.  
    120.           &:hover {
    121.             color: $xtxColor;
    122.           }
    123.         }
    124.       }
    125.     }
    126.   }
    127.  
    128.   .ref-goods {
    129.     background-color: #fff;
    130.     margin-top: 20px;
    131.     position: relative;
    132.  
    133.     .head {
    134.       .xtx-more {
    135.         position: absolute;
    136.         top: 20px;
    137.         right: 20px;
    138.       }
    139.  
    140.       .tag {
    141.         text-align: center;
    142.         color: #999;
    143.         font-size: 20px;
    144.         position: relative;
    145.         top: -20px;
    146.       }
    147.     }
    148.  
    149.     .body {
    150.       display: flex;
    151.       justify-content: space-around;
    152.       padding: 0 40px 30px;
    153.     }
    154.   }
    155. }
    156. </style>

    路由缓存问题 

    banner与分类商品在刷新的时候都会请求一次，但banner是没必要刷新的，且导航栏需要刷新才能更新。

    category/index.vue修改

    1. import {useRoute,onBeforeRouteUpdate} from 'vue-router'
    2.  
    3. // 目标:路由参数变化的时候 可以把分类数据接口重新发送
    4.     onBeforeRouteUpdate((to) => {
    5.       // 存在问题：使用最新的路由参数请求最新的分类数据
    6.       getCategory(to.params.id)
    7.     })

    业务逻辑的函数拆分 

    将banner和分类抽象出来。

    useBanner.js

    1. // 封装banner轮播图相关的业务代码
    2. import { ref, onMounted } from 'vue'
    3. import { getBannerAPI } from '@/api/home'
    4.  
    5. export function useBanner () {
    6.   //获取banner
    7.   const bannerList = ref([])
    8.   const getBanner = async () => {
    9.     const res = await getBannerAPI()
    10.     console.log(res)
    11.     bannerList.value = res.result
    12.   }
    13.   onMounted(() => getBanner())
    14.   return {
    15.     bannerList
    16.   }
    17. }

    useCategory.js

    1. // 封装分类数据业务相关代码
    2. import { onMounted, ref } from 'vue'
    3. import { findTopCategoryAPI } from '@/api/category'
    4. import { useRoute } from 'vue-router'
    5. import { onBeforeRouteUpdate } from 'vue-router'
    6.  
    7. export function useCategory () {
    8.   const categoryData = ref({})
    9.     const route = useRoute()
    10.     const getCategory = async (id) => {
    11.       // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
    12.       const res = await findTopCategoryAPI(id)
    13.       categoryData.value = res.result
    14.     }
    15.   getCategory(route.params.id)
    16.  
    17.   // 目标:路由参数变化的时候 可以把分类数据接口重新发送
    18.   onBeforeRouteUpdate((to) => {
    19.     // 存在问题：使用最新的路由参数请求最新的分类数据
    20.     getCategory(to.params.id)
    21.   })
    22.   return {
    23.     categoryData
    24.   }
    25. }

     index.vue修改

    1. <script setup>
    2.   import GoodsItem from '../home/components/GoodsItem.vue'
    3.   import {useBanner} from './composables/useBanner'
    4.   import { useCategory } from './composables/useCategory'
    5.   
    6.   const {bannerList} = useBanner()
    7.   const { categoryData } = useCategory()
    8. script>

    二级分类页 

    实现

    views下新建

    index.vue

    1. <script setup>
    2.  
    3.  
    4. </script>
    5.  
    6. <template>
    7.   <div class="container ">
    8.     <!-- 面包屑 -->
    9.     <div class="bread-container">
    10.       <el-breadcrumb separator=">">
    11.         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    12.         <el-breadcrumb-item :to="{ path: '/' }">居家
    13.         </el-breadcrumb-item>
    14.         <el-breadcrumb-item>居家生活用品</el-breadcrumb-item>
    15.       </el-breadcrumb>
    16.     </div>
    17.     <div class="sub-container">
    18.       <el-tabs>
    19.         <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
    20.         <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
    21.         <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
    22.       </el-tabs>
    23.       <div class="body">
    24.          <!-- 商品列表-->
    25.       </div>
    26.     </div>
    27.   </div>
    28.  
    29. </template>
    30.  
    31.  
    32.  
    33. <style lang="scss" scoped>
    34. .bread-container {
    35.   padding: 25px 0;
    36.   color: #666;
    37. }
    38.  
    39. .sub-container {
    40.   padding: 20px 10px;
    41.   background-color: #fff;
    42.  
    43.   .body {
    44.     display: flex;
    45.     flex-wrap: wrap;
    46.     padding: 0 10px;
    47.   }
    48.  
    49.   .goods-item {
    50.     display: block;
    51.     width: 220px;
    52.     margin-right: 20px;
    53.     padding: 20px 30px;
    54.     text-align: center;
    55.  
    56.     img {
    57.       width: 160px;
    58.       height: 160px;
    59.     }
    60.  
    61.     p {
    62.       padding-top: 10px;
    63.     }
    64.  
    65.     .name {
    66.       font-size: 16px;
    67.     }
    68.  
    69.     .desc {
    70.       color: #999;
    71.       height: 29px;
    72.     }
    73.  
    74.     .price {
    75.       color: $priceColor;
    76.       font-size: 20px;
    77.     }
    78.   }
    79.  
    80.   .pagination-container {
    81.     margin-top: 20px;
    82.     display: flex;
    83.     justify-content: center;
    84.   }
    85.  
    86.  
    87. }
    88. </style>

    router/index.js

    1. import { createRouter, createWebHistory } from 'vue-router'
    2. import HomeView from '../views/HomeView.vue'
    3. import Login from '@/views/login/index.vue'
    4. import Layout from '@/views/layout/index.vue'
    5. import Home from '@/views/home/index.vue'
    6. import Category from '@/views/category/index.vue'
    7. import SubCategory from '@/views/subCategory/index.vue'
    8.  
    9. const router = createRouter({
    10.   history: createWebHistory(import.meta.env.BASE_URL),
    11.   routes: [
    12.     {
    13. 		path: '/',
    14. 		component: Layout,
    15. 		children: [
    16. 			{
    17. 				path: '',
    18. 				component: Home
    19. 			},
    20. 			{
    21. 				path: 'category/:id',
    22. 				component: Category
    23. 			},
    24. 			{
    25. 			    path: 'category/sub/:id',
    26. 			    name: 'subCategory',
    27. 			    component: SubCategory
    28. 			},
    29. 		]
    30. 	},
    31. 	{
    32. 		path: '/login',
    33. 		component: Login
    34. 	}
    35.   ]
    36. })
    37.  
    38. export default router

    category/index.vue修改

    1. <div class="sub-list">
    2. 	  <h3>全部分类</h3>
    3. 	  <ul>
    4. 	    <li v-for="i in categoryData.children" :key="i.id">
    5. 	      <RouterLink :to="`/category/sub/${i.id}`">
    6. 	        <img :src="i.picture" />
    7. 	        <p>{{ i.name }}</p>
    8. 	      </RouterLink>
    9. 	    </li>
    10. 	  </ul>
    11. 	</div>

    api/category.js

    1. /**
    2.  * @description: 获取二级分类列表数据
    3.  * @param {*} id 分类id 
    4.  * @return {*}
    5.  */
    7. export const getCategoryFilterAPI = (id) => {
    8.   return httpInstance({
    9.     url:'/category/sub/filter',
    10.     params:{
    11.       id
    12.     }
    13.   })
    14. }
    15. /**
    16.  * @description: 获取导航数据
    17.  * @data { 
    18.      categoryId: 1005000 ,
    19.      page: 1,
    20.      pageSize: 20,
    21.      sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
    22.    } 
    23.  * @return {*}
    24.  */
    25. export const getSubCategoryAPI = (data) => {
    26.   return httpInstance({
    27.     url:'/category/goods/temporary',
    28.     method:'POST',
    29.     data
    30.   })
    31. }

     subCategory/index.vue

    1. <script setup>
    2. import { getCategoryFilterAPI,getSubCategoryAPI} from '@/api/category'
    3. import {ref,onMounted} from 'vue' 
    4. import { useRoute } from 'vue-router'
    5. import GoodsItem from '../home/components/GoodsItem.vue'
    6. // 获取面包屑导航数据
    7. const filterData = ref({})
    8. const route = useRoute()
    9. const getFilterData = async () => {
    10.   const res = await getCategoryFilterAPI(route.params.id)
    11.   filterData.value = res.result
    12. }
    13. getFilterData()
    14.  
    15. // 获取基础列表数据渲染
    16. const goodList = ref([])
    17. const reqData = ref({
    18.   categoryId: route.params.id,
    19.   page: 1,
    20.   pageSize: 20,
    21.   sortField: 'publishTime'
    22. })
    23.   
    24. const getGoodList = async () => {
    25.   const res = await getSubCategoryAPI(reqData.value)
    26.   console.log(res)
    27.   goodList.value = res.result.items
    28. }
    29.   
    30. onMounted(() => getGoodList())
    31. </script>
    32.  
    33. <template>
    34.   <div class="container">
    35. 	  <div class="bread-container">
    36. 	    <el-breadcrumb separator=">">
    37. 	      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    38. 	      <el-breadcrumb-item :to="{ path: `/category/${filterData.parentId}` }">{{ filterData.parentName }}
    39. 	      </el-breadcrumb-item>
    40. 	      <el-breadcrumb-item>{{ filterData.name }}</el-breadcrumb-item>
    41. 	    </el-breadcrumb>
    42. 	  </div>
    43. 	  <div class="sub-container">
    44. 	        <el-tabs>
    45. 	          <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
    46. 	          <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
    47. 	          <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
    48. 	        </el-tabs>
    49. 	        <div class="body">
    50. 	           <!-- 商品列表-->
    51. 	  		   <GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id"></GoodsItem>
    52. 	        </div>
    53. 	   </div>
    54.   </div>
    55. </template>
    56.  
    57. <style lang="scss" scoped>
    58. .container {
    59. 	width: 1240px;
    60. 	margin: 0 auto;
    61. 	.bread-container {
    62. 	  padding: 25px 0;
    63. 	  color: #666;
    64. 	}
    65. 	
    66. 	.sub-container {
    67. 	  padding: 20px 10px;
    68. 	  background-color: #fff;
    69. 	
    70. 	  .body {
    71. 	    display: flex;
    72. 	    flex-wrap: wrap;
    73. 	    padding: 0 10px;
    74. 	  }
    75. 	
    76. 	  .goods-item {
    77. 	    display: block;
    78. 	    width: 220px;
    79. 	    margin-right: 20px;
    80. 	    padding: 20px 30px;
    81. 	    text-align: center;
    82. 	
    83. 	    img {
    84. 	      width: 160px;
    85. 	      height: 160px;
    86. 	    }
    87. 	
    88. 	    p {
    89. 	      padding-top: 10px;
    90. 	    }
    91. 	
    92. 	    .name {
    93. 	      font-size: 16px;
    94. 	    }
    95. 	
    96. 	    .desc {
    97. 	      color: #999;
    98. 	      height: 29px;
    99. 	    }
    100. 	
    101. 	    .price {
    102. 	      color: $priceColor;
    103. 	      font-size: 20px;
    104. 	    }
    105. 	  }
    106. 	
    107. 	  .pagination-container {
    108. 	    margin-top: 20px;
    109. 	    display: flex;
    110. 	    justify-content: center;
    111. 	  }
    112. 	}
    113. }
    114.  
    115. </style>

    subCategory/index.vue修改 

    1. <div class="body" v-infinite-scroll="load">
    2. 	           <!-- 商品列表-->
    3. 	  		   <GoodsItem v-for="goods in goodList" :goods="goods" :key="goods.id"></GoodsItem>
    4. </div>
    5.  
    6.  
    7. <script setup>
    8. import { getCategoryFilterAPI,getSubCategoryAPI} from '@/api/category'
    9. import {ref,onMounted} from 'vue' 
    10. import { useRoute } from 'vue-router'
    11. import GoodsItem from '../home/components/GoodsItem.vue'
    12. // 获取面包屑导航数据
    13. const filterData = ref({})
    14. const route = useRoute()
    15. const getFilterData = async () => {
    16.   const res = await getCategoryFilterAPI(route.params.id)
    17.   filterData.value = res.result
    18. }
    19. getFilterData()
    20.  
    21. // 获取基础列表数据渲染
    22. const goodList = ref([])
    23. const reqData = ref({
    24.   categoryId: route.params.id,
    25.   page: 1,
    26.   pageSize: 20,
    27.   sortField: 'publishTime'
    28. })
    29.   
    30. const getGoodList = async () => {
    31.   const res = await getSubCategoryAPI(reqData.value)
    32.   console.log(res)
    33.   goodList.value = res.result.items
    34. }
    35.   
    36. onMounted(() => getGoodList())
    37.  
    38. // tab切换回调
    39. const tabChange = () => {
    40.   console.log('tab切换了', reqData.value.sortField)
    41.   reqData.value.page = 1
    42.   getGoodList()
    43. }
    44. // 加载更多
    45. const disabled = ref(false)
    46. const load = async () => {
    47.   console.log('加载更多数据咯')
    48.   // 获取下一页的数据
    49.   reqData.value.page++
    50.   const res = await getSubCategoryAPI(reqData.value)
    51.   goodList.value = [...goodList.value, ...res.result.items]
    52.   // 加载完毕 停止监听
    53.   if (res.result.items.length === 0) {
    54.     disabled.value = true
    55.   }
    56. }
    57. </script>

    无限加载。

    定制路由的滚动行为

    自动回到顶部。

    router/index.js

    1. import { createRouter, createWebHistory } from 'vue-router'
    2. import HomeView from '../views/HomeView.vue'
    3. import Login from '@/views/login/index.vue'
    4. import Layout from '@/views/layout/index.vue'
    5. import Home from '@/views/home/index.vue'
    6. import Category from '@/views/category/index.vue'
    7. import SubCategory from '@/views/subCategory/index.vue'
    8.  
    9. const router = createRouter({
    10.   history: createWebHistory(import.meta.env.BASE_URL),
    11.   routes: [
    12.     {
    13. 		path: '/',
    14. 		component: Layout,
    15. 		children: [
    16. 			{
    17. 				path: '',
    18. 				component: Home
    19. 			},
    20. 			{
    21. 				path: 'category/:id',
    22. 				component: Category
    23. 			},
    24. 			{
    25. 			    path: 'category/sub/:id',
    26. 			    name: 'subCategory',
    27. 			    component: SubCategory
    28. 			},
    29. 		]
    30. 	},
    31. 	{
    32. 		path: '/login',
    33. 		component: Login
    34. 	}
    35.   ],
    36.   //路由滚动行为
    37.   scrollBehavior() {
    38. 	  return {
    39. 		  top: 0
    40. 	  }
    41.   }
    42. })
    43.  
    44. export default router

    商品详情

    路由配置

    views/detail/index.vue

    1. <script setup>
    2.  
    3.  
    4. </script>
    5.  
    6. <template>
    7.   <div class="xtx-goods-page">
    8.     <div class="container">
    9.       <div class="bread-container">
    10.         <el-breadcrumb separator=">">
    11.           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    12.           <el-breadcrumb-item :to="{ path: '/' }">母婴
    13.           </el-breadcrumb-item>
    14.           <el-breadcrumb-item :to="{ path: '/' }">跑步鞋
    15.           </el-breadcrumb-item>
    16.           <el-breadcrumb-item>抓绒保暖，毛毛虫子儿童运动鞋</el-breadcrumb-item>
    17.         </el-breadcrumb>
    18.       </div>
    19.       <!-- 商品信息 -->
    20.       <div class="info-container">
    21.         <div>
    22.           <div class="goods-info">
    23.             <div class="media">
    24.               <!-- 图片预览区 -->
    25.  
    26.               <!-- 统计数量 -->
    27.               <ul class="goods-sales">
    28.                 <li>
    29.                   <p>销量人气</p>
    30.                   <p> 100+ </p>
    31.                   <p><i class="iconfont icon-task-filling"></i>销量人气</p>
    32.                 </li>
    33.                 <li>
    34.                   <p>商品评价</p>
    35.                   <p>200+</p>
    36.                   <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
    37.                 </li>
    38.                 <li>
    39.                   <p>收藏人气</p>
    40.                   <p>300+</p>
    41.                   <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
    42.                 </li>
    43.                 <li>
    44.                   <p>品牌信息</p>
    45.                   <p>400+</p>
    46.                   <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
    47.                 </li>
    48.               </ul>
    49.             </div>
    50.             <div class="spec">
    51.               <!-- 商品信息区 -->
    52.               <p class="g-name"> 抓绒保暖，毛毛虫儿童鞋 </p>
    53.               <p class="g-desc">好穿 </p>
    54.               <p class="g-price">
    55.                 <span>200</span>
    56.                 <span> 100</span>
    57.               </p>
    58.               <div class="g-service">
    59.                 <dl>
    60.                   <dt>促销</dt>
    61.                   <dd>12月好物放送，App领券购买直降120元</dd>
    62.                 </dl>
    63.                 <dl>
    64.                   <dt>服务</dt>
    65.                   <dd>
    66.                     <span>无忧退货</span>
    67.                     <span>快速退款</span>
    68.                     <span>免费包邮</span>
    69.                     <a href="javascript:;">了解详情</a>
    70.                   </dd>
    71.                 </dl>
    72.               </div>
    73.               <!-- sku组件 -->
    74.  
    75.               <!-- 数据组件 -->
    76.  
    77.               <!-- 按钮组件 -->
    78.               <div>
    79.                 <el-button size="large" class="btn">
    80.                   加入购物车
    81.                 </el-button>
    82.               </div>
    83.  
    84.             </div>
    85.           </div>
    86.           <div class="goods-footer">
    87.             <div class="goods-article">
    88.               <!-- 商品详情 -->
    89.               <div class="goods-tabs">
    90.                 <nav>
    91.                   <a>商品详情</a>
    92.                 </nav>
    93.                 <div class="goods-detail">
    94.                   <!-- 属性 -->
    95.                   <ul class="attrs">
    96.                     <li v-for="item in 3" :key="item.value">
    97.                       <span class="dt">白色</span>
    98.                       <span class="dd">纯棉</span>
    99.                     </li>
    100.                   </ul>
    101.                   <!-- 图片 -->
    102.  
    103.                 </div>
    104.               </div>
    105.             </div>
    106.             <!-- 24热榜+专题推荐 -->
    107.             <div class="goods-aside">
    108.  
    109.             </div>
    110.           </div>
    111.         </div>
    112.       </div>
    113.     </div>
    114.   </div>
    115. </template>
    116.  
    117.  
    118. <style scoped lang='scss'>
    119. .xtx-goods-page {
    120.   .goods-info {
    121.     min-height: 600px;
    122.     background: #fff;
    123.     display: flex;
    124.  
    125.     .media {
    126.       width: 580px;
    127.       height: 600px;
    128.       padding: 30px 50px;
    129.     }
    130.  
    131.     .spec {
    132.       flex: 1;
    133.       padding: 30px 30px 30px 0;
    134.     }
    135.   }
    136.  
    137.   .goods-footer {
    138.     display: flex;
    139.     margin-top: 20px;
    140.  
    141.     .goods-article {
    142.       width: 940px;
    143.       margin-right: 20px;
    144.     }
    145.  
    146.     .goods-aside {
    147.       width: 280px;
    148.       min-height: 1000px;
    149.     }
    150.   }
    151.  
    152.   .goods-tabs {
    153.     min-height: 600px;
    154.     background: #fff;
    155.   }
    156.  
    157.   .goods-warn {
    158.     min-height: 600px;
    159.     background: #fff;
    160.     margin-top: 20px;
    161.   }
    162.  
    163.   .number-box {
    164.     display: flex;
    165.     align-items: center;
    166.  
    167.     .label {
    168.       width: 60px;
    169.       color: #999;
    170.       padding-left: 10px;
    171.     }
    172.   }
    173.  
    174.   .g-name {
    175.     font-size: 22px;
    176.   }
    177.  
    178.   .g-desc {
    179.     color: #999;
    180.     margin-top: 10px;
    181.   }
    182.  
    183.   .g-price {
    184.     margin-top: 10px;
    185.  
    186.     span {
    187.       &::before {
    188.         content: "¥";
    189.         font-size: 14px;
    190.       }
    191.  
    192.       &:first-child {
    193.         color: $priceColor;
    194.         margin-right: 10px;
    195.         font-size: 22px;
    196.       }
    197.  
    198.       &:last-child {
    199.         color: #999;
    200.         text-decoration: line-through;
    201.         font-size: 16px;
    202.       }
    203.     }
    204.   }
    205.  
    206.   .g-service {
    207.     background: #f5f5f5;
    208.     width: 500px;
    209.     padding: 20px 10px 0 10px;
    210.     margin-top: 10px;
    211.  
    212.     dl {
    213.       padding-bottom: 20px;
    214.       display: flex;
    215.       align-items: center;
    216.  
    217.       dt {
    218.         width: 50px;
    219.         color: #999;
    220.       }
    221.  
    222.       dd {
    223.         color: #666;
    224.  
    225.         &:last-child {
    226.           span {
    227.             margin-right: 10px;
    228.  
    229.             &::before {
    230.               content: "•";
    231.               color: $xtxColor;
    232.               margin-right: 2px;
    233.             }
    234.           }
    235.  
    236.           a {
    237.             color: $xtxColor;
    238.           }
    239.         }
    240.       }
    241.     }
    242.   }
    243.  
    244.   .goods-sales {
    245.     display: flex;
    246.     width: 400px;
    247.     align-items: center;
    248.     text-align: center;
    249.     height: 140px;
    250.  
    251.     li {
    252.       flex: 1;
    253.       position: relative;
    254.  
    255.       ~li::after {
    256.         position: absolute;
    257.         top: 10px;
    258.         left: 0;
    259.         height: 60px;
    260.         border-left: 1px solid #e4e4e4;
    261.         content: "";
    262.       }
    263.  
    264.       p {
    265.         &:first-child {
    266.           color: #999;
    267.         }
    268.  
    269.         &:nth-child(2) {
    270.           color: $priceColor;
    271.           margin-top: 10px;
    272.         }
    273.  
    274.         &:last-child {
    275.           color: #666;
    276.           margin-top: 10px;
    277.  
    278.           i {
    279.             color: $xtxColor;
    280.             font-size: 14px;
    281.             margin-right: 2px;
    282.           }
    283.  
    284.           &:hover {
    285.             color: $xtxColor;
    286.             cursor: pointer;
    287.           }
    288.         }
    289.       }
    290.     }
    291.   }
    292. }
    293.  
    294. .goods-tabs {
    295.   min-height: 600px;
    296.   background: #fff;
    297.  
    298.   nav {
    299.     height: 70px;
    300.     line-height: 70px;
    301.     display: flex;
    302.     border-bottom: 1px solid #f5f5f5;
    303.  
    304.     a {
    305.       padding: 0 40px;
    306.       font-size: 18px;
    307.       position: relative;
    308.  
    309.       >span {
    310.         color: $priceColor;
    311.         font-size: 16px;
    312.         margin-left: 10px;
    313.       }
    314.     }
    315.   }
    316. }
    317.  
    318. .goods-detail {
    319.   padding: 40px;
    320.  
    321.   .attrs {
    322.     display: flex;
    323.     flex-wrap: wrap;
    324.     margin-bottom: 30px;
    325.  
    326.     li {
    327.       display: flex;
    328.       margin-bottom: 10px;
    329.       width: 50%;
    330.  
    331.       .dt {
    332.         width: 100px;
    333.         color: #999;
    334.       }
    335.  
    336.       .dd {
    337.         flex: 1;
    338.         color: #666;
    339.       }
    340.     }
    341.   }
    342.  
    343.   >img {
    344.     width: 100%;
    345.   }
    346. }
    347.  
    348. .btn {
    349.   margin-top: 20px;
    350.  
    351. }
    352.  
    353. .bread-container {
    354.   padding: 25px 0;
    355. }
    356. </style>

    router/index.js中children中添加

    1. {
    2. 		path: 'detail/:id',
    3. 		component: Detail
    4. }

    home/components/HomeNew.vue修改

    1. <li v-for="item in newList" :key="item.id">
    2.           <RouterLink :to="`/detail/${item.id}`">
    3.             <img :src="item.picture" alt="" />
    4.             <p class="name">{{ item.name }}</p>
    5.             <p class="price">&yen;{{ item.price }}</p>
    6.           </RouterLink>
    7.         </li>

    数据渲染

    detail/index.vue

    1. <script setup>
    2. import { ref } from 'vue'
    3. import { getDetail } from '@/api/detail'
    4. import { useRoute } from 'vue-router'
    5.  
    6. const goods = ref([])
    7. const route = useRoute()
    8. const getGoods = async () => {
    9.   const res = await getDetail(route.params.id)
    10.   goods.value = res.result
    11. }
    12. getGoods()
    13.  
    14. script>
    15.  
    16. <template>
    17.   <div class="xtx-goods-page">
    18.     <div class="container">
    19.       <div class="bread-container">
    20.         <el-breadcrumb separator=">">
    21. 		
    22.           <el-breadcrumb-item :to="{ path: '/' }">首页el-breadcrumb-item>
    23.           <el-breadcrumb-item :to="{ path: `/category/${goods.categories?.[1].id}` }">{{goods.categories?.[1].name}}
    24.           el-breadcrumb-item>
    25.           <el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories?.[0].id}` }">{{goods.categories?.[0].name}}
    26.           el-breadcrumb-item>
    27.           <el-breadcrumb-item>{{goods.name}}el-breadcrumb-item>
    28.         el-breadcrumb>
    29.       div>
    30.       
    31.       <div class="info-container">
    32.         <div>
    33.           <div class="goods-info">
    34.             <div class="media">
    35.               
    36.  
    37.               
    38.               <ul class="goods-sales">
    39.                 <li>
    40.                   <p>销量人气p>
    41.                   <p> {{goods.salesCount}}+p>
    42.                   <p><i class="iconfont icon-task-filling">i>销量人气p>
    43.                 li>
    44.                 <li>
    45.                   <p>商品评价p>
    46.                   <p>{{goods.commentCount}}+p>
    47.                   <p><i class="iconfont icon-comment-filling">i>查看评价p>
    48.                 li>
    49.                 <li>
    50.                   <p>收藏人气p>
    51.                   <p>{{goods.collectCount}}+p>
    52.                   <p><i class="iconfont icon-favorite-filling">i>收藏商品p>
    53.                 li>
    54.                 <li>
    55.                   <p>品牌信息p>
    56.                   <p>{{goods.brand.name}}p>
    57.                   <p><i class="iconfont icon-dynamic-filling">i>品牌主页p>
    58.                 li>
    59.               ul>
    60.             div>
    61.             <div class="spec">
    62.               
    63.               <p class="g-name"> {{goods.name}} p>
    64.               <p class="g-desc">{{goods.desc}} p>
    65.               <p class="g-price">
    66.                 <span>{{goods.oldPrice}}span>
    67.                 <span>{{goods.price}}span>
    68.               p>
    69.               <div class="g-service">
    70.                 <dl>
    71.                   <dt>促销dt>
    72.                   <dd>12月好物放送，App领券购买直降120元dd>
    73.                 dl>
    74.                 <dl>
    75.                   <dt>服务dt>
    76.                   <dd>
    77.                     <span>无忧退货span>
    78.                     <span>快速退款span>
    79.                     <span>免费包邮span>
    80.                     <a href="javascript:;">了解详情a>
    81.                   dd>
    82.                 dl>
    83.               div>
    84.               
    85.  
    86.               
    87.  
    88.               
    89.               <div>
    90.                 <el-button size="large" class="btn">
    91.                   加入购物车
    92.                 el-button>
    93.               div>
    94.  
    95.             div>
    96.           div>
    97.           <div class="goods-footer">
    98.             <div class="goods-article">
    99.               
    100.               <div class="goods-tabs">
    101.                 <nav>
    102.                   <a>商品详情a>
    103.                 nav>
    104.                 <div class="goods-detail">
    105.                   
    106.                   <ul class="attrs">
    107.                     <li v-for="item in goods.details.properties" :key="item.value">
    108.                       <span class="dt">{{item.name}}span>
    109.                       <span class="dd">{{item.value}}span>
    110.                     li>
    111.                   ul>
    112.                   
    113. 					<img v-for="img in goods.details.pictures" :src="img" key="img" alt=""/>
    114.                 div>
    115.               div>
    116.             div>
    117.             
    118.             <div class="goods-aside">
    119.  
    120.             div>
    121.           div>
    122.         div>
    123.       div>
    124.     div>
    125.   div>
    126. template>
    127.  
    128.  
    129. <style scoped lang='scss'>
    130. .xtx-goods-page {
    131.   .goods-info {
    132.     min-height: 600px;
    133.     background: #fff;
    134.     display: flex;
    135.  
    136.     .media {
    137.       width: 580px;
    138.       height: 600px;
    139.       padding: 30px 50px;
    140.     }
    141.  
    142.     .spec {
    143.       flex: 1;
    144.       padding: 30px 30px 30px 0;
    145.     }
    146.   }
    147.  
    148.   .goods-footer {
    149.     display: flex;
    150.     margin-top: 20px;
    151.  
    152.     .goods-article {
    153.       width: 940px;
    154.       margin-right: 20px;
    155.     }
    156.  
    157.     .goods-aside {
    158.       width: 280px;
    159.       min-height: 1000px;
    160.     }
    161.   }
    162.  
    163.   .goods-tabs {
    164.     min-height: 600px;
    165.     background: #fff;
    166.   }
    167.  
    168.   .goods-warn {
    169.     min-height: 600px;
    170.     background: #fff;
    171.     margin-top: 20px;
    172.   }
    173.  
    174.   .number-box {
    175.     display: flex;
    176.     align-items: center;
    177.  
    178.     .label {
    179.       width: 60px;
    180.       color: #999;
    181.       padding-left: 10px;
    182.     }
    183.   }
    184.  
    185.   .g-name {
    186.     font-size: 22px;
    187.   }
    188.  
    189.   .g-desc {
    190.     color: #999;
    191.     margin-top: 10px;
    192.   }
    193.  
    194.   .g-price {
    195.     margin-top: 10px;
    196.  
    197.     span {
    198.       &::before {
    199.         content: "¥";
    200.         font-size: 14px;
    201.       }
    202.  
    203.       &:first-child {
    204.         color: $priceColor;
    205.         margin-right: 10px;
    206.         font-size: 22px;
    207.       }
    208.  
    209.       &:last-child {
    210.         color: #999;
    211.         text-decoration: line-through;
    212.         font-size: 16px;
    213.       }
    214.     }
    215.   }
    216.  
    217.   .g-service {
    218.     background: #f5f5f5;
    219.     width: 500px;
    220.     padding: 20px 10px 0 10px;
    221.     margin-top: 10px;
    222.  
    223.     dl {
    224.       padding-bottom: 20px;
    225.       display: flex;
    226.       align-items: center;
    227.  
    228.       dt {
    229.         width: 50px;
    230.         color: #999;
    231.       }
    232.  
    233.       dd {
    234.         color: #666;
    235.  
    236.         &:last-child {
    237.           span {
    238.             margin-right: 10px;
    239.  
    240.             &::before {
    241.               content: "•";
    242.               color: $xtxColor;
    243.               margin-right: 2px;
    244.             }
    245.           }
    246.  
    247.           a {
    248.             color: $xtxColor;
    249.           }
    250.         }
    251.       }
    252.     }
    253.   }
    254.  
    255.   .goods-sales {
    256.     display: flex;
    257.     width: 400px;
    258.     align-items: center;
    259.     text-align: center;
    260.     height: 140px;
    261.  
    262.     li {
    263.       flex: 1;
    264.       position: relative;
    265.  
    266.       ~li::after {
    267.         position: absolute;
    268.         top: 10px;
    269.         left: 0;
    270.         height: 60px;
    271.         border-left: 1px solid #e4e4e4;
    272.         content: "";
    273.       }
    274.  
    275.       p {
    276.         &:first-child {
    277.           color: #999;
    278.         }
    279.  
    280.         &:nth-child(2) {
    281.           color: $priceColor;
    282.           margin-top: 10px;
    283.         }
    284.  
    285.         &:last-child {
    286.           color: #666;
    287.           margin-top: 10px;
    288.  
    289.           i {
    290.             color: $xtxColor;
    291.             font-size: 14px;
    292.             margin-right: 2px;
    293.           }
    294.  
    295.           &:hover {
    296.             color: $xtxColor;
    297.             cursor: pointer;
    298.           }
    299.         }
    300.       }
    301.     }
    302.   }
    303. }
    304.  
    305. .goods-tabs {
    306.   min-height: 600px;
    307.   background: #fff;
    308.  
    309.   nav {
    310.     height: 70px;
    311.     line-height: 70px;
    312.     display: flex;
    313.     border-bottom: 1px solid #f5f5f5;
    314.  
    315.     a {
    316.       padding: 0 40px;
    317.       font-size: 18px;
    318.       position: relative;
    319.  
    320.       >span {
    321.         color: $priceColor;
    322.         font-size: 16px;
    323.         margin-left: 10px;
    324.       }
    325.     }
    326.   }
    327. }
    328.  
    329. .goods-detail {
    330.   padding: 40px;
    331.  
    332.   .attrs {
    333.     display: flex;
    334.     flex-wrap: wrap;
    335.     margin-bottom: 30px;
    336.  
    337.     li {
    338.       display: flex;
    339.       margin-bottom: 10px;
    340.       width: 50%;
    341.  
    342.       .dt {
    343.         width: 100px;
    344.         color: #999;
    345.       }
    346.  
    347.       .dd {
    348.         flex: 1;
    349.         color: #666;
    350.       }
    351.     }
    352.   }
    353.  
    354.   >img {
    355.     width: 100%;
    356.   }
    357. }
    358.  
    359. .btn {
    360.   margin-top: 20px;
    361.  
    362. }
    363.  
    364. .bread-container {
    365.   padding: 25px 0;
    366. }
    367. style>

    热榜区域 

    api/detail.js添加

    1. export const fetchHotGoodsAPI = ({ id, type, limit = 3 }) => {
    2.   return httpInstance({
    3.     url:'/goods/hot',
    4.     params:{
    5.       id, 
    6.       type, 
    7.       limit
    8.     }
    9.   })
    10. }

    DetailHot.vue

    1. <script setup>
    2. import { ref } from 'vue'
    3. import { fetchHotGoodsAPI } from '@/api/detail'
    4. import { useRoute } from 'vue-router'
    5.  
    6. const goodList = ref([])
    7. const route = useRoute()
    8. const getHotList = async () => {
    9.   const res = await fetchHotGoodsAPI({
    10.     id: route.params.id,
    11.     type: 1
    12.   })
    13.   goodList.value = res.result
    14. }
    15. getHotList()
    16.  
    17.  
    18. </script>
    19.  
    20.  
    21.  
    22. <template>
    23.   <div class="goods-hot">
    24.     <h3> 24小时热榜 </h3>
    25.     <!-- 商品区块 -->
    26.     <RouterLink :to="`/detail/${item.id}`" class="goods-item" v-for="item in goodList" :key="item.id">
    27.       <img :src="item.picture" alt="" />
    28.       <p class="name ellipsis">{{ item.name }}</p>
    29.       <p class="desc ellipsis">{{ item.desc }}</p>
    30.       <p class="price">&yen;{{ item.price }}</p>
    31.     </RouterLink>
    32.   </div>
    33. </template>
    34.  
    35.  
    36. <style scoped lang="scss">
    37. .goods-hot {
    38.   h3 {
    39.     height: 70px;
    40.     background: $helpColor;
    41.     color: #fff;
    42.     font-size: 18px;
    43.     line-height: 70px;
    44.     padding-left: 25px;
    45.     margin-bottom: 10px;
    46.     font-weight: normal;
    47.   }
    48.  
    49.   .goods-item {
    50.     display: block;
    51.     padding: 20px 30px;
    52.     text-align: center;
    53.     background: #fff;
    54.  
    55.     img {
    56.       width: 160px;
    57.       height: 160px;
    58.     }
    59.  
    60.     p {
    61.       padding-top: 10px;
    62.     }
    63.  
    64.     .name {
    65.       font-size: 16px;
    66.     }
    67.  
    68.     .desc {
    69.       color: #999;
    70.       height: 29px;
    71.     }
    72.  
    73.     .price {
    74.       color: $priceColor;
    75.       font-size: 20px;
    76.     }
    77.   }
    78. }
    79. </style>

    detail/index.vue

    1. <script setup>
    2. import { ref } from 'vue'
    3. import { getDetail } from '@/api/detail'
    4. import { useRoute } from 'vue-router'
    5. import DetailHot from './components/DetailHot.vue'
    6.  
    7. const goods = ref([])
    8. const route = useRoute()
    9. const getGoods = async () => {
    10.   const res = await getDetail(route.params.id)
    11.   goods.value = res.result
    12. }
    13. getGoods()
    14. </script>
    15.  
    16. <template>
    17.   <div class="xtx-goods-page">
    18.     <div class="container">
    19.       <div class="bread-container">
    20.         <el-breadcrumb separator=">">
    21. 		<!-- 可选链 -->
    22.           <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    23.           <el-breadcrumb-item :to="{ path: `/category/${goods.categories?.[1].id}` }">{{goods.categories?.[1].name}}
    24.           </el-breadcrumb-item>
    25.           <el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories?.[0].id}` }">{{goods.categories?.[0].name}}
    26.           </el-breadcrumb-item>
    27.           <el-breadcrumb-item>{{goods.name}}</el-breadcrumb-item>
    28.         </el-breadcrumb>
    29.       </div>
    30.       <!-- 商品信息 -->
    31.       <div class="info-container">
    32.         <div>
    33.           <div class="goods-info">
    34.             <div class="media">
    35.               <!-- 图片预览区 -->
    36.  
    37.               <!-- 统计数量 -->
    38.               <ul class="goods-sales">
    39.                 <li>
    40.                   <p>销量人气</p>
    41.                   <p> {{goods.salesCount}}+</p>
    42.                   <p><i class="iconfont icon-task-filling"></i>销量人气</p>
    43.                 </li>
    44.                 <li>
    45.                   <p>商品评价</p>
    46.                   <p>{{goods.commentCount}}+</p>
    47.                   <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
    48.                 </li>
    49.                 <li>
    50.                   <p>收藏人气</p>
    51.                   <p>{{goods.collectCount}}+</p>
    52.                   <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
    53.                 </li>
    54.                 <li>
    55.                   <p>品牌信息</p>
    56.                   <p>{{goods?.brand?.name}}</p>
    57.                   <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
    58.                 </li>
    59.               </ul>
    60.             </div>
    61.             <div class="spec">
    62.               <!-- 商品信息区 -->
    63.               <p class="g-name"> {{goods.name}} </p>
    64.               <p class="g-desc">{{goods.desc}} </p>
    65.               <p class="g-price">
    66.                 <span>{{goods.oldPrice}}</span>
    67.                 <span>{{goods.price}}</span>
    68.               </p>
    69.               <div class="g-service">
    70.                 <dl>
    71.                   <dt>促销</dt>
    72.                   <dd>12月好物放送，App领券购买直降120元</dd>
    73.                 </dl>
    74.                 <dl>
    75.                   <dt>服务</dt>
    76.                   <dd>
    77.                     <span>无忧退货</span>
    78.                     <span>快速退款</span>
    79.                     <span>免费包邮</span>
    80.                     <a href="javascript:;">了解详情</a>
    81.                   </dd>
    82.                 </dl>
    83.               </div>
    84.               <!-- sku组件 -->
    85.  
    86.               <!-- 数据组件 -->
    87.  
    88.               <!-- 按钮组件 -->
    89.               <div>
    90.                 <el-button size="large" class="btn">
    91.                   加入购物车
    92.                 </el-button>
    93.               </div>
    94.  
    95.             </div>
    96.           </div>
    97.           <div class="goods-footer">
    98.             <div class="goods-article">
    99.               <!-- 商品详情 -->
    100.               <div class="goods-tabs">
    101.                 <nav>
    102.                   <a>商品详情</a>
    103.                 </nav>
    104.                 <div class="goods-detail">
    105.                   <!-- 属性 -->
    106.                   <ul class="attrs">
    107.                     <li v-for="item in goods?.details?.properties" :key="item.value">
    108.                       <span class="dt">{{item.name}}</span>
    109.                       <span class="dd">{{item.value}}</span>
    110.                     </li>
    111.                   </ul>
    112.                   <!-- 图片 -->
    113. 					<img v-for="img in goods?.details?.pictures" :src="img" key="img" alt=""/>
    114.                 </div>
    115.               </div>
    116.             </div>
    117.             <!-- 24热榜+专题推荐 -->
    118.             <div class="goods-aside">
    119. 				<DetailHot/>
    120. 				<DetailHot/>
    121.             </div>
    122.           </div>
    123.         </div>
    124.       </div>
    125.     </div>
    126.   </div>
    127. </template>
    128.  
    129.  
    130. <style scoped lang='scss'>
    131. .xtx-goods-page {
    132.   .goods-info {
    133.     min-height: 600px;
    134.     background: #fff;
    135.     display: flex;
    136.  
    137.     .media {
    138.       width: 580px;
    139.       height: 600px;
    140.       padding: 30px 50px;
    141.     }
    142.  
    143.     .spec {
    144.       flex: 1;
    145.       padding: 30px 30px 30px 0;
    146.     }
    147.   }
    148.  
    149.   .goods-footer {
    150.     display: flex;
    151.     margin-top: 20px;
    152.  
    153.     .goods-article {
    154.       width: 940px;
    155.       margin-right: 20px;
    156.     }
    157.  
    158.     .goods-aside {
    159.       width: 280px;
    160.       min-height: 1000px;
    161.     }
    162.   }
    163.  
    164.   .goods-tabs {
    165.     min-height: 600px;
    166.     background: #fff;
    167.   }
    168.  
    169.   .goods-warn {
    170.     min-height: 600px;
    171.     background: #fff;
    172.     margin-top: 20px;
    173.   }
    174.  
    175.   .number-box {
    176.     display: flex;
    177.     align-items: center;
    178.  
    179.     .label {
    180.       width: 60px;
    181.       color: #999;
    182.       padding-left: 10px;
    183.     }
    184.   }
    185.  
    186.   .g-name {
    187.     font-size: 22px;
    188.   }
    189.  
    190.   .g-desc {
    191.     color: #999;
    192.     margin-top: 10px;
    193.   }
    194.  
    195.   .g-price {
    196.     margin-top: 10px;
    197.  
    198.     span {
    199.       &::before {
    200.         content: "¥";
    201.         font-size: 14px;
    202.       }
    203.  
    204.       &:first-child {
    205.         color: $priceColor;
    206.         margin-right: 10px;
    207.         font-size: 22px;
    208.       }
    209.  
    210.       &:last-child {
    211.         color: #999;
    212.         text-decoration: line-through;
    213.         font-size: 16px;
    214.       }
    215.     }
    216.   }
    217.  
    218.   .g-service {
    219.     background: #f5f5f5;
    220.     width: 500px;
    221.     padding: 20px 10px 0 10px;
    222.     margin-top: 10px;
    223.  
    224.     dl {
    225.       padding-bottom: 20px;
    226.       display: flex;
    227.       align-items: center;
    228.  
    229.       dt {
    230.         width: 50px;
    231.         color: #999;
    232.       }
    233.  
    234.       dd {
    235.         color: #666;
    236.  
    237.         &:last-child {
    238.           span {
    239.             margin-right: 10px;
    240.  
    241.             &::before {
    242.               content: "•";
    243.               color: $xtxColor;
    244.               margin-right: 2px;
    245.             }
    246.           }
    247.  
    248.           a {
    249.             color: $xtxColor;
    250.           }
    251.         }
    252.       }
    253.     }
    254.   }
    255.  
    256.   .goods-sales {
    257.     display: flex;
    258.     width: 400px;
    259.     align-items: center;
    260.     text-align: center;
    261.     height: 140px;
    262.  
    263.     li {
    264.       flex: 1;
    265.       position: relative;
    266.  
    267.       ~li::after {
    268.         position: absolute;
    269.         top: 10px;
    270.         left: 0;
    271.         height: 60px;
    272.         border-left: 1px solid #e4e4e4;
    273.         content: "";
    274.       }
    275.  
    276.       p {
    277.         &:first-child {
    278.           color: #999;
    279.         }
    280.  
    281.         &:nth-child(2) {
    282.           color: $priceColor;
    283.           margin-top: 10px;
    284.         }
    285.  
    286.         &:last-child {
    287.           color: #666;
    288.           margin-top: 10px;
    289.  
    290.           i {
    291.             color: $xtxColor;
    292.             font-size: 14px;
    293.             margin-right: 2px;
    294.           }
    295.  
    296.           &:hover {
    297.             color: $xtxColor;
    298.             cursor: pointer;
    299.           }
    300.         }
    301.       }
    302.     }
    303.   }
    304. }
    305.  
    306. .goods-tabs {
    307.   min-height: 600px;
    308.   background: #fff;
    309.  
    310.   nav {
    311.     height: 70px;
    312.     line-height: 70px;
    313.     display: flex;
    314.     border-bottom: 1px solid #f5f5f5;
    315.  
    316.     a {
    317.       padding: 0 40px;
    318.       font-size: 18px;
    319.       position: relative;
    320.  
    321.       >span {
    322.         color: $priceColor;
    323.         font-size: 16px;
    324.         margin-left: 10px;
    325.       }
    326.     }
    327.   }
    328. }
    329.  
    330. .goods-detail {
    331.   padding: 40px;
    332.  
    333.   .attrs {
    334.     display: flex;
    335.     flex-wrap: wrap;
    336.     margin-bottom: 30px;
    337.  
    338.     li {
    339.       display: flex;
    340.       margin-bottom: 10px;
    341.       width: 50%;
    342.  
    343.       .dt {
    344.         width: 100px;
    345.         color: #999;
    346.       }
    347.  
    348.       .dd {
    349.         flex: 1;
    350.         color: #666;
    351.       }
    352.     }
    353.   }
    354.  
    355.   >img {
    356.     width: 100%;
    357.   }
    358. }
    359.  
    360. .btn {
    361.   margin-top: 20px;
    362.  
    363. }
    364.  
    365. .bread-container {
    366.   padding: 25px 0;
    367. }
    368. </style>

    适配热榜类型 

    detail/components/DeatinHot.vue修改

    1. <script setup>
    2. import { ref,computed} from 'vue'
    3. import { fetchHotGoodsAPI } from '@/api/detail'
    4. import { useRoute } from 'vue-router'
    5.  
    6. // type适配不同类型热榜数据
    7. const props = defineProps({
    8.   hotType: {
    9.     type: Number, // 1代表24小时热销榜 2代表周热销榜 3代表总热销榜 可以使用type去适配title和数据列表
    10.     default: 1
    11.   }
    12. })
    13. const TITLEMAP = {
    14.   1: '24小时热榜',
    15.   2: '周热榜', 
    16. }
    17. const title = computed(() => TITLEMAP[props.hotType])
    18.  
    19. const goodList = ref([])
    20. const route = useRoute()
    21. const getHotList = async () => {
    22.   const res = await fetchHotGoodsAPI({
    23.     id: route.params.id,
    24.     type: props.hotType
    25.   })
    26.   goodList.value = res.result
    27. }
    28. getHotList()
    29.  
    30.  
    31. </script>
    32.  
    33. <!-- 24热榜+专题推荐 -->
    34.             <div class="goods-aside">
    35. 				<DetailHot :hotType="1"/>
    36. 				<DetailHot :hotType="2"/>
    37.             </div>

    detail/index.vue

    1. <!-- 24热榜+专题推荐 -->
    2.             <div class="goods-aside">
    3. 				<DetailHot :hotType="1"/>
    4. 				<DetailHot :hotType="2"/>
    5.             </div>

    图片预览组件封装

    src/components/imgView/index.vue

    1. <script setup>
    2. import { ref, watch } from 'vue'
    3. import { useMouseInElement } from '@vueuse/core'
    4.  
    5. defineProps({
    6. 	imageList: {
    7. 		type: Array,
    8. 		default: () => []
    9. 	}
    10. })
    11.  
    12. // // 图片列表
    13. // const imageList = [
    14. //   "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
    15. //   "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
    16. //   "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
    17. //   "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
    18. //   "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
    19. // ]
    20.  
    21. // 1.小图切换大图显示
    22. const activeIndex = ref(0)
    23.  
    24. const enterhandler = (i) => {
    25.   activeIndex.value = i
    26. }
    27.  
    28. // 2. 获取鼠标相对位置
    29. const target = ref(null)
    30. const { elementX, elementY, isOutside } = useMouseInElement(target)
    31.  
    32. // 3. 控制滑块跟随鼠标移动（监听elementX/Y变化，一旦变化 重新设置left/top）
    33. const left = ref(0)
    34. const top = ref(0)
    35.  
    36. const positionX = ref(0)
    37. const positionY = ref(0)
    38. watch([elementX, elementY, isOutside], () => {
    39.   console.log('xy变化了')
    40.   // 如果鼠标没有移入到盒子里面 直接不执行后面的逻辑
    41.   if (isOutside.value) return
    42.   console.log('后续逻辑执行了')
    43.   // 有效范围内控制滑块距离
    44.   // 横向
    45.   if (elementX.value > 100 && elementX.value < 300) {
    46.     left.value = elementX.value - 100
    47.   }
    48.   // 纵向
    49.   if (elementY.value > 100 && elementY.value < 300) {
    50.     top.value = elementY.value - 100
    51.   }
    52.  
    53.   // 处理边界
    54.   if (elementX.value > 300) { left.value = 200 }
    55.   if (elementX.value < 100) { left.value = 0 }
    56.  
    57.   if (elementY.value > 300) { top.value = 200 }
    58.   if (elementY.value < 100) { top.value = 0 }
    59.  
    60.   // 控制大图的显示
    61.   positionX.value = -left.value * 2
    62.   positionY.value = -top.value * 2
    63.  
    64. })
    65.  
    66. </script>
    67.  
    68.  
    69. <template>
    70.   <div class="goods-image">
    71.  
    72.     <!-- 左侧大图-->
    73.     <div class="middle" ref="target">
    74.       <img :src="imageList[activeIndex]" alt="" />
    75.       <!-- 蒙层小滑块 -->
    76.       <div class="layer" v-show="!isOutside" :style="{ left: `${left}px`, top: `${top}px` }"></div>
    77.     </div>
    78.     <!-- 小图列表 -->
    79.     <ul class="small">
    80.       <li v-for="(img, i) in imageList" :key="i" @mouseenter="enterhandler(i)" :class="{ active: i === activeIndex }">
    81.         <img :src="img" alt="" />
    82.       </li>
    83.     </ul>
    84.     <!-- 放大镜大图 -->
    85.     <div class="large" :style="[
    86.       {
    87.         backgroundImage: `url(${imageList[activeIndex]})`,
    88.         backgroundPositionX: `${positionX}px`,
    89.         backgroundPositionY: `${positionY}px`,
    90.       },
    91.     ]" v-show="!isOutside"></div>
    92.   </div>
    93. </template>
    94.  
    95. <style scoped lang="scss">
    96. .goods-image {
    97.   width: 480px;
    98.   height: 400px;
    99.   position: relative;
    100.   display: flex;
    101.  
    102.   .middle {
    103.     width: 400px;
    104.     height: 400px;
    105.     background: #f5f5f5;
    106.   }
    107.  
    108.   .large {
    109.     position: absolute;
    110.     top: 0;
    111.     left: 412px;
    112.     width: 400px;
    113.     height: 400px;
    114.     z-index: 500;
    115.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    116.     background-repeat: no-repeat;
    117.     // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    118.     background-size: 800px 800px;
    119.     background-color: #f8f8f8;
    120.   }
    121.  
    122.   .layer {
    123.     width: 200px;
    124.     height: 200px;
    125.     background: rgba(0, 0, 0, 0.2);
    126.     // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    127.     left: 0;
    128.     top: 0;
    129.     position: absolute;
    130.   }
    131.  
    132.   .small {
    133.     width: 80px;
    134.  
    135.     li {
    136.       width: 68px;
    137.       height: 68px;
    138.       margin-left: 12px;
    139.       margin-bottom: 15px;
    140.       cursor: pointer;
    141.  
    142.       &:hover,
    143.       &.active {
    144.         border: 2px solid $xtxColor;
    145.       }
    146.     }
    147.   }
    148. }
    149. </style>

    detail/index.vue修改

    1. import ImageView from '@/components/imageView/index.vue'
    2.  
    4. <ImageView :image-list="goods.mainPictures"/>

     

    sku插件

     XtxSku

    链接：https://pan.baidu.com/s/1KQ5-OFMoD7bpL8DJjsmsIA?pwd=3kgh 
    提取码：3kgh

    detain/index.vue修改 

    1. import XtxSku from '@/components/XtxSku/index.vue'
    2.  
    3.  
    5. <XtxSku :goods="goods"/>

     登录页

    表单

    login/index.vue

    1. <script setup>
    2. import { ref } from 'vue'
    3. // 表单数据对象
    4. const userInfo = ref({
    5.   account: '1311111111',
    6.   password: '123456',
    7.   agree: true
    8. })
    9.  
    10. // 规则数据对象
    11. const rules = {
    12.   account: [
    13.     { required: true, message: '用户名不能为空' }
    14.   ],
    15.   password: [
    16.     { required: true, message: '密码不能为空' },
    17.     { min: 6, max: 24, message: '密码长度要求6-14个字符' }
    18.   ],
    19.   agree: [
    20.     {
    21.       validator: (rule, val, callback) => {
    22.         return val ? callback() : new Error('请先同意协议')
    23.       }
    24.     }
    25.   ]
    26. }
    27.  
    28.  
    29. </script>
    30.  
    31. <template>
    32.   <div>
    33.     <header class="login-header">
    34.       <div class="container m-top-20">
    35.         <h1 class="logo">
    36.           <RouterLink to="/">小兔鲜</RouterLink>
    37.         </h1>
    38.         <RouterLink class="entry" to="/">
    39.           进入网站首页
    40.           <i class="iconfont icon-angle-right"></i>
    41.           <i class="iconfont icon-angle-right"></i>
    42.         </RouterLink>
    43.       </div>
    44.     </header>
    45.     <section class="login-section">
    46.       <div class="wrapper">
    47.         <nav>
    48.           <a href="javascript:;">账户登录</a>
    49.         </nav>
    50.         <div class="account-box">
    51.           <div class="form">
    52.                 <el-form ref="formRef" :model="userInfo" :rules="rules" status-icon>
    53.                   <el-form-item prop="account" label="账户">
    54.                     <el-input v-model="userInfo.account" />
    55.                   </el-form-item>
    56.                   <el-form-item prop="password" label="密码">
    57.                     <el-input v-model="userInfo.password" />
    58.                   </el-form-item>
    59.                   <el-form-item prop="agree" label-width="22px">
    60.                     <el-checkbox v-model="userInfo.agree" size="large">
    61.                       我已同意隐私条款和服务条款
    62.                     </el-checkbox>
    63.                   </el-form-item>
    64.                   <el-button size="large" class="subBtn" >点击登录</el-button>
    65.                 </el-form>
    66.               </div>
    67.         </div>
    68.       </div>
    69.     </section>
    70.  
    71.     <footer class="login-footer">
    72.       <div class="container">
    73.         <p>
    74.           <a href="javascript:;">关于我们</a>
    75.           <a href="javascript:;">帮助中心</a>
    76.           <a href="javascript:;">售后服务</a>
    77.           <a href="javascript:;">配送与验收</a>
    78.           <a href="javascript:;">商务合作</a>
    79.           <a href="javascript:;">搜索推荐</a>
    80.           <a href="javascript:;">友情链接</a>
    81.         </p>
    82.         <p>CopyRight &copy; 小兔鲜儿</p>
    83.       </div>
    84.     </footer>
    85.   </div>
    86. </template>
    87.  
    88. <style scoped lang='scss'>
    89. .login-header {
    90.   background: #fff;
    91.   border-bottom: 1px solid #e4e4e4;
    92.  
    93.   .container {
    94.     display: flex;
    95.     align-items: flex-end;
    96.     justify-content: space-between;
    97.   }
    98.  
    99.   .logo {
    100.     width: 200px;
    101.  
    102.     a {
    103.       display: block;
    104.       height: 132px;
    105.       width: 100%;
    106.       text-indent: -9999px;
    107.       background: url("@/assets/images/logo.png") no-repeat center 18px / contain;
    108.     }
    109.   }
    110.  
    111.   .sub {
    112.     flex: 1;
    113.     font-size: 24px;
    114.     font-weight: normal;
    115.     margin-bottom: 38px;
    116.     margin-left: 20px;
    117.     color: #666;
    118.   }
    119.  
    120.   .entry {
    121.     width: 120px;
    122.     margin-bottom: 38px;
    123.     font-size: 16px;
    124.  
    125.     i {
    126.       font-size: 14px;
    127.       color: $xtxColor;
    128.       letter-spacing: -5px;
    129.     }
    130.   }
    131. }
    132.  
    133. .login-section {
    134.   background: url('@/assets/images/login-bg.png') no-repeat center / cover;
    135.   height: 488px;
    136.   position: relative;
    137.  
    138.   .wrapper {
    139.     width: 380px;
    140.     background: #fff;
    141.     position: absolute;
    142.     left: 50%;
    143.     top: 54px;
    144.     transform: translate3d(100px, 0, 0);
    145.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    146.  
    147.     nav {
    148.       font-size: 14px;
    149.       height: 55px;
    150.       margin-bottom: 20px;
    151.       border-bottom: 1px solid #f5f5f5;
    152.       display: flex;
    153.       padding: 0 40px;
    154.       text-align: right;
    155.       align-items: center;
    156.  
    157.       a {
    158.         flex: 1;
    159.         line-height: 1;
    160.         display: inline-block;
    161.         font-size: 18px;
    162.         position: relative;
    163.         text-align: center;
    164.       }
    165.     }
    166.   }
    167. }
    168.  
    169. .login-footer {
    170.   padding: 30px 0 50px;
    171.   background: #fff;
    172.  
    173.   p {
    174.     text-align: center;
    175.     color: #999;
    176.     padding-top: 20px;
    177.  
    178.     a {
    179.       line-height: 1;
    180.       padding: 0 10px;
    181.       color: #999;
    182.       display: inline-block;
    183.  
    184.       ~a {
    185.         border-left: 1px solid #ccc;
    186.       }
    187.     }
    188.   }
    189. }
    190.  
    191. .account-box {
    192.   .toggle {
    193.     padding: 15px 40px;
    194.     text-align: right;
    195.  
    196.     a {
    197.       color: $xtxColor;
    198.  
    199.       i {
    200.         font-size: 14px;
    201.       }
    202.     }
    203.   }
    204.  
    205.   .form {
    206.     padding: 0 20px 20px 20px;
    207.  
    208.     &-item {
    209.       margin-bottom: 28px;
    210.  
    211.       .input {
    212.         position: relative;
    213.         height: 36px;
    214.  
    215.         >i {
    216.           width: 34px;
    217.           height: 34px;
    218.           background: #cfcdcd;
    219.           color: #fff;
    220.           position: absolute;
    221.           left: 1px;
    222.           top: 1px;
    223.           text-align: center;
    224.           line-height: 34px;
    225.           font-size: 18px;
    226.         }
    227.  
    228.         input {
    229.           padding-left: 44px;
    230.           border: 1px solid #cfcdcd;
    231.           height: 36px;
    232.           line-height: 36px;
    233.           width: 100%;
    234.  
    235.           &.error {
    236.             border-color: $priceColor;
    237.           }
    238.  
    239.           &.active,
    240.           &:focus {
    241.             border-color: $xtxColor;
    242.           }
    243.         }
    244.  
    245.         .code {
    246.           position: absolute;
    247.           right: 1px;
    248.           top: 1px;
    249.           text-align: center;
    250.           line-height: 34px;
    251.           font-size: 14px;
    252.           background: #f5f5f5;
    253.           color: #666;
    254.           width: 90px;
    255.           height: 34px;
    256.           cursor: pointer;
    257.         }
    258.       }
    259.  
    260.       >.error {
    261.         position: absolute;
    262.         font-size: 12px;
    263.         line-height: 28px;
    264.         color: $priceColor;
    265.  
    266.         i {
    267.           font-size: 14px;
    268.           margin-right: 2px;
    269.         }
    270.       }
    271.     }
    272.  
    273.     .agree {
    274.       a {
    275.         color: #069;
    276.       }
    277.     }
    278.  
    279.     .btn {
    280.       display: block;
    281.       width: 100%;
    282.       height: 40px;
    283.       color: #fff;
    284.       text-align: center;
    285.       line-height: 40px;
    286.       background: $xtxColor;
    287.  
    288.       &.disabled {
    289.         background: #cfcdcd;
    290.       }
    291.     }
    292.   }
    293.  
    294.   .action {
    295.     padding: 20px 40px;
    296.     display: flex;
    297.     justify-content: space-between;
    298.     align-items: center;
    299.  
    300.     .url {
    301.       a {
    302.         color: #999;
    303.         margin-left: 10px;
    304.       }
    305.     }
    306.   }
    307. }
    308.  
    309. .subBtn {
    310.   background: $xtxColor;
    311.   width: 100%;
    312.   color: #fff;
    313. }
    314. </style>

    登录实现 

    账号：cdshi0006

    密码：123456

    login/index.vue修改

    1. <script setup>
    2. import { ref } from 'vue'
    3. import {loginAPI} from '@/api/user'
    4. import { ElMessage } from 'element-plus'
    5. import {useRouter} from 'vue-router'
    6. import 'element-plus/theme-chalk/el-message.css'
    7. // 表单数据对象
    8. const userInfo = ref({
    9.   account: '',
    10.   password: '',
    11.   agree: true
    12. })
    13.  
    14. // 规则数据对象
    15. const rules = {
    16.   account: [
    17.     { required: true, message: '用户名不能为空' }
    18.   ],
    19.   password: [
    20.     { required: true, message: '密码不能为空' },
    21.     { min: 6, max: 24, message: '密码长度要求6-14个字符' }
    22.   ],
    23.   agree: [
    24.     {
    25.       validator: (rule, val, callback) => {
    26.         return val ? callback() : new Error('请先同意协议')
    27.       }
    28.     }
    29.   ]
    30. }
    31.  
    32. const formRef = ref(null)
    33. const router = useRouter()
    34. const doLogin = () => {
    35. 	const {account,password} = userInfo.value
    36. 	formRef.value.validate(async(valid) => {
    37. 		if(valid) {
    38. 			const res = await loginAPI({account,password})
    39. 			// 1. 提示用户
    40. 			  ElMessage({ type: 'success', message: '登录成功' })
    41. 			  // 2. 跳转首页
    42. 			  router.replace({ path: '/' })
    43. 		}
    44. 	})
    45. }
    46.  
    47. </script>

     

     登录失败的提示

    utils/http.js修改

    1. import 'element-plus/theme-chalk/el-message.css'
    2. import { ElMessage } from 'element-plus'
    3.  
    4. // axios响应式拦截器
    5. http.interceptors.response.use(res=>res.data,e => {
    6. 	ElMessage({
    7. 		type: 'warning',
    8. 		message: e.response.data.msg
    9. 	})
    10. 	console.log(e)
    11. 	return Promise.reject(e)
    12. })

     Pinia管理用户

    stores/user.js

    1. // 管理用户数据相关
    2.  
    3. import { defineStore } from 'pinia'
    4. import { ref } from 'vue'
    5. import { loginAPI } from '@/api/user'
    6.  
    7. export const useUserStore = defineStore('user', () => {
    8.   // 1. 定义管理用户数据的state
    9.   const userInfo = ref({})
    10.   // 2. 定义获取接口数据的action函数
    11.   const getUserInfo = async ({ account, password }) => {
    12.     const res = await loginAPI({ account, password })
    13.     userInfo.value = res.result
    14.   }
    15.   // 3. 以对象的格式把state和action return
    16.   return {
    17.     userInfo,
    18. 	getUserInfo
    19.   }
    20. }, {
    21.   persist: true,
    22. })

    Pinia持久化存储

    需要使用插件，自动本地存储，官网

    下载pinia-plugin-persistedstate

    npm i pinia-plugin-persistedstate

    main.js修改

    1. import { createPinia } from 'pinia'
    2. import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
    3.  
    4. const pinia = createPinia()
    5. pinia.use(piniaPluginPersistedstate)

     login/index.vue修改

    1. export const useUserStore = defineStore('user', () => {
    2.   //......
    3. }, {
    4.   persist: true,
    5. })

     

    登录和非登录状态

    LayoutNav.vue修改

    1. <script setup>
    2. 	import {useUserStore} from '@/stores/user'
    3. 	const userStore = useUserStore()
    4. </script>
    5.  
    6. <template>
    7.   <nav class="app-topnav">
    8.     <div class="container">
    9.       <ul>
    10.         <template v-if="userStore.userInfo.token">
    11.           <li><a href="javascript:;"><i class="iconfont icon-user"></i>{{userStore.userInfo.account}}</a></li>
    12.           <li>
    13.           ......
    14.       </ul>
    15.     </div>
    16.   </nav>
    17. </template>

    请求拦截器携带token

    http.js

    1. import {useUserStore} from '@/stores/user'
    2.  
    3. http.interceptors.request.use(config => {
    4.   // 1. 从pinia获取token数据
    5.     const userStore = useUserStore()
    6.     // 2. 按照后端的要求拼接token数据
    7.     const token = userStore.userInfo.token
    8.     if (token) {
    9.       config.headers.Authorization = `Bearer ${token}`
    10.     }
    11.     return config
    12. }, e => Promise.reject(e))

    退出登录

     user.js

    1. // 管理用户数据相关
    2.  
    3. import { defineStore } from 'pinia'
    4. import { ref } from 'vue'
    5. import { loginAPI } from '@/api/user'
    6.  
    7. export const useUserStore = defineStore('user', () => {
    8.   // 1. 定义管理用户数据的state
    9.   const userInfo = ref({})
    10.   // 2. 定义获取接口数据的action函数
    11.   const getUserInfo = async ({ account, password }) => {
    12.     const res = await loginAPI({ account, password })
    13.     userInfo.value = res.result
    14.   }
    15.    // 退出时清除用户信息
    16.     const clearUserInfo = () => {
    17.       userInfo.value = {}
    18.     }
    19.   // 3. 以对象的格式把state和action return
    20.   return {
    21.     userInfo,
    22. 	getUserInfo,
    23. 	clearUserInfo
    24.   }
    25. }, {
    26.   persist: true,
    27. })

    LayoutNav.vue修改

    1. <script setup>
    2. 	import {useUserStore} from '@/stores/user'
    3. 	import {useRouter} from 'vue-router'
    4. 	const userStore = useUserStore()
    5. 	const router = useRouter()
    6. 	const confirm = () => {
    7. 		console.log("登录")
    8. 		userStore.clearUserInfo()
    9. 		router.push('/login')
    10. 	}
    11. </script>
    12.  
    13. <template>
    14.   <nav class="app-topnav">
    15.     <div class="container">
    16.       <ul>
    17.         <template v-if="userStore.userInfo.token">
    18.           <li><a href="javascript:;"><i class="iconfont icon-user"></i>{{userStore.userInfo.account}}</a></li>
    19.           <li>
    20.             <el-popconfirm @confirm="confirm" title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
    21.          。。。。。。
    22.     </div>
    23.   </nav>
    24. </template>

    token失效处理

    http.js

    1. import router from '@/router'
    2.  
    3. // axios响应式拦截器
    4. http.interceptors.response.use(res=>res.data,e => {
    5. 	const userStore = useUserStore()
    6. 	ElMessage({
    7. 		type: 'warning',
    8. 		message: e.response.data.msg
    9. 	})
    10. 	if(e.response.status === 401) {
    11. 		userStore.clearUserInfo()
    12. 		router.push('/login')
    13. 	}
    14. 	return Promise.reject(e)
    15. })

    购物车

    本地加入购物车

    stores/car.js

    1. // 封装购物车模块
    2.  
    3. import { defineStore } from 'pinia'
    4. import { ref } from 'vue'
    5.  
    6.  
    7. export const useCartStore = defineStore('cart', () => {
    8.   // 1. 定义state - cartList
    9.   const cartList = ref([])
    10.   // 2. 定义action - addCart
    11.   const addCart = (goods) => {
    12.     console.log('添加', goods)
    13.     // 添加购物车操作
    14.     // 已添加过 - count + 1
    15.     // 没有添加过 - 直接push
    16.     // 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
    17.     const item = cartList.value.find((item) => goods.skuId === item.skuId)
    18.     if (item) {
    19.       // 找到了
    20.       item.count++
    21.     } else {
    22.       // 没找到
    23.       cartList.value.push(goods)
    24.     }
    25.   }
    26.   return {
    27.     cartList,
    28.     addCart
    29.   }
    30. }, {
    31.   persist: true,
    32. })

    detail/index.vue修改

    1. <script setup>
    2. import { ref } from 'vue'
    3. import { getDetail } from '@/api/detail'
    4. import { useRoute } from 'vue-router'
    5. import DetailHot from './components/DetailHot.vue'
    6. import ImageView from '@/components/imageView/index.vue'
    7. import XtxSku from '@/components/XtxSku/index.vue'
    8. import { ElMessage } from 'element-plus'
    9. import {useCartStore} from '@/stores/car'
    10.  
    11. const carStore = useCartStore()
    12. const goods = ref([])
    13. const route = useRoute()
    14. const getGoods = async () => {
    15.   const res = await getDetail(route.params.id)
    16.   goods.value = res.result
    17. }
    18. getGoods()
    19.  
    20.  
    21. //sku
    22. let skuObj = {}
    23. const skuChange = (sku) => {
    24. 	skuObj = sku
    25. }
    26. //count
    27. const count = ref(1)
    28. const countChange = (count) => {
    29. 	console.log(count)
    30. }
    31. //购物车
    32. const addCar = () => {
    33. 	if(skuObj.skuId) {
    34. 		carStore.addCart({
    35. 			id: goods.value.id,
    36. 			name: goods.value.name,
    37. 			picture: goods.value.mainPictures[0],
    38. 			orice: goods.value.price,
    39. 			count: count.value,
    40. 			skuId: skuObj.skuId,
    41. 			attrsText: skuObj.specsText,
    42. 			selected: true
    43. 		})
    44. 	} else {
    45. 		ElMessage.warning('请选择规格')
    46. 	}
    47. }
    48. </script>
    49.  
    50.  
    51.               <!-- sku组件 -->
    52. 			  <XtxSku :goods="goods" @change="skuChange"/>
    53.               <!-- 数据组件 -->
    54. 			 <el-input-number v-model="count" @change="countChange"></el-input-number>
    55.               <!-- 按钮组件 -->
    56.               <div>
    57.                 <el-button size="large" class="btn" @click="addCar">
    58.                   加入购物车
    59.                 </el-button>
    60.               </div>

    头部购物车

    detail/index.vue修改

    1. <script setup>
    2. import { ref } from 'vue'
    3. import { getDetail } from '@/api/detail'
    4. import { useRoute } from 'vue-router'
    5. import DetailHot from './components/DetailHot.vue'
    6. import ImageView from '@/components/imageView/index.vue'
    7. import XtxSku from '@/components/XtxSku/index.vue'
    8. import { ElMessage } from 'element-plus'
    9. import {useCartStore} from '@/stores/car'
    10.  
    11. const carStore = useCartStore()
    12. const goods = ref([])
    13. const route = useRoute()
    14. const getGoods = async () => {
    15.   const res = await getDetail(route.params.id)
    16.   goods.value = res.result
    17. }
    18. getGoods()
    19.  
    20.  
    21. //sku
    22. let skuObj = {}
    23. const skuChange = (sku) => {
    24. 	skuObj = sku
    25. }
    26. //count
    27. const count = ref(1)
    28. const countChange = (count) => {
    29. 	console.log(count)
    30. }
    31. //购物车
    32. const addCar = () => {
    33. 	if(skuObj.skuId) {
    34. 		carStore.addCart({
    35. 			id: goods.value.id,
    36. 			name: goods.value.name,
    37. 			picture: goods.value.mainPictures[0],
    38. 			price: goods.value.price,
    39. 			count: count.value,
    40. 			skuId: skuObj.skuId,
    41. 			attrsText: skuObj.specsText,
    42. 			selected: true
    43. 		})
    44. 	} else {
    45. 		ElMessage.warning('请选择规格')
    46. 	}
    47. }
    48. </script>

    car.js

    1. // 封装购物车模块
    2.  
    3. import { defineStore } from 'pinia'
    4. import { computed, ref } from 'vue'
    5.  
    6.  
    7. export const useCartStore = defineStore('cart', () => {
    8.   // 1. 定义state - cartList
    9.   const cartList = ref([])
    10.   // 2. 定义action - addCart
    11.   const addCart = (goods) => {
    12.     // console.log('添加', goods)
    13.     // 添加购物车操作
    14.     // 已添加过 - count + 1
    15.     // 没有添加过 - 直接push
    16.     // 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
    17.     const item = cartList.value.find((item) => goods.skuId === item.skuId)
    18.     if (item) {
    19.       // 找到了
    20.       item.count++
    21.     } else {
    22.       // 没找到
    23.       cartList.value.push(goods)
    24.     }
    25.   }
    26.   //删除购物车
    27.   const delCart = (skuId) => {
    28. 	  const idx = cartList.value.findIndex((item)=>skuId === item.skuId)
    29. 	  cartList.value.splice(idx,1)
    30.   }
    31.   //总数
    32.   const allCount = computed(()=>cartList.value.reduce((a,c)=>a+c.count,0))
    33.   //总价
    34.   const allPrice = computed(()=>cartList.value.reduce((a,c)=>a+c.price*c.count,0))
    35.   return {
    36.     cartList,
    37.     addCart,
    38. 	delCart,
    39. 	allPrice,
    40. 	allCount
    41.   }
    42. }, {
    43.   persist: true,
    44. })

    购物车页面

    router.js添加

    1. {
    2. 				path: 'cartlist',
    3. 				component: CartList
    4. 			}

    views/cartList/index.vue

    1. <script setup>
    2. 	import {useCartStore} from '@/stores/car'
    3. 	const cartStore = useCartStore()
    4. 	const singleCheck = (i, selected) => {
    5. 	  cartStore.singleCheck(i.skuId,selected)
    6. 	}
    7. 	const allCheck = (selected) => {
    8. 		cartStore.allCheck(selected)
    9. 	}
    10. </script>
    11.  
    12. <template>
    13.   <div class="xtx-cart-page">
    14.     <div class="container m-top-20">
    15.       <div class="cart">
    16.         <table>
    17.           <thead>
    18.             <tr>
    19.               <th width="120">
    20.                 <el-checkbox :model-value="cartStore.isAll" @change="allCheck"/>
    21.               </th>
    22.               <th width="400">商品信息</th>
    23.               <th width="220">单价</th>
    24.               <th width="180">数量</th>
    25.               <th width="180">小计</th>
    26.               <th width="140">操作</th>
    27.             </tr>
    28.           </thead>
    29.           <!-- 商品列表 -->
    30.           <tbody>
    31.             <tr v-for="i in cartStore.cartList" :key="i.id">
    32.               <td>
    33.                 <el-checkbox :model-value="i.selected" @change="(selected)=>singleCheck(i,selected)"/>
    34.               </td>
    35.               <td>
    36.                 <div class="goods">
    37.                   <RouterLink to="/"><img :src="i.picture" alt="" /></RouterLink>
    38.                   <div>
    39.                     <p class="name ellipsis">
    40.                       {{ i.name }}
    41.                     </p>
    42.                   </div>
    43.                 </div>
    44.               </td>
    45.               <td class="tc">
    46.                 <p>&yen;{{ i.price }}</p>
    47.               </td>
    48.               <td class="tc">
    49.                 <el-input-number v-model="i.count" />
    50.               </td>
    51.               <td class="tc">
    52.                 <p class="f16 red">&yen;{{ (i.price * i.count).toFixed(2) }}</p>
    53.               </td>
    54.               <td class="tc">
    55.                 <p>
    56.                   <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delCart(i)">
    57.                     <template #reference>
    58.                       <a href="javascript:;">删除</a>
    59.                     </template>
    60.                   </el-popconfirm>
    61.                 </p>
    62.               </td>
    63.             </tr>
    64.             <tr v-if="cartStore.cartList.length === 0">
    65.               <td colspan="6">
    66.                 <div class="cart-none">
    67.                   <el-empty description="购物车列表为空">
    68.                     <el-button type="primary">随便逛逛</el-button>
    69.                   </el-empty>
    70.                 </div>
    71.               </td>
    72.             </tr>
    73.           </tbody>
    74.  
    75.         </table>
    76.       </div>
    77.       <!-- 操作栏 -->
    78.       <div class="action">
    79.         <div class="batch">
    80.           共 {{cartStore.allCount}} 件商品，已选择 {{cartStore.selectCount}} 件，商品合计：
    81.           <span class="red">¥ {{cartStore.selectPrice.toFixed(2)}} </span>
    82.         </div>
    83.         <div class="total">
    84.           <el-button size="large" type="primary" >下单结算</el-button>
    85.         </div>
    86.       </div>
    87.     </div>
    88.   </div>
    89. </template>
    90.  
    91. <style scoped lang="scss">
    92. .xtx-cart-page {
    93.   margin-top: 20px;
    94.  
    95.   .cart {
    96.     background: #fff;
    97.     color: #666;
    98.  
    99.     table {
    100.       border-spacing: 0;
    101.       border-collapse: collapse;
    102.       line-height: 24px;
    103.  
    104.       th,
    105.       td {
    106.         padding: 10px;
    107.         border-bottom: 1px solid #f5f5f5;
    108.  
    109.         &:first-child {
    110.           text-align: left;
    111.           padding-left: 30px;
    112.           color: #999;
    113.         }
    114.       }
    115.  
    116.       th {
    117.         font-size: 16px;
    118.         font-weight: normal;
    119.         line-height: 50px;
    120.       }
    121.     }
    122.   }
    123.  
    124.   .cart-none {
    125.     text-align: center;
    126.     padding: 120px 0;
    127.     background: #fff;
    128.  
    129.     p {
    130.       color: #999;
    131.       padding: 20px 0;
    132.     }
    133.   }
    134.  
    135.   .tc {
    136.     text-align: center;
    137.  
    138.     a {
    139.       color: $xtxColor;
    140.     }
    141.  
    142.     .xtx-numbox {
    143.       margin: 0 auto;
    144.       width: 120px;
    145.     }
    146.   }
    147.  
    148.   .red {
    149.     color: $priceColor;
    150.   }
    151.  
    152.   .green {
    153.     color: $xtxColor;
    154.   }
    155.  
    156.   .f16 {
    157.     font-size: 16px;
    158.   }
    159.  
    160.   .goods {
    161.     display: flex;
    162.     align-items: center;
    163.  
    164.     img {
    165.       width: 100px;
    166.       height: 100px;
    167.     }
    168.  
    169.     >div {
    170.       width: 280px;
    171.       font-size: 16px;
    172.       padding-left: 10px;
    173.  
    174.       .attr {
    175.         font-size: 14px;
    176.         color: #999;
    177.       }
    178.     }
    179.   }
    180.  
    181.   .action {
    182.     display: flex;
    183.     background: #fff;
    184.     margin-top: 20px;
    185.     height: 80px;
    186.     align-items: center;
    187.     font-size: 16px;
    188.     justify-content: space-between;
    189.     padding: 0 30px;
    190.  
    191.     .xtx-checkbox {
    192.       color: #999;
    193.     }
    194.  
    195.     .batch {
    196.       a {
    197.         margin-left: 20px;
    198.       }
    199.     }
    200.  
    201.     .red {
    202.       font-size: 18px;
    203.       margin-right: 20px;
    204.       font-weight: bold;
    205.     }
    206.   }
    207.  
    208.   .tit {
    209.     color: #666;
    210.     font-size: 16px;
    211.     font-weight: normal;
    212.     line-height: 50px;
    213.   }
    214.  
    215. }
    216. </style>

    stores/car.js

    1. // 封装购物车模块
    2.  
    3. import { defineStore } from 'pinia'
    4. import { computed, ref } from 'vue'
    5. import {insertCartAPI,findNewCartListAPI,delCartAPI} from '@/api/cart'
    6. import {useUserStore} from '@/stores/user'
    7.  
    8.  
    9. export const useCartStore = defineStore('cart', () => {
    10. 	const userStore = useUserStore()
    11. 	const isLogin = computed(()=>userStore.userInfo.token)
    12.   // 1. 定义state - cartList
    13.   const cartList = ref([])
    14.   // 2. 定义action - addCart
    15.   const addCart = async (goods) => {
    16. 	  const {skuId,count} = goods
    17. 	  if(isLogin.value) {
    18. 		  //登录过后
    19. 		  await insertCartAPI({skuId,count}) 
    20. 		  const res = await findNewCartListAPI()
    21. 		  cartList.value = res.result
    22. 	  } else {
    23. 		// console.log('添加', goods)
    24. 		// 添加购物车操作
    25. 		// 已添加过 - count + 1
    26. 		// 没有添加过 - 直接push
    27. 		// 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
    28. 		const item = cartList.value.find((item) => goods.skuId === item.skuId)
    29. 		if (item) {
    30. 		  // 找到了
    31. 		  item.count++
    32. 		} else {
    33. 		  // 没找到
    34. 		  cartList.value.push(goods)
    35. 		}
    36. 	  }
    37.     
    38.   }
    39.   //更新
    40.   const updateNewList = async () => {
    41. 	  const res = await findNewCartListAPI()
    42. 	  cartList.value = res.result
    43.   }
    44.   //删除购物车
    45.   const delCart = async(skuId) => {
    46. 	  if(isLogin.value) {
    47. 		  await delCartAPI([skuId])
    48. 		  const res = await findNewCartListAPI()
    49. 		  cartList.value = res.result
    50. 	  } else {
    51. 		  const idx = cartList.value.findIndex((item)=>skuId === item.skuId)
    52. 		  cartList.value.splice(idx,1)
    53. 	  }
    54.   }
    55.   //总数
    56.   const allCount = computed(()=>cartList.value.reduce((a,c)=>a+c.count,0))
    57.   //总价
    58.   const allPrice = computed(()=>cartList.value.reduce((a,c)=>a+c.price*c.count,0))
    59.   // 单选功能
    60.   const singleCheck = (skuId, selected) => {
    61.     // 通过skuId找到要修改的那一项 然后把它的selected修改为传过来的selected
    62.     const item = cartList.value.find((item) => item.skuId === skuId)
    63.     item.selected = selected
    64.   }
    65.   //是否全选
    66.   const isAll = computed(()=>cartList.value.every((item) => item.selected))
    67.   //全选
    68.   const allCheck = (selected) => {
    69. 	  cartList.value.forEach(item => item.selected = selected)
    70.   }
    71.   //已选择的数量
    72.   const selectCount = computed(()=>cartList.value.filter(item=>item.selected).reduce((a,c)=>a+c.count,0))
    73.   //已选择价钱
    74.   const selectPrice = computed(()=>cartList.value.filter(item=>item.selected).reduce((a,c)=>a+c.price*c.count,0))
    75.   //清除购物车
    76.   const clearCart = () => {
    77. 	  cartList.value = []
    78.   }
    79.   return {
    80.     cartList,
    81.     addCart,
    82. 	delCart,
    83. 	allPrice,
    84. 	allCount,
    85. 	singleCheck,
    86. 	isAll,
    87. 	allCheck,
    88. 	selectCount,
    89. 	selectPrice,
    90. 	clearCart,
    91. 	updateNewList
    92.   }
    93. }, {
    94.   persist: true,
    95. })

    api/cart.js

    1. import httpInstance from '@/utils/http'
    2. // 加入购物车
    3. export const insertCartAPI = ({ skuId, count }) => {
    4.   return httpInstance({
    5.     url: '/member/cart',
    6.     method: 'POST',
    7.     data: {
    8.       skuId,
    9.       count
    10.     }
    11.   })
    12. }
    13.  
    14. //登录购物车
    15. export const findNewCartListAPI = () => {
    16.   return httpInstance({
    17.     url: '/member/cart'
    18.   })
    19. }
    20.  
    21. // 删除购物车
    22. export const delCartAPI = (ids) => {
    23.   return httpInstance({
    24.     url: '/member/cart',
    25.     method: 'DELETE',
    26.     data: {
    27.       ids
    28.     }
    29.   })
    30. }
    31.  
    32. //合并购物车
    33. export const mergeCartAPI = (data) => {
    34. 	return httpInstance ({
    35. 		url: '/member/cart/merge',
    36. 		method: 'POST',
    37. 		data
    38. 	})
    39. }

    stores/user.js

    1. // 管理用户数据相关
    2.  
    3. import { defineStore } from 'pinia'
    4. import { ref } from 'vue'
    5. import { loginAPI } from '@/api/user'
    6. import {useCartStore} from './car'
    7. import {mergeCartAPI} from '@/api/cart'
    8.  
    9. export const useUserStore = defineStore('user', () => {
    10.   const cartStore = useCartStore()
    11.   // 1. 定义管理用户数据的state
    12.   const userInfo = ref({})
    13.   // 2. 定义获取接口数据的action函数
    14.   const getUserInfo = async ({ account, password }) => {
    15.     const res = await loginAPI({ account, password })
    16.     userInfo.value = res.result
    17. 	mergeCartAPI(cartStore.cartList.map(item => {
    18. 		return {
    19. 			skuId: item.skuId,
    20. 			selected: item.selected,
    21. 			count: item.count
    22. 		}
    23. 	}))
    24. 	cartStore.updateNewList()
    25.   }
    26.    // 退出时清除用户信息
    27.     const clearUserInfo = () => {
    28.       userInfo.value = {}
    29. 	  cartStore.clearCart()
    30.     }
    31.   // 3. 以对象的格式把state和action return
    32.   return {
    33.     userInfo,
    34. 	getUserInfo,
    35. 	clearUserInfo
    36.   }
    37. }, {
    38.   persist: true,
    39. })

    单选按钮

    全选按钮

    加入、删除购物车

    清空购物车

    合并本地购物车 

    订单页 

    路由

    1. {
    2. 				path: 'checkout',
    3. 				component: CheckOut
    4. 			}

     api/checkout.js

    1. import httpInstance from '@/utils/http'
    2. /**
    3.  * 获取结算信息
    4.  */
    5. export const getCheckoutInfoAPI = () => {
    6.   return httpInstance({
    7.     url:'/member/order/pre'
    8.   })
    9. }
    10.  
    11.  
    12. // 创建订单
    13. export const createOrderAPI = (data) => {
    14.   return httpInstance({
    15.     url: '/member/order',
    16.     method: 'POST',
    17.     data
    18.   })
    19. }

    views/pay/index.vue

    1. <script setup>
    2. 	import {getCheckoutInfoAPI,createOrderAPI} from '@/api/checkout'
    3. 	import {ref,onMounted} from 'vue'
    4. 	import {useRouter} from 'vue-router'
    5. 	import {useCartStore} from '@/stores/car'
    6. 	const cartStore = useCartStore()
    7. 	const router = useRouter()
    8. 	const checkInfo = ref({})  // 订单对象
    9. 	const curAddress = ref({})
    10. 	const getCheckInfo = async () => {
    11. 		const res = await getCheckoutInfoAPI()
    12. 		checkInfo.value = res.result
    13. 		const item = checkInfo.value.userAddresses.find(item=>item.isDefault === 0)
    14. 		curAddress.value = item
    15. 	}
    16. 	onMounted(()=>getCheckInfo())
    17. 	
    18. 	const showDialog = ref(false)
    19. 	
    20. 	const activeAddress = ref({})
    21. 	//切换地址
    22. 	const switchAddress = (item) => {
    23. 		switchAddress.value = item
    24. 	}
    25. 	const confirm = () => {
    26. 		curAddress.value = activeAddress.value
    27. 		showDialog.value = false
    28. 		activeAddress.value = {}
    29. 	}
    30. 	
    31. 	//创建订单
    32. 	const createOrder = async () => {
    33. 	  const res = await createOrderAPI({
    34. 	    deliveryTimeType: 1,
    35. 	    payType: 1,
    36. 	    payChannel: 1,
    37. 	    buyerMessage: '',
    38. 	    goods: checkInfo.value.goods.map(item => {
    39. 	      return {
    40. 	        skuId: item.skuId,
    41. 	        count: item.count
    42. 	      }
    43. 	    }),
    44. 	    addressId: curAddress.value.id
    45. 	  })
    46. 	  const orderId = res.result.id
    47. 	  router.push({
    48. 	    path: '/pay',
    49. 	    query: {
    50. 	      id: orderId
    51. 	    }
    52. 	  })
    53. 	  //更新购物车
    54. 	  cartStore.updateNewList()
    55. 	}
    56.  
    57.  
    58. </script>
    59.  
    60. <template>
    61.   <div class="xtx-pay-checkout-page">
    62.     <div class="container">
    63.       <div class="wrapper">
    64.         <!-- 收货地址 -->
    65.         <h3 class="box-title">收货地址</h3>
    66.         <div class="box-body">
    67.           <div class="address">
    68.             <div class="text">
    69.               <div class="none" v-if="!curAddress">您需要先添加收货地址才可提交订单。</div>
    70.               <ul v-else>
    71.                 <li><span>收<i />货<i />人：</span>{{ curAddress.receiver }}</li>
    72.                 <li><span>联系方式：</span>{{ curAddress.contact }}</li>
    73.                 <li><span>收货地址：</span>{{ curAddress.fullLocation }} {{ curAddress.address }}</li>
    74.               </ul>
    75.             </div>
    76.             <div class="action">
    77.               <el-button size="large" @click="showDialog = true">切换地址</el-button>
    78.               <el-button size="large" @click="addFlag = true">添加地址</el-button>
    79.             </div>
    80.           </div>
    81.         </div>
    82.         <!-- 商品信息 -->
    83.         <h3 class="box-title">商品信息</h3>
    84.         <div class="box-body">
    85.           <table class="goods">
    86.             <thead>
    87.               <tr>
    88.                 <th width="520">商品信息</th>
    89.                 <th width="170">单价</th>
    90.                 <th width="170">数量</th>
    91.                 <th width="170">小计</th>
    92.                 <th width="170">实付</th>
    93.               </tr>
    94.             </thead>
    95.             <tbody>
    96.               <tr v-for="i in checkInfo.goods" :key="i.id">
    97.                 <td>
    98.                   <a href="javascript:;" class="info">
    99.                     <img :src="i.picture" alt="">
    100.                     <div class="right">
    101.                       <p>{{ i.name }}</p>
    102.                       <p>{{ i.attrsText }}</p>
    103.                     </div>
    104.                   </a>
    105.                 </td>
    106.                 <td>&yen;{{ i.price }}</td>
    107.                 <td>{{ i.price }}</td>
    108.                 <td>&yen;{{ i.totalPrice }}</td>
    109.                 <td>&yen;{{ i.totalPayPrice }}</td>
    110.               </tr>
    111.             </tbody>
    112.           </table>
    113.         </div>
    114.         <!-- 配送时间 -->
    115.         <h3 class="box-title">配送时间</h3>
    116.         <div class="box-body">
    117.           <a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a>
    118.           <a class="my-btn" href="javascript:;">工作日送货：周一至周五</a>
    119.           <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a>
    120.         </div>
    121.         <!-- 支付方式 -->
    122.         <h3 class="box-title">支付方式</h3>
    123.         <div class="box-body">
    124.           <a class="my-btn active" href="javascript:;">在线支付</a>
    125.           <a class="my-btn" href="javascript:;">货到付款</a>
    126.           <span style="color:#999">货到付款需付5元手续费</span>
    127.         </div>
    128.         <!-- 金额明细 -->
    129.         <h3 class="box-title">金额明细</h3>
    130.         <div class="box-body">
    131.           <div class="total">
    132.             <dl>
    133.               <dt>商品件数：</dt>
    134.               <dd>{{ checkInfo.summary?.goodsCount }}件</dd>
    135.             </dl>
    136.             <dl>
    137.               <dt>商品总价：</dt>
    138.               <dd>¥{{ checkInfo.summary?.totalPrice.toFixed(2) }}</dd>
    139.             </dl>
    140.             <dl>
    141.               <dt>运<i></i>费：</dt>
    142.               <dd>¥{{ checkInfo.summary?.postFee.toFixed(2) }}</dd>
    143.             </dl>
    144.             <dl>
    145.               <dt>应付总额：</dt>
    146.               <dd class="price">{{ checkInfo.summary?.totalPayPrice.toFixed(2) }}</dd>
    147.             </dl>
    148.           </div>
    149.         </div>
    150.         <!-- 提交订单 -->
    151.         <div class="submit">
    152.           <el-button type="primary" size="large" @click="createOrder">提交订单</el-button>
    153.         </div>
    154.       </div>
    155.     </div>
    156.   </div>
    157.   <!-- 切换地址 -->
    158.   <el-dialog v-model="showDialog" title="切换收货地址" width="30%" center>
    159.     <div class="addressWrapper">
    160.       <div class="text item" :class="{active:activeAddress.id===item.id}" @click="switchAddress(item)" v-for="item in checkInfo.userAddresses"  :key="item.id">
    161.         <ul>
    162.         <li><span>收<i />货<i />人：</span>{{ item.receiver }} </li>
    163.         <li><span>联系方式：</span>{{ item.contact }}</li>
    164.         <li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li>
    165.         </ul>
    166.       </div>
    167.     </div>
    168.     <template #footer>
    169.       <span class="dialog-footer">
    170.         <el-button>取消</el-button>
    171.         <el-button type="primary" @click="confirm">确定</el-button>
    172.       </span>
    173.     </template>
    174.   </el-dialog>
    175.   <!-- 添加地址 -->
    176. </template>
    177.  
    178. <style scoped lang="scss">
    179. .xtx-pay-checkout-page {
    180.   margin-top: 20px;
    181.  
    182.   .wrapper {
    183.     background: #fff;
    184.     padding: 0 20px;
    185.  
    186.     .box-title {
    187.       font-size: 16px;
    188.       font-weight: normal;
    189.       padding-left: 10px;
    190.       line-height: 70px;
    191.       border-bottom: 1px solid #f5f5f5;
    192.     }
    193.  
    194.     .box-body {
    195.       padding: 20px 0;
    196.     }
    197.   }
    198. }
    199.  
    200. .address {
    201.   border: 1px solid #f5f5f5;
    202.   display: flex;
    203.   align-items: center;
    204.  
    205.   .text {
    206.     flex: 1;
    207.     min-height: 90px;
    208.     display: flex;
    209.     align-items: center;
    210.  
    211.     .none {
    212.       line-height: 90px;
    213.       color: #999;
    214.       text-align: center;
    215.       width: 100%;
    216.     }
    217.  
    218.     >ul {
    219.       flex: 1;
    220.       padding: 20px;
    221.  
    222.       li {
    223.         line-height: 30px;
    224.  
    225.         span {
    226.           color: #999;
    227.           margin-right: 5px;
    228.  
    229.           >i {
    230.             width: 0.5em;
    231.             display: inline-block;
    232.           }
    233.         }
    234.       }
    235.     }
    236.  
    237.     >a {
    238.       color: $xtxColor;
    239.       width: 160px;
    240.       text-align: center;
    241.       height: 90px;
    242.       line-height: 90px;
    243.       border-right: 1px solid #f5f5f5;
    244.     }
    245.   }
    246.  
    247.   .action {
    248.     width: 420px;
    249.     text-align: center;
    250.  
    251.     .btn {
    252.       width: 140px;
    253.       height: 46px;
    254.       line-height: 44px;
    255.       font-size: 14px;
    256.  
    257.       &:first-child {
    258.         margin-right: 10px;
    259.       }
    260.     }
    261.   }
    262. }
    263.  
    264. .goods {
    265.   width: 100%;
    266.   border-collapse: collapse;
    267.   border-spacing: 0;
    268.  
    269.   .info {
    270.     display: flex;
    271.     text-align: left;
    272.  
    273.     img {
    274.       width: 70px;
    275.       height: 70px;
    276.       margin-right: 20px;
    277.     }
    278.  
    279.     .right {
    280.       line-height: 24px;
    281.  
    282.       p {
    283.         &:last-child {
    284.           color: #999;
    285.         }
    286.       }
    287.     }
    288.   }
    289.  
    290.   tr {
    291.     th {
    292.       background: #f5f5f5;
    293.       font-weight: normal;
    294.     }
    295.  
    296.     td,
    297.     th {
    298.       text-align: center;
    299.       padding: 20px;
    300.       border-bottom: 1px solid #f5f5f5;
    301.  
    302.       &:first-child {
    303.         border-left: 1px solid #f5f5f5;
    304.       }
    305.  
    306.       &:last-child {
    307.         border-right: 1px solid #f5f5f5;
    308.       }
    309.     }
    310.   }
    311. }
    312.  
    313. .my-btn {
    314.   width: 228px;
    315.   height: 50px;
    316.   border: 1px solid #e4e4e4;
    317.   text-align: center;
    318.   line-height: 48px;
    319.   margin-right: 25px;
    320.   color: #666666;
    321.   display: inline-block;
    322.  
    323.   &.active,
    324.   &:hover {
    325.     border-color: $xtxColor;
    326.   }
    327. }
    328.  
    329. .total {
    330.   dl {
    331.     display: flex;
    332.     justify-content: flex-end;
    333.     line-height: 50px;
    334.  
    335.     dt {
    336.       i {
    337.         display: inline-block;
    338.         width: 2em;
    339.       }
    340.     }
    341.  
    342.     dd {
    343.       width: 240px;
    344.       text-align: right;
    345.       padding-right: 70px;
    346.  
    347.       &.price {
    348.         font-size: 20px;
    349.         color: $priceColor;
    350.       }
    351.     }
    352.   }
    353. }
    354.  
    355. .submit {
    356.   text-align: right;
    357.   padding: 60px;
    358.   border-top: 1px solid #f5f5f5;
    359. }
    360.  
    361. .addressWrapper {
    362.   max-height: 500px;
    363.   overflow-y: auto;
    364. }
    365.  
    366. .text {
    367.   flex: 1;
    368.   min-height: 90px;
    369.   display: flex;
    370.   align-items: center;
    371.  
    372.   &.item {
    373.     border: 1px solid #f5f5f5;
    374.     margin-bottom: 10px;
    375.     cursor: pointer;
    376.  
    377.     &.active,
    378.     &:hover {
    379.       border-color: $xtxColor;
    380.       background: lighten($xtxColor, 50%);
    381.     }
    382.  
    383.     >ul {
    384.       padding: 10px;
    385.       font-size: 14px;
    386.       line-height: 30px;
    387.     }
    388.   }
    389. }
    390. </style>

    支付页 

    router.js

    1. {
    2. 				path: 'pay',
    3. 				component: Pay
    4. 			}

    api/pay.js

    1. import httpInstance from '@/utils/http'
    2.  
    3. export const getOrderAPI = (id) => {
    4.   return httpInstance({
    5.     url: `/member/order/${id}`
    6.   })
    7. }

    composables/useCountDown.js

    1. // 封装倒计时逻辑函数
    2. import { computed, onUnmounted, ref } from 'vue'
    3. import dayjs from 'dayjs'
    4. export const useCountDown = () => {
    5.   // 1. 响应式的数据
    6.   let timer = null
    7.   const time = ref(0)
    8.   // 格式化时间 为 xx分xx秒
    9.   const formatTime = computed(() => dayjs.unix(time.value).format('mm分ss秒'))
    10.   // 2. 开启倒计时的函数
    11.   const start = (currentTime) => {
    12.     // 开始倒计时的逻辑
    13.     // 核心逻辑的编写：每隔1s就减一
    14.     time.value = currentTime
    15.     timer = setInterval(() => {
    16.       time.value--
    17.     }, 1000)
    18.   }
    19.   // 组件销毁时清除定时器
    20.   onUnmounted(() => {
    21.     timer && clearInterval(timer)
    22.   })
    23.   return {
    24.     formatTime,
    25.     start
    26.   }
    27. }

    pay/index.vue

    1. <script setup>
    2. import { getOrderAPI } from '@/api/pay'
    3. import { onMounted, ref } from 'vue'
    4. import { useRoute } from 'vue-router'
    5. import {useCountDown} from '@/composables/useCountDown'
    6. const {formatTime,start} = useCountDown()
    7. // 获取订单数据
    8. const route = useRoute()
    9. const payInfo = ref({})
    10. const getPayInfo = async () => {
    11.   const res = await getOrderAPI(route.query.id)
    12.   payInfo.value = res.result
    13.   start(res.result.countdown)
    14. }
    15. onMounted(() => getPayInfo())
    16.  
    17. // 支付地址
    18. const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
    19. const backURL = 'http://127.0.0.1:5173/paycallback'
    20. const redirectUrl = encodeURIComponent(backURL)
    21. const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`
    22. </script>
    23.  
    24.  
    25. <template>
    26.   <div class="xtx-pay-page">
    27.     <div class="container">
    28.       <!-- 付款信息 -->
    29.       <div class="pay-info">
    30.         <span class="icon iconfont icon-queren2"></span>
    31.         <div class="tip">
    32.           <p>订单提交成功！请尽快完成支付。</p>
    33.           <p>支付还剩 <span>{{ formatTime }}</span>, 超时后将取消订单</p>
    34.         </div>
    35.         <div class="amount">
    36.           <span>应付总额：</span>
    37.           <span>¥{{ payInfo.payMoney?.toFixed(2) }}</span>
    38.         </div>
    39.       </div>
    40.       <!-- 付款方式 -->
    41.       <div class="pay-type">
    42.         <p class="head">选择以下支付方式付款</p>
    43.         <div class="item">
    44.           <p>支付平台</p>
    45.           <a class="btn wx" href="javascript:;"></a>
    46.           <a class="btn alipay" :href="payUrl"></a>
    47.         </div>
    48.         <div class="item">
    49.           <p>支付方式</p>
    50.           <a class="btn" href="javascript:;">招商银行</a>
    51.           <a class="btn" href="javascript:;">工商银行</a>
    52.           <a class="btn" href="javascript:;">建设银行</a>
    53.           <a class="btn" href="javascript:;">农业银行</a>
    54.           <a class="btn" href="javascript:;">交通银行</a>
    55.         </div>
    56.       </div>
    57.     </div>
    58.   </div>
    59. </template>
    60.  
    61. <style scoped lang="scss">
    62. .xtx-pay-page {
    63.   margin-top: 20px;
    64. }
    65.  
    66. .pay-info {
    67.  
    68.   background: #fff;
    69.   display: flex;
    70.   align-items: center;
    71.   height: 240px;
    72.   padding: 0 80px;
    73.  
    74.   .icon {
    75.     font-size: 80px;
    76.     color: #1dc779;
    77.   }
    78.  
    79.   .tip {
    80.     padding-left: 10px;
    81.     flex: 1;
    82.  
    83.     p {
    84.       &:first-child {
    85.         font-size: 20px;
    86.         margin-bottom: 5px;
    87.       }
    88.  
    89.       &:last-child {
    90.         color: #999;
    91.         font-size: 16px;
    92.       }
    93.     }
    94.   }
    95.  
    96.   .amount {
    97.     span {
    98.       &:first-child {
    99.         font-size: 16px;
    100.         color: #999;
    101.       }
    102.  
    103.       &:last-child {
    104.         color: $priceColor;
    105.         font-size: 20px;
    106.       }
    107.     }
    108.   }
    109. }
    110.  
    111. .pay-type {
    112.   margin-top: 20px;
    113.   background-color: #fff;
    114.   padding-bottom: 70px;
    115.  
    116.   p {
    117.     line-height: 70px;
    118.     height: 70px;
    119.     padding-left: 30px;
    120.     font-size: 16px;
    121.  
    122.     &.head {
    123.       border-bottom: 1px solid #f5f5f5;
    124.     }
    125.   }
    126.  
    127.   .btn {
    128.     width: 150px;
    129.     height: 50px;
    130.     border: 1px solid #e4e4e4;
    131.     text-align: center;
    132.     line-height: 48px;
    133.     margin-left: 30px;
    134.     color: #666666;
    135.     display: inline-block;
    136.  
    137.     &.active,
    138.     &:hover {
    139.       border-color: $xtxColor;
    140.     }
    141.  
    142.     &.alipay {
    143.       background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png) no-repeat center / contain;
    144.     }
    145.  
    146.     &.wx {
    147.       background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg) no-repeat center / contain;
    148.     }
    149.   }
    150. }
    151. </style>

    账号

    askgxl8276@sandbox.com 

    登录密码

    111111

    支付密码

    111111

    会员中心 

    基本页面

    router.js

    1. import Member from '@/views/member/index.vue'
    2. import MemberInfo from '@/views/member/components/UserInfo.vue'
    3. import MemberOrder from '@/views/member/components/UserOrder.vue'
    4.  
    5. {
    6. 				path: 'member',
    7. 				component: Member,
    8. 				children: [
    9. 				    {
    10. 				      path: 'user',
    11. 				      component: MemberInfo
    12. 				    },
    13. 				    {
    14. 				      path: 'order',
    15. 				      component: MemberOrder
    16. 				    },
    17. 					]
    18. 			}

    LayoutNav.vue

    <li><a href="javascript:;" @click="$router.push('/member')">会员中心</a></li>

    UserInfo.vue

    1. <script setup>
    2. 	import { useUserStore } from '@/stores/user'
    3. 	const userStore = useUserStore()
    4. </script>
    5.  
    6. <template>
    7.   <div class="home-overview">
    8.     <!-- 用户信息 -->
    9.     <div class="user-meta">
    10.       <div class="avatar">
    11.         <img :src="userStore.userInfo?.avatar" />
    12.       </div>
    13.       <h4>{{ userStore.userInfo?.account }}</h4>
    14.     </div>
    15.     <div class="item">
    16.       <a href="javascript:;">
    17.         <span class="iconfont icon-hy"></span>
    18.         <p>会员中心</p>
    19.       </a>
    20.       <a href="javascript:;">
    21.         <span class="iconfont icon-aq"></span>
    22.         <p>安全设置</p>
    23.       </a>
    24.       <a href="javascript:;">
    25.         <span class="iconfont icon-dw"></span>
    26.         <p>地址管理</p>
    27.       </a>
    28.     </div>
    29.   </div>
    30.   <div class="like-container">
    31.     <div class="home-panel">
    32.       <div class="header">
    33.         <h4 data-v-bcb266e0="">猜你喜欢</h4>
    34.       </div>
    35.       <div class="goods-list">
    36.         <!-- <GoodsItem v-for="good in likeList" :key="good.id" :goods="good" /> -->
    37.       </div>
    38.     </div>
    39.   </div>
    40. </template>
    41.  
    42. <style scoped lang="scss">
    43. .home-overview {
    44.   height: 132px;
    45.   background: url(@/assets/images/center-bg.png) no-repeat center / cover;
    46.   display: flex;
    47.  
    48.   .user-meta {
    49.     flex: 1;
    50.     display: flex;
    51.     align-items: center;
    52.  
    53.     .avatar {
    54.       width: 85px;
    55.       height: 85px;
    56.       border-radius: 50%;
    57.       overflow: hidden;
    58.       margin-left: 60px;
    59.  
    60.       img {
    61.         width: 100%;
    62.         height: 100%;
    63.       }
    64.     }
    65.  
    66.     h4 {
    67.       padding-left: 26px;
    68.       font-size: 18px;
    69.       font-weight: normal;
    70.       color: white;
    71.     }
    72.   }
    73.  
    74.   .item {
    75.     flex: 1;
    76.     display: flex;
    77.     align-items: center;
    78.     justify-content: space-around;
    79.  
    80.     &:first-child {
    81.       border-right: 1px solid #f4f4f4;
    82.     }
    83.  
    84.     a {
    85.       color: white;
    86.       font-size: 16px;
    87.       text-align: center;
    88.  
    89.       .iconfont {
    90.         font-size: 32px;
    91.       }
    92.  
    93.       p {
    94.         line-height: 32px;
    95.       }
    96.     }
    97.   }
    98. }
    99.  
    100. .like-container {
    101.   margin-top: 20px;
    102.   border-radius: 4px;
    103.   background-color: #fff;
    104. }
    105.  
    106. .home-panel {
    107.   background-color: #fff;
    108.   padding: 0 20px;
    109.   margin-top: 20px;
    110.   height: 400px;
    111.  
    112.   .header {
    113.     height: 66px;
    114.     border-bottom: 1px solid #f5f5f5;
    115.     padding: 18px 0;
    116.     display: flex;
    117.     justify-content: space-between;
    118.     align-items: baseline;
    119.  
    120.     h4 {
    121.       font-size: 22px;
    122.       font-weight: 400;
    123.     }
    124.  
    125.   }
    126.  
    127.   .goods-list {
    128.     display: flex;
    129.     justify-content: space-around;
    130.   }
    131. }
    132. </style>

    UserOrder.vue

    1. <script setup>
    2. // tab列表
    3. const tabTypes = [
    4.   { name: "all", label: "全部订单" },
    5.   { name: "unpay", label: "待付款" },
    6.   { name: "deliver", label: "待发货" },
    7.   { name: "receive", label: "待收货" },
    8.   { name: "comment", label: "待评价" },
    9.   { name: "complete", label: "已完成" },
    10.   { name: "cancel", label: "已取消" }
    11. ]
    12. // 订单列表
    13. const orderList = []
    14.  
    15. </script>
    16.  
    17. <template>
    18.   <div class="order-container">
    19.     <el-tabs>
    20.       <!-- tab切换 -->
    21.       <el-tab-pane v-for="item in tabTypes" :key="item.name" :label="item.label" />
    22.  
    23.       <div class="main-container">
    24.         <div class="holder-container" v-if="orderList.length === 0">
    25.           <el-empty description="暂无订单数据" />
    26.         </div>
    27.         <div v-else>
    28.           <!-- 订单列表 -->
    29.           <div class="order-item" v-for="order in orderList" :key="order.id">
    30.             <div class="head">
    31.               <span>下单时间：{{ order.createTime }}</span>
    32.               <span>订单编号：{{ order.id }}</span>
    33.               <!-- 未付款，倒计时时间还有 -->
    34.               <span class="down-time" v-if="order.orderState === 1">
    35.                 <i class="iconfont icon-down-time"></i>
    36.                 <b>付款截止: {{order.countdown}}</b>
    37.               </span>
    38.             </div>
    39.             <div class="body">
    40.               <div class="column goods">
    41.                 <ul>
    42.                   <li v-for="item in order.skus" :key="item.id">
    43.                     <a class="image" href="javascript:;">
    44.                       <img :src="item.image" alt="" />
    45.                     </a>
    46.                     <div class="info">
    47.                       <p class="name ellipsis-2">
    48.                         {{ item.name }}
    49.                       </p>
    50.                       <p class="attr ellipsis">
    51.                         <span>{{ item.attrsText }}</span>
    52.                       </p>
    53.                     </div>
    54.                     <div class="price">¥{{ item.realPay?.toFixed(2) }}</div>
    55.                     <div class="count">x{{ item.quantity }}</div>
    56.                   </li>
    57.                 </ul>
    58.               </div>
    59.               <div class="column state">
    60.                 <p>{{ order.orderState }}</p>
    61.                 <p v-if="order.orderState === 3">
    62.                   <a href="javascript:;" class="green">查看物流</a>
    63.                 </p>
    64.                 <p v-if="order.orderState === 4">
    65.                   <a href="javascript:;" class="green">评价商品</a>
    66.                 </p>
    67.                 <p v-if="order.orderState === 5">
    68.                   <a href="javascript:;" class="green">查看评价</a>
    69.                 </p>
    70.               </div>
    71.               <div class="column amount">
    72.                 <p class="red">¥{{ order.payMoney?.toFixed(2) }}</p>
    73.                 <p>（含运费：¥{{ order.postFee?.toFixed(2) }}）</p>
    74.                 <p>在线支付</p>
    75.               </div>
    76.               <div class="column action">
    77.                 <el-button  v-if="order.orderState === 1" type="primary"
    78.                   size="small">
    79.                   立即付款
    80.                 </el-button>
    81.                 <el-button v-if="order.orderState === 3" type="primary" size="small">
    82.                   确认收货
    83.                 </el-button>
    84.                 <p><a href="javascript:;">查看详情</a></p>
    85.                 <p v-if="[2, 3, 4, 5].includes(order.orderState)">
    86.                   <a href="javascript:;">再次购买</a>
    87.                 </p>
    88.                 <p v-if="[4, 5].includes(order.orderState)">
    89.                   <a href="javascript:;">申请售后</a>
    90.                 </p>
    91.                 <p v-if="order.orderState === 1"><a href="javascript:;">取消订单</a></p>
    92.               </div>
    93.             </div>
    94.           </div>
    95.           <!-- 分页 -->
    96.           <div class="pagination-container">
    97.             <el-pagination background layout="prev, pager, next" />
    98.           </div>
    99.         </div>
    100.       </div>
    101.  
    102.     </el-tabs>
    103.   </div>
    104.  
    105. </template>
    106.  
    107. <style scoped lang="scss">
    108. .order-container {
    109.   padding: 10px 20px;
    110.  
    111.   .pagination-container {
    112.     display: flex;
    113.     justify-content: center;
    114.   }
    115.  
    116.   .main-container {
    117.     min-height: 500px;
    118.  
    119.     .holder-container {
    120.       min-height: 500px;
    121.       display: flex;
    122.       justify-content: center;
    123.       align-items: center;
    124.     }
    125.   }
    126. }
    127.  
    128. .order-item {
    129.   margin-bottom: 20px;
    130.   border: 1px solid #f5f5f5;
    131.  
    132.   .head {
    133.     height: 50px;
    134.     line-height: 50px;
    135.     background: #f5f5f5;
    136.     padding: 0 20px;
    137.     overflow: hidden;
    138.  
    139.     span {
    140.       margin-right: 20px;
    141.  
    142.       &.down-time {
    143.         margin-right: 0;
    144.         float: right;
    145.  
    146.         i {
    147.           vertical-align: middle;
    148.           margin-right: 3px;
    149.         }
    150.  
    151.         b {
    152.           vertical-align: middle;
    153.           font-weight: normal;
    154.         }
    155.       }
    156.     }
    157.  
    158.     .del {
    159.       margin-right: 0;
    160.       float: right;
    161.       color: #999;
    162.     }
    163.   }
    164.  
    165.   .body {
    166.     display: flex;
    167.     align-items: stretch;
    168.  
    169.     .column {
    170.       border-left: 1px solid #f5f5f5;
    171.       text-align: center;
    172.       padding: 20px;
    173.  
    174.       >p {
    175.         padding-top: 10px;
    176.       }
    177.  
    178.       &:first-child {
    179.         border-left: none;
    180.       }
    181.  
    182.       &.goods {
    183.         flex: 1;
    184.         padding: 0;
    185.         align-self: center;
    186.  
    187.         ul {
    188.           li {
    189.             border-bottom: 1px solid #f5f5f5;
    190.             padding: 10px;
    191.             display: flex;
    192.  
    193.             &:last-child {
    194.               border-bottom: none;
    195.             }
    196.  
    197.             .image {
    198.               width: 70px;
    199.               height: 70px;
    200.               border: 1px solid #f5f5f5;
    201.             }
    202.  
    203.             .info {
    204.               width: 220px;
    205.               text-align: left;
    206.               padding: 0 10px;
    207.  
    208.               p {
    209.                 margin-bottom: 5px;
    210.  
    211.                 &.name {
    212.                   height: 38px;
    213.                 }
    214.  
    215.                 &.attr {
    216.                   color: #999;
    217.                   font-size: 12px;
    218.  
    219.                   span {
    220.                     margin-right: 5px;
    221.                   }
    222.                 }
    223.               }
    224.             }
    225.  
    226.             .price {
    227.               width: 100px;
    228.             }
    229.  
    230.             .count {
    231.               width: 80px;
    232.             }
    233.           }
    234.         }
    235.       }
    236.  
    237.       &.state {
    238.         width: 120px;
    239.  
    240.         .green {
    241.           color: $xtxColor;
    242.         }
    243.       }
    244.  
    245.       &.amount {
    246.         width: 200px;
    247.  
    248.         .red {
    249.           color: $priceColor;
    250.         }
    251.       }
    252.  
    253.       &.action {
    254.         width: 140px;
    255.  
    256.         a {
    257.           display: block;
    258.  
    259.           &:hover {
    260.             color: $xtxColor;
    261.           }
    262.         }
    263.       }
    264.     }
    265.   }
    266. }
    267. </style>

     

    个人中心信息渲染

    api/user.js

    1. export const getLikeListAPI = ({ limit = 4 }) => {
    2.   return httpInstance({
    3.     url:'/goods/relevant',
    4.     params: {
    5.       limit 
    6.     }
    7.   })
    8. }

    UserInfo.vue

    1. <script setup>
    2. 	import { useUserStore } from '@/stores/user'
    3. 	import {getLikeListAPI} from '@/api/user'
    4. 	import { onMounted, ref } from 'vue'
    5. 	// 导入GoodsItem组件
    6. 	import GoodsItem from '@/views/home/components/GoodsItem.vue'
    7. 	const userStore = useUserStore()
    8. 	// 获取猜你喜欢列表
    9. 	const likeList = ref([])
    10. 	const getLikeList = async () => {
    11. 	  const res = await getLikeListAPI({ limit: 4 })
    12. 	  likeList.value = res.result
    13. 	}
    14. 	
    15. 	onMounted(() => getLikeList())
    16. </script>

    我的订单 

    api/user.js 

    1. export const getUserOrder = (params) => {
    2.   return httpInstance({
    3.     url:'/member/order',
    4.     method:'GET',
    5.     params
    6.   })
    7. }

    UserOrder.vue

    1. <script setup>
    2. import { getUserOrder } from '@/api/user'
    3. import { onMounted, ref } from 'vue'
    4. // tab列表
    5. const tabTypes = [
    6.   { name: "all", label: "全部订单" },
    7.   { name: "unpay", label: "待付款" },
    8.   { name: "deliver", label: "待发货" },
    9.   { name: "receive", label: "待收货" },
    10.   { name: "comment", label: "待评价" },
    11.   { name: "complete", label: "已完成" },
    12.   { name: "cancel", label: "已取消" }
    13. ]
    14. // tab切换
    15. const tabChange = (type) => {
    16.   params.value.orderState = type
    17.   getOrderList()
    18. }
    19.  
    20. // 获取订单列表
    21. const orderList = ref([])
    22. const params = ref({
    23.   orderState: 0,
    24.   page: 1,
    25.   pageSize: 2
    26. })
    27. const getOrderList = async () => {
    28.   const res = await getUserOrder(params.value)
    29.   orderList.value = res.result.items
    30.   total.value = res.result.counts
    31. }
    32. onMounted(() => getOrderList())
    33.  
    34. </script>
    <el-tabs @tab-change="tabChange">

    分页

    UserOrder.vue

    1. <!-- 分页 -->
    2.           <div class="pagination-container">
    3.             <el-pagination :total="total" @current-change="pageChange" :page-size="params.pageSize" background layout="prev, pager, next" />
    4.           </div>
    1. // 页数切换
    2. const pageChange = (page) => {
    3.   params.value.page = page
    4.   getOrderList()
    5. }

  • 相关阅读:
    猿创征文｜【HTML】标签学习之路
    POSIX信号量
    QT+OSG/osgEarth编译之四十：blend2d+Qt编译（一套代码、一套框架，跨平台编译，版本：blend2d-beta18）
    RHCSA之Linux基础
    html+css实现容器显示两行文本超出部分以省略号显示
    computer architecture simulator汇总
    [附源码]SSM计算机毕业设计疫情防控期间人员档案追寻系统JAVA
    Redis持久化
    Java贪心算法
    C++ 基础知识 ∈ C++ 编程笔记
  • 原文地址：https://blog.csdn.net/qq_63806300/article/details/132828206