效果图：

5.3.1 订单详情界面效果图.png

5.3.2 发票信息界面效果图.png

1、通过点击“历史订单”界面中每个item进行跳转“订单详情页面”。由于“订单详情”界面为“历史订单”界面中内层界面，因此在orders文件夹下创建detail.vue页面（如图5.3.3），同时在pages.json中进行样式设定，样式代码如下：

    {
        "path" : "pages/orders/detail",
        "style" : 
        {
            "navigationBarTitleText": "订单详情",
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#ffffff"
        }
    }

5.3.3 detail.vue文件.png

    detail(id) {//跳转订单详情 
        uni.navigateTo({
            url: '/pages/orders/detail?id=' + id
        })
    }

2、“订单详情”界面通过import Orders from '@/api/orders'引入订单数据，使用“历史订单”界面传送过来的id，找到当前订单，代码如下：

    onLoad({ id }) {
        this.order = Orders.find(item => item.id == id);//订单详情
    }

通过该order对象完成页面布局，由于该界面涉及属性较多，参数对应页面信息如图5.3.4、5.3.5所示。

5.3.4 部分订单详情参数属性1.png

5.3.5 部分订单详情参数属性2.png

3、界面下方通过order.invoice_status参数判断是否需要开发票或者查看发票按钮显示与否。order.invoice_status为0表明该订单未曾开过发票，若不为0表明该订单已开过发票。具体代码如下，效果如图5.3.6：

        <view class="position-relative w-100">
            <image src="/static/images/order/bottom.png" mode="widthFix" class="w-100"></image>
            <view class="invote-box" v-if="!order.invoice_status">
                <view class="font-size-base text-color-primary" @tap="goToInvoice">去开发票</view>
                <image src="/static/images/order/right.png"></image>
            </view>
        </view>
    </view>
    <view class="btn-box">
        <view class="item" v-if="order.invoice_status > 0"><button type="primary">查看发票</button></view>
        <view class="item"><button type="primary" plain @tap="review">去评价</button></view>
        <view class="item"><button type="primary">再来一单</button></view>
    </view>

5.3.6 invoice_status对比.png

4、按照UI设计师设计效果图5.3.1完成界面开发。页面开发完成后，需对开具发票处进行研发。新建“发票信息”界面invoice.vue并设置其样式。

    {
        "path" : "pages/invoice/invoice",
        "style" : 
        {
            "navigationBarTitleText": "发票信息",
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#ffffff"
        }
    }

通过在detail.vue页面中进行交互@tap="goToInvoice"方法完成跳转。

    goToInvoice() {//开发票
        uni.navigateTo({
            url: '/pages/invoice/invoice'
        })
    }

在invoice.vue页面中定义form参数，用于装载发票信息并通过v-model进行双向绑定。

    data() {
        return {
            form: {
                taitou: 0,
                username: '',
                email: '',
                telphone: ''
            }
        };
    }

按照设计效果图完成该页面布局，需注意发票抬头选择时，@tap="form.taitou=0"的用法，如图5.3.7。

    <view class="label">发票抬头</view>
    <view class="flex">
        <view class="radio-group">
            <view class="radio mr-20" :class="{'checked': !form.taitou}" @tap="form.taitou=0">个人</view>
            <view class="radio" :class="{'checked': form.taitou}" @tap="form.taitou=1">公司</view>
        </view>
    </view>

5.3.7 发票抬头用法.png

5、至此，“订单详情”界面的相关功能开发工作结束。团队成员应运用SourceTree工具执行版本控制的提交操作，以便为本次工单的开发代码建立历史版本的记录。

detail.vue完整代码

