# vue-rabbit

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

## Basic Information

- **Project Name**: vue-rabbit
- **Description**: 小兔鲜儿电商项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-10
- **Last Updated**: 2026-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-rabbit
小兔鲜儿电商前端项目

## 使用到的开发插件
![工程化插件](./picture/工程化插件.png "工程化插件")

## 页面预览
![Home页面](./picture/Home页面.png "Home页面")


![一级Category页面.png](./picture/一级Category页面.png "一级Category页面.png")


![二级Category页面.png](./picture/二级Category页面.png "二级Category页面.png")


![Detail页面.png](./picture/Detail页面.png "Detail页面.png")


![Login页面.png](./picture/Login页面.png "Login页面.png")


![头部购物车页面.png](./picture/头部购物车页面.png "头部购物车页面.png")


![CartList页面.png](./picture/CartList页面.png "CartList页面.png")


![订单页面.png](./picture/订单页面.png "订单页面.png")


![pay页面.png](./picture/pay页面.png "pay页面.png")


![PayBack页面.png](./picture/PayBack页面.png "PayBack页面.png")


![会员中心页面.png](./picture/会员中心页面.png "会员中心页面.png")
## 涉及到的技术
Vue3，Element-Plus，阿里icon图标库，封装axios，自定义scss样式（Element-Plus主题色定制）


```
# element-plus
npm install element-plus --save

# 按需导入
npm install -D unplugin-vue-components unplugin-auto-import

# 样式
npm i sass -D
  
# axios
npm i axios  

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

# Vue 官方风的工具库
npm i @vueuse/core

# pinia持久化插件
npm i pinia-plugin-persistedstate

# 时间格式化
npm i dayjs
```
涉及到的配置文件脚手架:vite.config.js,eslint.config.js,styles里面引入element,common.scss和var.scss;assets引入图片。

## Layout页面

### 一级导航渲染
首先封装网络请求
```
import httpInstance from '@/utils/http'

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

在LayoutHeader页面将数据渲染出来
```
<script setup>
import { getCategoryAPI } from '@/apis/layout';
import { onMounted,ref } from 'vue';

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

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

</script>

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

### 一级导航吸顶效果
核心逻辑：根据滚动距离判断当前show类名是否显示，大于78显示，小于78，不显示
使用到了组件import { useScroll } from '@vueuse/core';
```
<script setup>
import { useScroll } from '@vueuse/core';
const { y } = useScroll(window)

</script>

<template>
  <div class="app-header-sticky" :class="{show: y > 78}">
</template>  
```

### 使用Pinia存储一级导航数据
LayoutFixed和LayoutHeader组件都公用一套导航数据，用Pinia存储，避免重复调用


首先构建stores里面的category.js
```
import { ref } from 'vue'
import { defineStore } from 'pinia'
import { getCategoryAPI } from '@/apis/layout'

export const useCategoryStore = defineStore('category', () => {
  const categortList = ref([])

  const getCategory = async() => {
    const res = await getCategoryAPI()
    categortList.value = res.data.result
  }
  

  return { categortList, getCategory}
})
```

然后让Layout的主页面挂载的时候调用getCategory的action保证categortList有数据，然后组件里面复用
```
<script setup>
import { useCategoryStore } from '@/stores/category';

// 使用pinia中的数据
const categoryStore = useCategoryStore()

</script>

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

## Home页面

### bannner轮播图
使用到了el-carousel组件作为轮播图
```
<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img :src="item.imgUrl" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
```

### 插槽实现新鲜好物/人气推荐
首先创建一个HomePanel组件作为新鲜好物/人气推荐的数据容器，用到了props数据传递和默认插槽
```
<script setup>
// 定义props
defineProps({
    // 主标题
    title:{
        type:String
    },
    // 副标题
    subTitle:{
        type:String
    }
})

</script>


