UNIAPP实战项目笔记35 购物车的价格合计和结算数量

UNIAPP实战项目笔记35 购物车的价格合计和结算数量

通过mapGetters,mapMutations实现此功能

• 在 shopcart.vue中 使用,具体代码cart.js中实现

核心代码 shopcart.vue

部分

....
<view class="foot-total">
     <view class="foot-count">
         合计：
         <text class="f-active-color">
             ￥{{totalCount.pprice}}
         </text>
     </view>
     <view class="foot-num">
         结算({{totalCount.num}})
     </view>
 </view>

完整代码

<template>
    <view class="shop-cart">
        <template v-if=" list.length > 0 ">
                
            <!-- 自定义导航栏 -->
            <uniNavBar
                title="购物车"
                :rightText=" isNavBar ? '完成' : '编辑'"
                fixed="true"
                statusBar="true"
                @clickRight=" isNavBar = !isNavBar"
            ></uniNavBar>
            
            <!-- 商品内容 -->
            <view class="shop-item" v-for="(item,index) in list" :key="index">
                <label for="" class="radio" @tap="selectedItem(index)">
                    <radio value="" color="#FF3333" :checked="item.checked" /> <text></text>
                </label>
                <image class="shop-img" :src="item.imgUrl" mode=""></image>
                <view class="shop-text">
                    <view class="shop-name">
                        {{item.name}}
                    </view>
                    <view class="shop-color f-color">
                        {{item.color}}
                    </view>
                    <view class="shop-price">
                        <view class="">
                            ￥{{item.pprice}}
                        </view>
                        <view class="">
                            X {{item.num}}
                        </view>
                    </view>
                </view>
            </view>
            <!-- 底部 -->
            <view class="shop-foot">
                <label for="" class="radio foot-radio" @tap='checkedAllFn'>
                    <radio value="" color="#FF3333" :checked="checkedAll"></radio><text>全选</text>
                </label>
                <view class="foot-total">
                    <view class="foot-count">
                        合计：
                        <text class="f-active-color">
                            ￥{{totalCount.pprice}}
                        </text>
                    </view>
                    <view class="foot-num">
                        结算({{totalCount.num}})
                    </view>
                </view>
                
            </view>
            
        </template>
        <template v-else>
            <uniNavBar 
                title="购物车"
                fixed="true"
                statusBar="true"
            ></uniNavBar>
            <view class="shop-else-list">
                <text>囧~ 购物车还是空的~</text>
            </view>
        </template>
    </view>
</template>

<script>
    import uniNavBar from '@/components/uni/uni-nav-bar/uni-nav-bar.vue'
    
    // 状态机引入
    import {mapState,mapActions,mapGetters,mapMutations} from 'vuex'
    export default {
        data() {
            return {
                isNavBar:false,
            }
        },
        computed:{
            // 状态机数据处理
            ...mapState({
                list:state=>state.cart.list
            }),
            ...mapGetters(['checkedAll','totalCount'])
        },
        components:{
            uniNavBar
        },
        methods: {
            ...mapActions(['checkedAllFn']),
            ...mapMutations(['selectedItem'])
        }
    }
</script>

<style lang="scss">

