前端Vue小兔鲜儿电商项目实战Day07

临界点oc 2024-06-20 12:33:04 阅读 85

一、会员中心 - 整体功能梳理和路由配置

1. 整体功能梳理

①个人中心 - 个人信息和猜你喜欢数据渲染②我的订单 - 各种状态下的订单列表展示

2. 路由配置（包括三级路由配置）

①准备个人中心模板组件 - src/views/Member/index.vue

②绑定个人中心二级路由 - src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'// ... ...import Member from '@/views/Member/index.vue'const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', component: Layout, children: [ // ... ... { path: 'member', component: Member } ] }, { path: '/login', component: Login } ]})export default router

③绑定路由跳转 - src/views/Layout/components/LayoutNav.vue

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

④准备个人中心和我的订单三级路由组件

src/views/Member/components/UserInfo.vue

src/views/Member/components/UserOrder.vue

⑤配置三级路由 - src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'// ... ...import Member from '@/views/Member/index.vue'import UserInfo from '@/views/Member/components/UserInfo.vue'import UserOrder from '@/views/Member/components/UserOrder.vue'const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', component: Layout, children: [ // ... ... { path: 'member', component: Member, children: [ { path: 'user', component: UserInfo }, { path: 'order', component: UserOrder } ] } ] }, { path: '/login', component: Login } ]export default router

⑥绑定路由跳转关系 - src/views/Layout/components/LayoutNav.vue

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

二、会员中心-个人中心信息渲染

1. 使用Pinia数据渲染个人信息 - src/views/Member/UserInfo.vue

<script setup>// 导入userStoreimport { useUserStore } from '@/stores/userStore'const userStore = useUserStore()</script><template>  <div class="user-meta"> <div class="avatar"> <img :src="userStore.userInfo?.avatar" /> </div> <h4>{ { userStore.userInfo?.account }}</h4> </div></template>

2. 封装猜你喜欢接口 - src/apis/user/js

// 获取 “猜你喜欢”数据export const getLikeListAPI = ({ limit = 4 }) => { return instance({ url: '/goods/relevant', params: { limit } })}

3. 渲染猜你喜欢数据 - src/views/Member/UserInfo.vue

三、会员中心 - 我的订单

1. 订单基础列表渲染

①封装订单接口 -src/apis/order.js

import instance from '@/utils/http.js'/*params: { orderState:0, page:1, pageSize:2}*/export const getUserOrder = (params) => { return instance({ url: '/member/order', method: 'GET', params })}

如果此处有出现以下问题，在src/utils/http.js里把timeout改大一点！！！

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

2. tab切换实现

重点：切换tab时修改OrderState参数，再次发起请求获取订单列表数据

①绑定tab-change事件 -src/views/Member/components/UserOrder.vue

<script setup>// tab切换const tabChange = (type) => { params.value.orderState = type getOrderList()}</script><template> <el-tabs @tab-change="tabChange">  </el-tabs></template>

3. 分页逻辑实现

①使用列表数据生成分页（页数 = 总条数 / 每页条数）

②切换分页修改page参数，再次获取订单列表数据

src/views/Member/components/UserOrder.vue

4. 会员中心 - 细节优化

①默认三级路由设置

效果：当路由path为二级路由路径member的时候，右侧可以显示个人中心三级路由对应的组件

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'// ... ...const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', component: Layout, children: [ // ... ... { path: 'member', component: Member, redirect: 'member/user', children: [ { path: 'user', component: UserInfo }, { path: 'order', component: UserOrder } ] } ] }, { path: '/login', component: Login } ], // ... ...})export default router

②订单状态显示适配

思路：根据接口文档给到的状态码和中文的对应关系进行适配

四、拓展课 - SKU组件封装

1. 认识SKU组件

SKU组件的作用是为了让用户能够选择商品的规格，从而提交购物车，在选择的过程中，组件的选中状态要进行更新，组件还要提示用户当前规格是否禁用，每次选中都要产出对应的Sku数据

①创建项目 vite-sku-demo

清空无关的文件

②安装axios和sass

pnpm add sass -D

pnpm add axios

③初始化规格渲染 -src/Sku/Sku.vue

④在App.vue中导入渲染

<script setup>import Sku from '@/Sku/Sku.vue'</script><template> <Sku></Sku></template><style scoped></style>

2. 点击规格更新选中状态

核心思路：

①如何当前已经激活，就取消激活②如果当前未激活，就把和自己同排的其他规格取消激活，再把自己激活

响应式数据设计：每一个规格项都添加一个selected字段来决定是否激活，true为激活，false为未激活。

样式处理：使用selected配合动态class属性，selected为true就显示对应激活类名

src/Sku/Sku.vue

3. 点击规格更新禁用状态 - 生成有效路径字典

规格禁用的判断依据是什么？

核核心原理：当前的规格Sku，或者组合起来的规格Sku，在skus数组中对应项的库存为零时，当前规格会被禁用，生成路径字典是为了协助和简化这个匹配过程。

实现步骤：

①根据库存字段得到有效的Sku数组②根据有效的Sku数组使用powerSet算法得到所有子集③根据子集生成路径字典对象

①powerSet算法 - src/Sku/power-set.js

export default function bwPowerSet (originalSet) { const subSets = [] // We will have 2^n possible combinations (where n is a length of original set). // It is because for every element of original set we will decide whether to include // it or not (2 options for each set element). const numberOfCombinations = 2 ** originalSet.length // Each number in binary representation in a range from 0 to 2^n does exactly what we need: // it shows by its bits (0 or 1) whether to include related element from the set or not. // For example, for the set {1, 2, 3} the binary number of 0b010 would mean that we need to // include only "2" to the current set. for (let combinationIndex = 0; combinationIndex < numberOfCombinations; combinationIndex += 1) { const subSet = [] for (let setElementIndex = 0; setElementIndex < originalSet.length; setElementIndex += 1) { // Decide whether we need to include current element into the subset or not. if (combinationIndex & (1 << setElementIndex)) { subSet.push(originalSet[setElementIndex]) } } // Add current subset to the list of all subsets. subSets.push(subSet) } return subSets }

②src/Sku/Sku.vue

4. 点击规格更新禁用状态 - 初始化规格禁用

思路：遍历每一个规格对象，使用name字段作为key去路径字典pathMap中做匹配，匹配不上则禁用

怎么做到显示上的禁用呢？

①通过增加disabled字段，匹配上路径字段，disable为false；匹配不上路径字段，disabled为true②配合动态类名控制禁用类名

给的例子中该商品的所有规格的库存都为0，因为三张图片都会显示禁用状态！！！

5. 点击规格更新状态 - 点击时组合禁用更新

思路（点击规格时）：

①按照顺序得到规格选中项的数组 ['蓝色', '20cm', undefined]

②遍历每一个规格

把name字段的值填充到对应的位置过滤掉undefined项使用join方法形成一个有效的key使用key去pathMap中进行匹配，匹配不上，则当前项禁用

6. 产出有效的SKU信息

1. 什么时有效的SKU？

2. 如何判断当前用户已经选择了所有有效的规格？

已选择项数组['蓝色', '20cm', undefined]中找不到undefined，那么用户已经选择了所有的有效规格，此时可以产出数据。

3. 如何获取当前的SKU信息对象？

把已选择项数组拼接为路径字典的key，去路径字典pathMap中找即可。

// 切换选中状态const changeSelectedStatus = ( item, val ) => { if(val.disabled) return // item: 同一排的对象，val：当前点击项 if ( val.selected ) { val.selected = false } else { item.values.forEach( val => val.selected = false ) val.selected = true } // 点击按钮时更新 updateDisabledStatus(goods.value.specs, pathMap) // 产出SKU对象数据 const index = getSelectedValues(goods.value.specs).findIndex(item => item === undefined) if(index > -1) { // 找到, 信息不完整 console.log('找到了, 信息不完整') } else { // 没找到，信息完整，可以产出 console.log('没找到，信息完整，可以产出') // 获取sku对象 const key = getSelectedValues(goods.value.specs).join('-') const skuIds = pathMap[key] console.log(skuIds) // 以skuId作为匹配项去goods.value.skus数组中找 const skuObj = goods.value.skus.find(item => item.id === skuIds[0]) console.log('sku对象为', skuObj) }}

完结撒花！！！

上一篇：开发中的前端和后端

下一篇： chatgpt这么火？前端如何实现类似chatgpt的对话页面

本文标签

前端Vue小兔鲜儿电商项目实战Day07

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。