<template>
  <div class="home-panel">
    <div class="container">
      <div class="head">
         <!-- 主标题和副标题 -->
        <h3>
          {{ title }}<small>{{ subTitle }}</small>
        </h3>
      </div>
      <!-- 主体内容区域,我们采用插槽技术实现 -->
      <slot />
    </div>
  </div>
</template>
```
然后HomeNew和HomeHot组件传入数据
```
<script setup>
import { onMounted, ref } from 'vue';
import HomePanel from '@/views/Home/components/HomePanel.vue';
import { findNewAPI } from '@/apis/home';

const newList = ref([])

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

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

<template>
  <HomePanel title="新鲜好物" sub-title="新鲜出炉 品质靠谱">
    <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">¥{{ item.price }}</p>
      </RouterLink>
    </li>
  </ul>
  </HomePanel>

</template>
```

### 图片懒加载

封装一个懒加载插件，自定义v-img-lazy指令
```
import { useIntersectionObserver } from '@vueuse/core'


export const lazyplugin = {
    install(app) {
        // 懒加载插件
        // 自定义全局指令
        app.directive('img-lazy',{
            mounted(el,binding) {
                // el：指令绑定的那个元素 img
                // binding：指令后面跟的表达式 item.picture
                console.log(el,binding.value);
                const {stop} = useIntersectionObserver(
                    el,
                    ([{ isIntersecting}]) => {
                        console.log(isIntersecting);
                        
                        if(isIntersecting){  // 是否进入视口区域
                            // 进入视口区域
                            el.src = binding.value
                            // 图片加载完成以后结束视图监听
                            stop()
                        }
                    }
                )   
            }
        })

    }
}
```
最后在main.js文件将懒加载插件挂载好
```
// 引入懒加载插件
import {lazyplugin} from '@/directives'

app.use(lazyplugin) // 挂载懒加载插件
```

## 一级Category页面

### 设置默认路由跳转

设置动态路由路由传参
```
{
    path:'category/:id',
    component:Category
}
```
给LayoutHeader和LayoutFixed设置跳转路由
```
<RouterLink :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
```

### 面包屑导航
需要用到组件el-breadcrumb
```
<!-- 面包屑 -->
      <div class="bread-container">
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="`/`">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
```

### 路由跳转激活状态控制
使用active-class这个指令解决，然后后面加上要显示激活状态的css样式class
```
<RouterLink active-class="active" :to="`/category/${item.id}`">{{ item.name }}</RouterLink>

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

### 响应式监听路由变化
解决url从/category/100跳转到/category/101时候只变化url页面不更新问题

使用watch监听的方法
```
# 方法一
const getRouteId = () =>{
  return route.params.id
}

// 监听分类id变化
watch(getRouteId ,(newId) => {
    if(newId){
      getCategory(newId)
    }
  },
  {
    immediate:true
  }
)
```

使用onBeforeRouteUpdate解决
```
import { useRoute,onBeforeRouteUpdate } from 'vue-router';

const categoryData = ref([])
const route = useRoute()

const getCategory = async(id = route.params.id) => {
  const res = await getCategoryAPI(id)
  categoryData.value = res.data.result
}


// 路由参数变化时分类数据接口重新发送
onBeforeRouteUpdate((to)=>{  // to存储要跳转到的url
  getCategory(to.params.id)
})
```

### 将业务代码封装

分类相关逻辑
```
import {ref,onMounted} from 'vue'
import { getCategoryAPI } from '@/apis/category'
import { useRoute,onBeforeRouteUpdate } from 'vue-router';

export function useCategory() {
    const categoryData = ref([])
    const route = useRoute()

    const getCategory = async(id = route.params.id) => {
    const res = await getCategoryAPI(id)
    categoryData.value = res.data.result
    }

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

    // 路由参数变化时分类数据接口重新发送
    onBeforeRouteUpdate((to)=>{  // to存储要跳转到的url
    getCategory(to.params.id)
    })

    return {
       categoryData
    }
}
```

