# vue-rabbit

**Repository Path**: pikapi_box/vue-rabbit

## Basic Information

- **Project Name**: vue-rabbit
- **Description**: 基于Vue3的商城项目——小兔鲜儿
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2025-07-03
- **Last Updated**: 2025-07-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-rabbit

# 前端项目上线

## 项目打包说明

-   我们开发用的脚手架其实就是一个**微型服务器**，用于：支撑开发环境、运行代理服务器等。
-   打包完的文件中不存在：`.vue`、`.jsx`、`.less` 等文件，而是：`html`、`css`、`js`等。
-   打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行。
-   打包前，请务必梳理好前端项目的`ajax`封装（请求前缀、代理规则等）

## 项目部署

-   本地服务器部署（在局域网内可用访问）
-   nginx服务器部署
-   云服务器部署

参考：https://www.yuque.com/tianyu-coder/openshare/shka6xog7fbezhad



# jsconfig.json配置别名路径
配置别名路径可以在写代码时联想提示路径
```json
{
  "compilerOptions" : {
    "baseUrl" : "./",
    "paths" : {
      "@/*":["src/*"]
    }
  }
}
```
# elementPlus引入

小兔鲜ui项目设计到的组件
- 通用型组件（ElementPlus）
  - 如：Dialog模态框
- 业务定制化组件（自己手写）
  - 如：商品热榜组件

## 安装elementPlus和自动导入插件

参考官网：https://element-plus.org/zh-CN/guide/quickstart.html

安装elementPlus按需引入和自动导入插件

首先你需要安装`unplugin-vue-components` 和 `unplugin-auto-import`这两款插件

```shell
npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import
```
说明：

-   -D 表示只在开发环境中安装

##  配置自动按需导入

然后把下列代码插入到你的 `Vite` 或 `Webpack` 的配置文件中

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})
```

## 测试组件

```vue
<template>
  <el-button type="primary">i am button</el-button>
</template>
```

# elementPlus主题色定制

![1721280554212](./assets/elementPlus主题色定制.png)

如何定制？

参考官网：https://element-plus.org/zh-CN/guide/theming.html

![1721280757018](./assets/elementPlus主题色定制2.png)

## 1. 安装sass

基于vite的项目默认不支持css预处理器，需要开发者单独安装

```shell
npm i sass -D
```

## 2. 准备定制化的样式文件

styles/element/index.scss

```javascript
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
);
```

## 3. 自动导入配置

这里自动导入需要深入到elementPlus的组件中，按照官方的配置文档来

1.  配置elementPlus采用sass样式配色系统
2.  自动导入定制化样式文件进行样式覆盖

```javascript
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// elementPlus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
          // 1.配置elementPlus采用sass样式配色系统
          ElementPlusResolver({importStyle:"sass"})
      ],
    }),
  ],
  resolve: {
    // 实际的路径转换 @ => src
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 2.自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})
```

## 4.验证定制主题色生效

![1721281802511](./assets/elementPlus主题色定制3.png)

 

# axios安装并简单封装

![1721282281645](./assets/axios基础配置.png)

## 1. 安装axios

```shell
npm install axios --save
```

## 2. 基础配置

官方文档地址：<https://axios-http.com/zh/docs/intro>

基础配置通常包括：

1.  实例化 - baseURL + timeout
2.  拦截器 - 携带token 401拦截等

<pre>文件名: <code>utils/http.ts</code></pre>

```js
import axios from 'axios'

// 创建axios实例
const instance = axios.create({
    baseURL: `http://pcapi-xiaotuxian-front-devtest.itheima.net`,
    timeout: 5000
});

// axios请求拦截器
instance.interceptors.request.use(config => {
    return config;
}, e => Promise.reject(e))

// axios响应拦截器
instance.interceptors.response.use(res => res.data, e => {
    return Promise.reject(e)
})

export default instance
```

## 3. 封装请求函数并测试

<pre>文件名: <code>apps/testAPI.js</code></pre>

```js
import instance from '@/utils/http';

export function getCategoryAPI() {
    return instance({
        url: 'home/category/head'
    })
}
```

# 路由整体设计

**路由设计原则：**找<span style="color:red">页面的切换方式</span>

-   如果是整体切换，则为一级路由
-   如果是在一级路由的内部进行的内容切换，则为二级路由

## 一级路由

![1721296364351](./assets/路由设计1.png)

<pre>文件名: <code>views/Login/index.vue</code></pre>

```vue
<template>
  <h1>这是登录页面</h1>
</template>
```
<pre>文件名: <code>views/Layout/index.vue</code></pre>

```vue
<template>
  <h1>这是首页页面</h1>
</template>
```

<pre>一级路由: <code>router/index.js</code></pre>

```
routes: [
    {
        name: 'layout',
        path: '/',
        component: Layout
    },
    {
        name: 'login',
        path: '/login',
        component: Login
    }
]
```

## 二级路由

![1721296980089](./assets/路由设计2.png)


<pre>文件名: <code>views/Home/index.vue</code></pre>

```vue
<template>
  <h1>这是home</h1>
</template>
```

<pre>文件名: <code>views/Category/index.vue</code></pre>

```vue
<template>
  <h1>这是分类</h1>
</template>
```

二级路由: router/index.js

```js
{
    name: 'layout',
    path: '/',
    component: Layout,
    children: [
      	{
            path: '',
          	component: Home
        },
        {
        	  path: 'category',
          	component: Category
        }
    ]
}
```

# 静态资源引入和Error Lens安装

图片资源和样式资源说明：

1.  图片资源通常由 UI设计师 提供，常见的图片格式有png、svg等，都是由UI切图交给前端
2.  样式资源通常是指项目初始化的时候进行样式的重置，常见的比如开业的 normalize.css 或者自己手写

## 1. 静态资源引入

我们打算按照如下方式进行：

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

详情参考git提交记录

## 2. Error Lens插件安装

Error Lens是一个时时提供错误警告的信息的VScode插件，减低开发难度

![](./assets/error-lens.png)

# scss变量自动导入

![1721299971663](./assets/scss变量自动导入1.png)

自动导入配置步骤：

1）新增一个 `var.scss `文件，存入色值变量

2）通过 `vite.config.js` 配置自动导入文件

<pre>文件名: <code>styles/var.scss</code></pre>

```scss
$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;
$priceColor: #cf4444;
```

<pre>文件名: <code>vite.config.js</code></pre>

```js
css: {
    preprocessorOptions: {
      scss: {
        // 自动导入scss文件
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    }
}
```

# 补充eslint配置

<pre>文件名: <code>.eslintrc.cjs</code></pre>

```
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'vue/multi-word-component-names': 0, // 不再强制要求组件命名
  },
}
```



# Layout页

## Layout页组件结构快速搭建

![1721300761591](./assets/Layout模块静态模板搭建1.png)

详情参照：<a href="https://gitee.com/ninghongkang/vue-rabbit/commit/3fce6d4ee0904b838725816dc8e069ed06fc21d7">**feat: layout页面静态结构结构搭建**</a>

## 字体图标引入

![1721303278749](./assets/layout字体图标引入.png)



阿里的字体图标库支持多种引入方式，小兔鲜项目采用的是**font-class**引用的方式

在 `index.html`文件中引入即可

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

更多的引用方式参考官网：https://www.iconfont.cn/help/detail?spm=a313x.home_index.i3.28.58a33a815XEfoF&helptype=code

**font-class**引用方式，图标的使用步骤如下：

-   第一步：拷贝项目下面生成的fontclass代码：

```js
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css
```

-   第二步：挑选相应图标并获取类名，应用于页面：

```css
<i class="iconfont icon-xxx"></i>
```

## 一级导航渲染

![](./assets/layout一级导航.png)

**功能描述**：使用后端接口渲染一级路由导航

**实现步骤**

1.  封装接口函数
2.  调用接口函数
3.  v-for渲染模版

**代码如下**

<pre>文件名: <code>apis/layout.js</code></pre>

```js
import instance from '@/utils/http'

export function getCategoryAPI() {
    return instance({
        url: 'home/category/head'
    })
}
```

<pre>文件名: <code>views/components/LayoutHeader.vue</code></pre>

```vue
<template>
  <header class='app-header'>
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">小兔鲜</RouterLink>
      </h1>
      <ul class="app-header-nav">
        <li class="home">
          <RouterLink to="/">首页</RouterLink>
        </li>
        <li class="home" v-for="item in categoryList" :key="item.id">
          <RouterLink to="/">{{ item.name }}</RouterLink>
        </li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜">
      </div>
      <!-- 头部购物车 -->

    </div>
  </header>
</template>

<script setup lang="ts">
import {getCategoryAPI} from '@/apis/layout'
import {onMounted, ref} from 'vue'

const categoryList = ref([])
const getCategory = async () => {
  const res = await getCategoryAPI()
  console.log(res)
  categoryList.value = res.result;
  console.log(res.result)
}

// 勾子
onMounted(() => {
  console.log('钩子')
  getCategory()
})

</script>
```

## 吸顶导航交互实现

**功能描述**：要求浏览器在上下滚动的过程中，如果距离顶部的距离大于78px，导航吸顶显示，小于78px隐藏

**实现步骤**

![1721312845148](./assets/吸顶导航交互.png)

### 1. 准备组件静态结构

<pre>文件名: <code>views/components/LayoutFixed.vue</code></pre>

```vue
<template>
  <div class="app-header-sticky show">
    <div class="container">
      <RouterLink class="logo" to="/"/>
      <!-- 导航区域 -->
      <ul class="app-header-nav ">
        <li class="home">
          <RouterLink to="/">首页</RouterLink>
        </li>
        <li>
          <RouterLink to="/">居家</RouterLink>
        </li>
        <li>
          <RouterLink to="/">美食</RouterLink>
        </li>
        <li>
          <RouterLink to="/">服饰</RouterLink>
        </li>
        <li>
          <RouterLink to="/">母婴</RouterLink>
        </li>
        <li>
          <RouterLink to="/">个护</RouterLink>
        </li>
        <li>
          <RouterLink to="/">严选</RouterLink>
        </li>
        <li>
          <RouterLink to="/">数码</RouterLink>
        </li>
        <li>
          <RouterLink to="/">运动</RouterLink>
        </li>
        <li>
          <RouterLink to="/">杂项</RouterLink>
        </li>
      </ul>

      <div class="right">
        <RouterLink to="/">品牌</RouterLink>
        <RouterLink to="/">专题</RouterLink>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.app-header-sticky {
  width: 100%;
  height: 80px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1px solid #e4e4e4;
  // 此处为关键样式!!!
  // 状态一：往上平移自身高度 + 完全透明
  transform: translateY(-100%);
  opacity: 0;

  // 状态二：移除平移 + 完全不透明
  &.show {
    transition: all 0.3s linear;
    transform: none;
    opacity: 1;
  }

  .container {
    display: flex;
    align-items: center;
  }

  .logo {
    width: 200px;
    height: 80px;
    background: url("@/assets/images/logo.png") no-repeat right 2px;
    background-size: 160px auto;
  }

  .right {
    width: 220px;
    display: flex;
    text-align: center;
    padding-left: 40px;
    border-left: 2px solid $xtxColor;

    a {
      width: 38px;
      margin-right: 40px;
      font-size: 16px;
      line-height: 1;

      &:hover {
        color: $xtxColor;
      }
    }
  }
}

.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;

  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;

    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;

      &:hover {
        color: $xtxColor;
        border-bottom: 1px solid $xtxColor;
      }
    }

    .active {
      color: $xtxColor;
      border-bottom: 1px solid $xtxColor;
    }
  }
}
</style>
```

### 2. 渲染基础数据

将组件放置在合适的位置

<pre>文件名: <code>views/index.vue</code></pre>

```vue
<template>
  <LayoutFixed/>
  <LayoutNav/>
  <LayoutHeader/>
  <!-- 二级路由出口 -->
  <RouterView/>
  <LayoutFooter/>
</template>
```

### 3. 实现吸顶交互

核心逻辑：根据滚动距离判断当前show类名是否显示，大于78显示，小于78，不显示

```vue
<template>
  <div class="app-header-sticky" :class="{ show: y > 78 }">
    <!-- 省略部分代码 -->
  </div>
</template>

<script setup>
import LayoutHeaderUl from './LayoutHeaderUl.vue'
// vueUse
import { useScroll } from '@vueuse/core'
    
const { y } = useScroll(window)	// y横向滚动距离
</script>
```

要使用useScroll需要安装vueuse，命令如下

```shell
npm i @vueuse/core
```

## Pinia优化重复请求

![1721314171067](./assets/1721314171067.png)

如何优化？

![1721314466608](./assets/1721314466608.png)

代码如下：

```js
import {defineStore} from "pinia";
import {ref} from "vue";
import {getCategoryAPI} from "@/apis/layout";

// 官方推荐使用hooks的那种命名规范
/**
 * 参数一：id （建议与文件名一致）
 * 参数二：options 配置对象
 */
// 组合式写法
export const useCategoryStore = defineStore('category', () => {

        // 导航列表数据
        // categoryList就是state
        const categoryList = ref([])
    

        // getCategory函数就相当于action
        const getCategory = async () => {
            const res = await getCategoryAPI()
            categoryList.value = res.result;
        }

        return {categoryList, getCategory}
    }
)
```

接着在之前调用 getCategoryAPI() 的地方进行修改，详情参考<a href="https://gitee.com/ninghongkang/vue-rabbit/commit/e76189865d3d602965e452f5f4eeff2ed920b33b">**feat: pina优化导航数据**</a>





# Home页

## 整体结构搭建和分类实现

### 1. 整体结构创建

![](./assets/Home页整体结构.png)

1.按照结构新增五个组件，准备最简单的模版，分别在Home模块的入口组件中引入

-   HomeCategory
-   HomeBanner
-   HomeNew
-   HomeHot
-   HomeProduct

2.Home模块入口组件中引入并渲染

```vue
<template>
  <div class="container">
    <HomeCategory/>
    <HomeBanner/>
  </div>
  <HomeNew/>
  <HomeHot/>
  <HomeProduct/>
</template>

<script setup lang="ts">

import HomeCategory from "@/views/Home/components/HomeCategory.vue";
import HomeBanner from "@/views/Home/components/HomeBanner.vue";
import HomeNew from "@/views/Home/components/HomeNew.vue";
import HomeHot from "@/views/Home/components/HomeHot.vue";
import HomeProduct from "@/views/Home/components/HomeProduct.vue";
</script>
```

### 2. 分类实现

![1721318127877](./assets/分类实现.png)

1.准备详细模版

```vue
<script setup>

</script>

<template>
  <div class="home-category">
    <ul class="menu">
      <li v-for="item in 9" :key="item">
        <RouterLink to="/">居家</RouterLink>
        <RouterLink v-for="i in 2" :key="i" to="/">南北干货</RouterLink>
        <!-- 弹层layer位置 -->
        <div class="layer">
          <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
          <ul>
            <li v-for="i in 5" :key="i">
              <RouterLink to="/">
                <img alt=""/>
                <div class="info">
                  <p class="name ellipsis-2">
                    男士外套
                  </p>
                  <p class="desc ellipsis">男士外套，冬季必选</p>
                  <p class="price"><i>¥</i>200.00</p>
                </div>
              </RouterLink>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>


