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

详情页组件

封装组件

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

调用组件

<template>
    <view>
        <Details></Details>
    </view>
</template>
<script>
	import Details from './components/goods-details.vue'
	export default {
		components:{
			Details
		}
    }
</script>

切换显示菜品详情

实现思路同 切换显示关闭购物车

// page.vue
<template>
    <view>
        <view @click="popup_item()"></view>
        <Details v-if="popupItem"></Details>
    </view>
</template>
<script>
	import Details from './components/goods-details.vue'
	export default {
		components: {
			Details
		},
        data () {
            return {
                popupItem: false
            }
        },
        methods: {
            pop_Shopping (value = true) {
				this.popupItem = value
			}
        }
    }
</script>

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

获取数据

实现思路：通过 v-bind 将父组件向购物车组件动态赋值，用一个对象 pro_details 存储父组件当前点击菜品数据，详情页组件通过 props 接收菜品数据

// 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" @click="popup_item(true, index, good_index, item.cid, itemgood)">
            </block>
        </block>
        <Details v-if="popupItem" :pro_details="pro_details"></Details>
    </view>
</template>
<script>
	import Details from './components/goods-details.vue'
	export default {
		components: {
			Details
		},
        data () {
            return {
                pro_details: {}
            }
        },
        methods: {
            popup_item (value = true, index, good_index, cid, itemgood) {
				this.popupItem = value
				this.pro_details = {index, good_index, cid, itemgood}
			}
        }
    }
</script>

// goods-details.vue
<template>
    <view>
        <view class="details-name">{{pro_details.itemgood.name}}</view>
    </view>
</template>
<script>
	export default {
        props: {
			pro_details: Object
		}
    }
</script>

同步计算菜品加减

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