轮播图相关逻辑
```
import {ref,onMounted} from 'vue'
import { getBannerAPI } from '@/apis/home';

// 获取banner
export function useBanner(){
    const bannerList = ref([])

    const getBanner = async() => {
        const res = await getBannerAPI({distrbutionSite:2})
        console.log(res);
        bannerList.value = res.data.result
        
    }

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

    return {
        bannerList
    }
}
```

最后导入业务逻辑
```
<script setup>
import GoodsItem from '@/views/Home/components/GoodsItem.vue';
import { useBanner } from '@/views/Category/composables/useBanner'
import { useCategory } from '@/views/Category/composables/useCategory'

// 获取面包屑导航
const {categoryData} = useCategory()

// 获取banner
const {bannerList} = useBanner()



</script>
```

## 二级Category页面

设置动态路由路由传参
```
{
    path:'category/sub/:id',
    component: SubCategory
}
```

一级分类点击跳转
```
<ul>
  <li v-for="i in categoryData.children" :key="i.id">
    <RouterLink :to="`/category/sub/${i.id}`">
      <img :src="i.picture" />
      <p>{{ i.name }}</p>
    </RouterLink>
  </li>
</ul>
```

### 重置筛选条件
```
<script setup>
  // 获取基础列表数据渲染
  const goodList = ref([])
  const reqData = {
      categoryId:route.params.id,
      page:1,
      pageSize:20,
      sortField:'publishTime'
  }
  // 当前用户tab-change选中的筛选条件
  const newSortField = ref('publishTime')

  const getGoodList = async() =>{
      const res = await getSubCategoryAPI(reqData)
      goodList.value = res.data.result.items
  }

  onMounted(()=>{
      getGoodList()
  })

  const tabChange = ()=>{
      console.log('tab切换了',newSortField);
      // 重置筛选条件
      reqData.sortField = newSortField.value
      // 新查询回到首页
      reqData.page = 1
      getGoodList()
  }
<script>

<template>
<!-- 当前用户tab-change选中的筛选条件,触发@tab-change后每个el-tab-pane的name属性传给newSortField -->
      <el-tabs v-model="newSortField" @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>
```

### 列表无限加载

让用户根据屏幕的滚动进行分页请求加载新数据
```
<script setup>
// 停止加载
const disabled = ref(false)
// 加载更多
const load = async()=>{
    console.log('加载更多数据....');
    // 页数加一，获取下一页数据
    reqData.page++
    const res = await getSubCategoryAPI(reqData)
    console.log(res);
    
    // 拼接新老数据
    goodList.value = [...goodList.value,...res.data.result.items]
    // 没有新数据，停止加载
    if (res.data.result.items.length === 0){
        disabled.value = true
    }
}
<script>
```

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

### 定制路由
在切换不同路由的时候，可以自动滚动到页面的顶部，而不是停留在原先的位置。需要在router里面配置scrollBehavior
```
routes: [
   ...
  ],

  // 路由滚动定制
  scrollBehavior(){
    return{
      top:0
    }
  }
```

## Detail页面

### v-if避免数据空
响应式数据多层级数据可能拿不到，需要先用v-if选择其中一个数据，保证响应式数据加载完全在加入
```
<div class="container" v-if="goods.details">
    <el-breadcrumb-item :to="{ path: `/category/${goods.categories[1].id}` }">{{ goods.categories[1].name }}
</div>    
```