<style scoped lang='scss'>
.home-category {
  width: 250px;
  height: 500px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 99;

  .menu {
    li {
      padding-left: 40px;
      height: 55px;
      line-height: 55px;

      &:hover {
        background: $xtxColor;
      }

      a {
        margin-right: 4px;
        color: #fff;

        &:first-child {
          font-size: 16px;
        }
      }

      .layer {
        width: 990px;
        height: 500px;
        background: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 250px;
        top: 0;
        display: none;
        padding: 0 15px;

        h4 {
          font-size: 20px;
          font-weight: normal;
          line-height: 80px;

          small {
            font-size: 16px;
            color: #666;
          }
        }

        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            width: 310px;
            height: 120px;
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
            background: #fff;

            &:nth-child(3n) {
              margin-right: 0;
            }

            a {
              display: flex;
              width: 100%;
              height: 100%;
              align-items: center;
              padding: 10px;

              &:hover {
                background: #e3f9f4;
              }

              img {
                width: 95px;
                height: 95px;
              }

              .info {
                padding-left: 10px;
                line-height: 24px;
                overflow: hidden;

                .name {
                  font-size: 16px;
                  color: #666;
                }

                .desc {
                  color: #999;
                }

                .price {
                  font-size: 22px;
                  color: $priceColor;

                  i {
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
      }

      // 关键样式  hover状态下的layer盒子变成block
      &:hover {
        .layer {
          display: block;
        }
      }
    }
  }
}
</style>
```

2.使用pinia中的数据进行渲染，完整代码如下

```vue
<script setup>
import {useCategoryStore} from "@/stores/category.ts";

const categoryStore = useCategoryStore();

</script>

<template>
  <div class="home-category">
    <ul class="menu">
      <li v-for="item in categoryStore.categoryList" :key="item.id">
        <RouterLink to="/">{{ item.name }}</RouterLink>
        <RouterLink v-for="i in item.children.slice(0,2)" :key="i.id" to="/">{{ i.name }}</RouterLink>
        <!-- 弹层layer位置 -->
        <div class="layer">
          <h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
          <ul>
            <li v-for="i in item.goods" :key="i.id">
              <RouterLink to="/">
                <img :src="i.picture" alt=""/>
                <div class="info">
                  <p class="name ellipsis-2">
                    {{ i.name }}
                  </p>
                  <p class="desc ellipsis">{{ i.desc }}</p>
                  <p class="price"><i>¥</i>{{ i.price }}</p>
                </div>
              </RouterLink>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>


<style scoped lang='scss'>
.home-category {
  width: 250px;
  height: 500px;
  background: rgba(0, 0, 0, 0.8);
  position: relative;
  z-index: 99;

  .menu {
    li {
      padding-left: 40px;
      height: 55px;
      line-height: 55px;

      &:hover {
        background: $xtxColor;
      }

      a {
        margin-right: 4px;
        color: #fff;

        &:first-child {
          font-size: 16px;
        }
      }

      .layer {
        width: 990px;
        height: 500px;
        background: rgba(255, 255, 255, 0.8);
        position: absolute;
        left: 250px;
        top: 0;
        display: none;
        padding: 0 15px;

        h4 {
          font-size: 20px;
          font-weight: normal;
          line-height: 80px;

          small {
            font-size: 16px;
            color: #666;
          }
        }

        ul {
          display: flex;
          flex-wrap: wrap;

          li {
            width: 310px;
            height: 120px;
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
            background: #fff;

            &:nth-child(3n) {
              margin-right: 0;
            }

            a {
              display: flex;
              width: 100%;
              height: 100%;
              align-items: center;
              padding: 10px;

              &:hover {
                background: #e3f9f4;
              }

              img {
                width: 95px;
                height: 95px;
              }

              .info {
                padding-left: 10px;
                line-height: 24px;
                overflow: hidden;

                .name {
                  font-size: 16px;
                  color: #666;
                }

                .desc {
                  color: #999;
                }

                .price {
                  font-size: 22px;
                  color: $priceColor;

                  i {
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
      }

      // 关键样式  hover状态下的layer盒子变成block
      &:hover {
        .layer {
          display: block;
        }
      }
    }
  }
}
</style>
```

## banner轮播图实现

![1721319097317](D:\video\workspace\vue-project\vue-rabbit\assets\banner轮播图.png)

### 1. 准备静态组件

<pre>文件名: <code>views/Home/components/HomeBanner.vue</code></pre>

```vue
<script setup>

</script>

<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <!-- 有几张图片，就会有几个item-->
      <el-carousel-item v-for="item in 4" :key="item">
        <img
            src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-04-15/6d202d8e-bb47-4f92-9523-f32ab65754f4.jpg"
            alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang='scss'>
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>
```

### 2. 获取接口数据渲染组件

#### 1）封装接口

<pre>文件名: <code>apis/home.js</code></pre>

```js
import instance from '@/utils/http'

/**
 * @description: 获取banner图
 */
export function getBannerAPI() {
    return instance({
        url: 'home/banner'
    })
}
```

#### 2）获取接口数据渲染模版

<pre>文件名: <code>views/Home/components/HomeBanner.vue</code></pre>

```vue
<script setup>
import {onMounted, ref} from 'vue'
import {getBannerAPI} from "@/apis/home";

const bannerList = ref([])

const getBanner = async () => {
  const res = await getBannerAPI()
  // console.log(res)
  bannerList.value = res.result
}

onMounted(() => {
  getBanner()
})

</script>

<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <!-- 有几张图片，就会有几个item-->
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img
            :src="item.imgUrl"
            alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
```

## 面板组件封装

![1721320347110](./assets/面版组件封装.png)

### 组件封装核心思路

 把可复用的的结构只写一次，把**可能发生变化的部分抽象成组件参数（props / 插槽）**

![1721320520565](./assets/面版组件封装2.png)

观察发现有三个地方不同：

-   主标题
-   副标题
-   主体内容（图片及其下面的文字内容）

### 实现步骤分析

-   1）先不做任何的抽象，准备静态模板
-   2）抽象可变的部分
    -   主标题 和 副标题 是**纯文本**，可以抽象成**prop**传入
    -   主体内容是复杂的**模板**，抽象成**插槽**传入

### 纯静态结构

<pre>文件名: <code>views/Home/components/HomePanel.vue</code></pre>

```vue
<script setup>

</script>


<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
         <!-- 主标题和副标题 -->
        <h3>
          新鲜好物<small>新鲜出炉 品质靠谱</small>
        </h3>
      </div>
      <!-- 主体内容区域 -->
      <div> 主体内容 </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.home-panel {
  background-color: #fff;

  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;

    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;

      small {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
</style>
```

### 完整代码

<pre>文件名: <code>views/Home/components/HomePanel.vue</code></pre>

```vue
<script setup>
// 定义props
defineProps({
  // 主标题
  title: {
    type: String,
    default: ''
  },
  // 副标题
  subTitle: {
    type: String,
    default: ''
  }
})
</script>


<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
        <!-- 主标题和副标题 -->
        <h3>
          {{ title }}<small>{{ subTitle }}</small>
        </h3>
      </div>
      <!-- 主体内容区域 -->
      <div>
        <slot/>
      </div>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.home-panel {
  background-color: #fff;

  .head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;

    h3 {
      flex: 1;
      font-size: 32px;
      font-weight: normal;
      margin-left: 6px;
      height: 35px;
      line-height: 35px;

      small {
        font-size: 16px;
        color: #999;
        margin-left: 20px;
      }
    }
  }
}
</style>
```

## 新鲜好物实现

实现思路：

-   1）准备模板（HomePanel组件）
-   2）定制props
-   3）定制插槽内容（接口 + 渲染模板）

### 1. 准备模版

<pre>文件名: <code>views/Home/components/HomeNew.vue</code></pre>

```vue
<script setup>

</script>

<template>
  <div></div>
  <!-- 下面是插槽主体内容模版
  <ul class="goods-list">
    <li v-for="item in newList" :key="item.id">
      <RouterLink to="/">
        <img :src="item.picture" alt="" />
        <p class="name">{{ item.name }}</p>
        <p class="price">&yen;{{ item.price }}</p>
      </RouterLink>
    </li>
  </ul>
  -->
</template>

<style scoped lang='scss'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;

  li {
    width: 306px;
    height: 406px;

    background: #f0f9f4;
    transition: all .5s;

    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    img {
      width: 306px;
      height: 306px;
    }

    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .price {
      color: $priceColor;
    }
  }
}
</style>
```

### 2. 封装接口

<pre>文件名: <code>apis/home.js</code></pre>

```js
/**
 * @description: 获取新鲜好物
 */
export const findNewAPI = () => {
    return instance({
        url: '/home/new'
    })
}
```

### 3. 获取数据渲染模版 

调用接口获取数据，将数据渲染到插槽位置

完整代码如下

```vue
<template>
  <HomePanel title="新鲜好物" sub-title="新鲜出路 品质靠谱">
    <template #default>
      <ul class="goods-list">
        <li v-for="item in newList" :key="item.id">
          <RouterLink :to="`/detail/${item.id}`">
            <img :src="item.picture" alt=""/>
            <p class="name">{{ item.name }}</p>
            <p class="price">&yen;{{ item.price }}</p>
          </RouterLink>
        </li>
      </ul>
    </template>

  </HomePanel>
</template>

<script setup lang="ts">
import HomePanel from "@/views/Home/components/HomePanel.vue";
import {findNewAPI} from "@/apis/home";
import {ref, onMounted} from "vue";

const newList = ref([])

const getNewList = async () => {
  const res = await findNewAPI()
  // console.log(res.result)
  newList.value = res.result
}

onMounted(() => {
  getNewList()
})
</script>

<style scoped>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 406px;

  li {
    width: 306px;
    height: 406px;

    background: #f0f9f4;
    transition: all .5s;

    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    img {
      width: 306px;
      height: 306px;
    }

    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .price {
      color: $priceColor;
    }
  }
}
</style>
```

## 人气推荐实现

实现思路：

-   1）准备模板（HomePanel组件）
-   2）定制props
-   3）定制插槽内容（接口 + 渲染模板）

### 1. 封装接口

<pre>文件名: <code>apis/home.js</code></pre>

```js
/**
 * @description: 获取新鲜好物
 */
export const findNewAPI = () => {
    return instance({
        url: '/home/new'
    })
}
```

### 2. 获取数据渲染模版 

调用接口获取数据，将数据渲染到插槽位置

完整代码如下

<pre>文件名: <code>views/Home/components/HomeHot.vue</code></pre>

```vue
<template>
  <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
    <template #default>
      <ul class="goods-list">
        <li v-for="item in hotList" :key="item.id">
          <RouterLink :to="`/detail/${item.id}`">
            <img :src="item.picture" alt=""/>
            <p class="name">{{ item.title }}</p>
            <p class="desc">{{ item.alt }}</p>
          </RouterLink>
        </li>
      </ul>
    </template>

  </HomePanel>
</template>

<script setup lang="ts">
import HomePanel from "@/views/Home/components/HomePanel.vue";
import {findHotAPI} from "@/apis/home";
import {ref, onMounted} from "vue";

const hotList = ref([])

const getHotList = async () => {
  const res = await findHotAPI()
  console.log(res.result)
  hotList.value = res.result
}

onMounted(() => {
  getHotList()
})
</script>

<style scoped lang='scss'>
.goods-list {
  display: flex;
  justify-content: space-between;
  height: 426px;

  li {
    width: 306px;
    height: 406px;
    transition: all .5s;

    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    img {
      width: 306px;
      height: 306px;
    }

    p {
      font-size: 22px;
      padding-top: 12px;
      text-align: center;
    }

    .desc {
      color: #999;
      font-size: 18px;
    }
  }
}
</style>
```

## 懒加载指令优化

**场景：**

​	电商网站的首页通常会很长，用户不一定能访问到**页面靠下面的图片**，这类图片通过懒加载优化手段可以做到**只有进入视口区域才发送图片请求**

**指令用法：**

```html
<img v-img-lay="item.picture"/>
```

在图片img上绑定指令，该图片只有在正式进入到视口区域时才会发送图片的网络请求

**实现思路和步骤：**

![1721457458804](./assets/懒加载指令优化1.png)

vue自定义指令官网：https://cn.vuejs.org/guide/reusability/custom-directives.html#custom-directives

### 1. 封装全局指令

<pre>文件名: <code>directives/index.js</code></pre>

```js
// 定义懒加载插件
import type {App} from "vue";
import {useIntersectionObserver} from "@vueuse/core";

export const lazyPlugin = {
    install: (app: App): void => {
        // 懒加载指令逻辑
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el 指定绑定哪个元素 img
                // binding binding.value 指令等于后后面绑定的表达式的值 url
                // console.log(el, binding.value)
                const {stop} = useIntersectionObserver(
                    el,
                    ([{isIntersecting}]) => {
                        // console.log(isIntersecting)
                        if (isIntersecting) {
                            // 进入视口区域
                            el.src = binding.value
                            stop()  // 在图片第一次加载后，停止监听视口，避免内存浪费
                        }
                    },
                )
            }
        })
    }
}
```

### 2. 注册全局指令

<pre>文件名: <code>main.js</code></pre>

```js
// 引入懒加载指令插件并注册
import {lazyPlugin} from '@/directives'

app.use(lazyPlugin)
```

### 3. 按需使用

在需要使用自定义指令的地方使用即可，详情参照gti提交记录<a href="https://gitee.com/ninghongkang/vue-rabbit/commit/5f0218213adc46d49af14f7ea84317c5252a1e7e">**feat: 图片懒加载优化**</a>

## Product产品列表实现

![1721459585318](./assets/product产品列表实现.png)

### 1. 准备静态模版

<pre>文件名: <code>views/Home/components/HomeProduct.vue</code></pre>

```vue
<script setup>
import HomePanel from './HomePanel.vue'

</script>

<template>
  <div class="home-product">
    <!-- <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
      <div class="box">
        <RouterLink class="cover" to="/">
          <img :src="cate.picture" />
          <strong class="label">
            <span>{{ cate.name }}馆</span>
            <span>{{ cate.saleInfo }}</span>
          </strong>
        </RouterLink>
        <ul class="goods-list">
          <li v-for="good in cate.goods" :key="good.id">
            <RouterLink to="/" class="goods-item">
              <img :src="good.picture" alt="" />
              <p class="name ellipsis">{{ good.name }}</p>
              <p class="desc ellipsis">{{ good.desc }}</p>
              <p class="price">&yen;{{ good.price }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
    </HomePanel> -->
  </div>
</template>

<style scoped lang='scss'>
.home-product {
  background: #fff;
  margin-top: 20px;
  .sub {
    margin-bottom: 2px;

    a {
      padding: 2px 12px;
      font-size: 16px;
      border-radius: 4px;

      &:hover {
        background: $xtxColor;
        color: #fff;
      }

      &:last-child {
        margin-right: 80px;
      }
    }
  }

  .box {
    display: flex;

    .cover {
      width: 240px;
      height: 610px;
      margin-right: 10px;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      .label {
        width: 188px;
        height: 66px;
        display: flex;
        font-size: 18px;
        color: #fff;
        line-height: 66px;
        font-weight: normal;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate3d(0, -50%, 0);

        span {
          text-align: center;

          &:first-child {
            width: 76px;
            background: rgba(0, 0, 0, 0.9);
          }

          &:last-child {
            flex: 1;
            background: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }

    .goods-list {
      width: 990px;
      display: flex;
      flex-wrap: wrap;

      li {
        width: 240px;
        height: 300px;
        margin-right: 10px;
        margin-bottom: 10px;

        &:nth-last-child(-n + 4) {
          margin-bottom: 0;
        }

        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }

    .goods-item {
      display: block;
      width: 220px;
      padding: 20px 30px;
      text-align: center;
      transition: all .5s;

      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
      }

      img {
        width: 160px;
        height: 160px;
      }

      p {
        padding-top: 10px;
      }

      .name {
        font-size: 16px;
      }

      .desc {
        color: #999;
        height: 29px;
      }

      .price {
        color: $priceColor;
        font-size: 20px;
      }
    }
  }
}
</style>
```

### 2. 封装接口

<pre>文件名: <code>apis/home.js</code></pre>

```js
// 获取所有商品模块
export const getGoodsAPI = () => instance.get('/home/goods')
```

### 3. 获取并渲染数据

<pre>文件名: <code>views/Home/components/HomeProduct.vue</code></pre>

```vue
<script setup>
import HomePanel from './HomePanel.vue'
import {getGoodsAPI} from "@/apis/home";
import {onMounted, ref} from 'vue'

const goodsProduct = ref([])

const getGoods = async () => {
  const res = await getGoodsAPI()
  goodsProduct.value = res.result
  // console.log(res.result);
}

onMounted(() => {
  getGoods()
})
</script>

<template>
  <div class="home-product">
    <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
      <div class="box">
        <RouterLink class="cover" to="/">
          <img :src="cate.picture"/>
          <strong class="label">
            <span>{{ cate.name }}馆</span>
            <span>{{ cate.saleInfo }}</span>
          </strong>
        </RouterLink>
        <ul class="goods-list">
          <li v-for="good in cate.goods" :key="good.id">
            <RouterLink to="/" class="goods-item">
              <img :src="good.picture" alt=""/>
              <p class="name ellipsis">{{ good.name }}</p>
              <p class="desc ellipsis">{{ good.desc }}</p>
              <p class="price">&yen;{{ good.price }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
    </HomePanel>
  </div>
</template>
```

### 4. 图片懒加载

<pre>文件名: <code>views/Home/components/HomeProduct.vue</code></pre>

```vue
<template>
  <div class="home-product">
    <HomePanel :title="cate.name" v-for="cate in goodsProduct" :key="cate.id">
      <div class="box">
        <RouterLink class="cover" to="/">
          <!--          <img :src="cate.picture"/>-->
          <!-- 指令替换 -->
          <img v-img-lazy="cate.picture"/>
          <strong class="label">
            <span>{{ cate.name }}馆</span>
            <span>{{ cate.saleInfo }}</span>
          </strong>
        </RouterLink>
        <ul class="goods-list">
          <li v-for="good in cate.goods" :key="good.id">
            <RouterLink to="/" class="goods-item">
              <!-- 指令替换 -->
              <img v-img-lazy="good.picture" alt=""/>
              <p class="name ellipsis">{{ good.name }}</p>
              <p class="desc ellipsis">{{ good.desc }}</p>
              <p class="price">&yen;{{ good.price }}</p>
            </RouterLink>
          </li>
        </ul>
      </div>
    </HomePanel>
  </div>
</template>
```

## GoodsItem组件封装

![1721460836072](./assets/封装goodsItem组件.png)

核心思想：把要显示是数据设计为props参数，传入什么数据对象就显示什么数据

### 1. 封装组件

<pre>文件名: <code>views/Home/components/GoodsItem.vue</code></pre>

```vue
<script setup lang="ts">
import {defineProps} from 'vue'

defineProps({
  goods: {
    type: Object,
    default: () => {
    }
  }
})
</script>

<template>
  <RouterLink to="/" class="goods-item">
    <!-- 指令替换 -->
    <img v-img-lazy="goods.picture" alt=""/>
    <p class="name ellipsis">{{ goods.name }}</p>
    <p class="desc ellipsis">{{ goods.desc }}</p>
    <p class="price">&yen;{{ goods.price }}</p>
  </RouterLink>
</template>

<style scoped lang="scss">
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
  transition: all .5s;

  &:hover {
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  }

  img {
    width: 160px;
    height: 160px;
  }

  p {
    padding-top: 10px;
  }

  .name {
    font-size: 16px;
  }

  .desc {
    color: #999;
    height: 29px;
  }

  .price {
    color: $priceColor;
    font-size: 20px;
  }
}
</style>
```

### 2. 使用组件

<pre>文件名: <code>views/Home/components/HomeProduct.vue</code></pre>

```html
<ul class="goods-list">
  <li v-for="goods in cate.goods" :key="item.id">
    <GoodsItem :goods="goods" />
  </li>
</ul>
```





# 一级分类页

## 静态结构搭建和路由配置

### 1. 准备分类组件

<pre>文件名: <code>views/Category/index.vue</code></pre>

```vue
<script setup>

</script>

<template>
  <div class='top-category'>
    <h1>这是分类</h1>
  </div>
</template>
```

### 2. 配置路由

```js
routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
        {
          // '' 默认二级路由
          path: '',
          component: Home
        },
        {
          name: 'category',
          path: 'category/:id',
          component: Category
        }
      ]
    },
    {
      name: 'login',
      path: '/login',
      component: Login
    }
  ]
```

 ### 3. 配置导航区域链接 

<pre>文件名: <code>views/components/LayoutHeader.vue</code></pre>

```html
<ul class="app-header-nav">
    <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
        <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
    </li>
</ul>
```

<pre>文件名: <code>views/components/LayoutFixed.vue</code></pre>

```html
<ul class="app-header-nav">
    <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
        <RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
    </li>
</ul>
```

## 面包屑导航渲染

![1721489318877](./assets/面包屑导航.png)

**核心思路：**

-   准备组件模板
-   封装接口函数
-   调用接口获取数据（使用路由参数）
-   渲染模板

### 1. 认识组件准备模版

<pre>文件名: <code>views/Category/index.vue</code></pre>

```vue
<script setup>

</script>

<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>居家</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .sub-list {
    margin-top: 20px;
    background-color: #fff;

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;

      li {
        width: 168px;
        height: 160px;


        a {
          text-align: center;
          display: block;
          font-size: 16px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

  .bread-container {
    padding: 25px 0;
  }
}
</style>
```

### 2. 封装接口

<pre>文件名: <code>apis/category.js</code></pre>

```js
import instance from '@/utils/http'

// 获取-二级分类列表
export const findTopCategoryAPI = (id) => {
    return instance({
        url: '/category',
        params: {
            id
        }
    })
}
```

### 3. 渲染面包屑导航

<pre>文件名: <code>views/Category/index.vue</code></pre>

```vue
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {findTopCategoryAPI} from "@/apis/category";
import {useRoute} from "vue-router";

const categoryData = ref({})
// 用于获取路由参数
const route = useRoute()

const getCategory = async () => {
  // 如何在setup中获取路由参数 useRoute() -> route 等价于this.$route
  const res = await findTopCategoryAPI(route.params.id)
  // console.log(res.result)
  categoryData.value = res.result
}

onMounted(() => {
  getCategory()
})

</script>

<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>
</template>


<style scoped lang="scss">
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .sub-list {
    margin-top: 20px;
    background-color: #fff;

    ul {
      display: flex;
      padding: 0 32px;
      flex-wrap: wrap;

      li {
        width: 168px;
        height: 160px;


        a {
          text-align: center;
          display: block;
          font-size: 16px;

          img {
            width: 100px;
            height: 100px;
          }

          p {
            line-height: 40px;
          }

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .ref-goods {
    background-color: #fff;
    margin-top: 20px;
    position: relative;

    .head {
      .xtx-more {
        position: absolute;
        top: 20px;
        right: 20px;
      }

      .tag {
        text-align: center;
        color: #999;
        font-size: 20px;
        position: relative;
        top: -20px;
      }
    }

    .body {
      display: flex;
      justify-content: space-around;
      padding: 0 40px 30px;
    }
  }

  .bread-container {
    padding: 25px 0;
  }
}
</style>
```

## 分类Banner渲染

分类轮播图Banner的实现：分类轮播图和首页轮播图的区别只有一个，**接口参数不同**，其余逻辑完全一致

![1721490937081](./assets/分类轮播图.png)

**核心思路：**

-   改造前面写过的接口（适配参数）
-   迁移首页轮播图实现

### 1. 适配接口

<pre>文件名: <code>apis/home.js</code></pre>

```js
/**
 * @description: 获取banner图
 */
export function getBannerAPI(params = {}) {
    // 1为首页，2为分类商品页 默认是1
    const {distributionSite = '1'} = params
    return instance({
        url: 'home/banner',
        params: {
            distributionSite
        }
    })
}
```

### 2. 迁移首页Banner逻辑

<pre>文件名: <code>views/Category/components/CategoryBanner.vue</code></pre>

```vue
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {getBannerAPI} from "@/apis/home";

const bannerList = ref([])
// 获取轮播图
const getBanner = async () => {
  const res = await getBannerAPI({
        distributionSite: '2'
      }
  )
  // console.log(res)
  bannerList.value = res.result
}
onMounted(() => {
  getBanner()
})
</script>

<template>
  <!-- 轮播图 -->
  <div class="home-banner">
    <el-carousel height="500px">
      <!-- 有几张图片，就会有几个item-->
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img
            :src="item.imgUrl"
            alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style scoped lang="scss">
.home-banner {
  width: 1240px;
  height: 500px;
  margin: 0 auto;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>
```

### 3.渲染分类轮播图

<pre>文件名: <code>views/Category/index.vue</code></pre>

```vue
<template>
  <div class="top-category">
    <div class="container m-top-20">
      <!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 轮播图 -->
      <CategoryBanner/>
    </div>
  </div>
</template>
```

## 导航激活设置分类列表渲染

### 导航激活状态设置

当我们选择某个分类时，它就会高亮显示，如下：

![1721492344348](./assets/激活状态显示.png)

**实现思路：**

​	RouterLink组件默认支持激活样式显示的类名，只需要给**active-class属性设置对应的类名**即可

<pre>文件名: <code>views/layout/LayoutHeader.vue</code></pre>

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

<pre>文件名: <code>views/layout/LayoutFixed.vue</code></pre>

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

### 分类数据模版

**核心思路：**

​	分类的数据一级在面包屑实现的时候获取到了，只需要通过v-for遍历出来即可

<pre>文件名: <code>views/Category/index.vue</code></pre>

```vue
<div class="sub-list">
  <h3>全部分类</h3>
  <ul>
    <li v-for="i in categoryData.children" :key="i.id">
      <RouterLink to="/">
        <img :src="i.picture" />
        <p>{{ i.name }}</p>
      </RouterLink>
    </li>
  </ul>
</div>
<div class="ref-goods" v-for="item in categoryData.children" :key="item.id">
  <div class="head">
    <h3>- {{ item.name }}-</h3>
  </div>
  <div class="body">
    <GoodsItem v-for="good in item.goods" :goods="good" :key="good.id" />
  </div>
</div>
```

## 路由缓存问题解决

![1721493608245](./assets/路由缓存问题.png)

**缓存问题：**

​	当路由path一样，参数不同的时候会选择直接复用路由对应的组件

**解决思路：**

-   1、让组件实例不复用，强制销毁（vue3叫卸载）重建
-   2、监听路由变化，变化之后执行数据更新操作

**解决方案：**

-    给 routerv-view 添加key属性，破坏缓存

-   使用 onBeforeRouteUpdate钩子函数，做精确更新

![1721494006647](./assets/路由缓存问题2.png)

![1721494088689](./assets/路由缓存问题3.png)

## 基于业务逻辑的函数拆分 Hook

**基本思想：**

​	把组件内独立的业务逻辑通过 `useXXX` 函数做封装处理，在组件中做组合使用

![](./assets/基于业务逻辑的函数拆分.png)

实现步骤：

-   1、按照业务声明以`use`打头的逻辑函数
-   2、把**独立的业务逻辑**封装到各个函数内部
-   3、函数内部把组件中需要用到的数据或者方法**return出去**

-   4、在**组件中调用函数**把数据或者方法组合回来使用



![1721495472734](./assets/基于业务逻辑的函数拆分2.png)





# 二级分类页

## 整体业务认识和路由配置

### 整体业务认识

![1721536249468](./assets/二级分类页整体业务认识.png)

### 路由配置

![1721536325587](./assets/二级分类页路由配置.png)

**核心思路：**

-   创建路由组件
-   配置路由关系
-   修改模板实现路由跳转

#### 1. 准备组件模版

<pre>文件名: <code>views/subCategory/index.vue</code></pre>

```vue
<script setup lang="ts">

</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: '/'}">居家</el-breadcrumb-item>
        <el-breadcrumb-item>居家生活用品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="sub-container">
      <!-- 标签页 -->
      <el-tabs>
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
      </el-tabs>
      <div class="body">
        <!-- 商品列表-->
        
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bread-container {
  padding: 25px 0;
  color: #666;
}

.sub-container {
  padding: 20px 10px;
  background-color: #fff;

  .body {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
  }

  .goods-item {
    display: block;
    width: 220px;
    margin-right: 20px;
    padding: 20px 30px;
    text-align: center;

    img {
      width: 160px;
      height: 160px;
    }

    p {
      padding-top: 10px;
    }

    .name {
      font-size: 16px;
    }

    .desc {
      color: #999;
      height: 29px;
    }

    .price {
      color: $priceColor;
      font-size: 20px;
    }
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
```

#### 2. 配置路由关系

<pre>文件名: <code>router/index.vue</code></pre>

```js
import { createRouter, createWebHistory } from 'vue-router'
import Login from '@/views/Login/index.vue'
import Layout from '@/views/Layout/index.vue'
import Home from '@/views/Home/index.vue'
import Category from '@/views/Category/index.vue'
import SubCategory from '@/views/SubCategory/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
        {
          // '' 默认二级路由
          path: '',
          component: Home
        },
        {
          name: 'category',
          path: 'category/:id',
          component: Category
        },
        {
          name:'subCategory',
          path: '/category/sub/:id',
          component: SubCategory
        },
      ]
    },
    {
      name: 'login',
      path: '/login',
      component: Login
    }
  ]
})

export default router
```

#### 3. 路由跳转配置

<pre>文件名: <code>views/Category/index.vue</code></pre>

```vue
<!-- 全部分类，点击可路由到二级分类 -->
<div class="sub-list">
  <h3>全部分类</h3>
  <ul>
    <li v-for="i in categoryData.children" :key="i.id">
      <RouterLink :to="{name: 'subCategory', params: {id: i.id}}">
        <img :src="i.picture"/>
        <p>{{ i.name }}</p>
      </RouterLink>
    </li>
  </ul>
</div>
```

## 面包屑导航实现

![1721538358460](./assets/二级分类页-面包屑导航.png)

**核心思路：**

-   封装接口
-   调用接口渲染模板

### 1. 封装接口 

<pre>文件名: <code>apis/category.js</code></pre>

```js
// 获取二级分类列表数据
export const getCategoryFilterAPI = (id) => {
    return instance({
        url: '/category/sub/filter',
        params: {
            id
        }
    })
}
```

### 2. 获取数据渲染模版

<pre>文件名: <code>views/subCategory/index.vue</code></pre>

```vue
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getCategoryFilterAPI} from '@/apis/category'
import {useRoute} from "vue-router";

const route = useRoute();
// 接收路由参数 id
const {id} = route.params;

const categoryData = ref({})

const getCategoryFilter = async (id) => {
  const res = await getCategoryFilterAPI(id)
  // console.log(res.result)
  categoryData.value = res.result
}

onMounted(() => getCategoryFilter(id))
</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: `/category/${categoryData.parentId}`}">{{
            categoryData.parentName
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="sub-container">
      <!-- 标签页 -->
      <el-tabs>
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
      </el-tabs>
      <div class="body">
        <!-- 商品列表-->

      </div>
    </div>
  </div>
</template>
```

## 分类列表实现

![1721539962118](./assets/二级分类页-分类基础列表.png)

上述图片中需要实现如下功能：

-   实现基础列表渲染

-   添加筛选功能

-   无限加载功能

### 分类基础列表实现

**核心思路：**

-   封装接口
-   获取数据渲染模板

#### 1. 封装接口

<pre>文件名: <code>apis/category.js</code></pre>

```js
/**
 * @description: 获取导航数据
 * @data {
 *  categoryId: 1005000 ,
 *  page: 1,
 *  pageSize: 20,
 *  sortField: 'publishTime' | 'orderNum' | 'evaluateNum'
 }
 * @return {*}
 */
export const getSubCategoryAPI = (data) => {
    return instance({
        url: '/category/goods/temporary',
        method: 'POST',
        data
    })
}
```

#### 2. 获取数据列表并渲染

<pre>文件名: <code>views/subCategory/index.vue</code></pre>

```vue
<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getCategoryFilterAPI, getSubCategoryAPI} from '@/apis/category'
import {useRoute} from "vue-router";
import GoodsItem from "@/views/Home/components/GoodsItem.vue";

const route = useRoute();
// 接收路由参数 id
const {id} = route.params;

const categoryData = ref({})

const getCategoryFilter = async (id) => {
  const res = await getCategoryFilterAPI(id)
  // console.log(res.result)
  categoryData.value = res.result
}

onMounted(() => getCategoryFilter(id))

const reqData = ref({
  categoryId: id,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime'
})
const goodList = ref([])

const getGoodList = async () => {
  const res = await getSubCategoryAPI(reqData.value)
  // console.log(res.result)
  goodList.value = res.result.items
}
onMounted(() => getGoodList())

</script>

<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path: `/category/${categoryData.parentId}`}">{{
            categoryData.parentName
          }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="sub-container">
      <!-- 标签页 -->
      <el-tabs>
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
      </el-tabs>
      <div class="body">
        <!-- 商品列表-->
        <GoodsItem v-for="good in goodList" :goods="good" :key="good.id"/>
      </div>
    </div>
  </div>
</template>
```

### 列表筛选实现

![1721543178322](assets/二级分类页-分类列表筛选.png)

**核心逻辑：**

-   点击tab，**切换筛选条件参数sortFiled**，重新发送列表请求

**核心思路：**

-   获取激活项数据
-   使用新参数发送请求重新渲染列表数据

<pre>文件名: <code>views/subCategory/index.vue</code></pre>

tab组件切换时修改reqData中的sortField字段，重新拉取接口列表

```vue
<script setup lang="ts">
// 标签页tab切换回调
const tabChange = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
  // console.log('tab切换了', reqData.value.sortField)
  reqData.value.page = 1  // 重置页数
  getGoodList()
}
</script>

<template>
  <!-- 标签页 -->
  <el-tabs v-model="reqData.sortField" @tab-change="tabChange">
    <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
    <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
    <el-tab-pane label="评论最多" name="evaluateNum"></el-tab-pane>
  </el-tabs>
</template>
```

### 列表无限加载实现

![1721544371759](assets/二级分类页-分类列表无限加载.png)

**核心逻辑：**

​	使用elementPlus提供的 `v-infinite-scroll`指令**监听是否满足触底条件**，满足加载条件时让**页数参数加一获取下一页数据，做新老数据拼接渲染**

核心思路：

-   配置 `v-infinite-scroll`指令
-   触底条件满足之后**page++**获取下一页数据
-   老数据和新数据做拼接
-   判断是否已经全部加载完毕，加载完毕结束监听

elementPlus官网无线滚动用法：https://element-plus.org/zh-CN/component/infinite-scroll.html#infinite-scroll-%E6%97%A0%E9%99%90%E6%BB%9A%E5%8A%A8

<pre>文件名: <code>views/subCategory/index.vue</code></pre>

```vue
<script setup lang="ts">

const disabled = ref(false)
// 加载更多
const load = async () => {
  console.log('到达底部，加载更多')
  // 获取下一页的数据
  reqData.value.page++
  const res = await getSubCategoryAPI(reqData.value)
  // 新老数据拼接
  goodList.value = [...goodList.value, ...res.result.items]

  // 加载完毕 停止监听
  if (res.result.items.length === 0) {
    console.log('没有更多数据了')
    disabled.value = true
  }
}
</script>

<template>
 
      <div class="body" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <!-- 商品列表-->
        <GoodsItem v-for="good in goodList" :goods="good" :key="good.id"/>
      </div>
 
</template>
```



### 定制路由滚动行为（优化路由）

**定制路由行为解决什么问题？**

-   在不同路由切换的时候，可以**自动滚动到页面的顶部**，而不是停留在原先的位置

如何配置优化呢？

-   vue-router 支持 `scrollBehavior`配置项，可以指定路由切换时的滚动位置

```js
scrollBehavior (){
    return {
        top: 0
    }
}
```



# 商品详情

## 整体认识和路由配置

### 整体认识

![1721551539095](assets/商品详情-整体认识.png)

![1721552242573](assets/商品详情-整体认识2.png)

### 路由配置

**核心思路：**

-   创建详情组件
-   绑定路由关系
-   绑定模板测试跳转

#### 1. 准备组件模版

<pre>文件名: <code>views/Detail/index.vue</code></pre>

```vue
<script setup lang="ts">

</script>

<template>
  <div class="xtx-goods-page">
    <div class="container">
      <div class="bread-container">
        <!-- 面包屑 -->
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">母婴</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">跑步鞋</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">抓绒保暖，毛毛虫子儿童运动鞋</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 商品信息 -->
      <div class="info-container">
        <div>
          <div class="goods-info">
            <div class="media">
              <!-- 图片预览区 -->

              <!-- 统计数量 -->
              <ul class="goods-sales">
                <li>
                  <p>销量人气</p>
                  <p> 100+ </p>
                  <p><i class="iconfont icon-task-filling"></i>销量人气</p>
                </li>
                <li>
                  <p>商品评价</p>
                  <p>200+</p>
                  <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
                </li>
                <li>
                  <p>收藏人气</p>
                  <p>300+</p>
                  <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
                </li>
                <li>
                  <p>品牌信息</p>
                  <p>400+</p>
                  <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
                </li>
              </ul>
            </div>
            <div class="spec">
              <!-- 商品信息区 -->
              <p class="g-name"> 抓绒保暖，毛毛虫儿童鞋 </p>
              <p class="g-desc">好穿 </p>
              <p class="g-price">
                <span>200</span>
                <span> 100</span>
              </p>
              <div class="g-service">
                <dl>
                  <dt>促销</dt>
                  <dd>12月好物放送，App领券购买直降120元</dd>
                </dl>
                <dl>
                  <dt>服务</dt>
                  <dd>
                    <span>无忧退货</span>
                    <span>快速退款</span>
                    <span>免费包邮</span>
                    <a href="javascript:;">了解详情</a>
                  </dd>
                </dl>
              </div>
              <!-- sku组件 -->

              <!-- 数据组件 -->

              <!-- 按钮组件 -->
              <div>
                <el-button size="large" class="btn">
                  加入购物车
                </el-button>
              </div>

            </div>
          </div>
          <div class="goods-footer">
            <div class="goods-article">
              <!-- 商品详情 -->
              <div class="goods-tabs">
                <nav>
                  <a>商品详情</a>
                </nav>
                <div class="goods-detail">
                  <!-- 属性 -->
                  <ul class="attrs">
                    <li v-for="item in 3" :key="item.value">
                      <span class="dt">白色</span>
                      <span class="dd">纯棉</span>
                    </li>
                  </ul>
                  <!-- 图片 -->

                </div>
              </div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.xtx-goods-page {
  .goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 600px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;
    }
  }

  .goods-footer {
    display: flex;
    margin-top: 20px;

    .goods-article {
      width: 940px;
      margin-right: 20px;
    }

    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }
  }

  .goods-tabs {
    min-height: 600px;
    background: #fff;
  }

  .goods-warn {
    min-height: 600px;
    background: #fff;
    margin-top: 20px;
  }

  .number-box {
    display: flex;
    align-items: center;

    .label {
      width: 60px;
      color: #999;
      padding-left: 10px;
    }
  }

  .g-name {
    font-size: 22px;
  }

  .g-desc {
    color: #999;
    margin-top: 10px;
  }

  .g-price {
    margin-top: 10px;

    span {
      &::before {
        content: "¥";
        font-size: 14px;
      }

      &:first-child {
        color: $priceColor;
        margin-right: 10px;
        font-size: 22px;
      }

      &:last-child {
        color: #999;
        text-decoration: line-through;
        font-size: 16px;
      }
    }
  }

  .g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;

    dl {
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      dt {
        width: 50px;
        color: #999;
      }

      dd {
        color: #666;

        &:last-child {
          span {
            margin-right: 10px;

            &::before {
              content: "•";
              color: $xtxColor;
              margin-right: 2px;
            }
          }

          a {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;

    li {
      flex: 1;
      position: relative;

      ~ li::after {
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: "";
      }

      p {
        &:first-child {
          color: #999;
        }

        &:nth-child(2) {
          color: $priceColor;
          margin-top: 10px;
        }

        &:last-child {
          color: #666;
          margin-top: 10px;

          i {
            color: $xtxColor;
            font-size: 14px;
            margin-right: 2px;
          }

          &:hover {
            color: $xtxColor;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.goods-tabs {
  min-height: 600px;
  background: #fff;

  nav {
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    a {
      padding: 0 40px;
      font-size: 18px;
      position: relative;

      > span {
        color: $priceColor;
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
}

.goods-detail {
  padding: 40px;

  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;

      .dt {
        width: 100px;
        color: #999;
      }

      .dd {
        flex: 1;
        color: #666;
      }
    }
  }

  > img {
    width: 100%;
  }
}

.btn {
  margin-top: 20px;

}

.bread-container {
  padding: 25px 0;
}
</style>
```

#### 2. 配置路由规则

<pre>文件名: <code>router/index.vue</code></pre>

```js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
        {
          // '' 默认二级路由
          path: '',
          component: Home
        },
        {
          name: 'category',
          path: 'category/:id',
          component: Category
        },
        {
          name:'subCategory',
          path: '/category/sub/:id',
          component: SubCategory
        },
        {
          name:'detail',
          path: '/detail/:id',
          component: ProductDetail
        }
      ]
    },
    {
      name: 'login',
      path: '/login',
      component: Login
    }
  ],
  scrollBehavior (){
    return {
      top: 0
    }
  }
})

export default router
```

#### 3. 绑定模版测试跳转

<pre>文件名: <code>views/home/components/HomeNew.vue</code></pre>

```vue
<RouterLink :to="`/detail/${item.id}`">
  <img :src="item.picture" alt="" />
  <p class="name">{{ item.name }}</p>
  <p class="price">&yen;{{ item.price }}</p>
</RouterLink>
```

## 渲染基础数据

![1721560312265](assets/商品详情-基础数据渲染.png)

**核心思路：**

-   封装接口
-   调用接口获取数据
-   渲染模板

### 1. 封装接口

<pre>文件名: <code>apis/detail.js</code></pre>

```js
import request from '@/utils/http'

// 获取商品详情
export const getDetailAPI = (id: number) => {
    return request({
        url: '/goods',
        params: {
            id
        }
    })
}
```

### 2. 获取数据渲染模版

<pre>文件名: <code>views/Detail/index.vue</code></pre>

```vue
<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {useRoute} from "vue-router";
import {getDetailAPI} from "@/apis/detail";

const good = ref({})
const route = useRoute()

// 获取商品详情
const getGoods = async () => {
  const res = await getDetailAPI(route.params.id)
  // console.log(res.result)
  good.value = res.result
}

onMounted(() => getGoods())
</script>

<template>
  <div class="xtx-goods-page">
    <div class="container">
      <!--    <div class="container" v-if="good.details">-->
      <div class="bread-container">
        <!-- 面包屑 -->
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <!--
            错误原因：good一开始{}，尝试访问 {}.categories -> undefined -> undefined[1]
            解决方案：
              1、可选链语法 ?.
              2、v-if手动控制渲染时机，保证有数据才渲染
          -->
          <el-breadcrumb-item :to="{ path: `/category/${good.categories?.[1].id}` }">
            {{ good.categories?.[1].name }}
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: `/category/sub/${good.categories?.[0].id}` }">
            {{ good.categories?.[0].name }}
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }">{{ good.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 商品信息 -->
      <div class="info-container">
        <div>
          <div class="goods-info">
            <div class="media">
              <!-- 图片预览区 -->

              <!-- 统计数量 -->
              <ul class="goods-sales">
                <li>
                  <p>销量人气</p>
                  <p> {{ good.salesCount }}+ </p>
                  <p><i class="iconfont icon-task-filling"></i>销量人气</p>
                </li>
                <li>
                  <p>商品评价</p>
                  <p>{{ good.commentCount }}+</p>
                  <p><i class="iconfont icon-comment-filling"></i>查看评价</p>
                </li>
                <li>
                  <p>收藏人气</p>
                  <p>{{ good.collectCount }}+</p>
                  <p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
                </li>
                <li>
                  <p>品牌信息</p>
                  <p>{{ good.brand?.name }}</p>
                  <p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
                </li>
              </ul>
            </div>
            <div class="spec">
              <!-- 商品信息区 -->
              <p class="g-name">{{ good.name }}</p>
              <p class="g-desc">{{ good.desc }}</p>
              <p class="g-price">
                <span>{{ good.oldPrice }}</span>
                <span>{{ good.price }}</span>
              </p>
              <div class="g-service">
                <dl>
                  <dt>促销</dt>
                  <dd>12月好物放送，App领券购买直降120元</dd>
                </dl>
                <dl>
                  <dt>服务</dt>
                  <dd>
                    <span>无忧退货</span>
                    <span>快速退款</span>
                    <span>免费包邮</span>
                    <a href="javascript:;">了解详情</a>
                  </dd>
                </dl>
              </div>
              <!-- sku组件 -->

              <!-- 数据组件 -->

              <!-- 按钮组件 -->
              <div>
                <el-button size="large" class="btn">
                  加入购物车
                </el-button>
              </div>

            </div>
          </div>
          <div class="goods-footer">
            <div class="goods-article">
              <!-- 商品详情 -->
              <div class="goods-tabs">
                <nav>
                  <a>商品详情</a>
                </nav>
                <div class="goods-detail">
                  <!-- 属性 -->
                  <ul class="attrs">
                    <li v-for="prop in good.details?.properties" :key="prop.value">
                      <span class="dt">{{ prop.name }}</span>
                      <span class="dd">{{ prop.value }}</span>
                    </li>
                  </ul>
                  <!-- 图片 -->
                  <img v-for="img in good.details?.pictures" :src="img" :key="img" alt="">/>
                </div>
              </div>
            </div>
            <!-- 24热榜+专题推荐 -->
            <div class="goods-aside">

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.xtx-goods-page {
  .goods-info {
    min-height: 600px;
    background: #fff;
    display: flex;

    .media {
      width: 580px;
      height: 600px;
      padding: 30px 50px;
    }

    .spec {
      flex: 1;
      padding: 30px 30px 30px 0;
    }
  }

  .goods-footer {
    display: flex;
    margin-top: 20px;

    .goods-article {
      width: 940px;
      margin-right: 20px;
    }

    .goods-aside {
      width: 280px;
      min-height: 1000px;
    }
  }

  .goods-tabs {
    min-height: 600px;
    background: #fff;
  }

  .goods-warn {
    min-height: 600px;
    background: #fff;
    margin-top: 20px;
  }

  .number-box {
    display: flex;
    align-items: center;

    .label {
      width: 60px;
      color: #999;
      padding-left: 10px;
    }
  }

  .g-name {
    font-size: 22px;
  }

  .g-desc {
    color: #999;
    margin-top: 10px;
  }

  .g-price {
    margin-top: 10px;

    span {
      &::before {
        content: "¥";
        font-size: 14px;
      }

      &:first-child {
        color: $priceColor;
        margin-right: 10px;
        font-size: 22px;
      }

      &:last-child {
        color: #999;
        text-decoration: line-through;
        font-size: 16px;
      }
    }
  }

  .g-service {
    background: #f5f5f5;
    width: 500px;
    padding: 20px 10px 0 10px;
    margin-top: 10px;

    dl {
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      dt {
        width: 50px;
        color: #999;
      }

      dd {
        color: #666;

        &:last-child {
          span {
            margin-right: 10px;

            &::before {
              content: "•";
              color: $xtxColor;
              margin-right: 2px;
            }
          }

          a {
            color: $xtxColor;
          }
        }
      }
    }
  }

  .goods-sales {
    display: flex;
    width: 400px;
    align-items: center;
    text-align: center;
    height: 140px;

    li {
      flex: 1;
      position: relative;

      ~ li::after {
        position: absolute;
        top: 10px;
        left: 0;
        height: 60px;
        border-left: 1px solid #e4e4e4;
        content: "";
      }

      p {
        &:first-child {
          color: #999;
        }

        &:nth-child(2) {
          color: $priceColor;
          margin-top: 10px;
        }

        &:last-child {
          color: #666;
          margin-top: 10px;

          i {
            color: $xtxColor;
            font-size: 14px;
            margin-right: 2px;
          }

          &:hover {
            color: $xtxColor;
            cursor: pointer;
          }
        }
      }
    }
  }
}

.goods-tabs {
  min-height: 600px;
  background: #fff;

  nav {
    height: 70px;
    line-height: 70px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;

    a {
      padding: 0 40px;
      font-size: 18px;
      position: relative;

      > span {
        color: $priceColor;
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }
}

.goods-detail {
  padding: 40px;

  .attrs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;

    li {
      display: flex;
      margin-bottom: 10px;
      width: 50%;

      .dt {
        width: 100px;
        color: #999;
      }

      .dd {
        flex: 1;
        color: #666;
      }
    }
  }

  > img {
    width: 100%;
  }
}

.btn {
  margin-top: 20px;

}

.bread-container {
  padding: 25px 0;
}
</style>
```

### 3.小结

![1721562221831](assets/商品详情-基础数据渲染小结.png)

## 热榜区域

![1721564109107](assets/商品详情-热榜区域.png)

**核心思路：**

-   24小时热榜 与 周热榜 大体结构一致，可以先封装一个 Hot热榜组件
-   获取数据渲染模板（下面以24小时热榜为例）
-   适配不同的标题title
-   适配不同的列表内容

### 渲染基础热榜数据（24小时热榜为例）

#### 1 准备模版

<pre>文件名: <code>view/Detail/components/DetailHot.vue</code></pre>

```vue
<script setup lang="ts">

</script>

<template>
  <div class="goods-hot">
    <h3>周日榜单</h3>
    <!-- 商品区块 -->
    <RouterLink to="/" class="goods-item" v-for="item in 3" :key="item.id">
      <img :srd="item.picture" alt="" />
      <p class="name ellipsis">一双男鞋</p>
      <p class="desc ellipsis">一双好穿的男鞋</p>
      <p class="price">&yen;200.00</p>
    </RouterLink>
  </div>
</template>


<style scoped lang="scss">
.goods-hot {
  h3 {
    height: 70px;
    background: $helpColor;
    color: #fff;
    font-size: 18px;
    line-height: 70px;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: normal;
  }

  .goods-item {
    display: block;
    padding: 20px 30px;
    text-align: center;
    background: #fff;

    img {
      width: 160px;
      height: 160px;
    }

    p {
      padding-top: 10px;
    }

    .name {
      font-size: 16px;
    }

    .desc {
      color: #999;
      height: 29px;
    }

    .price {
      color: $priceColor;
      font-size: 20px;
    }
  }
}
</style>
```

#### 2 封装接口

<pre>文件名: <code>apis/detail.js</code></pre>

```js
/**
 * 获取热榜商品
 * @param {Number} id - 商品id
 * @param {Number} type - 1代表24小时热销榜 2代表周热销榜
 * @param {Number} limit - 获取个数
 */
export const getHotGoodsAPI = ({ id, type, limit = 3 }) => {
    return request({
        url: '/goods/hot',
        params: {
            id,
            type,
            limit
        }
    })
}
```

#### 3 获取基础数据渲染模版

<pre>文件名: <code>view/Detail/components/DetailHot.vue</code></pre>

```vue
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getHotGoodsAPI } from "@/apis/detail";
import { useRoute } from "vue-router";

const route = useRoute();

const hotList = ref([]);

const getHotGoods = async () => {
  const res = await getHotGoodsAPI({
    id: route.params.id,
    type: 1,
  });
  //   console.log(res.result);
  hotList.value = res.result
};

onMounted(() => getHotGoods());
</script>

<template>
  <div class="goods-hot">
    <h3>周日榜单</h3>
    <!-- 商品区块 -->
    <RouterLink to="/" class="goods-item" v-for="item in hotList" :key="item.id">
      <img :src="item.picture" alt="" />
      <p class="name ellipsis">{{item.name }}</p>
      <p class="desc ellipsis">{{ item.desc }}</p>
      <p class="price">&yen;{{ item.price }}</p>
    </RouterLink>
  </div>
</template>


<style scoped lang="scss">
.goods-hot {
  h3 {
    height: 70px;
    background: $helpColor;
    color: #fff;
    font-size: 18px;
    line-height: 70px;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: normal;
  }

  .goods-item {
    display: block;
    padding: 20px 30px;
    text-align: center;
    background: #fff;

    img {
      width: 160px;
      height: 160px;
    }

    p {
      padding-top: 10px;
    }

    .name {
      font-size: 16px;
    }

    .desc {
      color: #999;
      height: 29px;
    }

    .price {
      color: $priceColor;
      font-size: 20px;
    }
  }
}
</style>
```



### 适配热榜title

#### 设计props参数type

<pre>文件名: <code>view/Detail/components/DetailHot.vue</code></pre>

```js
// 设计props参数，适配不同的title和数据
const props = defineProps({
  hotType: {
    type: Number, // 1代表24小时热销榜 2代表周热销榜
  },
});

// 适配title // 1代表24小时热销榜 2代表周热销榜
const TYPEMAP = {
  1: "24小时热榜",
  2: "周热榜",
};

const title = computed(() => TYPEMAP[props.hotType]);

<template>
  <div class="goods-hot">
    <h3>{{ title }}</h3>
    <!-- 商品区块 -->
    <RouterLink
      to="/"
      class="goods-item"
      v-for="item in hotList"
      :key="item.id"
    >
      <img :src="item.picture" alt="" />
      <p class="name ellipsis">{{ item.name }}</p>
      <p class="desc ellipsis">{{ item.desc }}</p>
      <p class="price">&yen;{{ item.price }}</p>
    </RouterLink>
  </div>
</template>
```



### 适配热榜类型

#### 使用组件传入不同的type

<pre>文件名: <code>views/Detail/index.vue</code></pre>

```vue
<!-- 24小时热榜 -->
<DetailHot :hot-type="1" />
<!-- 周热榜 -->
<DetailHot :hot-type="2" />
```

<pre>文件名: <code>view/Detail/components/DetailHot.vue</code></pre>

```js
const getHotGoods = async () => {
  const res = await getHotGoodsAPI({
    id: route.params.id,
    type: props.hotType,
  });
  //   console.log(res.result);
  hotList.value = res.result;
};
```

## 图片预览组件封装

![1721571374884](assets/商品详情-图片预览.png)

### 1. 小图切换大图显示

![1721571527801](assets/商品详情-图片预览2.png)

**核心思路：**

-   准备组件静态模板
-   为小图榜单事件，记录当前激活的下标值
-   通过下标切换大图显示
-   通过下表实现激活状态显示

#### 1）准备模版

<pre>文件名：<code>components/ImageView/index.vue</code></pre>

```vue
<script setup>
// 图片列表
const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
]
</script>


<template>
  <div class="goods-image">
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[0]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left: `0px`, top: `0px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li v-for="(img, i) in imageList" :key="i">
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div class="large" :style="[
      {
        backgroundImage: `url(${imageList[0]})`,
        backgroundPositionX: `0px`,
        backgroundPositionY: `0px`,
      },
    ]" v-show="false"></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>
```

#### 2）实现逻辑

**实现：**

-   为小图榜单事件，记录当前激活的下标值
-   通过下标切换大图显示
-   通过下表实现激活状态显示

<pre>文件名：<code>components/ImageView/index.vue</code></pre>

```vue
<script setup>
import { ref } from "vue";

// 小图切换大图显示 实现鼠标移入交互
const activeIndex = ref(0);
const enterhandler = (i) => {
  activeIndex.value = i;
};
</script> 

<template>

  <div class="goods-image">
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left: `0px`, top: `0px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li
        v-for="(img, i) in imageList"
        :key="i"
        @mouseenter="enterhandler(i)"
        :class="{ active: i === activeIndex }"
      >
        <img :src="img" alt="" />
      </li>
    </ul>
  </div>
</template>
```

### 2. 放大镜效果实现

![](assets/商品详情-图片预览3.png)

**核心思路：**

-   左侧滑块跟随鼠标移动
-   右侧大图放大效果实现
-   鼠标移入滑块和大图显示隐藏

#### 1）左侧滑块跟随鼠标移动

![1721635540263](assets/商品详情-图片预览4.png)

![1721637110078](assets/商品详情-图片预览5.png)

参考vueuse官网usemouseinelement用法：https://vueuse.org/core/useMouseInElement/#usemouseinelement

<pre>文件名：<code>components/ImageView/index.vue</code></pre>

```vue
<script setup>
import { ref, watch } from "vue";
import { useMouseInElement } from "@vueuse/core";

// 图片列表
const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg",
];

// 1.小图切换大图显示 实现鼠标移入交互
const activeIndex = ref(0);
const enterhandler = (i) => {
  activeIndex.value = i;
};

// 2.获取鼠标相对位置
const target = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(target);

// 3.控制滑块跟随鼠标移动（监听elementX、elementY变化，一旦变化重新设置left、top）
const left = ref(0);
const top = ref(0);
watch([elementX, elementY], () => {
  console.log("xy变化了");
  // 在有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX - 100;
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementX - 100;
  }
  // 边界距离控制
  if (elementX.value > 300) {
    left.value = 200;
  }
  if (elementX.value < 100) {
    left.value = 0;
  }

  if (elementY.value > 300) {
    top.value = 200;
  }
  if (elementY.value < 100) {
    top.value = 0;
  }
});
</script> 


