效果圖：

5.3.1 訂單詳情界面效果圖.png

5.3.2 發(fā)票信息界面效果圖.png

1、通過(guò)點(diǎn)擊“歷史訂單”界面中每個(gè)item進(jìn)行跳轉(zhuǎn)“訂單詳情頁(yè)面”。由于“訂單詳情”界面為“歷史訂單”界面中內(nèi)層界面，因此在orders文件夾下創(chuàng)建detail.vue頁(yè)面（如圖5.3.3），同時(shí)在pages.json中進(jìn)行樣式設(shè)定，樣式代碼如下：

    {
        "path" : "pages/orders/detail",
        "style" : 
        {
            "navigationBarTitleText": "訂單詳情",
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#ffffff"
        }
    }

5.3.3 detail.vue文件.png

通過(guò)在orders.vue中，對(duì)class="order-item"的view（每個(gè)列表item的點(diǎn)擊事件）設(shè)置@tap="detail(item.id)"交互效果，點(diǎn)擊后跳轉(zhuǎn)“訂單詳情”界面并將每份歷史訂單的id傳入訂單詳情界面。

    detail(id) {//跳轉(zhuǎn)訂單詳情 
        uni.navigateTo({
            url: '/pages/orders/detail?id=' + id
        })
    }

2、“訂單詳情”界面通過(guò)import Orders from '@/api/orders'引入訂單數(shù)據(jù)，使用“歷史訂單”界面?zhèn)魉瓦^(guò)來(lái)的id，找到當(dāng)前訂單，代碼如下：

    onLoad({ id }) {
        this.order = Orders.find(item => item.id == id);//訂單詳情
    }

通過(guò)該order對(duì)象完成頁(yè)面布局，由于該界面涉及屬性較多，參數(shù)對(duì)應(yīng)頁(yè)面信息如圖5.3.4、5.3.5所示。

5.3.4 部分訂單詳情參數(shù)屬性1.png

5.3.5 部分訂單詳情參數(shù)屬性2.png

3、界面下方通過(guò)order.invoice_status參數(shù)判斷是否需要開(kāi)發(fā)票或者查看發(fā)票按鈕顯示與否。order.invoice_status為0表明該訂單未曾開(kāi)過(guò)發(fā)票，若不為0表明該訂單已開(kāi)過(guò)發(fā)票。具體代碼如下，效果如圖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">去開(kāi)發(fā)票</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">查看發(fā)票</button></view>
        <view class="item"><button type="primary" plain @tap="review">去評(píng)價(jià)</button></view>
        <view class="item"><button type="primary">再來(lái)一單</button></view>
    </view>

5.3.6 invoice_status對(duì)比.png

4、按照UI設(shè)計(jì)師設(shè)計(jì)效果圖5.3.1完成界面開(kāi)發(fā)。頁(yè)面開(kāi)發(fā)完成后，需對(duì)開(kāi)具發(fā)票處進(jìn)行研發(fā)。新建“發(fā)票信息”界面invoice.vue并設(shè)置其樣式。

    {
        "path" : "pages/invoice/invoice",
        "style" : 
        {
            "navigationBarTitleText": "發(fā)票信息",
            "navigationBarTextStyle": "black",
            "navigationBarBackgroundColor": "#ffffff"
        }
    }

通過(guò)在detail.vue頁(yè)面中進(jìn)行交互@tap="goToInvoice"方法完成跳轉(zhuǎn)。

    goToInvoice() {//開(kāi)發(fā)票
        uni.navigateTo({
            url: '/pages/invoice/invoice'
        })
    }

在invoice.vue頁(yè)面中定義form參數(shù)，用于裝載發(fā)票信息并通過(guò)v-model進(jìn)行雙向綁定。

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

按照設(shè)計(jì)效果圖完成該頁(yè)面布局，需注意發(fā)票抬頭選擇時(shí)，@tap="form.taitou=0"的用法，如圖5.3.7。

    <view class="label">發(fā)票抬頭</view>
    <view class="flex">
        <view class="radio-group">
            <view class="radio mr-20" :class="{'checked': !form.taitou}" @tap="form.taitou=0">個(gè)人</view>
            <view class="radio" :class="{'checked': form.taitou}" @tap="form.taitou=1">公司</view>
        </view>
    </view>

5.3.7 發(fā)票抬頭用法.png

5、至此，“訂單詳情”界面的相關(guān)功能開(kāi)發(fā)工作結(jié)束。團(tuán)隊(duì)成員應(yīng)運(yùn)用SourceTree工具執(zhí)行版本控制的提交操作，以便為本次工單的開(kāi)發(fā)代碼建立歷史版本的記錄。

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>金額總計(jì)</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>下單時(shí)間</view>
                                <view class="font-weight-bold">{{ $util.formatDateTime(order.created_at) }}</view>
                            </view>
                            <view class="pay-cell">
                                <view>下單門(mén)店</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>訂單號(hào)</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>取單號(hào)</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>取餐時(shí)間</view>
                            <view class="font-weight-bold">立即取餐</view>
                        </view>
                        <view class="pay-cell">
                            <view>完成制作時(shí)間</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">去開(kāi)發(fā)票</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">查看發(fā)票</button></view>
        <view class="item"><button type="primary" plain @tap="review">去評(píng)價(jià)</button></view>
        <view class="item"><button type="primary">再來(lái)一單</button></view>
    </view>
    </view>
</template>

<script>
    import Orders from '@/api/orders';//引入訂單數(shù)據(jù)
    export default {
        data() {
            return {
                order: {}
            };
        },
        onLoad({ id }) {
            this.order = Orders.find(item => item.id == id);//訂單詳情
        },
        methods:{
            goToInvoice() {//開(kāi)發(fā)票
                uni.navigateTo({
                    url: '/pages/invoice/invoice'
                })
            },
            review() {//評(píng)價(jià)
                const date = this.order.completed_time.split(' ')[0]//時(shí)間
                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>
    <!-- 開(kāi)發(fā)票頁(yè)面 -->
    <view class="container">
        <view class="invoice-box-1">
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex">
                    <view class="label">發(fā)票類型</view>
                    <view class="flex-fill d-flex flex-column">
                        <view>電子普通發(fā)票</view>
                        <view style="font-size: 20rpx">電子發(fā)票與紙質(zhì)普通發(fā)票具備同等法律效益，可支持報(bào)銷入賬</view>
                    </view>
                </view>
            </list-cell>
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex">
                    <view class="label">發(fā)票內(nèi)容</view>
                    <view class="flex-fill">食品</view>
                </view>
            </list-cell>
            <list-cell :hover="false" line-left line-right>
                <view class="d-flex">
                    <view class="label">發(fā)票抬頭</view>
                    <view class="flex">
                        <view class="radio-group">
                            <view class="radio mr-20" :class="{'checked': !form.taitou}" @tap="form.taitou=0">個(gè)人</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="請(qǐng)輸入姓名" 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="請(qǐng)輸入郵箱地址" 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">手機(jī)號(hào)</view>
                    <view class="flex-fill d-flex">
                        <input class="flex-fill mr-20" type="text" v-model="form.telphone" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" 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>導(dǎo)入發(fā)票抬頭</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>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

任務(wù)5-3操作步驟：訂單詳情界面

任務(wù)5-3操作步驟：訂單詳情界面

效果圖：

detail.vue完整代碼

invoice.vue完整代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

任務(wù)5-3操作步驟：訂單詳情界面

效果圖：

detail.vue完整代碼

invoice.vue完整代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av