继续完善订单页面。
这里需要将一些方法进行抽离。
src\effects\cartEffects.js
import { computed } from 'vue'
import { useStore } from 'vuex'
// 添加、减少到购物车功能
export const useCommonCartEffect = shopId => {
const store = useStore()
const cartList = store.state.cartList // 加入购物车的商品
/**
* 加入或减少购物车数量
* @param {String} shopId 店铺id
* @param {String} productId 商品id
* @param {Object} productInfo 商品信息集
* @param {Number} num 加入购物车的数量
*/
const changeCartItemInfo = (shopId, productId, productInfo, num) => {
console.log(
'changeCartItemInfo:',
'shopId:' + shopId,
'productId:' + productId,
'productInfo:' + JSON.stringify(productInfo),
'num:' + num
)
// 更新vuex中的值
store.commit('changeItemToCart', { shopId, productId, productInfo, num })
}
// 获得加入购物车商品的信息集
const productList = computed(() => {
const productInfoList = cartList[shopId]?.productList || [] // 不存在默认空数组
return productInfoList
})
// 获得商铺名称
const shopName = computed(() => {
const shopName = cartList[shopId]?.shopName || '' // 不存在默认空数组
return shopName
})
// 计算shopId下所有cartList的商品数量total、价钱之和totalPrice
const calculations = computed(() => {
const productList = cartList[shopId]?.productList
const resultData = {
// 总商品数量
total: 0,
// 总金额
totalPrice: 0,
// 全选
isAllChecked: true
}
if (productList) {
for (const i in productList) {
const product = productList[i]
// 总商品数量
resultData.total += product.count
// 总金额
if (product.checked === true) {
resultData.totalPrice += product.count * product.price
}
// 全选
if (product.count > 0 && !product.checked) {
resultData.isAllChecked = false
}
}
resultData.totalPrice = resultData.totalPrice.toFixed(2) // 保留2位小数
}
return resultData
})
// const total = computed(() => {
// const productList = cartList[shopId]?.productList
// let count = 0
// if (productList) {
// for (const i in productList) {
// const product = productList[i]
// count += product.count
// }
// }
// return count
// })
// const totalPrice = computed(() => {
// const productList = cartList[shopId]?.productList
// let count = 0
// if (productList) {
// for (const i in productList) {
// const product = productList[i]
// if (product.checked === true) {
// count += product.count * product.price
// }
// }
// }
// return count.toFixed(2) // 保留2位小数
// })
// 全选的计算属性
// const allChecked = computed(() => {
// const productList = cartList[shopId]?.productList
// let result = true
// if (productList) {
// for (const i in productList) {
// const product = productList[i]
// if (product.count > 0 && !product.checked) {
// result = false
// break
// }
// }
// }
// return result
// })
return { cartList, shopName, calculations, productList, changeCartItemInfo }
}
这样,src\views\shop\Cart.vue做了减法:
......
......
进一步完善src\views\orderConfirmation\OrderConfirmation.vue
确认订单
收货地址
西安一二三大学四五六科技园2号楼
张三(先生)
18012341234
{{shopName}}
{{ item.name }}
¥
{{ item.price }}×{{item.count}}
¥
{{( item.price*item.count ).toFixed(2)}}
实付金额 ¥{{calculations.totalPrice}}
提交订单
效果如下:
image.png
此时在浏览器进行如下的操作:
image.png
发现当商品很多时,还是会被撑开。
进一步完善:
......
{{shopName}}
......
......
image.png
继续完善css
&__list {
overflow-y: scroll;
position: absolute;
left: 0;
right: 0;
bottom: 0.6rem;
top: 2.05rem;
}
image.png
发现滚动效果出来了。继续尝试调试:
&__list {
overflow-y: scroll;
position: absolute;
padding: 0 0.16rem;
left: 0;
right: 0;
bottom: 0.6rem;
top: 2.46rem;
background: #fff;
}
image.png
效果很接近。继续调试:
&__list {
overflow-y: scroll;
position: absolute;
margin: 0 0.18rem;
left: 0;
right: 0;
bottom: 0.6rem;
top: 2.46rem;
background: #fff;
}
image.png
到这里我们想要的效果基本都出来了。
继续微调优化:
.products {
......
&__title {
......
}
&__list {
......
}
&__item {
position: relative;
display: flex;
padding: 0.16rem 0.16rem 0 0.16rem;
......
}
}
image.png
当元素很多的时候,这样效果已经很好了,但当元素较少时,就会如下样式:
image.png
解决办法:创建一个wrapper容器包裹list,然后通过list的背景色自动撑开容器。
......
{{shopName}}
......
......
image.png
这样效果就出来了。
完善逻辑:
{{shopName}}
......
顺便修复一下之前的一个bug:
src\store\index.js
/**
* 加入或减少购物车数量
* @param {*} state
* @param {String} shopId 店铺id
* @param {String} productId 商品id
* @param {Object} productInfo 商品信息集
* @param {Number} num 加入购物车的数量
* @param {*} payload
*/
changeItemToCart(state, payload) {
......
product.count <= 0 && (shopInfo.productList[productId].count = 0)
......
},