.shop-list{
    padding-bottom: 100rpx;
}
.shop-else-list{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shop-item{
    display: flex;
    padding: 20rpx;
    align-items: center;
    background-color: #f7f7f7;
    margin-bottom: 10rpx;
}
.shop-img{
    width: 200rpx;
    height: 200rpx;
}
.shop-text{
    flex: 1;
    padding-left: 20rpx;
}
.shop-color{
    font-size: 24rpx;
}
.shop-price{
    display: flex;
    justify-content: space-between;
}

.shop-foot{
    border-top: 2rpx solid #f7f7f7;
    background-color: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100rpx;
}
.foot-radio{
    padding-left: 20rpx;
}
.foot-total{
    display: flex;
}
.foot-count{
    line-height: 100rpx;
    padding: 0 20rpx;
    font-size: 32rpx;
}
.foot-num{
    background-color: #49bdfb;
    color: #FFFFFF;
    padding: 0 60rpx;
    line-height: 100rpx;
}
</style>

核心代码 cart.js部分

// 合计 结算数量
 totalCount(state){
     let total = {
         pprice:0,
         num:0
     }
     state.list.forEach(v=>{
         // 是否选中
         if(state.selectedList.indexOf(v.id) > -1){
             // 合计
             total.pprice += v.pprice*v.num;
             // 结算数量
             total.num = state.selectedList.length;
         }
     })            
     
     return total;
 }

完整代码

export default{
    state:{
        list:[
                {
                    id:1,
                    name:"332经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                    color:"颜色：嘿嘿嘿激活",
                    imgUrl:"../../static/logo.png",
                    pprice:"27",
                    num:1,
                    checked:false
                },{
                    id:2,
                    name:"032经济法能聚聚会技能大赛 经济法能聚聚会技能大赛",
                    color:"颜色：嘿嘿嘿激活",
                    imgUrl:"../../static/logo.png",
                    pprice:"48",
                    num:6,
                    checked:false
                }
            ],
        selectedList:[]
        
    },
    getters:{
        // 判断是否 全选
        checkedAll(state){
            return state.list.length === state.selectedList.length;
        },
        // 合计 结算数量
        totalCount(state){
            let total = {
                pprice:0,
                num:0
            }
            state.list.forEach(v=>{
                // 是否选中
                if(state.selectedList.indexOf(v.id) > -1){
                    // 合计
                    total.pprice += v.pprice*v.num;
                    // 结算数量
                    total.num = state.selectedList.length;
                }
            })            
            
            return total;
        }
    },
    mutations:{
        // 全选
        checkAll(state){
            state.selectedList = state.list.map(v=>{
                v.checked = true;
                return v.id;
            })
        },
        // 全不选
        unCheckAll(state){
            state.list.forEach(v=>{
                v.checked = false;
            })
            state.selectedList = [];
        },
        // 单选
        selectedItem(state,index){
            let id = state.list[index].id;
            let i = state.selectedList.indexOf(id);
            // 如果selectList已经存在就代表他之前的选中状态,checked=false,并且在selectedList删除
            if (i>-1) {
                state.list[index].checked = false;
                return state.selectedList.splice(i,1);
            }
            // 如果之前没有选中,checked=true,把当前的id添加到selectedList
            state.list[index].checked = true;
            state.selectedList.push(id);
        }
    },
    actions:{
        checkedAllFn({commit,getters}){
            getters.checkedAll ? commit("unCheckAll") : commit("checkAll")
        }
    }
}

实际案例图片 计算选中价格和数量

目录结构

前端目录结构

• manifest.json 配置文件： appid、logo…

• pages.json 配置文件： 导航、 tabbar、 路由

• main.js vue初始化入口文件

• App.vue 全局配置：样式、全局监视

• static 静态资源：图片、字体图标

• page 页面

  • index
    • index.vue
  • list
    • list.vue
  • my
    • my.vue
  • search
    • search.vue
  • search-list
    • search-list.vue
  • shopcart
    • shopcart.vue
  • details
    • details.vue

• components 组件

  • index
    • Banner.vue
    • Hot.vue
    • Icons.vue
    • indexSwiper.vue
    • Recommend.vue
    • Shop.vue
  • common
    • Card.vue
    • Commondity.vue
    • CommondityList.vue
    • Line.vue
    • ShopList.vue
  • uni
    • uni-number-box
      • uni-number-box.vue
    • uni-icons
      • uni-icons.vue
    • uni-nav-bar
      • uni-nav-bar.vue

• common 公共文件：全局css文件 || 全局js文件

  • api
    • request.js
  • common.css
  • uni.css

• store vuex状态机文件

  • modules
    • cart.js
  • index.js