UNIAPP实战项目笔记36 购物车的编辑商品数量完成的功能和数量价格计算

Bertha 。 2024-04-01 15:28 90阅读 0赞

### UNIAPP实战项目笔记36 购物车的编辑商品数量完成的功能和数量价格计算 ###

#### 通过template标签,和uniNumberBox组件实现此功能 ####

*  在 shopcart.vue中 使用uniNumberBox组件实现数量的增减

#### 核心代码 shopcart.vue ####

<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>
                            <template v-if="!isNavBar">
                                <view>x {
        {
        item.num}}</view>
                            </template>
                            <template v-else>
                                <uniNumberBox
                                    :value="item.num"
                                    min="1"
                                    @change="changeNumber($event,index)"
                                ></uniNumberBox>
                            </template>
                        </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>
                    <template v-if="!isNavBar">
                        <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>
                    <template v-else>
                        <view class="foot-total">
                            <view class="foot-num" style="background-color: black;">
                                移入收藏夹
                            </view>
                            <view class="foot-num">
                                删除
                            </view>
                        </view>
                    </template>
                </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 uniNumberBox from '@/components/uni/uni-number-box/uni-number-box.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,uniNumberBox
            },
            methods: {
        
                ...mapActions(['checkedAllFn']),
                ...mapMutations(['selectedItem']),
                changeNumber(value,index){
        
                    this.list[index].num = value;
                }
            }
        }
    </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部分 ####

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")
            }
        }
    }

#### 实际案例图片 购物车的编辑商品数量完成的功能和数量价格计算 ####

![购物车的编辑商品数量完成的功能和数量价格计算][0db1ac0ced3e4c8e8037471644306c82.png]

#### 目录结构 ####

##### 前端目录结构 #####

*  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

[0db1ac0ced3e4c8e8037471644306c82.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/bad0ba7a86ed405fa8a872e9658be103.png