### 热榜区组件
通过props传参判断1：24小时热榜，2：周热榜
```
const props = defineProps({
    hotType:{
        type:Number
    }
})

const TYPEMAP = {
    1:'24小时热榜',
    2:'周热榜'
}

const title = computed(()=>{
    return TYPEMAP[props.hotType]
})

const hotList = ref([])
const route = useRoute()
const getHotList = async()=>{
    const res = await getHotGoodsAPI({
        id:route.params.id,
        type:props.hotType
    })
    hotList.value = res.data.result
}

onMounted(()=>{
    getHotList()
})
```
### 图片预览组件
使用到了import { useMouseInElement } from '@vueuse/core',首先使用const target = ref(null)结合 <div class="middle" ref="target">拿到小图对象，然后使用useMouseInElement的坐标去进一步计算蒙层的位置和边界。
```
<script setup>
import { ref, watch } from 'vue';
import { useMouseInElement } from '@vueuse/core'

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


// 1.小图切换大图显示
const activeIndex = ref(0)

const enterhandler = (i) => {
   activeIndex.value = i
}

// 2.控制放大镜坐标
const target = ref(null)

const {elementX,elementY,isOutside} = useMouseInElement(target)

// 3.控制滑块跟随鼠标移动，监控elementX、Y的变化

// 蒙层滑块的左边界
const left = ref(0)
// 蒙层滑块的上边界
const top = ref(0)

// 大图的坐标
const positionX = ref(0)
const positionY = ref(0)

watch([elementX,elementY,isOutside],()=>{
  // 如果鼠标没有进入图片视口就直接停止监视
  if(isOutside.value){
    return
  }
  console.log("后续逻辑执行了");
  
  // 横向
  if(elementX.value > 100 &&elementX.value < 300){
    left.value = elementX.value - 100
  }
  // 纵向
  if(elementY.value > 100 && elementY.value < 300){
    top.value = elementY.value - 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">
    <!-- 左侧大图-->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]" alt="" />
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left: `${left}px`, top: `${top}px` }" v-show="!isOutside"></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[activeIndex]})`,
        backgroundPositionX: `${positionX}px`,
        backgroundPositionY: `${positionY}px`,
      },
    ]" v-show="!isOutside"></div>
  </div>
</template>
```

## Login页面
### 验证规则
首先需要创建表单对象，使用 <el-form :model="form">的:model相结合绑定,然后创建规则对象，使用 <el-form :rules="rules">的:rules="rules"跟规则对象的具体字段相结合绑定,最后输入框的<el-input v-model="form.password"/>使用数据双向绑定v-model跟表单对象的具体字段相绑定。同时可以使用validator做自定义登录校验规则
```
<script setup>
// 1.准备表单对象
// 1.准备表单对象
const form = ref({
    account:'',
    password:'',
    agree:true
})

// 2.准备规则对象
const rules = {
    account:[
        { required:true,message:'用户名不能为空',trigger:'blur' }
    ],
    password:[
        { required:true,message:'密码不能为空',trigger:'blur' },
        { min:6,max:14,required:true,message:'密码长度6-14位',trigger:'blur' }
    ],
    agree:[
      {
        validator:(rule,value,callback) => {  // 自定义校验协议
          console.log(value);
          // 勾选就通过，不勾就不通过
          if(value){
            callback()
          }else{
            callback(new Error('请勾选协议'))
          }
          
        }
      }
    ]
}
<script>

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

### 统一校验
用户点击登录按钮的时候进行所以输入框的全部再次检查，只有都通过校验才能登录,使用validate方法
```
<script setup>
  // 3.用form实例做统一校验
  const formRef = ref(null)
  const doLogin = ()=>{
    // 调用实例方法
    formRef.value.validate((valid)=>{
      // valid:所有表单都通过校验才为true
      console.log('valid:所有表单都通过校验',valid); 
      // 如果各个输入框都通过校验才进行登陆操作
      if(valid){
        
      }
    })
  }
<script>

<template> 
  <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px"
                status-icon>
  <el-button @click="doLogin" size="large" class="subBtn">点击登录</el-button>
  </el-form>
</template> 
```