<template>
    <!-- 订单详情 -->
    <view class="container" style="padding:20rpx;">
        <view style="padding-bottom: 100rpx;">
            <view class="bg-white">
                <view class="section">
                    <!-- store info begin -->
                    <list-cell :hover="false">
                        <view class="w-100 d-flex align-items-center">
                            <view class="d-flex flex-column w-60">
                                <view class="w-100 font-size-lg text-color-base text-truncate mb-10">{{ order.store.name }}</view>
                                <view class="w-100 d-flex align-items-center overflow-hidden">
                                    <image src="/static/images/order/location.png" class="flex-shrink-0" style="width: 30rpx; height: 30rpx;"></image>
                                    <view class="text-truncate font-size-sm text-color-assist">{{ order.store.address }}</view>
                                </view>
                            </view>
                            <view class="d-flex justify-content-end align-items-center w-40">
                                <image src="/static/images/order/mobile.png" style="width: 60rpx; height: 60rpx;margin-right: 30rpx;"></image>
                                <image src="/static/images/order/navigation.png" style="width: 60rpx; height: 60rpx;"></image>
                            </view>
                        </view>
                    </list-cell>
                    <!-- store info end -->
                    <!-- goods begin -->
                    <list-cell :hover="false" padding="50rpx 30rpx">
                        <view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
                            <view class="w-100 d-flex align-items-center mb-40" v-for="(good, index) in order.goods" :key="index">
                                <view class="d-flex flex-column w-60 overflow-hidden">
                                    <view class="font-size-lg text-color-base mb-10 text-truncate">{{ good.name }}</view>
                                    <view class="font-size-sm text-color-assist text-truncate">{{ good.property }}</view>
                                </view>
                                <view class="d-flex w-40 align-items-center justify-content-between pl-30">
                                    <view class="font-size-base text-color-base">x{{ good.number }}</view>
                                    <view class="font-size-base text-color-base font-weight-bold">￥{{ good.price }}</view>
                                </view>
                            </view>
                        </view>
                    </list-cell>
                    <!-- goods end -->
                </view>
                <view class="section">
                    <!-- payment and amount begin -->
                    <list-cell :hover="false" padding="50rpx 30rpx">
                        <view class="w-100 d-flex flex-column">
                            <view class="pay-cell">
                                <view>支付方式</view>
                                <view class="font-weight-bold">{{ order.pay_mode }}</view>
                            </view>
                            <view class="pay-cell">
                                <view>金额总计</view>
                                <view class="font-weight-bold">￥{{ order.amount }}</view>
                            </view>
                        </view>
                    </list-cell>
                    <!-- payment and amount end -->
                </view>
                <view class="section">
                    <!-- order info begin -->
                    <list-cell :hover="false" padding="50rpx 30rpx">
                        <view class="w-100 d-flex flex-column">
                            <view class="pay-cell">
                                <view>下单时间</view>
                                <view class="font-weight-bold">{{ $util.formatDateTime(order.created_at) }}</view>
                            </view>
                            <view class="pay-cell">
                                <view>下单门店</view>
                                <view class="font-weight-bold">{{ order.store.name }}</view>
                            </view>
                            <view class="pay-cell">
                                <view>支付方式</view>
                                <view class="font-weight-bold">{{ order.pay_mode }}</view>
                            </view>
                            <view class="pay-cell">
                                <view>订单号</view>
                                <view class="font-weight-bold">{{ order.order_no }}</view>
                            </view>
                        </view>
                    </list-cell>
                    <!-- order info end -->
                </view>
                <!-- order other info begin -->
                <list-cell :hover="false" padding="50rpx 30rpx 20rpx" last>
                    <view class="w-100 d-flex flex-column">
                        <view class="pay-cell">
                            <view>取单号</view>
                            <view class="font-weight-bold">{{ order.sort_num }}</view>
                        </view>
                        <view class="pay-cell">
                            <view>享用方式</view>
                            <view class="font-weight-bold">自取</view>
                        </view>
                        <view class="pay-cell">
                            <view>取餐时间</view>
                            <view class="font-weight-bold">立即取餐</view>
                        </view>
                        <view class="pay-cell">
                            <view>完成制作时间</view>
                            <view class="font-weight-bold">{{ order.productioned_time }}</view>
                        </view>
                        <view class="pay-cell">
                            <view>备注</view>
                            <view class="font-weight-bold">{{ order.postscript }}</view>
                        </view>
                    </view>
                </list-cell>
                <!-- order other info end -->
            </view>
        <view class="position-relative w-100">
            <image src="/static/images/order/bottom.png" mode="widthFix" class="w-100"></image>
            <view class="invote-box" v-if="!order.invoice_status">
                <view class="font-size-base text-color-primary" @tap="goToInvoice">去开发票</view>
                <image src="/static/images/order/right.png"></image>
            </view>
        </view>
    </view>
    <view class="btn-box">
        <view class="item" v-if="order.invoice_status > 0"><button type="primary">查看发票</button></view>
        <view class="item"><button type="primary" plain @tap="review">去评价</button></view>
        <view class="item"><button type="primary">再来一单</button></view>
    </view>
    </view>
</template>

