01-购物车功能分析
目的:了解购物车两种状态下的操作逻辑,方便后续的开发理解。
总结:
- 购物车的各种操作都会有两种状态的区分,但是不会在组件中去区分。
- 而是在封装在vuex中的actions中去区分,在组件上只需调用actions即可。
- 在actions中通过user信息去区分登录状态
- 未登录,通过mutations修改vuex中的数据即可,vuex已经实现持久化,会同步保持在本地。
- 已登录,通过api接口去服务端操作,响应成功后通过mutations修改vuex中的数据即可,它也会同步在本地。
- 不管何种操作何种状态返回一个promise,然后组件能够判断操作是否完毕是否成功,再而去做其他事情。
注意:
- 登录后,需要合并本地购物车到服务端。
- 退出后,清空vuex数据也会同步清空本地数据。
02-加入购物车-本地
目的:完成商品详情的添加购物车操作,支持未登录状态。
大致步骤:
- 约定本地存储的信息内容
- 编写mutaions添加购物车逻辑
- 编写actions进行添加操作
- 在商品详情页实现添加逻辑
落地代码:
- vuex中的修改数据,获取数据
src/store/module/cart.js
// 本地:id skuId name picture price nowPrice count attrsText selected stock isEffective
// 线上:比上面多 isCollect 有用 discount 无用 两项项信息
mutations: {
insertCart (state, goods) {
const sameIndex = state.list.findIndex(item => item.skuId === goods.skuId)
// 逻辑:有相同的给goods累加数量,删除相同skuId的商品
if (sameIndex >= 0) {
goods.count = state.list[sameIndex].count + goods.count
state.list.splice(sameIndex, 1)
}
state.list.unshift(goods)
}
},
actions: {
insertCart (ctx, goods) {
return new Promise((resolve, reject) => {
if (ctx.rootState.user.token) {
// 已登录 TODO
} else {
// 未登录
ctx.commit('insertCart', goods)
resolve()
}
})
}
}
- 商品详情点击加入购物车
src/views/goods/index.vue
setup () {
const goods = useGoods()
// sku改变时候触发
const changeSku = (sku) => {
if (sku.skuId) {
goods.value.price = sku.price
goods.value.oldPrice = sku.oldPrice
goods.value.inventory = sku.inventory
+ currSku.value = sku
} else {
+ currSku.value = null
}
}
// 选择的数量
const num = ref(1)
// 加入购物车逻辑
+ const currSku = ref(null)
+ const instance = getCurrentInstance()
+ const store = useStore()
+ const insertCart = () => {
+ if (!currSku.value) {
+ return instance.proxy.$message('请选择商品规格')
+ }
+ if (num.value > goods.inventory) {
+ return instance.proxy.$message('库存不足')
+ }
+ store.dispatch('cart/insertCart', {
+ id: goods.value.id,
+ skuId: currSku.value.skuId,
+ name: goods.value.name,
+ picture: goods.value.mainPictures[0],
+ price: currSku.value.price,
+ nowPrice: currSku.value.price,
+ count: num.value,
+ attrsText: currSku.value.specsText,
+ selected: true,
+ isEffective: true,
+ stock: currSku.value.inventory
+ }).then(() => {
+ instance.proxy.$message('加入购物车成功', 'success')
+ })
+ }
+ return { goods, changeSku, num, insertCart }
+ }
03-头部购物车-基础布局
目的:在网站头部购物车图片处,鼠标经过展示购物车列表。
大致步骤:
- 提取头部购物车组件,完成基础布局。
- 通过getters返回,有效商品总数,和有效商品列表。
- 渲染组件。
落的代码:
- 新建组件
src/components/app-header-cart.vue
<template>
<div class="cart">
<a class="curr" href="#"> <i class="iconfont icon-cart"></i><em>2</em> </a>
</div>
</template>
<script>
export default {
name: 'AppHeaderCart'
}
</script>
<style scoped lang="less">
.cart {
width: 50px;
.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;
}
}
}
</style>
- 使用组件,和删除迁移过的代码
src/components/app-header.vue
<div class="search">
<i class="iconfont icon-search"></i>
<input type="text" placeholder="搜一搜">
</div>
+ <AppHeaderCart />
</div>
</header>
</template>
<script>
import AppHeaderNav from './app-header-nav'
+import AppHeaderCart from './app-header-cart'
export default {
name: 'AppHeader',
+ components: { AppHeaderNav, AppHeaderCart }
}
</script>
基础布局和弹出效果 src/components/app-header-cart.vue
<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 4" :key="i">
<RouterLink to="">
<img src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png" alt="">
<div class="center">
<p class="name ellipsis-2">和手足干裂说拜拜 ingrams手足皲裂修复霜</p>
<p class="attr ellipsis">颜色:修复绿瓶 容量:150ml</p>
</div>
<div class="right">
<p class="price">¥45.00</p>
<p class="count">x2</p>
</div>
</RouterLink>
<i class="iconfont icon-close-new"></i>
</div>
</div>
<div class="foot">
<div class="total">
<p>共 3 件商品</p>
<p>¥135.00</p>
</div>
<XtxButton type="plain">去购物车结算</XtxButton>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'AppHeaderCart'
}
</script>
<style scoped lang="less">
.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 .4s .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 .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>
- 使用getters得到有效商品列表和期种件数
getters: {
// 有效商品列表
validList (state) {
return state.list.filter(item => item.stock > 0 && item.isEffective)
},
// 有效商品件数
validTotal (state, getters) {
return getters.validList.reduce((p, c) => p + c.count, 0)
},
// 有效商品总金额
validAmount (state, getters) {
return getters.validList.reduce((p, c) => p + c.nowPrice * 100 * c.count, 0) / 100
},
},
- 渲染头部购物车信息
<template>
<div class="cart">
<a class="curr" href="javascript:;">
<i class="iconfont icon-cart"></i><em>{{$store.getters['cart/validTotal']}}</em>
</a>
<div class="layer">
<div class="list">
<div class="item" v-for="item in $store.getters['cart/validList']" :key="item.skuId">
<RouterLink to="">
<img :src="item.picture" alt="">
<div class="center">
<p class="name ellipsis-2">{{item.name}}</p>
<p class="attr ellipsis">{{item.attrsText}}</p>
</div>
<div class="right">
<p class="price">¥{{item.nowPrice}}</p>
<p class="count">x{{item.count}}</p>
</div>
</RouterLink>
<i class="iconfont icon-close-new"></i>
</div>
</div>
<div class="foot">
<div class="total">
<p>共 {{$store.getters['cart/validTotal']}} 件商品</p>
<p>¥{{$store.getters['cart/validAmount']}}</p>
</div>
<XtxButton type="plain">去购物车结算</XtxButton>
</div>
</div>
</div>
</template>