<template>
  <div class="goods-image">
    {{ elementX }} {{ elementY }} {{ isOutside }}
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left: `${left}px`, top: `${top}px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li
        v-for="(img, i) in imageList"
        :key="i"
        @mouseenter="enterhandler(i)"
        :class="{ active: i === activeIndex }"
      >
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div
      class="large"
      :style="[
        {
          backgroundImage: `url(${imageList[0]})`,
          backgroundPositionX: `0px`,
          backgroundPositionY: `0px`,
        },
      ]"
      v-show="false"
    ></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>
```

#### 2）右侧大图放大效果实现

![1721637364012](assets/商品详情-图片预览6.png)

<pre>文件名：<code>components/ImageView/index.vue</code></pre>

```vue
<script setup>
import { ref, watch } from "vue";
import { useMouseInElement } from "@vueuse/core";

// 图片列表
const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg",
];

// 1.小图切换大图显示 实现鼠标移入交互
const activeIndex = ref(0);
const enterhandler = (i) => {
  activeIndex.value = i;
};

// 2.获取鼠标相对位置
const target = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(target);

// 3.控制滑块跟随鼠标移动（监听elementX、elementY变化，一旦变化重新设置left、top）
const left = ref(0);
const top = ref(0);

const positionX = ref(0);
const positionY = ref(0);

watch([elementX, elementY], () => {
  console.log("xy变化了");
  // 在有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX - 100;
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementX - 100;
  }
  // 边界距离控制
  if (elementX.value > 300) {
    left.value = 200;
  }
  if (elementX.value < 100) {
    left.value = 0;
  }

  if (elementY.value > 300) {
    top.value = 200;
  }
  if (elementY.value < 100) {
    top.value = 0;
  }
  // 控制大图的显示
  positionX.value = -left.value * 2;
  positionY.value = -top.value * 2;
});
</script> 


<template>
  <div class="goods-image">
    {{ elementX }} {{ elementY }} {{ isOutside }}
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left: `${left}px`, top: `${top}px` }"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li
        v-for="(img, i) in imageList"
        :key="i"
        @mouseenter="enterhandler(i)"
        :class="{ active: i === activeIndex }"
      >
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div
      class="large"
      :style="[
        {
          backgroundImage: `url(${imageList[0]})`,
          backgroundPositionX: `${positionX}px`,
          backgroundPositionY: `${positionY}px`,
        },
      ]"
    ></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>
```



