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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190

核心代码 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")
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

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

目录结构

前端目录结构

• 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