### 完成登录操作
我们这里使用到了import { ElMessage} from 'element-plus'来作为登录的友好型提示
```
import {loginAPI} from '@/apis/user'
import { useRouter } from 'vue-router'
import { ElMessage} from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'


// 3.用form实例做统一校验
const formRef = ref(null)
const router = useRouter()
const doLogin = ()=>{
  const {account,password} = form.value
  // 调用实例方法
  formRef.value.validate(async (valid)=>{
    // valid:所有表单都通过校验才为true
    console.log('valid:所有表单都通过校验',valid); 
    // 如果各个输入框都通过校验才进行登陆操作
    if(valid){
      const res = await loginAPI({account,password})
      console.log(res);
      // 1.提示用户
      ElMessage({type:'success',message:'登录成功'})
      // 2.跳转页面
      router.replace({path:'/'})
    }
  })
}
```
然后还有登录失败的情况，使用响应拦截器对失败操作做个同一个管理
```
import { ElMessage} from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

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

### 使用Pinia管理登录数据
需要使用pinia持久化保存登录token，所以需要使用相关持久化插件npm i pinia-plugin-persistedstate。

注册持久化
```
// pinia持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'



const app = createApp(App)

const pinia = createPinia()
// 注册持久化插件
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
```

创建user相关的数据仓库
```
// 管理用户相关数据

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})
        userInfo.value = res.data.result
    }
    // 3.return出state和action
    return {
        userInfo,
        getUserInfo
    }
},{
    persist:true // 开启持久化
})
```

### 登录后操作
需要根据存储在localStore里面的user信息判断导航栏是已登录还是未登录状态
```
<script setup>
  import router from '@/router';
  import {useUserStore} from '@/stores/user'

  const userStore = useUserStore()

</script>

<template v-if="userStore.userInfo.token">
    <li><a href="javascript:;"><i class="iconfont icon-user"></i>{{ userStore.userInfo.account }}</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>
```

### 给请求拦截器添加token请求头
```
import { useUserStore } from '@/stores/user'

// 请求拦截器
httpInstance.interceptors.request.use(config =>{
    // 1.从pinia获取token信息
    const userStore = useUserStore()
    // 2.按照后端要求处理token信息
    const token = userStore.userInfo.token
    if(token) {
        config.headers.Authorization = `Bearer ${token}`
    }
    return config
},e => Promise.reject(e))
```

### 退出登录
el-popconfirm组件是一个确认的小弹窗二次确认，所以使用@confirm触发方法调用退出登录的方法

```
<script setup>
import {useUserStore} from '@/stores/user'
import { useRouter } from 'vue-router';

const userStore = useUserStore()
const router = useRouter()
const comfirm = () => {
  console.log('用户退出了');
  // 1.清除pinia信息
  userStore.clearUserInfo()
  // 2.跳转登录页面
  router.push('/login')  
}

</script>

<template>
  <el-popconfirm @confirm="comfirm" title="确认退出吗?" confirm-button-text="确认" cancel-button-text="取消">
    <template #reference>
      <a href="javascript:;">退出登录</a>
    </template>
  </el-popconfirm>    
</template>
```

user.js也要创建一个清除用户信息的方法
```
// 3.退出时清除用户信息
    const clearUserInfo = () => {
        userInfo.value = {}
    }
    // 4.return出state和action
    return {
        userInfo,
        getUserInfo,
        clearUserInfo
    }
```
### token无效401报错
```
// 响应拦截器
httpInstance.interceptors.response.use(res => res, e =>{
    // 1.从pinia获取token信息
    const userStore = useUserStore()
    // 统一错误提示
    ElMessage({
        type:'warning',
        message: e.response.data.message
    })
    

    if (e.response.status == 401) {
        // 2.清除用户信息
        userStore.clearUserInfo()
        // 3.跳转登录路由
        router.push('/login')
    }
    
    return Promise.reject(e)
})
```
## HeaderCart页面
首先完成添加购物车操作
```
// 封装购物车模块

import {defineStore} from 'pinia'
import {computed, ref} from 'vue'