#### 3）鼠标移入控制显隐

![1721637763676](assets/商品详情-图片预览7.png)

<pre>文件名：<code>components/ImageView/index.vue</code></pre>

```vue
<script setup>
import { ref, watch } from "vue";
import { useMouseInElement } from "@vueuse/core";

// 图片列表
const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg",
];

// 1.小图切换大图显示 实现鼠标移入交互
const activeIndex = ref(0);
const enterhandler = (i) => {
  activeIndex.value = i;
};

// 2.获取鼠标相对位置
const target = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(target);

// 3.控制滑块跟随鼠标移动（监听elementX、elementY变化，一旦变化重新设置left、top）
const left = ref(0);
const top = ref(0);

const positionX = ref(0);
const positionY = ref(0);

watch([elementX, elementY, isOutside], () => {
  console.log("xy变化了");
  // 如果鼠标没有移入盒子里面，后续逻辑均不执行
  if (isOutside.value) {
    return;
  }
  console.log("后续逻辑执行了");
  // 在有效范围内控制滑块距离
  // 横向
  if (elementX.value > 100 && elementX.value < 300) {
    left.value = elementX - 100;
  }
  // 纵向
  if (elementY.value > 100 && elementY.value < 300) {
    top.value = elementX - 100;
  }
  // 边界距离控制
  if (elementX.value > 300) {
    left.value = 200;
  }
  if (elementX.value < 100) {
    left.value = 0;
  }

  if (elementY.value > 300) {
    top.value = 200;
  }
  if (elementY.value < 100) {
    top.value = 0;
  }
  // 控制大图的显示
  positionX.value = -left.value * 2;
  positionY.value = -top.value * 2;
});
</script> 


<template>
  <div class="goods-image">
    {{ elementX }} {{ elementY }} {{ isOutside }}
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div
        class="layer"
        v-show="!isOutside"
        :style="{ left: `${left}px`, top: `${top}px` }"
      ></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li
        v-for="(img, i) in imageList"
        :key="i"
        @mouseenter="enterhandler(i)"
        :class="{ active: i === activeIndex }"
      >
        <img :src="img" alt="" />
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div
      class="large"
      :style="[
        {
          backgroundImage: `url(${imageList[0]})`,
          backgroundPositionX: `${positionX}px`,
          backgroundPositionY: `${positionY}px`,
        },
      ]"
      v-show="!isOutside"
    ></div>
  </div>
</template>

<style scoped lang="scss">
.goods-image {
  width: 480px;
  height: 400px;
  position: relative;
  display: flex;

  .middle {
    width: 400px;
    height: 400px;
    background: #f5f5f5;
  }

  .large {
    position: absolute;
    top: 0;
    left: 412px;
    width: 400px;
    height: 400px;
    z-index: 500;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-repeat: no-repeat;
    // 背景图:盒子的大小 = 2:1  将来控制背景图的移动来实现放大的效果查看 background-position
    background-size: 800px 800px;
    background-color: #f8f8f8;
  }

  .layer {
    width: 200px;
    height: 200px;
    background: rgba(0, 0, 0, 0.2);
    // 绝对定位 然后跟随咱们鼠标控制left和top属性就可以让滑块移动起来
    left: 0;
    top: 0;
    position: absolute;
  }

  .small {
    width: 80px;

    li {
      width: 68px;
      height: 68px;
      margin-left: 12px;
      margin-bottom: 15px;
      cursor: pointer;

      &:hover,
      &.active {
        border: 2px solid $xtxColor;
      }
    }
  }
}
</style>
```

### 3. 组件props的适配

![1721638895090](assets/商品详情-图片预览8.png)

<pre>文件名：<code>components/ImageView/index.vue</code></pre>

```js
// props适配图片列表
defineProps({
  imageList: {
    type: Array,
    default: () => [],
  },
});
```

<pre>文件名：<code>views/Detail/index.vue</code></pre>

```html
<!-- 图片预览区 -->
<ImageView :image-list="good.mainPictures"/>
```

### 4. 总结

![1721639088685](assets/商品详情-图片预览9.png)



## SKU组件熟悉

![1721639202885](assets/sku组件.png)

![1721639918265](assets/sku组件2.png)

<pre>文件名：<code>views/Detail/index.vue</code></pre>

```vue
<script setup lang="ts">

import XtsSku from '@/components/XtxSku/index.vue';

// sku规则被操作时
const skuChange = (sku) => {
  console.log(sku)
};
</script>

<template>
       
              <!-- sku组件 -->
              <XtsSku :goods="good" @change="skuChange"/>
        
</template>
```

## 通用组件统一全局注册（插件化）

**为什么要进行优化（全局注册）？**

​	在components目录下可能还会有很多其他通用型组件，有可能在多个业务模块中共享，所以统一进行全局组件注册比较好

**注册思路**

-   把components目录下的所有组件进行全局注册
-   是`mian.js`中注册插件

### 1. 插件化开发

<pre>文件名：<code>components/index.js</code></pre>

