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

菜品数量加减

// page.vue
<template>
    <view>
        <block v-for="(item, index) in goods" :key="index">
            <block v-for="(itemgood, good_index) in item.good_query" :key="good_index">
                <view>
                    <view @click.stop="reduce(index, good_index, item.cid, itemgood)"></view>
                </view>
                <view>
                    <view @click.stop="plus(index, good_index, item.cid, itemgood)"></view>
                </view>
            </block>
        </block>
        <Cart></Cart>
		<Details></Details>
    </view>
</template>
<script>
	import Cart from './components/shopping-cart.vue'
    import Details from './components/goods-details.vue'
	export default {
		components: {
			Cart,
			Details
		},
        data () {
            return {
                card: false
            }
        },
        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)
                
            },
            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)
            },
            shopping_Cart_add_sub (index, QU, _id, cid, good_index, unitprice) {
                this.$set(this.shopping_card[index], 'quantity', QU)
                this.$set(this.shopping_card[index], 'total_price', QU * unitprice)
            }
        }
    }
</script>

Vue.set(object, propertyName, value) 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

.stop 阻止事件继续传播

---

下面内容需结合购物车和菜品详情页一起看，可先略过

购物车菜品数量加减

// shopping-cart.vue
<template>
    <view>
        <block v-for="(item, index) in shopping_card" :key="index">
            <view>
                <view @click="reduce(index, item.quantity, item._id, item.cid, item.good_index, item.unitprice)"></view>
            </view>
            <view>
                <view @click="plus(index, item.quantity, item._id, item.cid, item.good_index, item.unitprice)"></view>
            </view>
        </block>
    </view>
</template>
<script>
	export default {
        methods: {
            reduce (index, quantity, _id, cid, good_index, unitprice) {
                const QU = quantity - 1
                this.$parent.shopping_Cart_add_sub(index, QU, _id, cid, good_index, unitprice)
            },
            plus (index, quantity, _id, cid, good_index, unitprice) {
                const QU = quantity + 1
                this.$parent.shopping_Cart_add_sub(index, QU, _id, cid, good_index, unitprice)
            }
        }
    }
</script>

详情页菜品数量加减

// goods-details.vue
<template>
    <view>
        <view>
            <view @click="reduce(pro_details)"></view>
        </view>
        <view>
            <view @click="plus(pro_details)"></view>
        </view>
    </view>
</template>
<script>
	export default {
        props: {
			pro_details: Object
		},
        methods: {
            plus(pro_details) {
                let {index, good_index, cid, itemgood} = pro_details
                this.$parent.plus(index, good_index, cid, itemgood)
                console.log(itemgood.quantity)
            },
            reduce(pro_details) {
                let {index, good_index, cid, itemgood} = pro_details
                this.$parent.reduce(index, good_index, cid, itemgood)
            }
        }
    }
</script>

看了眼归档竟停了5天没写🤦🏻 一开始是因为拔牙疼了两天没有心思，后面突如其来的疫情和被困在家的神兽又搞得没点空闲🤦🏻