11.配置页面 - 结算区域
(1).把结算区域封装为组件
- 在
components目录中，新建my-settle结算组件：
- 初始化 my-settle 组件的基本结构和样式：
<template> <view class="my-settle-container"> <h1>结算</h1> </view> </template> <script> export default { name: "my-settle", data() { return { }; } } </script> <style lang="scss"> .my-settle-container { position: fixed; bottom: 0; width: 100%; height: 50px; background-color: rebeccapurple; } </style>
- 在 cart.vue 页面中使用自定义的 my-settle 组件，并美化页面样式，防止页面底部被覆盖：
<template> <view class="cart-container"> <!-- 使用自定义的 address 组件 --> <!-- 购物车商品列表的标题区域 --> <!-- 商品列表区域 --> <!-- 结算区域 --> <my-settle></my-settle> </view> </template> <style lang="scss"> .cart-container { padding-bottom: 50px; } </style>
(2).渲染结算区域的结构和样式
- 定义如下的 UI 结构：
<template> <view class="my-settle-container"> <!-- 全选 --> <label class="radio"> <radio color="#C00000" checked="true" /><text>全选</text> </label> <!-- 合计 --> <view class="amount-box"> 合计: <text class="amount">￥123.00</text> </view> <!-- 结算按钮 --> <view class="btn-settle"> 结算(0) </view> </view> </template>
- 美化样式：
<style lang="scss"> .my-settle-container { position: fixed; bottom: 0; width: 100%; height: 50px; background-color: white; display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding-left: 5px; // 全选 .radio { display: flex; align-items: center; } // 合计 .amount-box { // 金钱 .amount { color: #C00000; font-weight: bold; } } // 结算 .btn-settle { // 盒子高度 height: 50px; // 行高 line-height: 50px; background-color: #C00000; align-items: center; padding: 0 10px; min-width: 100px; text-align: center; } } </style>
(3). 动态渲染已勾选商品的总数量
- 在 store/cart.js 模块中，定义一个名称为 checkedCount 的 getters，用来统计已勾选商品的总数量：
// 勾选的商品的个数 checkedCount(state) { // 首先获取所有已勾选的项组成一个数组 // 然后利用数组的reduce((回调函数的返回值也就是return返回的,循环的item项)=>{},0)方法 : 第一个参数是回调函数,第二个参数是初始值 // 这里total初始化为0 return state.cart.filter(x => x.goods_state === true).reduce((total, item) => { return total += item.goods_count }, 0) }
- 在 my-settle 组件中，通过 mapGetters 辅助函数，将需要的 getters 映射到当前组件中使用：
import { mapGetters } from 'vuex' export default { computed: { ...mapGetters('m_cart', ['checkedCount']), }, data() { return {} }, }
- 将 checkedCount 的值渲染到页面中：
<!-- 结算按钮 --> <view class="btn-settle">结算({{checkedCount}})</view>
(5).动态渲染全选按钮的选中状态
1 .使用 mapGetters 辅助函数，将商品的总数量映射到当前组件中使用，并定义一个叫做 isFullCheck 的计算属性：
import { mapGetters } from 'vuex' export default { computed: { // 1. 将 total 映射到当前组件中 ...mapGetters('m_cart', ['checkedCount', 'total']), // 2. 是否全选 isFullCheck() { return this.total === this.checkedCount }, }, data() { return {} }, }
- 为 radio 组件动态绑定 checked 属性的值：
<!-- 全选区域 --> <label class="radio"> <radio color="#C00000" :checked="isFullCheck" /><text>全选</text> </label>