```js
// 把components中的所组件都进行全局化注册
// 通过插件的方式
import ImageView from './ImageView/index.vue'
import XtxSku from './ImageView/index.vue'

export const componentPlugin = {
    install(app) {
        // app.component('组件名字'，组件配置对象)
        app.component('XtxImageView', ImageView)
        app.component('XtxSku', XtxSku)
    }
}
```

### 2. 插件注册

<pre>文件名：<code>main.js</code></pre>

```js
// 引入全局组件插件
import { componentPlugin } from '@/components'

app.use(componentPlugin)
```







# 登录页

## 整体认识和路由配置

### 整体认识

![1721644211968](assets/登录页-整体认识.png)

### 路由配置

#### 1. 准备模板

<pre>文件名：<code>views/Login/index.vue</code></pre>

```vue
<script setup>

</script>


<template>
  <div>
    <header class="login-header">
      <div class="container m-top-20">
        <h1 class="logo">
          <RouterLink to="/">小兔鲜</RouterLink>
        </h1>
        <RouterLink class="entry" to="/">
          进入网站首页
          <i class="iconfont icon-angle-right"></i>
          <i class="iconfont icon-angle-right"></i>
        </RouterLink>
      </div>
    </header>
    <section class="login-section">
      <div class="wrapper">
        <nav>
          <a href="javascript:;">账户登录</a>
        </nav>
        <div class="account-box">
          <div class="form">
            <el-form label-position="right" label-width="60px"
              status-icon>
              <el-form-item  label="账户">
                <el-input/>
              </el-form-item>
              <el-form-item label="密码">
                <el-input/>
              </el-form-item>
              <el-form-item label-width="22px">
                <el-checkbox  size="large">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item>
              <el-button size="large" class="subBtn">点击登录</el-button>
            </el-form>
          </div>
        </div>
      </div>
    </section>

    <footer class="login-footer">
      <div class="container">
        <p>
          <a href="javascript:;">关于我们</a>
          <a href="javascript:;">帮助中心</a>
          <a href="javascript:;">售后服务</a>
          <a href="javascript:;">配送与验收</a>
          <a href="javascript:;">商务合作</a>
          <a href="javascript:;">搜索推荐</a>
          <a href="javascript:;">友情链接</a>
        </p>
        <p>CopyRight &copy; 小兔鲜儿</p>
      </div>
    </footer>
  </div>
</template>

<style scoped lang='scss'>
.login-header {
  background: #fff;
  border-bottom: 1px solid #e4e4e4;

  .container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .logo {
    width: 200px;

    a {
      display: block;
      height: 132px;
      width: 100%;
      text-indent: -9999px;
      background: url("@/assets/images/logo.png") no-repeat center 18px / contain;
    }
  }

  .sub {
    flex: 1;
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 38px;
    margin-left: 20px;
    color: #666;
  }

  .entry {
    width: 120px;
    margin-bottom: 38px;
    font-size: 16px;

    i {
      font-size: 14px;
      color: $xtxColor;
      letter-spacing: -5px;
    }
  }
}

.login-section {
  background: url('@/assets/images/login-bg.png') no-repeat center / cover;
  height: 488px;
  position: relative;

  .wrapper {
    width: 380px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 54px;
    transform: translate3d(100px, 0, 0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);

    nav {
      font-size: 14px;
      height: 55px;
      margin-bottom: 20px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      padding: 0 40px;
      text-align: right;
      align-items: center;

      a {
        flex: 1;
        line-height: 1;
        display: inline-block;
        font-size: 18px;
        position: relative;
        text-align: center;
      }
    }
  }
}

.login-footer {
  padding: 30px 0 50px;
  background: #fff;

  p {
    text-align: center;
    color: #999;
    padding-top: 20px;

    a {
      line-height: 1;
      padding: 0 10px;
      color: #999;
      display: inline-block;

      ~a {
        border-left: 1px solid #ccc;
      }
    }
  }
}

.account-box {
  .toggle {
    padding: 15px 40px;
    text-align: right;

    a {
      color: $xtxColor;

      i {
        font-size: 14px;
      }
    }
  }

  .form {
    padding: 0 20px 20px 20px;

    &-item {
      margin-bottom: 28px;

      .input {
        position: relative;
        height: 36px;

        >i {
          width: 34px;
          height: 34px;
          background: #cfcdcd;
          color: #fff;
          position: absolute;
          left: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 18px;
        }

        input {
          padding-left: 44px;
          border: 1px solid #cfcdcd;
          height: 36px;
          line-height: 36px;
          width: 100%;

          &.error {
            border-color: $priceColor;
          }

          &.active,
          &:focus {
            border-color: $xtxColor;
          }
        }

        .code {
          position: absolute;
          right: 1px;
          top: 1px;
          text-align: center;
          line-height: 34px;
          font-size: 14px;
          background: #f5f5f5;
          color: #666;
          width: 90px;
          height: 34px;
          cursor: pointer;
        }
      }

      >.error {
        position: absolute;
        font-size: 12px;
        line-height: 28px;
        color: $priceColor;

        i {
          font-size: 14px;
          margin-right: 2px;
        }
      }
    }

    .agree {
      a {
        color: #069;
      }
    }

    .btn {
      display: block;
      width: 100%;
      height: 40px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      background: $xtxColor;

      &.disabled {
        background: #cfcdcd;
      }
    }
  }

  .action {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .url {
      a {
        color: #999;
        margin-left: 10px;
      }
    }
  }
}

.subBtn {
  background: $xtxColor;
  width: 100%;
  color: #fff;
}
</style>
```

#### 2. 配置路由规则

<pre>文件名：<code>router/index.js</code></pre>

```js
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
        {
          // '' 默认二级路由
          path: '',
          component: Home
        },
        {
          name: 'category',
          path: 'category/:id',
          component: Category
        },
        {
          name:'subCategory',
          path: '/category/sub/:id',
          component: SubCategory
        },
        {
          name:'detail',
          path: '/detail/:id',
          component: ProductDetail
        }
      ]
    },
    {
      name: 'login',
      path: '/login',
      component: Login
    }
  ]
```

#### 3. 配置路由跳转

<pre>文件名：<code>views/Layout/components/LayoutNav.vue</code></pre>

```vue
<template>

        <template v-else>
          <li><a href="javascript:;" @click="router.push('/login')">请先登录</a></li>
          <li><a href="javascript:;">帮助中心</a></li>
          <li><a href="javascript:;">关于我们</a></li>
        </template>

</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()
</script>
```

## 表单校验实现

![1721645389731](assets/登录页-表单校验1.png)

![1721645473603](assets/登录页-表单校验2.png)

参考elementPlus官网：https://element-plus.org/zh-CN/component/form.html#form-%E8%A1%A8%E5%8D%95

**表单校验核心步骤：**

-   1、**按照接口字段**准备表单对象并绑定
-   2、**按照产品要求**准备规则对象并绑定
-   3、指定表单域的**校验字段名**
-   4、把表单对象进行**双向绑定**

### 1. 校验要求

-   用户名：不能为空，字段名为 account

-   密码：不能为空且为6-14个字符，字段名为 password

-   同意协议：必选，字段名为 agree

### 2. 代码实现

<pre>文件名：<code>views/Login/index.vue</code></pre>

```vue
<script setup>
 import {ref} from 'vue'

// 1.准备表单对象（账户名+密码）
const ruleForm = ref({
  account: '',
  password: ''
})

// 2.规则对象：表单校验规则
const rules = {
  account: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur' 
    }
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur' 
    },
    { 
      min: 6,
      max: 14,
      message: '密码长度应为6-14个字符',
       trigger: 'blur' 
    },
  ],
}
</script>


<template>
    
          <div class="form">
            <el-form label-position="right" label-width="60px"
              :model="ruleForm"
              :rules="rules"
              status-icon>
              <el-form-item  label="账户" prop="account">
                <el-input v-model="ruleForm.account"/>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"/>
              </el-form-item>
              <el-form-item label-width="22px">
                <el-checkbox  size="large">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item>
              <el-button size="large" class="subBtn">点击登录</el-button>
            </el-form>
          </div>
  
</template>
```

### 自定义校验规则

![1721650963507](assets/登录页-表单校验3.png)

我们项目的需求：

​	我们的校验逻辑是：如果勾选了协议框，通过校验；如果没有勾选，不通过校验

<pre>文件名：<code>views/Login/index.vue</code></pre>

```vue
<script setup>
 import {ref} from 'vue'

// 1.准备表单对象（账户名+密码）
const ruleForm = ref({
  account: '',
  password: '',
  agree: true
})

// 2.规则对象：表单校验规则
const rules = {
  account: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur' 
    }
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur' 
    },
    { 
      min: 6,
      max: 14,
      message: '密码长度应为6-14个字符',
       trigger: 'blur' 
    },
  ],
  agree: [
    {
      validator: (rule, value, callback) => {
        console.log(value)
        // 自定义校验逻辑
        // 勾选就通过 不勾选就不提供
        if (value) {
          callback()
        } else {
          callback(new Error('请先同意条款'))
        }
      }
    }
  ]
}
</script>


<template>

          <div class="form">
            <el-form label-position="right" label-width="60px"
              :model="ruleForm"
              :rules="rules"
              status-icon>
              <el-form-item  label="账户" prop="account">
                <el-input v-model="ruleForm.account"/>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"/>
              </el-form-item>
              <el-form-item label-width="22px" prop="agree">
                <el-checkbox  size="large" v-model="ruleForm.agree">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item>
              <el-button size="large" class="subBtn">点击登录</el-button>
            </el-form>
          </div>
      

</template>
```

### 整个表单的内容校验

![1721705215705](assets/登录页-表单校验4.png)

**核心思路：**

-   获取form组件实例
-   调用实例方法

<pre>文件名：<code>views/Login/index.vue</code></pre>

```vue
<script setup>

// 3.获取form实例做统一校验
const ruleFormRef = ref()
const doLogin = () =>{
  // 调用实例方法
  ruleFormRef.value.validate((valid) => {
    // valid: 所有表单都通过校验，才为true
    console.log(valid)
    // 以valid作为判断条件，如果通过校验，执行登录逻辑
    if (valid) {
      // todo
    }
  })
}
</script>

<template>

          <div class="form">
            <el-form  ref="ruleFormRef" label-position="right" label-width="60px"
              :model="ruleForm"
              :rules="rules"
              status-icon>
              <el-form-item  label="账户" prop="account">
                <el-input v-model="ruleForm.account"/>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"/>
              </el-form-item>
              <el-form-item label-width="22px" prop="agree">
                <el-checkbox  size="large" v-model="ruleForm.agree">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item>
              <el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
            </el-form>
         
</template>
```



## 登录基础业务实现

![1721706361805](assets/登录页-基础业务实现1.png)



**基础思想**

-   调用登录接口获取用户信息

-   提示用户当前是否成功

-   跳转到首页

### 1. 封装接口

<pre>文件名：<code>apis/user.js</code></pre>

```js
// 封装所有与用户相关的接口
import request from '@/utils/http'

export const loginAPI = ({ account, password }) => {
    return request({
        url: '/login',
        method: 'POST',
        data: {
            account,
            password
        }
    })
}
```

### 2. 实现主逻辑

<pre>文件名：<code>views/Login/index.vue</code></pre>

```vue
<script setup>
 import {ref} from 'vue'
import {loginAPI} from '@/apis/user'
import { useRouter } from 'vue-router'
// 按需导入的方式需要手动导入样式
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

const router = useRouter()


// 3.获取form实例做统一校验
const ruleFormRef = ref()
const doLogin = () =>{
  
  // 调用实例方法
  ruleFormRef.value.validate((valid) => {
    // valid: 所有表单都通过校验，才为true
    // console.log(valid)
    // 以valid作为判断条件，如果通过校验，执行登录逻辑
    if (valid) {
      login()
      // 提示用户
      ElMessage({ type: 'success', message: '登录成功' })
      // 跳转首页
      router.replace({path: "/"})
    }
  })
}

const login = async () => {
  const {account, password} = ruleForm.value;
  const res = await loginAPI({ account, password })
  console.log(res)
}

</script>
```

### 3. 拦截器统一处理错误信息

<pre>文件名：<code>utils/http.js</code></pre>

```js
// 按需导入的方式需要手动导入样式
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

// axios响应拦截器
instance.interceptors.response.use(res => res.data, e => {
    // 错误提示统一处理
    ElMessage({
        type: 'warning',
        message: e.response.data.message
    })
    return Promise.reject(e)
})
```

## Pinia管理用户数据

![1721714650115](assets/登录页-pina管理用户数据.png)

![1721714725984](assets/登录页-pina管理用户数据2.png)

### 1.定义useUserStore

<pre>文件名：<code>stores/user.js</code></pre>

```js
import { defineStore } from "pinia";
import { ref } from "vue";
import { loginAPI } from '@/apis/user'

// 官方推荐使用hooks的那种命名规范
/**
 * 参数一：id （建议与文件名一致）
 * 参数二：options 配置对象
 */
// 组合式写法
export const useUserStore = defineStore('user', () => {
    // 1.定义管理用户数据的state
    const userInfo = ref({})
    // 2.定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await loginAPI({ account, password })
        // console.log(res)
        userInfo.value = res.result
    }
    // 3.以对象的形式把state和action返回
    return { userInfo, getUserInfo }
})
```

### 2. 登录组件中使用

<pre>文件名：<code>views/Login/index.vue</code></pre>

```vue
<script setup>

import { useUserStore } from '@/stores/user'

const userStore = useUserStore()


// 3.获取form实例做统一校验
const ruleFormRef = ref()
const doLogin = () =>{
  const {account, password} = ruleForm.value;
  
  // 调用实例方法
  ruleFormRef.value.validate(async (valid) => {
    // valid: 所有表单都通过校验，才为true
    // console.log(valid)
    // 以valid作为判断条件，如果通过校验，执行登录逻辑
    if (valid) {
      await userStore.getUserInfo({account, password})
      // console.log('pinia存储的数据', userStore.userInfo)
      // 提示用户
      ElMessage({ type: 'success', message: '登录成功' })
      // 跳转首页
      router.replace({path: "/"})
    }
  })
}

</script>
```

### 3. Pinia用户数据持久化

![1721716253961](assets/登录页-pina管理用户数据3.png)

 `pinia-plugin-persistedstate`参考： https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/

1、安装插件

```shell
npm i pinia-plugin-persistedstate
```

2、将插件添加到 pinia 实例上

<pre>文件名：<code>main.js</code></pre>

```js
import {createPinia} from 'pinia'
// 将插件添加到 pinia 实例上
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const app = createApp(App)

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
```

3、使用

创建 Store 时，将 `persist` 选项设置为 `true`。

<pre>文件名：<code>stores/user.js</code></pre>

```js
import { defineStore } from "pinia";
import { ref } from "vue";
import { loginAPI } from '@/apis/user'

// 组合式写法
export const useUserStore = defineStore('user', () => {
    // 1.定义管理用户数据的state
    const userInfo = ref({})
    // 2.定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await loginAPI({ account, password })
        // console.log(res)
        userInfo.value = res.result
    }
    // 3.以对象的形式把state和action返回
    return { userInfo, getUserInfo }
},
    {
        persist: true   // store持久化配置
    }
)
```

## 登录与非登录状态的模板匹配

![1721717259630](assets/登录页-登录与非登录.png)

![1721717655642](assets/登录页-登录与非登录2.png)

<pre>文件名：<code>views/Layout/components/LayoutNav.vue</code></pre>

```vue
<template>
  <nav class="app-topnav">
    <div class="container">
      <ul>
        <!-- 多模板渲染，区分登录状态和非登录状态 -->

        <!-- 适配思路：登录时显示第一快模板，非登录时显示第二款模块  区分：是否有token -->
        <template v-if="userStore.userInfo.token">
          <li><a href="javascript:;"><i class=" iconfont icon-user"></i>{{ userStore.userInfo.nickname }}</a></li>
          <li>
            <el-popconfirm title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
              <template #reference>
                <a href="javascript:;">退出登录</a>
              </template>
            </el-popconfirm>
          </li>
          <li><a href="javascript:;">我的订单</a></li>
          <li><a href="javascript:;">会员中心</a></li>
        </template>
        <template v-else>
          <li><a href="javascript:;" @click="router.push('/login')">请先登录</a></li>
          <li><a href="javascript:;">帮助中心</a></li>
          <li><a href="javascript:;">关于我们</a></li>
        </template>
      </ul>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore()
const router = useRouter()
</script>
```

## 请求拦截器携带token

![1721717922487](assets/登录页-请求拦截器携带token.png)



<pre>文件名：<code>utils/http.js</code></pre>

```js
import { useUserStore } from '@/stores/user';


// axios请求拦截器
instance.interceptors.request.use(config => {
    // 1.从pinia中获取token
    const userStore = useUserStore()
    const token = userStore.userInfo.token
    // 2.按照后端的要求进行token拼接处理
    if (token) {
        config.headers.Authorization = `Bearer ${token}`
    }

    return config;
}, e => Promise.reject(e))
```

## 退出登录实现

![1721721592877](assets/登录页-退出登录.png)

**核心思路：**

-   点击退出登录弹出确认框
-   点击确认按钮实现退出登录逻辑
-   退出登录逻辑包括
    -   1、清理当前用户信息（store、localStorage）
    -   2、跳转到登录页面

el-popconfirm 组件的使用参考elementPlus官方：

<pre>文件名：<code>views/Layout/components/LayoutNav.vue</code></pre>

```vue
<template>
 
            <el-popconfirm @confirm="logout" title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
              <template #reference>
                <a href="javascript:;">退出登录</a>
              </template>
            </el-popconfirm>

</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore()
const router = useRouter()

const logout = () => {
  console.log('用户退出登录')
  // 清理pinia数据
  userStore.clearUserInfo()
  // 跳转到登录页
  router.replace('login')
}
</script>
```

<pre>文件名：<code>stores/user.js</code></pre>

```js
// 组合式写法
export const useUserStore = defineStore('user', () => {
    // 1.定义管理用户数据的state
    const userInfo = ref({})
    // 2.定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await loginAPI({ account, password })
        // console.log(res)
        userInfo.value = res.result
    }
    // 清除用户信息：会同步清空local Storage（由pinia-plugin-persistedstate插件实现）
    const clearUserInfo = () => {
        userInfo.value = {} 
    }
    // 3.以对象的形式把state和action返回
    return { userInfo, getUserInfo, clearUserInfo }
},
    {
        persist: true   // store持久化配置
    }
)
```

## Token失效401实现

![1721723504678](assets/登录页-token失效401.png)

<pre>文件名：<code>utils/http.js</code></pre>

```js
import { useUserStore } from '@/stores/user';
import router from '@/router';



// axios响应拦截器
instance.interceptors.response.use(res => res.data, e => {
    // 错误提示统一处理
    ElMessage({
        type: 'warning',
        message: e.response.data.message
    })
    // 401 token失效处理
    // 2.跳转到登录页
    // 1.清除本地用户数据（pinia与local storage）
    if (e.response.status === 401) {
        const userStore = useUserStore()
        userStore.clearUserInfo()

        router.replace('/login')
    }
    return Promise.reject(e)
})
```









# 购物车

![1721725268479](assets/购物车1.png)



## 本地购物车

### 加入购物车实现

![1721726137996](assets/购物车-本地购物车1.png)

<pre>文件名：<code>stores/cart.js</code></pre>

```js
// 封装购物车模块
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCartStore = defineStore('cart', () => {
    // 定义state
    const cartList = ref([])

    // 定义action
    // 加入购物车
    const addCart = (good) => {
        console.log('加入购物车action执行')
        // 添加入购物车
        // 已添加过：count + 1
        // 没有添加过：直接push
        // 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
        const item = cartList.value.find((item) => good.skuId === item.skuId)
        if (item) {
            // 找到啦
            item.count++
        } else {
            // 没找到
            cartList.value.push(good)
        }
    }

    return { cartList, addCart }
},
{
    persist: true   // store持久化配置
}
)
```

<pre>文件名：<code>views/Detail/index.vue</code></pre>