<script>
    import Orders from '@/api/orders';//引入订单数据
    export default {
        data() {
            return {
                order: {}
            };
        },
        onLoad({ id }) {
            this.order = Orders.find(item => item.id == id);//订单详情
        },
        methods:{
            goToInvoice() {//开发票
                uni.navigateTo({
                    url: '/pages/invoice/invoice'
                })
            },
            review() {//评价
                const date = this.order.completed_time.split(' ')[0]//时间
                uni.navigateTo({
                    url: '/pages/review/review?storename=' + this.order.store.name + '&typeCate=' + this.order.typeCate + '&date=' + date
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
@mixin arch {
    content: "";
    position: absolute;
    background-color: $bg-color;
    width: 30rpx;
    height: 30rpx;
    bottom: -15rpx;
    z-index: 10;
    border-radius: 100%;
}

.section {
    position: relative;
    
    &::before {
        @include arch;
        left: -15rpx;
    }
    
    &::after {
        @include arch;
        right: -15rpx;
    }
}

.pay-cell {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $font-size-base;
    color: $text-color-base;
    margin-bottom: 40rpx;

    &:nth-last-child(1) {
        margin-bottom: 0;
    }
}

.invote-box {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    
    image {
        width: 30rpx;
        height: 30rpx;
    }
}

.btn-box {
    background-color: #ffffff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    z-index: 11;
    
    .item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20rpx 10rpx;
        flex: 1;
        flex-shrink: 0;
        
        button {
            width: 100%;
            border-radius: 50rem !important;
            height: 80rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
    }
}
</style>

invoice.vue完整代码

<template>
    <!-- 开发票页面 -->
    <view class="container">
        <view class="invoice-box-1">
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex">
                    <view class="label">发票类型</view>
                    <view class="flex-fill d-flex flex-column">
                        <view>电子普通发票</view>
                        <view style="font-size: 20rpx">电子发票与纸质普通发票具备同等法律效益，可支持报销入账</view>
                    </view>
                </view>
            </list-cell>
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex">
                    <view class="label">发票内容</view>
                    <view class="flex-fill">食品</view>
                </view>
            </list-cell>
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex">
                    <view class="label">发票抬头</view>
                    <view class="flex">
                        <view class="radio-group">
                            <view class="radio mr-20" :class="{'checked': !form.taitou}" @tap="form.taitou=0">个人</view>
                            <view class="radio" :class="{'checked': form.taitou}" @tap="form.taitou=1">公司</view>
                        </view>
                    </view>
                </view>
            </list-cell>
        </view>
        
        <view class="invoice-box-2">
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex w-100">
                    <view class="label">姓名</view>
                    <view class="flex-fill d-flex">
                        <input class="flex-fill mr-20" type="text" v-model="form.username" placeholder="请输入姓名" placeholder-class="font-size-sm text-color-assist">
                        <view class="text-color-danger">必填</view>
                    </view>
                </view>
            </list-cell>
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex w-100">
                    <view class="label">邮箱地址</view>
                    <view class="flex-fill d-flex">
                        <input class="flex-fill mr-20" type="text" v-model="form.email" placeholder="请输入邮箱地址" placeholder-class="font-size-sm text-color-assist">
                        <view class="text-color-danger">必填</view>
                    </view>
                </view>
            </list-cell>
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex w-100">
                    <view class="label">手机号</view>
                    <view class="flex-fill d-flex">
                        <input class="flex-fill mr-20" type="text" v-model="form.telphone" placeholder="请输入手机号码" placeholder-class="font-size-sm text-color-assist">
                        <view class="text-color-danger">必填</view>
                    </view>
                </view>
            </list-cell>
        </view>
        
        <view class="btn-box">
            <view class="item"><button type="primary" plain>导入发票抬头</button></view>
            <view class="item"><button type="primary">提交</button></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    taitou: 0,
                    username: '',
                    email: '',
                    telphone: ''
                }
            };
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        padding: 10rpx 20rpx;
    }
    
    .invoice-box-1, .invoice-box-2 {
        background-color: #FFFFFF;
        font-size: $font-size-sm;
        border-radius: 12rpx;
    }
    
    .invoice-box-1 {
        margin-bottom: 10rpx;
    }
    
    .radio-group {
        display: flex;
        justify-content: flex-start;
        
        .radio {
            padding: 10rpx 30rpx;
            border-radius: 6rpx;
            border: 2rpx solid $text-color-assist;
            color: $text-color-assist;
            font-size: $font-size-base;
            
            &.checked {
                background-color: $color-primary;
                color: $text-color-white;
                border: 2rpx solid $color-primary;
            }
        }
    }
    
    .label {
        width: 150rpx;
        color: $text-color-assist;
    }
    
    .btn-box {
        background-color: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120rpx;
        box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        z-index: 11;
        
        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20rpx 10rpx;
            flex: 1;
            flex-shrink: 0;
            
            button {
                width: 100%;
                border-radius: 50rem !important;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }
        }
    }
</style>