export const useCartStore = defineStore('cart',()=>{
    // 1.定义state
    const cartList = ref([])
    // 2.定义action
    // 添加购物车数据
    const addCart = (goods) => {
        // 添加购物车操作
        // 判断有没有加入过购物车，加入过就数量加一，没有再添加
        const item = cartList.value.find((item)=>{
            return goods.skuId === item.skuId
        })
        if(item) {
            item.count++
        }else {
            cartList.value.push(goods)
        }
    }
    // 删除购物车数据
    const delCart = (skuId) => {
        const idx = cartList.value.findIndex((item) => {
            return skuId === item.skuId
        })
        cartList.value.splice(idx,1)
    }

    // 3.计算属性
    // 1.总的数量
    const allCount = computed(()=>{
        return cartList.value.reduce((a,c)=> a + c.count,0)
    })
    // 2.总的价格
    const allPrice = computed(()=>{
        return cartList.value.reduce((a,c)=> a + c.count * c.price ,0)
    })
    return {
        cartList,
        addCart,
        delCart,
        allCount,
        allPrice
    }
},{
    persist:true // 开启持久化
})
```
商品Detail页面进行商品规格数量操作后添加购物车
```
<script setup>
import {getDetail} from '@/apis/detail'
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import DetailHot from './components/DetailHot.vue';
import { ElMessage } from 'element-plus';
import {useCartStore} from '@/stores/cartStore.js'


const goods = ref({})
const route = useRoute()
const cartStore = useCartStore()

const getGoods = async()=>{
  const res = await getDetail(route.params.id)
  goods.value = res.data.result
}

onMounted(()=>{
  getGoods()
})

let skuObj = {}
const skuChange= (sku)=>{
  console.log(sku);
  skuObj = sku  
}

// 绑定的商品数量
const count = ref(1)
// 加减商品数量
const countChange = ()=>{
  console.log(count.value);
}

// 添加购物车
const addCart = () => {
  if(skuObj.skuId){
    // 规格已经选择
    cartStore.addCart({
      id:goods.value.id,
      name:goods.value.name,
      picture:goods.value.mainPictures[0],
      price:goods.value.price,
      count:count.value,
      skuId:skuObj.skuId,
      attrsText:skuObj.specsText,
      selected:true
    })
  }else{
    // 规格没有选择，提示用户
    ElMessage.warning('请选择规格')
  }
}

</script>

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

  <!-- 数据组件 -->
  <el-input-number v-model="count" @change="countChange"></el-input-number>

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

## CartList页面
### 单选/多选功能
首先提供cartStore的action和getter
```
// 单选功能
const singleCheck = (skuId,selected) => {
    const item = cartList.value.find((item)=> {
        return item.id === skuId
    })
    item.selected = selected
}
// 全选功能
const allCheck = (selected)=>{
    cartList.value.forEach((item)=>{
    return item.selected = selected
    })
}

 // 是否全选
const isAll = computed(()=>{
    return cartList.value.every((item)=>{
        return item.selected
    })
})
```