```vue
<script setup lang="ts">
    
import { ElMessage } from 'element-plus';
import { useCartStore } from '@/stores/cart'

const cartStore = useCartStore()



let skuObj = {}
// sku规则被操作时
const skuChange = (sku) => {
  // console.log('sku', sku)
  skuObj = sku
};

// count 数量
const count = ref(1)

const countChange = (count: number) => {
  // console.log(count);
}

// 加入购物车
const addCart = () => {
  if (skuObj.skuId) { // 规格选好以后，才会触发sku组件生成sku对象
    // 规格已经选择完毕 触发action
    cartStore.addCart({
      id: good.value.id,  // 商品id
      name: good.value.name,  // 商品名称
      picture: good.value.mainPictures[0],  // 商品图片
      price: good.value.price,  // 最新价格
      count: count.value,  // 商品数量
      skuId: skuObj.skuId,  // skuId
      attrsText: skuObj.specsText,  // 商品规格文本
      selected: true  // 商品是否选中
    })
    
  } else {
    // 规格没有选择，提示用户
    ElMessage.warning('请选择规格')
  }
}
</script>

<template>
 
              <!-- 数据组件 -->
              <el-input-number v-model="count" @change="countChange"/>
              <!-- 按钮组件 -->
              <div>
                <el-button size="large" class="btn" @click="addCart">
                  加入购物车
                </el-button>
              </div>

</template>
```

### 头部购物车

#### 列表渲染-消息框渲染

![1721729286054](assets/购物车-头部购物车.png)

##### 1. 头部购物车组件模版

<pre>文件名：<code>views/Layout/components/HeaderCart.vue</code></pre>

```vue
<script setup>

</script>

<template>
  <div class="cart">
    <a class="curr" href="javascript:;">
      <i class="iconfont icon-cart"></i><em>2</em>
    </a>
    <div class="layer">
      <div class="list">
        <!--
        <div class="item" v-for="i in cartList" :key="i">
          <RouterLink to="">
            <img :src="i.picture" alt="" />
            <div class="center">
              <p class="name ellipsis-2">
                {{ i.name }}
              </p>
              <p class="attr ellipsis">{{ i.attrsText }}</p>
            </div>
            <div class="right">
              <p class="price">&yen;{{ i.price }}</p>
              <p class="count">x{{ i.count }}</p>
            </div>
          </RouterLink>
          <i class="iconfont icon-close-new" @click="store.delCart(i.skuId)"></i>
        </div>
        -->
      </div>
      <div class="foot">
        <div class="total">
          <p>共 10 件商品</p>
          <p>&yen; 100.00 </p>
        </div>
        <el-button size="large" type="primary" >去购物车结算</el-button>
      </div>
    </div>
</div>
</template>

<style scoped lang="scss">
.cart {
  width: 50px;
  position: relative;
  z-index: 600;

  .curr {
    height: 32px;
    line-height: 32px;
    text-align: center;
    position: relative;
    display: block;

    .icon-cart {
      font-size: 22px;
    }

    em {
      font-style: normal;
      position: absolute;
      right: 0;
      top: 0;
      padding: 1px 6px;
      line-height: 1;
      background: $helpColor;
      color: #fff;
      font-size: 12px;
      border-radius: 10px;
      font-family: Arial;
    }
  }

  &:hover {
    .layer {
      opacity: 1;
      transform: none;
    }
  }

  .layer {
    opacity: 0;
    transition: all 0.4s 0.2s;
    transform: translateY(-200px) scale(1, 0);
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50px;
    right: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    background: #fff;
    border-radius: 4px;
    padding-top: 10px;

    &::before {
      content: "";
      position: absolute;
      right: 14px;
      top: -10px;
      width: 20px;
      height: 20px;
      background: #fff;
      transform: scale(0.6, 1) rotate(45deg);
      box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
    }

    .foot {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 70px;
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      background: #f8f8f8;
      align-items: center;

      .total {
        padding-left: 10px;
        color: #999;

        p {
          &:last-child {
            font-size: 18px;
            color: $priceColor;
          }
        }
      }
    }
  }

  .list {
    height: 310px;
    overflow: auto;
    padding: 0 10px;

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    &::-webkit-scrollbar-track {
      background: #f8f8f8;
      border-radius: 2px;
    }

    &::-webkit-scrollbar-thumb {
      background: #eee;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #ccc;
    }

    .item {
      border-bottom: 1px solid #f5f5f5;
      padding: 10px 0;
      position: relative;

      i {
        position: absolute;
        bottom: 38px;
        right: 0;
        opacity: 0;
        color: #666;
        transition: all 0.5s;
      }

      &:hover {
        i {
          opacity: 1;
          cursor: pointer;
        }
      }

      a {
        display: flex;
        align-items: center;

        img {
          height: 80px;
          width: 80px;
        }

        .center {
          padding: 0 10px;
          width: 200px;

          .name {
            font-size: 16px;
          }

          .attr {
            color: #999;
            padding-top: 5px;
          }
        }

        .right {
          width: 100px;
          padding-right: 20px;
          text-align: center;

          .price {
            font-size: 16px;
            color: $priceColor;
          }

          .count {
            color: #999;
            margin-top: 5px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
```

##### 2.  放置组件

<pre>文件名：<code>views/Layout/components/LayoutHeader.vue</code></pre>

```vue
<template>
  <header class='app-header'>
    <div class="container">
      <h1 class="logo">
        <RouterLink to="/">小兔鲜</RouterLink>
      </h1>
      <ul class="app-header-nav">
        <li class="home" v-for="item in categoryStore.categoryList" :key="item.id">
          <RouterLink active-class="active" :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
        </li>
      </ul>
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="搜一搜">
      </div>
      <!-- 头部购物车 -->
      <HeaderCart/>
    </div>
  </header>
</template>
```

##### 3. 渲染头部购物车数据

<pre>文件名：<code>views/Layout/components/HeaderCart.vue</code></pre>

```vue
<script setup>
import { useCartStore } from "@/stores/cart";

const cartStore = useCartStore();
</script>

<template>

    <div class="layer">
      <div class="list">
        <div class="item" v-for="i in cartStore.cartList" :key="i">
          <RouterLink to="">
            <img :src="i.picture" alt="" />
            <div class="center">
              <p class="name ellipsis-2">
                {{ i.name }}
              </p>
              <p class="attr ellipsis">{{ i.attrsText }}</p>
            </div>
            <div class="right">
              <p class="price">&yen;{{ i.price }}</p>
              <p class="count">x{{ i.count }}</p>
            </div>
          </RouterLink>
          <i
            class="iconfont icon-close-new"
            @click="store.delCart(i.skuId)"
          ></i>
        </div>
      </div>
 
</template>
```

#### 头部购物车删除实现

![1721730923315](assets/购物车-头部购物车2.png)

<pre>文件名：<code>stores/cart.js</code></pre>

```js
export const useCartStore = defineStore('cart', () => {
    // 定义state
    const cartList = ref([])

    // 删除购物车
    const delCart = (skuId) => {
        console.log('删除购物车action执行')
        // 方法一：找到要删除项的下标值 splice
        // 方法二：使用数组的过滤方法 filter
        const idx = cartList.value.findIndex((item) => item.skuId === skuId)
        cartList.value.splice(idx, 1)
    }

    return { cartList, addCart, delCart }
}
)
```

<pre>文件名：<code>views/Layout/components/HeaderCart.vue</code></pre>

```vue
<template>
 
          <i
            class="iconfont icon-close-new"
            @click="cartStore.delCart(i.skuId)"
          ></i>

</template>
```



#### 头部购物车统计计算

![1721732734947](assets/购物车-头部购物车3.png)

<pre>文件名：<code>stores/cart.js</code></pre>

```js
export const useCartStore = defineStore('cart', () => {
    // 定义state
    const cartList = ref([])

    // getters 计算属性
    // 1.总数量 所有项的 count 之和
    const allCount = computed(() => {     
        return cartList.value.reduce((x, y) => x + y.count, 0)
    })
    // 2.总价格 所有项的 count * price
    const allPrice = computed(() => {
        return cartList.value.reduce((x, y) => x + y.count * y.price, 0)
    })

    return { cartList, allCount, allPrice, addCart, delCart }
}
)
```

<pre>文件名：<code>views/Layout/components/HeaderCart.vue</code></pre>

```vue
<template> 
	<div class="foot">
        <div class="total">
            <p>共 {{ cartStore.allCount }} 件商品</p>
            <p>&yen; {{ cartStore.allPrice.toFixed(2) }}</p>
        </div>
        <el-button size="large" type="primary">去购物车结算</el-button>
    </div>
</template>
```



### 列表购物车

#### 基础内容渲染

![1721732976031](assets/购物车-列表购物车1.png)

**核心思路：**

-   准备模板
-   定制路由规则
-   绑定路由
-   渲染基础列表

##### 准备模板

<pre>文件名：<code>views/CartList/index.vue</code></pre>

```vue
<script setup>
const cartList = [];
</script>

<template>
  <div class="xtx-cart-page">
    <div class="container m-top-20">
      <div class="cart">
        <table>
          <thead>
            <tr>
              <th width="120">
                <el-checkbox />
              </th>
              <th width="400">商品信息</th>
              <th width="220">单价</th>
              <th width="180">数量</th>
              <th width="180">小计</th>
              <th width="140">操作</th>
            </tr>
          </thead>
          <!-- 商品列表 -->
          <tbody>
            <tr v-for="i in cartList" :key="i.id">
              <td>
                <el-checkbox />
              </td>
              <td>
                <div class="goods">
                  <RouterLink to="/"
                    ><img :src="i.picture" alt=""
                  /></RouterLink>
                  <div>
                    <p class="name ellipsis">
                      {{ i.name }}
                    </p>
                  </div>
                </div>
              </td>
              <td class="tc">
                <p>&yen;{{ i.price }}</p>
              </td>
              <td class="tc">
                <el-input-number v-model="i.count" />
              </td>
              <td class="tc">
                <p class="f16 red">&yen;{{ (i.price * i.count).toFixed(2) }}</p>
              </td>
              <td class="tc">
                <p>
                  <el-popconfirm
                    title="确认删除吗?"
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    @confirm="delCart(i)"
                  >
                    <template #reference>
                      <a href="javascript:;">删除</a>
                    </template>
                  </el-popconfirm>
                </p>
              </td>
            </tr>
            <tr v-if="cartList.length === 0">
              <td colspan="6">
                <div class="cart-none">
                  <el-empty description="购物车列表为空">
                    <el-button type="primary">随便逛逛</el-button>
                  </el-empty>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 操作栏 -->
      <div class="action">
        <div class="batch">
          共 10 件商品，已选择 2 件，商品合计：
          <span class="red">¥ 200.00 </span>
        </div>
        <div class="total">
          <el-button size="large" type="primary">下单结算</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.xtx-cart-page {
  margin-top: 20px;

  .cart {
    background: #fff;
    color: #666;

    table {
      border-spacing: 0;
      border-collapse: collapse;
      line-height: 24px;

      th,
      td {
        padding: 10px;
        border-bottom: 1px solid #f5f5f5;

        &:first-child {
          text-align: left;
          padding-left: 30px;
          color: #999;
        }
      }

      th {
        font-size: 16px;
        font-weight: normal;
        line-height: 50px;
      }
    }
  }

  .cart-none {
    text-align: center;
    padding: 120px 0;
    background: #fff;

    p {
      color: #999;
      padding: 20px 0;
    }
  }

  .tc {
    text-align: center;

    a {
      color: $xtxColor;
    }

    .xtx-numbox {
      margin: 0 auto;
      width: 120px;
    }
  }

  .red {
    color: $priceColor;
  }

  .green {
    color: $xtxColor;
  }

  .f16 {
    font-size: 16px;
  }

  .goods {
    display: flex;
    align-items: center;

    img {
      width: 100px;
      height: 100px;
    }

    > div {
      width: 280px;
      font-size: 16px;
      padding-left: 10px;

      .attr {
        font-size: 14px;
        color: #999;
      }
    }
  }

  .action {
    display: flex;
    background: #fff;
    margin-top: 20px;
    height: 80px;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    padding: 0 30px;

    .xtx-checkbox {
      color: #999;
    }

    .batch {
      a {
        margin-left: 20px;
      }
    }

    .red {
      font-size: 18px;
      margin-right: 20px;
      font-weight: bold;
    }
  }

  .tit {
    color: #666;
    font-size: 16px;
    font-weight: normal;
    line-height: 50px;
  }
}
</style>
```

##### 定制路由规则

<pre>文件名：<code>router/index.js</code></pre>

```js
import CartList from '@/views/CartList/index.vue'

 routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
        {
          // '' 默认二级路由
          path: '',
          component: Home
        },
      
      
        {
          name: 'cartList',
          path: 'cartList',
          component: CartList
        }
      ]
    },
  
  ]
```

##### 绑定路由

<pre>文件名：<code>views/Layout/components/HeaderCart.vue</code></pre>

```vue
<el-button size="large" type="primary" @click="router.push('/cartList')">去购物车结算</el-button>
```

##### 渲染基础列表

<pre>文件名：<code>views/CartList/index.vue</code></pre>

```vue
<script setup>
import { useCartStore } from "@/stores/cart";

const cartStore = useCartStore();
</script>

<template>
         
          <!-- 商品列表 -->
          <tbody>
            <tr v-for="i in cartStore.cartList" :key="i.id">  
     
            </tr>
            <tr v-if="cartStore.cartList.length === 0">
              <td colspan="6">
                <div class="cart-none">
                  <el-empty description="购物车列表为空">
                    <el-button type="primary">随便逛逛</el-button>
                  </el-empty>
                </div>
              </td>
            </tr>
     
</template>
```



#### 单选功能

![1721733322700](assets/购物车-列表购物车2.png)





补充：

​	组件标签上的`v-model`的本质：`:moldeValue` ＋ `update:modelValue`事件

<pre>文件名：<code>stores/cart.js</code></pre>

```js
export const useCartStore = defineStore('cart', () => {
    // 定义state
    const cartList = ref([])

    // 单选功能
    const singleCheck = (skuId, selected) => {
        // 根据skuId找到要修改的项，修改其selected
        const item = cartList.value.find((item) => item.skuId === skuId)
        item.selected = selected
      };


    return { cartList, allCount, allPrice, addCart, delCart, singleCheck }
}
)
```

<pre>文件名：<code>views/CartList/index.vue</code></pre>

```vue
<script setup>
import { useCartStore } from "@/stores/cart";

const cartStore = useCartStore();

// 单选回调
const singleCheck = (i, selected) => {
  console.log("选中状态", i, selected);
  // store cartList 数组无法知道要修改谁的选中状态，因此需要加一个入参skuId
  cartStore.singleCheck(i.skuId, selected)
};
</script>

<template>

              <td>
                <!-- 单选框 -->
                <el-checkbox
                  :modelValue="i.selected"
                  @change="(selected) => singleCheck(i, selected)"
                />
              </td>       
          
</template>
```

#### 全选功能

![1721733716080](assets/购物车-列表购物车3.png)

<pre>文件名：<code>stores/cart.js</code></pre>

```js
export const useCartStore = defineStore('cart', () => {
    // 定义state
    const cartList = ref([])

    // 全选功能
    const allCheck = (selected) => {
        // 把cartList中所有项的selected都设置为当前的全选框状态
        cartList.value.forEach(item => item.selected = selected)
    };

    // 是否全选
    const isAll = computed(() => {
        return cartList.value.every((item) => item.selected)
    })

    return { cartList, allCount, allPrice, isAll, addCart, delCart, singleCheck, allCheck }
)
```

<pre>文件名：<code>views/CartList/index.vue</code></pre>

```vue
<script setup>

// 全选回调
const allCheck = (selected) => {
  // console.log('全选回调')
  cartStore.allCheck(selected)
}
</script>

<template>

               <th width="120">
                <!-- 全选框 
                  :modelValue="cartStore.isAll" 打通 数据 => 页面
                  :change="allCheck"            打通 页数 => 数据
                -->
                <el-checkbox 
                :modelValue="cartStore.isAll"
                @change="allCheck"
                 />
              </th>      
          
</template>
```

#### 统计计算实现

![1721734000357](assets/购物车-列表购物车4.png)

<pre>文件名：<code>stores/cart.js</code></pre>

```js
export const useCartStore = defineStore('cart', () => {
    // 定义state
    const cartList = ref([])

    // 3.选中数量
    const selectedCount = computed(() => {
        return cartList.value
            .filter(item => item.selected)
            .reduce((x, y) => x + y.count, 0)
    })
    // 4.选中商品总价格
    const selectedPrice = computed(() => {
        return cartList.value
            .filter(item => item.selected)
            .reduce((x, y) => x + y.count * y.price, 0)
    })

    return { cartList, allCount, allPrice, isAll, selectedCount, selectedPrice, addCart, delCart, singleCheck, allCheck }
}
)
```

<pre>文件名：<code>views/CartList/index.vue</code></pre>

```vue
<template>

      <!-- 操作栏 -->
      <div class="action">
        <div class="batch">
          共 {{ cartStore.allCount }} 件商品，已选择
          {{ cartStore.selectedCount }} 件，商品合计：
          <span class="red">¥ {{ cartStore.selectedPrice.toFixed(2) }} </span>
        </div>
        <div class="total">
          <el-button size="large" type="primary">下单结算</el-button>
        </div>
      </div>

</template>
```



## 接口购物车

![1721725268479](assets/购物车1.png)



### 加入购物车（优化本地购物车逻辑）

![1721798746101](assets/购物车-接口购物车1.png)

#### 1.封装购物车接口

<pre>文件名：<code>apis/cart.js</code></pre>

```js
// 封装购物车相关接口
import request from '@/utils/http'

// 加入购物车
export const insertCartAPI = ({ skuId, count }) => {
    return request({
        url: '/member/cart',
        method: 'POST',
        data: {
            skuId,
            count
        }
    })
}

// 获取最新购物车列表
export const findNewCartListAPI = () => {
    return request({
        url: '/member/cart',
    })
}
```

#### 2.加入购物车实现

<pre>文件名：<code>stores/cart.js</code></pre>

```js
// 在cartStore中使用userStore
import { useUserStore } from './user'
import { insertCartAPI, findNewCartListAPI } from '@/apis/cart'

export const useCartStore = defineStore('cart', () => {
    const userStore = useUserStore()
    const isLogin = computed(() => userStore.userInfo.token)

    // 定义state
    const cartList = ref([])

    // 定义action
    // 加入购物车
    const addCart = async (good) => {
        // console.log('加入购物车action执行')
        if (isLogin) {
            // 登录之后的加入购物车逻辑
            const { skuId, count } = good
            await insertCartAPI({ skuId, count })
            const res = await findNewCartListAPI()
            cartList.value = res.result
        } else {
            // 本地购物车添加入购物车逻辑
            // 已添加过：count + 1
            // 没有添加过：直接push
            // 思路：通过匹配传递过来的商品对象中的skuId能不能在cartList中找到，找到了就是添加过
            const item = cartList.value.find((item) => good.skuId === item.skuId)
            if (item) {
                // 找到啦
                item.count++
            } else {
                // 没找到
                cartList.value.push(good)
            }
        }
    }

}
)
```

### 删除购物车

![1721804291811](assets/购物车-接口购物车2.png)



#### 1.封装购物车接口

<pre>文件名：<code>apis/cart.js</code></pre>

```js
// 删除购物车
export const delCartAPI = (ids) => {
    return request({
        url: '/member/cart',
        method: 'DELETE',
        data: {
            ids
        }
    })
}
```

#### 2.加入购物车实现

<pre>文件名：<code>stores/cart.js</code></pre>

```js
import { insertCartAPI, findNewCartListAPI, delCartAPI } from '@/apis/cart'

// 删除购物车
const delCart = async (skuId) => {
    // console.log('删除购物车action执行')
    if (isLogin) {
        await delCartAPI([skuId])
        // 获取最新购物车
        const res = await findNewCartListAPI()
        cartList.value = res.result
    } else {

        // 方法一：找到要删除项的下标值 splice
        // 方法二：使用数组的过滤方法 filter
        const idx = cartList.value.findIndex((item) => item.skuId === skuId)
        cartList.value.splice(idx, 1)
    }
}
```

