实战篇笔记 扫码点餐小程序云开发小程序端（六）

购物车组件

封装组件

在 pages\home-page\components 目录创建 shopping-cart.vue，布局样式代码略

调用组件

<template>
    <view>
        <Cart></Cart>
    </view>
</template>
<script>
	import Cart from './components/shopping-cart.vue'
	export default {
		components:{
			Cart
		}
    }
</script>

切换显示关闭购物车

点击父组件

实现思路：用一个布尔值标记购物车显隐状态，当值为 true 时，购物车显示，此时若点击父组件控制购物车显隐状态开关，值切换为 false，购物车关闭

// page.vue
<template>
    <view>
        <view @click="pop_Shopping(!card)"></view>
        <Cart v-if="card"></Cart>
    </view>
</template>
<script>
	import Cart from './components/shopping-cart.vue'
	export default {
		components: {
			Cart
		},
        data () {
            return {
                card: false
            }
        },
        methods: {
            pop_Shopping (value = true) {
				this.card = value
			}
        }
    }
</script>

点击子组件（即购物车组件）

实现思路：点击时调用父组件pop_Shopping 函数

// shopping-cart.vue
<template>
    <view>
        <view @click="close()"></view>
    </view>
</template>
<script>
	export default {
        methods: {
            close () {
				this.$parent.pop_Shopping(false)
			}
        }
    }
</script>

添加菜品进购物车

实现思路：通过 v-bind 将父组件向购物车组件动态赋值，用一个数组 shopping_card 存储父组件中要加入购物车的菜品，购物车组件通过 props 接收菜品数据

// page.vue
<template>
    <view>
        <Cart v-if="card" :shopping_card="shopping_card"></Cart>
    </view>
</template>
<script>
	import Cart from './components/shopping-cart.vue'
	export default {
		components: {
			Cart
		},
        data () {
            return {
                shopping_card: []
            }
        },
        methods: {
            plus (index, good_index, cid, itemgood) {
				const {quantity, image, name, unitprice, unit, _id} = itemgood
				const QU = quantity + 1
				this.$set(this.goods[index].good_query[good_index], 'quantity', QU)
				const arr = {image, name, unitprice, quantity: QU, unit, total_price: unitprice * QU, _id, cid, good_index}
				this.shopping_Cart(arr)
				
			},
			reduce (index, good_index, cid, itemgood) {
				const {quantity, image, name, unitprice, unit, _id} = itemgood
				const QU = quantity - 1
				this.$set(this.goods[index].good_query[good_index], 'quantity', QU)
				const arr = {image, name, unitprice, quantity: QU, unit, total_price: unitprice * QU, _id, cid, good_index}
				this.shopping_Cart(arr)
			},
            shopping_Cart (arr) {
				this.shopping_card.push(arr)
			}
        }
    }
</script>

// shopping-cart.vue
<template>
    <view>
        <block v-for="(item, index) in shopping_card" :key="index">
            <view class="goods-list" v-if="item.quantity > 0">
                <view class="goods-list-image">
                    <image :src="item.image[0].url" mode="aspectFill"></image>
                </view>
                <view class="goods-list-name">
                    <view>{{item.name}}</view>
                    <view class="list-text">
                        <text>￥</text>
                        <text>{{item.total_price}}</text>
                    </view>
                </view>
                <view class="goods-quantity">
                    <view>{{item.quantity}}</view>
                </view>
            </view>
        </block>
    </view>
</template>
<script>
	export default {
        props: {
			shopping_card: Array
		}
    }
</script>

这里 plus 和 reduce 为加减菜品函数，见 实战篇笔记 扫码点餐小程序云开发小程序端（五）

清空购物车所有菜品

实现思路：父组件封装好清空数据的接口，子组件进行调用

// page.vue
<script>
        methods: {
            empty_data () {
				this.shopping_card = []
				this.itemize.forEach(item => item.sale_quantity = 0)
				this.goods.forEach(item => {
					item.good_query.forEach(T => T.quantity = 0)
				})
			}
        }
    }
</script>

// shopping-cart.vue
<template>
    <view>
        <view @click="empTy()"></view>
    </view>
</template>
<script>
	export default {
        methods: {
            empTy () {
				this.$parent.empty_data()
			}
        }
    }
</script>