然后修改页面交互，注意如果用singeChange(i, i.selected) 这段表达式，直接算出两个参数的当前旧值，把这两个固定的值缓存下来；selected数据无法更新，所以要用箭头函数二次包裹(selected)=>singeChange(i,selected)
```
<script setup>
import { useCartStore } from '@/stores/cartStore';

const cartStore = useCartStore()

const singeChange = (i,selected) => {
    console.log('单选状况:',i.id,selected);
    cartStore.singleCheck(i.id,selected)
}

const allCheck = (selected)=>{
    console.log('全选状况:',selected);
    cartStore.allCheck(selected)
}
</script>

<template>

 <!-- 多选框 -->
<el-checkbox :model-value="cartStore.isAll" @change="(selected)=>allCheck(selected)"/>
<!-- 单选框 -->
<el-checkbox :model-value="i.selected" @change="(selected)=>singeChange(i,selected)"/> 
</template>
```
### 未登录的本地购物车和登陆后购物车的合并
cartStore
```
// 封装购物车模块

import {defineStore} from 'pinia'
import {computed, ref} from 'vue'
import { useUserStore } from './user'
import { delCartAPI, findNewCartListAPI, insertCartAPI } from '@/apis/cart'

export const useCartStore = defineStore('cart',()=>{
    const useStore = useUserStore()
    const isLogin = computed(()=>{
        return useStore.userInfo.token
    })
    // 1.定义state
    const cartList = ref([])
    // 2.定义action
    // 获取更新购物车列表
    const updateNewList = async()=>{
        const res = await findNewCartListAPI()
        cartList.value = res.data.result
    }
    // 添加购物车数据
    const addCart = async(goods) => {
        const {skuId,count} = goods
        if (isLogin.value) {
            // 登录之后的逻辑
            await insertCartAPI({skuId,count})
            updateNewList()

        }else {
            // 添加购物车操作
            // 判断有没有加入过购物车，加入过就数量加一，没有再添加
            const item = cartList.value.find((item)=>{
                return goods.skuId === item.skuId
            })
            if(item) {
                item.count++
            }else {
                cartList.value.push(goods)
            }
        }
    }
    // 删除购物车数据
    const delCart = async(skuId) => {
        if(isLogin.value) {
            // 登录后删除购物车数据
            await delCartAPI([skuId])
            updateNewList()
        }else{
            const idx = cartList.value.findIndex((item) => {
                return skuId === item.skuId
            })
            cartList.value.splice(idx,1)
        }
        
    }
    // 清除购物车
    const clearCart = ()=> {
        cartList.value = []
    }
    // 单选功能
    const singleCheck = (skuId,selected) => {
        const item = cartList.value.find((item)=> {
            return item.id === skuId
        })
        item.selected = selected
    }
    

    // 全选功能
    const allCheck = (selected)=>{
       cartList.value.forEach((item)=>{
        return item.selected = selected
       })
    }

    // 3.计算属性
    // 1.总的数量
    const allCount = computed(()=>{
        return cartList.value.reduce((a,c)=> a + c.count,0)
    })
    // 2.总的价格
    const allPrice = computed(()=>{
        return cartList.value.reduce((a,c)=> a + c.count * c.price ,0)
    })
    // 3.已勾选的数量
    const selectedCount = computed(()=>{
        return cartList.value.filter((item)=>{
            return item.selected
        }).reduce((a,c)=>{
            return a + c.count
        },0)
    })
    // 4.已勾选的总价格
    const selectedPrice = computed(()=>{
        return cartList.value.filter((item)=>{
            return item.selected
        }).reduce((a,c)=>{
            return a + c.count * c.price
        },0)
    })
    // 是否全选
    const isAll = computed(()=>{
        return cartList.value.every((item)=>{
            return item.selected
        })
    })
    return {
        updateNewList,
        cartList,
        addCart,
        delCart,
        clearCart,
        singleCheck,
        allCheck,
        allCount,
        allPrice,
        isAll,
        selectedCount,
        selectedPrice
    }
},{
    persist:true // 开启持久化
})
```

userStore
```
// 管理用户相关数据

import { defineStore } from "pinia";
import {ref} from 'vue'
import { loginAPI } from "@/apis/user";
import { useCartStore } from "./cartStore";
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})
        userInfo.value = res.data.result
        // 合并购物车操作
        await mergeCartAPI(cartStore.cartList.map((item)=>{
            return {
                skuId:item.skuId,
                selected:item.selected,
                count:item.count
            }
        }))
        cartStore.updateNewList()
    }
    // 3.退出时清除用户信息
    const clearUserInfo = () => {
        userInfo.value = {}
        // 退出登录清除购物车数据
        cartStore.clearCart()
    }
    // 4.return出state和action
    return {
        userInfo,
        getUserInfo,
        clearUserInfo
    }
},{
    persist:true // 开启持久化
})
```

