订单详情页

订单详情页.png

获取订单数据

// pages/order-details/details.vue
// 省略部分代码
data () {
    return {
        Price,
        overall: 0,
        other_data: {},
        comp_data: [],
        goods_data: []
    }
},
methods: {
    async get_menu () {
        try {
            let field_obj = {number_of_diners: false, transac_status: false, order_receiving: false, openid: false}
            let res = await good_collect.where({table_number: '002', transac_status: 'unsettled'}).field(field_obj).get()
            let res_data = res.data[0].menu
            res_data.forEach(item => this.overall += item.goods_list.length)
            this.other_data = res.data[0]
            this.comp_data = res_data
            this.goods_data = res_data.map(item => {
                return {
                    backup_data: item.backup_data,
                    goods_list: item.goods_list.slice(0, 3),
                    max: item.goods_list.length
                }
            })
        } catch (e) {}
    }
},
onLoad () {
    this.get_menu()
}

Collection.where(condition: Object) 指定查询条件，返回带新查询条件的新的集合引用
Collection.field(projection: Object) 指定返回结果中记录需返回的字段。方法接受一个必填对象用于指定需返回的字段，对象的各个 key 表示要返回或不要返回的字段，value 传入 true|false（或 1|-1）表示要返回还是不要返回

点击展开全部

实现思路：

通过 max 值来判断是否已经展示全部

大于3，折叠多余数据
小于3，展示全部

comp_data 存放完整数据

goods_data 存放前三项数据，goods_data[0] 表示第一次下单的前三项数据

点击 index 对应的展开全部按钮，更新该次 goods_data[index] 下单的所有数据，并将对应的 max 值标记为0表示已展示全部隐藏展开全部按钮。

// psges/order-details/details.vue
// 省略部分代码
methods: {
    opEn (index) {
        this.$set(this.goods_data[index], 'goods_list', this.comp_data[index].goods_list)
        this.$set(this.goods_data[index], 'max', 0)
    }
}

加菜

点击加菜按钮跳转到点单页面，用到 wx.reLaunch(Object object)

// psges/order-details/details.vue
// 省略部分代码
methods: {
    add_Dish () {
        wx.reLaunch({
            url: '/pages/home-page/page'
        })
    }
}