### 清空购物车

![1721805324566](assets/购物车-接口购物车3.png)

<pre>文件名：<code>stores/cart.js</code></pre>

```js
export const useCartStore = defineStore('cart', () => {

    // 清除购物车
    const clearCart = () => {
        cartList.value = []
    }

}
)
```

<pre>文件名：<code>stores/user.js</code></pre>

```js
// 在userStore中使用CartStore
import  { useCartStore } from "@/stores/cart";

// 组合式写法
export const useUserStore = defineStore('user', () => {
    const cartStore = useCartStore()
 
    // 清除用户信息：会同步清空local Storage（由pinia-plugin-persistedstate插件实现）
    const clearUserInfo = () => {
        userInfo.value = {}
        // 清空用户购物车
        cartStore.clearCart()
    }
}
)
```



## 合并本地购物车到服务器

![1721805867231](assets/购物车2.png)

### 1.封装接口

<pre>文件名：<code>apis/cart.js</code></pre>

```js
// 合并购物车
export const mergeCartAPI = (data) => {
    return request({
        url: '/member/cart/merge',
        method: 'POST',
        data
    })
}
```

### 2.合并本地购物车到服务器实现

在用户登录时，进行合并购物车操作

```js
import { mergeCartAPI } from "@/apis/cart";

export const useUserStore = defineStore('user', () => {
    const cartStore = useCartStore()
    // 1.定义管理用户数据的state
    const userInfo = ref({})
    // 2.定义获取接口数据的action函数
    const getUserInfo = async ({ account, password }) => {
        const res = await loginAPI({ account, password })
        // console.log(res)
        userInfo.value = res.result
        // 合并购物车操作
        const data = cartStore.cartList.map(item => {
            return {
                skuId: item.skuId,
                selected: item.selected,
                count: item.count
            }
        })
        await mergeCartAPI(data)
        // 获取最新购物车列表
        cartStore.updateNewCartList()
    }
   
}
)
```













# 订单页 结算页

## 路由配置和基础数据渲染

### 路由配置

![1721810709877](assets/订单页-路由配置.png)

#### 1. 准备组件模版

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<script setup>
const checkInfo = {}  // 订单对象
const curAddress = {}  // 地址对象

</script>

<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper">
        <!-- 收货地址 -->
        <h3 class="box-title">收货地址</h3>
        <div class="box-body">
          <div class="address">
            <div class="text">
              <div class="none" v-if="!curAddress">您需要先添加收货地址才可提交订单。</div>
              <ul v-else>
                <li><span>收<i />货<i />人：</span>{{ curAddress.receiver }}</li>
                <li><span>联系方式：</span>{{ curAddress.contact }}</li>
                <li><span>收货地址：</span>{{ curAddress.fullLocation }} {{ curAddress.address }}</li>
              </ul>
            </div>
            <div class="action">
              <el-button size="large" @click="toggleFlag = true">切换地址</el-button>
              <el-button size="large" @click="addFlag = true">添加地址</el-button>
            </div>
          </div>
        </div>
        <!-- 商品信息 -->
        <h3 class="box-title">商品信息</h3>
        <div class="box-body">
          <table class="goods">
            <thead>
              <tr>
                <th width="520">商品信息</th>
                <th width="170">单价</th>
                <th width="170">数量</th>
                <th width="170">小计</th>
                <th width="170">实付</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in checkInfo.goods" :key="i.id">
                <td>
                  <a href="javascript:;" class="info">
                    <img :src="i.picture" alt="">
                    <div class="right">
                      <p>{{ i.name }}</p>
                      <p>{{ i.attrsText }}</p>
                    </div>
                  </a>
                </td>
                <td>&yen;{{ i.price }}</td>
                <td>{{ i.price }}</td>
                <td>&yen;{{ i.totalPrice }}</td>
                <td>&yen;{{ i.totalPayPrice }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 配送时间 -->
        <h3 class="box-title">配送时间</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;">不限送货时间：周一至周日</a>
          <a class="my-btn" href="javascript:;">工作日送货：周一至周五</a>
          <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a>
        </div>
        <!-- 支付方式 -->
        <h3 class="box-title">支付方式</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;">在线支付</a>
          <a class="my-btn" href="javascript:;">货到付款</a>
          <span style="color:#999">货到付款需付5元手续费</span>
        </div>
        <!-- 金额明细 -->
        <h3 class="box-title">金额明细</h3>
        <div class="box-body">
          <div class="total">
            <dl>
              <dt>商品件数：</dt>
              <dd>{{ checkInfo.summary?.goodsCount }}件</dd>
            </dl>
            <dl>
              <dt>商品总价：</dt>
              <dd>¥{{ checkInfo.summary?.totalPrice.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>运<i></i>费：</dt>
              <dd>¥{{ checkInfo.summary?.postFee.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>应付总额：</dt>
              <dd class="price">{{ checkInfo.summary?.totalPayPrice.toFixed(2) }}</dd>
            </dl>
          </div>
        </div>
        <!-- 提交订单 -->
        <div class="submit">
          <el-button type="primary" size="large" >提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- 切换地址 -->
  <!-- 添加地址 -->
</template>

<style scoped lang="scss">
.xtx-pay-checkout-page {
  margin-top: 20px;

  .wrapper {
    background: #fff;
    padding: 0 20px;

    .box-title {
      font-size: 16px;
      font-weight: normal;
      padding-left: 10px;
      line-height: 70px;
      border-bottom: 1px solid #f5f5f5;
    }

    .box-body {
      padding: 20px 0;
    }
  }
}

.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;

  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;

    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }

    >ul {
      flex: 1;
      padding: 20px;

      li {
        line-height: 30px;

        span {
          color: #999;
          margin-right: 5px;

          >i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }

    >a {
      color: $xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }

  .action {
    width: 420px;
    text-align: center;

    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;

      &:first-child {
        margin-right: 10px;
      }
    }
  }
}

.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;

  .info {
    display: flex;
    text-align: left;

    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }

    .right {
      line-height: 24px;

      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }

  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }

    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;

      &:first-child {
        border-left: 1px solid #f5f5f5;
      }

      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}

.my-btn {
  width: 228px;
  height: 50px;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 48px;
  margin-right: 25px;
  color: #666666;
  display: inline-block;

  &.active,
  &:hover {
    border-color: $xtxColor;
  }
}

.total {
  dl {
    display: flex;
    justify-content: flex-end;
    line-height: 50px;

    dt {
      i {
        display: inline-block;
        width: 2em;
      }
    }

    dd {
      width: 240px;
      text-align: right;
      padding-right: 70px;

      &.price {
        font-size: 20px;
        color: $priceColor;
      }
    }
  }
}

.submit {
  text-align: right;
  padding: 60px;
  border-top: 1px solid #f5f5f5;
}

.addressWrapper {
  max-height: 500px;
  overflow-y: auto;
}

.text {
  flex: 1;
  min-height: 90px;
  display: flex;
  align-items: center;

  &.item {
    border: 1px solid #f5f5f5;
    margin-bottom: 10px;
    cursor: pointer;

    &.active,
    &:hover {
      border-color: $xtxColor;
      background: lighten($xtxColor, 50%);
    }

    >ul {
      padding: 10px;
      font-size: 14px;
      line-height: 30px;
    }
  }
}
</style>
```

#### 2. 配置路由规则

<pre>文件名：<code>router/index.js</code></pre>

```js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
        {
          // '' 默认二级路由
          path: '',
          component: Home
        },
        {
          name: 'category',
          path: 'category/:id',
          component: Category
        },
        {
          name:'subCategory',
          path: '/category/sub/:id',
          component: SubCategory
        },
        {
          name:'detail',
          path: '/detail/:id',
          component: ProductDetail
        },
        {
          name: 'cartList',
          path: 'cartList',
          component: CartList
        },
        {
          name: 'checkout',
          path: 'checkout',
          component: Checkout
        }
      ]
    },
    {
      // 登录页
      name: 'login',
      path: '/login',
      component: Login
    }
  ]
})
```

#### 3. 配置路由跳转

<pre>文件名：<code>views/CartList/index.vue</code></pre>

```vue
<el-button size="large" type="primary" @click="$router.push({path: '/checkout'})">下单结算</el-button>
```

### 基础数据渲染

![1721811468590](assets/订单页-基础数据渲染.png)

#### 1. 封装接口

<pre>文件名：<code>apis/checkout.js</code></pre>

```js
import request from '@/utils/http'

// 获取详情
export const getCheckInfoAPI = () => {
    return request({
        url: '/member/order/pre'
    })
}
```

#### 2. 获取数据

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<script setup>
import { onMounted, ref } from "vue";
import { getCheckInfoAPI } from "@/apis/checkout";

const checkInfo = ref({}); // 订单对象
const curAddress = ref({}); // 地址对象(默认地址：规定isDefault===0为默认地址)

const getCheckInfo = async () => {
  const res = await getCheckInfoAPI();
  // console.log(res.result);
  checkInfo.value = res.result;
  // 适配默认地址
  const item = checkInfo.value.userAddresses.find(
    (item) => item.isDefault === 0
  );
  curAddress.value = item;
};

onMounted(() => getCheckInfo());
</script>
```