## 订单页面
### 打开切换地址弹窗
```
<script setup>
import { getCheckInfoAPI,createOrderAPI } from '@/apis/checkout'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useCartStore } from '@/stores/cartStore'

const cartStore = useCartStore()
const router =useRouter()
const checkInfo = ref({})  // 订单对象
const curAddress = ref({})  // 地址对象

const getCheckInfo = async()=>{
  const res = await getCheckInfoAPI()
  checkInfo.value = res.data.result
  const item = checkInfo.value.userAddresses.find(item=>item.isDefault === 0)
  curAddress.value = item
}

// 控制弹窗开启
const showDialog = ref(false)

// 切换地址
const activeAddress = ref({})
const switchAddress = (item)=>{
  activeAddress.value = item
  console.log(activeAddress.value);
}

const confirm = () => {
  // 切换当前地址
  curAddress.value = activeAddress.value
  // 关闭弹窗
  showDialog.value = false
  activeAddress.value = {}
}

// 创建订单
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.data.result.id
   
   // 跳转路由
   router.push({
    path:'/pay',
    query:{
      id:orderId
    }
   })
   // 更新购物车
   cartStore.updateNewList()

}

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

<template>
<el-button size="large" @click="showDialog = true">切换地址</el-button>

<!-- 切换地址 -->
  <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">
        <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 @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
  ```
## Pay页面 & PayBack页面
### 支付流程
  
![支付流程](./picture/支付流程.png "支付流程")  

原本逻辑需要结合支付宝沙箱远端接口，逻辑如下
```
<script setup>
  // 支付地址
  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 setup>

<template>
  <a class="btn alipay" :href="payUrl"></a>
</template>
```

但是远端的沙箱太麻烦了选择直接跳转到PayBack页面，默认成功.然后用shift+alt+A快捷键将刚刚的支付地址多行注释掉
```
<button class="btn alipay" @click="router.push({
    path:'/paycallback',
    query:{
      payResult: true,
      orderId: route.query.id
    }
    })" >
</button>
```

### 支付倒计时组件
因为封装倒计时组件需要将时间格式化所以需要插件，npm i dayjs
```
// 封装倒计时逻辑函数
import  dayjs  from 'dayjs'
import {computed, onUnmounted, ref} from 'vue'


export const useCountDown = ()=> {
    let timer = null
    // 1.响应式数据
    const time = ref(0)
    const formatTime = computed(()=>dayjs.unix(time.value).format('mm分ss秒'))
    // 2.开启倒计时函数
    const start = (currentTime) => {
        // 1. 拦截非法入参：≤0 直接不开启倒计时
        if (currentTime <= 0) return
        // 防止重复调用start，叠加多个定时器
        if (timer) clearInterval(timer)

        time.value = currentTime
        // 开始倒计时逻辑
        timer = setInterval(()=>{
            time.value --
            // 2. 倒计时到0，自动销毁定时器，停止递减
            if (time.value <= 0) {
                clearInterval(timer)
                timer = null
            }
        },1000)
    }

    onUnmounted(()=>{
        // 组件销毁清除定时器
        if (timer) {
            clearInterval(timer)
            timer = null
        } 
    })
    return {
        formatTime,
        start
    }
}
```

### 会员中心页面
### 分页逻辑判断，需要分页插件<el-pagination/>
```
<script setup>
import  { ref, onMounted } from 'vue'
import { getUserOrder } from '@/apis/order'


// 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 = ref([])

const params = {
    orderState:0,
    page:1,
    pageSize:2
  }

const total = ref(0)  


const getOrderList = async()=>{
  const res = await getUserOrder(params)
  orderList.value = res.data.result.items
  total.value = res.data.result.counts
}

const tabChange = async(type) => {
    console.log(type);
    params.orderState = type
    getOrderList()
}

const changePage = (page) =>{
  console.log('当前页数:',page);
  
  params.page = page
  getOrderList()
}

onMounted(()=>{
  getOrderList()
})

</script>

<template>
<!-- 分页 -->
  <div class="pagination-container">
      <el-pagination :total="total"  分页总条数 
    :page-size="params.pageSize"    当前页数
      @current-change="(page)=>changePage(page)"  当前页数切换函数
      background layout="prev, pager, next" />
  </div>
</template>          
```

## SKU组件详解
路径demo:src\components\SKU