#### 3. 默认地址和商品列表渲染

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<template>
  <div class="xtx-pay-checkout-page">
    <div class="container">
      <div class="wrapper">
        <!-- 收货地址 -->
        <h3 class="box-title">收货地址</h3>
        <div class="box-body">
          <div class="address">
            <div class="text">
              <div class="none" v-if="!curAddress">
                您需要先添加收货地址才可提交订单。
              </div>
              <ul v-else>
                <li>
                  <span>收<i />货<i />人：</span>{{ curAddress.receiver }}
                </li>
                <li><span>联系方式：</span>{{ curAddress.contact }}</li>
                <li>
                  <span>收货地址：</span>{{ curAddress.fullLocation }}
                  {{ curAddress.address }}
                </li>
              </ul>
            </div>
            <div class="action">
              <el-button size="large" @click="toggleFlag = true"
                >切换地址</el-button
              >
              <el-button size="large" @click="addFlag = true"
                >添加地址</el-button
              >
            </div>
          </div>
        </div>
        <!-- 商品信息 -->
        <h3 class="box-title">商品信息</h3>
        <div class="box-body">
          <table class="goods">
            <thead>
              <tr>
                <th width="520">商品信息</th>
                <th width="170">单价</th>
                <th width="170">数量</th>
                <th width="170">小计</th>
                <th width="170">实付</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="i in checkInfo.goods" :key="i.id">
                <td>
                  <a href="javascript:;" class="info">
                    <img :src="i.picture" alt="" />
                    <div class="right">
                      <p>{{ i.name }}</p>
                      <p>{{ i.attrsText }}</p>
                    </div>
                  </a>
                </td>
                <td>&yen;{{ i.price }}</td>
                <td>{{ i.price }}</td>
                <td>&yen;{{ i.totalPrice }}</td>
                <td>&yen;{{ i.totalPayPrice }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 配送时间 -->
        <h3 class="box-title">配送时间</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;"
            >不限送货时间：周一至周日</a
          >
          <a class="my-btn" href="javascript:;">工作日送货：周一至周五</a>
          <a class="my-btn" href="javascript:;">双休日、假日送货：周六至周日</a>
        </div>
        <!-- 支付方式 -->
        <h3 class="box-title">支付方式</h3>
        <div class="box-body">
          <a class="my-btn active" href="javascript:;">在线支付</a>
          <a class="my-btn" href="javascript:;">货到付款</a>
          <span style="color: #999">货到付款需付5元手续费</span>
        </div>
        <!-- 金额明细 -->
        <h3 class="box-title">金额明细</h3>
        <div class="box-body">
          <div class="total">
            <dl>
              <dt>商品件数：</dt>
              <dd>{{ checkInfo.summary?.goodsCount }}件</dd>
            </dl>
            <dl>
              <dt>商品总价：</dt>
              <dd>¥{{ checkInfo.summary?.totalPrice.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>运<i></i>费：</dt>
              <dd>¥{{ checkInfo.summary?.postFee.toFixed(2) }}</dd>
            </dl>
            <dl>
              <dt>应付总额：</dt>
              <dd class="price">
                {{ checkInfo.summary?.totalPayPrice.toFixed(2) }}
              </dd>
            </dl>
          </div>
        </div>
        <!-- 提交订单 -->
        <div class="submit">
          <el-button type="primary" size="large">提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
  <!-- 切换地址 -->
  <!-- 添加地址 -->
</template>
```



## 切换地址

![1721812867070](assets/订单页-地址切换.png)

### 打开弹框交互

#### 1. 准备弹框模版

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<el-dialog title="切换收货地址" width="30%" center>
  <div class="addressWrapper">
    <div class="text item" v-for="item in checkInfo.userAddresses"  :key="item.id">
      <ul>
      <li><span>收<i />货<i />人：</span>{{ item.receiver }} </li>
      <li><span>联系方式：</span>{{ item.contact }}</li>
      <li><span>收货地址：</span>{{ item.fullLocation + item.address }}</li>
      </ul>
    </div>
  </div>
  <template #footer>
    <span class="dialog-footer">
      <el-button>取消</el-button>
      <el-button type="primary">确定</el-button>
    </span>
  </template>
</el-dialog>
```

#### 2. 控制弹框打开

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<script setup>
    
// 控制弹框打开
const showDialog = ref(false);
    
</script>

<template>

    <el-button
    size="large"
    @click="showDialog = true"
    >切换地址</el-button
    >

</template>
```



### 地址切换交互

![1721813725208](assets/订单页-地址切换2.png)

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<script setup>

const activeAddress = ref({}); // 激活地址
// 切换地址回调
const switchAddress = (item) => {
  activeAddress.value = item;
};

// 确认按钮触发
const confirm = () => {
  curAddress.value = activeAddress.value;
  // 关闭弹框
  showDialog.value = false;
  // 取消激活框
  activeAddress.value = {}
};
</script>

<template>
<!-- 切换地址 -->
  <el-dialog v-model="showDialog" title="切换收货地址" width="30%" center>
    <div class="addressWrapper">
      <div
        class="text item"
        :class="{ active: activeAddress.id === item.id }"
        @click="switchAddress(item)"
        v-for="item in checkInfo.userAddresses"
        :key="item.id"
      >
          
          
      <el-button type="primary" @click="confirm">确定</el-button>
          
          
</template>
```



#### 总结

![1721814465939](assets/订单页-地址切换3.png)



## 创建订单生成订单ID

![1721814969537](assets/订单页-创建订单1.png)



### 准备支付页组件并绑定路由

#### 1. 支付页组件

<pre>文件名：<code>views/Pay/index.vue</code></pre>

```vue
<script setup>
const payInfo = {};
</script>


<template>
  <div class="xtx-pay-page">
    <div class="container">
      <!-- 付款信息 -->
      <div class="pay-info">
        <span class="icon iconfont icon-queren2"></span>
        <div class="tip">
          <p>订单提交成功！请尽快完成支付。</p>
          <p>支付还剩 <span>24分30秒</span>, 超时后将取消订单</p>
        </div>
        <div class="amount">
          <span>应付总额：</span>
          <span>¥{{ payInfo.payMoney?.toFixed(2) }}</span>
        </div>
      </div>
      <!-- 付款方式 -->
      <div class="pay-type">
        <p class="head">选择以下支付方式付款</p>
        <div class="item">
          <p>支付平台</p>
          <a class="btn wx" href="javascript:;"></a>
          <a class="btn alipay" :href="payUrl"></a>
        </div>
        <div class="item">
          <p>支付方式</p>
          <a class="btn" href="javascript:;">招商银行</a>
          <a class="btn" href="javascript:;">工商银行</a>
          <a class="btn" href="javascript:;">建设银行</a>
          <a class="btn" href="javascript:;">农业银行</a>
          <a class="btn" href="javascript:;">交通银行</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.xtx-pay-page {
  margin-top: 20px;
}

.pay-info {
  background: #fff;
  display: flex;
  align-items: center;
  height: 240px;
  padding: 0 80px;

  .icon {
    font-size: 80px;
    color: #1dc779;
  }

  .tip {
    padding-left: 10px;
    flex: 1;

    p {
      &:first-child {
        font-size: 20px;
        margin-bottom: 5px;
      }

      &:last-child {
        color: #999;
        font-size: 16px;
      }
    }
  }

  .amount {
    span {
      &:first-child {
        font-size: 16px;
        color: #999;
      }

      &:last-child {
        color: $priceColor;
        font-size: 20px;
      }
    }
  }
}

.pay-type {
  margin-top: 20px;
  background-color: #fff;
  padding-bottom: 70px;

  p {
    line-height: 70px;
    height: 70px;
    padding-left: 30px;
    font-size: 16px;

    &.head {
      border-bottom: 1px solid #f5f5f5;
    }
  }

  .btn {
    width: 150px;
    height: 50px;
    border: 1px solid #e4e4e4;
    text-align: center;
    line-height: 48px;
    margin-left: 30px;
    color: #666666;
    display: inline-block;

    &.active,
    &:hover {
      border-color: $xtxColor;
    }

    &.alipay {
      background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7b6b02396368c9314528c0bbd85a2e06.png)
        no-repeat center / contain;
    }

    &.wx {
      background: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66f98cff8649bd5ba722c2e8067c6ca.jpg)
        no-repeat center / contain;
    }
  }
}
</style>
```

#### 2. 配置路由规则

<pre>文件名：<code>router/index.js</code></pre>

```js
import Pay from '@/views/Pay/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
        {
          // '' 默认二级路由
          path: '',
          component: Home
        },
      
        // 支付页
        {
          name: 'pay',
          path: 'pay',
          component: Pay
        }
      ]
    }, 
  ]
})
```

### 封装生成订单接口

<pre>文件名：<code>apis/checkout.js</code></pre>

```js
// 创建订单
export const createOrderAPI = (data) => {
    return request({
        url: '/member/order',
        method: 'POST',
        data
    })
} 
```

### 提交订单（调用接口携带id跳转路由）

点击`提交订单`按钮会做如下两件事情：

-   1、调用生成订单接口，得到订单id
-   2、携带订单id，完成路由跳转

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<script setup>
import { onMounted, ref } from "vue";
import { getCheckInfoAPI, createOrderAPI } from "@/apis/checkout";
import { useRouter } from "vue-router";

const router = useRouter()

// 创建订单
const createOrder = async () => {
  const res = await createOrderAPI({
    deliveryTimeType: 1,
    payType: 1,
    payChannel: 1,
    buyerMessage: '',
    goods: checkInfo.value.goods.map(item => {
      return {
        skuId: item.skuId,
        count: item.count
      }
    }),
    addressId: curAddress.value.id
  })
  
  const orderId = res.result.id // 订单id
  // 编程式路由跳转
  router.push({
    path: '/pay',
    query: {
      id: orderId
    }
  })
}
</script>


<template>

		<!-- 提交订单 -->
        <div class="submit">
          <el-button @click="createOrder" type="primary" size="large">提交订单</el-button>
        </div>

</template>
```

### 更新购物车

<pre>文件名：<code>views/Checkout/index.vue</code></pre>

```vue
<script setup>
import { useCartStore } from "@/stores/cart";

const cartStore = useCartStore()


// 创建订单
const createOrder = async () => {
	
    
  // 更新购物车
  cartStore.updateNewCartList()
}
</script>
```









# 支付页

## 基础数据渲染

![1721817005279](assets/支付页-基础数据渲染.png)

**核心思路：**

-   封装获取订单详情的接口
-   获取关键数据并渲染

### 1. 封装接口

<pre>文件名：<code>apis/pay.js</code></pre>

```js
import request from '@/utils/http'

export const getOrderAPI = (id) => {
    return request({
        url: `/member/order/${id}`
    })
}
```

### 2. 获取数据渲染内容

<pre>文件名：<code>views/Pay/index.vue</code></pre>

```vue
<script setup>
import { getOrderAPI } from "@/apis/pay";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const payInfo = ref({});

// 获取订单详情
const getOrder = async () => {
  const res = await getOrderAPI(route.query.id);
  payInfo.value = res.result
};

onMounted(() => getOrder())
</script>
```



## 支付功能实现

![1721817595268](assets/支付页-支付功能.png)



### 1. 支付携带参数

<pre>文件名：<code>views/Pay/index.vue</code></pre>

```vue
<script setup>

// 跳转支付
// 携带 订单id 以及 回调地址 跳转到支付地址（get）
// 支付地址
const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.query.id}&redirect=${redirectUrl}`
</script>

<template>

	  <!-- 付款方式 -->
      <div class="pay-type">
        <p class="head">选择以下支付方式付款</p>
        <div class="item">
          <p>支付平台</p>
          <a class="btn wx" href="javascript:;"></a>
          <a class="btn alipay" :href="payUrl"></a>
        </div>
     
      </div>
</template>      
```

### 2. 支付宝沙箱账号信息

| 账号     | fukuvb7569@sandbox.com |
| -------- | ---------------------- |
| 登录密码 | 111111                 |
| 支付密码 | 111111                 |

## 支付结果页展示

![1721818252722](assets/支付页-支付结果展示.png)

### 1.准备模板组件

<pre>文件名：<code>views/Pay/components/PayBack.vue</code></pre>

```vue
<script setup>
</script>


<template>
  <div class="xtx-pay-page">
    <div class="container">
      <!-- 支付结果 -->
      <div class="pay-result">
        <span class="iconfont icon-queren2 green"></span>
        <span class="iconfont icon-shanchu red"></span>
        <p class="tit">支付成功</p>
        <p class="tip">我们将尽快为您发货，收货期间请保持手机畅通</p>
        <p>支付方式：<span>支付宝</span></p>
        <p>支付金额：<span>¥200.00</span></p>
        <div class="btn">
          <el-button type="primary" style="margin-right: 20px"
            >查看订单</el-button
          >
          <el-button>进入首页</el-button>
        </div>
        <p class="alert">
          <span class="iconfont icon-tip"></span>
          温馨提示：小兔鲜儿不会以订单异常、系统升级为由要求您点击任何网址链接进行退款操作，保护资产、谨慎操作。
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pay-result {
  padding: 100px 0;
  background: #fff;
  text-align: center;
  margin-top: 20px;

  > .iconfont {
    font-size: 100px;
  }

  .green {
    color: #1dc779;
  }

  .red {
    color: $priceColor;
  }

  .tit {
    font-size: 24px;
  }

  .tip {
    color: #999;
  }

  p {
    line-height: 40px;
    font-size: 16px;
  }

  .btn {
    margin-top: 50px;
  }

  .alert {
    font-size: 12px;
    color: #999;
    margin-top: 50px;
  }
}
</style>
```

### 2、配置路由规则

<pre>文件名：<code>router/index.js</code></pre>

```js
import PayBack from '@/views/Pay/components/PayBack.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
      
        // 支付页
        {
          name: 'pay',
          path: 'pay',
          component: Pay
        },
        // 支付结果跳转页
        {
          name: 'payBack',
          path: 'paycallback',
          component: PayBack
        }
      ]
    },
 
  ]
})
```

### 3、根据支付结果适配支付状态

<pre>文件名：<code>views/Pay/components/PayBack.vue</code></pre>

```vue
<template>

        <!-- 注意：路由参数获取到的是字符串而不是bool -->
        <span
          class="iconfont icon-queren2 green"
          v-if="$route.query.payResult === 'true'"
        ></span>
        <span class="iconfont icon-shanchu red" v-else></span>
        <!-- 可以用计算属性，但是没必要 -->
        <p class="tit">
          支付{{ $route.query.payResult === "true" ? "成功" : "失败" }}
        </p>

</template>
```

### 4、获取订单数据渲染支付信息

<pre>文件名：<code>views/Pay/components/PayBack.vue</code></pre>

```vue
<script setup>
import { getOrderAPI } from "@/apis/pay";
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";

const route = useRoute();
const orderInfo = ref({});

const getOrderInfo = async () => {
  const res = await getOrderAPI(route.query.orderId);
  orderInfo.value = res.result;
};

onMounted(() => getOrderInfo());
</script>


<template>

        <p>
          支付金额：<span>¥{{ orderInfo.payMoney?.toFixed(2) }}</span>
        </p>
  
</template>
```



## 封装倒计时函数

![1721819573517](assets/支付页-封装倒计时函数.png)

**核心思路：**

-   编写函数框架，确认函数的入参、返回值
-   编写核心倒计时逻辑实现基础倒计时功能
-   实现格式化

<pre>文件名：<code>composables/useCountDown.js</code></pre>

```js
// 封装倒计时逻辑函数
import { computed, onUnmounted, ref } from "vue"
import dayjs from "dayjs"   // npm i dayjs


export const useCountDown = () => {
    let timer = null
    // 1.响应式数据
    const time = ref(0)
    // 格式化时间 xx分xx秒
    const formatTime = computed(() => dayjs.unix(time.value).format('mm分ss秒'))
    // 2.开启倒计时函数
    const start = (currentTime) => {
        // 开始倒计时核心逻辑
        // 逻辑: 每隔1s减1
        time.value = currentTime
        // 定时器
        timer = setInterval(() => {
            time.value--
        }, 1000)
    }

    // 组件卸载时清除定时器
    onUnmounted(() => {
        timer && clearInterval(timer)
    })
    return {
        formatTime,
        start
    }

}
```

















# 会员中心

## 整体功能梳理

![1721821830529](assets/会员中心1.png)

## 路由配置

![1721821972075](assets/会员中心-路由配置1.png)

### 1. 准备个人中心组件模版

<pre>文件名：<code>views/Member/index.vue</code></pre>

```vue
<script setup>
</script>

<template>
  <div class="container">
    <div class="xtx-member-aside">
      <div class="user-manage">
        <h4>我的账户</h4>
        <div class="links">
          <RouterLink to="/member/user">个人中心</RouterLink>
        </div>
        <h4>交易管理</h4>
        <div class="links">
          <RouterLink to="/member/order">我的订单</RouterLink>
        </div>
      </div>
    </div>
    <div class="article">
      <!-- 三级路由的挂载点 -->
      <RouterView />
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
  padding-top: 20px;

  .xtx-member-aside {
    width: 220px;
    margin-right: 20px;
    border-radius: 2px;
    background-color: #fff;

    .user-manage {
      background-color: #fff;

      h4 {
        font-size: 18px;
        font-weight: 400;
        padding: 20px 52px 5px;
        border-top: 1px solid #f6f6f6;
      }

      .links {
        padding: 0 52px 10px;
      }

      a {
        display: block;
        line-height: 1;
        padding: 15px 0;
        font-size: 14px;
        color: #666;
        position: relative;

        &:hover {
          color: $xtxColor;
        }

        &.active,
        &.router-link-exact-active {
          color: $xtxColor;

          &:before {
            display: block;
          }
        }

        &:before {
          content: "";
          display: none;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          position: absolute;
          top: 19px;
          left: -16px;
          background-color: $xtxColor;
        }
      }
    }
  }

  .article {
    width: 1000px;
    background-color: #fff;
  }
}
</style>
```

### 2. 配置二级路由规则

<pre>文件名：<code>router/index.js</code></pre>

```js
import Member from '@/views/Member/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
      
        // 会员中心 个人中心
        {
          name: 'member',
          path: 'member',
          component: Member
        }
      ]
    },
  
})
```

### 3. 准备个人中心组件、我的订单组件模板

<pre>文件名：<code>views/Member/components/UserInfo.vue</code></pre>

```vue
<script setup>
const userStore = {};
</script>

<template>
  <div class="home-overview">
    <!-- 用户信息 -->
    <div class="user-meta">
      <div class="avatar">
        <img :src="userStore.userInfo?.avatar" />
      </div>
      <h4>{{ userStore.userInfo?.account }}</h4>
    </div>
    <div class="item">
      <a href="javascript:;">
        <span class="iconfont icon-hy"></span>
        <p>会员中心</p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-aq"></span>
        <p>安全设置</p>
      </a>
      <a href="javascript:;">
        <span class="iconfont icon-dw"></span>
        <p>地址管理</p>
      </a>
    </div>
  </div>
  <div class="like-container">
    <div class="home-panel">
      <div class="header">
        <h4 data-v-bcb266e0="">猜你喜欢</h4>
      </div>
      <div class="goods-list">
        <!-- <GoodsItem v-for="good in likeList" :key="good.id" :good="good" /> -->
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-overview {
  height: 132px;
  background: url(@/assets/images/center-bg.png) no-repeat center / cover;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
      color: white;
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: white;
      font-size: 16px;
      text-align: center;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 32px;
      }
    }
  }
}

.like-container {
  margin-top: 20px;
  border-radius: 4px;
  background-color: #fff;
}

.home-panel {
  background-color: #fff;
  padding: 0 20px;
  margin-top: 20px;
  height: 400px;

  .header {
    height: 66px;
    border-bottom: 1px solid #f5f5f5;
    padding: 18px 0;
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    h4 {
      font-size: 22px;
      font-weight: 400;
    }
  }

  .goods-list {
    display: flex;
    justify-content: space-around;
  }
}
</style>
```

<pre>文件名：<code>views/Member/components/UserOrder.vue</code></pre>

```vue
<script setup>
// tab列表
const tabTypes = [
  { name: "all", label: "全部订单" },
  { name: "unpay", label: "待付款" },
  { name: "deliver", label: "待发货" },
  { name: "receive", label: "待收货" },
  { name: "comment", label: "待评价" },
  { name: "complete", label: "已完成" },
  { name: "cancel", label: "已取消" },
];
// 订单列表
const orderList = [];
</script>

<template>
  <div class="order-container">
    <el-tabs>
      <!-- tab切换 -->
      <el-tab-pane
        v-for="item in tabTypes"
        :key="item.name"
        :label="item.label"
      />

      <div class="main-container">
        <div class="holder-container" v-if="orderList.length === 0">
          <el-empty description="暂无订单数据" />
        </div>
        <div v-else>
          <!-- 订单列表 -->
          <div class="order-item" v-for="order in orderList" :key="order.id">
            <div class="head">
              <span>下单时间：{{ order.createTime }}</span>
              <span>订单编号：{{ order.id }}</span>
              <!-- 未付款，倒计时时间还有 -->
              <span class="down-time" v-if="order.orderState === 1">
                <i class="iconfont icon-down-time"></i>
                <b>付款截止: {{ order.countdown }}</b>
              </span>
            </div>
            <div class="body">
              <div class="column goods">
                <ul>
                  <li v-for="item in order.skus" :key="item.id">
                    <a class="image" href="javascript:;">
                      <img :src="item.image" alt="" />
                    </a>
                    <div class="info">
                      <p class="name ellipsis-2">
                        {{ item.name }}
                      </p>
                      <p class="attr ellipsis">
                        <span>{{ item.attrsText }}</span>
                      </p>
                    </div>
                    <div class="price">¥{{ item.realPay?.toFixed(2) }}</div>
                    <div class="count">x{{ item.quantity }}</div>
                  </li>
                </ul>
              </div>
              <div class="column state">
                <p>{{ order.orderState }}</p>
                <p v-if="order.orderState === 3">
                  <a href="javascript:;" class="green">查看物流</a>
                </p>
                <p v-if="order.orderState === 4">
                  <a href="javascript:;" class="green">评价商品</a>
                </p>
                <p v-if="order.orderState === 5">
                  <a href="javascript:;" class="green">查看评价</a>
                </p>
              </div>
              <div class="column amount">
                <p class="red">¥{{ order.payMoney?.toFixed(2) }}</p>
                <p>（含运费：¥{{ order.postFee?.toFixed(2) }}）</p>
                <p>在线支付</p>
              </div>
              <div class="column action">
                <el-button
                  v-if="order.orderState === 1"
                  type="primary"
                  size="small"
                >
                  立即付款
                </el-button>
                <el-button
                  v-if="order.orderState === 3"
                  type="primary"
                  size="small"
                >
                  确认收货
                </el-button>
                <p><a href="javascript:;">查看详情</a></p>
                <p v-if="[2, 3, 4, 5].includes(order.orderState)">
                  <a href="javascript:;">再次购买</a>
                </p>
                <p v-if="[4, 5].includes(order.orderState)">
                  <a href="javascript:;">申请售后</a>
                </p>
                <p v-if="order.orderState === 1">
                  <a href="javascript:;">取消订单</a>
                </p>
              </div>
            </div>
          </div>
          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination background layout="prev, pager, next" />
          </div>
        </div>
      </div>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.order-container {
  padding: 10px 20px;

  .pagination-container {
    display: flex;
    justify-content: center;
  }

  .main-container {
    min-height: 500px;

    .holder-container {
      min-height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.order-item {
  margin-bottom: 20px;
  border: 1px solid #f5f5f5;

  .head {
    height: 50px;
    line-height: 50px;
    background: #f5f5f5;
    padding: 0 20px;
    overflow: hidden;

    span {
      margin-right: 20px;

      &.down-time {
        margin-right: 0;
        float: right;

        i {
          vertical-align: middle;
          margin-right: 3px;
        }

        b {
          vertical-align: middle;
          font-weight: normal;
        }
      }
    }

    .del {
      margin-right: 0;
      float: right;
      color: #999;
    }
  }

  .body {
    display: flex;
    align-items: stretch;

    .column {
      border-left: 1px solid #f5f5f5;
      text-align: center;
      padding: 20px;

      > p {
        padding-top: 10px;
      }

      &:first-child {
        border-left: none;
      }

      &.goods {
        flex: 1;
        padding: 0;
        align-self: center;

        ul {
          li {
            border-bottom: 1px solid #f5f5f5;
            padding: 10px;
            display: flex;

            &:last-child {
              border-bottom: none;
            }

            .image {
              width: 70px;
              height: 70px;
              border: 1px solid #f5f5f5;
            }

            .info {
              width: 220px;
              text-align: left;
              padding: 0 10px;

              p {
                margin-bottom: 5px;

                &.name {
                  height: 38px;
                }

                &.attr {
                  color: #999;
                  font-size: 12px;

                  span {
                    margin-right: 5px;
                  }
                }
              }
            }

            .price {
              width: 100px;
            }

            .count {
              width: 80px;
            }
          }
        }
      }

      &.state {
        width: 120px;

        .green {
          color: $xtxColor;
        }
      }

      &.amount {
        width: 200px;

        .red {
          color: $priceColor;
        }
      }

      &.action {
        width: 140px;

        a {
          display: block;

          &:hover {
            color: $xtxColor;
          }
        }
      }
    }
  }
}
</style>
```

### 4. 配置三级路由规则

<pre>文件名：<code>router/index.js</code></pre>

```js
import MemberInfo from '@/views/Member/components/UserInfo.vue'
import MemberOrder from '@/views/Member/components/UserOrder.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
     
        // 会员中心 个人中心
        {
          name: 'member',
          path: 'member',
          component: Member,
          children: [
            {
              path: '',
              component: MemberInfo
            },
            {
              path: 'order',
              component: MemberOrder
            }
          ]
        }
      ]
    }
  ]
})
```

## 个人中心信息渲染

![1721822940038](assets/会员中心-个人中心1.png)

### 1. 使用Pinia数据渲染个人信息

<pre>文件名：<code>views/Member/components/UserInfo.vue</code></pre>

```vue
<script setup>
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
</script>
```

### 2. 封装猜你喜欢接口

<pre>文件名：<code>apis/user.js</code></pre>

```js
export const getLikeListAPI = ({ limit = 4 }) => {
    return request({
        url: '/goods/relevant',
        params: {
            limit
        }
    })
}
```

### 3. 渲染猜你喜欢数据

<pre>文件名：<code>views/Member/components/UserInfo.vue</code></pre>

```vue
<script setup>
import { useUserStore } from "@/stores/user";
import { ref, onMounted } from "vue";
import { getLikeListAPI } from "@/apis/user";
import GoodsItem from '@/views/Home/components/GoodsItem.vue'

const userStore = useUserStore;
// 猜你喜欢
const likeList = ref([]);

const getLikeList = async () => {
  const res = await getLikeListAPI({ limit: 4 });
  likeList.value = res.result;
};
onMounted(() => getLikeList());
</script>

<template>
   <div class="goods-list">
      <GoodsItem v-for="good in likeList" :key="good.id" :goods="good" />
    </div>
</template>
```



## 我的订单

### 1. 基础列表渲染

![1721823552632](assets/会员中心-我的订单1.png)

<pre>文件名：<code>apis/order.js</code></pre>

```js
import request from '@/utils/http'
/*
params: {
    orderState:0,
  page:1,
  pageSize:2
}
*/


export const getUserOrder = (params) => {
    return request({
        url: '/member/order',
        method: 'GET',
        params
    })
}
```

<pre>文件名：<code>views/Member/components/UserOrder.vue</code></pre>

```vue
<script setup>
import { ref } from "vue";
import { getUserOrder } from "@/apis/order";

// 订单列表
const orderList = ref([]);
const params = ref({
  orderState: 0,
  page: 1,
  pageSize: 2,
});
const getOrderList = async () => {
  const res = await getUserOrder(params.value);
  orderList.value = res.result.items;
};
onMounted(() => getOrderList());
</script>
```



### 2. tab切换实现 

![1721824077863](assets/会员中心-我的订单2.png)

<pre>文件名：<code>views/Member/components/UserOrder.vue</code></pre>

```vue
<script setup>

// tab切换
const tabChange = (type) => {
  // console.log(type);
  params.value.orderState = type;
  getOrderList();
};
</script>

<template>

    <el-tabs @tab-change="tabChange">      
  
</template>
```



### 3. 分页逻辑实现  

![1721824458898](assets/会员中心-我的订单3.png)

<pre>文件名：<code>views/Member/components/UserOrder.vue</code></pre>

```vue
<script setup>
    
// 订单列表
const orderList = ref([]);
const params = ref({
  orderState: 0,
  page: 1,
  pageSize: 2,
});
// 订单总数
const total = ref(0);
const getOrderList = async () => {
  const res = await getUserOrder(params.value);
  orderList.value = res.result.items;
  total.value = res.result.count;
};
onMounted(() => getOrderList());

// page切换回调
const pageChange = (page) => {
  // console.log(page)
  params.value.page = page;
  getOrderList();
};
</script>

<template>
  
          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              :total="total"
              :page-size="params.pageSize"
              @current-change="pageChange"
              background
              layout="prev, pager, next"
            />
          </div>
        
</template>
```

## 细节优化

### 默认三级路由设置

![1721825108793](assets/会员中心-细节优化1.png)

<pre>文件名：<code>router/index.js</code></pre>

```js
import MemberInfo from '@/views/Member/components/UserInfo.vue'
import MemberOrder from '@/views/Member/components/UserOrder.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  // 路由规则：path和component对应关系
  routes: [
    {
      name: 'layout',
      path: '/',
      component: Layout,
      children: [
     
        // 会员中心 个人中心
        {
          name: 'member',
          path: 'member',
          component: Member,
          children: [
            {
              path: '',	// 默认
              component: MemberInfo
            },
            {
              path: 'order',
              component: MemberOrder
            }
          ]
        }
      ]
    }
  ]
})
```

<pre>文件名：<code>views/Member/index.vue</code></pre>

```vue
<template>
	<RouterLink to="/member">个人中心</RouterLink>
</template>
```

### 订单状态显示适配

![1721825292714](assets/会员中心-细节优化2.png)

<pre>文件名：<code>views/Member/components/UserOrder.vue</code></pre>

```vue
<script setup>
  // 创建格式化函数
  const formatPayState = (payState) => {
    const stateMap = {
      1: '待付款',
      2: '待发货',
      3: '待收货',
      4: '待评价',
      5: '已完成',
      6: '已取消'
    }
    return stateMap[payState]
  }
</script>


<template>

  <!-- 调用函数适配显示 -->
  <p>{{ formatPayState(order.orderState)}}</p>

</template>
```